/* Copiloto — MVP "Modo Viaje". Mobile-first, listón de UX: un mecánico mayor
   sin ninguna experiencia técnica. Botones gigantes, cero menús, alto
   contraste. Fuentes: pila del sistema (nunca Google Fonts CDN — regla dura
   de instrucciones-frontend.md; no cargar ninguna fuente externa cumple la
   regla de raíz sin necesitar autoalojar archivos .woff2 para este MVP). */

:root {
  --color-bg: #f7f5f0;
  --color-surface: #ffffff;
  --color-text: #1a2321;
  --color-text-suave: #4a5a57;
  --color-primary: #1f6f78;
  --color-primary-oscuro: #124b52;
  /* Color de TEXTO de marca (títulos, botones secundarios, pestañas). En claro es el
     mismo teal oscuro de siempre; en oscuro se aclara: el teal oscuro sobre fondo
     oscuro daba 1,6:1 (ilegible, WCAG pide 4,5:1). Añadido el 08/10/2026. */
  --color-texto-marca: #124b52;
  /* Color de los enlaces de texto (¿Olvidaste tu contraseña?, enlaces de las reglas). Claro: el
     teal de siempre; oscuro: se aclara (el teal medio sobre fondo oscuro daba ~3:1). */
  --color-enlace: #1f6f78;
  --color-acento: #e8703a;
  --color-acento-oscuro: #b8541f;
  --color-borde: #dcd8cd;
  --color-exito: #2e7d4f;
  --color-aviso: #b8541f;
  /* Tarjetas de aviso/éxito (17/09/2026): fondo Y texto en un solo par de
     variables, para que el par entero cambie junto en modo oscuro. Antes el
     fondo estaba fijo en un tono claro (#fdecea/#eaf6ee) y el texto heredaba
     --color-text, que SÍ cambia a casi blanco en modo oscuro — el resultado
     era texto casi invisible sobre fondo claro dentro del WebView en modo
     oscuro (la "tarjeta que no se ve" bajo el formulario de Entrar). */
  --color-aviso-fondo: #fdecea;
  --color-aviso-texto: #7a2e0f;
  /* Fondo suave de las listas de avisos del itinerario y de la etiqueta «no verificado»
     (antes un #fff4e8 suelto en dos reglas; en oscuro se oscurece, igual que --color-aviso-fondo). */
  --color-aviso-suave: #fff4e8;
  --color-exito-fondo: #eaf6ee;
  --color-exito-texto: #1e5c37;
  /* Texto sobre --color-primary (08/10/2026, Memorias): blanco en los dos
     modos — el primario no cambia en modo oscuro. */
  --color-sobre-primario: #ffffff;
  --radio: 20px;
  --radio-chico: 12px;
  --espacio-1: 8px;
  --espacio-2: 16px;
  --espacio-3: 24px;
  --espacio-4: 32px;
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tam-texto-base: 19px;
  --tam-texto-grande: 24px;
  --tam-texto-titulo: 28px;
  --objetivo-tactil-min: 64px;

  /* ---- Tokens añadidos el 08/10/2026 (cuentas, menú y actualización) ----
     TODO lo nuevo de esta tanda (menú, aviso de versión nueva, pie, entrada con
     recuperar contraseña) usa SOLO variables: el rediseño de la identidad
     visual cambia ESTA lista y la de arriba, no las pantallas. */
  --color-velo: rgba(26, 35, 33, 0.72);
  --sombra-panel: 0 -4px 24px rgba(0, 0, 0, 0.3);
  --sombra-aviso: 0 4px 16px rgba(0, 0, 0, 0.25);
  --tam-texto-chico: 15px;
  --tam-texto-pie: 13px;
  --objetivo-tactil-cabecera: 56px;
  --ancho-lectura: 560px;
  --alto-panel-max: 92vh;
  --duracion-corta: 180ms;
  --curva-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --espaciado-letras-codigo: 0.3em;
  /* Escala de capas (de menos a más). El <dialog> del menú usa la capa
     superior del navegador y no necesita número. */
  --capa-cabecera: 10;
  --capa-mapa: 50;
  --capa-peaje: 60;
  --capa-aviso: 999;
  --capa-velo: 1000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121a19;
    --color-surface: #1b2624;
    --color-text: #f0ede6;
    --color-text-suave: #b9c4c1;
    --color-borde: #2d3a37;
    --color-aviso-fondo: #3a2418;
    --color-aviso-texto: #ffd9c2;
    --color-aviso-suave: #3a2418;
    --color-exito-fondo: #16291d;
    --color-exito-texto: #b9f0c9;
    --color-texto-marca: #7cc4cc;
    --color-enlace: #7cc4cc;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--fuente);
  font-size: var(--tam-texto-base);
  line-height: 1.5;
}

.app-header {
  padding: var(--espacio-3) var(--espacio-3) var(--espacio-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  text-align: left;
}

.app-header__titulo {
  margin: 0;
  font-size: var(--tam-texto-titulo);
  color: var(--color-texto-marca);
}

.app-header__subtitulo {
  margin: 4px 0 0;
  color: var(--color-text-suave);
  font-size: 16px;
}

/* --- Presencia del amix (02/09 noche, punto 6 del feedback de María) --- */
.app-header__avatar-boton {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 0;
}

.app-header__avatar {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
}

.app-header__textos {
  min-width: 0;
}

.app-main {
  padding: 0 var(--espacio-2) var(--espacio-4);
  max-width: 560px;
  margin: 0 auto;
}

.vista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.vista[hidden] {
  display: none;
}

/* --- Botón grande de hablar --- */
.zona-hablar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  background: var(--color-surface);
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
}

.boton-hablar {
  width: 180px;
  height: 180px;
  max-width: 60vw;
  max-height: 60vw;
  border-radius: 50%;
  border: none;
  background: var(--color-acento);
  color: var(--color-sobre-primario);
  font-size: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--color-acento-oscuro);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.boton-hablar:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--color-acento-oscuro);
}

/* El botón grande lleva la cara del amix (02/09 noche) + insignia del micro. */
.boton-hablar {
  position: relative;
  padding: 0;
}

.boton-hablar__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.boton-hablar__mic {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-acento);
  border: 3px solid var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.boton-hablar[data-escuchando="true"] .boton-hablar__mic {
  background: var(--color-primary);
}

.boton-hablar[data-escuchando="true"] {
  background: var(--color-primary);
  box-shadow: 0 6px 0 var(--color-primary-oscuro);
  animation: pulso 1.1s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.boton-hablar__texto {
  font-size: var(--tam-texto-base);
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.estado-voz {
  min-height: 1.4em;
  font-size: var(--tam-texto-grande);
  font-weight: 600;
  color: var(--color-texto-marca);
  text-align: center;
}

/* Pistas de frases de voz (03/09 — "los modos sobran"): ejemplos reales de lo
   que se le puede DECIR al amix, discretas bajo el botón grande. */
.pistas-amix {
  margin: 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text-suave);
  text-align: center;
  text-wrap: pretty;
}

.pistas-amix--izquierda {
  max-width: none;
  text-align: left;
}

.tarjeta-respuesta {
  width: 100%;
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radio-chico);
  padding: var(--espacio-2);
}

.tarjeta-respuesta[hidden] {
  display: none;
}

.tarjeta-respuesta__quien {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  margin: 0 0 var(--espacio-1);
  color: var(--color-texto-marca);
}

.tarjeta-respuesta__quien img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.tarjeta-respuesta__texto {
  margin: 0 0 var(--espacio-1);
  font-size: var(--tam-texto-grande);
}

.tarjeta-respuesta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-1);
}

.etiqueta-modelo {
  display: inline-block;
  font-size: 14px;
  color: var(--color-text-suave);
  background: var(--color-surface);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: 2px 12px;
}

.boton-repetir {
  border: 1px solid var(--color-primary);
  background: var(--color-surface);
  color: var(--color-texto-marca);
  border-radius: var(--radio-chico);
  min-height: 48px;
  padding: 8px 16px;
  font-size: var(--tam-texto-base);
  cursor: pointer;
}

/* --- Accesos directos --- */
/* 03/09 ("los modos sobran"): los accesos pasan a SECUNDARIOS — hablar con el
   amix es la vía principal; estas filas compactas quedan como plan B a mano
   hasta que el orquestador de intenciones las absorba. */
.accesos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-1);
}

.accesos__titulo {
  grid-column: 1 / -1;
  margin: var(--espacio-1) 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-suave);
}

.boton-acceso {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--espacio-1);
  min-height: 52px;
  padding: var(--espacio-1) var(--espacio-2);
  background: none;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.boton-acceso__icono {
  font-size: 22px;
  line-height: 1;
}

.boton-acceso:active {
  border-color: var(--color-primary);
}

/* --- Cabecera de subvistas --- */
.vista__cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.boton-volver {
  min-height: var(--objetivo-tactil-min);
  min-width: 64px;
  border: 2px solid var(--color-borde);
  background: var(--color-surface);
  border-radius: var(--radio-chico);
  font-size: 26px;
  cursor: pointer;
  color: var(--color-texto-marca);
}

.vista__titulo {
  margin: 0;
  font-size: var(--tam-texto-titulo);
  color: var(--color-texto-marca);
}

/* --- Itinerario --- */
.caja-itinerario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

textarea.entrada-texto {
  width: 100%;
  min-height: 160px;
  font-family: inherit;
  font-size: 17px;
  padding: var(--espacio-2);
  border-radius: var(--radio-chico);
  border: 2px solid var(--color-borde);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
}

.boton-primario {
  min-height: var(--objetivo-tactil-min);
  border: none;
  border-radius: var(--radio-chico);
  background: var(--color-primary);
  color: var(--color-sobre-primario);
  font-size: var(--tam-texto-grande);
  font-weight: 700;
  cursor: pointer;
}

.boton-primario:active {
  background: var(--color-primary-oscuro);
}

.lista-avisos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.lista-avisos li {
  background: var(--color-aviso-suave);
  border: 2px solid var(--color-aviso);
  border-radius: var(--radio-chico);
  padding: var(--espacio-2);
  font-size: 17px;
}

.resumen-plan {
  background: var(--color-surface);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: var(--espacio-2);
}

.resumen-plan dt {
  font-weight: 700;
  color: var(--color-text-suave);
  font-size: 14px;
  margin-top: var(--espacio-1);
}

.resumen-plan dd {
  margin: 0;
  font-size: 18px;
}

/* Aviso de que lo que se ve es el viaje YA guardado (03/09 noche): antes esta
   pantalla salía siempre en blanco aunque el viaje llevara días en el
   servidor. Discreto — el protagonista sigue siendo el plan. */
.itinerario-guardado {
  margin: 0 0 var(--espacio-2);
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text-suave);
  text-wrap: pretty;
}

/* --- Itinerario: subir PDF (31/08/2026) --- */
.separador-o {
  text-align: center;
  color: var(--color-text-suave);
  font-weight: 600;
  margin: 0;
}

.boton-primario--secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-texto-marca);
  border: 2px solid var(--color-primary);
  text-align: center;
  cursor: pointer;
}

.boton-primario--secundario:active {
  background: var(--color-bg);
}

/* El <input type="file"> real queda invisible pero accesible: el <label>
   estilizado como botón (arriba) es lo que se ve y se toca — patrón estándar
   sin JS extra para "botón bonito de subir archivo". */
.entrada-archivo-oculta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Modo aeropuerto (31/08/2026) --- */
.zona-hablar--compacta {
  padding: var(--espacio-2);
}

.boton-hablar--pequeno {
  width: 96px;
  height: 96px;
  font-size: 36px;
  box-shadow: 0 4px 0 var(--color-acento-oscuro);
}

.boton-hablar--pequeno[data-escuchando="true"] {
  box-shadow: 0 4px 0 var(--color-primary-oscuro);
}

.caja-pregunta-aeropuerto {
  border-top: 1px dashed var(--color-borde);
  padding-top: var(--espacio-3);
}

.tarjeta-ruta-aeropuerto {
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-2);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tarjeta-ruta-aeropuerto:active {
  border-color: var(--color-primary);
}

.tarjeta-ruta-aeropuerto__titulo {
  margin: 0;
  font-size: var(--tam-texto-grande);
  font-weight: 700;
  color: var(--color-texto-marca);
}

.tarjeta-ruta-aeropuerto__resumen {
  margin: 0;
  color: var(--color-text-suave);
}

.detalle-ruta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.detalle-ruta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.detalle-ruta__titulo {
  margin: 0;
  font-size: 20px;
  color: var(--color-texto-marca);
}

.lista-pasos-aeropuerto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  counter-reset: paso-aero;
}

.paso-aeropuerto {
  background: var(--color-surface);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-2);
  padding-left: 64px;
  position: relative;
  counter-increment: paso-aero;
}

.paso-aeropuerto::before {
  content: counter(paso-aero);
  position: absolute;
  left: var(--espacio-2);
  top: var(--espacio-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-sobre-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.paso-aeropuerto__titulo {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.paso-aeropuerto__instruccion {
  margin: 0;
}

.paso-aeropuerto__aviso {
  margin: var(--espacio-1) 0 0;
  color: var(--color-aviso);
  font-weight: 600;
}

.badge-no-verificado {
  display: inline-block;
  margin-top: var(--espacio-1);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-aviso);
  background: var(--color-aviso-suave);
  border: 1px solid var(--color-aviso);
  border-radius: 999px;
  padding: 2px 12px;
}

/* --- Reglas del país --- */
.lista-reglas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

/* Subtítulo de cada grupo de reglas (04/09/2026: Alemania + Reino Unido en la
   misma pantalla, ver app.js pintarGrupoReglas()). Primer grupo sin margen
   extra arriba (le basta el gap del contenedor); los siguientes sí. */
.lista-reglas__grupo-titulo {
  margin: var(--espacio-2) 0 0;
  font-size: var(--tam-texto-base);
  color: var(--color-text-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lista-reglas__grupo-titulo:first-child {
  margin-top: 0;
}

.tarjeta-regla {
  background: var(--color-surface);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-2);
}

.tarjeta-regla__titulo {
  margin: 0 0 4px;
  font-size: var(--tam-texto-grande);
  color: var(--color-texto-marca);
}

.tarjeta-regla__resumen {
  margin: 0 0 var(--espacio-1);
  font-weight: 600;
}

.tarjeta-regla__detalle {
  margin: 0 0 var(--espacio-1);
  color: var(--color-text-suave);
}

.tarjeta-regla__accion {
  margin: 0;
  font-weight: 700;
  color: var(--color-exito);
}

.tarjeta-regla__enlace {
  display: inline-block;
  margin-top: var(--espacio-1);
  color: var(--color-enlace);
}

/* --- Traducción --- */
.selector-direccion {
  display: flex;
  gap: var(--espacio-1);
}

.boton-direccion {
  flex: 1;
  min-height: 56px;
  border: 2px solid var(--color-borde);
  background: var(--color-surface);
  border-radius: var(--radio-chico);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
}

.boton-direccion[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-sobre-primario);
}

.tarjeta-traduccion {
  background: var(--color-surface);
  border: 3px solid var(--color-primary);
  border-radius: var(--radio);
  padding: var(--espacio-3);
  text-align: center;
}

.tarjeta-traduccion__texto {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 var(--espacio-2);
}

/* --- Ayuda --- */
.pasos-ayuda {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos-ayuda li {
  background: var(--color-surface);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-2);
  padding-left: 64px;
  position: relative;
  counter-increment: paso;
}

.pasos-ayuda li::before {
  content: counter(paso);
  position: absolute;
  left: var(--espacio-2);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-sobre-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* --- Selector de amix (02/09 noche) --- */
.vista__titulo--centrado {
  text-align: center;
}

.texto-centrado {
  text-align: center;
  margin: 0;
}

.selector-amix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-2);
}

.tarjeta-amix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  padding: var(--espacio-3) var(--espacio-2);
  background: var(--color-surface);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  font-family: inherit;
  cursor: pointer;
}

.tarjeta-amix:active {
  border-color: var(--color-primary);
}

.tarjeta-amix img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.tarjeta-amix__nombre {
  font-size: var(--tam-texto-grande);
  font-weight: 700;
  color: var(--color-text);
}

.tarjeta-amix__descripcion {
  color: var(--color-text-suave);
  font-size: 16px;
}

/* --- Página de entrada sin token (02/09 noche) --- */
input.entrada-linea {
  width: 100%;
  min-height: 56px;
  font-family: inherit;
  font-size: 17px;
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-chico);
  border: 2px solid var(--color-borde);
  background: var(--color-surface);
  color: var(--color-text);
}

.app-footer {
  text-align: center;
  padding: var(--espacio-3);
  color: var(--color-text-suave);
  font-size: 14px;
}

/* Enlaces legales en el pie (21/09/2026: Impressum/Datenschutz obligatorios,
   § 5 DDG / Art. 13 DSGVO) — mismo pie en entrada.html, index.html y las
   propias páginas legales, así que la regla vive en el CSS compartido. */
.app-footer__legal {
  display: flex;
  justify-content: center;
  gap: var(--espacio-2);
  margin-top: 4px;
}

.app-footer__legal a {
  color: var(--color-text-suave);
  font-size: 13px;
  text-decoration: underline;
}

.aviso-limite {
  background: var(--color-aviso-fondo);
  color: var(--color-aviso-texto);
  border: 2px solid var(--color-aviso);
  border-radius: var(--radio-chico);
  padding: var(--espacio-2);
  text-align: center;
  font-weight: 600;
}

.aviso-limite[hidden] {
  display: none;
}

/* Versión + botón de actualización manual (16/09/2026, pantalla "Cómo
   funciona"): línea discreta, mismo criterio tipográfico que .itinerario-guardado. */
.vista-ayuda__version {
  margin: var(--espacio-3) 0 var(--espacio-1);
  font-size: 15px;
  color: var(--color-text-suave);
  text-align: center;
}

/* Aviso GLOBAL de "se ha actualizado" (16/09/2026): fijo abajo, por encima de
   cualquier pantalla — la app se recarga sola a los pocos segundos de
   mostrarlo, así que no necesita un botón de cerrar. */
.aviso-actualizacion {
  position: fixed;
  left: var(--espacio-2);
  right: var(--espacio-2);
  bottom: calc(var(--espacio-2) + env(safe-area-inset-bottom, 0px));
  z-index: var(--capa-aviso);
  background: var(--color-exito);
  color: var(--color-sobre-primario);
  font-weight: 700;
  text-align: center;
  padding: var(--espacio-2);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-aviso);
}

.aviso-actualizacion[hidden] {
  display: none;
}

/* Velo de consentimiento (17/09/2026): mismo z-index por encima del aviso de
   actualización (999) para que, si coincidieran, el consentimiento gane —
   sin aceptar no hay app que actualizar. */
.velo-consentimiento {
  position: fixed;
  inset: 0;
  z-index: var(--capa-velo);
  background: var(--color-velo);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--espacio-2);
  padding-bottom: calc(var(--espacio-2) + env(safe-area-inset-bottom, 0px));
}

.velo-consentimiento[hidden] {
  display: none;
}

.velo-consentimiento__caja {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-3);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  box-shadow: var(--sombra-panel);
}

.consentimiento-texto {
  color: var(--color-text);
  font-size: var(--tam-texto-base);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.aviso-enlace-invalido {
  padding: var(--espacio-4);
  text-align: center;
  font-size: var(--tam-texto-grande);
  color: var(--color-text);
}

.solo-lectura-pantalla {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Modo coche (tanda A v1, 03/09/2026) --- */
.boton-acceso--ancho {
  width: 100%;
}

.resultados-destino {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.resultados-destino[hidden] {
  display: none;
}

.resultado-destino {
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: var(--espacio-2);
  font-family: inherit;
  font-size: 17px;
  color: var(--color-text);
  cursor: pointer;
  min-height: 56px;
}

.resultado-destino:active {
  border-color: var(--color-primary);
}

/* Pantalla de mapa: a pantalla COMPLETA de verdad (overlay fijo) — el mapa,
   la ruta y el botón de voz del amix, nada más mientras se conduce. */
.coche-mapa-pantalla {
  position: fixed;
  inset: 0;
  z-index: var(--capa-mapa);
  background: var(--color-bg);
}

.coche-mapa-pantalla[hidden] {
  display: none;
}

/* Doble clase a propósito: GL JS añade "mapboxgl-map" (position: relative,
   en su CSS que se carga DESPUÉS) al contenedor — sin más especificidad aquí,
   el contenedor colapsaba a altura 0 y el canvas se quedaba en el fallback de
   300px (cazado por Playwright contra producción, 03/09). */
.coche-mapa-pantalla .mapa-coche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.coche-superior {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-1);
  padding: var(--espacio-2);
  pointer-events: none;
}

.boton-salir-coche {
  min-width: var(--objetivo-tactil-min);
  min-height: var(--objetivo-tactil-min);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 26px;
  cursor: pointer;
  pointer-events: auto;
  flex-shrink: 0;
}

.resumen-ruta {
  margin: 0;
  padding: var(--espacio-1) var(--espacio-2);
  background: var(--color-surface);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  font-weight: 700;
  font-size: 17px;
  pointer-events: auto;
}

.resumen-ruta:empty {
  display: none;
}

.coche-inferior {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--espacio-2);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  background: var(--color-surface);
  border-top: 2px solid var(--color-borde);
  border-radius: var(--radio) var(--radio) 0 0;
}

.instruccion-actual {
  margin: 0;
  font-size: var(--tam-texto-grande);
  font-weight: 700;
  color: var(--color-text);
}

.instruccion-actual:empty {
  display: none;
}

.estado-guia {
  margin: 0;
  min-height: 1.3em;
  color: var(--color-text-suave);
  font-size: 16px;
}

.coche-controles {
  display: flex;
  gap: var(--espacio-1);
  align-items: stretch;
}

.boton-guia {
  flex: 1;
  font-size: var(--tam-texto-base);
}

.boton-paso {
  min-width: var(--objetivo-tactil-min);
  min-height: var(--objetivo-tactil-min);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 30px;
  cursor: pointer;
}

.boton-paso[hidden] {
  display: none;
}

/* Botón de voz del amix flotando sobre el mapa (el requisito literal del
   blueprint: "mapa + botón de voz grande, nada más mientras se conduce"). */
.boton-amix-coche {
  position: absolute;
  right: var(--espacio-2);
  bottom: 190px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-acento);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--color-acento-oscuro);
}

.boton-amix-coche__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.boton-amix-coche__mic {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-acento);
  border: 3px solid var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.boton-amix-coche[data-escuchando="true"] {
  background: var(--color-primary);
  box-shadow: 0 4px 0 var(--color-primary-oscuro);
  animation: pulso 1.1s ease-in-out infinite;
}

.boton-amix-coche[data-escuchando="true"] .boton-amix-coche__mic {
  background: var(--color-primary);
}

.respuesta-coche {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-1);
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radio-chico);
  padding: var(--espacio-1) var(--espacio-2);
}

.respuesta-coche[hidden] {
  display: none;
}

.respuesta-coche img {
  border-radius: 50%;
  flex-shrink: 0;
}

.respuesta-coche__texto {
  margin: 0;
  font-size: 17px;
}

/* Aviso de peaje: SIEMPRE por delante de todo — el requisito origen del
   proyecto ("nunca un peaje sin avisarte", blueprint §3.3). */
.banner-peaje {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--capa-peaje);
  background: var(--color-surface);
  border-bottom: 4px solid var(--color-aviso);
  padding: var(--espacio-2);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.banner-peaje[hidden] {
  display: none;
}

.banner-peaje__titulo {
  margin: 0;
  font-size: var(--tam-texto-grande);
  font-weight: 700;
  color: var(--color-aviso);
}

.banner-peaje__detalle {
  margin: 0;
  font-size: 17px;
}

.banner-peaje__botones {
  display: flex;
  gap: var(--espacio-1);
}

.banner-peaje__botones .boton-primario {
  flex: 1;
  font-size: 17px;
}

.boton-primario--peligro {
  background: var(--color-aviso);
}

/* Marcador de la posición actual sobre el mapa (elemento propio de GL JS). */
.punto-posicion {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-acento);
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-acento-oscuro);
}

/* --- Habla por mí: parrilla 2x2 con el par alemán (03/09/2026) --- */
.selector-direccion--parrilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-1);
}

/* --- Cuenta con sesión (16/09/2026, noche 2): pestañas Entrar/Crear cuenta,
   enlaces de texto y mensaje de confirmación — misma paleta de siempre. --- */
.pestanas-cuenta {
  display: flex;
  gap: var(--espacio-1);
  border-bottom: 2px solid var(--color-borde);
}

.pestana-cuenta {
  flex: 1;
  min-height: var(--objetivo-tactil-min);
  border: none;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-suave);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.pestana-cuenta[aria-selected="true"] {
  color: var(--color-texto-marca);
  border-bottom-color: var(--color-primary);
}

.campo-cuenta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.campo-cuenta label {
  font-weight: 600;
  color: var(--color-text);
}

/* Contraseña + botón "Mostrar" (17/09/2026): María pidió poder comprobar lo
   que ha escrito antes de enviar el formulario. El input ocupa el ancho
   disponible y el botón queda a su derecha, con el mismo objetivo táctil
   mínimo que el resto de botones de esta pantalla. */
.campo-password {
  display: flex;
  align-items: stretch;
  gap: var(--espacio-1);
}

.campo-password input.entrada-linea {
  flex: 1;
  min-width: 0;
}

.boton-ver-password {
  flex-shrink: 0;
  min-width: var(--objetivo-tactil-min);
  min-height: 56px;
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-chico);
  border: 2px solid var(--color-borde);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.boton-ver-password[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-sobre-primario);
}

.enlace-boton {
  border: none;
  background: none;
  padding: var(--espacio-1) 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-enlace);
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}

.mensaje-exito {
  background: var(--color-exito-fondo);
  border: 2px solid var(--color-exito);
  border-radius: var(--radio-chico);
  padding: var(--espacio-2);
  text-align: center;
  font-weight: 600;
  color: var(--color-exito-texto);
}

.mensaje-exito[hidden],
.pestanas-cuenta[hidden],
.campo-cuenta[hidden] {
  display: none;
}

/* Casilla grande (08/10/2026, M0 memorias): «Tengo 18 años o más» en el alta
   y en Memorias, «Lo he entendido y lo decido yo». Toda la fila es tocable
   (objetivo táctil de 64 px) y la casilla nativa crece, no se reinventa. */
.casilla {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--objetivo-tactil-min);
  padding: 0 var(--espacio-2);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
}

.casilla input {
  width: var(--espacio-3);
  height: var(--espacio-3);
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.casilla:has(input:checked) {
  border-color: var(--color-primary);
}

.campo-cuenta label.casilla {
  margin-top: var(--espacio-1);
}

/* ===========================================================================
   Cuentas, menú y actualización (08/10/2026)
   Encargo de María: "HEYAMIX no se actualiza. No tiene botón para actualizar
   la sesión ni abrir ni cerrar sesión." Los botones existían, enterrados al
   final de «Cómo funciona». Ahora cuelgan de un botón «Menú» SIEMPRE visible
   en la cabecera. Solo variables del sistema de diseño (ver :root).
   =========================================================================== */

/* --- Botón «Menú» de la cabecera --- */
.app-header__menu {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: var(--objetivo-tactil-cabecera);
  min-height: var(--objetivo-tactil-cabecera);
  padding: 0 var(--espacio-1);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-surface);
  color: var(--color-texto-marca);
  font-family: inherit;
  cursor: pointer;
}

.app-header__menu:active {
  border-color: var(--color-primary);
}

.app-header__menu-icono {
  font-size: var(--tam-texto-grande);
  line-height: 1;
}

.app-header__menu-texto {
  font-size: var(--tam-texto-pie);
  font-weight: 700;
}

/* --- Panel del menú (<dialog> modal: foco atrapado, Esc, capa superior) --- */
.menu-app {
  width: 100%;
  max-width: var(--ancho-lectura);
  max-height: var(--alto-panel-max);
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--sombra-panel);
  overflow: hidden;
}

.menu-app:not([open]) {
  display: none; /* navegadores sin hoja de estilo propia para <dialog> */
}

.menu-app::backdrop {
  background: var(--color-velo);
}

.menu-app[open] {
  display: flex;
  flex-direction: column;
  animation: menu-app-sube var(--duracion-corta) var(--curva-salida);
}

@keyframes menu-app-sube {
  from {
    transform: translateY(var(--espacio-3));
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-app[open] {
    animation: none;
  }
}

.menu-app__caja {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  padding-bottom: calc(var(--espacio-3) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.menu-app__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.menu-app__cerrar {
  flex-shrink: 0;
  min-width: var(--objetivo-tactil-cabecera);
  min-height: var(--objetivo-tactil-cabecera);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-surface);
  color: var(--color-texto-marca);
  font-family: inherit;
  font-size: var(--tam-texto-grande);
  cursor: pointer;
}

.menu-app__cerrar:active {
  border-color: var(--color-primary);
}

.menu-app__bloque {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding-top: var(--espacio-3);
  border-top: 1px solid var(--color-borde);
}

.menu-app__bloque[hidden] {
  display: none;
}

.menu-app__cabecera + .menu-app__bloque {
  padding-top: 0;
  border-top: none;
}

.menu-app__subtitulo {
  margin: 0;
  font-size: var(--tam-texto-grande);
  color: var(--color-texto-marca);
}

.menu-app__dato {
  margin: 0;
  overflow-wrap: anywhere;
}

.menu-app__dato[hidden] {
  display: none;
}

.menu-app__dato--fuerte {
  font-weight: 700;
}

.menu-app__ayuda {
  margin: 0;
  font-size: var(--tam-texto-chico);
  color: var(--color-text-suave);
}

.menu-app__estado {
  margin: 0;
  text-align: center;
  font-weight: 600;
  color: var(--color-text);
}

.menu-app__estado[hidden] {
  display: none;
}

/* Un <a> con aspecto de botón primario (el menú lleva uno a «Crear mi cuenta»). */
.boton-primario--enlace {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

/* Un <a> con aspecto de acceso (enlaces del pie del menú). */
a.boton-acceso {
  text-decoration: none;
}

.menu-app a.boton-acceso[hidden],
.menu-app button.boton-acceso[hidden],
.aviso-sin-cuenta[hidden],
.boton-primario--enlace[hidden],
.caja-itinerario[hidden] {
  display: none;
}

/* Cabecera FIJA en la pantalla de la app (08/10/2026): el botón «Menú» tiene que
   verse siempre, también con la pantalla desplazada. Solo la de index.html
   (las páginas legales y la entrada no la llevan). Fondo opaco para que el
   contenido no se transparente por debajo. */
.app-header--fija {
  position: sticky;
  top: 0;
  z-index: var(--capa-cabecera);
  background: var(--color-bg);
}

/* --- Aviso «Hay una versión nueva» (un toque; no se va solo) --- */
.aviso-version {
  position: fixed;
  left: var(--espacio-2);
  right: var(--espacio-2);
  bottom: calc(var(--espacio-2) + env(safe-area-inset-bottom, 0px));
  z-index: var(--capa-aviso);
  max-width: var(--ancho-lectura);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-2);
  border-radius: var(--radio-chico);
  background: var(--color-primary-oscuro);
  color: var(--color-sobre-primario);
  box-shadow: var(--sombra-aviso);
  text-align: center;
  font-weight: 700;
}

.aviso-version[hidden] {
  display: none;
}

.aviso-version__texto {
  margin: 0;
}

.aviso-version__ayuda {
  margin: 0;
  font-size: var(--tam-texto-chico);
  font-weight: 400;
}

.aviso-version__ayuda[hidden] {
  display: none;
}

.aviso-version__boton {
  min-height: var(--objetivo-tactil-min);
  border: none;
  border-radius: var(--radio-chico);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--tam-texto-grande);
  font-weight: 700;
  cursor: pointer;
}

/* --- «Crea tu cuenta» para quien sigue entrando por el enlace de siempre --- */
.aviso-sin-cuenta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-2);
  border: 2px solid var(--color-primary);
  border-radius: var(--radio-chico);
  background: var(--color-surface);
}

.aviso-sin-cuenta p {
  margin: 0;
  font-weight: 600;
}

/* --- Versión visible en el pie de TODAS las pantallas --- */
.app-footer__version {
  margin: var(--espacio-1) 0 0;
  font-size: var(--tam-texto-pie);
  color: var(--color-text-suave);
}

/* --- Entrada: recuperar la contraseña con el código del correo --- */
.entrada-intro {
  margin: 0;
  text-align: center;
  color: var(--color-text-suave);
}

.campo-cuenta .campo-ayuda {
  margin: 0;
  font-size: var(--tam-texto-chico);
  font-weight: 400;
  color: var(--color-text-suave);
}

.campo-cuenta input.entrada-codigo {
  letter-spacing: var(--espaciado-letras-codigo);
  text-align: center;
  font-size: var(--tam-texto-titulo);
}