/* MOVIMIENTO (29/09/2026) · los detalles que hacen que Fold se sienta vivo, sin rehacer la app.
   Va en su propio archivo (y movimiento.js) para no pisar estilos.css, que tocan otras ramas.
   Reglas que no se saltan:
   - ADITIVO: todo el contenido se ve por defecto. Ninguna regla de aquí deja algo con opacity 0 esperando
     a que un script lo enseñe; las animaciones parten de un estado visible o terminan solas en CSS.
   - Solo transform y opacity en lo que se mueve (el compositor lo pinta sin recalcular la página).
   - prefers-reduced-motion quita todo lo que no es esencial (bloque del final). */

:root {
  --mv-rapido: 140ms;
  --mv-medio: 240ms;
  --mv-lento: 420ms;
  --mv-curva: cubic-bezier(.16, 1, .3, 1);      /* llega decidida y frena suave */
  --mv-sale: cubic-bezier(.4, 0, 1, 1);
}

/* ---------------------------------------------------------------- superficies del navegador */
::selection { background: rgba(51, 88, 255, .28); }
input, textarea { caret-color: var(--cobalto-claro); }
.hilo, .lateral, .cuerpo-overlay, .hilo-soporte { scrollbar-width: thin; scrollbar-color: var(--costura-fuerte) transparent; }

/* Dos cajas de estilos.css (display: grid) ganaban al atributo hidden y salían VACÍAS bajo el hilo aunque
   no tuvieran nada que decir (visto en las capturas del 29/09/2026). Oculto es oculto. */
.primeros-pasos[hidden], .banda-ejemplo[hidden] { display: none; }

/* ---------------------------------------------------------------- CONVERSACIÓN */
/* Cada mensaje entra con un leve deslizamiento (lo mío, desde la derecha; lo de Fold, desde abajo).
   Sustituye a «entra» de estilos.css con la misma idea, un pelo más rica. */
.hilo .msg { animation: mv-msg var(--mv-lento) var(--mv-curva); transform-origin: 0 100%; }
.hilo .msg.yo { animation-name: mv-msg-yo; transform-origin: 100% 100%; }
@keyframes mv-msg { from { opacity: .0; transform: translateY(10px) scale(.985); } }
@keyframes mv-msg-yo { from { opacity: .0; transform: translateX(12px) scale(.985); } }

/* «Pensando»: tres puntos que respiran junto al texto (los pone movimiento.js; el texto ya dice lo que pasa). */
.mv-puntos { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.mv-puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--cobalto); animation: mv-punto 1.1s ease-in-out infinite; }
.mv-puntos i:nth-child(2) { animation-delay: .15s; }
.mv-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes mv-punto { 0%, 80%, 100% { transform: translateY(0) scale(.7); opacity: .35; } 40% { transform: translateY(-3px) scale(1); opacity: 1; } }
/* El folio «pensando» respira muy poco: se nota que está vivo sin distraer. */
.hilo .msg.pensando .hoja { animation: mv-respira 2.4s ease-in-out infinite; }
@keyframes mv-respira { 50% { transform: translateY(-1px); } }

/* Revelado progresivo de la respuesta (lo activa movimiento.js palabra a palabra). La respuesta YA está
   entera en el DOM; cada palabra solo hace su entrada, con el retraso que le toca, y acaba visible sola. */
.mv-revela .mv-p { animation: mv-palabra 320ms var(--mv-curva) both; animation-delay: var(--mv-d, 0ms); }
@keyframes mv-palabra { from { opacity: 0; transform: translateY(3px); } }
.mv-revela .opciones, .mv-revela .origen, .mv-revela .bloqueo-plan { animation: mv-tras 360ms var(--mv-curva) both; animation-delay: var(--mv-fin, 0ms); }
@keyframes mv-tras { from { opacity: 0; transform: translateY(4px); } }
.mv-revela.mv-ya .mv-p, .mv-revela.mv-ya .opciones, .mv-revela.mv-ya .origen, .mv-revela.mv-ya .bloqueo-plan { animation: none; }

/* La píldora flotante: «Ir al final» cuando has subido a leer, o «Ver entera» durante un revelado largo. */
.charla { position: relative; }
.mv-pildora {
  position: absolute; left: 50%; bottom: 150px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--papel);
  background: var(--grafito-alto); border: 1px solid var(--costura-fuerte); border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); cursor: pointer;
  transform: translate(-50%, 0); transition: transform var(--mv-medio) var(--mv-curva), opacity var(--mv-medio) var(--mv-curva);
}
.mv-pildora[hidden] { display: none; }
.mv-pildora.mv-fuera { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; }
.mv-pildora:hover { border-color: var(--cobalto-claro); }
.mv-pildora::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mv-ico-abajo) center / contain no-repeat; mask: var(--mv-ico-abajo) center / contain no-repeat; }
.mv-pildora[data-modo="entera"]::before { -webkit-mask-image: var(--mv-ico-saltar); mask-image: var(--mv-ico-saltar); }

/* ---------------------------------------------------------------- PESTAÑAS */
/* La píldora del segmento viaja de una pestaña a otra (la coloca movimiento.js con transform: mide 100 px
   y se estira con scaleX; el radio horizontal se divide por esa escala para que las esquinas no se
   deformen). Sin JS, la pestaña elegida lleva su propio fondo (estilos.css). */
.mv-con-indicador { position: relative; }
.mv-con-indicador [role="tab"] { border-bottom-color: transparent !important; }
.mv-indicador {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: 100px; z-index: 0;
  background: var(--pastilla); box-shadow: var(--sombra-1);
  border-radius: calc(9px / var(--mv-s, 1)) / 9px;
  transform-origin: 0 0; pointer-events: none;
  transition: transform var(--mv-lento) var(--mv-curva);
}
.mv-indicador.mv-sin-transicion { transition: none; }
[role="tab"] { transition: color var(--mv-medio); }

/* El panel que se enseña entra con un fundido corto. Con View Transitions (movimiento.js pone .mv-vt en
   <html>) lo hace el navegador y esto no hace falta; sin ellas, esta es la alternativa, solo CSS. */
html:not(.mv-vt) .overlay .cuerpo-overlay[role="tabpanel"] { animation: mv-panel var(--mv-medio) var(--mv-curva); }
@keyframes mv-panel { from { opacity: 0; transform: translateY(6px); } }
::view-transition-old(root) { animation: 160ms var(--mv-sale) both mv-vt-sale; }
::view-transition-new(root) { animation: 260ms var(--mv-curva) both mv-vt-entra; }
@keyframes mv-vt-sale { to { opacity: 0; } }
@keyframes mv-vt-entra { from { opacity: 0; } }

/* Las hojas que se abren: además del deslizamiento que ya traen, el velo aparece con un fundido. */
.overlay:not([hidden]) .velo-overlay { animation: mv-velo var(--mv-medio) ease-out; }
@keyframes mv-velo { from { opacity: 0; } }

/* ---------------------------------------------------------------- ESQUELETOS DE CARGA */
/* Un «Cargando…» solo en un panel ya no es una pantalla en blanco: debajo, la silueta de lo que viene.
   El texto se queda (lo lee un lector de pantalla); las barras son adorno. */
.cuerpo-overlay > p[data-t="comun.cargando"]:only-child::after,
.mv-cargando::after {
  content: ''; display: block; margin-top: 16px; height: 128px; border-radius: var(--r-panel);
  background:
    linear-gradient(var(--costura-fuerte), var(--costura-fuerte)) 0 0 / 100% 56px no-repeat,
    linear-gradient(var(--costura), var(--costura)) 0 72px / 82% 12px no-repeat,
    linear-gradient(var(--costura), var(--costura)) 0 94px / 64% 12px no-repeat,
    linear-gradient(var(--costura), var(--costura)) 0 116px / 46% 12px no-repeat;
  animation: mv-esqueleto 1.4s ease-in-out infinite;
}
@keyframes mv-esqueleto { 50% { opacity: .45; } }
/* Brillo que barre el esqueleto: una banda clara que cruza de izquierda a derecha (solo transform). */
.cuerpo-overlay > p[data-t="comun.cargando"]:only-child, .mv-cargando { position: relative; overflow: hidden; }
.cuerpo-overlay > p[data-t="comun.cargando"]:only-child::before,
.mv-cargando::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  transform: translateX(-100%); animation: mv-brillo 1.6s var(--mv-curva) infinite;
}
:root[data-tema="claro"] .mv-cargando::before, :root[data-tema="claro"] .cuerpo-overlay > p[data-t="comun.cargando"]:only-child::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); }
@keyframes mv-brillo { to { transform: translateX(260%); } }

/* ---------------------------------------------------------------- ENTRADAS VARIADAS (29/09/2026) */
/* Cada cosa entra a su manera, nunca todas igual: las alertas llegan de lado, las citas de la agenda caen
   en cascada, las filas de las listas suben de una en una, el menú de meses se despliega desde su botón. */
.pm-alertas li { animation: mv-lado 460ms var(--mv-curva) both; }
.pm-alertas li:nth-child(2) { animation-delay: 70ms; } .pm-alertas li:nth-child(3) { animation-delay: 140ms; } .pm-alertas li:nth-child(n+4) { animation-delay: 200ms; }
@keyframes mv-lado { from { opacity: 0; transform: translateX(-10px); } }
.agenda-cita { animation: mv-cae 420ms var(--mv-curva) both; }
.agenda-dia:nth-child(2) .agenda-cita { animation-delay: 60ms; } .agenda-dia:nth-child(3) .agenda-cita { animation-delay: 120ms; } .agenda-dia:nth-child(n+4) .agenda-cita { animation-delay: 170ms; }
@keyframes mv-cae { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
.pm-lista .pm-fila { animation: mv-tras 380ms var(--mv-curva) both; animation-delay: calc(var(--mv-i, 0) * 35ms + 80ms); }
.pm-meses-lista:not([hidden]) { animation: mv-menu 200ms var(--mv-curva); }
@keyframes mv-menu { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.pm-grafico-caja { animation: mv-tras 480ms var(--mv-curva) 120ms both; }
/* Las pastillas de sugerencia se levantan un poco al pasar por encima. */
.sug:hover, .enlace-discreto:hover, .vis-boton:hover { transform: translateY(-1px); }
.sug:active, .enlace-discreto:active, .vis-boton:active { transform: scale(.97); }
.vis-boton { transition: transform var(--mv-rapido) var(--mv-curva), background-color var(--mv-medio), border-color var(--mv-medio); }

/* ---------------------------------------------------------------- BOTONES */
/* Pulsado: se hunde un poco. Es la confirmación inmediata de que el toque ha llegado. */
.pulsador, .nav-boton, .tema, .panel-boton, .sug, .opciones button, .enlace-discreto, .cerrar-overlay, .aviso-boton, .mv-pildora, .pm-pestanas button, .pestana-cuenta {
  transition: transform var(--mv-rapido) var(--mv-curva), background-color var(--mv-medio), border-color var(--mv-medio), color var(--mv-medio), box-shadow var(--mv-medio);
}
.pulsador:active:not(:disabled), .nav-boton:active, .tema:active, .panel-boton:active, .sug:active, .opciones button:active:not(:disabled), .enlace-discreto:active, .cerrar-overlay:active, .aviso-boton:active, .mv-pildora:active { transform: scale(.965); }
.mv-pildora.mv-fuera:active { transform: translate(-50%, 8px); }
.mv-pildora:active:not(.mv-fuera) { transform: translate(-50%, 0) scale(.965); }
/* Cargando: el botón que has pulsado y se ha quedado esperando lleva una raya que corre por abajo
   (movimiento.js le pone .mv-esperando solo si se desactiva justo después de tu toque). */
.pulsador { position: relative; overflow: hidden; }
.pulsador.mv-esperando { cursor: progress; }
.pulsador.mv-esperando::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 40%; height: 3px; background: rgba(255, 255, 255, .75);
  animation: mv-carga 1s var(--mv-curva) infinite;
}
@keyframes mv-carga { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
/* Listo: al volver a estar disponible, un destello corto (no dice «bien» ni «mal»: eso lo dice el mensaje). */
.pulsador.mv-listo { animation: mv-listo 520ms var(--mv-curva); }
@keyframes mv-listo { 30% { transform: scale(1.03); } }

/* ---------------------------------------------------------------- AVISOS (toasts) */
/* Suben un poco al entrar y llevan debajo una raya que se va consumiendo: el tiempo que les queda en
   pantalla (5 s, o 15 s si traen botón, igual que avisar() en app.js). */
.notificacion .aviso { position: relative; overflow: hidden; animation: mv-aviso-entra var(--mv-lento) var(--mv-curva); }
@keyframes mv-aviso-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.notificacion .aviso.saliendo { animation: mv-aviso-sale 240ms var(--mv-sale) forwards; }
@keyframes mv-aviso-sale { to { opacity: 0; transform: translateX(16px); } }
.notificacion .aviso::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cobalto-claro); opacity: .55;
  transform-origin: 0 0; animation: mv-cuenta-atras 5s linear forwards;
}
.notificacion .aviso:has(.aviso-boton)::after { animation-duration: 15s; }
/* Con el ratón encima o el foco dentro, la raya se para (app.js para también la cuenta atrás: WCAG 2.2.1). */
.notificacion .aviso:hover::after, .notificacion .aviso:focus-within::after, .notificacion .aviso.pausado::after { animation-play-state: paused; }
@keyframes mv-cuenta-atras { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------------------------------------------------------------- CIFRAS, BARRAS Y GRÁFICOS */
.pm-cifra, .uso-fila-cab .cuenta, .mv-cuenta { font-variant-numeric: tabular-nums; }
/* Barras de progreso (preguntas del mes, uso, primeros pasos): se llenan desde la izquierda al aparecer. */
.barra span { transform-origin: 0 0; animation: mv-barra 900ms var(--mv-curva) both; animation-delay: 80ms; }
@keyframes mv-barra { from { transform: scaleX(0); } }
/* Barras de las listas del dashboard (top, categorías, evolución de actividad). */
.pm-fila svg rect:not(.pm-pista) { transform-box: fill-box; transform-origin: 0 0; animation: mv-barra 800ms var(--mv-curva) both; animation-delay: calc(var(--mv-i, 0) * 45ms + 120ms); }
/* El gráfico de evolución: cada mes crece desde el eje, uno detrás de otro. */
.pm-grafico rect.pm-barra-ingreso, .pm-grafico rect.pm-barra-gasto { transform-box: fill-box; transform-origin: 50% 100%; animation: mv-crece 700ms var(--mv-curva) both; animation-delay: calc(var(--mv-i, 0) * 55ms + 100ms); }
@keyframes mv-crece { from { transform: scaleY(0); } }
.pm-grafico text.pm-valor { animation: mv-tras 400ms var(--mv-curva) both; animation-delay: 600ms; }
/* Las tarjetas de cifras entran escalonadas. */
.pm-kpis .pm-kpi { animation: mv-tras 420ms var(--mv-curva) both; }
.pm-kpis .pm-kpi:nth-child(2) { animation-delay: 50ms; }
.pm-kpis .pm-kpi:nth-child(3) { animation-delay: 100ms; }
.pm-kpis .pm-kpi:nth-child(4) { animation-delay: 150ms; }

/* Mini-gráfico (sparkline) dentro de cada tarjeta, dibujado por movimiento.js con la serie de la tabla
   «Ver tabla» del propio dashboard: la misma cifra que ya está en pantalla, no un dato nuevo. */
.mv-spark { display: block; width: 100%; height: 30px; margin: 8px 0 2px; overflow: visible; }
.mv-spark .mv-spark-area { fill: currentColor; opacity: .1; }
.mv-spark .mv-spark-linea { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mv-spark .mv-spark-punto { fill: currentColor; transform-box: fill-box; transform-origin: 50% 50%; animation: mv-punto-sale 500ms var(--mv-curva) 500ms both; }
.mv-spark { color: var(--pm-ingreso, var(--cobalto)); animation: mv-tras 500ms var(--mv-curva) 200ms both; }
.mv-spark.gastos { color: var(--pm-gasto, var(--ambar)); }
.mv-spark.beneficio { color: var(--papel-apagado); }
@keyframes mv-punto-sale { from { transform: scale(0); } }

/* ---------------------------------------------------------------- ESTADOS VACÍOS CON FOLD */
/* Cuando no hay nada, sale Fold (el dibujo único de la marca, marca/fold/) flotando despacio sobre su
   sombra, con el mensaje de siempre debajo. Es CSS puro: se ve igual sin JavaScript. */
.vigilados .vacio, .vacio-overlay, .mv-vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 12px 8px; }
.vigilados .vacio::before, .vacio-overlay::before, .mv-vacio::before {
  content: ''; width: 56px; height: 50px; flex: none;
  background: url('/marca/fold/oscuro/fold-normal.svg') center / contain no-repeat;
  animation: mv-flota 3.6s ease-in-out infinite;
}
@keyframes mv-flota { 50% { transform: translateY(-4px) rotate(-2deg); } }
/* En claro, el Fold dibujado para fondos claros (el mismo dibujo único de marca/fold/, su otra versión). */
:root[data-tema="claro"] .vigilados .vacio::before, :root[data-tema="claro"] .vacio-overlay::before, :root[data-tema="claro"] .mv-vacio::before { background-image: url('/marca/fold/claro/fold-normal.svg'); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .vigilados .vacio::before, :root:not([data-tema="oscuro"]) .vacio-overlay::before, :root:not([data-tema="oscuro"]) .mv-vacio::before { background-image: url('/marca/fold/claro/fold-normal.svg'); }
}

/* ---------------------------------------------------------------- ICONOS DEL MÓVIL */
/* Un solo juego de iconos de trazo (1,8 px, puntas redondas) en vez de símbolos de texto sueltos
   (◐ ☰ ⚙ ＋ ？ ▦), que cada sistema pinta distinto; y «Redes» no tenía ninguno (salía un botón vacío). */
:root {
  --mv-ico-tema: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4a8 8 0 0 1 0 16z' fill='black'/%3E%3C/svg%3E");
  --mv-ico-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M14.5 4.5v15'/%3E%3C/svg%3E");
  --mv-ico-cuenta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 19.5c1.2-3.6 4-5 7-5s5.8 1.4 7 5'/%3E%3C/svg%3E");
  --mv-ico-funciones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M12 8.5v7M8.5 12h7'/%3E%3C/svg%3E");
  --mv-ico-soporte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 1 1 3.4 2.3c-.7.3-1 .8-1 1.5v.3'/%3E%3Cpath d='M12 16.6v.1'/%3E%3C/svg%3E");
  --mv-ico-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5h15'/%3E%3Cpath d='M7.5 16v-4M12 16V7.5M16.5 16v-6'/%3E%3C/svg%3E");
  --mv-ico-agenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");
  --mv-ico-redes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='12' r='2.3'/%3E%3Ccircle cx='17' cy='6.5' r='2.3'/%3E%3Ccircle cx='17' cy='17.5' r='2.3'/%3E%3Cpath d='M8.6 11l6.3-3.4M8.6 13l6.3 3.4'/%3E%3C/svg%3E");
  --mv-ico-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.3 3.6 5.2 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.2-3.6-8.5s1.2-6.2 3.6-8.5z'/%3E%3C/svg%3E");
  --mv-ico-organizar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 13h8M8 16h5'/%3E%3C/svg%3E");
  --mv-ico-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5.5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='18.5' cy='12' r='1.8'/%3E%3C/svg%3E");
  --mv-ico-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  --mv-ico-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  --mv-ico-saltar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l7 6-7 6M14 6l7 6-7 6'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
  html .tema::before, html .panel-boton::before, html .nav-boton::before {
    content: ''; display: block; width: 20px; height: 20px; margin: auto; font-size: 0;
    background: currentColor; -webkit-mask: var(--mv-ico, none) center / contain no-repeat; mask: var(--mv-ico, none) center / contain no-repeat;
  }
  html .tema { --mv-ico: var(--mv-ico-tema); }
  html .panel-boton { --mv-ico: var(--mv-ico-panel); }
  html #abrir-cuenta { --mv-ico: var(--mv-ico-cuenta); }
  html #abrir-mejoras { --mv-ico: var(--mv-ico-funciones); }
  html #abrir-soporte { --mv-ico: var(--mv-ico-soporte); }
  html #abrir-panel-mensual { --mv-ico: var(--mv-ico-dashboard); }
  html #abrir-agenda { --mv-ico: var(--mv-ico-agenda); }
  html #abrir-redes { --mv-ico: var(--mv-ico-redes); }
  /* Integración 29/09/2026: «Mi web» y «Organizar» (ramas de la semana) con el mismo juego de iconos, y la
     cabecera un poco más junta: con los nueve botones de 44 px, a 500 px se salía 14 px por la derecha. */
  html #abrir-web { --mv-ico: var(--mv-ico-web); }
  html #abrir-organizar { --mv-ico: var(--mv-ico-organizar); }
  html .cabecera-derecha { gap: 4px; }
  /* Menú «Más» (29/09/2026): en el móvil el botón es el icono de tres puntos, sin la flechita; dentro del
     menú las opciones siguen con su icono Y su nombre (no son iconos sueltos de 44 px). */
  html #abrir-mas { --mv-ico: var(--mv-ico-mas); }
  html .mas-boton::after { display: none; }
  html .menu-mas-lista .nav-boton::before { display: inline-block; width: 18px; height: 18px; margin: 0; }
  .mv-pildora { bottom: 132px; }
}

/* ---------------------------------------------------------------- MENOS MOVIMIENTO */
/* Con «reducir movimiento» se va todo lo que se desplaza o se repite. Se quedan los cambios de color y
   de estado, que son información (qué pestaña está elegida, qué botón está pulsado). */
@media (prefers-reduced-motion: reduce) {
  .hilo .msg, .hilo .msg.pensando .hoja, .mv-puntos i, .mv-revela .mv-p, .mv-revela .opciones, .mv-revela .origen, .mv-revela .bloqueo-plan,
  .overlay .cuerpo-overlay[role="tabpanel"], .overlay:not([hidden]) .velo-overlay,
  .notificacion .aviso, .notificacion .aviso.saliendo,
  .barra span, .pm-fila svg rect, .pm-grafico rect, .pm-grafico text.pm-valor, .pm-kpis .pm-kpi,
  .mv-spark, .mv-spark .mv-spark-punto, .pulsador.mv-listo, .pulsador.mv-esperando::after,
  .vigilados .vacio::before, .vacio-overlay::before, .mv-vacio::before,
  .cuerpo-overlay > p[data-t="comun.cargando"]:only-child::after, .mv-cargando::after,
  .cuerpo-overlay > p[data-t="comun.cargando"]:only-child::before, .mv-cargando::before,
  .pm-alertas li, .agenda-cita, .pm-lista .pm-fila, .pm-meses-lista, .pm-grafico-caja { animation: none !important; }
  .mv-cargando::before, .cuerpo-overlay > p[data-t="comun.cargando"]:only-child::before { display: none; }
  .sug:hover, .enlace-discreto:hover, .vis-boton:hover, .sug:active, .vis-boton:active { transform: none; }
  .sug, .vis-boton { transition: none !important; }
  .mv-puntos i { opacity: .7; }
  .notificacion .aviso::after { animation: none; transform: scaleX(1); opacity: .35; }
  .mv-indicador, .mv-pildora, [role="tab"] { transition: none !important; }
  .pulsador:active, .nav-boton:active, .tema:active, .panel-boton:active, .sug:active, .opciones button:active, .enlace-discreto:active, .cerrar-overlay:active, .aviso-boton:active { transform: none; }
  .mv-pildora:active:not(.mv-fuera) { transform: translate(-50%, 0); }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}