/* ==========================================================================
   Felix · Filipinas — hoja de estilos única.
   Tokens --sg-* (regla frontend-sg-rules). Móvil primero. Sin recursos externos (CSP).
   Estilo iPhone (maqueta aprobada el 12/09/2026): fondo gris azulado, tarjetas blancas sin borde, cabecera y barra
   de abajo de cristal, títulos grandes, listas agrupadas e Inicio en bloques. El sol de la bandera, en la marca.
   ========================================================================== */

:root {
  /* Color: gris azulado + tarjetas blancas + azul de la marca + sol */
  --sg-color-bg: #f2f3f7;
  --sg-color-surface: #ffffff;
  --sg-color-surface-2: #f6f7fa;
  --sg-color-relleno: #e8eaf0; /* fondos de chips, pistas de progreso y selectores */
  --sg-color-fg: #0f1b2d;
  --sg-color-fg-muted: #5c6577; /* 06/11/2026: #626c7f daba 4,4:1 sobre el relleno de chips y selectores (mín. 4,5) */
  --sg-color-border: #e2e5ec;
  --sg-color-primary: #155ea8;
  --sg-color-primary-press: #0e4278; /* el borde de abajo de un botón grande (idea 4 del rediseño: el micro) */
  --sg-color-juego-hablar: #d9611c; /* familias de juegos de Inglés (practica.js › JUEGOS, idea 6) */
  --sg-color-juego-contestar: #1a8a55;
  --sg-color-juego-escuchar: #1f6fd1;
  --sg-color-juego-verbos: #6b4ce6;
  --sg-color-juego-rapido: #b88600;
  --sg-color-primary-hover: #0f4f91;
  --sg-color-primary-fg: #ffffff;
  --sg-color-primary-soft: #e4eefa;
  --sg-color-accent: #f2b705;
  --sg-color-accent-soft: #fdf3d2;
  --sg-color-accent-fg: #5c4200;
  /* Pulido visual 06/11/2026: el borde del foco (6,6:1 sobre blanco) y la opción elegida de un selector */
  --sg-color-foco: #155ea8;
  --sg-color-segmento-activo: #ffffff;
  /* Cabecera y barra de abajo: cristal (el contenido pasa por detrás, difuminado) */
  --sg-color-cristal: rgb(242 243 247 / 0.78);
  /* Texto SOBRE el amarillo macizo (botón sol, insignia sin conexión). No se redefine en oscuro:
     allí accent sigue siendo amarillo claro y accent-fg pasa a crema (1,46:1, ilegible) */
  --sg-color-on-accent: #3a2c00;
  --sg-color-success: #1d7a50;
  --sg-color-success-soft: #dff2e8;
  --sg-color-warning: #9a5b00;
  --sg-color-warning-soft: #fcebd3;
  --sg-color-danger: #b3261e;
  --sg-color-pron: #c8161d;  /* cómo suena («SHUS»): rojo vivo, 5,9:1 sobre blanco */
  /* Tarsi, la mascota del inglés (mascota.js): los mismos colores en claro y en oscuro */
  --sg-color-tarsi-pelo: #a8744a;
  --sg-color-tarsi-cara: #efd6b8;
  --sg-color-tarsi-oreja: #e9a98f;
  --sg-color-tarsi-ojo: #f2a900;
  --sg-color-tarsi-pupila: #1d1208;
  --sg-color-tarsi-trazo: #4a2c14;
  --sg-color-tarsi-boca: #8a2c2c;
  --sg-color-tarsi-lengua: #ef8c8c;
  --sg-color-tarsi-mejilla: rgb(239 120 120 / 0.45);
  --sg-color-danger-soft: #fbe3e1;
  --sg-color-overlay: rgb(15 22 35 / 0.55);
  /* Más › Mapas (vistas/mapas.js lee estos colores para pintar el lienzo) */
  --sg-mapa-mar: #cfe2f2;
  --sg-mapa-mar-hondo: #b5d2ec;
  --sg-mapa-tierra: #f6f3ea;
  --sg-mapa-tierra-ruta: #fbecc0;
  --sg-mapa-borde: #cdc5ae;
  --sg-mapa-carretera: #dccfb2;
  --sg-mapa-texto: #33465c;
  --sg-mapa-texto-mar: #5b86ad;
  --sg-mapa-halo: #ffffff;
  --sg-mapa-ferry: #0b8a8f;

  /* Tipografía: pila del sistema (sin fuentes externas) */
  --sg-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sg-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sg-text-xs: 0.78rem;
  --sg-text-sm: 0.875rem;
  --sg-text-md: 1rem;
  --sg-text-lg: 1.15rem;
  --sg-text-xl: 1.4rem;
  --sg-text-2xl: 1.8rem;
  --sg-text-3xl: 2.4rem;
  /* El título grande de cada pantalla (34 px, el del iPhone) y la cifra de un bloque de Inicio (06/11/2026): iban
     sueltos a 2.1rem y 1.9rem, entre dos pasos de la escala */
  --sg-text-titulo: 2.125rem;
  --sg-text-cifra: 1.875rem;
  --sg-leading: 1.5;
  /* Pesos (06/11/2026): cuatro, los que la letra del sistema tiene de verdad. Había nueve (650, 750, 850…) y cada
     móvil los redondeaba a su manera, así que la jerarquía cambiaba según el aparato. Inglés conserva los suyos */
  --sg-peso-normal: 400;
  --sg-peso-medio: 600;
  --sg-peso-fuerte: 700;
  --sg-peso-titulo: 800;

  /* Espaciado */
  --sg-space-1: 0.25rem;
  --sg-space-2: 0.5rem;
  --sg-space-3: 0.75rem;
  --sg-space-4: 1rem;
  --sg-space-5: 1.25rem;
  --sg-space-6: 1.5rem;
  --sg-space-8: 2rem;
  --sg-space-10: 2.5rem;

  /* Forma */
  --sg-radius-sm: 10px;
  --sg-radius-md: 14px;
  --sg-radius-lg: 22px;
  --sg-radius-pill: 999px;
  /* Dos radios para lo pequeño (06/11/2026): antes iban sueltos 8 y 12 px por toda la hoja */
  --sg-radius-xs: 8px;       /* iconos de Ajustes y opciones de un selector segmentado */
  --sg-radius-control: 12px; /* botones y controles del mapa */
  /* Tarjetas (pasada visual del 20/10/2026): sombra en dos capas, más suave y más larga, y una línea casi invisible
     que en el tema oscuro es lo que separa la tarjeta del fondo (la sombra ahí no se ve) */
  --sg-shadow-card: 0 1px 2px rgb(16 27 45 / 0.04), 0 8px 24px rgb(16 27 45 / 0.06);
  --sg-color-linea-tarjeta: rgb(16 27 45 / 0.05);
  --sg-shadow-float: 0 8px 28px rgb(20 30 50 / 0.18);
  /* La opción elegida de un selector y los botones sobre el mapa; y las hojas que suben desde abajo (06/11/2026:
     eran cuatro sombras sueltas, cada una con su negro) */
  --sg-shadow-control: 0 1px 3px rgb(16 27 45 / 0.12);
  --sg-shadow-hoja: 0 -2px 18px rgb(16 27 45 / 0.16);

  /* Movimiento */
  --sg-dur-fast: 120ms;
  --sg-dur-base: 200ms;
  --sg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Estructura */
  --sg-nav-alto: 64px;
  --sg-ancho-max: 880px;
  --sg-z-nav: 20;
  --sg-z-modal: 50;
  --sg-z-toast: 60;

  color-scheme: light;
}

/* Modo oscuro: el del móvil (Ajustes › Modo: automático) salvo que se elija «claro», o el elegido a mano.
   Los dos bloques llevan los mismos valores (lo aplica assets/js/tema.js con data-tema en <html>) */
:root[data-tema="oscuro"] {
  --sg-color-bg: #07090e;
  --sg-color-surface: #161c26;
  --sg-color-surface-2: #1d2430;
  --sg-color-relleno: #252d3a;
  --sg-color-fg: #eef2f7;
  --sg-color-fg-muted: #9aa4b5;
  --sg-color-border: #29313f;
  --sg-color-primary: #7db3f0;
  --sg-color-primary-press: #3f78b8;
  --sg-color-juego-hablar: #f39a5b;
  --sg-color-juego-contestar: #4cc38a;
  --sg-color-juego-escuchar: #6aa9f0;
  --sg-color-juego-verbos: #a894ff;
  --sg-color-juego-rapido: #f2c14e;
  --sg-color-primary-hover: #9cc5f4;
  --sg-color-primary-fg: #07121f;
  --sg-color-primary-soft: #1b2a3f;
  --sg-color-accent: #f5c542;
  --sg-color-accent-soft: #3a3016;
  --sg-color-accent-fg: #ffe7a3;
  --sg-color-foco: #f5c542;
  --sg-color-segmento-activo: #3a4351;
  --sg-color-cristal: rgb(7 9 14 / 0.76);
  --sg-color-success: #5cc796;
  --sg-color-success-soft: #173427;
  --sg-color-warning: #f0b25c;
  --sg-color-warning-soft: #3a2a14;
  --sg-color-danger: #f28b82;
  --sg-color-danger-soft: #3d1c1a;
  --sg-color-pron: #ff6b66;  /* rojo claro: sobre fondo oscuro, el rojo oscuro no se lee */
  --sg-shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.22);
  --sg-shadow-control: 0 0 0 0.5px rgb(255 255 255 / 0.08), 0 1px 3px rgb(0 0 0 / 0.4); /* en oscuro separa la línea */
  --sg-shadow-hoja: 0 -2px 18px rgb(0 0 0 / 0.45);
  --sg-color-linea-tarjeta: rgb(255 255 255 / 0.09);
  --sg-mapa-mar: #0a1a2e;
  --sg-mapa-mar-hondo: #050d18;
  --sg-mapa-tierra: #2a313b;
  --sg-mapa-tierra-ruta: #3a3522;
  --sg-mapa-borde: #4a5466;
  --sg-mapa-carretera: #3a4456;
  --sg-mapa-texto: #ccd6e3;
  --sg-mapa-texto-mar: #6f93b8;
  --sg-mapa-halo: #0b0f16;
  --sg-mapa-ferry: #4fd1c5;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --sg-color-bg: #07090e;
    --sg-color-surface: #161c26;
    --sg-color-surface-2: #1d2430;
    --sg-color-relleno: #252d3a;
    --sg-color-fg: #eef2f7;
    --sg-color-fg-muted: #9aa4b5;
    --sg-color-border: #29313f;
    --sg-color-primary: #7db3f0;
    --sg-color-primary-press: #3f78b8;
    --sg-color-juego-hablar: #f39a5b;
    --sg-color-juego-contestar: #4cc38a;
    --sg-color-juego-escuchar: #6aa9f0;
    --sg-color-juego-verbos: #a894ff;
    --sg-color-juego-rapido: #f2c14e;
    --sg-color-primary-hover: #9cc5f4;
    --sg-color-primary-fg: #07121f;
    --sg-color-primary-soft: #1b2a3f;
    --sg-color-accent: #f5c542;
    --sg-color-accent-soft: #3a3016;
    --sg-color-accent-fg: #ffe7a3;
    --sg-color-foco: #f5c542;
    --sg-color-segmento-activo: #3a4351;
    --sg-color-cristal: rgb(7 9 14 / 0.76);
    --sg-color-success: #5cc796;
    --sg-color-success-soft: #173427;
    --sg-color-warning: #f0b25c;
    --sg-color-warning-soft: #3a2a14;
    --sg-color-danger: #f28b82;
    --sg-color-danger-soft: #3d1c1a;
    --sg-color-pron: #ff6b66;
    --sg-shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.22);
    --sg-shadow-control: 0 0 0 0.5px rgb(255 255 255 / 0.08), 0 1px 3px rgb(0 0 0 / 0.4); /* en oscuro separa la línea */
    --sg-shadow-hoja: 0 -2px 18px rgb(0 0 0 / 0.45);
    --sg-color-linea-tarjeta: rgb(255 255 255 / 0.09);
    --sg-mapa-mar: #0a1a2e;
    --sg-mapa-mar-hondo: #050d18;
    --sg-mapa-tierra: #2a313b;
    --sg-mapa-tierra-ruta: #3a3522;
    --sg-mapa-borde: #4a5466;
    --sg-mapa-carretera: #3a4456;
    --sg-mapa-texto: #ccd6e3;
    --sg-mapa-texto-mar: #6f93b8;
    --sg-mapa-halo: #0b0f16;
    --sg-mapa-ferry: #4fd1c5;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Chrome en Android lee el de sin prefijo */ scroll-padding-top: calc(72px + env(safe-area-inset-top)); } /* los saltos a un apartado no quedan bajo la cabecera fija */
/* Letra grande (Ajustes › Tamaño de letra, se guarda en el móvil): todo va en rem, así que escala entero */
html.letra-grande { font-size: 115%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--sg-color-bg);
  color: var(--sg-color-fg);
  font-family: var(--sg-font-body);
  font-size: var(--sg-text-md);
  line-height: var(--sg-leading);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Títulos un punto más apretados y pesados (20/10/2026): se distinguen del texto sin subir de tamaño */
h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--sg-color-fg); letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--sg-text-xl); font-weight: var(--sg-peso-titulo); }
h2 { font-size: var(--sg-text-lg); font-weight: var(--sg-peso-fuerte); }
h3 { font-size: var(--sg-text-md); }
p { margin: 0; }
a { color: var(--sg-color-primary); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--sg-color-accent); outline-offset: 2px; }
/* Solo para el lector de pantalla (y el campo «usuario» del acceso, para el gestor de contraseñas): sin relleno ni
   borde, que en un <input> lo sacaban del ancho de la pantalla (scroll de lado en el acceso) */
.sr {
  position: absolute; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
  width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important;
}
.muted { color: var(--sg-color-fg-muted); }
.pequeno { font-size: var(--sg-text-sm); }
.mini { font-size: var(--sg-text-xs); }
.fuerte { font-weight: var(--sg-peso-medio); }
.centro { text-align: center; }
.oculto { display: none !important; }
/* El atributo hidden gana siempre (las notas que esconde el filtro son .item, que es flex y lo taparía) */
[hidden] { display: none !important; }

/* ---------- Estructura general ---------- */
.app {
  min-height: 100dvh;
  padding-bottom: calc(var(--sg-nav-alto) + env(safe-area-inset-bottom));
}
/* Cabecera de cristal: hora y tiempo a la izquierda, la cuenta atrás en medio (Inicio) y los botones a la derecha. El
   título de la pantalla ya no va aquí: va debajo, en grande (.titulo-grande) */
.cabecera {
  position: sticky; top: 0; z-index: var(--sg-z-nav);
  display: flex; align-items: center; gap: var(--sg-space-2);
  padding: calc(var(--sg-space-2) + env(safe-area-inset-top)) var(--sg-space-3) var(--sg-space-2) var(--sg-space-4);
  background: var(--sg-color-cristal);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--sg-color-border);
  color: var(--sg-color-fg);
}
.marca { width: 30px; height: 30px; flex: none; color: var(--sg-color-accent); }
.marca svg { width: 100%; height: 100%; display: block; animation: girar 60s linear infinite; }
/* El logo de la app (ui.js › LOGO, 24/09/2026): una ilustración, así que ni gira ni se tiñe como el sol */
.logo-app { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22%; }
.acceso-caja .sol-grande .logo-app { box-shadow: var(--sg-shadow-card); }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .marca svg { animation: none; } }
.insignia-offline {
  font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio);
  background: var(--sg-color-accent); color: var(--sg-color-on-accent);
  padding: 2px var(--sg-space-2); border-radius: var(--sg-radius-pill);
  white-space: nowrap; flex: none;
  border: 0; cursor: pointer; /* ahora es un botón: sin el borde gris que le pone el navegador */
}
.insignia-offline.insignia-error { background: var(--sg-color-danger); color: var(--sg-color-primary-fg); }
.cabecera .quien { font-size: var(--sg-text-xs); color: var(--sg-color-fg-muted); }
/* En el móvil el nombre de quien entra sobra en la cabecera (ya se sabe) */
@media (max-width: 420px) {
  .cabecera .quien { display: none; }
  /* Huecos y relleno de la insignia algo más justos, y con letra grande la hora y el tiempo no crecen (la letra
     grande es para leer el contenido): así cabe la cuenta atrás con la insignia 📴 a la vista */
  .insignia-offline { padding-inline: 5px; }
  html.letra-grande .info-hora { font-size: calc(var(--sg-text-lg) / 1.15); }
  html.letra-grande .info-tiempo { font-size: calc(var(--sg-text-xs) / 1.15); }
}
/* Hora del otro país y tiempo donde está Felix (cabecera.js): solo números, dos líneas */
.cabecera-info { display: grid; line-height: 1.15; flex: none; font-variant-numeric: tabular-nums; color: var(--sg-color-fg); }
.cabecera-info:empty { display: none; }
.info-hora { font-size: var(--sg-text-lg); font-weight: var(--sg-peso-fuerte); white-space: nowrap; color: var(--sg-color-fg); }
.info-tiempo { font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio); white-space: nowrap; color: var(--sg-color-fg-muted); }
.info-sitio { font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio); color: var(--sg-color-fg-muted); }
/* En el móvil el sol deja su hueco a la hora y el tiempo */
@media (max-width: 899px) { .cabecera .marca { display: none; } }
@media (max-width: 420px) { .cabecera { gap: 6px; } }

/* Título grande de cada pantalla (app.js titulo()), debajo de la cabecera: se va con el scroll, como en el iPhone.
   Parte por sílabas si no cabe («Aeropuertos y mapas», «Tarjetas para enseñar») */
.titulo-grande { max-width: var(--sg-ancho-max); margin: 0 auto; padding: var(--sg-space-4) var(--sg-space-5) 0; display: grid; gap: 2px; }
.titulo-grande h1 {
  font-size: var(--sg-text-titulo); line-height: 1.1; font-weight: var(--sg-peso-titulo); letter-spacing: -0.025em;
  overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; text-wrap: balance;
}
.titulo-grande p { color: var(--sg-color-fg-muted); font-size: var(--sg-text-sm); }
/* El título y, a su derecha, el botón de la pantalla (accionTitulo en app.js; Viaje: «Apuntar los vuelos») */
.titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-3); min-width: 0; }
.titulo-fila h1 { min-width: 0; }
#titulo-accion { flex: none; }
#titulo-accion:empty { display: none; }
/* «‹ Atrás»: volver desde una pantalla de dentro (app.js ponerVolver), encima del título como en el iPhone. En
   escritorio sobra (la barra lateral tiene todas las secciones) */
.volver {
  display: inline-flex; align-items: center; gap: 2px; justify-self: start; min-height: 40px;
  margin-left: -8px; padding: 6px 10px 2px 2px; color: var(--sg-color-primary);
  font-size: var(--sg-text-md); font-weight: var(--sg-peso-medio); text-decoration: none;
}
.volver svg { width: 22px; height: 22px; flex: none; }
.app:has(.vista-chat) #volver { display: none !important; }
@media (min-width: 900px) { .volver { display: none !important; } }
.contenido { min-width: 0; }
/* Deslizar de lado entre secciones (app.js; el movimiento lo pone el JS en .contenido). Mientras dura el gesto
   (html.deslizando): la cabecera y la barra sin cristal (el desenfoque sobre algo que se mueve se recalcula en cada
   fotograma y en Android iba a trompicones) y sin desplazamiento de lado de la página mientras la pantalla está fuera */
html.deslizando, html.deslizando body { overflow-x: clip; }
html.deslizando .cabecera, html.deslizando .nav {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sg-color-bg);
}

.vista {
  max-width: var(--sg-ancho-max);
  margin: 0 auto;
  padding: var(--sg-space-4);
  display: grid;
  /* La columna nunca más ancha que la pantalla (07/11/2026): con la columna «auto», una fila que no cabía (los botones
     de fase de Preparativos con su icono 3D) ensanchaba toda la vista, y Chrome en Android reescalaba la página: a
     Felix se le agrandaban las letras cada vez que entraba en Preparativos */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sg-space-4);
}

/* Navegación inferior en móvil */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--sg-z-nav);
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--sg-nav-alto) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--sg-color-cristal);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--sg-color-border);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--sg-color-fg-muted); text-decoration: none; font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio);
}
.nav a svg { width: 24px; height: 24px; }
.nav a[aria-current="page"] { color: var(--sg-color-primary); }
/* «Inglés» destaca sobre el resto (Jesús, 19/09/2026: que Felix se fije en él): pastilla de color, icono más grande
   y, si hoy aún no ha practicado, un punto que late (app.js › marcarInglesPendiente) */
.nav a[data-ruta="ingles"] {
  position: relative; margin: 6px 4px; border-radius: var(--sg-radius-md);
  background: var(--sg-color-accent); color: var(--sg-color-on-accent); font-weight: 800;
  box-shadow: 0 4px 14px rgb(242 183 5 / 0.35);
}
.nav a[data-ruta="ingles"] svg { width: 28px; height: 28px; animation: nav-icono 3s ease-in-out infinite; }
/* Animado siempre (Jesús: «que esté animado»): brilla y el libro se menea cada pocos segundos */
.nav a[data-ruta="ingles"] { animation: nav-brillo 2.4s ease-in-out infinite; }
@keyframes nav-brillo {
  0%, 100% { box-shadow: 0 4px 14px rgb(242 183 5 / 0.35); transform: translateY(0); }
  50% { box-shadow: 0 4px 22px rgb(242 183 5 / 0.8); transform: translateY(-3px); }
}
@keyframes nav-icono { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(12deg); } 94% { transform: rotate(-6deg); } }
.nav a[data-ruta="ingles"][aria-current="page"] { color: var(--sg-color-on-accent); outline: 2px solid var(--sg-color-primary); }
/* Domingo de descanso (descanso.js): «Inglés» como un botón más, sin color, brillo ni meneo; que no le llame */
.nav a[data-ruta="ingles"].nav-descanso { margin: 0; background: none; color: inherit; font-weight: inherit; box-shadow: none; animation: none; }
.nav a[data-ruta="ingles"].nav-descanso svg { width: 24px; height: 24px; animation: none; }
.nav a[data-ruta="ingles"].nav-descanso[aria-current="page"] { color: var(--sg-color-primary); outline: none; }
.nav a.nav-pendiente::after {
  content: ''; position: absolute; top: 6px; right: 10px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--sg-color-danger); box-shadow: 0 0 0 2px var(--sg-color-surface); animation: nav-late 1.4s ease-in-out infinite;
}
@keyframes nav-late { 50% { transform: scale(1.35); } }
/* En Inicio no sale la hora ni el tiempo de la cabecera: su sitio es para la cuenta atrás de la salida (inicio.js) */
html[data-pantalla="inicio"] .cabecera-info { display: none; }
/* El saludo en inglés al entrar (saludo.js) */
.saludo {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: var(--sg-z-toast);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sg-space-2); align-items: center;
  max-width: 520px; margin: 0 auto; padding: var(--sg-space-3); border-radius: var(--sg-radius-lg);
  background: var(--sg-color-surface); color: var(--sg-color-fg); box-shadow: var(--sg-shadow-float);
  border: 2px solid var(--sg-color-accent); animation: saludo-entra 0.35s var(--sg-ease);
  transition: opacity var(--sg-dur-base), transform var(--sg-dur-base);
}
.saludo p { margin: 0; }
.saludo-cuerpo { display: grid; gap: 2px; min-width: 0; }
.saludo-hola { font-weight: 800; }
.saludo-frase { font-size: var(--sg-text-lg); font-weight: 750; color: var(--sg-color-primary); }
.saludo-fuera { opacity: 0; transform: translateY(-20px); }
@keyframes saludo-entra { from { transform: translateY(-120%); } }
@media (prefers-reduced-motion: reduce) {
  .saludo, .nav a.nav-pendiente::after, .nav a[data-ruta="ingles"], .nav a[data-ruta="ingles"] svg { animation: none; }
}
.nav .solo-escritorio { display: none; }

/* Escritorio: barra lateral */
/* La del profesor lleva 6 (con Chat, 11/10/2026): en el móvil, las 6 en una fila */
@media (max-width: 899px) {
  .nav-profe { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 900px) {
  .app { padding-bottom: 0; display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; }
  .cabecera { grid-column: 1 / -1; }
  .nav {
    position: sticky; top: 56px; height: calc(100dvh - 56px);
    grid-template-columns: 1fr; grid-auto-rows: 48px; align-content: start;
    /* Con todas las secciones (20 × 48 px) no cabe en la pantalla de un portátil: la barra se desplaza sola
       (antes se cortaba y Ajustes no se veía) */
    overflow-y: auto; overscroll-behavior: contain;
    border-top: 0; border-right: 0.5px solid var(--sg-color-border); padding: var(--sg-space-3) 0;
    background: var(--sg-color-bg); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .titulo-grande { padding-inline: var(--sg-space-6); }
  .nav a { flex-direction: row; justify-content: flex-start; gap: var(--sg-space-3); padding: 0 var(--sg-space-5); font-size: var(--sg-text-sm); }
  .nav a[aria-current="page"] { background: var(--sg-color-primary-soft); }
  .nav .solo-escritorio { display: flex; }
  .nav .solo-movil { display: none; }
  .vista { padding: var(--sg-space-6); width: 100%; }
}

/* ---------- Paneles y listas ---------- */
/* Tarjetas sin borde, muy redondas y con sombra suave (en oscuro, las separa el tono) */
.panel {
  background: var(--sg-color-surface);
  border: 1px solid var(--sg-color-linea-tarjeta);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-card);
  padding: var(--sg-space-4);
  display: grid; gap: var(--sg-space-3);
  min-width: 0;
}
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-3); flex-wrap: wrap; }
.panel-destacado { background: var(--sg-color-primary-soft); border-color: transparent; }
.panel-sol { background: var(--sg-color-accent-soft); border-color: transparent; }
.panel-alerta { background: var(--sg-color-warning-soft); border-color: transparent; color: var(--sg-color-fg); }
.pila { display: grid; gap: var(--sg-space-3); }
.pila-2 { display: grid; gap: var(--sg-space-2); }
.fila { display: flex; align-items: center; gap: var(--sg-space-2); flex-wrap: wrap; }
.fila-extremos { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-2); flex-wrap: wrap; }
.fila-centro { justify-content: center; }
/* Un botón suelto dentro de la vista (que es grid) no se estira a todo el ancho */
.vista > .boton:not(.boton-bloque), .panel > .boton:not(.boton-bloque), .panel > a.boton:not(.boton-bloque) { justify-self: start; }
.rejilla { display: grid; gap: var(--sg-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.rejilla-2 { display: grid; gap: var(--sg-space-3); grid-template-columns: repeat(2, 1fr); }
/* Listas agrupadas, como Ajustes del iPhone: filas seguidas separadas por una línea fina. Dentro de una tarjeta,
   sobre su fondo; sueltas en la pantalla, en su propio bloque blanco redondeado */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vista > .lista { background: var(--sg-color-surface); border-radius: var(--sg-radius-md); padding-inline: var(--sg-space-3); box-shadow: var(--sg-shadow-card); }
/* Documentos (18/10/2026): grupos plegados por prefijo y «Más opciones» de cada archivo */
.doc-grupo { border-top: 0.5px solid var(--sg-color-border); }
.doc-grupo > summary { display: flex; align-items: center; gap: var(--sg-space-2); min-height: 44px; font-weight: var(--sg-peso-medio); color: var(--sg-color-fg); }
.doc-grupo > summary > span:first-child { flex: 1; min-width: 0; }
.doc-mas > summary { padding-block: var(--sg-space-2); min-height: 44px; display: flex; align-items: center; }
/* Título de cada bloque de «Más» (18/10/2026), en pequeño y gris encima de su lista, como en el iPhone */
.mas-grupo { margin: var(--sg-space-4) var(--sg-space-3) var(--sg-space-1); font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--sg-color-fg-muted); }
.mas-grupo:first-child { margin-top: 0; }
.item {
  display: flex; align-items: flex-start; gap: var(--sg-space-3);
  padding: var(--sg-space-3) var(--sg-space-1); border-radius: 0;
  background: transparent; border: 0; border-top: 0.5px solid var(--sg-color-border);
  min-width: 0;
}
.lista > .item:first-child, .lista > li:first-child > .item, .lista > li:first-child.item { border-top: 0; }
.item-cuerpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
/* Iconos sueltos dentro de un item (p. ej. la flecha de «Más»): tamaño fijo */
.item > svg { width: 20px; height: 20px; flex: none; align-self: center; color: var(--sg-color-fg-muted); }
.item .boton-icono svg { width: 22px; height: 22px; }
a.item.fila { align-items: center; flex-wrap: nowrap; }
/* Iconos dentro de un texto (títulos y párrafos): del tamaño de la letra */
h2 > svg, h3 > svg, p > svg { width: 1.1em; height: 1.1em; vertical-align: -0.15em; flex: none; }
/* Paneles enlazados con flecha (p. ej. «El día del viaje»): mismo tamaño de icono que en las listas */
a.panel.fila, a.enlace-bloque.fila { flex-wrap: nowrap; }
a.panel.fila > svg, a.enlace-bloque.fila > svg { width: 20px; height: 20px; flex: none; align-self: center; color: var(--sg-color-fg-muted); }
/* Item con acciones debajo del texto (móvil: los botones no aprietan el título) */
.item-apilado { flex-direction: column; align-items: stretch; gap: var(--sg-space-2); }
/* Zona táctil de los desplegables: ~44 px de alto (antes 29-32). Sin display:flex, que quitaría el triángulo */
details summary { cursor: pointer; padding-block: var(--sg-space-3); color: var(--sg-color-primary); }
/* Enlaces pequeños de las cabeceras de panel («Ver todo»…): más alto para el dedo sin cambiar la letra */
.panel-cabecera a.pequeno { display: inline-block; padding-block: 10px; }
/* Los sueltos al pie de un panel o de la pantalla («Ver las 7 →», «Ver las tareas de salud», «Cambiar de destino»):
   ya son elementos de grid (bloque), así que basta el padding para llegar a ~41 px; y solo del ancho del texto,
   para que un toque en el hueco de al lado no navegue */
.vista > a.pequeno, .panel > a.pequeno { padding-block: 10px; justify-self: start; }
/* Enlaces dentro del texto de los pasos del viaje (el eTravel, «N frases para este paso ↓»): medían 19 px.
   En línea, el padding vertical agranda la zona táctil sin separar las líneas del párrafo */
.paso a:not(.boton) { padding-block: 12px; }
.item-titulo { font-weight: var(--sg-peso-medio); overflow-wrap: anywhere; }
/* Enlaces dentro del texto (las URL que pone textoRico, los correos): se parten donde haga falta.
   Sin esto, una URL larga ensancha la columna de su panel o item (grid) y, con ella, toda la
   pantalla, que a 390 px se desplaza a los lados y corta el texto por la derecha */
.vista a:not(.boton):not(.enlace-bloque), .modal a:not(.boton) { overflow-wrap: anywhere; }
/* Enlaces que envuelven un item o una cabecera de panel: sin subrayado ni color de enlace */
a.enlace-bloque { color: inherit; text-decoration: none; }
a.item.enlace-bloque:hover, a.enlace-bloque:hover .item-titulo { color: var(--sg-color-primary); }
.vacio { text-align: center; color: var(--sg-color-fg-muted); padding: var(--sg-space-6) var(--sg-space-4); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sg-space-2);
  min-height: 44px; padding: 0 var(--sg-space-4);
  border-radius: var(--sg-radius-control); border: 0;
  /* Como en el iPhone: los secundarios, tintados (azul claro con letra azul); el principal, azul macizo */
  background: var(--sg-color-primary-soft); color: var(--sg-color-primary);
  font-weight: var(--sg-peso-medio); font-size: var(--sg-text-sm); cursor: pointer; text-decoration: none;
  transition: background var(--sg-dur-fast) var(--sg-ease), transform var(--sg-dur-fast) var(--sg-ease);
}
.boton:hover { background: color-mix(in srgb, var(--sg-color-primary-soft), var(--sg-color-primary) 10%); }
.boton:active { transform: scale(0.98); }
.boton[disabled] { opacity: 0.55; cursor: not-allowed; }
.boton svg { width: 18px; height: 18px; }
.boton-primario { background: var(--sg-color-primary); border-color: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.boton-primario:hover { background: var(--sg-color-primary-hover); }
.boton-sol { background: var(--sg-color-accent); border-color: var(--sg-color-accent); color: var(--sg-color-on-accent); }
.boton-peligro { color: var(--sg-color-danger); background: var(--sg-color-danger-soft); }
.boton-peligro:hover { background: color-mix(in srgb, var(--sg-color-danger-soft), var(--sg-color-danger) 10%); }
.boton-fantasma { background: transparent; border-color: transparent; }
/* Dentro de una tarjeta de color (azul claro, amarilla, de aviso), el secundario va en blanco: si no, se funde con ella */
:is(.panel-destacado, .panel-sol, .panel-alerta, .bloque-aviso) .boton:not(.boton-primario, .boton-sol, .boton-peligro, .boton-fantasma) { background: var(--sg-color-surface); }
.boton-icono { min-width: 44px; padding: 0; }
.boton-bloque { width: 100%; }
/* Objetivo táctil: 44 px en lo principal y nunca menos de 40 px (se usa con una mano, en la calle) */
.boton-pequeno { min-height: 40px; padding: 0 var(--sg-space-3); font-size: var(--sg-text-xs); }
.boton-voz { min-width: 44px; min-height: 44px; padding: 0; border-radius: var(--sg-radius-pill); color: var(--sg-color-primary); background: var(--sg-color-primary-soft); border-color: transparent; }
/* Registro de la clase en un toque (Inicio): 🙂 😐 😣 */
.caras { display: inline-flex; gap: var(--sg-space-1); flex: none; }
.boton-cara {
  width: 44px; height: 44px; padding: 0; font-size: var(--sg-text-xl); line-height: 1;
  border-radius: var(--sg-radius-pill); border: 1px solid var(--sg-color-border);
  background: var(--sg-color-surface); cursor: pointer;
}
.boton-cara:hover { border-color: var(--sg-color-primary); }
.boton-cara:active { transform: scale(0.94); }
.boton-cara[disabled] { opacity: 0.5; cursor: wait; }

/* ---------- Etiquetas ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio);
  padding: 2px var(--sg-space-2); border-radius: var(--sg-radius-pill);
  background: var(--sg-color-relleno); color: var(--sg-color-fg-muted); border: 0;
  white-space: nowrap;
}
.etiqueta-hecho { background: var(--sg-color-success-soft); color: var(--sg-color-success); border-color: transparent; }
.etiqueta-curso { background: var(--sg-color-primary-soft); color: var(--sg-color-primary); border-color: transparent; }
.etiqueta-alta { background: var(--sg-color-danger-soft); color: var(--sg-color-danger); border-color: transparent; }
.etiqueta-aviso { background: var(--sg-color-warning-soft); color: var(--sg-color-warning); border-color: transparent; }
.etiqueta-sol { background: var(--sg-color-accent-soft); color: var(--sg-color-accent-fg); border-color: transparent; }
/* Etiqueta usada como aviso de una frase: sí hace salto de línea (en móvil desbordaba el panel) */
p.etiqueta { display: block; white-space: normal; border-radius: var(--sg-radius-sm); padding: var(--sg-space-2) var(--sg-space-3); line-height: 1.4; }

/* ---------- Progreso ---------- */
.progreso { height: 8px; border-radius: var(--sg-radius-pill); background: var(--sg-color-relleno); overflow: hidden; }
.progreso > span { display: block; height: 100%; width: 0; background: var(--sg-color-success); border-radius: inherit; transition: width var(--sg-dur-base) var(--sg-ease); }

/* Botones con aspecto de panel o de item (ganan en especificidad a .boton-fantasma) */
button.panel, button.item-boton {
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--sg-color-surface); border: 0;
}
button.item-boton { background: var(--sg-color-surface-2); border-radius: var(--sg-radius-sm); }
button.panel:hover, button.item-boton:hover { background: var(--sg-color-surface-2); }
.numero { font-size: var(--sg-text-3xl); font-weight: var(--sg-peso-titulo); line-height: 1.1; color: var(--sg-color-primary); }

/* ---------- Formularios ---------- */
.form { display: grid; gap: var(--sg-space-3); }
.campo { display: grid; gap: var(--sg-space-1); min-width: 0; }
.campo > span { font-size: var(--sg-text-sm); font-weight: var(--sg-peso-medio); color: var(--sg-color-fg); }
.campo small { color: var(--sg-color-fg-muted); font-size: var(--sg-text-xs); }
input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="number"], input[type="tel"], input[type="email"], input[type="url"], select, textarea {
  width: 100%; min-height: 44px; padding: var(--sg-space-2) var(--sg-space-3);
  border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-sm);
  background: var(--sg-color-surface); color: var(--sg-color-fg);
  font-size: 16px; /* evita el zoom automático de iOS */
}
textarea { min-height: 88px; resize: vertical; line-height: var(--sg-leading); }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--sg-color-primary); }
.check { display: flex; align-items: center; gap: var(--sg-space-2); font-size: var(--sg-text-sm); cursor: pointer; }
.botones-form { display: flex; gap: var(--sg-space-2); flex-wrap: wrap; justify-content: flex-end; }
.segmentos { display: flex; gap: var(--sg-space-1); flex-wrap: wrap; }
.segmentos button {
  min-height: 40px; padding: 0 var(--sg-space-3); border-radius: var(--sg-radius-pill);
  border: 0; background: var(--sg-color-relleno); color: var(--sg-color-fg); cursor: pointer; font-size: var(--sg-text-sm);
}
.segmentos button[aria-pressed="true"] { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.segmentos > span { align-self: center; }
/* Fases España / Viaje / Filipinas: el selector segmentado del iPhone (una pastilla gris con la elegida en blanco) */
.segmentos-grandes { flex-wrap: nowrap; gap: 2px; padding: 2px; border-radius: var(--sg-radius-sm); background: var(--sg-color-relleno); }
.segmentos-grandes button { flex: 1 1 0; min-height: 44px; font-weight: var(--sg-peso-medio); border-radius: var(--sg-radius-xs); background: transparent; color: var(--sg-color-fg-muted); }
.segmentos-grandes button[aria-pressed="true"] { background: var(--sg-color-surface); color: var(--sg-color-fg); box-shadow: var(--sg-shadow-control); }
.segmento-sub { display: block; font-size: var(--sg-text-xs); font-weight: 500; }

/* ---------- Pestañas ---------- */
/* Se reparten en dos filas si no caben: antes desplazaban en horizontal con la barra oculta y a 390 px
   «Progreso» quedaba fuera de la pantalla sin ninguna pista de que existía */
.pestanas { display: flex; flex-wrap: wrap; gap: var(--sg-space-1); }
/* (20/10/2026: se volvió a probar la fila deslizante en v342 y se quitó en v343 por lo de arriba: «Más» quedaba fuera) */
.pestanas a {
  flex: none; display: inline-flex; align-items: center; min-height: 40px;
  padding: var(--sg-space-2) var(--sg-space-4); border-radius: var(--sg-radius-pill);
  text-decoration: none; color: var(--sg-color-fg-muted); font-weight: var(--sg-peso-medio); font-size: var(--sg-text-sm);
  background: var(--sg-color-surface); border: 0; box-shadow: var(--sg-shadow-card);
}
.pestanas a[aria-current="page"] { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }

/* ---------- Inicio ---------- */
/* En bloques (bento, como los widgets del iPhone): dos columnas; los anchos ocupan las dos (inicio.js bento()) */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-3); }
.bloque {
  display: flex; flex-direction: column; gap: var(--sg-space-2); min-width: 0;
  padding: var(--sg-space-3) var(--sg-space-4) var(--sg-space-4); border-radius: var(--sg-radius-lg);
  background: var(--sg-color-surface); color: var(--sg-color-fg); box-shadow: var(--sg-shadow-card);
  border: 1px solid var(--sg-color-linea-tarjeta);
}
.bloque-ancho { grid-column: 1 / -1; }
.bloque-aviso { background: var(--sg-color-warning-soft); }
.bloque-destacado { background: var(--sg-color-primary-soft); }

/* Lo de la clase, en grande (09/10/2026, Jesús: «darle más relevancia»): reto especial y antes de tu clase, con
   marco de color y botón a lo ancho. El especial, en amarillo (el color del ⭐), para que no se confunda con el otro */
.bloque-heroe { background: var(--sg-color-primary-soft); border: 1.5px solid var(--sg-color-primary); gap: var(--sg-space-3); }
/* Marco más fino con un halo del mismo color (20/10/2026): destaca igual y pesa menos que el borde de 2 px */
.bloque-heroe, .bloque-trabajo { box-shadow: var(--sg-shadow-card), 0 0 0 4px color-mix(in srgb, var(--sg-color-primary) 10%, transparent); }
.bloque-heroe .bloque-titulo { font-size: var(--sg-text-lg); }
.bloque-heroe-especial { background: var(--sg-color-accent-soft); border-color: var(--sg-color-accent); box-shadow: var(--sg-shadow-card), 0 0 0 4px color-mix(in srgb, var(--sg-color-accent) 14%, transparent); }
/* El vídeo de hoy en Inicio (14/10/2026): la portada recortada a lo ancho (es vertical; arriba va el título) */
.video-portada-inicio { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 22%; border-radius: var(--sg-radius-md); border: 1px solid var(--sg-color-border); }
.boton-heroe { width: 100%; min-height: 52px; font-size: var(--sg-text-md); }

/* Tu trabajo de hoy (trabajo.js › htmlTrabajo, 09/10/2026): barra de avance y filas grandes; la siguiente, marcada */
.bloque-trabajo { border: 1.5px solid var(--sg-color-success); gap: var(--sg-space-3); box-shadow: var(--sg-shadow-card), 0 0 0 4px color-mix(in srgb, var(--sg-color-success) 12%, transparent); }
.trabajo-cuenta { font-weight: var(--sg-peso-fuerte); color: var(--sg-color-success); }
.trabajo-progreso { height: 12px; }
.trabajo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-2); }
.trabajo-item {
  display: flex; align-items: center; gap: var(--sg-space-3); min-height: 56px; padding: var(--sg-space-2) var(--sg-space-3);
  border-radius: var(--sg-radius-sm); background: var(--sg-color-relleno); color: var(--sg-color-fg); text-decoration: none;
}
.trabajo-ico { font-size: 1.5rem; width: 2rem; text-align: center; flex: none; }
.trabajo-texto { flex: 1; min-width: 0; font-weight: var(--sg-peso-medio); overflow-wrap: anywhere; }
/* Lo que tarda cada tarea (15/10/2026): en verde, para que se vea que es poco */
.trabajo-min { color: var(--sg-color-success); font-weight: var(--sg-peso-fuerte); white-space: nowrap; }
.trabajo-estado { flex: none; font-weight: var(--sg-peso-fuerte); color: var(--sg-color-fg-muted); }
/* «Si te apetece más» (18/10/2026): botones de dos en dos, de 44 px, en vez de enlaces sueltos en una línea */
.trabajo-extras { display: grid; gap: var(--sg-space-1); margin-top: var(--sg-space-2); }
.trabajo-extras-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-2); }
.trabajo-extras-botones .boton { min-height: 44px; font-size: var(--sg-text-sm); white-space: normal; text-align: center; }
/* Dentro de una tarjeta de color (Antes de tu clase, 21/10/2026), en blanco, como los de los paneles de color */
.bloque-heroe .trabajo-extras-botones .boton { background: var(--sg-color-surface); }
/* Tarea con botones a pantallas de la app (19/10/2026): uno por línea, alineados a la izquierda */
.tarea-texto .tarea-ir { justify-content: flex-start; text-align: left; white-space: normal; margin-block: var(--sg-space-1); padding-block: var(--sg-space-2); }
.trabajo-siguiente { background: var(--sg-color-success-soft); outline: 2px solid var(--sg-color-success); }
.trabajo-siguiente .trabajo-estado { color: var(--sg-color-success); }
.trabajo-hecho .trabajo-texto { color: var(--sg-color-fg-muted); font-weight: 500; text-decoration: line-through; }

/* Vídeos de inglés (reto.js › mostrarVideos/mostrarVideo, 09/10/2026): vertical 9:16, sin pasarse de alto en el móvil */
.video-ingles {
  display: block; width: 100%; max-width: 360px; max-height: 70vh; aspect-ratio: 9 / 16; margin-inline: auto;
  border-radius: var(--sg-radius-sm); background: #000;
}
.video-frases li + li { margin-top: var(--sg-space-3); padding-top: var(--sg-space-3); border-top: 1px solid var(--sg-color-border); }
.video-tarjeta { display: flex; align-items: center; gap: var(--sg-space-3); color: var(--sg-color-fg); text-decoration: none; }
.video-tarjeta-icono {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--sg-color-success-soft); font-size: 1.4rem;
}

/* Cuándo comer hoy (inicio.js, 09/10/2026) */
.comer-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-2); }
.comer-fila { display: flex; align-items: flex-start; gap: var(--sg-space-2); }
.comer-ico { font-size: 1.3rem; width: 1.8rem; text-align: center; flex: none; }

/* Viaje › Moverse (vistas/moverse.js): el trayecto paso a paso; el siguiente, con marco azul */
.tresumen { gap: var(--sg-space-2); }
.tpasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-3); }
.tpaso {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sg-space-3); padding: var(--sg-space-4);
  border-radius: var(--sg-radius-lg); background: var(--sg-color-surface); box-shadow: var(--sg-shadow-card);
}
.tpaso-actual { box-shadow: inset 0 0 0 2px var(--sg-color-primary), var(--sg-shadow-card); }
.tpaso-hecho { opacity: 0.75; }
.tpaso-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--sg-peso-titulo); background: var(--sg-color-relleno); color: var(--sg-color-fg-muted); }
.tpaso-actual .tpaso-num { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.tpaso-hecho .tpaso-num { background: var(--sg-color-success); color: var(--sg-color-primary-fg); }
.tpaso-cuerpo { display: grid; gap: var(--sg-space-1); min-width: 0; }
.tpaso-titulo { margin: 0; font-size: var(--sg-text-md); }
.tpaso-aviso { font-size: var(--sg-text-sm); padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-sm); background: var(--sg-color-warning-soft); color: var(--sg-color-fg); }
.tpaso .fila { margin-top: var(--sg-space-1); }

/* ---------- Fotos (fotos.js): portadas de sitios, aeropuertos y destinos; miniatura del transporte en Moverse ---------- */
.foto { margin: 0; display: grid; gap: var(--sg-space-1); }
/* Fotos dentro de una tarea (preparativos.js FOTOS_TAREA): de dos en dos, y en una columna en móviles muy estrechos */
.fotos-tarea { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sg-space-2); }
.fotos-tarea figcaption { font-size: var(--sg-text-xs); }
@media (max-width: 340px) { .fotos-tarea { grid-template-columns: 1fr; } }
/* «La app te propone» (inicio.js): debajo de cada propuesta, «Ya está» y «Otro día» */
.propuesta-acciones { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); padding-block: 0 var(--sg-space-2); }
.foto-boton { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--sg-radius-md); }
.foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--sg-radius-md); background: var(--sg-color-relleno);
}
.foto figcaption { font-size: var(--sg-text-xs); color: var(--sg-color-fg-muted); line-height: 1.35; }
.foto-credito { color: var(--sg-color-fg-muted); font-size: 0.7rem; }
/* En un paso de Moverse: la foto del transporte, pequeña (se amplía al tocarla) */
.foto-pequena { max-width: 220px; }
.foto-pequena img { border-radius: var(--sg-radius-sm); }
/* En grande (ventana): entera, sin recortar */
.foto-grande img { aspect-ratio: auto; object-fit: contain; max-height: 70vh; }
.foto-grande .foto-credito { font-size: var(--sg-text-xs); }
/* «Ver fotos reales»: enlaces a Google Maps, Booking, Airbnb… */
.fotos-reales { display: flex; flex-wrap: wrap; gap: 4px var(--sg-space-2); align-items: baseline; color: var(--sg-color-fg-muted); margin: var(--sg-space-2) 0; }
.fotos-reales a { font-weight: var(--sg-peso-medio); }
/* La otra opción, con barco (plegada): la lista de sus pasos, sin botones */
.talternativa > summary { font-weight: var(--sg-peso-medio); padding-block: var(--sg-space-2); }
.talternativa-lista { margin: 0; padding-left: 1.3em; display: grid; gap: var(--sg-space-2); }
.talternativa-lista li { display: grid; gap: 2px; }
/* Los de una cifra: el nombre arriba y la cifra abajo, aunque el de al lado sea más alto */
.bloque-cifras { justify-content: space-between; }
a.bloque { text-decoration: none; }
a.bloque:hover .bloque-etq { color: var(--sg-color-primary); }
.bloque-cuerpo { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.bloque-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-2); min-height: 28px; }
/* «Ver todo», «Todas»…: zona táctil de ~40 px sin que la cabecera del bloque crezca */
.bloque-cabecera a.pequeno { padding-block: 10px; margin-block: -10px; font-weight: var(--sg-peso-medio); }
/* Etiqueta del bloque en versalitas pequeñas con espacio entre letras (20/10/2026), como los widgets del iPhone */
.bloque-etq { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--sg-text-xs); font-weight: var(--sg-peso-fuerte); letter-spacing: 0.05em; text-transform: uppercase; color: var(--sg-color-fg-muted); }
.bloque-etq svg { width: 18px; height: 18px; flex: none; color: var(--sg-color-primary); }
.bloque-titulo { font-size: var(--sg-text-md); font-weight: var(--sg-peso-medio); line-height: 1.3; overflow-wrap: anywhere; }
.bloque-cifra { font-size: var(--sg-text-cifra); line-height: 1; font-weight: var(--sg-peso-titulo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--sg-color-fg); white-space: nowrap; }
.bloque > .boton { align-self: flex-start; }
.bloque .lista .item { padding-inline: 0; }
/* Anillo de lo hecho en Preparativos (el trazo lo pone inicio.js con stroke-dasharray) */
.anillo { display: flex; align-items: center; gap: var(--sg-space-3); }
.anillo svg { width: 58px; height: 58px; flex: none; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 8; }
.anillo-pista { stroke: var(--sg-color-relleno); }
.anillo-avance { stroke: var(--sg-color-accent); stroke-linecap: round; }
/* .cuenta-atras (sol + cifra): solo la usa ya el escaparate; la cuenta atrás de la app va en la cabecera */
.cuenta-atras { display: flex; align-items: center; gap: var(--sg-space-4); }
.cuenta-atras .sol { width: 64px; height: 64px; flex: none; color: var(--sg-color-accent); }
.cuenta-atras .sol svg { width: 100%; height: 100%; }

/* Escaparate (escaparate.html): página de solo lectura para familia y amigos, sin la cabecera ni el menú de la app */
.escaparate { max-width: 640px; margin: 0 auto; padding: var(--sg-space-4) var(--sg-space-4) var(--sg-space-8); display: grid; gap: var(--sg-space-4); }
.escaparate-titulo { font-size: var(--sg-text-xl); margin: 2px 0; }
.escaparate-lista .progreso { margin-top: var(--sg-space-1); }
.escaparate-estrellas { color: var(--sg-color-accent); flex: none; }
.escaparate-pie { margin-top: var(--sg-space-2); }
.enlace-largo { overflow-wrap: anywhere; user-select: all; } /* la URL del enlace, sin desbordar a 390 px */
.cuenta-atras .numero { font-size: var(--sg-text-3xl); font-weight: var(--sg-peso-titulo); line-height: 1; color: var(--sg-color-primary); }
/* minmax(0, 1fr): las columnas pueden estrecharse por debajo del importe (con 1fr, «1014,86 €» en letra
   grande empujaba la página por la derecha a 360-375 px). La cifra se ajusta al ancho de la fila (cqi: % del
   ancho de .cifras, que ya descuenta márgenes y letra grande) para que un importe de 9 caracteres quepa en
   su tercio; como último recurso, se parte. Sin unidades cqi (navegadores viejos), la línea de clamp */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-2); text-align: center; container-type: inline-size; }
.cifras strong {
  display: block; color: var(--sg-color-primary); overflow-wrap: anywhere;
  font-size: clamp(1rem, 5vw, var(--sg-text-xl));
  font-size: min(var(--sg-text-xl), 6.5cqi);
}

/* ---------- Inglés ---------- */
.mensaje-profe {
  white-space: pre-wrap; font-size: var(--sg-text-sm); line-height: 1.55;
  background: var(--sg-color-surface-2); border: 1px dashed var(--sg-color-border);
  border-radius: var(--sg-radius-sm); padding: var(--sg-space-3); overflow-wrap: anywhere;
}
.vocab { display: grid; gap: var(--sg-space-1); }
.vocab-fila {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sg-space-3);
  padding: var(--sg-space-2) 0; border-bottom: 1px solid var(--sg-color-border);
}
.vocab-fila:last-child { border-bottom: 0; }
/* Inglés › Bisaya y tagalo (vistas/frases.js): 🔊, la frase y «Me la sé» a la derecha; la sabida, algo apagada */
.frase-fila { grid-template-columns: auto 1fr auto; align-items: start; }
.frase-fila .en { font-size: var(--sg-text-lg); }
.frase-sabida .en, .frase-sabida .es { opacity: 0.6; }
.frase-marca { white-space: nowrap; }
.pila-1 { display: grid; gap: 2px; min-width: 0; }
.frase-tarjeta { text-align: center; justify-items: center; }
.frase-tarjeta .fila { justify-content: center; }
.frase-es { font-size: var(--sg-text-xl, 1.4rem); font-weight: 650; }
.frase-local { font-size: var(--sg-text-xl, 1.4rem); font-weight: 750; color: var(--sg-color-primary); margin: 0; }

/* Inglés › los 30 minutos de app entre clases (vistas/estudio.js): el reloj manda, así que va arriba y grande */
.estudio-cabecera {
  display: grid; justify-items: center; gap: 2px; text-align: center;
  padding: var(--sg-space-3) 0 var(--sg-space-1);
}
.estudio-cabecera .numero { font-variant-numeric: tabular-nums; }
.estudio-cabecera .reloj-poco { color: var(--sg-color-danger); }
/* La barra de avance del rato: se ve de un vistazo cuánto queda (los fallos alargan el total) */
.estudio-progreso {
  width: min(280px, 70vw); height: 6px; border-radius: 999px;
  background: var(--sg-color-surface-2); overflow: hidden;
}
.estudio-progreso span { display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--sg-color-primary); transition: width 0.4s linear; }
/* Ejercicios: la respuesta buena en verde y la elegida mala en rojo (no solo un aviso que desaparece) */
.opcion-bien { background: var(--sg-color-success-soft) !important; border-color: var(--sg-color-success) !important; color: var(--sg-color-fg) !important; }
.opcion-mal { background: var(--sg-color-danger-soft) !important; border-color: var(--sg-color-danger) !important; color: var(--sg-color-fg) !important; }
.estudio-montada { min-height: 2.2em; }

/* Inglés › Reto y contrarreloj (vistas/reto.js): al estilo Duolingo, todo grande y a un toque de pulgar */
.reto-portada { display: grid; gap: var(--sg-space-3); }
.reto-racha {
  display: inline-flex; align-items: baseline; gap: var(--sg-space-2); justify-self: center;
  padding: var(--sg-space-2) var(--sg-space-4); border-radius: var(--sg-radius-pill);
  background: var(--sg-color-relleno); font-size: var(--sg-text-xl); filter: grayscale(1);
}
.reto-racha-viva { background: var(--sg-color-accent-soft); color: var(--sg-color-accent-fg); filter: none; }
.reto-racha-sube { animation: reto-sube 0.9s var(--sg-ease) 2; }
@keyframes reto-sube { 50% { transform: scale(1.18); } }
.reto-empezar { font-size: var(--sg-text-lg); padding-block: var(--sg-space-4); }
.reto-cabecera {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sg-space-3);
  padding: var(--sg-space-2) 0;
}
.reto-barra { height: 14px; border-radius: var(--sg-radius-pill); background: var(--sg-color-relleno); overflow: hidden; }
.reto-barra span { display: block; height: 100%; border-radius: inherit; background: var(--sg-color-success); transition: width 0.4s var(--sg-ease); }
.reto-vidas { font-size: var(--sg-text-md); letter-spacing: 1px; white-space: nowrap; }
.reto-xp { font-weight: 750; color: var(--sg-color-accent-fg); white-space: nowrap; }
.reto-combo { margin: 0; font-weight: 750; color: var(--sg-color-warning); animation: reto-sube 0.5s var(--sg-ease); }
.reto-paso { display: grid; gap: var(--sg-space-3); justify-items: center; padding-bottom: var(--sg-space-6); }
.reto-grande { font-size: var(--sg-text-2xl); font-weight: 750; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.reto-es { font-size: var(--sg-text-lg); margin: 0; color: var(--sg-color-fg-muted); }
.reto-pron { font-size: var(--sg-text-lg); margin: 0; }
/* La pista de «dilo tú» (el arranque de la frase con cómo suena): destacada pero sin ser la frase entera */
.reto-pista { margin: 0; font-size: var(--sg-text-lg); padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-md); background: var(--sg-color-accent-soft); }
.reto-bueno { font-size: var(--sg-text-lg); font-weight: 750; margin: 0; }
.reto-opciones { display: grid; gap: var(--sg-space-2); width: 100%; }
.reto-opcion { width: 100%; min-height: 56px; font-size: var(--sg-text-lg); justify-content: center; white-space: normal; }
.reto-opcion:disabled { opacity: 0.55; }
.reto-opcion.opcion-bien, .reto-opcion.opcion-mal { opacity: 1; }
.reto-paso > .boton-voz, .reto-paso > .reto-micro { justify-self: center; margin-inline: auto; }
.boton-voz-grande { width: 84px; height: 84px; border-radius: 50%; }
.boton-voz-grande svg { width: 38px; height: 38px; }
.reto-parejas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sg-space-2); width: 100%; }
.reto-ficha { min-height: 52px; white-space: normal; justify-content: center; }
.reto-ficha-elegida { border-color: var(--sg-color-primary) !important; background: var(--sg-color-primary-soft) !important; }
/* Ahora es un botón: se toca para devolver la palabra abajo, así que tiene que cogerse con el pulgar */
.reto-ficha-puesta { display: inline-flex; padding: var(--sg-space-2) var(--sg-space-3); border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-sm); background: var(--sg-color-surface); min-height: 40px; }
.reto-montada { min-height: 3.2em; width: 100%; padding: var(--sg-space-2); border-bottom: 2px solid var(--sg-color-border);
  display: flex; flex-wrap: wrap; gap: var(--sg-space-2); justify-content: center; align-content: center; }
.reto-piezas { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); justify-content: center; }
/* El micro, protagonista (25/09/2026, idea 4 del rediseño, como Speak o ELSA): grande, con sombra de botón que se
   aprieta, y mientras escucha late y suelta ondas hacia fuera, para que Felix vea que le está oyendo. Las ondas son
   dos anillos (::before y ::after) desfasados: nada de pedir el micro aparte para dibujar la voz, que en Android
   pelea con el reconocedor por el mismo micrófono */
.reto-micro {
  position: relative; isolation: isolate; width: 112px; height: 112px; border-radius: 50%; font-size: 3rem; padding: 0;
  justify-content: center; margin-block: var(--sg-space-3);
  box-shadow: 0 6px 0 var(--sg-color-primary-press), var(--sg-shadow-card);
  transition: transform 0.12s var(--sg-ease), box-shadow 0.12s var(--sg-ease);
}
.reto-micro:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sg-color-primary-press); }
.reto-micro::before, .reto-micro::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1; pointer-events: none;
  border: 3px solid var(--sg-color-danger); opacity: 0;
}
.reto-micro-oyendo { animation: reto-oye 1.1s ease-in-out infinite; background: var(--sg-color-danger) !important; border-color: var(--sg-color-danger) !important;
  box-shadow: 0 0 0 0 transparent !important; }
.reto-micro-oyendo::before { animation: reto-onda 1.6s ease-out infinite; }
.reto-micro-oyendo::after { animation: reto-onda 1.6s ease-out 0.8s infinite; }
@keyframes reto-oye { 50% { transform: scale(1.07); } }
@keyframes reto-onda { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reto-micro-oyendo, .reto-micro-oyendo::before, .reto-micro-oyendo::after { animation: none; } }

/* «Tu sesión de hoy» (idea 2 del rediseño): una tarjeta grande arriba en Inglés › Hoy, con el anillo de su mejor día
   y un solo botón. El resto de la pantalla va debajo y más pequeño */
.sesion-hoy {
  display: grid; gap: var(--sg-space-3); padding: var(--sg-space-5);
  background: linear-gradient(160deg, var(--sg-color-primary-soft), var(--sg-color-surface));
  border: 1px solid var(--sg-color-border); box-shadow: var(--sg-shadow-card);
}
.sesion-cabeza { display: flex; align-items: center; gap: var(--sg-space-4); }
.sesion-texto { display: grid; gap: var(--sg-space-1); min-width: 0; }
.sesion-texto .fuerte { font-size: var(--sg-text-lg); line-height: 1.25; color: var(--sg-color-fg); }
.sesion-anillo { width: 112px; height: 112px; flex: none; transform: rotate(-90deg); }
.sesion-anillo circle { fill: none; stroke-width: 10; }
.sesion-anillo-fondo { stroke: var(--sg-color-relleno); }
.sesion-anillo-lleno { stroke: var(--sg-color-primary); stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--sg-ease); }
.sesion-anillo text { transform: rotate(90deg); transform-origin: 50px 50px; fill: var(--sg-color-fg); font-size: 20px; font-weight: 800; }
.anillo-batido .sesion-anillo-lleno { stroke: var(--sg-color-success); }
.anillo-batido text { fill: var(--sg-color-success); }
.boton-grande { min-height: 58px; font-size: var(--sg-text-lg); font-weight: 750; }
@media (prefers-reduced-motion: reduce) { .sesion-anillo-lleno { transition: none; } }

/* Botones de juego por familia (idea 6): el icono dentro de un círculo de su color, el borde de su color y el texto
   en el color normal. «Empezar» y «Siguiente» (juego-boton-grande), rellenos del color de su familia */
.juego-hablar { --sg-juego: var(--sg-color-juego-hablar); }
.juego-contestar { --sg-juego: var(--sg-color-juego-contestar); }
.juego-escuchar { --sg-juego: var(--sg-color-juego-escuchar); }
.juego-verbos { --sg-juego: var(--sg-color-juego-verbos); }
.juego-rapido { --sg-juego: var(--sg-color-juego-rapido); }
.juego-boton {
  justify-content: flex-start; gap: var(--sg-space-2); min-height: 56px; text-align: left; white-space: normal;
  color: var(--sg-color-fg); border: 1.5px solid color-mix(in srgb, var(--sg-juego) 55%, transparent);
  background: color-mix(in srgb, var(--sg-juego) 10%, var(--sg-color-surface));
}
.juego-icono {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sg-juego); color: var(--sg-color-bg);
}
.juego-icono svg { width: 19px; height: 19px; }
.juego-boton-grande {
  width: 100%; justify-content: center; min-height: 60px; font-size: var(--sg-text-lg); font-weight: 750;
  background: var(--sg-juego); border-color: var(--sg-juego); color: var(--sg-color-bg);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--sg-juego) 60%, black);
}
.juego-boton-grande:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--sg-juego) 60%, black); }
.juego-boton-grande .juego-icono { background: var(--sg-color-bg); color: var(--sg-juego); }

/* La racha en siete circulitos (idea 7) */
.racha-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sg-space-1); justify-items: center; }
.racha-dia { display: grid; justify-items: center; gap: 2px; }
.racha-bola {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 1.05rem;
  background: var(--sg-color-relleno); border: 2px solid transparent;
}
.racha-letra { font-size: var(--sg-text-xs); font-weight: 700; color: var(--sg-color-fg-muted); }
.racha-hecho .racha-bola { background: color-mix(in srgb, var(--sg-color-juego-hablar) 25%, var(--sg-color-surface)); border-color: var(--sg-color-juego-hablar); }
.racha-hoy .racha-letra { color: var(--sg-color-fg); }
.racha-hoy:not(.racha-hecho) .racha-bola { border-color: var(--sg-color-juego-hablar); border-style: dashed; animation: racha-late 1.6s ease-in-out infinite; }
.racha-futuro .racha-bola { background: transparent; border-color: var(--sg-color-border); }
.racha-texto { margin: 0; color: var(--sg-color-fg); }
@keyframes racha-late { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .racha-hoy .racha-bola { animation: none !important; } }

/* Final de ronda (idea 8): el anillo y la XP contando, en grande */
.final-cabeza { display: flex; align-items: center; justify-content: center; gap: var(--sg-space-4); }
.anillo-final { width: 120px; height: 120px; }
.final-xp-caja { display: grid; gap: 2px; text-align: left; }
.final-xp { margin: 0; font-size: 2.6rem; font-weight: 850; line-height: 1; color: var(--sg-color-juego-rapido); font-variant-numeric: tabular-nums; }
.final-xp-ud { font-size: var(--sg-text-lg); font-weight: 750; }

/* Pensado para leerlo sin gafas (idea 9): en los juegos, lo que se lee y se toca, más grande */
.reto-paso .reto-grande { font-size: calc(var(--sg-text-2xl) * 1.15); }
.reto-paso .mini { font-size: var(--sg-text-sm); }
.reto-paso .reto-opcion { min-height: 60px; }

/* Modo juego (idea 3): con una pregunta o el final de la ronda en pantalla (app.js › vigilarModoJuego), fuera la
   cabecera, el título y la barra de abajo. Queda el juego solo, a pantalla completa */
body.modo-juego .cabecera, body.modo-juego .nav, body.modo-juego .titulo-grande, body.modo-juego #vista > .pestanas,
body.modo-juego .cabecera-record { display: none !important; }
body.modo-juego .app { padding-bottom: env(safe-area-inset-bottom); }
body.modo-juego .vista { padding-top: calc(var(--sg-space-4) + env(safe-area-inset-top)); min-height: 100dvh; align-content: start; }
body.modo-juego .reto-paso { min-height: 60dvh; align-content: center; }
.reto-oido p { margin: 0; }
.reto-p-bien { color: var(--sg-color-success); font-weight: 750; font-size: var(--sg-text-lg); }
/* Lo que ha dicho, apareciendo palabra a palabra en la hoja del acierto (idea 4 del rediseño) */
.reto-hoja .reto-p-bien { display: inline-block; animation: palabra-entra 0.35s var(--sg-ease) both; }
.reto-hoja .reto-p-bien:nth-child(2) { animation-delay: 0.08s; }
.reto-hoja .reto-p-bien:nth-child(3) { animation-delay: 0.16s; }
.reto-hoja .reto-p-bien:nth-child(4) { animation-delay: 0.24s; }
.reto-hoja .reto-p-bien:nth-child(5) { animation-delay: 0.32s; }
.reto-hoja .reto-p-bien:nth-child(n+6) { animation-delay: 0.4s; }
@keyframes palabra-entra { from { opacity: 0; transform: translateY(8px) scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .reto-hoja .reto-p-bien { animation: none; } }
.reto-p-mal { color: var(--sg-color-danger); font-weight: 750; font-size: var(--sg-text-lg); text-decoration: underline wavy; }
/* La hoja de abajo tras contestar: verde o roja, con «Continuar» al alcance del pulgar */
.reto-hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--sg-z-modal);
  display: grid; gap: var(--sg-space-2); justify-items: center; text-align: center;
  padding: var(--sg-space-4) var(--sg-space-4) calc(var(--sg-space-4) + env(safe-area-inset-bottom));
  border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0; box-shadow: var(--sg-shadow-float);
  animation: reto-hoja 0.22s var(--sg-ease);
}
.reto-hoja p { margin: 0; }
.reto-hoja .boton-bloque { max-width: 480px; }
.reto-hoja-bien { background: var(--sg-color-success-soft); color: var(--sg-color-fg); }
.reto-hoja-mal { background: var(--sg-color-danger-soft); color: var(--sg-color-fg); }
@keyframes reto-hoja { from { transform: translateY(100%); } }
.reto-final { display: grid; gap: var(--sg-space-3); }
.reto-emoji { font-size: 3.4rem; margin: 0; line-height: 1; animation: reto-sube 0.8s var(--sg-ease); }
.reto-falladas { text-align: left; }
/* Inglés › Hoy: el bloque del reto, arriba del todo */
.reto-hoy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-2); } /* minmax: ver .vista */
.reto-hoy .fila { flex-wrap: nowrap; }
.reto-hoy .fila .boton { flex: 1; justify-content: center; }
/* Panel de Jesús: barras de minutos por día */
.uso-dias { display: grid; gap: 4px; }
.uso-dia { display: grid; grid-template-columns: 4.2em 1fr 3.2em; gap: var(--sg-space-2); align-items: center; font-size: var(--sg-text-sm); }
.uso-barra { height: 12px; border-radius: var(--sg-radius-pill); background: var(--sg-color-relleno); overflow: hidden; }
.uso-barra span { display: block; height: 100%; background: var(--sg-color-primary); border-radius: inherit; }
.uso-desglose { margin: -2px 0 2px calc(4.2em + var(--sg-space-2)); }

/* Inglés › Copiar a mano: la hoja del día, pensada para leerla mientras se escribe en la libreta (letra grande
   y mucho aire, porque se mira de reojo con el boli en la mano) */
.copiar-ficha { display: grid; grid-template-columns: auto 1fr; gap: var(--sg-space-3); align-items: center; }
.copiar-en { font-size: var(--sg-text-2xl); font-weight: 800; margin: 0; line-height: 1.15; }
.copiar-pron { font-size: var(--sg-text-lg); margin: 2px 0 0; }
.copiar-es { color: var(--sg-color-fg-muted); margin: 2px 0 0; }
.copiar-marca {
  width: 44px; height: 44px; border-radius: var(--sg-radius-md); flex: none; cursor: pointer;
  border: 2px solid var(--sg-color-border); background: var(--sg-color-relleno);
  color: var(--sg-color-primary); font-size: var(--sg-text-xl); font-weight: 800;
}
.copiar-hecha { opacity: 0.55; }
.copiar-hecha .copiar-en { text-decoration: line-through; }
.copiar-hecha .copiar-marca { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); border-color: var(--sg-color-primary); }
.tabla-ab { width: 100%; border-collapse: collapse; font-size: var(--sg-text-sm); }
.tabla-ab th, .tabla-ab td { padding: var(--sg-space-1) var(--sg-space-2); border-bottom: 1px solid var(--sg-color-border); text-align: right; }
.tabla-ab th:first-child, .tabla-ab td:first-child { text-align: left; }
/* Juego: nivel, misiones del día, duelo y medallas (practica.js › htmlJuego) */
.juego { display: grid; gap: var(--sg-space-2); text-align: left; }
.juego-nivel { display: grid; grid-template-columns: auto 1fr; gap: var(--sg-space-3); align-items: center; }
.juego-nivel-n {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sg-color-accent-soft); color: var(--sg-color-accent-fg); font-weight: 800; font-size: var(--sg-text-sm);
}
.juego-nivel-texto { display: grid; gap: 4px; min-width: 0; }
.juego-barra { height: 10px; }
.juego-barra span { background: var(--sg-color-accent); }
.juego-titulo, .juego-duelo, .juego-medallas { margin: 0; }
.juego-misiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--sg-text-sm); }
.mision-ok { color: var(--sg-color-success); text-decoration: line-through; }
/* Retos del día y medallas de la semana (metas.js) y Más › Estadísticas (24/09/2026) */
.retos-dia { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--sg-text-sm); }
.retos-dia a { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.retos-dia .mision-ok { text-decoration: none; }
.reto-barra-fina { display: block; height: 7px; }
.metas-semana { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-2); font-size: var(--sg-text-sm); }
.metas-semana li { display: grid; grid-template-columns: 2em 1fr; gap: var(--sg-space-2); align-items: start; padding: var(--sg-space-2); border-radius: var(--sg-radius-md); background: var(--sg-color-relleno); }
.metas-semana .meta-ganada { background: var(--sg-color-success-soft); }
.metas-semana .meta-proxima { opacity: 0.6; }
/* Medallas del día (26/09/2026): dos columnas; sin ganar, en gris y sin descripción */
.medallas-dia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sg-space-2); font-size: var(--sg-text-sm); }
.medallas-dia li { display: grid; grid-template-columns: 1.8em 1fr; gap: var(--sg-space-2); align-items: center; padding: var(--sg-space-2); border-radius: var(--sg-radius-md); background: var(--sg-color-relleno); min-width: 0; }
.medallas-dia .medalla-dia-ganada { background: var(--sg-color-success-soft); grid-column: 1 / -1; }
.medalla-dia-emoji { font-size: 1.4em; line-height: 1; text-align: center; }
.medalla-dia-texto { display: grid; gap: 3px; min-width: 0; }
/* La tarjeta ya es del color de relleno: sin esto, la barra a cero no se ve */
.medallas-dia .reto-barra { background: var(--sg-color-border); }
.medallas-dia li:not(.medalla-dia-ganada) strong { color: var(--sg-color-fg-muted); }
.meta-emoji { font-size: 1.5em; line-height: 1.2; text-align: center; }
.dias-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-2); }
.dias-stats li { display: grid; gap: 3px; padding-bottom: var(--sg-space-2); border-bottom: 1px solid var(--sg-color-border); }
.dias-stats li:last-child { border-bottom: 0; }
.dias-stats .dia-vacio { display: block; opacity: 0.6; }
.tabla-scroll { overflow-x: auto; max-width: 100%; }
.fila-olvidada, .fila-olvidada a { color: var(--sg-color-fg-muted); }
.tabla-horas td, .tabla-horas th { padding-inline: 4px; }
.celda-pico { color: var(--sg-color-primary); }
.semana-pasada { margin-top: var(--sg-space-2); }
.semana-pasada summary { cursor: pointer; font-size: var(--sg-text-sm); }
/* Batir tu récord (metas.js › htmlBatirRecord, 24/09/2026): un % grande que baja hasta 0 y luego sube en verde */
.record { display: grid; gap: 4px; text-align: center; padding: var(--sg-space-2) 0; }
.record-cifra { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--sg-color-primary); font-variant-numeric: tabular-nums; }
.record-texto { font-size: var(--sg-text-sm); color: var(--sg-color-fg-muted); }
.record .reto-barra { margin-top: 2px; }
.record .reto-barra span { background: var(--sg-color-primary); }
.record-batido .record-cifra { color: var(--sg-color-success); }
.record-batido .record-texto { color: var(--sg-color-success); font-weight: 700; }
.record-batido .reto-barra span { background: var(--sg-color-success); }
.texto-exito { color: var(--sg-color-success); }
.juego-medallas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: var(--sg-text-lg); }
/* Medallas por escalones (25/09/2026): la que aún no tiene, apagada; el escalón ganado, en pequeño al lado */
.juego-medallas .medalla-no { background: none; }
.juego-medallas sup { font-size: 0.6em; }
.lista-toques .item { padding-block: var(--sg-space-3); }
.reto-otros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-2); }
.reto-otros-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reto-otros .boton { justify-content: center; padding-inline: var(--sg-space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Los de juego (con icono) saltan de línea en vez de cortarse: con la letra grande, «Verbos en la frase» no cabía */
.reto-otros .juego-boton { justify-content: flex-start; white-space: normal; overflow: visible; line-height: 1.2; text-align: left; }
/* …y el texto parte la palabra si ni así cabe (07/11/2026: «Mis respuestas» con la letra grande ensanchaba la pantalla) */
.reto-otros .juego-boton > span { min-width: 0; overflow-wrap: anywhere; }
.reto-medalla { display: grid; grid-template-columns: auto 1fr; gap: var(--sg-space-3); align-items: center; text-align: left; }
.reto-medalla p { margin: 0; }
.reto-medalla-emoji { font-size: 2.4rem; animation: reto-sube 0.8s var(--sg-ease) 2; }
.reto-sube-nivel p { margin: 0; }
.reto-gusto { display: grid; gap: var(--sg-space-2); }
.reto-gusto p { margin: 0; }
.reto-gusto-boton { font-size: 1.7rem; min-width: 56px; min-height: 56px; justify-content: center; padding: 0; }
.reto-hueco-linea { color: var(--sg-color-primary); letter-spacing: 2px; }
.reto-cabecera-rapido { grid-template-columns: auto auto; justify-content: space-between; }
/* Inglés › Conversación: la situación, lo que contesta la otra persona y las opciones del «¿qué dices ahora?» */
.conv-sitio { display: grid; grid-template-columns: auto 1fr; gap: var(--sg-space-3); align-items: center; }
.conv-icono { font-size: 2rem; line-height: 1; }
.conv-opcion { display: grid; gap: 2px; padding: var(--sg-space-3); }
/* Lo que dice la otra persona, como una burbuja de chat suya: se distingue de lo que le toca decir a Felix */
.conv-otro { background: var(--sg-color-accent-soft); color: var(--sg-color-fg); text-align: center; }
.izquierda { text-align: left; }
.medallas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-2); }
.medalla { display: grid; grid-template-columns: auto 1fr; gap: var(--sg-space-2); align-items: center;
  padding: var(--sg-space-2); border-radius: var(--sg-radius-sm); background: var(--sg-color-accent-soft); color: var(--sg-color-fg); }
.medalla-no { background: var(--sg-color-relleno); opacity: 0.55; filter: grayscale(1); }
.medalla-emoji { font-size: 1.6rem; }
.uso-pantalla { grid-template-columns: 7.5em 1fr 3.8em; }
.uso-pantalla > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.horas-uso { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; height: 90px; }
.hora-uso { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; text-align: center; }
.hora-uso-barra { display: block; width: 100%; background: var(--sg-color-primary); border-radius: 3px 3px 0 0; min-height: 2px; }
/* Tarsi (mascota.js): respira, parpadea y, según la cara, salta, baila o saluda */
.mascota { display: inline-block; flex: none; cursor: pointer; animation: m-respira 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.mascota svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mascota-peq { width: 46px; height: 46px; }
.mascota-med { width: 76px; height: 76px; }
.mascota-grande { width: 112px; height: 112px; }
.m-pelo { fill: var(--sg-color-tarsi-pelo); }
.m-cara { fill: var(--sg-color-tarsi-cara); }
.m-oreja { fill: var(--sg-color-tarsi-oreja); }
.m-iris { fill: var(--sg-color-tarsi-ojo); stroke: var(--sg-color-tarsi-trazo); stroke-width: 1.5; }
.m-pupila { fill: var(--sg-color-tarsi-pupila); }
.m-brillo { fill: #fff; }
.m-nariz { fill: var(--sg-color-tarsi-trazo); }
.m-trazo { fill: none; stroke: var(--sg-color-tarsi-trazo); stroke-width: 3; stroke-linecap: round; }
.m-boca { fill: var(--sg-color-tarsi-boca); stroke: var(--sg-color-tarsi-trazo); stroke-width: 2; stroke-linejoin: round; }
.m-lengua { fill: var(--sg-color-tarsi-lengua); stroke: none; }
.m-mejilla { fill: var(--sg-color-tarsi-mejilla); }
.m-ojos { transform-origin: 60px 50px; animation: m-parpadeo 4.5s infinite; }
.m-mano-hola { transform-origin: 92px 92px; animation: m-saluda 1s ease-in-out infinite; }
.m-brazo-i { transform-origin: 28px 90px; animation: m-brazo 0.6s ease-in-out infinite alternate; }
.m-brazo-d { transform-origin: 92px 90px; animation: m-brazo 0.6s ease-in-out infinite alternate-reverse; }
.mascota-bien { animation: m-salta 0.6s var(--sg-ease) 2, m-respira 3.2s ease-in-out 1.2s infinite; }
.mascota-fiesta { animation: m-baila 0.8s ease-in-out 3, m-respira 3.2s ease-in-out 2.4s infinite; }
.mascota-mal { animation: m-consuela 1.4s ease-in-out 1, m-respira 3.2s ease-in-out 1.4s infinite; }
.mascota-animo { animation: m-salta 0.5s var(--sg-ease) 3, m-respira 3.2s ease-in-out 1.5s infinite; }
@keyframes m-respira { 50% { transform: scale(1.03, 0.98); } }
@keyframes m-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes m-saluda { 50% { transform: rotate(-25deg); } }
@keyframes m-brazo { to { transform: translateY(-10px) rotate(-12deg); } }
@keyframes m-salta { 40% { transform: translateY(-14px) scale(1.05); } 70% { transform: translateY(0) scale(0.97, 1.03); } }
@keyframes m-baila { 25% { transform: rotate(-10deg) translateY(-6px); } 75% { transform: rotate(10deg) translateY(-6px); } }
@keyframes m-consuela { 30% { transform: rotate(-6deg); } 60% { transform: rotate(6deg); } }
/* Tarsi con su bocadillo */
.tarsi { display: flex; align-items: center; gap: var(--sg-space-3); text-align: left; }
.tarsi-grande { flex-direction: column; text-align: center; }
/* (acotado a .tarsi: los bocadillos de la guía y del tiempo (guia.js, tiempo.js) usan la misma clase y heredaban el
   fondo amarillo, la negrita y la flecha) */
.tarsi .bocadillo {
  position: relative; flex: 1; min-width: 0; display: grid; gap: var(--sg-space-2); justify-items: start;
  padding: var(--sg-space-3); border-radius: var(--sg-radius-md);
  background: var(--sg-color-accent-soft); color: var(--sg-color-fg); font-weight: 600;
}
.tarsi .bocadillo p { margin: 0; }
.tarsi .bocadillo::before {
  content: ''; position: absolute; left: -8px; top: 50%; margin-top: -8px;
  border: 8px solid transparent; border-left: 0; border-right-color: var(--sg-color-accent-soft);
}
.tarsi-grande .bocadillo { justify-items: center; }
.tarsi-grande .bocadillo::before { left: 50%; top: -8px; margin: 0 0 0 -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--sg-color-accent-soft); }
.bloque-coach, .panel-coach { padding: var(--sg-space-3); display: grid; gap: var(--sg-space-2); }
.tarsi-nombre { margin: 0; width: 76px; text-align: center; font-weight: 700; }
/* Tamagotchi: comida y ánimo de la mascota (practica.js › estadoMascota) */
.tarsi-estado { display: grid; grid-template-columns: 76px 1fr; gap: var(--sg-space-3); align-items: center; }
.tarsi-barras { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sg-space-2); align-items: center; }
.tarsi-barras .reto-barra { height: 9px; }
.tarsi-barras .barra-baja { background: var(--sg-color-danger); }
.tarsi-hambre { font-weight: 800; color: var(--sg-color-danger); }
/* Accesorios de la mascota por nivel (mascota.js › accesorios) */
.m-panuelo { fill: #d7263d; }
.m-flor { fill: #fffdf0; stroke: #e9d98a; stroke-width: 1; }
.m-salakot { fill: #d9a441; stroke: var(--sg-color-tarsi-trazo); stroke-width: 1.5; }
.m-salakot-raya { stroke: var(--sg-color-tarsi-trazo); stroke-width: 1.2; fill: none; }
.m-gafas rect { fill: rgb(20 20 30 / 0.82); stroke: var(--sg-color-tarsi-trazo); stroke-width: 1.5; }
.m-gafas path { stroke: var(--sg-color-tarsi-trazo); stroke-width: 3; }
.tarsi-pregunta { display: grid; gap: var(--sg-space-2); padding-top: var(--sg-space-2); border-top: 1px dashed var(--sg-color-border); }
.tarsi-pregunta p { margin: 0; }
.tarsi-opciones { flex-wrap: wrap; }
.tarsi-escribir { flex-wrap: nowrap; }
.tarsi-escribir input { flex: 1; min-width: 0; }
/* En la hoja de después de contestar: Tarsi pequeño con lo que dice */
.reto-hoja-tarsi { display: flex; align-items: center; gap: var(--sg-space-2); justify-content: center; }
.reto-animo { font-weight: 750; font-size: var(--sg-text-lg); margin: 0; }
/* Confeti (mascota.js › confeti) */
.confeti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: var(--sg-z-toast); }
.confeti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confeti-cae linear forwards; }
@keyframes confeti-cae { to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; } }
/* «Viendo lo que ve Felix» (solo Jesús) */
/* Los 4 botones de Jesús en Inicio (vistas/inicio.js), de dos en dos */
.botones-jesus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-2); }
.botones-jesus .boton { justify-content: center; text-align: center; }
/* Los de cada profesor, debajo (inicio.js › pintarProfesJesus, 11/10/2026) */
.profe-jesus { margin-top: var(--sg-space-3); padding-top: var(--sg-space-3); border-top: 1px solid var(--sg-color-border); }
.profe-jesus details summary { cursor: pointer; }

/* Chat del profesor con Jesús (vistas/profe.js › chat): sus mensajes a la derecha, los de Jesús a la izquierda */
.profe-chat { display: grid; gap: var(--sg-space-2); max-height: 60vh; overflow-y: auto; }
.profe-chat-msg {
  max-width: 85%; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-sm);
  background: var(--sg-color-relleno); overflow-wrap: anywhere;
}
.profe-chat-msg p { margin: 0; }
.profe-chat-mio { justify-self: end; background: var(--sg-color-success-soft); }
.profe-chat-foto { display: block; max-width: 100%; max-height: 240px; margin-top: var(--sg-space-1); border-radius: var(--sg-radius-sm); }

/* «Su pantalla» (vistas/pantalla.js): la captura de Felix a escala, en su marco de móvil */
.captura-marco {
  overflow: hidden;
  border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-md);
  background: var(--sg-color-surface);
}
.captura-iframe { border: 0; display: block; transform-origin: 0 0; }

.ver-como {
  position: fixed; left: 50%; bottom: calc(var(--sg-nav-alto) + 10px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: var(--sg-z-toast); display: flex; gap: var(--sg-space-2); align-items: center; white-space: nowrap;
  padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-pill);
  background: var(--sg-color-accent); color: var(--sg-color-on-accent); font-weight: 700; font-size: var(--sg-text-sm);
  box-shadow: var(--sg-shadow-float);
}
@media (prefers-reduced-motion: reduce) {
  .reto-racha-sube, .reto-combo, .reto-micro-oyendo, .reto-hoja, .reto-emoji, .reto-medalla-emoji { animation: none; }
  .mascota, .m-ojos, .m-mano-hola, .m-brazo-i, .m-brazo-d { animation: none; }
}
/* Botón que se lee como un enlace dentro de un texto («Dejarlo por hoy») */
.boton-texto {
  background: none; border: 0; padding: 0; font: inherit; color: var(--sg-color-primary);
  text-decoration: underline; cursor: pointer;
}
/* Etiqueta que solo leen los lectores de pantalla */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Mensajes emergentes (assets/js/emergentes.js): tarjeta que baja de arriba, debajo de la cabecera */
.emergente {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); z-index: calc(var(--sg-z-nav) + 5);
  width: min(560px, calc(100vw - 2 * var(--sg-space-4))); transform: translateX(-50%);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sg-space-2) var(--sg-space-3); align-items: start;
  /* Compacto (20/10/2026): tapaba las pestañas de Inglés durante 15 s con un mensaje de dos palabras */
  padding: var(--sg-space-2) var(--sg-space-2) var(--sg-space-2) var(--sg-space-3);
  background: var(--sg-color-surface); color: var(--sg-color-fg);
  border: 1px solid var(--sg-color-border); border-left: 4px solid var(--sg-color-primary);
  border-radius: var(--sg-radius-md); box-shadow: var(--sg-shadow-float);
  animation: emergente-entra 0.25s var(--sg-ease);
}
.emergente-sale { animation: emergente-sale 0.22s var(--sg-ease) forwards; }
@keyframes emergente-entra { from { opacity: 0; transform: translate(-50%, -16px); } }
@keyframes emergente-sale { to { opacity: 0; transform: translate(-50%, -16px); } }
@media (prefers-reduced-motion: reduce) { .emergente, .emergente-sale { animation: none; } }
.emergente-icono { font-size: 1.25rem; line-height: 1.3; }
.emergente-cuerpo { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sg-space-2); min-width: 0; align-items: center; }
.emergente-titulo { margin: 0; font-weight: 700; font-size: var(--sg-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emergente-texto { margin: 0; font-size: var(--sg-text-sm); color: var(--sg-color-fg-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Los botones a la derecha del texto, no debajo: la tarjeta se queda en dos líneas */
.emergente-acciones { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); grid-row: 1 / span 2; grid-column: 2; }
.emergente-acciones:empty { display: none; }
.emergente-cerrar { border: 0; background: none; color: var(--sg-color-fg-muted); font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0 4px; min-width: 32px; min-height: 32px; }
/* Versión nueva esperando a que se pueda recargar (app.js): banda fija bajo la cabecera, un toque y se actualiza */
.aviso-version {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: calc(var(--sg-z-nav) + 4);
  width: min(560px, calc(100vw - 2 * var(--sg-space-4))); min-height: 44px; padding: var(--sg-space-2) var(--sg-space-4);
  border: 0; border-radius: var(--sg-radius-pill); background: var(--sg-color-accent); color: var(--sg-color-on-accent);
  font-weight: 700; font-size: var(--sg-text-sm); box-shadow: var(--sg-shadow-float); cursor: pointer;
}
/* Tiempo › Tifones (vistas/tiempo.js): la probabilidad de ECMWF, en grande */
.tifon-prob { font-size: var(--sg-text-xl); font-weight: 750; color: var(--sg-color-fg); }
#tifones ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sg-space-1); }
/* ---------- Cabecera: sincronizar y chat ---------- */
.cabecera-boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--sg-radius-pill);
  background: transparent; color: var(--sg-color-primary); cursor: pointer;
}
.cabecera-boton svg { width: 22px; height: 22px; }
/* El % para batir su récord, a la izquierda de la lupa (metas.js › pintarRecordCabecera, 24/09/2026) */
.cabecera-record { flex: none; padding: 4px 9px; border-radius: var(--sg-radius-pill); background: var(--sg-color-primary-soft);
  color: var(--sg-color-primary); font-size: var(--sg-text-sm); font-weight: 800; white-space: nowrap; text-decoration: none;
  font-variant-numeric: tabular-nums; }
.cabecera-record-batido { background: var(--sg-color-success-soft); color: var(--sg-color-success); }
.cabecera-boton:hover { background: var(--sg-color-primary-soft); }
/* Botón ⟳: verde con línea, rojo sin ella (app.js actualizarInsignia). Sustituye al bocadillo «Hay línea…» de
   Inicio y Viaje. primary-fg es blanco en claro y marino en oscuro: se lee sobre el verde y el rojo de cada tema */
.cabecera-boton.linea-si { background: var(--sg-color-success); color: var(--sg-color-primary-fg); }
.cabecera-boton.linea-no { background: var(--sg-color-danger); color: var(--sg-color-primary-fg); }
.cabecera-boton .contador {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--sg-radius-pill); background: var(--sg-color-danger); color: var(--sg-color-primary-fg);
  font-size: 11px; font-weight: var(--sg-peso-fuerte); line-height: 18px; text-align: center;
}
/* No leídos fuera de la cabecera: en las pestañas del chat y en el botón del chat de la familia */
.chat-canales .contador, .familia-chat .contador, .profe-jesus .contador {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; vertical-align: 1px;
  border-radius: var(--sg-radius-pill); background: var(--sg-color-danger); color: var(--sg-color-primary-fg);
  font-size: 11px; font-weight: var(--sg-peso-fuerte); line-height: 18px; text-align: center;
}
.chat-canales .contador.oculto, .familia-chat .contador.oculto { display: none; }
/* Pestañas del chat: una por conversación (Felix, Familia, Invitado…), la abierta en azul. Fijas debajo de la
   cabecera (petición de Felix): los mensajes pasan por debajo y las pestañas siguen a la vista. --chat-tope es el alto
   de la cabecera, que mide vistas/chat.js (cambia con la muesca del iPhone y la letra grande). Ocupan el ancho entero
   (sobre el margen de .vista) para que no asomen mensajes por los lados */
.chat-canales {
  justify-content: center; position: sticky; top: var(--chat-tope, 56px); z-index: 4;
  margin: 0 calc(-1 * var(--sg-space-4)) var(--sg-space-1); padding: var(--sg-space-2) var(--sg-space-4);
  background: var(--sg-color-bg); border-bottom: 0.5px solid var(--sg-color-border);
}
.chat-canales button[aria-selected="true"] { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.familia-chat { align-items: center; }
.girando svg { animation: girar 1s linear infinite; }
/* Mensajes sin leer (app.js, .con-nuevos): cada 10 s el icono del chat se menea menos de 1 s y el número late con
   él; el resto del tiempo, quieto. Con «reducir movimiento» en el móvil, quieto siempre (el número sigue) */
.cabecera-boton.con-nuevos svg { transform-origin: 50% 15%; animation: timbre-chat 10s ease-in-out infinite; }
.cabecera-boton.con-nuevos .contador { animation: latido-chat 10s ease-in-out infinite; }
@keyframes timbre-chat {
  0%, 8%, 100% { transform: none; }
  1% { transform: rotate(16deg); }
  2.5% { transform: rotate(-14deg); }
  4% { transform: rotate(10deg); }
  5.5% { transform: rotate(-6deg); }
  7% { transform: rotate(3deg); }
}
@keyframes latido-chat { 0%, 8%, 100% { transform: scale(1); } 3% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .cabecera-boton.con-nuevos svg, .cabecera-boton.con-nuevos .contador { animation: none; } }
/* Inicio de Felix: las tareas de prioridad alta de «Lo siguiente» (vistas/inicio.js, .item-llamativo). Cada 10 s, un
   meneo corto con un borde rojo que se enciende y se apaga, y la etiqueta «Alta» late (como el timbre del chat); el
   resto del tiempo, quietas. Con «reducir movimiento», solo el borde, fijo */
.item-llamativo {
  border-radius: var(--sg-radius-sm); animation: llamar-alta 10s ease-in-out infinite;
  /* aire para el borde sin mover el texto: .item ya tiene --sg-space-1 de relleno a los lados */
  padding-inline: var(--sg-space-2); margin-inline: calc(var(--sg-space-1) - var(--sg-space-2));
}
.item-llamativo .etiqueta-alta { animation: latido-chat 10s ease-in-out infinite; }
@keyframes llamar-alta {
  0%, 9%, 100% { transform: none; box-shadow: none; }
  1.5% { transform: translateX(-5px); box-shadow: 0 0 0 2px var(--sg-color-danger); }
  3% { transform: translateX(5px); }
  4.5% { transform: translateX(-3px); }
  6% { transform: translateX(2px); box-shadow: 0 0 0 2px var(--sg-color-danger); }
}
@media (prefers-reduced-motion: reduce) {
  .item-llamativo, .item-llamativo .etiqueta-alta { animation: none; }
  .item-llamativo { box-shadow: inset 3px 0 0 var(--sg-color-danger); }
}

/* Cuenta atrás de la salida en la cabecera de Inicio (app.js cuentaCabecera): en el hueco del título, que se
   esconde, y en dos líneas como la hora («✈ 78 días» / «2 h 07 min»). Cifras de ancho fijo: no baila cada minuto */
.cabecera-cuenta {
  flex: 1; min-width: 0; margin: 0; display: grid; justify-items: center; line-height: 1.15;
  color: var(--sg-color-fg); font-variant-numeric: tabular-nums; white-space: nowrap;
  container-type: inline-size; /* su ancho es el que deja la cabecera: con él se elige la versión (abajo) */
}
.cc-largo, .cc-corto { display: grid; justify-items: center; max-width: 100%; }
.cc-largo > *, .cc-corto > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cabecera-cuenta strong { font-size: var(--sg-text-lg); font-weight: var(--sg-peso-titulo); color: var(--sg-color-fg); }
.cabecera-cuenta strong + span { font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio); color: var(--sg-color-fg-muted); }
/* Versión corta («78 d» / «2:07 h») si no cabe la larga: con la insignia de la línea (📴 3) a 390 px quedan unos
   78 px y «✈ 78 días» necesita más de 80. Sin consultas de contenedor (navegadores viejos), la larga, recortada */
.cc-corto { display: none; }
@container (max-width: 84px) {
  .cc-largo { display: none; }
  .cc-corto { display: grid; }
}
/* Como la hora y el tiempo: con letra grande en el móvil no crece (la letra grande es para el contenido) */
@media (max-width: 420px) {
  html.letra-grande .cabecera-cuenta strong { font-size: calc(var(--sg-text-lg) / 1.15); }
  html.letra-grande .cabecera-cuenta strong + span { font-size: calc(var(--sg-text-xs) / 1.15); }
}

/* ---------- Chat ---------- */
.chat { display: grid; gap: var(--sg-space-2); padding-bottom: var(--sg-space-4); }
.chat-anteriores { justify-self: center; }
.chat-lista { display: flex; flex-direction: column; gap: var(--sg-space-2); }
/* IA (vistas/asistente.js y practicar.js): «Pensando…» con los puntos saltando y las preguntas de ejemplo */
.ia-pensando { color: var(--sg-color-fg-muted); font-style: italic; }
.ia-pensando span { animation: ia-punto 1.2s infinite; }
.ia-pensando span:nth-child(2) { animation-delay: 0.2s; }
.ia-pensando span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ia-punto { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ia-pensando span { animation: none; } }
.ia-sugerencias { justify-content: center; }
.ia-chat .chat-burbuja a { font-weight: var(--sg-peso-medio); }
.chat-dia { text-align: center; margin: var(--sg-space-2) 0; }
.chat-dia span { font-size: var(--sg-text-xs); color: var(--sg-color-fg-muted); background: var(--sg-color-surface); border: 1px solid var(--sg-color-border); padding: 2px var(--sg-space-3); border-radius: var(--sg-radius-pill); }
.chat-burbuja {
  max-width: 85%; display: grid; gap: 4px; padding: var(--sg-space-2) var(--sg-space-3);
  border-radius: var(--sg-radius-lg); border: 1px solid var(--sg-color-border); overflow-wrap: anywhere;
}
.chat-mia { align-self: flex-end; background: var(--sg-color-primary-soft); border-color: transparent; border-bottom-right-radius: 4px; }
.chat-suya { align-self: flex-start; background: var(--sg-color-surface); border-bottom-left-radius: 4px; }
.chat-error { border-color: var(--sg-color-danger); }
.chat-autor { color: var(--sg-color-primary); font-weight: var(--sg-peso-fuerte); }
.chat-texto { margin: 0; }
.chat-meta { justify-self: end; color: var(--sg-color-fg-muted); }
.chat-visto { color: var(--sg-color-primary); font-weight: var(--sg-peso-fuerte); }
.chat-foto { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--sg-radius-sm); overflow: hidden; }
.chat-foto img { display: block; width: 100%; max-width: 280px; max-height: 320px; object-fit: cover; }
.chat-video { width: 100%; max-width: 320px; max-height: 360px; border-radius: var(--sg-radius-sm); background: var(--sg-color-fg); }
/* Caja de escribir: pegada abajo, encima de la barra de navegación del móvil */
.chat-redactar {
  position: sticky; bottom: calc(var(--sg-nav-alto) + env(safe-area-inset-bottom)); z-index: 5;
  background: var(--sg-color-bg); padding: var(--sg-space-2) 0; border-top: 1px solid var(--sg-color-border);
}
.chat-fila { display: flex; align-items: flex-end; gap: var(--sg-space-1); }
.chat-fila textarea {
  flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none; padding: 10px var(--sg-space-3);
  overflow-y: hidden; line-height: 1.4;
  border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-pill); font: inherit; background: var(--sg-color-surface); color: var(--sg-color-fg);
}
.chat-fila .boton-icono { flex: none; font-size: var(--sg-text-lg); }
.chat-fila label.boton { cursor: pointer; }
.chat-grabando { display: flex; align-items: center; gap: var(--sg-space-2); flex-wrap: wrap; font-weight: var(--sg-peso-medio); min-height: 44px; }
.chat-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--sg-color-danger); animation: latir 1s ease-in-out infinite; }
@keyframes latir { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .chat-punto, .girando svg { animation: none; } }
@media (min-width: 900px) { .chat-redactar { bottom: 0; } }
/* El acceso de familia no tiene barra de abajo: la caja va pegada al borde (con su hueco, los mensajes asomaban debajo) */
.app-familia .chat-redactar { bottom: env(safe-area-inset-bottom); }

/* Aviso tipo WhatsApp (vacunas) y fases en columna */
.aviso-whatsapp {
  white-space: normal; background: var(--sg-color-surface); border-radius: var(--sg-radius-sm); padding: var(--sg-space-3); line-height: 1.55;
  min-width: 0; overflow-wrap: anywhere; /* las URL largas (cita online) no deben ensanchar la pantalla */
}
.segmentos-apilados { flex-direction: column; }
.segmentos-apilados button { width: 100%; text-align: left; }

/* ---------- Tiempo ---------- */
.tiempo-ahora { display: flex; align-items: center; gap: var(--sg-space-3); }
.tiempo-emoji { font-size: 2.6rem; line-height: 1; }
.tiempo-grados { font-size: 2.4rem; font-weight: var(--sg-peso-titulo); line-height: 1; color: var(--sg-color-fg); }
.tiempo-horas {
  list-style: none; margin: var(--sg-space-3) 0 0; padding: 0 0 var(--sg-space-1);
  display: flex; gap: var(--sg-space-2); overflow-x: auto; scroll-snap-type: x proximity;
}
.tiempo-horas li {
  flex: 0 0 auto; min-width: 58px; display: grid; justify-items: center; gap: 2px; padding: var(--sg-space-2);
  border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-md); background: var(--sg-color-surface); scroll-snap-align: start;
}
.tiempo-lluvia { color: var(--sg-color-primary); font-weight: var(--sg-peso-medio); }
.tiempo-semana summary { cursor: pointer; font-weight: var(--sg-peso-medio); margin-top: var(--sg-space-2); min-height: 44px; display: flex; align-items: center; }
.tiempo-dia { display: grid; grid-template-columns: 4.2rem 1.6rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--sg-space-2); padding: var(--sg-space-2) 0; }
/* La descripción no se corta («Tor…», «Llovi…»; con letra grande, hasta «Poco nub…»). Partida con guion
   (lang="es") si hace falta; si el navegador no tiene diccionario, overflow-wrap parte la palabra sin perderla */
.tiempo-dia-texto { white-space: normal; overflow-wrap: anywhere; hyphens: auto; line-height: 1.2; }
/* Con letra grande en el móvil a la descripción le quedaban 10-19 px (una letra por línea): cuando la lista
   es estrecha (medida en rem, así que cuenta el tamaño de letra), baja a una segunda línea bajo el icono.
   Hijos de .tiempo-dia en tiempo.js, por orden: nombre del día, icono, texto, lluvia, temperaturas */
.tiempo-semana .lista { container-type: inline-size; }
@container (max-width: 19rem) {
  .tiempo-dia { row-gap: 0; }
  .tiempo-dia > * { grid-row: 1; }
  .tiempo-dia > :nth-child(4) { grid-column: 4; }
  .tiempo-dia > :nth-child(5) { grid-column: 5; }
  .tiempo-dia > .tiempo-dia-texto { grid-row: 2; grid-column: 2 / -1; }
}
.tiempo-mini { display: flex; gap: var(--sg-space-2); overflow-x: auto; padding-bottom: var(--sg-space-1); }
.tiempo-mini a {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; min-width: 76px; padding: var(--sg-space-2);
  border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-md); background: var(--sg-color-surface); color: var(--sg-color-fg); text-decoration: none;
}

/* ---------- Vuelos ---------- */
.vuelo-titulo { margin: 0; font-size: var(--sg-text-lg); }
.vuelo-datos { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: var(--sg-space-1) var(--sg-space-3); margin: var(--sg-space-3) 0; }
.vuelo-datos dt { color: var(--sg-color-fg-muted); font-size: var(--sg-text-sm); }
.vuelo-datos dd { margin: 0; overflow-wrap: anywhere; }
.vuelo-enlaces { margin-top: var(--sg-space-2); }
@media (max-width: 420px) {
  .vuelo-datos { grid-template-columns: minmax(0, 1fr); }
  .vuelo-datos dd { margin-bottom: var(--sg-space-2); }
}

/* ---------- Guías de aeropuerto: plano esquemático paso a paso ---------- */
.guia-saltos { margin-bottom: var(--sg-space-4); }
.guia-puerta { font-size: var(--sg-text-lg); }
.guia-apartado p { margin: 0 0 var(--sg-space-2); }
/* Las guías citan webs con URLs largas: que partan en vez de ensanchar la pantalla */
.guia-apartado, .plano-pasos, .guia-avisos, .escala details { overflow-wrap: anywhere; }
.guia-avisos { margin: 0; padding-left: var(--sg-space-5); display: grid; gap: var(--sg-space-2); }
.plano-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.plano-pasos li {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sg-space-3);
  padding-bottom: var(--sg-space-4); counter-increment: paso;
}
/* Línea que une los pasos, como un recorrido en un plano */
.plano-pasos li:not(:last-child)::before {
  content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--sg-color-border);
}
.plano-icono {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem;
  background: var(--sg-color-primary-soft); border: 2px solid var(--sg-color-primary);
}
.plano-pasos p { margin: 0; padding-top: var(--sg-space-2); }
.plano-pasos p::before { content: counter(paso) '. '; font-weight: var(--sg-peso-titulo); color: var(--sg-color-primary); }

/* ---------- Avisos de la guía (la guía avisa a Felix según dónde está) ----------
   Como las notificaciones del iPhone: una tarjeta con el icono en un círculo a la izquierda (antes, bocadillos de
   cómic con borde negro) */
.guia { display: grid; gap: var(--sg-space-3); }
.guia:empty { display: none; }
.guia-fila {
  display: flex; align-items: flex-start; gap: var(--sg-space-3);
  padding: var(--sg-space-3) var(--sg-space-4); border-radius: var(--sg-radius-lg);
  background: var(--sg-color-surface); box-shadow: var(--sg-shadow-card);
}
.guia-alerta { background: var(--sg-color-warning-soft); }
.guia-cara { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: var(--sg-color-accent-soft); }
.bocadillo { flex: 1; min-width: 0; margin: 0; padding-top: 6px; color: var(--sg-color-fg); }
.bocadillo p { margin: 0; }
.bocadillo p + p { margin-top: var(--sg-space-1); }
.bocadillo a { font-weight: var(--sg-peso-medio); }
.bocadillo-titulo { font-weight: var(--sg-peso-titulo); }
/* La del tiempo, suelta en su tarjeta (sin icono): en un recuadro gris */
.bocadillo-tiempo { margin-top: var(--sg-space-3); padding: var(--sg-space-3); border-radius: var(--sg-radius-md); background: var(--sg-color-surface-2); }

/* Calculadora de cambio: dos casillas grandes con «=» en medio (una encima de otra en el móvil) */
.cambio-casillas { display: grid; gap: var(--sg-space-2); align-items: end; }
.cambio-casillas input { font-size: var(--sg-text-2xl); font-weight: var(--sg-peso-fuerte); min-height: 56px; }
.cambio-igual { text-align: center; font-size: var(--sg-text-xl); color: var(--sg-color-fg-muted); }
/* En la ventanilla de cambio (18/10/2026): tramos, veredicto y lo que le tienen que dar */
/* Sin saltar de línea: «Mejor ir a otra caseta» se iba debajo y descuadraba los tres tramos (18/10/2026) */
.cambio-tramos li { display: flex; gap: var(--sg-space-2); align-items: baseline; padding-block: var(--sg-space-1); }
.cambio-tramos li > span:last-child { flex: 1; min-width: 0; }
.cambio-nivel { min-width: 6.5rem; font-weight: var(--sg-peso-fuerte); }
.cambio-bueno { color: var(--sg-color-success); }
.cambio-normal { color: var(--sg-color-warning); }
.cambio-malo { color: var(--sg-color-danger); }
.cambio-veredicto { font-weight: var(--sg-peso-fuerte); font-size: var(--sg-text-lg); padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-sm); margin: 0; }
.cambio-veredicto.cambio-bueno { background: var(--sg-color-success-soft); }
.cambio-veredicto.cambio-normal { background: var(--sg-color-warning-soft); }
.cambio-veredicto.cambio-malo { background: var(--sg-color-danger-soft); }
.cambio-te-dan { font-size: var(--sg-text-xl); margin: 0; }
.cambio-tablas { display: grid; gap: var(--sg-space-4); }
.cambio-tablas .fila-extremos { white-space: nowrap; gap: var(--sg-space-3); }
@media (min-width: 640px) { .cambio-tablas { grid-template-columns: 1fr 1fr; } }
/* El dinero que más va a usar: billetes como rectángulos, monedas redondas; cada uno con lo que vale en euros */
/* Rejilla de anchos iguales: 3 billetes y 4 monedas por fila, también a 390 px (con flex-wrap el último bajaba solo) */
.cambio-dinero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-2); max-width: 26rem; }
.cambio-dinero:has(.cambio-moneda) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cambio-pieza { display: grid; place-items: center; gap: 2px; text-align: center; border: 2px solid var(--sg-color-border, rgba(127,127,127,.35)); background: var(--sg-color-surface-2); }
.cambio-pieza strong { font-size: var(--sg-text-lg); }
.cambio-pieza span { font-size: var(--sg-text-sm, .85rem); color: var(--sg-color-fg-muted); }
/* Las piezas son botones (suenan en inglés al tocarlas): sin el aspecto de botón del navegador */
button.cambio-pieza { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cambio-ingles { font-size: var(--sg-text-xs, .75rem); font-style: normal; font-weight: 600; }
.cambio-billete { padding: var(--sg-space-2) var(--sg-space-1); border-radius: var(--sg-radius-sm); }
/* Tres líneas (pesos, euros, inglés) dentro del círculo: interlineado y huecos justos para que no se estire en óvalo */
.cambio-moneda { aspect-ratio: 1; border-radius: 50%; gap: 0; line-height: 1.15; padding: 0; align-content: center; }
@media (min-width: 640px) { .cambio-casillas { grid-template-columns: 1fr auto 1fr; } .cambio-igual { padding-bottom: var(--sg-space-3); } }
/* Frases del viaje: altavoz · texto · «Enseñar» */
.frase-fila { grid-template-columns: auto 1fr auto; }
/* Pasos del viaje: la casilla va aparte del título, con zona táctil de 44 px (tocar el título no marca el paso) */
.paso > .fila-extremos { flex-wrap: nowrap; align-items: flex-start; }
.paso-titulo { display: flex; align-items: flex-start; gap: var(--sg-space-1); flex: 1; min-width: 0; }
.paso-casilla { flex: none; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -10px 0 -10px -12px; cursor: pointer; }
.paso-casilla input { flex: none; width: 22px; height: 22px; margin: 0; }
.paso-titulo .item-titulo { padding-top: 2px; }
.paso-hecho .item-titulo { color: var(--sg-color-fg-muted); text-decoration: line-through; }

/* Viaje por sitios: Antes · Madrid · escala · Manila · Bukidnon, siempre los cinco a la vista y con lo hecho de cada uno */
.sitios { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
/* Deslizar entre sitios (viaje.js): el envoltorio no cambia la maqueta de la vista (display: contents) y el sitio nuevo
   entra desde el lado del que viene, con un pequeño zoom */
.deslizar-sitios { display: contents; }
@keyframes sitio-entra-derecha { from { transform: translateX(44px) scale(0.93); opacity: 0.35; } to { transform: none; opacity: 1; } }
@keyframes sitio-entra-izquierda { from { transform: translateX(-44px) scale(0.93); opacity: 0.35; } to { transform: none; opacity: 1; } }
.vista.sitio-entra-derecha { animation: sitio-entra-derecha 0.34s var(--sg-ease); }
.vista.sitio-entra-izquierda { animation: sitio-entra-izquierda 0.34s var(--sg-ease); }
@media (prefers-reduced-motion: reduce) { .vista.sitio-entra-derecha, .vista.sitio-entra-izquierda { animation: none; } }
.sitios a {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 72px; padding: var(--sg-space-2) var(--sg-space-1);
  border: 0; border-radius: var(--sg-radius-md); background: var(--sg-color-surface); box-shadow: var(--sg-shadow-card);
  color: var(--sg-color-fg); text-decoration: none; text-align: center;
}
.sitios a[aria-current="page"] { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.sitio-icono { font-size: 1.5rem; line-height: 1; }
/* El nombre, sin partirse («Bukidno / n» con la letra del móvil grande): la letra se ajusta al ancho de la pantalla */
.sitio-nombre { font-weight: var(--sg-peso-titulo); font-size: min(var(--sg-text-sm), 3.1vw); overflow-wrap: normal; }
.sitios-vuelos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sg-space-2); }
.sitio-cuenta { font-size: var(--sg-text-xs); color: var(--sg-color-fg-muted); }
.sitios a[aria-current="page"] .sitio-cuenta { color: var(--sg-color-primary-fg); }
.sitios-vuelos { margin: calc(-1 * var(--sg-space-2)) 0 0; text-align: right; }
details.momento { gap: 0; }
details.momento[open] > summary { margin-bottom: var(--sg-space-3); }
details.momento > .panel + .panel, details.momento > .panel + details { margin-top: var(--sg-space-3); }
.momento-titulo { min-height: 44px; }
.sitio-cabecera h2 { margin: 0; font-size: var(--sg-text-xl); }
.sitio-cabecera p { margin: 0; }
.sitio-seccion:not(.panel) { display: grid; gap: var(--sg-space-3); }
.sitio-seccion > h2, .sitio-h2 { margin: 0; }
.sitio-h3 { font-size: var(--sg-text-md); margin: var(--sg-space-2) 0 0; }
.sitio-seccion .guia-apartado p:last-child { margin-bottom: 0; }
/* Cada momento (En casa, Ir a Madrid, En el aeropuerto…) con su franja; los de «Después» van plegados */
.momento { display: grid; gap: var(--sg-space-3); }
.momento-titulo {
  display: flex; align-items: baseline; gap: var(--sg-space-2); margin: 0; padding: var(--sg-space-2) var(--sg-space-3);
  font-size: var(--sg-text-md); font-weight: var(--sg-peso-titulo); color: var(--sg-color-fg);
  background: var(--sg-color-primary-soft); border-radius: var(--sg-radius-sm);
}
.momento-titulo > span:first-child { flex: 1; min-width: 0; }
.momento-cuenta { flex: none; font-size: var(--sg-text-sm); font-weight: var(--sg-peso-medio); color: var(--sg-color-fg-muted); }
details.momento > summary { list-style: none; }
details.momento > summary::-webkit-details-marker { display: none; }
details.momento > summary::after { content: '▸'; flex: none; color: var(--sg-color-primary); }
details.momento[open] > summary::after { content: '▾'; }
/* Comer, Internet, Qué decir y Guía de cada sitio, plegados (18/10/2026: Manila medía 14.816 px, unas 17 pantallas;
   solo «Qué decir», 6.965). Se abren con un toque o con los botones de arriba (data-ir) */
details.sitio-plegable > summary { list-style: none; display: flex; align-items: center; gap: var(--sg-space-2); min-height: 44px; padding-block: 0; color: var(--sg-color-fg); }
details.sitio-plegable > summary::-webkit-details-marker { display: none; }
details.sitio-plegable > summary h2 { flex: 1; min-width: 0; margin: 0; }
details.sitio-plegable > summary::after { content: '▸'; flex: none; color: var(--sg-color-primary); }
details.sitio-plegable[open] > summary::after { content: '▾'; }
/* Cerrado, sin el hueco del gap de .panel (el contenido oculto del <details> cuenta como fila de la rejilla): en
   todos los paneles plegables (apartados de los sitios, recorrido del aeropuerto, «Tu viaje en una mirada»…) */
details.sitio-plegable { padding-block: var(--sg-space-2); }
details.panel:not([open]) { gap: 0; }
/* «Tu viaje en una mirada»: un párrafo por bloque, con aire entre ellos */
.ficha-bloques p { margin: 0 0 var(--sg-space-3); overflow-wrap: anywhere; }
.ficha-bloques p:last-child { margin-bottom: 0; }
/* El detalle de cada paso (detalleRico de viaje.js): párrafos con aire y los «1. 2. 3.» en lista numerada */
.paso-detalle p { margin: 0 0 var(--sg-space-2); }
.paso-detalle p:last-child { margin-bottom: 0; }
.paso-lista { margin: 0 0 var(--sg-space-2); padding-left: 1.4rem; display: grid; gap: var(--sg-space-2); }
.paso-lista:last-child { margin-bottom: 0; }
.recorrido > summary { font-weight: var(--sg-peso-medio); }
.recorrido .plano-pasos { margin-top: var(--sg-space-3); }

/* Ubicación: el mapa de OpenStreetMap (iframe) ocupa el ancho y no desborda a 390 px */
.mapa-caja { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border-radius: var(--sg-radius-md); overflow: hidden; border: 1px solid var(--sg-color-border); background: var(--sg-color-surface-2); }
.mapa { display: block; width: 100%; height: 100%; border: 0; }
/* Presupuesto: las 8 partes en rejilla (4 por fila) con su previsto; partidas con previsto frente a gastado */
.presu-fases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sg-space-2); }
.presu-fases a {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 76px; padding: var(--sg-space-2) var(--sg-space-1);
  border: 0; border-radius: var(--sg-radius-md); background: var(--sg-color-surface); box-shadow: var(--sg-shadow-card);
  color: var(--sg-color-fg); text-decoration: none; text-align: center;
}
.presu-fases a[aria-current="page"] { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.presu-fases a[aria-current="page"] .sitio-cuenta { color: var(--sg-color-primary-fg); }
.presu-resumen li { gap: var(--sg-space-3); padding: var(--sg-space-2) 0; border-bottom: 1px solid var(--sg-color-border); flex-wrap: nowrap; }
.presu-resumen li > span { min-width: 0; }
.presu-resumen li:last-child { border-bottom: 0; }
.presu-resumen strong { white-space: nowrap; font-size: var(--sg-text-md); }
.presu-total p { margin: 0; }
.presu-cabecera { flex-wrap: nowrap; align-items: flex-start; }
.presu-cabecera .item-titulo { min-width: 0; }
.presu-pagada { box-shadow: inset 3px 0 0 var(--sg-color-success); } /* ya sin bordes: una marca verde a la izquierda */
.presu-bien { color: var(--sg-color-success); font-weight: var(--sg-peso-medio); }
.presu-mal { color: var(--sg-color-danger); font-weight: var(--sg-peso-medio); }
.nowrap { white-space: nowrap; }
/* Barra de gasto: <meter> (verde por debajo, amarillo cerca del previsto, rojo al pasarse) */
.barra-gasto { width: 100%; height: 10px; }

/* Botón con aspecto de enlace (acciones secundarias dentro de un texto) */
/* Teléfono de Contactos como botón (el enlace en línea medía menos de 24 px de alto): a su ancho, no a toda la fila */
.tel-boton { justify-self: start; font-size: var(--sg-text-sm); }
/* El email, con zona táctil de 44 px (era una línea de 21 px; 18/10/2026) */
.contacto-email { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
/* padding-block: zona táctil más alta («Borrar mi historial» medía 19 px) sin cambiar cómo se ve */
.enlace-boton { background: none; border: 0; padding: 10px 0; font: inherit; color: var(--sg-color-primary); text-decoration: underline; cursor: pointer; }
/* Inicio: la línea de la ubicación va en su caja (se rehace sola); vacía, no deja hueco en la rejilla */
[data-linea-ubicacion]:empty { display: none; }
.vocab-fila .en { font-weight: 650; }
.vocab-fila .es { color: var(--sg-color-fg-muted); font-size: var(--sg-text-sm); }
/* Inglés › «Ver todo»: la lista entera de la clase para repasarla sin entrar en los 30 minutos */
.lista-entera > summary { font-weight: var(--sg-peso-medio); min-height: 44px; display: flex; align-items: center; }
/* Los tres huecos del día: la clase que viene ahora, marcada; las ya dadas, en segundo plano */
.hueco-ahora { border: 2px solid var(--sg-color-primary); }
.hueco-pasado { opacity: 0.66; }
.dia-horas { margin-top: var(--sg-space-2); }
/* Cómo suena, escrito a la española («SHUS»): en ROJO y en negrita, al tamaño del texto normal (Jesús, 18/09:
   en amarillo y pequeño no se veía). Es lo que Felix tiene que decir en voz alta, así que tiene que saltar a la
   vista antes que el español. Color propio (--sg-color-pron), no el de «peligro», aunque sea parecido */
.pron { color: var(--sg-color-pron); font-size: var(--sg-text-md); font-weight: 750; letter-spacing: 0.03em; }
.ocultar-es .vocab-fila .pron { filter: blur(5px); user-select: none; }
.ocultar-es .vocab-fila:active .pron, .ocultar-es .vocab-fila:focus-within .pron { filter: none; }
.ocultar-es .vocab-fila .es { filter: blur(5px); user-select: none; }
.ocultar-es .vocab-fila:active .es, .ocultar-es .vocab-fila:focus-within .es { filter: none; }
.franja-titulo { display: flex; align-items: center; gap: var(--sg-space-2); }
.franja-titulo svg { width: 22px; height: 22px; color: var(--sg-color-accent); }
.valoracion button { font-size: 1.3rem; }
.semana-dia { display: grid; grid-template-columns: 46px 1fr auto; gap: var(--sg-space-3); align-items: center; }
.dia-num {
  flex: none; width: 46px; height: 46px; border-radius: var(--sg-radius-md); display: grid; place-items: center;
  background: var(--sg-color-primary-soft); color: var(--sg-color-primary); font-weight: var(--sg-peso-fuerte); font-size: var(--sg-text-sm); text-align: center; line-height: 1.1;
}
.item-hoy { background: var(--sg-color-accent-soft); border-radius: var(--sg-radius-sm); padding-inline: var(--sg-space-2); }
/* Cuerpo de un item que es un botón (abre el detalle) */
button.item-cuerpo { text-align: left; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; }
.item > input[type="checkbox"] { margin-top: 2px; flex: none; }
code { font-family: var(--sg-font-mono); font-size: 0.9em; background: var(--sg-color-surface-2); padding: 0 4px; border-radius: 4px; }

/* Tarjetas de repaso */
.carta {
  min-height: 46dvh; display: grid; place-items: center; text-align: center; gap: var(--sg-space-3);
  padding: var(--sg-space-6); border-radius: var(--sg-radius-lg);
  background: var(--sg-color-surface); border: 0; box-shadow: var(--sg-shadow-card);
  cursor: pointer; user-select: none;
}
.carta .frente { font-size: var(--sg-text-2xl); font-weight: 700; overflow-wrap: anywhere; }
.carta .dorso { font-size: var(--sg-text-lg); color: var(--sg-color-fg-muted); }

/* Tarjetas para enseñar (pantalla completa) */
.mostrar {
  position: fixed; inset: 0; z-index: var(--sg-z-modal);
  background: #ffffff; color: #0b1320;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(var(--sg-space-4) + env(safe-area-inset-top)) var(--sg-space-5) calc(var(--sg-space-4) + env(safe-area-inset-bottom));
}
.mostrar .texto-en { align-self: center; font-size: clamp(1.6rem, 6.5vw, 3rem); font-weight: 700; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
.mostrar .texto-es { font-size: var(--sg-text-md); color: #4a5565; white-space: pre-wrap; }
.mostrar .boton { background: #f1f1f1; color: #0b1320; border-color: #d9d9d9; }
/* Visor de fotos (documentos): fondo oscuro y la foto entera, sin salir de la app */
.mostrar.visor { background: var(--sg-color-fg); color: var(--sg-color-primary-fg); padding-inline: var(--sg-space-3); gap: var(--sg-space-3); }
.visor-imagen { width: 100%; height: 100%; min-height: 0; object-fit: contain; align-self: center; touch-action: pinch-zoom; }
.visor-nombre { color: var(--sg-color-primary-fg); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.visor > p { align-self: center; }

/* ---------- Modal y avisos ---------- */
.modal-fondo {
  position: fixed; inset: 0; z-index: var(--sg-z-modal);
  background: var(--sg-color-overlay);
  display: grid; align-items: end; justify-items: center;
  padding: var(--sg-space-3);
  cursor: pointer;
}
@media (min-width: 640px) { .modal-fondo { align-items: center; } }
.modal {
  cursor: auto;
  width: min(100%, 560px); max-height: 88dvh; overflow-y: auto;
  background: var(--sg-color-surface); color: var(--sg-color-fg);
  border-radius: var(--sg-radius-lg); box-shadow: var(--sg-shadow-float);
  padding: var(--sg-space-5); display: grid; gap: var(--sg-space-4);
  /* La columna puede ser más estrecha que su hijo más ancho: si no, con letra grande un
     selector de archivo o una fila de botones ensanchan el modal y el texto se corta */
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: calc(var(--sg-space-5) + env(safe-area-inset-bottom));
}
/* Ancho en % (no el intrínseco del navegador, ~414 px con letra grande) para que no empuje el modal */
.modal input[type="file"] { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--sg-nav-alto) + var(--sg-space-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: var(--sg-z-toast);
  background: var(--sg-color-fg); color: var(--sg-color-bg);
  padding: var(--sg-space-3) var(--sg-space-5); border-radius: var(--sg-radius-lg);
  font-size: var(--sg-text-sm); font-weight: var(--sg-peso-medio); box-shadow: var(--sg-shadow-float);
  /* Con left: 50% y ancho automático, un aviso largo solo podía usar media pantalla (a 390 px, una columna de
     unos 190 px y 8 líneas). Ancho del texto, hasta el de la pantalla menos los márgenes (y legible en escritorio) */
  width: max-content; max-width: min(calc(100% - 2 * var(--sg-space-4)), 36rem);
  pointer-events: none; /* que un aviso no se quede con los toques de lo que tapa */
}
/* Texto con primary-fg: blanco en claro (6,5:1) y marino en oscuro (7,6:1; el blanco fijo sobre el rojo
   claro del tema oscuro se quedaba en 2,4:1). Los de error no se van solos: se cierran al tocarlos */
.toast-error { background: var(--sg-color-danger); color: var(--sg-color-primary-fg); pointer-events: auto; cursor: pointer; }
.toast-cerrar { margin-left: var(--sg-space-3); font-weight: var(--sg-peso-fuerte); }
/* En el chat, por encima de la caja de escribir (si no, taparía el texto, 📎 y ➤) */
body:has(.vista-chat) .toast { bottom: calc(var(--sg-nav-alto) + 84px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body:has(.vista-chat) .toast { bottom: 96px; } }
body.sin-scroll { overflow: hidden; }

/* ---------- Acceso ---------- */
.acceso {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--sg-space-6) var(--sg-space-4);
  background:
    radial-gradient(circle at 50% -20%, var(--sg-color-accent-soft), transparent 60%),
    var(--sg-color-bg);
}
.acceso-caja { width: min(100%, 380px); display: grid; gap: var(--sg-space-5); text-align: center; }
.acceso-caja .sol-grande { width: 112px; height: 112px; margin: 0 auto; color: var(--sg-color-accent); }
.acceso-caja .sol-grande svg { width: 100%; height: 100%; }
.quien-eres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sg-space-3); }
.quien-eres button {
  min-height: 64px; border-radius: var(--sg-radius-md); border: 2px solid var(--sg-color-border);
  background: var(--sg-color-surface); font-weight: var(--sg-peso-fuerte); font-size: var(--sg-text-lg); cursor: pointer;
}
.quien-eres button[aria-pressed="true"] { border-color: var(--sg-color-primary); background: var(--sg-color-primary-soft); color: var(--sg-color-primary); }

/* ---------- Invitado y familia ---------- */
/* Aviso fijo del invitado encima del título: todo lo que toca se queda en su móvil */
.aviso-invitado {
  max-width: var(--sg-ancho-max); margin: var(--sg-space-3) auto 0; padding: var(--sg-space-2) var(--sg-space-3);
  width: calc(100% - 2 * var(--sg-space-4));
  background: var(--sg-color-accent-soft); color: var(--sg-color-fg); border-radius: var(--sg-radius-md);
  font-size: var(--sg-text-xs); line-height: 1.4;
  display: flex; align-items: center; gap: var(--sg-space-2);
}
.aviso-invitado p { flex: 1; margin: 0; }
.aviso-invitado .boton { flex: none; }
/* Oscar, el compañero (26/10/2026): marca lo suyo, pero no crea tareas, pasos, destinos ni contactos (el servidor no
   se los guardaría) */
.app-companero [data-nuevo], .app-companero [data-nueva] { display: none !important; }
/* Familia: una sola pantalla, sin barra de navegación */
.app-familia { padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 900px) { .app-familia { display: block; } }
.familia-lugar { font-size: var(--sg-text-2xl); font-weight: var(--sg-peso-titulo); line-height: 1.15; letter-spacing: -0.02em; }
.familia-mensaje { font-size: var(--sg-text-lg); font-weight: var(--sg-peso-medio); }
.familia-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-2); }
.familia-sitio { display: flex; align-items: center; gap: var(--sg-space-3); font-weight: var(--sg-peso-medio); }
.familia-marca {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--sg-color-border); font-size: var(--sg-text-xs); color: var(--sg-color-primary-fg);
}
.familia-hecho .familia-marca { background: var(--sg-color-success); border-color: var(--sg-color-success); }
.familia-ahora .familia-marca { background: var(--sg-color-primary); border-color: var(--sg-color-primary); }
.familia-luego { color: var(--sg-color-fg-muted); }
.familia-curiosidades { margin: 0; padding-left: var(--sg-space-5); display: grid; gap: var(--sg-space-1); }
.familia-frase { background: var(--sg-color-surface-2); border-radius: var(--sg-radius-md); padding: var(--sg-space-3); display: grid; gap: 2px; }
/* Ajustes › Familia e invitado: cada acceso, separado del otro */
.acceso-panel + .acceso-panel { border-top: 0.5px solid var(--sg-color-border); padding-top: var(--sg-space-4); }
.pin-input {
  text-align: center; letter-spacing: 0.6em; font-size: var(--sg-text-2xl) !important; font-weight: var(--sg-peso-fuerte);
  min-height: 64px !important; padding-left: 0.6em !important;
}
.error-texto { color: var(--sg-color-danger); font-weight: var(--sg-peso-medio); font-size: var(--sg-text-sm); min-height: 1.4em; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--sg-text-sm); }
th, td { text-align: left; padding: var(--sg-space-2); border-bottom: 1px solid var(--sg-color-border); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Buscador (lupa de la cabecera, buscar.js) ---------- */
/* Arriba también en el móvil: abajo, el teclado taparía los resultados */
.modal-fondo.modal-arriba { align-items: start; }
.buscador-titulo { display: flex; align-items: center; gap: var(--sg-space-2); margin: 0; }
.buscador-titulo svg { width: 22px; height: 22px; flex: none; }
input.buscador-campo {
  width: 100%; min-height: 48px; padding: var(--sg-space-2) var(--sg-space-3);
  border: 2px solid var(--sg-color-primary); border-radius: var(--sg-radius-sm);
  background: var(--sg-color-surface); color: var(--sg-color-fg);
  font-size: 16px; /* evita el zoom automático de iOS */
}
.buscador-lista .item { align-items: center; color: var(--sg-color-fg); text-decoration: none; }
.buscador-icono {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: var(--sg-radius-sm); background: var(--sg-color-primary-soft); color: var(--sg-color-primary);
}
.buscador-icono svg { width: 18px; height: 18px; }
/* El elemento al que lleva un resultado: se marca un momento */
.resaltado { outline: 3px solid var(--sg-color-accent); outline-offset: 2px; transition: outline-color 0.6s; }
@media (prefers-reduced-motion: reduce) { .resaltado { transition: none; } }

/* ---------- Peticiones para la app (vistas/peticiones.js) ---------- */
.peticion { display: grid; gap: var(--sg-space-2); }
.peticion-hilo {
  list-style: none; margin: 0; padding: 0 0 0 var(--sg-space-3); display: grid; gap: var(--sg-space-2);
  border-left: 3px solid var(--sg-color-border);
}
.peticion-hilo li { display: grid; gap: 2px; }
.peticion-responder { align-items: flex-end; flex-wrap: nowrap; }
.peticion-responder textarea { min-height: 44px; flex: 1; }
/* El selector de archivo mide lo que el navegador quiera (~300 px con su texto): que no ensanche la pantalla en el móvil */
.form input[type="file"] { width: 100%; max-width: 100%; min-width: 0; }
/* Botón del selector de archivo (Subir documento, Peticiones, Adjuntar): el nativo mide unos 25 px y sale
   gris y pequeño. Con ::file-selector-button se queda el input de verdad (conserva «required») */
.form input[type="file"], .modal input[type="file"] { font-size: var(--sg-text-sm); }
.form input[type="file"]::file-selector-button, .modal input[type="file"]::file-selector-button {
  min-height: 44px; padding: 0 var(--sg-space-4); margin-right: var(--sg-space-3);
  border-radius: var(--sg-radius-sm); border: 1px solid var(--sg-color-border);
  background: var(--sg-color-surface-2); color: var(--sg-color-fg);
  font: inherit; font-weight: var(--sg-peso-medio); cursor: pointer;
}

/* Prueba con foto (pruebaFoto.js): miniaturas de las fotos antes de mandarlas */
.prueba-mini { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.prueba-mini img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--sg-color-border, #ccc); }
/* Inglés › Hoy: «Te queda hoy», lo pendiente como filas que se tocan */
.pendiente-hoy { justify-content: flex-start; text-align: left; white-space: normal; font-weight: var(--sg-peso-medio); }

/* Inglés › Nota de voz del día (vistas/notaVoz.js) */
.voz-pregunta { display: flex; align-items: flex-start; gap: var(--sg-space-3); }
.voz-q { margin: 0; font-size: var(--sg-text-xl); font-weight: var(--sg-peso-fuerte); line-height: 1.25; overflow-wrap: anywhere; }
.voz-a { margin: 0; font-size: var(--sg-text-lg); font-weight: var(--sg-peso-medio); overflow-wrap: anywhere; }
.voz-audio { width: 100%; }
.voz-grabando { display: flex; align-items: center; justify-content: center; gap: var(--sg-space-2); margin: 0; font-weight: var(--sg-peso-medio); color: var(--sg-color-danger); }
.voz-grabando [data-tiempo] { font-variant-numeric: tabular-nums; color: var(--sg-color-fg); }
.voz-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--sg-color-danger); animation: voz-latido 1s ease-in-out infinite; }
@keyframes voz-latido { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .voz-punto { animation: none; } }
.voz-seguir { flex: 1; }
.voz-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sg-space-1); }
.voz-lista li { display: flex; justify-content: space-between; gap: var(--sg-space-2); }
.voz-hecho { margin: 0; font-size: var(--sg-text-3xl); }

/* Inglés › El camino por etapas (vistas/camino.js) */
.camino-titulo { margin: 0; font-size: var(--sg-text-xl); font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.camino-barra { height: 12px; }
.camino-cuota { margin: 0; font-size: var(--sg-text-lg); }
.camino-cuota-ok { color: var(--sg-color-success); }
.camino-lista { margin: 0; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-md); background: var(--sg-color-success-soft); font-weight: 650; }
.camino-grande { min-height: 56px; font-size: var(--sg-text-lg); }
.camino-etapa > summary { list-style: none; cursor: pointer; align-items: center; min-height: 44px; }
.camino-etapa > summary::-webkit-details-marker { display: none; }
li:first-child > .camino-etapa > summary { border-top: 0; }
.camino-etapa[open] > summary { font-weight: 700; }
.camino-icono { flex: none; width: 28px; text-align: center; font-size: var(--sg-text-lg); }
.camino-cerrada { align-items: center; color: var(--sg-color-fg-muted); }
.camino-cerrada p { margin: 0; }
.camino-contenido { padding: 0 var(--sg-space-1) var(--sg-space-4); }
.camino-contenido p { margin: 0; overflow-wrap: anywhere; }
.camino-sub { margin-top: var(--sg-space-3) !important; font-weight: 700; }
.camino-bloque { display: grid; gap: 2px; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-md); background: var(--sg-color-relleno); }
.camino-bloque .fila, .camino-oido { flex-wrap: nowrap; align-items: center; }
.camino-respuesta { margin-top: var(--sg-space-1); }
.camino-items .camino-item { display: flex; align-items: center; gap: var(--sg-space-2); padding: var(--sg-space-2) 0; border-top: 0.5px solid var(--sg-color-border); }
.camino-items .camino-item:first-child { border-top: 0; }
.camino-planta { flex: none; font-size: var(--sg-text-lg); }
.camino-oido { display: flex; gap: var(--sg-space-2); }
.camino-campo { width: 100%; max-width: 480px; }
.camino-campo textarea { font-size: var(--sg-text-lg); }
.camino-resalta { font-weight: 700; color: var(--sg-color-primary); text-decoration: underline; }
/* Vista del profesor: las fotos de los deberes de Felix */
.deberes-foto { display: block; width: 100%; max-width: 360px; border-radius: 10px; border: 1px solid var(--sg-color-border, #ccc); }

/* ---------- Más › Instrucciones del viaje (vistas/instrucciones.js, 15/10/2026) ---------- */
.instr-tramo { display: flex; gap: var(--sg-space-3); align-items: center; }
.instr-num { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--sg-color-primary); color: var(--sg-color-primary-fg); font-weight: var(--sg-peso-titulo); font-size: 1.1rem; }
.instr-listo .instr-num { background: var(--sg-color-success); }
.instr-resumen { display: grid; grid-template-columns: auto 1fr; gap: var(--sg-space-2) var(--sg-space-3); margin: var(--sg-space-2) 0 0; }
.instr-resumen dt { font-weight: var(--sg-peso-fuerte); color: var(--sg-color-primary); }
.instr-resumen dd { margin: 0; }
/* Las horas y los vuelos, que se vean (Jesús: «marca más grandes las horas», «marca más el número de vuelo») */
.instr-hora { font-size: 1.15em; font-weight: 900; color: var(--sg-color-primary); white-space: nowrap; }
.instr-vuelo { font-weight: 900; background: var(--sg-color-warning-soft); padding: 0 0.3em; border-radius: 4px; white-space: nowrap; }
.instr-doc { display: grid; gap: var(--sg-space-2); padding-block: var(--sg-space-2); }
.instr-doc .item-cuerpo { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.instr-doc .fila { flex-wrap: wrap; gap: var(--sg-space-2); }
.instr-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sg-space-2); }
.instr-marca { display: flex; gap: var(--sg-space-2); align-items: flex-start; width: 100%; text-align: left; background: none;
  border: 1px solid var(--sg-color-border); border-radius: var(--sg-radius-sm); padding: var(--sg-space-2) var(--sg-space-3);
  color: inherit; font: inherit; cursor: pointer; }
.instr-marca.hecha { border-color: var(--sg-color-success); background: var(--sg-color-success-soft); }
.instr-aviso { border-left: 5px solid var(--sg-color-warning); background: var(--sg-color-warning-soft); font-weight: var(--sg-peso-medio); }
.instr-otra { border-left: 5px solid var(--sg-color-primary); }
.instr-falla { border-left: 5px solid var(--sg-color-danger); background: var(--sg-color-danger-soft); }
.instr-otra ul, .instr-falla ul, .instr-actual ul { padding-left: 1.2rem; margin: var(--sg-space-2) 0; }
.instr-actual { border: 2px solid var(--sg-color-primary); border-radius: var(--sg-radius-md); padding: var(--sg-space-3); }
.instr-actual h3 { margin: 0.2rem 0 0; font-size: 1.15rem; }
.instr-cuando { margin: 0; font-weight: var(--sg-peso-titulo); color: var(--sg-color-primary); text-transform: uppercase; letter-spacing: 0.02em; }
.instr-cuando .instr-hora { font-size: 1.35em; text-transform: none; }
.instr-fin { border-color: var(--sg-color-success); display: grid; gap: var(--sg-space-2); }
.instr-todos { margin-top: var(--sg-space-3); }
.instr-todos ol { padding-left: 1.2rem; display: grid; gap: var(--sg-space-1); }
.instr-salto { background: none; border: 0; padding: 0.2rem 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.instr-salto.actual { font-weight: var(--sg-peso-titulo); }
.instr-frases li { display: flex; gap: var(--sg-space-2); align-items: flex-start; }
.instr-nav { justify-content: space-between; margin-top: var(--sg-space-3); }
/* La tarjeta de Instrucciones que lleva a Más › PDFs */
.instr-imprimir-enlace { display: flex; gap: var(--sg-space-3); align-items: center; border: 2px solid var(--sg-color-primary); }

/* ---------- Más › PDFs (vistas/pdfs.js, 16/10/2026): lo que hay que imprimir, con copias y lo que falta ---------- */
.pdf-todo { border: 2px solid var(--sg-color-primary); }
.pdf-botones { display: grid; gap: var(--sg-space-2); margin: var(--sg-space-3) 0; }
/* La frase de la copistería, grande: la lee en voz alta o enseña la pantalla */
.pdf-decir { font-size: 1.05rem; margin: 0; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-sm);
  background: var(--sg-color-primary-soft); }
.pdf-decir q { font-weight: var(--sg-peso-titulo); font-size: 1.15rem; }
.pdf-todo .pdf-mejor { margin-top: var(--sg-space-2); }
.pdf-faltan { border: 2px solid var(--sg-color-danger); }
.pdf-falta-fila { display: grid; gap: var(--sg-space-2); padding-bottom: var(--sg-space-3); border-bottom: 1px solid var(--sg-color-border); }
.pdf-falta-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.pdf-falta-fila p { margin: 0; }
.pdf-paso { margin-bottom: 0; }
.pdf-lista { list-style: none; padding: 0; margin: var(--sg-space-2) 0 0; display: grid; gap: var(--sg-space-3); }
.pdf-item { display: grid; gap: var(--sg-space-2); padding: var(--sg-space-3); border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-md); }
.pdf-item.hecha { border-color: var(--sg-color-success); }
.pdf-item.hecha .instr-num { background: var(--sg-color-success); }
.pdf-item.pdf-falta { border: 2px solid var(--sg-color-danger); }
.pdf-cabeza { display: flex; gap: var(--sg-space-2); align-items: flex-start; }
.pdf-cabeza .item-cuerpo { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px var(--sg-space-2); align-items: center; }
/* Las copias, en letra y que se vean (2 copias en otro color: es lo que más se olvida) */
.pdf-copias { margin: 0; font-weight: 900; font-size: 1.05rem; }
.pdf-copias-varias { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--sg-color-warning-soft);
  outline: 2px solid var(--sg-color-warning); }
.pdf-porque { margin: 0; }
.pdf-fotos { border-radius: var(--sg-radius-sm); font-size: 1rem; }
.pdf-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sg-space-2); }
.pdf-docs li { display: flex; flex-wrap: wrap; gap: var(--sg-space-1) var(--sg-space-2); align-items: center; justify-content: space-between; }
.pdf-docs li > span:first-child { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.pdf-aviso-falta, .pdf-mejor { display: grid; gap: var(--sg-space-2); padding: var(--sg-space-2) var(--sg-space-3);
  border-radius: var(--sg-radius-sm); }
.pdf-aviso-falta { background: var(--sg-color-danger-soft); }
.pdf-mejor { background: var(--sg-color-warning-soft); }
/* Un <p> con <strong> dentro no puede ir en rejilla: cada trozo era una celda y la frase salía rota en 5 líneas (18/10/2026) */
p.pdf-mejor { display: block; }
.pdf-aviso-falta p, .pdf-mejor p { margin: 0; }
.pdf-subir { cursor: pointer; }
.pdf-subir.ocupado { opacity: 0.6; pointer-events: none; }

/* ---------- Más › Renovar el visado (vistas/visado.js, 17/10/2026) ---------- */
.visado-cuando { display: grid; gap: 2px; padding-block: var(--sg-space-2); }
.visado-seccion { margin: var(--sg-space-4) 0 var(--sg-space-1); font-size: 1rem; color: var(--sg-color-primary); }
.visado-campo { display: grid; gap: 2px; padding-block: var(--sg-space-2); overflow-wrap: anywhere; }
.visado-pon { font-size: 1.1rem; letter-spacing: 0.01em; }
.visado-pasos { padding-left: 1.2rem; margin: var(--sg-space-2) 0 0; display: grid; gap: var(--sg-space-2); }
/* Frases (visado, libro): una separada de otra, el español legible y el 🔊 grande (18/10/2026: iban pegadas, el
   español a 12,5 px en gris y el altavoz casi no se veía) */
.visado-frases li { display: flex; gap: var(--sg-space-2); align-items: flex-start; justify-content: space-between;
  padding-block: var(--sg-space-3); border-top: 0.5px solid var(--sg-color-border); }
.visado-frases li:first-child { border-top: 0; }
.visado-frases .item-cuerpo { display: grid; gap: 2px; min-width: 0; }
.visado-frases .item-cuerpo > .mini:last-child { font-size: var(--sg-text-sm); }
.visado-frases button { font-size: 1.25rem; flex: none; }
/* Lo que cobran (18/10/2026): cada tramo del cartel plegado, con el total a la vista y las líneas dentro */
.visado-tarifa { border-top: 1px solid var(--sg-color-border); padding-block: var(--sg-space-2); }
.visado-tarifa summary { display: grid; gap: 2px; cursor: pointer; }
.visado-total { font-size: var(--sg-text-sm); }
.visado-linea { display: flex; gap: var(--sg-space-2); justify-content: space-between; align-items: flex-start; }
.visado-linea .item-cuerpo { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.visado-importe { text-align: right; white-space: nowrap; }
/* Vía normal o vía rápida (18/10/2026): tabla de 3 columnas; si no cabe, se desliza ella sola, nunca la página */
.tabla-desliza { overflow-x: auto; }
.visado-vias { width: 100%; border-collapse: collapse; font-size: var(--sg-text-sm); }
.visado-vias th, .visado-vias td { padding: var(--sg-space-1) var(--sg-space-2); border-bottom: 1px solid var(--sg-color-border); text-align: left; vertical-align: top; }
.visado-vias td.cifra { white-space: nowrap; }
.visado-vias tr:first-child th { color: var(--sg-color-fg-muted); font-weight: var(--sg-peso-medio); }
/* Libro de viaje (vistas/libro.js): la línea del diálogo que está sonando y las acotaciones */
.libro-dialogo .libro-sonando { background: var(--sg-color-surface-2, rgba(127,127,127,.15)); border-radius: var(--sg-radius-sm, 8px); }
.libro-acotacion { padding-block: var(--sg-space-1); }

/* «Mis clases» (#/clases, vistas/clases.js, 23/10/2026): la próxima clase en grande y la agenda por días, cada
   profesor con su color (misClases.js › colorDe) para reconocerlo de un vistazo */
.clase-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
  border-radius: 50%; background: var(--sg-color-primary); color: #fff; font-weight: 800; font-size: var(--sg-text-md); }
.clase-color-0 { background: var(--sg-color-juego-escuchar); }
.clase-color-1 { background: var(--sg-color-juego-hablar); }
.clase-color-2 { background: var(--sg-color-juego-contestar); }
.clase-color-3 { background: var(--sg-color-juego-verbos); }
.clase-color-4 { background: var(--sg-color-juego-rapido); }
.clase-avatar-grande { width: 60px; height: 60px; font-size: var(--sg-text-xl, 1.5rem); }
.clases-heroe-fila { display: flex; align-items: center; gap: var(--sg-space-3); }
.clases-heroe-texto { display: grid; gap: 2px; min-width: 0; }
.clases-hora-grande { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.clases-dia { font-size: var(--sg-text-md); overflow-wrap: anywhere; }
.clases-heroe-ahora { background: var(--sg-color-success-soft); border-color: var(--sg-color-success); }
.clases-dia-panel { padding-block: var(--sg-space-2); }
.clases-dia-titulo { margin: var(--sg-space-1) 0; font-size: var(--sg-text-md); font-weight: 700; }
.clases-hoy { border: 1.5px solid var(--sg-color-primary); }
.clase-fila { gap: var(--sg-space-3); align-items: center; }
.clase-horas { display: grid; flex: none; min-width: 3.6rem; }
.clase-hora { font-size: var(--sg-text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.clase-hecha { opacity: 0.55; }
.clase-tema { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clases-dia-vacio { display: flex; justify-content: space-between; align-items: center; padding: var(--sg-space-2) var(--sg-space-4);
  color: var(--sg-color-fg-muted); font-weight: 600; }
.clases-profes { display: flex; flex-wrap: wrap; gap: var(--sg-space-2) var(--sg-space-4); }
.clases-profe { display: inline-flex; align-items: center; gap: var(--sg-space-2); font-weight: 600; }
.clases-inicio-fila { display: flex; align-items: center; gap: var(--sg-space-2); min-width: 0; }
.clases-inicio-fila .clase-avatar { width: 28px; height: 28px; font-size: var(--sg-text-sm); }

/* Más › Ruta Mindanao (26/10/2026): las semanas de cada parada con − / + y los tramos plegados */
.ruta-semanas { display: flex; align-items: center; gap: var(--sg-space-2); flex: none; }
.ruta-semanas .boton { min-width: 44px; min-height: 44px; font-size: 1.25rem; }
.ruta-semanas-n { display: grid; justify-items: center; min-width: 4.5rem; }
.ruta-semanas-n strong { font-size: 1.5rem; line-height: 1; }
.ruta-tramo summary { cursor: pointer; }

/* Más › Mapas (vistas/mapas.js + mapaMotor.js + mapaHoja.js). 30/10/2026, rehecho para el móvil (Felix, desde su
   Android: «el texto ocupa bastante mapa; el play, a la derecha con los otros botones»), al estilo de Google Maps: el mapa
   a pantalla completa entre la cabecera y la barra de abajo, la isla arriba a la izquierda, ＋ − ⤢ 📏 ⛶ arriba a la
   derecha, ▶ y 📍 abajo a la derecha para el pulgar y una hoja que se arrastra con las listas, la ficha o el recorrido.
   Botones de 48 px (lo que pide Android). El contenedor es .mapa-panel y no .mapa: esa es la clase del iframe de
   Ubicación y de la familia (el 29/10 se le colaron estos estilos). La hoja publica en el panel --sg-mapa-hoja-visible
   (los px que se ven de ella): la escala, el aviso y los botones de abajo se colocan encima */
.mapa-panel {
  position: relative; height: min(78vh, 760px); min-height: 360px; border-radius: var(--sg-radius-lg); overflow: hidden;
  background: var(--sg-mapa-mar); box-shadow: var(--sg-shadow-card); isolation: isolate;
  --sg-mapa-hoja-visible: 0px;
}
@media (max-width: 899px) {
  /* El mapa es la pantalla: sin el título grande, de borde a borde y sin «tirar para recargar» de Chrome (el alto
     exacto lo pone mapas.js con lo que se ve de verdad: visualViewport) */
  html[data-pantalla="mapas"] { overscroll-behavior-y: none; }
  html[data-pantalla="mapas"] .titulo-grande { display: none; }
  html[data-pantalla="mapas"] .vista { padding: 0; gap: 0; }
  .mapa-panel { height: calc(100dvh - 72px - var(--sg-nav-alto)); border-radius: 0; box-shadow: none; }
}
.mapa-lienzo { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mapa-lienzo:active { cursor: grabbing; }

/* Lo que flota encima: cristal con sombra corta */
.mapa-islas, .mapa-boton, .mapa-aviso {
  background: var(--sg-color-cristal); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--sg-shadow-control);
}
.mapa-islas {
  position: absolute; top: var(--sg-space-3); left: var(--sg-space-3); z-index: 2; flex-wrap: nowrap; gap: 2px;
  max-width: calc(100% - 48px - var(--sg-space-3) * 3); padding: 2px; border-radius: var(--sg-radius-md);
}
.mapa-islas button { min-height: 48px; padding: 0 var(--sg-space-3); border-radius: var(--sg-radius-control); background: transparent;
  font-weight: var(--sg-peso-medio); color: var(--sg-color-fg-muted); white-space: nowrap; }
.mapa-islas button[aria-pressed="true"] { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.mapa-botones, .mapa-flotantes { position: absolute; right: var(--sg-space-3); z-index: 2; display: grid; gap: 8px; }
.mapa-botones { top: var(--sg-space-3); }
.mapa-flotantes { bottom: calc(var(--sg-mapa-hoja-visible) + var(--sg-space-3)); transition: bottom 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
.mapa-boton {
  width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: var(--sg-radius-md); cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--sg-color-fg); -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.mapa-boton:active { transform: scale(0.92); }
.mapa-boton[aria-pressed="true"] { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.mapa-boton-signo { font-size: 1.7rem; font-weight: var(--sg-peso-medio); }
/* ▶ el recorrido animado: más grande, en azul, y late hasta que se usa una vez en ese móvil. El latido es una onda
   (::after) que crece y se desvanece solo con transform y opacity: la mueve la tarjeta gráfica sin repintar el mapa en
   cada fotograma, que con una sombra animada sí pasaba (se notaba en Android de gama baja) */
.mapa-boton-play, .mapa-boton-play[aria-pressed="true"] { position: relative; width: 56px; height: 56px; border-radius: var(--sg-radius-lg);
  font-size: 1.15rem; background: var(--sg-color-primary); color: var(--sg-color-primary-fg); justify-self: end; }
.mapa-boton-play.mapa-boton-nuevo::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sg-color-primary);
  pointer-events: none; animation: mapa-late 2.2s ease-out infinite;
}
@keyframes mapa-late {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}
.mapa-flotantes .mapa-boton:not(.mapa-boton-play) { justify-self: end; }
.mapa-boton-busca { animation: mapa-busca 1s ease-in-out infinite; }
@keyframes mapa-busca { 50% { transform: scale(0.88); opacity: 0.6; } }
.mapa-escala {
  position: absolute; left: var(--sg-space-3); bottom: calc(var(--sg-mapa-hoja-visible) + var(--sg-space-3)); z-index: 1;
  display: grid; gap: 2px; font-size: 0.78rem; color: var(--sg-mapa-texto); pointer-events: none;
  transition: bottom 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.mapa-escala span { display: block; height: 6px; border: 2px solid var(--sg-mapa-texto); border-top: 0; transition: width 0.2s ease; }
.mapa-escala b { font-weight: var(--sg-peso-fuerte); text-shadow: 0 0 3px var(--sg-mapa-halo), 0 0 3px var(--sg-mapa-halo); }
/* El aviso (medir, GPS): encima de la hoja, sin tapar los botones de la derecha */
.mapa-aviso {
  position: absolute; left: var(--sg-space-3); right: calc(56px + var(--sg-space-3) * 2); z-index: 2;
  bottom: calc(var(--sg-mapa-hoja-visible) + var(--sg-space-3) + 24px);
  margin: 0; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-control); font-size: var(--sg-text-sm); font-weight: var(--sg-peso-medio);
  color: var(--sg-color-fg); animation: mapa-baja 0.3s ease-out;
}
@keyframes mapa-baja { from { opacity: 0; transform: translateY(8px); } }

/* La hoja de abajo (mapaHoja.js): cristal esmerilado (se intuye el mapa sin ensuciar el texto), esquinas de arriba
   redondas, el asa, la cabecera fija y el cuerpo con su propio scroll */
.mapa-hoja {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column;
  border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0; color: var(--sg-color-fg);
  background: color-mix(in srgb, var(--sg-color-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--sg-shadow-hoja);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform;
}
.mapa-hoja.mapa-hoja-quieta { transition: none; }
.mapa-hoja-asa { flex: none; display: grid; place-items: center; width: 100%; height: 24px; padding: 0; border: 0;
  background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.mapa-hoja-asa span { width: 40px; height: 5px; border-radius: 3px; background: var(--sg-color-fg-muted); opacity: 0.55; }
.mapa-hoja-cabeza { flex: none; display: grid; gap: var(--sg-space-2); padding: 0 var(--sg-space-4) var(--sg-space-3); touch-action: none; }
.mapa-hoja-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--sg-space-3);
  padding: 0 var(--sg-space-4) calc(var(--sg-space-5) + env(safe-area-inset-bottom));
}
.mapa-hoja p { margin: 0; }
.mapa-hoja-inicio { display: grid; gap: 2px; }
.mapa-hoja-inicio strong { font-size: 1.02rem; min-width: 0; }
/* Asomada, el título del recorrido en una línea (a 360 px ocupaba dos y la hoja tapaba un 25 % del mapa); subida, entero */
.mapa-hoja[data-estado="asomada"] .mapa-hoja-inicio strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-hoja-inicio .mapa-pestanas { margin-top: var(--sg-space-2); }
.mapa-pestanas button { min-height: 48px; }
.mapa-grupos { margin: 0; gap: 8px; }
.mapa-grupos button { min-height: 44px; }
.mapa-item-sub { font-size: 0.85rem; color: var(--sg-color-fg-muted); }
.mapa-item { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer;
  color: inherit; font: inherit; min-height: 56px; }
.mapa-item-ico { flex: none; width: 32px; display: grid; place-items: center; font-size: 1.2rem; }
.mapa-creditos { font-size: 0.75rem; color: var(--sg-color-fg-muted); }

/* Ficha de un sitio, de una ruta o del tramo del recorrido (dentro de la hoja) */
.mapa-ficha-cab { display: flex; gap: var(--sg-space-3); align-items: center; }
.mapa-ficha-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.3rem;
  border-radius: 50%; background: var(--sg-color-relleno); }
.mapa-ficha-titulo { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.25; font-size: 1.02rem; }
.mapa-ficha-sub { font-size: 0.85rem; color: var(--sg-color-fg-muted); }
.mapa-ficha-cerrar { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sg-color-relleno); color: var(--sg-color-fg); font-size: 1rem; }
.mapa-ficha-enlaces { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.mapa-ficha-enlaces .boton { min-height: 48px; }
.mapa-texto { font-size: 0.98rem; line-height: 1.45; }
.mapa-linea { font-size: 0.92rem; }
.mapa-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: var(--sg-peso-titulo);
  font-size: 0.95rem; background: var(--sg-color-accent); color: var(--sg-color-on-accent); }
.mapa-datos { display: flex; flex-wrap: wrap; gap: var(--sg-space-1) var(--sg-space-3); font-size: 0.92rem; font-weight: var(--sg-peso-medio); }
.mapa-frase { display: flex; align-items: center; gap: var(--sg-space-2); font-size: 0.95rem; }
/* Lo que toca al llegar (dejar las maletas, las fechas de la parada): en negrita, sin parecer un enlace */
.mapa-llegada { font-weight: var(--sg-peso-fuerte); font-size: 0.95rem; color: var(--sg-color-fg); animation: mapa-sube 0.4s ease-out; }
/* Al acabar el recorrido, «🦜 Di las frases de este viaje» en la hoja asomada (frasesViaje.js) */
.mapa-practicar { margin-top: var(--sg-space-2); }
@keyframes mapa-sube { from { opacity: 0; transform: translateY(10px); } }
/* La barra de tramos y, a su derecha, ⏮ ⏸ ⏭ */
.mapa-progreso-fila { display: flex; align-items: center; gap: var(--sg-space-2); }
.mapa-progreso { flex: 1; display: flex; gap: 4px; }
.mapa-progreso span { flex: 1; height: 6px; border-radius: 3px; background: var(--sg-color-relleno); transition: background-color 0.3s ease; }
.mapa-progreso span.hecho { background: var(--sg-color-primary); }
.mapa-progreso span.ahora { background: linear-gradient(90deg, var(--sg-color-primary), var(--sg-color-relleno));
  background-size: 200% 100%; animation: mapa-avanza 1.4s linear infinite; }
@keyframes mapa-avanza { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.mapa-controles { display: flex; gap: 8px; flex: none; }
.mapa-control { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--sg-radius-control); cursor: pointer;
  font-size: 1.05rem; color: var(--sg-color-primary); background: var(--sg-color-primary-soft); -webkit-tap-highlight-color: transparent; }
.mapa-control:disabled { opacity: 0.4; cursor: default; }

/* Pantalla completa: el mapa tapa la cabecera y la barra de abajo (se sale con ✕, Escape o el «atrás» del móvil) */
.mapa-completo {
  position: fixed; inset: 0; z-index: var(--sg-z-modal); height: auto; min-height: 0; border-radius: 0; box-shadow: none;
  padding-top: env(safe-area-inset-top);
}
.mapa-completo .mapa-botones, .mapa-completo .mapa-islas { top: calc(var(--sg-space-3) + env(safe-area-inset-top)); }
/* A pantalla completa la hoja llega al borde de abajo: asomada, su cabecera deja libre la barra de gestos del móvil */
.mapa-completo .mapa-hoja[data-estado="asomada"] .mapa-hoja-cabeza { padding-bottom: calc(var(--sg-space-3) + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) {
  .mapa-boton-busca, .mapa-llegada, .mapa-aviso, .mapa-progreso span.ahora, .mapa-boton-play.mapa-boton-nuevo::after { animation: none; }
  .mapa-boton-play.mapa-boton-nuevo::after { opacity: 0; }
  .mapa-hoja, .mapa-flotantes, .mapa-escala { transition: none; }
}
/* ▶ y 📍: en columna; en fila si en columna pisarían los botones de arriba (móvil bajo, letra grande); la fila, a la
   izquierda de la columna de botones si tampoco cabe debajo; escondidos solo con la hoja hasta las islas (mapas.js ›
   alCambiar). En fila, el aviso sube por encima */
.mapa-flotantes { transition: bottom 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease; }
.mapa-flotantes.mapa-flotantes-fila { grid-auto-flow: column; align-items: end; }
.mapa-flotantes.mapa-flotantes-lado { right: calc(var(--sg-space-3) + 48px + 8px); }
.mapa-flotantes.mapa-flotantes-ocultos { opacity: 0; pointer-events: none; }
.mapa-panel:has(.mapa-flotantes-fila) .mapa-aviso { bottom: calc(var(--sg-mapa-hoja-visible) + var(--sg-space-3) + 64px); }

/* ---- Revisión 06/11: Presupuesto y Notas ---- */
/* Partidas plegadas en una lista agrupada: una fila por partida (título, estado e importe) y el detalle al abrirla */
.presu-lista { background: var(--sg-color-surface); border: 1px solid var(--sg-color-linea-tarjeta); border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-card); padding-inline: var(--sg-space-3); }
details.presu-partida { border-top: 0.5px solid var(--sg-color-border); }
details.presu-partida:first-child { border-top: 0; }
details.presu-partida > summary { list-style: none; display: flex; align-items: center; gap: var(--sg-space-3); min-height: 56px;
  padding-block: var(--sg-space-3); color: var(--sg-color-fg); }
details.presu-partida > summary::-webkit-details-marker { display: none; }
details.presu-partida > summary::after { content: '▸'; flex: none; color: var(--sg-color-fg-muted); }
details.presu-partida[open] > summary::after { content: '▾'; }
details.presu-partida > summary strong { font-size: var(--sg-text-md); }
.presu-partida-cuerpo { display: grid; gap: var(--sg-space-2); padding-bottom: var(--sg-space-4); }
.presu-partida-cuerpo > p { margin: 0; }
details.presu-pagada > summary .item-titulo { color: var(--sg-color-fg-muted); }
details.presu-pagada { box-shadow: none; }
/* Los títulos de mes de lo gastado llevan su total a la derecha */
h3.mas-grupo.fila-extremos { flex-wrap: nowrap; }
/* Notas: la fijada, con fondo suave; los botones no aprietan el texto */
.nota-fijada { background: var(--sg-color-primary-soft); border-radius: var(--sg-radius-sm); padding-inline: var(--sg-space-2); }
.nota-botones { flex: none; flex-wrap: nowrap; gap: 0; }
.nota-botones [aria-pressed="true"] { background: var(--sg-color-primary-soft); }
.nota-texto { overflow-wrap: anywhere; }
.vacio > svg { width: 32px; height: 32px; margin-bottom: var(--sg-space-2); opacity: 0.6; }
/* Comidas: cada menú plegado, el nombre y debajo su etiqueta («La de referencia»). El summary es flex y se comía el
   « · » de en medio («Nada sólido, solo agua·Ayuno matutino», 06/11/2026) */
.comida-opcion { display: grid; gap: 2px; flex: 1; min-width: 0; }
.comida-opcion strong { color: var(--sg-color-fg); }
/* Presupuesto: el grupo plegado de lo gratis o ya pasado, con su título como los demás y el triángulo a la derecha */
details.presu-plegado > summary.mas-grupo { list-style: none; display: flex; align-items: center; min-height: 44px; margin-block: var(--sg-space-2) 0; padding-block: 0; }
details.presu-plegado > summary.mas-grupo::-webkit-details-marker { display: none; }
details.presu-plegado > summary.mas-grupo::after { content: '▸'; margin-left: auto; padding-left: var(--sg-space-2); }
details.presu-plegado[open] > summary.mas-grupo::after { content: '▾'; }
.presu-nota { margin: 0 var(--sg-space-3) var(--sg-space-2); }

/* ---- Revisión 06/11: armazón, Inicio, Más y Calculadora ---- */
/* Inicio: las tareas «Alta» de Felix (.item-llamativo) salían 4 px más a la izquierda que las demás: dentro de un
   bloque, .bloque .lista .item les quitaba el relleno y se quedaba su margen negativo. Relleno y margen iguales: el
   texto en su sitio y aire para el borde rojo del meneo */
.bloque .lista .item-llamativo { padding-inline: var(--sg-space-2); margin-inline: calc(-1 * var(--sg-space-2)); }
/* «A mano» (inicio.js): con los iconos de «Más», alineados a la izquierda para leerlos de un vistazo */
.a-mano .boton { justify-content: flex-start; text-align: left; gap: var(--sg-space-2); padding-inline: var(--sg-space-3); line-height: 1.2; }
.a-mano .boton svg { width: 20px; height: 20px; flex: none; }
/* Calculadora (vistas/cambio.js): las cantidades rápidas, de 44 px como lo principal (se usa con una mano, en la calle) */
.cambio-calc .segmentos button { min-height: 44px; font-weight: var(--sg-peso-medio); font-variant-numeric: tabular-nums; }
.cambio-calc .cambio-casillas input { font-variant-numeric: tabular-nums; }
/* ---- Revisión 06/11: los sitios de allí (ubicación, mapas, aeropuertos, destinos, tiempo, tarjetas y contactos) ---- */
/* Contactos por grupos: cada grupo en su bloque, como las listas sueltas; el de España, plegable */
details.contactos-plegado > .lista { background: var(--sg-color-surface); border-radius: var(--sg-radius-md); padding-inline: var(--sg-space-3); box-shadow: var(--sg-shadow-card); }
details.contactos-plegado > summary.mas-grupo { list-style: none; display: flex; align-items: center; min-height: 44px; margin-block: var(--sg-space-2) 0; padding-block: 0; }
details.contactos-plegado > summary.mas-grupo::-webkit-details-marker { display: none; }
details.contactos-plegado > summary.mas-grupo::after { content: '▸'; margin-left: auto; padding-left: var(--sg-space-2); }
details.contactos-plegado[open] > summary.mas-grupo::after { content: '▾'; }
details.contactos-plegado[open] > summary.mas-grupo { margin-bottom: var(--sg-space-2); }
.contacto-acciones { margin-block: var(--sg-space-1); }
/* Urgencias: el número, grande y en azul macizo (se marca con prisa) */
.contacto-urgente .tel-boton.boton-primario { font-size: var(--sg-text-md); min-height: 48px; }
.contacto-mas > summary { font-size: var(--sg-text-sm); }
.contactos-pie { margin: 0 var(--sg-space-3); }
/* Tarjetas para enseñar: listas agrupadas (botón a lo ancho) y la tarjeta grande, para leer de lejos */
.tarjeta-item { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer;
  color: inherit; font: inherit; min-height: 56px; }
.mostrar .texto-en .linea { display: block; }
.mostrar .texto-en .linea + .linea { margin-top: 0.35em; }
.mostrar .texto-en.texto-en-corto { font-size: clamp(2.1rem, 10vw, 4rem); }
.mostrar .texto-en.texto-en-largo { font-size: clamp(1.35rem, 5.6vw, 2.5rem); line-height: 1.25; }
.tarjeta-hueco { border-bottom: 3px dashed #c2410c; color: #9a3412; }
.tarjeta-aviso { margin: 0; font-size: var(--sg-text-sm); color: #9a3412; }
.mostrar .tarjeta-es { justify-self: start; }
.mostrar .boton-icono { min-width: 56px; }
.tarjeta-resumen { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Revisión 06/11: preparar el viaje y el viaje paso a paso ---- */
/* Preparativos: «9/10 ›» en una sola línea y alineado con el título (la flecha salía debajo del número a 390 px) */
.prep-cuenta { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; flex: none; }
.prep-cuenta > svg { width: 18px; height: 18px; flex: none; }
.panel-cabecera:has(> .prep-cuenta) { flex-wrap: nowrap; }
.panel-cabecera:has(> .prep-cuenta) > h2 { min-width: 0; }
/* Los apartados ya terminados, juntos en una tarjeta baja al final */
.prep-terminados h2 { margin: 0 0 var(--sg-space-2); color: var(--sg-color-fg-muted); font-weight: var(--sg-peso-medio); }
.prep-terminados .fila { gap: var(--sg-space-2); }
/* Instrucciones: «‹ Todas las partes del viaje» con zona táctil de 44 px */
.instr-volver { display: inline-flex; align-items: center; min-height: 44px; }
/* ---- Revisión 06/11: comunicación (chat, asistente, peticiones, familia, escaparate y su pantalla) ---- */
/* Chat: las pestañas en una sola fila que se desliza (Jesús tiene 6 conversaciones y saltaban a dos filas) */
.chat-canales { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; scrollbar-width: none; overscroll-behavior-x: contain; }
.chat-canales::-webkit-scrollbar { display: none; }
.chat-canales button { flex: none; white-space: nowrap; }
/* Iconos de la caja de escribir (SVG, como los de la barra): un poco más grandes que los de los botones normales */
.chat-fila .boton-icono svg { width: 22px; height: 22px; }
/* Sin conexión: la línea encima de la caja de escribir */
.chat-sin-red {
  margin: 0 0 var(--sg-space-2); padding: var(--sg-space-1) var(--sg-space-3); border-radius: var(--sg-radius-sm);
  background: var(--sg-color-relleno); color: var(--sg-color-fg); text-align: center;
}
/* Asistente: las preguntas de ejemplo, también debajo de la conversación */
.ia-sugerencias { display: grid; gap: var(--sg-space-2); justify-content: normal; }
.ia-sugerencias .fila { justify-content: center; }
/* La captura adjunta (¿Es de fiar? y Peticiones), en pequeño junto a su botón */
.ia-captura, .peticion-captura { align-items: center; }
.ia-captura-mini { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--sg-color-border); }
/* Familia: el mensaje que tienen puesto, marcado */
.panel .boton[data-rapido][aria-pressed="true"] { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
/* Su pantalla: cada captura, una fila de lista que se toca entera */
.pantalla-captura { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; align-items: center; min-height: 52px; }
.pantalla-captura[disabled] { cursor: default; opacity: 0.6; }
.pantalla-ver { color: var(--sg-color-fg-muted); font-size: var(--sg-text-lg); flex: none; }
/* Cabecera a 390 px: hora + tiempo (158 px), 🏆 % (91 px) y los tres botones no cabían (405 px) y el botón del chat se
   salía por la derecha. Cede el bloque de la hora y el tiempo (encoge desde su ancho; la cuenta atrás de Inicio, que va
   en su hueco, no cambia): el sitio del tiempo se corta con «…» y, con la insignia ⏳ o 📴 a la vista, sobra el «Manila»
   pequeño de la hora */
@media (max-width: 420px) {
  .cabecera-record { padding-inline: 6px; }
  .cabecera-info { flex: 0 1 auto; min-width: 0; }
  .cabecera-info .info-tiempo { overflow: hidden; text-overflow: ellipsis; }
  .cabecera:has(.insignia-offline:not(.oculto)) .info-sitio { display: none; }
}

/* ---- Revisión 06/11: Ajustes, avisos del móvil y copias ---- */
/* Cada grupo, una tarjeta con filas como los Ajustes del iPhone (vistas/ajustes.js › grupo y fila): icono en su
   cuadradito de color, título, el valor de ahora a la derecha y el triángulo; la fila se abre en su sitio */
.aj-grupo { background: var(--sg-color-surface); border: 1px solid var(--sg-color-linea-tarjeta); border-radius: var(--sg-radius-md);
  box-shadow: var(--sg-shadow-card); padding-inline: var(--sg-space-4); min-width: 0; }
.aj-grupo > .aj-plegable + .aj-plegable { border-top: 0.5px solid var(--sg-color-border); }
.aj-plegable > summary { list-style: none; display: flex; align-items: center; gap: var(--sg-space-3); min-height: 56px;
  padding-block: var(--sg-space-2); color: var(--sg-color-fg); }
.aj-plegable > summary::-webkit-details-marker { display: none; }
.aj-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sg-space-3); font-weight: var(--sg-peso-medio); }
.aj-titulo > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.aj-icono { flex: none; width: 30px; height: 30px; border-radius: var(--sg-radius-xs); display: grid; place-items: center;
  background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.aj-icono svg { width: 18px; height: 18px; }
.aj-resumen { flex: 0 1 auto; max-width: 42%; font-size: var(--sg-text-sm); color: var(--sg-color-fg-muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-resumen:empty { display: none; }
.aj-cuerpo { display: grid; gap: var(--sg-space-3); padding-bottom: var(--sg-space-4); min-width: 0; }
.aj-cuerpo > p, .aj-cuerpo .form > p { margin: 0; }
/* Partes dentro de una fila abierta (zumbido, voz, no molestar…): separadas con una línea fina */
.aj-separado { border-top: 0.5px solid var(--sg-color-border); padding-top: var(--sg-space-3); }
/* Dos campos cortos en una línea (desde/hasta, comida/acostarse); en pantallas muy estrechas, uno debajo de otro */
.aj-dos { flex-wrap: wrap; align-items: flex-start; }
.aj-dos > .campo { flex: 1 1 130px; }
/* Los datos de «Sin conexión», con el valor a la derecha */
.aj-datos .item { align-items: center; padding-block: var(--sg-space-2); }
.aj-valor { flex: none; color: var(--sg-color-fg-muted); font-size: var(--sg-text-sm); text-align: right; }
/* Profesores: cada uno es una fila que se toca entera (abre sus botones) */
button.item.aj-fila { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; align-items: center; min-height: 56px; }
.aj-fila > svg { width: 20px; height: 20px; flex: none; color: var(--sg-color-fg-muted); }
.aj-sub > summary { min-height: 44px; display: flex; align-items: center; padding-block: 0; font-size: var(--sg-text-sm); font-weight: var(--sg-peso-medio); }
/* permisos.js pinta su propio título: aquí ya lo pone la fila */
.aj-permisos > h2 { display: none; }
/* Los botones pequeños de Ajustes (Quitar un aviso importante…), con zona táctil de 44 px */
html[data-pantalla="ajustes"] .vista .boton-pequeno { min-height: 44px; }
/* «Cambiar el enlace» del escaparate: un enlace en rojo, no un botón más entre los de guardar */
.aj-peligro-texto { color: var(--sg-color-danger); justify-self: start; padding-inline: 0; }
.aj-salir { margin-top: var(--sg-space-2); }
/* «Qué se enseña» del escaparate: sin el marco gris del navegador, el título como el de los campos */
.aj-cuerpo fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.aj-cuerpo legend { padding: 0; margin-bottom: var(--sg-space-2); font-size: var(--sg-text-sm); font-weight: var(--sg-peso-medio); color: var(--sg-color-fg); }
/* Las casillas (Activado, Que lo mande la mascota…): toda la línea se toca, de 44 px */
.aj-cuerpo .check { min-height: 44px; }

/* ---- Revisión 06/11: coherencia visual (ronda 2) ---- */
/* Una fila de lista no se ensancha con un nombre de archivo sin espacios («IMG_20250513_054542_edit_3896….jpg»): la
   columna de .item-cuerpo tomaba el ancho del nombre entero y, a 360 px, Documentos se desplazaba de lado. La columna
   puede estrecharse y el texto se parte donde haga falta */
.item-cuerpo { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
/* Instrucciones › «PDFs para imprimir»: es .item y .panel a la vez, y .item (que va después) le quitaba el fondo, el
   redondeo y el relleno de la tarjeta (salía un recuadro azul suelto, con el icono pegado al borde) */
a.instr-imprimir-enlace { background: var(--sg-color-surface); border: 1.5px solid var(--sg-color-primary);
  border-radius: var(--sg-radius-lg); padding: var(--sg-space-3) var(--sg-space-4); box-shadow: var(--sg-shadow-card); }
a.instr-imprimir-enlace > svg { width: 20px; height: 20px; flex: none; color: var(--sg-color-fg-muted); }
.instr-num svg { width: 1.15rem; height: 1.15rem; }
/* Instrucciones › «Ver todos los pasos»: cada paso se toca para ir a él (medían 35 px) */
.instr-salto { min-height: 44px; padding-block: var(--sg-space-2); }
/* Preparativos: la cabecera de cada apartado lleva a él; medía 26 px de alto. Más zona táctil sin moverla */
a.panel-cabecera.enlace-bloque { padding-block: 9px; margin-block: -9px; }
/* «Ver fotos reales» (Booking, Airbnb, Google Maps…): la frase y, debajo, sus botones pequeños (fotos.js; eran enlaces
   de 22 px pegados unos a otros) */
.fotos-reales { display: grid; gap: var(--sg-space-2); align-items: stretch; }
.fotos-reales > p { margin: 0; }
/* Comidas: cada menú plegado (Huevos revueltos…) con su triángulo, como los demás plegables; sin él no parecía que se
   abriera. Y sin la negrita doble: el título salía en 900 y su etiqueta («La de referencia») también en negrita */
.comida-plato > summary { list-style: none; gap: var(--sg-space-2); }
.comida-plato > summary::-webkit-details-marker { display: none; }
.comida-plato > summary::after { content: '▸'; flex: none; color: var(--sg-color-fg-muted); }
.comida-plato[open] > summary::after { content: '▾'; }
.comida-plato .comida-opcion strong { font-weight: var(--sg-peso-fuerte); }
.comida-plato .comida-opcion .mini { font-weight: 500; }
/* Presupuesto › «Lo próximo que toca pagar»: filas de lista como las demás (con su línea y su aire; iban pegadas),
   con el importe centrado como en las partidas */
.presu-proxima { align-items: center; }
/* El título con su botón a la derecha (+ Tarea, + Contacto…): si la palabra más larga del título no cabe al lado del
   botón, el botón baja a la línea de debajo en vez de partir la palabra sin guion («Documentaci / ón» a 360 px con la
   letra grande). Los títulos de varias palabras siguen partiéndose por los espacios, con el botón al lado */
.titulo-fila:has(#titulo-accion:not(:empty)) { flex-wrap: wrap; }
.titulo-fila:has(#titulo-accion:not(:empty)) h1 { flex: 1 1 0; min-width: min-content; overflow-wrap: break-word;
  -webkit-hyphens: manual; hyphens: manual; }

/* ---- Revisión 06/11: manejo y accesibilidad ---- */
/* Un nombre de archivo larguísimo (IMG_20260911_180156_edit_….jpg) no ensancha la lista: con la letra del móvil más
   grande, Documentos se salía de lado y había que mover la pantalla */
.item-cuerpo { overflow-wrap: anywhere; }
/* Con la letra del sistema al 125 %, la hora de la cabecera quedaba tapada por el 🏆 y la cuenta atrás de Inicio,
   cortada («vuelo el jue 19 …»). Como con «Letra grande» de Ajustes, la cabecera no crece: la letra grande es para el
   contenido (los mismos px que con la letra normal) */
@media (max-width: 420px) {
  html .cabecera .info-hora, html .cabecera .cabecera-cuenta strong { font-size: min(var(--sg-text-lg), 18.4px); }
  html .cabecera .info-tiempo, html .cabecera .info-sitio, html .cabecera .cabecera-cuenta strong + span,
  html .cabecera .insignia-offline { font-size: min(var(--sg-text-xs), 12.5px); }
  html .cabecera .cabecera-record { font-size: min(var(--sg-text-sm), 14px); }
}
/* Los botones de subir que son una etiqueta con el selector de archivo dentro (PDFs, Visado, ticket, chat): con el
   teclado, el foco se ve en el botón */
label.boton:has(> input.sr:focus-visible) { outline: 3px solid var(--sg-color-accent); outline-offset: 2px; }
/* Visor de fotos: un nombre de archivo largo ensanchaba la columna y la foto salía cortada por la derecha */
.mostrar.visor { grid-template-columns: minmax(0, 1fr); }

/* ---- Revisión 06/11: últimos retoques (hilo principal) ---- */
/* Visor de fotos: siempre sobre negro. Con --sg-color-fg salía claro en el tema oscuro y la foto sin contraste */
:root { --sg-color-visor-fondo: #0b0d12; --sg-color-visor-texto: #fff; } /* el visor va sobre negro en los dos temas */
.mostrar.visor { background: var(--sg-color-visor-fondo); color: var(--sg-color-visor-texto); }
.mostrar.visor .visor-nombre { color: var(--sg-color-visor-texto); }

/* ==========================================================================
   Pulido visual 06/11/2026 · sistema (Jesús: «lo que veas que visualmente se puede mejorar, o hacer más profesional»).
   Lo común a todas las pantallas; lo de cada pantalla va en su bloque, más abajo.
   ========================================================================== */
/* El foco se ve en los dos temas (en claro, el amarillo no llegaba a 3:1) */
:focus-visible, .resaltado, label.boton:has(> input.sr:focus-visible) { outline-color: var(--sg-color-foco); }
/* Selector segmentado: la opción elegida, más clara que la pista (en oscuro estaba al revés) */
.segmentos-grandes button[aria-pressed="true"] { background: var(--sg-color-segmento-activo); }
.segmento-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Desplegables: una sola señal en toda la app, un chevron gris a la derecha que gira al abrir (había ▸/▾ de texto en
   azul, el triángulo del navegador y el chevron SVG). Fuera el de Inglés (camino-etapa) y las tarifas del visado */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details:not(.camino-etapa):not(.visado-tarifa) > summary::after {
  content: ''; flex: none; display: inline-block; vertical-align: middle; width: 8px; height: 8px;
  margin-inline: var(--sg-space-2) 4px; border: solid var(--sg-color-fg-muted); border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--sg-dur-base) var(--sg-ease);
}
details[open]:not(.camino-etapa):not(.visado-tarifa) > summary::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { details > summary::after { transition: none; } }

/* Las ventanas, en el móvil, como hoja de abajo del iPhone: pegadas al borde y con el asa (no una tarjeta flotando) */
@media (max-width: 639px) {
  .modal-fondo:not(.modal-arriba) { padding: var(--sg-space-3) 0 0; }
  .modal-fondo:not(.modal-arriba) > .modal { width: 100%; border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0; }
  .modal-fondo:not(.modal-arriba) > .modal::before { content: ''; justify-self: center; width: 36px; height: 5px;
    border-radius: var(--sg-radius-pill); background: var(--sg-color-fg-muted); opacity: 0.35;
    margin-top: calc(-1 * var(--sg-space-2)); }
}
.modal h2 { text-wrap: pretty; }

/* Casillas redondas, como en iOS (el cuadrado gris del navegador era lo que más «web» parecía). Solo las de las listas
   de tareas y pasos: las de los formularios («Sensible (bóveda)»…) siguen como están */
.paso-casilla input, .item > input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 50%;
  border: 2px solid var(--sg-color-fg-muted); background: transparent; display: inline-grid; place-content: center;
  cursor: pointer; transition: background var(--sg-dur-fast) var(--sg-ease), border-color var(--sg-dur-fast) var(--sg-ease);
}
.item > input[type="checkbox"] { margin-top: 2px; }
.paso-casilla input::after, .item > input[type="checkbox"]::after {
  content: ''; width: 10px; height: 6px; border: solid var(--sg-color-primary-fg); border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.paso-casilla input:checked, .item > input[type="checkbox"]:checked { background: var(--sg-color-success); border-color: var(--sg-color-success); }
.paso-casilla input:checked::after, .item > input[type="checkbox"]:checked::after { opacity: 1; }

/* El botón ⟳ con línea es el estado normal: verde, pero sin fondo macizo (era lo más chillón de la cabecera, en todas
   las pantallas). Sin línea sigue rojo macizo: eso sí es un aviso */
.cabecera-boton.linea-si { background: transparent; color: var(--sg-color-success); }
.cabecera-boton.linea-si:hover { background: var(--sg-color-success-soft); }

/* Avisos: tres tipos con significado (informativo = panel-destacado, aviso, éxito) en vez de seis cajas distintas */
.panel-alerta { box-shadow: var(--sg-shadow-card), inset 4px 0 0 var(--sg-color-warning); }
.panel-exito { background: var(--sg-color-success-soft); border-color: transparent; }

/* Estado vacío (estadoVacio() de ui.js): icono en un círculo, título y texto */
.vacio { display: grid; justify-items: center; gap: var(--sg-space-2); }
.vacio-icono { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: var(--sg-color-primary-soft); color: var(--sg-color-primary); }
.vacio-icono svg { width: 28px; height: 28px; }

/* Mientras carga una vista, un esqueleto con su forma (app.js): la página ya no salta */
.esqueleto { display: grid; gap: var(--sg-space-4); padding-top: var(--sg-space-2); }
.esq { display: block; border-radius: var(--sg-radius-lg); background: var(--sg-color-relleno); }
.esq-titulo { height: 22px; width: 45%; border-radius: var(--sg-radius-pill); }
.esq-panel { height: 128px; }
.esq-corto { height: 84px; }
@media (prefers-reduced-motion: no-preference) { .esq { animation: esq-latir 1.4s ease-in-out infinite; } }
@keyframes esq-latir { 50% { opacity: 0.55; } }

/* El botón junto al título grande («+ Gasto», «+ Contacto», «Apuntar vuelos»): tintado, no macizo; competía con el
   título y con la acción real de cada pantalla */
#titulo-accion .boton, #titulo-accion .boton-primario { background: var(--sg-color-primary-soft); color: var(--sg-color-primary);
  border-color: transparent; border-radius: var(--sg-radius-pill); min-height: 40px; padding-inline: var(--sg-space-4); box-shadow: none; }
/* El subtítulo del título grande, legible (14 px se quedaba corto para un texto que explica la pantalla) */
.titulo-grande p { font-size: var(--sg-text-md); line-height: 1.4; margin-top: var(--sg-space-1); }
/* «Ver todo», «Ver la previsión»: enlaces de cabecera sin subrayado, solo el color */
.bloque-cabecera a.pequeno, .panel-cabecera a.pequeno { text-decoration: none; }
/* El avatar del profesor: el blanco fijo sobre el azul del tema oscuro daba 2,2:1 */
.clase-avatar { color: var(--sg-color-primary-fg); }

/* ---- Pulido visual 06/11 · Viaje y preparativos ---- */
/* Inicio › «Lo que falta preparar»: la línea entre filas va en el <li> y no en el enlace. En las tareas «Alta»
   (.item-llamativo) el enlace lleva radio de 10 px y margen negativo, y la línea se curvaba en las puntas y salía más
   ancha que las demás: parecía el borde de otra tarjeta */
.bloque .lista > li + li { border-top: 0.5px solid var(--sg-color-border); }
.bloque .lista > li > .item { border-top: 0; }

/* Inicio › Presupuesto (cifras-inicio, solo aquí): tantas columnas como cifras, a la izquierda y en el color del texto
   (en azul parecían enlaces); con dos cifras, la rejilla de tres dejaba un hueco y partía «previsto antes de salir» */
.cifras-inicio { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); text-align: left; gap: var(--sg-space-4); }
.cifras-inicio strong { color: var(--sg-color-fg); font-weight: var(--sg-peso-titulo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cifras-inicio .mini { display: block; margin-top: 2px; }
/* Inicio › Preparativos (media columna): con la letra grande del móvil, «57 %» se salía del bloque por la derecha.
   La cifra se ajusta al ancho del bloque (cqi) y el anillo baja a 48 px */
.bento a.bloque-cifras { container-type: inline-size; }
.bento a.bloque-cifras .anillo svg { width: 48px; height: 48px; }
.bento a.bloque-cifras .bloque-cifra { font-size: min(1.9rem, 18cqi); }
/* Inicio › Chat sin mensajes: texto en vez del «0» grande, centrado en el alto del bloque */
.chat-vacio { margin-block: auto; }

/* Preparativos: el filtro (Pendientes / Todas / Hechas) con el selector segmentado de las fases, a todo el ancho y más
   bajo, para que se lea como secundario; el lugar, un solo botón */
.prep-filtro { flex: 1 1 100%; }
.prep-filtro button { min-height: 36px; font-size: var(--sg-text-sm); }
.prep-lugar { margin: 0; }
.prep-lugar-cambiar { font-weight: 700; }
/* Tarea abierta: el selector de estado a todo el ancho, el botón de archivo y el nombre elegido */
.modal .segmentos-grandes button { min-width: 0; padding-inline: var(--sg-space-1); font-size: var(--sg-text-sm); }
.prep-elegir { position: relative; }
.prep-archivo-nombre { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Viaje › cabecera de cada sitio: la portada a sangre arriba de la tarjeta (antes, con 16 px de margen por los lados,
   parecía una foto pegada dentro); el pie y el crédito siguen con su margen */
.sitio-cabecera > .foto:first-child { margin: calc(-1 * var(--sg-space-4)) calc(-1 * var(--sg-space-4)) 0; }
.sitio-cabecera > .foto:first-child .foto-boton,
.sitio-cabecera > .foto:first-child img { border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0; }
.sitio-cabecera > .foto:first-child img { aspect-ratio: 16 / 9; }
.sitio-cabecera > .foto:first-child figcaption { padding: var(--sg-space-1) var(--sg-space-4) 0; }
/* «Moverse» dentro de los apartados de Manila y Guagua: el primero de la fila, en azul macizo para que se distinga */
.sitio-saltos .sitio-moverse { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
/* «Lo siguiente» de otro sitio: una fila con flecha, no la tarjeta grande */
.ahora-compacto { align-items: center; gap: var(--sg-space-3); padding-block: var(--sg-space-3); }
/* Las fuentes entre corchetes del detalle de un paso, en pequeño y gris */
.paso-detalle .cita { font-size: var(--sg-text-xs); color: var(--sg-color-fg-muted); }

/* Moverse › cada tramo: la foto al ancho de su columna (a 220 px dejaba ~50 px vacíos), los datos en ficha de dos
   columnas, los avisos como raya lateral (dos cajas marrones seguidas pesaban mucho) y los botones en una rejilla de
   tres con «Hecho ahora» a todo el ancho debajo: antes caía en un sitio distinto en cada tramo */
.tpaso .foto-pequena { max-width: none; }
.tpaso-datos { display: grid; grid-template-columns: auto 1fr; gap: var(--sg-space-1) var(--sg-space-3); margin: var(--sg-space-1) 0; }
.tpaso-datos dt { font-weight: var(--sg-peso-medio); color: var(--sg-color-fg-muted); }
.tpaso-datos dd { margin: 0; overflow-wrap: anywhere; }
.tpaso-aviso { background: none; border-left: 3px solid var(--sg-color-warning); border-radius: 0; padding: 2px 0 2px var(--sg-space-3); }
.tpaso-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-2); }
/* Icono encima del texto: a 390 px y con la letra grande, tres botones en fila partían «Qué / decir» */
.tpaso-acciones .boton { min-width: 0; padding: var(--sg-space-1); flex-direction: column; gap: 2px; min-height: 52px; line-height: 1.2; text-align: center; }
.tpaso-acciones [data-hecho], .tpaso-acciones [data-deshacer] { grid-column: 1 / -1; order: 9; flex-direction: row; gap: var(--sg-space-2); min-height: 44px; font-size: var(--sg-text-sm); }
.tresumen { margin: 0; }

/* Instrucciones: la explicación como texto suelto, la fila de PDFs sin el borde azul de 2 px y con su icono en un
   cuadro tintado, y el número de cada parte del color de su estado (gris pendiente, azul la de ahora, verde hecha) */
.instr-intro { padding-inline: var(--sg-space-1); }
a.instr-imprimir-enlace { border: 1px solid var(--sg-color-linea-tarjeta); align-items: center; }
.instr-icono { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--sg-radius-sm);
  background: var(--sg-color-primary-soft); color: var(--sg-color-primary); }
.instr-icono svg { width: 20px; height: 20px; }
.instr-lista .instr-num { width: 32px; height: 32px; font-size: var(--sg-text-sm); background: var(--sg-color-relleno); color: var(--sg-color-fg); }
.instr-lista .instr-tramo-actual .instr-num { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.instr-lista .instr-listo .instr-num { background: var(--sg-color-success); color: var(--sg-color-primary-fg); }
/* En la lista, las horas del subtítulo sin el tamaño de las instrucciones (a 1,15 em y peso 900 descuadraban las filas) */
.instr-lista .instr-hora { font-size: 1em; font-weight: 700; }

/* ---- Pulido visual 06/11 · Más y sus pantallas ---- */
/* Más: cada icono en una tesela del color de su bloque, como los Ajustes del iPhone (el trazo azul suelto hacía que
   las 27 filas parecieran una sola lista), filas de 52 px en vez de 68 y la línea que separa, desde el texto */
.mas-lista a.item { padding-block: 11px; min-height: 52px; position: relative; }
.mas-icono { --sg-mas-c: var(--sg-color-primary); flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; background: var(--sg-mas-c); color: #fff; }
.mas-icono svg { width: 18px; height: 18px; }
.mas-icono[data-g="viaje"] { --sg-mas-c: #1f6fd1; }
.mas-icono[data-g="papeles"] { --sg-mas-c: #1d7a50; }
.mas-icono[data-g="salud"] { --sg-mas-c: #c8436a; }
.mas-icono[data-g="app"] { --sg-mas-c: #687183; }
.mas-icono[data-g="ingles"] { --sg-mas-c: #6b4ce6; }
.mas-lista .item { border-top: 0; }
.mas-lista li + li > .item::before { content: ''; position: absolute; top: 0; left: calc(30px + var(--sg-space-3) + var(--sg-space-1)); right: 0;
  border-top: 0.5px solid var(--sg-color-border); }
/* «Cerrar sesión»: una fila de texto rojo centrada, no un bloque rojo macizo */
.mas-salir { width: 100%; justify-content: center; min-height: 52px; cursor: pointer; font: inherit; color: var(--sg-color-danger); }
.mas-salir .item-cuerpo { flex: none; }
.mas-salir .item-titulo { color: var(--sg-color-danger); }

/* Tiras que se deslizan a lo ancho (sitios del tiempo, cantidades de la calculadora, apartados del visado): en una
   sola fila en vez de partir en dos o tres; llegan hasta el borde de la tarjeta para que se vea que hay más */
.tira-chips { display: flex; flex-wrap: nowrap; gap: var(--sg-space-2); overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--sg-space-4)); padding-inline: var(--sg-space-4); scroll-padding-inline: var(--sg-space-4); }
.tira-chips::-webkit-scrollbar { display: none; }
.tira-chips > * { flex: none; white-space: nowrap; }

/* Marcas de las listas de reglas (Comidas, Suplementos): de 20-28 px y alineadas con la primera línea; antes eran un
   emoji dentro de un botón de 44 px y el texto empezaba a 56 px del borde de la tarjeta */
.marca-emoji { flex: none; width: 28px; text-align: center; font-size: 1.2rem; line-height: 1.35; }
.marca-regla { flex: none; width: 20px; height: 20px; margin-top: 2px; display: grid; place-items: center; }
.marca-regla svg { width: 20px; height: 20px; }
.marca-si { color: var(--sg-color-success); }
.marca-no { color: var(--sg-color-danger); font-weight: 800; }
.marca-no::before { content: "\2715"; }

/* Contactos: llamar, en verde como en el iPhone (el teléfono es la acción; el azul es para lo demás). Tintado en
   todos; macizo solo el 911, que es lo único que tiene que saltar a la vista entre las urgencias */
.tel-boton { background: var(--sg-color-success-soft); color: var(--sg-color-success); }
.tel-boton:hover { background: color-mix(in srgb, var(--sg-color-success-soft), var(--sg-color-success) 12%); }
.tel-boton svg { width: 18px; height: 18px; }
.contacto-urgente .tel-boton { font-size: var(--sg-text-md); min-height: 48px; }
.tel-boton.tel-macizo { background: var(--sg-color-success); color: #fff; }
:root[data-tema="oscuro"] .tel-boton.tel-macizo { color: #07121f; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tel-boton.tel-macizo { color: #07121f; } }

/* Vacunas: «todo hecho» en verde con su marca; «Dónde llamar o ir», un desplegable de una línea (era una tarjeta
   entera de ~80 px para una sola fila) */
.vacunas-hecho { display: flex; align-items: center; gap: var(--sg-space-2); margin: 0; font-weight: var(--sg-peso-medio); color: var(--sg-color-fg); }
.vacunas-hecho svg { width: 22px; height: 22px; flex: none; color: var(--sg-color-success); }
.vacunas-donde { padding-block: var(--sg-space-1); }
.vacunas-donde > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sg-space-2); min-height: 44px; }
.vacunas-donde[open] { padding-bottom: var(--sg-space-4); }

/* Documentos: cada archivo, una fila como en Archivos del iPhone (tesela, nombre en tres líneas como mucho, una
   línea de datos) con ⋯ a la derecha; tocar la fila lo abre */
.doc-fila { align-items: center; gap: var(--sg-space-1); }
.doc-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sg-space-3); padding-block: 2px; }
.doc-abrir .item-titulo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.doc-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-tesela { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: var(--sg-color-primary-soft); color: var(--sg-color-primary); }
.doc-tesela svg { width: 20px; height: 20px; }
.doc-tesela-boveda { background: var(--sg-color-accent-soft); color: var(--sg-color-warning); }
.doc-fila > .boton-icono { flex: none; color: var(--sg-color-fg-muted); }
.doc-opciones { font-size: 1.4rem; line-height: 1; }

/* PDFs: sin los contornos de color (azul en el paso 1, rojo en «Te falta subir»: el rojo es de error y esto es un
   aviso, que ya lleva su raya naranja); el número de cada paso, en su círculo; Descargar y Verlo, lado a lado */
.pdf-todo, .pdf-faltan { border: 1px solid var(--sg-color-linea-tarjeta); }
.pdf-titulo { display: flex; align-items: center; gap: var(--sg-space-2); }
.pdf-titulo .instr-num { width: 1.9rem; height: 1.9rem; font-size: 0.95rem; }
.pdf-botones-dos { grid-template-columns: 1fr 1fr; }
.pdf-botones-dos > [data-enviar] { grid-column: 1 / -1; }
.pdf-subir svg { order: -1; }

/* Suplementos: las dos horas de la cena, en el selector segmentado común; sobre la tarjeta azul, su pista en el color
   de la superficie para que se vea */
.bloque-destacado .segmentos-grandes { background: var(--sg-color-surface); }

/* Presupuesto: la parte elegida, tintada con su anillo (en azul macizo era lo que más llamaba de la pantalla) y las
   tres cifras con significado: gastado en el color del texto, previsto en gris y lo que queda en verde (rojo si se
   ha pasado). Solo .presu-cifras: .cifras la usan también Inicio e Inglés */
.presu-fases a[aria-current="page"] { background: var(--sg-color-primary-soft); color: var(--sg-color-primary);
  box-shadow: inset 0 0 0 2px var(--sg-color-primary); }
.presu-fases a[aria-current="page"] .sitio-cuenta { color: var(--sg-color-primary); }
.presu-cifras strong { color: var(--sg-color-fg); }
.presu-cifras > div:nth-child(2) strong { color: var(--sg-color-fg-muted); }
.presu-cifras .presu-queda strong { color: var(--sg-color-success); }
.presu-cifras .presu-pasado strong { color: var(--sg-color-danger); }

/* El tiempo: «Actualizar» arriba a la derecha, aparte de los sitios */
.tiempo-cabecera { display: flex; align-items: flex-start; gap: var(--sg-space-2); }
.tiempo-cabecera p { flex: 1; min-width: 0; margin: 0; }
.tiempo-cabecera .boton { flex: none; margin-top: -8px; margin-right: -8px; }

/* Calculadora: entre las dos casillas, las flechas de cambio en pequeño (el «=» solo ocupaba una fila de 32 px); el
   0 de muestra, apagado (en gris grande parecía un valor escrito); los precios típicos, con su línea fina y las
   cifras en columna (siguen una debajo de otra: lado a lado se partían, 18/10/2026) */
.cambio-igual { display: grid; place-items: center; height: 24px; margin-block: -4px; }
.cambio-igual svg { width: 20px; height: 20px; transform: rotate(90deg); }
.cambio-casillas input::placeholder { color: var(--sg-color-fg-muted); opacity: 0.45; }
.cambio-calc .tira-chips button { min-height: 40px; }
.cambio-tablas .lista li { padding-block: var(--sg-space-2); font-variant-numeric: tabular-nums; }
.cambio-tablas .lista li + li { border-top: 0.5px solid var(--sg-color-border); }
@media (min-width: 640px) { .cambio-igual svg { transform: none; } }

/* Notas: la categoría y «Guardar» en una fila (el botón bajaba solo a la izquierda) */
.notas-nueva .fila-extremos { flex-wrap: nowrap; }
.notas-nueva select { flex: 1; min-width: 0; }

/* Visado: el aviso de arriba en peso normal (todo en negrita no destacaba nada; la negrita queda para las fechas) y
   los apartados fijos debajo de la cabecera al bajar, en una tira que se desliza */
.visado-aviso p { font-weight: 400; margin: 0; }
.visado-saltos { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 3;
  margin-inline: calc(-1 * var(--sg-space-4)); padding: var(--sg-space-2) var(--sg-space-4);
  background: var(--sg-color-cristal); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }

/* ---- Pulido visual 06/11 · sistema 2 y pantallas restantes ---- */
/* Opciones de un selector con icono (Asistente, hoja de Mapas): icono y texto centrados en la misma línea */
.segmentos-grandes button:has(> svg) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segmentos-grandes button > svg { width: 18px; height: 18px; flex: none; }
.etiqueta > svg { width: 14px; height: 14px; flex: none; }

/* Cabecera: la pastilla del récord con el trofeo en SVG (metas.js), del color de la pastilla */
.cabecera-record { display: inline-flex; align-items: center; gap: 4px; }
.cabecera-record > svg { width: 16px; height: 16px; flex: none; }

/* Ajustes: cada grupo, sus iconos de un color (ajustes.js › grupo), como en el iPhone; con todos del mismo azul claro
   no se encontraba nada de un vistazo. El trazo, del color de la tarjeta: blanco en claro y oscuro en oscuro */
.aj-grupo[class*="aj-c-"] .aj-icono { color: var(--sg-color-surface); }
.aj-c-viaje .aj-icono { background: var(--sg-color-juego-escuchar); }
.aj-c-jesus .aj-icono { background: var(--sg-color-danger); }
.aj-c-movil .aj-icono { background: var(--sg-color-fg-muted); }
.aj-c-familia .aj-icono { background: var(--sg-color-juego-contestar); }
.aj-c-ingles .aj-icono { background: var(--sg-color-juego-hablar); }
.aj-c-avisos .aj-icono { background: var(--sg-color-juego-rapido); }
.aj-c-copias .aj-icono { background: var(--sg-color-juego-verbos); }
/* El primer grupo quedaba pegado al título grande (8 px; los demás llevan 24) */
.mas-grupo:first-child:has(+ .aj-grupo) { margin-top: var(--sg-space-2); }
/* «Cerrar sesión», como una fila más de la lista y con el texto rojo (era una pastilla roja ancha que pesaba tanto
   como un grupo entero) */
.boton.aj-salir { margin-top: var(--sg-space-4); min-height: 52px; background: var(--sg-color-surface); color: var(--sg-color-danger);
  border: 1px solid var(--sg-color-linea-tarjeta); border-radius: var(--sg-radius-md); box-shadow: var(--sg-shadow-card); }
.boton.aj-salir:hover { background: var(--sg-color-danger-soft); }

/* Destinos: el elegido, con marco amarillo y su tarjeta normal (antes, la tarjeta entera en amarillo; en oscuro, un
   ocre que ensuciaba la foto), como «Reto especial» en Inicio */
.panel.destino-elegido { box-shadow: var(--sg-shadow-card), 0 0 0 2px var(--sg-color-accent); border-color: transparent; }
/* Las tres estrellas del interés (destinos.js › estrellas): 44 px cada una; encendidas, rellenas de amarillo */
.destino-estrellas { display: flex; align-items: center; gap: var(--sg-space-1); }
.destino-estrellas button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: var(--sg-radius-pill); background: transparent; color: var(--sg-color-fg-muted); cursor: pointer; }
.destino-estrellas button:hover { background: var(--sg-color-relleno); }
.destino-estrellas button svg { width: 28px; height: 28px; }
.destino-estrellas button[aria-pressed="true"] { color: var(--sg-color-juego-rapido); } /* 3,3:1 sobre blanco; el amarillo del sol, 1,8 */
.destino-estrellas button[aria-pressed="true"] svg { fill: currentColor; }
.destino-estrellas .mini { margin-left: var(--sg-space-1); }

/* Chat: lo tuyo, en el azul macizo (en claro el azul claro casi no se separaba del fondo: lo tuyo y lo del otro solo
   se distinguían por el lado). primary-fg da 6,6:1 en claro y 8,6:1 en oscuro */
.chat-mia { background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.chat-mia .chat-meta, .chat-mia .chat-visto { color: color-mix(in srgb, var(--sg-color-primary-fg) 78%, transparent); }
.chat-mia .chat-texto a { color: inherit; }
/* «‹ Atrás», como icono a la izquierda de la caja de escribir (ya no es una fila suelta encima); en escritorio está la
   barra lateral */
.chat-volver svg { width: 24px; height: 24px; }
@media (min-width: 900px) { .chat-volver { display: none; } }
/* Reproductor de los audios (chat.js › adjuntoHTML): ▶ redondo, la barra de avance y el tiempo */
.chat-audio { display: flex; align-items: center; gap: var(--sg-space-2); width: min(260px, 66vw); min-height: 44px; }
.chat-audio-boton { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer; background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.chat-audio-boton svg { width: 18px; height: 18px; }
.chat-mia .chat-audio-boton { background: var(--sg-color-primary-fg); color: var(--sg-color-primary); }
.chat-audio-barra { flex: 1; height: 4px; }
.chat-audio-barra > span { background: var(--sg-color-primary); transition: width 0.25s linear; }
.chat-mia .chat-audio-barra { background: color-mix(in srgb, var(--sg-color-primary-fg) 30%, transparent); }
.chat-mia .chat-audio-barra > span { background: var(--sg-color-primary-fg); }
.chat-audio-tiempo { flex: none; min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.chat-audio audio { display: none; }

/* Ubicación: lo que no es el botón principal, como filas de lista (ubicacion.js › botonesMapa) */
.ubi-enlaces .item { align-items: center; min-height: 44px; padding-block: var(--sg-space-2); color: var(--sg-color-fg); }
button.item.ubi-fila { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit;
  text-align: left; cursor: pointer; }
.ubi-enlaces .item > svg { color: var(--sg-color-fg-muted); }
/* Mientras carga el mapa (o si no llega), un fondo con la chincheta: antes era un rectángulo gris sin nada */
.mapa-caja { background: var(--sg-color-relleno) center / 40px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }

/* Mapas: la isla elegida como la opción elegida de cualquier selector (antes, azul macizo, distinto del de la hoja de
   abajo en la misma pantalla) y los iconos SVG de los botones redondos */
.mapa-islas button[aria-pressed="true"] { background: var(--sg-color-segmento-activo); color: var(--sg-color-fg); box-shadow: var(--sg-shadow-control); }
.mapa-boton > svg { width: 22px; height: 22px; }

/* Asistente: sin IA o sin conexión, el estado vacío centrado en la pantalla (no una tarjeta arriba) */
.ia-vacio { min-height: 50dvh; display: grid; align-content: center; }

/* Pantalla del PIN: el error, debajo del botón y sin hueco fijo cuando no hay ninguno */
.acceso-caja .error-texto:empty { min-height: 0; }

/* Escaparate con el enlace caducado: centrado y con el logo, como la pantalla del PIN */
.escaparate.escaparate-sin-enlace { min-height: 100dvh; align-content: center; }
.escaparate-error { display: grid; justify-items: center; gap: var(--sg-space-3); text-align: center; }
.escaparate-logo { display: block; width: 88px; height: 88px; }
.escaparate-logo .logo-app { box-shadow: var(--sg-shadow-card); }
/* La etiqueta «Nuestro destino» del ancho de su texto (en la pila de la cabecera se estiraba a todo el ancho) */
.destino-elegido .panel-cabecera .etiqueta { justify-self: start; }
/* El título del estado vacío del Asistente, en el color del texto: en gris se leía como una nota más */
.ia-vacio .vacio > .fuerte { color: var(--sg-color-fg); font-size: var(--sg-text-lg); }

/* ---- Pulido visual 06/11 · al juntar ---- */
/* El título de un estado vacío (estadoVacio de ui.js), en el color del texto: en gris se leía como una nota más */
.vacio > .fuerte { color: var(--sg-color-fg); }

/* ==========================================================================
   Cabecera con la cuenta atrás y barra de abajo en color (06/11/2026, Jesús)
   ========================================================================== */
/* La cabecera puede tener una segunda fila (el tiempo de los tres sitios del viaje), a todo el ancho */
.cabecera { flex-wrap: wrap; row-gap: 2px; }
/* La cuenta atrás hasta el vuelo (cabecera.js): en todas las pantallas, también en Inicio, que antes la escondía */
.cabecera-info.con-cuenta { flex: 1 1 auto; min-width: 0; gap: 1px; }
html[data-pantalla="inicio"] .cabecera-info.con-cuenta { display: grid; }
/* Mientras corre la cuenta, el hueco central (la cuenta en días de Inicio) no ocupa sitio */
.cabecera:has(.con-cuenta) .cabecera-cuenta:empty { display: none; }
.ic-titulo { font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio); color: var(--sg-color-fg-muted); white-space: nowrap; }
.ic-reloj { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sg-color-fg); }
.ic-reloj b { font-size: clamp(1rem, 5.2vw, 1.3rem); font-weight: var(--sg-peso-titulo); letter-spacing: -0.02em; line-height: 1.05; }
.ic-reloj i { font-style: normal; font-size: var(--sg-text-xs); font-weight: var(--sg-peso-medio); color: var(--sg-color-fg-muted); margin-left: 1px; }
.ic-sep { margin-inline: 3px; color: var(--sg-color-fg-muted); font-weight: var(--sg-peso-medio); }
/* Los segundos, en el color de la marca: es lo que se mueve y lo que se ve que corre */
.ic-reloj b[data-s] { color: var(--sg-color-primary); }
/* Los días (09/11/2026): el grupo entero se esconde cuando ya no queda ninguno */
.ic-dias { display: inline-flex; align-items: baseline; gap: 2px; }
.ic-dias[hidden] { display: none; }
/* Cada cifra entra rodando desde arriba al cambiar (ponerCifra de cabecera.js), como un panel de salidas; el
   recorte del propio número hace que se vea entrar por su ranura, sin mover nada de alrededor */
.ic-reloj b { display: inline-block; clip-path: inset(0); }
.ic-avion { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ic-reloj b.ic-gira { animation: ic-gira 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
  /* El avión del título se balancea, como si fuera volando */
  .ic-avion { animation: ic-vuela 3.2s ease-in-out infinite; }
}
@keyframes ic-gira {
  /* Solo transform y opacidad (sin blur): corre cada segundo y en un Android viejo el filtro gasta */
  from { transform: translateY(-70%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes ic-vuela {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(2px, -2px) rotate(-6deg); }
  50% { transform: translate(4px, 0) rotate(0deg); }
  75% { transform: translate(2px, 1.5px) rotate(5deg); }
}
/* La fila de abajo: Madrid, Cantón y Manila, en pequeño */
.cabecera-tiempos {
  flex: 1 1 100%; order: 99; margin: 0; display: flex; justify-content: space-between; gap: var(--sg-space-1);
  font-size: var(--sg-text-xs); color: var(--sg-color-fg-muted); white-space: nowrap; overflow: hidden;
  padding-top: 3px; border-top: 0.5px solid var(--sg-color-border);
}
.cabecera-tiempos[hidden] { display: none; }
.ct-sitio { display: inline-flex; align-items: baseline; gap: 2px; min-width: 0; letter-spacing: -0.01em; }
.ct-sitio b { color: var(--sg-color-fg); font-weight: var(--sg-peso-fuerte); }
.ct-hr { margin-left: 2px; }
.ct-hr::before { content: '· '; }
/* En los móviles estrechos (360 px) y con la letra grande, más compacto pero con la humedad (Jesús la pidió) */
@media (max-width: 380px) { .cabecera-tiempos { font-size: min(var(--sg-text-xs), 11.5px); letter-spacing: -0.02em; } .ct-hr::before { content: '·'; } }
@media (min-width: 900px) { .cabecera-tiempos { justify-content: flex-start; gap: var(--sg-space-6); } }

/* La barra de abajo con iconos en color (ui.js › iconoNav). En reposo, algo apagados; la pestaña elegida se enciende:
   el icono a todo color, más grande, sube un poco y rebota al tocarla, con una pastilla de luz detrás */
.nav a { position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.nav a .ico3d { width: 30px; height: 30px; overflow: visible;
  filter: saturate(0.55) brightness(0.95) drop-shadow(0 1.5px 1.5px rgb(0 0 0 / 0.22));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter var(--sg-dur-base) var(--sg-ease); }
.nav a:not([data-ruta="ingles"])::before {
  content: ''; position: absolute; z-index: -1; top: 5px; left: 50%; width: 58px; height: 36px; margin-left: -29px;
  border-radius: var(--sg-radius-pill); background: var(--sg-color-primary-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-color-primary) 22%, transparent), 0 4px 16px color-mix(in srgb, var(--sg-color-primary) 35%, transparent);
  opacity: 0; transform: scale(0.6); transition: opacity var(--sg-dur-base) var(--sg-ease), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav a[aria-current="page"]::before { opacity: 1; transform: scale(1); }
.nav a[aria-current="page"] .ico3d { filter: saturate(1.15) drop-shadow(0 3px 4px rgb(0 0 0 / 0.28)); transform: translateY(-2px) scale(1.12); }
.nav a[aria-current="page"] > span { color: var(--sg-color-primary); font-weight: var(--sg-peso-fuerte); }
.nav a:active .ico3d { transform: scale(0.88); transition-duration: 0.1s; }
@media (prefers-reduced-motion: no-preference) {
  /* Al encenderse (cada vez que se elige la pestaña), un rebote; el avión de Viaje, además, vuela despacio */
  .nav a[aria-current="page"] .ico3d { animation: nav-rebote 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .nav a[data-ruta="viaje"][aria-current="page"] .ico3d { animation: nav-rebote 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), nav-vuela 3.2s ease-in-out 0.6s infinite; }
  .nav a[aria-current="page"]::before { animation: nav-luz 3.2s ease-in-out 0.6s infinite; }
}
@keyframes nav-rebote {
  0% { transform: translateY(0) scale(0.85); }
  55% { transform: translateY(-5px) scale(1.18); }
  100% { transform: translateY(-2px) scale(1.12); }
}
@keyframes nav-vuela { 50% { transform: translate(2px, -4px) scale(1.12) rotate(-4deg); } }
@keyframes nav-luz { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-color-primary) 30%, transparent), 0 4px 22px color-mix(in srgb, var(--sg-color-primary) 55%, transparent); } }
/* En el ordenador (barra lateral), la luz es la fila entera, como antes: sin la pastilla */
@media (min-width: 900px) {
  .nav a::before { display: none; }
  .nav a .ico3d { width: 26px; height: 26px; }
}

/* ==========================================================================
   Más dinamismo (06/11/2026, Jesús): iconos 3D arriba, «Lo que falta» que se enciende, ⟳ que avisa,
   la barra de abajo cada 10 s y las pantallas que entran. Todo lo que se mueve, solo sin «reducir movimiento»
   ========================================================================== */
/* --- Iconos 3D de las pestañas de arriba (ui.js › icono3d): Viaje (sitios) y Preparativos (fases) --- */
.sitio-icono:has(> .ico3d) { display: block; font-size: 0; line-height: 0; }
.sitio-icono > .ico3d {
  width: 32px; height: 32px; overflow: visible;
  filter: saturate(0.75) drop-shadow(0 1.5px 1.5px rgb(0 0 0 / 0.22));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter var(--sg-dur-base) var(--sg-ease);
}
.sitios a[aria-current="page"] .sitio-icono > .ico3d {
  transform: scale(1.12); filter: drop-shadow(0 0 5px rgb(255 255 255 / 0.6)) drop-shadow(0 2px 3px rgb(0 0 0 / 0.3));
}
.sitios a { transition: transform 0.18s var(--sg-ease), background-color var(--sg-dur-base) var(--sg-ease); }
.sitios a:active { transform: scale(0.95); }
.fase-3d { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
/* Los botones de fase se reparten el ancho aunque su texto no quepa (si no, ensanchaban la pantalla: ver .vista) */
.segmentos-grandes button { min-width: 0; }
.fase-3d > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En el móvil estrecho, el icono encima del nombre y «5 pendientes · ahora» puede partirse: se lee entero sin cortes */
@media (max-width: 420px) {
  .segmentos-grandes button:has(.fase-3d) { padding-block: 6px; }
  .fase-3d { flex-direction: column; gap: 2px; }
  /* Sin «pendie…»: con la letra grande en móvil estrecho, la línea encoge un poco (tope 3,2vw) para que quepa
     «pendientes» entero; solo si ni así, se parte la palabra */
  .segmentos-grandes button:has(.fase-3d) .segmento-sub { font-size: min(var(--sg-text-xs), 3.2vw); white-space: normal; line-height: 1.2; text-overflow: clip; overflow-wrap: anywhere; }
}
.fase-3d > .ico3d {
  width: 22px; height: 22px; flex: none; overflow: visible; opacity: 0.85;
  filter: saturate(0.6) drop-shadow(0 1px 1px rgb(0 0 0 / 0.2));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter var(--sg-dur-base) var(--sg-ease), opacity var(--sg-dur-base) var(--sg-ease);
}
.segmentos button[aria-pressed="true"] .fase-3d > .ico3d { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 1.5px 2px rgb(0 0 0 / 0.28)); }
.segmentos button { transition: background-color var(--sg-dur-base) var(--sg-ease), color var(--sg-dur-base) var(--sg-ease), transform 0.15s var(--sg-ease); }
.segmentos button:active { transform: scale(0.96); }
@media (prefers-reduced-motion: no-preference) {
  /* Al elegir la pestaña, el icono da un saltito (como el de la barra de abajo) */
  .sitios a[aria-current="page"] .sitio-icono > .ico3d,
  .segmentos button[aria-pressed="true"] .fase-3d > .ico3d { animation: ico3d-entra 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes ico3d-entra { 0% { transform: scale(0.8); } 55% { transform: translateY(-4px) scale(1.22); } 100% { transform: scale(1.12); } }

/* --- Inicio › «Lo que falta preparar» (inicio.js › engancharFalta): barra de avance y ✔ que se encienden --- */
/* Valores por defecto; inicio.js pone el de cada fila y el de la barra */
.lista-falta > li { --sg-i: 0; }
.falta-barra > span { --sg-p: 0%; }
.falta-avance { display: flex; align-items: center; gap: var(--sg-space-2); margin: 0 0 var(--sg-space-2); }
.falta-barra { flex: 1 1 auto; height: 8px; border-radius: var(--sg-radius-pill); background: var(--sg-color-relleno); overflow: hidden; }
.falta-barra > span {
  position: relative; display: block; height: 100%; width: var(--sg-p, 0%); border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, var(--sg-color-primary), var(--sg-color-success));
}
.falta-barra > span::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%);
}
.lista-falta > li.falta { display: flex; align-items: center; gap: var(--sg-space-1); --sg-tono: var(--sg-color-primary); }
.lista-falta > li.falta-pronto { --sg-tono: var(--sg-color-warning); }
.lista-falta > li.falta-urge { --sg-tono: var(--sg-color-danger); }
.falta > .item { flex: 1 1 auto; min-width: 0; }
.falta-check {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sg-tono); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.falta-check svg { width: 28px; height: 28px; overflow: visible; transition: transform 0.15s var(--sg-ease); }
.falta-check circle { fill: color-mix(in srgb, var(--sg-tono) 12%, transparent); stroke: currentColor; stroke-width: 2; transition: fill 0.25s, stroke 0.25s; }
.falta-check path {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 0.35s var(--sg-ease) 0.1s, stroke 0.2s;
}
.falta-check:active svg { transform: scale(0.86); }
.falta-check:focus-visible { outline: 2px solid var(--sg-color-foco); outline-offset: -2px; }
@media (hover: hover) { .falta-check:hover path { stroke-dashoffset: 8; } }
/* Hecha: el círculo se llena de verde con el ✔ blanco; luego la fila se va de lado */
.lista-falta > li.falta-hecha { --sg-tono: var(--sg-color-success); }
.falta-hecha .falta-check circle { fill: var(--sg-color-success); stroke: var(--sg-color-success); }
.falta-hecha .falta-check path { stroke: #fff; stroke-dashoffset: 0; }
.falta-hecha .item-titulo { color: var(--sg-color-fg-muted); text-decoration: line-through; }
.falta-sale { opacity: 0; transform: translateX(28px); transition: opacity 0.35s var(--sg-ease), transform 0.35s var(--sg-ease); }
/* Lo que toca la última semana (maleta, eTravel): una raya ámbar a la izquierda */
.falta-consejo > .item { position: relative; }
.falta-consejo > .item::before {
  content: ''; position: absolute; left: -10px; top: 20%; bottom: 20%; width: 3px; border-radius: 3px;
  background: var(--sg-color-warning); box-shadow: 0 0 8px color-mix(in srgb, var(--sg-color-warning) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .falta-barra > span { animation: barra-llena 1.1s var(--sg-ease) 0.2s backwards; }
  .falta-barra > span::after { animation: barra-brillo 4s ease-in-out 1.4s infinite; }
  /* Las filas entran una tras otra y luego cada ✔ se enciende por turnos (una onda de su color): las atrasadas, el
     doble de a menudo */
  .lista-falta > li { animation: falta-entra 0.45s var(--sg-ease) calc(var(--sg-i, 0) * 60ms + 120ms) backwards; }
  .falta-check svg { animation: falta-luz 7s ease-in-out calc(var(--sg-i, 0) * 0.45s + 1s) infinite; }
  .falta-check::after {
    content: ''; position: absolute; inset: 8px; border-radius: 50%; pointer-events: none;
    animation: falta-onda 7s ease-out calc(var(--sg-i, 0) * 0.45s + 1s) infinite;
  }
  .falta-urge .falta-check svg, .falta-urge .falta-check::after { animation-duration: 3.5s; }
  .falta-hecha .falta-check svg { animation: falta-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .falta-hecha .falta-check::after { animation: falta-estalla 0.6s ease-out forwards; }
  .falta-consejo > .item::before { animation: latir 2.4s ease-in-out infinite; }
}
@keyframes barra-llena { from { width: 0; } }
@keyframes barra-brillo { 0% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }
@keyframes falta-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes falta-luz {
  0%, 12%, 100% { transform: scale(1); filter: none; }
  5% { transform: scale(1.16); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sg-tono) 75%, transparent)); }
}
@keyframes falta-onda {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sg-tono) 55%, transparent); }
  14%, 100% { box-shadow: 0 0 0 13px transparent; }
}
@keyframes falta-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes falta-estalla {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sg-color-success) 60%, transparent); }
  to { box-shadow: 0 0 0 18px transparent; }
}

/* --- El ⟳ de la cabecera, encendido cuando hay que tocarlo (app.js › actualizarInsignia): versión nueva esperando
   o cambios que el servidor no aceptó --- */
.cabecera-boton.cabecera-boton-brilla { position: relative; background: var(--sg-color-primary); color: var(--sg-color-primary-fg); }
.cabecera-boton-brilla::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-color-primary) 45%, transparent), 0 0 16px 3px color-mix(in srgb, var(--sg-color-primary) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .cabecera-boton-brilla svg { animation: girar 2.4s linear infinite; }
  .cabecera-boton-brilla::after { animation: brilla-late 1.6s ease-in-out infinite; }
}
@keyframes brilla-late { 50% { opacity: 0.35; transform: scale(1.15); } }

/* --- Barra de abajo: solo el icono encendido se mueve, una vez cada 10 s, cada uno a su manera (la casa salta, la
   lista se menea, el avión despega y vuelve, la calculadora salta, las teselas de «Más» giran) --- */
@media (prefers-reduced-motion: no-preference) {
  .nav a[aria-current="page"] .ico3d { animation: nav-rebote 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), nav-salta 10s ease-in-out 3s infinite; }
  .nav a[data-ruta="preparativos"][aria-current="page"] .ico3d { animation: nav-rebote 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), nav-menea 10s ease-in-out 3s infinite; }
  .nav a[data-ruta="viaje"][aria-current="page"] .ico3d { animation: nav-rebote 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), nav-despega 10s ease-in-out 3s infinite; }
  .nav a[data-ruta="mas"][aria-current="page"] .ico3d { animation: nav-rebote 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), nav-gira 10s ease-in-out 3s infinite; }
  .nav a[aria-current="page"]::before { animation: nav-luz10 10s ease-in-out 3s infinite; }
}
@keyframes nav-salta {
  0%, 9%, 100% { transform: translateY(-2px) scale(1.12); }
  2.5% { transform: translateY(-8px) scale(1.18, 1.08); }
  5% { transform: translateY(0) scale(1.2, 1.02); }
  7% { transform: translateY(-3px) scale(1.12); }
}
@keyframes nav-menea {
  0%, 8%, 100% { transform: translateY(-2px) scale(1.12) rotate(0); }
  1.5% { transform: translateY(-3px) scale(1.16) rotate(-12deg); }
  3% { transform: translateY(-3px) scale(1.16) rotate(10deg); }
  4.5% { transform: translateY(-2px) scale(1.14) rotate(-6deg); }
  6% { transform: translateY(-2px) scale(1.12) rotate(3deg); }
}
@keyframes nav-despega {
  0%, 11%, 100% { transform: translateY(-2px) scale(1.12); opacity: 1; }
  4.5% { transform: translate(20px, -16px) scale(0.85) rotate(-8deg); opacity: 0; }
  4.6% { transform: translate(-20px, 12px) scale(0.85); opacity: 0; }
  9% { transform: translateY(-2px) scale(1.12); opacity: 1; }
}
@keyframes nav-gira { 0% { transform: translateY(-2px) scale(1.12) rotate(0); } 6%, 100% { transform: translateY(-2px) scale(1.12) rotate(360deg); } }
@keyframes nav-luz10 {
  0%, 10%, 100% { transform: scale(1); }
  4% { transform: scale(1.1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-color-primary) 35%, transparent), 0 4px 22px color-mix(in srgb, var(--sg-color-primary) 60%, transparent); }
}

/* --- Las pantallas entran (app.js › mostrarRuta, .vista-entra): sus partes suben y aparecen una tras otra al llegar
   a otra pantalla; los bloques de Inicio, igual. Tocar un bloque lo hunde un poco --- */
@media (prefers-reduced-motion: no-preference) {
  .vista-entra > *, .vista-entra .bento > * { animation: vista-sube 0.42s var(--sg-ease) backwards; }
  .vista-entra > :nth-child(2), .vista-entra .bento > :nth-child(2) { animation-delay: 50ms; }
  .vista-entra > :nth-child(3), .vista-entra .bento > :nth-child(3) { animation-delay: 100ms; }
  .vista-entra > :nth-child(4), .vista-entra .bento > :nth-child(4) { animation-delay: 150ms; }
  .vista-entra > :nth-child(5), .vista-entra .bento > :nth-child(5) { animation-delay: 200ms; }
  .vista-entra > :nth-child(n+6), .vista-entra .bento > :nth-child(n+6) { animation-delay: 250ms; }
  a.bloque { transition: transform 0.15s var(--sg-ease), box-shadow var(--sg-dur-base) var(--sg-ease); }
  a.bloque:active { transform: scale(0.98); }
}
@keyframes vista-sube { from { opacity: 0; transform: translateY(10px); } }