/* AI Camper · Copiloto — capa BASE (frente 0, wiki-cronos#177)
 *
 * Va DESPUÉS de app.css y de copiloto-tokens.css (orden en app.html). No borra nada de app.css:
 * lo repinta. Lo que cada frente añade vive en su hoja (conversacion, decision, ruta, hojas).
 *
 *   1. Puente de nombres: los tokens de app.css (--papel, --ambar, --rapida…) apuntan a los de C
 *   2. Tipografía y fondos
 *   3. Pegatina: borde de tinta, sombra plana, se hunde al tocarla
 *   4. Botones y controles
 *   5. Barra inferior y cabecera con pestañas
 *   6. Ajustes: lista de temas
 *   7. Foco, mapa (filtro de teselas) y movimiento */

/* ═══ 1. PUENTE DE NOMBRES ═══════════════════════════════════════════════
 * app.css sigue usando sus nombres y colorToken() de app.js lee `--rapida`, `--mapa-equilibrada`…
 * Se declara en los tres temas porque app.css redefine algunos en [data-theme="dark"] y, a igual
 * especificidad, gana la hoja que va después: esta. Los var() se resuelven sobre <html>, que es
 * quien lleva data-theme, así que cada tema ve sus propios valores. */
:root,
[data-theme="dark"],
[data-theme="sol"] {
  /* Marca: el ámbar pasa a ser la acción amarilla de C */
  --ambar: var(--accion);
  --ambar-fuerte: var(--accion);
  --ambar-texto: var(--aviso);
  --ambar-suave: var(--protagonista);
  --ambar-velo: var(--calma-velo);
  --sobre-ambar: var(--sobre-accion);

  /* Neutros */
  --papel: var(--fondo);
  --tarjeta: var(--superficie);
  --tinta-tenue: var(--tinta-2);
  --velo-fondo: var(--velo-hoja);
  --glass: color-mix(in srgb, var(--fondo) 92%, transparent);

  /* Variantes: rapida = Prisa, equilibrada = Calma, economica = Sin peajes */
  --rapida: var(--prisa);
  --rapida-texto: var(--prisa-texto);
  --rapida-velo: var(--prisa-velo);
  --rapida-relleno: var(--prisa-relleno);
  --rapida-sobre: var(--sobre-prisa);
  --equilibrada: var(--calma);
  --equilibrada-texto: var(--calma-texto);
  --equilibrada-velo: var(--calma-velo);
  --equilibrada-relleno: var(--calma-relleno);
  --equilibrada-sobre: var(--sobre-calma);
  --economica: var(--sinpeajes);
  --economica-texto: var(--sinpeajes-texto);
  --economica-velo: var(--sinpeajes-velo);
  --economica-relleno: var(--sinpeajes-relleno);
  --economica-sobre: var(--sobre-sinpeajes);

  /* Mapa: lo que lee el JS con colorToken() */
  --nucleo: var(--mapa-nucleo);
  --mapa-rapida: var(--mapa-prisa);
  --mapa-equilibrada: var(--mapa-calma);
  --mapa-economica: var(--mapa-sinpeajes);

  /* Escala de letra: ningún texto por debajo de 16 px. Lo que era 13-15 px sube a --t-pie */
  --t-xs: var(--t-pie);
  --t-sm: var(--t-pie);
  --t-md: var(--t-cuerpo);
  --t-lg: var(--t-destacado);
  --t-xl: var(--t-titulo);
  --t-2xl: var(--t-seccion);
  --t-3xl: var(--t-cifra);

  /* Forma, sombras y tacto */
  --r-xl: var(--r-lg);
  --sombra-1: var(--sombra-nivel-1);
  --sombra-2: var(--sombra-nivel-2);
  --sombra-3: var(--sombra-nivel-3);
  --tactil: var(--tactil-minimo);

  /* Movimiento: en «al sol» los --m-* valen 0 y arrastran a los de app.css */
  --mov-duracion-micro: var(--m-micro);
  --mov-duracion-transicion: var(--m-transicion);
  --mov-duracion-protagonista: var(--m-entrada);
  --mov-duracion-latido: var(--m-trazo-ruta);
  --mov-escalonado-paso: var(--m-escalonado);
  --mov-curva-entrada: var(--curva-salida);
  --mov-escala-pulsacion-pequena: 1;
  --mov-escala-pulsacion-grande: 1;

  /* Aviso breve: pastilla de tinta; de noche no se invierte (una pastilla clara deslumbra) */
  --aviso-breve-fondo: var(--tinta);
  --aviso-breve-texto: var(--fondo);
  --aviso-breve-borde: var(--tinta);
}
[data-theme="dark"] {
  --aviso-breve-fondo: var(--superficie-2);
  --aviso-breve-texto: var(--tinta);
  --aviso-breve-borde: var(--linea-fuerte);
}

/* ═══ 2. TIPOGRAFÍA Y FONDOS ═════════════════════════════════════════════ */
body {
  font-family: var(--f-texto);
  background: var(--fondo);
  color: var(--tinta);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-texto);
}
h1, h2, h3, .cifra, .btn, .nombre, .marca-texto, .sello {
  font-family: var(--f-display);
}
h1, h2 { font-weight: var(--peso-titular); line-height: var(--lh-titular); }
.cifra { font-weight: var(--peso-titular); line-height: var(--lh-cifra); }
button, input, textarea, select { font-family: inherit; }
.panel-chat, #vista-planificador .panel-mapa { background: var(--fondo); }

/* ═══ 3. PEGATINA ════════════════════════════════════════════════════════
 * Borde de tinta + sombra plana desplazada. Al tocarla se hunde: se desplaza lo que mide la
 * sombra y la sombra se encoge, así parece pulsada de verdad. Sin movimiento (sol / reducir
 * movimiento) --hundir vale 0 o 0 ms y el estado pulsado se ve solo por el borde. */
.pegatina,
.ajustes-grupo,
.ajustes-perfil {
  background: var(--superficie);
  color: var(--tinta);
  border: var(--borde-fino) solid var(--borde-pegatina);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-nivel-2);
}
.tocable {
  transition: transform var(--m-pulsar) var(--curva-pulsar), box-shadow var(--m-pulsar) var(--curva-pulsar);
  -webkit-tap-highlight-color: transparent;
}
.tocable:active {
  transform: translate(var(--hundir), var(--hundir));
  box-shadow: var(--hundir-sombra) var(--hundir-sombra) 0 0 var(--sombra-plana);
}

/* ═══ 4. BOTONES Y CONTROLES ═════════════════════════════════════════════ */
.btn,
.icono-btn {
  border: var(--borde-control) solid var(--borde-pegatina);
  border-radius: var(--r-full);
  box-shadow: var(--sombra-nivel-1);
  font-family: var(--f-display);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--m-pulsar) var(--curva-pulsar), box-shadow var(--m-pulsar) var(--curva-pulsar), background var(--m-micro) var(--curva-salida);
}
.btn { min-height: var(--tactil-minimo); font-size: var(--t-cuerpo); font-weight: var(--peso-fuerte); }
.btn:active,
.icono-btn:active {
  transform: translate(var(--hundir), var(--hundir));
  box-shadow: var(--hundir-sombra) var(--hundir-sombra) 0 0 var(--sombra-plana);
}
.btn:disabled { box-shadow: none; transform: none; }
.btn-primary { background: var(--accion); color: var(--sobre-accion); border-color: var(--borde-accion); }
.btn-primary:hover { background: var(--accion); }
.btn-ghost { background: var(--superficie); color: var(--tinta); border-color: var(--borde-pegatina); }
.btn-ghost:hover { background: var(--superficie-2); }
.btn-peligro { background: var(--error); color: var(--superficie); border-color: var(--error); }
.btn-ghost.peligro { color: var(--error); border-color: var(--error); }
.icono-btn { background: var(--superficie); color: var(--tinta); }
.icono-btn:active { background: var(--superficie-2); }
.icono-btn.con-texto { font-size: var(--t-pie); font-weight: var(--peso-fuerte); }

.campo input, .campo select, .campo textarea,
.entrada textarea {
  border: var(--borde-control) solid var(--borde-pegatina);
  background: var(--superficie);
  color: var(--tinta);
}
.entrada textarea::placeholder { color: var(--tinta-2); }
.entrada textarea:focus { border-color: var(--foco); }
.opcion { border-radius: var(--r-md); }
.opcion:active { background: var(--superficie-2); }

/* ═══ 5. BARRA INFERIOR Y CABECERA CON PESTAÑAS ══════════════════════════ */
.barra-inferior {
  background: var(--superficie);
  border-top: var(--borde-filete) solid var(--linea-fuerte);
  min-height: calc(var(--tactil-barra) + var(--e-2));
  align-items: center;
  justify-content: space-around;
  padding: var(--e-1) var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom));
}
.barra-inferior a,
.barra-inferior button {
  flex: 0 0 auto;
  width: var(--tactil-barra);
  min-height: var(--tactil-minimo);
  height: var(--tactil-minimo);
  padding: 0;
  border: var(--borde-fino) solid transparent;
  border-radius: var(--r-full);
  color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
}
.barra-inferior svg { width: var(--icono-md); height: var(--icono-md); stroke-width: 2.25; }
/* La sección abierta es una píldora amarilla con borde de tinta: forma y color, no solo color */
.barra-inferior a[aria-current="page"] {
  background: var(--accion);
  color: var(--sobre-accion);
  border-color: var(--borde-accion);
}
.barra-inferior a[aria-current="page"]::before { content: none; }
.barra-inferior a:active,
.barra-inferior button:active { background: var(--superficie-2); }
.barra-inferior a[aria-current="page"]:active { background: var(--accion); }
/* «Nueva ruta»: botón-pegatina un poco mayor que el resto */
.barra-inferior .nueva-ruta {
  width: var(--tactil-grande);
  height: var(--tactil-grande);
  background: var(--superficie);
  border-color: var(--borde-pegatina);
  box-shadow: var(--sombra-nivel-1);
  color: var(--tinta);
}
.barra-inferior .nueva-ruta svg {
  width: var(--icono-lg); height: var(--icono-lg);
  padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit;
  stroke-width: 2.5;
}
.barra-inferior .nueva-ruta:active {
  transform: translate(var(--hundir), var(--hundir));
  box-shadow: var(--hundir-sombra) var(--hundir-sombra) 0 0 var(--sombra-plana);
  background: var(--superficie-2);
}
.barra-inferior .nueva-ruta:active svg { transform: none; }

.barra-lista {
  background: var(--superficie);
  border-bottom: var(--borde-filete) solid var(--linea-fuerte);
}
.de-la-ruta { background: var(--superficie); }
.de-la-ruta:active { background: var(--superficie-2); }
.de-la-ruta > svg { color: var(--tinta); }
.de-la-ruta > svg:last-child { color: var(--tinta-2); }
.de-la-ruta strong { font-family: var(--f-display); font-weight: var(--peso-titular); line-height: var(--lh-titular); }
.de-la-ruta small { color: var(--tinta-2); }
/* Con ruta abierta la cabecera se tiñe del color protagonista (el de la recomendada) */
.de-la-ruta.viaje.con-ruta { background: var(--protagonista); border-bottom-color: var(--linea-fuerte); }
.de-la-ruta.viaje.con-ruta > svg,
.de-la-ruta.viaje.con-ruta strong,
.de-la-ruta.viaje.con-ruta small { color: var(--sobre-protagonista); }
.de-la-ruta.viaje:not(.con-ruta) strong { color: var(--tinta); font-weight: var(--peso-titular); }
.de-la-ruta.viaje:not(.con-ruta) > svg { color: var(--tinta); }
.de-la-ruta.seccion { background: var(--superficie); }
.de-la-ruta.seccion > svg { color: var(--tinta); }

/* Chat / Mapa: conmutador. La opción activa se rellena de tinta, no solo cambia de color */
.pestanas {
  border: var(--borde-fino) solid var(--borde-pegatina);
  background: var(--superficie);
}
.pestanas button { color: var(--tinta); }
.pestanas button svg { width: var(--icono-md); height: var(--icono-md); }
.pestanas button.activo {
  background: var(--tinta);
  color: var(--superficie);
  box-shadow: none;
}
.pestanas button.hay-novedad::after {
  background: var(--error);
  border-color: var(--superficie);
}

/* La forma de cada ruta (▲ ● ■) en las alternativas, la pegatina y los filtros de Paradas. Una sola
 * definición: va con `svg.` para ganar a la copia que aún trae decision.css (misma regla, 1,75 rem). */
svg.forma-ruta { width: var(--icono-md); height: var(--icono-md); flex: none; display: block; overflow: visible; }
svg.forma-ruta .m { stroke: var(--mapa-contorno); stroke-width: 2.5; stroke-linejoin: round; }
svg.forma-ruta.rapida .m { fill: var(--mapa-rapida); }
svg.forma-ruta.equilibrada .m { fill: var(--mapa-equilibrada); }
svg.forma-ruta.economica .m { fill: var(--mapa-economica); }
.filtro.activo .forma-ruta .m { stroke: var(--superficie); }

/* ═══ 6. AJUSTES: LISTA DE TEMAS ═════════════════════════════════════════ */
.tema-ajuste { padding: var(--e-3) var(--e-2); display: flex; flex-direction: column; gap: var(--e-3); }
.tema-titulo { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-cuerpo); }
.tema-titulo svg { width: var(--icono-md); height: var(--icono-md); stroke-width: 2; color: var(--tinta-2); flex-shrink: 0; }
.tema-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--e-3) var(--e-2); }
.tema-opcion {
  min-height: var(--tactil-grande);
  display: flex; align-items: center; justify-content: center; gap: var(--e-1);
  min-width: 0;
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  color: var(--tinta);
  border: var(--borde-fino) solid var(--borde-pegatina);
  border-radius: var(--r-full);
  box-shadow: var(--sombra-nivel-1);
  font-family: var(--f-display);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-fuerte);
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--m-pulsar) var(--curva-pulsar), box-shadow var(--m-pulsar) var(--curva-pulsar);
}
.tema-opcion svg { width: var(--icono-md); height: var(--icono-md); stroke-width: 2.25; flex-shrink: 0; }
.tema-opcion span { min-width: 0; hyphens: manual; overflow-wrap: normal; }

/* Cabecera de cuenta: con letra grande el avatar queda arriba y los datos debajo, a todo el ancho */
.ajustes-perfil {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e-3) var(--e-4);
  padding: var(--e-4);
}
.ajustes-perfil .avatar { flex: none; }
.ajustes-perfil .datos { flex: 1 1 12rem; min-width: 0; }
.ajustes-perfil .nom, .ajustes-perfil .veh { overflow-wrap: break-word; }
/* El correo parte por el @ (el <wbr> lo pone configuracion.js) y solo en último caso por dentro */
.ajustes-perfil .correo { overflow-wrap: break-word; word-break: normal; }
.ajustes-perfil .veh { font-size: var(--t-pie); }

/* El ⓘ de ayuda: el dibujo es de 28 px, el toque de 44 */
.info { width: 44px; height: 44px; margin: calc((44px - 28px) / -2); }
.info::before { content: none; }
.info svg { width: 24px; height: 24px; }
.opcion-con-info label { display: flex; align-items: center; min-height: 44px; }
/* Enlaces dentro de un párrafo: la línea no crece, pero el toque sí (el relleno vertical de un enlace en línea no mueve las líneas) */
.conf-ayuda a, .ajustes-borrar .conf-ayuda a, [popover].ayuda a { padding-block: 0.7rem; }
.tema-opcion:active {
  transform: translate(var(--hundir), var(--hundir));
  box-shadow: var(--hundir-sombra) var(--hundir-sombra) 0 0 var(--sombra-plana);
}
/* La elegida: amarilla con borde de tinta y una marca de verificación (forma, no solo color) */
.tema-opcion[aria-checked="true"] {
  background: var(--accion);
  color: var(--sobre-accion);
  border-color: var(--borde-accion);
}
.tema-opcion[aria-checked="true"] span::after { content: " \2713"; }

/* ═══ 7. FOCO, MAPA Y MOVIMIENTO ═════════════════════════════════════════ */
:focus-visible {
  outline: var(--foco-grosor) solid var(--foco);
  outline-offset: var(--foco-aire);
}
/* Sobre una superficie amarilla el foco es de tinta (nunca amarillo sobre amarillo) */
.btn-primary:focus-visible,
.tema-opcion[aria-checked="true"]:focus-visible,
.barra-inferior a[aria-current="page"]:focus-visible { outline-color: var(--foco-sobre-protagonista); }

/* El amarillo de Calma contra el papel no llega a 3:1: nunca va solo, siempre con su contorno de tinta */
.forma.equilibrada, .forma-mapa.equilibrada { stroke-width: 2.5; }

/* Teselas de OSM atenuadas para que las rutas manden; el filtro lo da cada tema */
.leaflet-tile-pane { filter: var(--mapa-filtro); }
#mapa, #mapa-paradas { background: var(--mapa-fondo); }

/* Al sol y con «reducir movimiento» no se hunde ni se desplaza nada */
@media (prefers-reduced-motion: reduce) {
  .tocable, .btn, .icono-btn, .tema-opcion { transition-duration: var(--m-micro); }
}

/* ═══ 8. EL COPILOTO (public/js/copiloto.js) ═════════════════════════════
 * Su animación va en una hoja que el propio script inyecta; aquí solo lo que hace falta de fuera:
 * que el SVG no deje hueco de línea y no se aplaste dentro de un flex, y que el destello de faros
 * parta de «encendidos» (la animación solo existe al celebrar y acaba en opacity 1). */
.copiloto-svg { display: block; flex: none; max-width: 100%; height: auto; }
.cop-luz, .cop-pupila { opacity: 1; }