/* ════════════════════════════════════════════════════════════════════════
   tema.css — el sistema de diseño de la app, en un solo sitio.

   Lo comparten app/index.html (el mapa) y app/player-tour.html (el
   reproductor). Vivía sólo dentro del mapa, y el reproductor se quedó con una
   COPIA vieja: paleta anterior (--ambar:#E0A458 contra el #E9B44C de la casa),
   tipografía Karla y ni rastro del modo sol. Parecían dos aplicaciones. Al
   sacarlo aquí, mover un token los mueve a los dos.

   Aquí SÓLO va lo que es de las dos páginas: los tokens, el modo sol y las
   reglas de MapLibre. Lo que nombra clases de una página concreta —los pines
   del mapa, los chips— se queda en esa página.

   ⚠ CACHÉ: nginx sirve los .css con `expires 30d`. Las dos páginas lo piden
   con `?v=N`; al tocar este fichero hay que subir esa N en las dos y en
   SHELL_URLS de sw.js, o el cambio no llega en un mes.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Paleta ────────────────────────────────────────────────────────
     Re-afinada el 05/08/2026 contra docs/design/albaia-inicio.html. El
     --noche y el --azulejo no se tocaron: ya coincidían con la maqueta
     (el --navy de la maqueta ES este #1B2233). Lo que se movió:

       · --ambar   #E0A458 → #E9B44C   menos naranja, más amarillo
       · --oro     #F4CE7A → #F6D27A   un punto más claro
       · --granada #B04258 → #C65A3F   de vino a teja
       · --yeso    #F2EAD9 → #F3ECD9   imperceptible, por coincidir
       · --yeso-dim #A9A698 → #A9A390  imperceptible, por coincidir

     ⚠ --granada también pinta el aviso del botón central, que lleva texto
     CLARO: el contraste con blanco baja de 5.6:1 a 4.2:1. Sigue por encima
     del 3:1 que pide un glifo en negrita de ese tamaño, pero si ese aviso
     crece o adelgaza hay que revisarlo.

     ⚠ Los rgba() repartidos por la hoja llevan estos mismos colores en
     decimal (233,180,76 / 246,210,122 / 198,90,63). Al mover un token hay
     que moverlos con él: no se pueden escribir como var(). */
  --noche:#1B2233; --noche-2:#242E46; --noche-3:#2E3A57;
  /* Dos escalones por DEBAJO de --noche. El chasis de la maqueta y el color
     de la barra del navegador; --noche-cerrada es el negro de los degradados
     que van a caer al pie (barra inferior, brújula). Los números de arriba
     crecen hacia el claro, así que estos dos van por nombre y no por número. */
  --noche-hondo:#12161F; --noche-cerrada:#0C0F17;
  --yeso:#F3ECD9; --yeso-dim:#A9A390;
  --ambar:#E9B44C; --granada:#C65A3F; --azulejo:#5FA8A4; --oro:#F6D27A;
  /* El azulejo hondo de la maqueta. Ella lo declara y no lo usa (su mapa SVG
     lleva los hexes a pelo); aquí queda listo para las superficies de las
     fases siguientes, SIN tocar el --azulejo claro, que ya pinta el badge 🎧
     de «escuchado» y el cono de rumbo del avatar. */
  --azulejo-hondo:#2C6E7F;
  /* Los dos colores de los marcadores de la maqueta: la pizarra de la estrella
     sin descubrir y el verde del ✓ de descubierto. El verde no estaba en la
     casa —no lo pedía nada hasta ahora— y en la maqueta va suelto dentro del
     SVG. */
  --pizarra:#4A5470; --verde:#2F6B4B;
  --radius:16px;

  /* ── Capa de contraste ─────────────────────────────────────────────
     Todo lo que FLOTA sobre el mapa (chips, FABs, fichas, avisos) se pinta
     con estos tokens y NO con los colores de arriba. El motivo es que esta
     app se usa andando por la calle: el tema noche translúcido se lee muy
     bien de noche y fatal a mediodía, con el sol de lado y el brillo del
     móvil perdiendo la pelea. El «modo sol» (justo debajo) sólo tiene que
     redefinir estos tokens; no hay una segunda hoja de estilos ni reglas
     duplicadas que se desincronicen.

     --tinta es el color del TEXTO que va ENCIMA del acento (--ambar/--oro).
     Existe porque el acento deja de ser fijo en cuanto la web pone su
     color de marca (ver aplicarTema): sobre un ámbar claro la tinta
     tiene que ser oscura y sobre un granate corporativo, clara. */
  --flot-fondo:rgba(27,34,51,.82);
  --flot-fondo-2:rgba(27,34,51,.95);
  /* Superficies «levantadas» (FABs, ficha del POI, halo): un punto más claras
     que el resto para que se despeguen del mapa incluso en tema noche. */
  --flot-fondo-3:rgba(36,46,70,.92);
  --flot-borde:var(--noche-3);
  --flot-borde-an:1px;
  --flot-sombra:0 6px 16px rgba(0,0,0,.35);
  --flot-sombra-2:0 16px 40px rgba(0,0,0,.6);
  --flot-tsombra:none;
  --flot-blur:blur(10px);
  --tinta:var(--noche);
  /* Segundo tono de los degradados de marca (avatar, botón AR, cabecera de
     voz). Tiene token propio en vez de reutilizar --granada porque --granada
     también pinta el aviso del botón central, que lleva texto CLARO: si la
     web declarase un secundario claro, ese aviso se quedaría ilegible. */
  --marca-2:var(--granada);
}

/* ── Modo sol ────────────────────────────────────────────────────────
   Alto contraste para leer la pantalla al aire libre. Lo que cambia:

     · Fondos casi opacos y desenfoque APAGADO. El backdrop-filter mezcla
       el mapa con el chip y al sol esa mezcla es justo lo que borra el
       texto; además cuesta GPU y con ella batería.
     · Sombra dura negra en vez de difusa: bajo luz directa lo que separa
       un elemento del fondo es el borde, no el degradado.
     · Sombra de texto y blanco puro. El --yeso (#F3ECD9) es un hueso roto
       precioso que a pleno sol se confunde con el gris del mapa.
     · El mapa sube contraste y baja saturación: importa distinguir calle
       de manzana, no que el parque se vea verde.

   Se activa con data-sol="1" en <html>: lo pone aplicarTema() cuando el
   viajero lo elige en Ajustes, o cuando el sistema pide más contraste y la
   preferencia está en «auto». */
html[data-sol="1"]{
  --yeso:#FFFFFF; --yeso-dim:#DAD6CB;
  --noche-3:#5A6B92;
  --flot-fondo:rgba(6,9,16,.94);
  --flot-fondo-2:rgba(6,9,16,.97);
  --flot-fondo-3:rgba(13,18,30,.97);
  --flot-borde:rgba(255,255,255,.42);
  --flot-borde-an:2px;
  --flot-sombra:0 4px 0 rgba(0,0,0,.85),0 8px 18px rgba(0,0,0,.5);
  --flot-sombra-2:0 5px 0 rgba(0,0,0,.9),0 14px 30px rgba(0,0,0,.6);
  --flot-tsombra:0 1px 2px rgba(0,0,0,.9);
  --flot-blur:none;
}
html[data-sol="1"] .maplibregl-canvas{filter:saturate(.5) brightness(.8) contrast(1.3)}

/* ── Reglas CRÍTICAS de MapLibre embebidas ─────────────────────────────
   El CSS de MapLibre se carga desde un CDN (unpkg) y algunos navegadores
   (Opera/Edge/Brave "Tracking Prevention", adblockers, o estar offline) lo
   BLOQUEAN. Sin él, los marcadores pierden `position:absolute` y caen al flujo
   normal → se descolocan y se DESPEGAN al redimensionar (todos menos el
   primero). Al incrustarlas aquí, el posicionamiento no depende del CDN. */
.maplibregl-map{position:relative;overflow:hidden}
.maplibregl-canvas-container,.maplibregl-canvas{position:absolute;top:0;left:0}
.maplibregl-marker{position:absolute;top:0;left:0;will-change:transform}
.maplibregl-canvas-container.maplibregl-interactive{cursor:grab}
.maplibregl-canvas-container.maplibregl-interactive:active{cursor:grabbing}

.maplibregl-canvas{filter:saturate(.72) brightness(.62) contrast(1.05) hue-rotate(-6deg)}