/* ============================================================
   SOL · sistema visual
   Papel cálido + tinta / naranja de luz directa / azul de sombra.
   La sombra real no es gris: es la luz azul del cielo. De ahí la dupla.
   ============================================================ */

/* ---------- la tipografía (marca/SISTEMA.md §2) ----------
   Una sola familia: Archivo, de Omnibus-Type. Es un archivo variable con dos
   ejes, ancho (wdth 62–125) y peso (wght), así que de acá salen las tres
   variantes del sistema sin cargar un archivo por cada una:

     Archivo Narrow    font-stretch: var(--w-narrow)    etiquetas y rótulos
     Archivo           font-stretch: normal             títulos y texto
     Archivo Expanded  font-stretch: var(--w-expand)    la cifra grande

   Va servida desde este mismo sitio, no desde Google Fonts, por tres razones:
   la app tiene que andar sin señal (el service worker no cachea otros
   orígenes), la app nativa la lee del bundle, y privacidad.html promete que
   la IP no se registra en ninguna parte, cosa que un pedido a fonts.gstatic
   rompería. Por lo mismo la CSP de netlify.toml sigue con font-src 'self'.

   Los dos subconjuntos son los de Google Fonts (Archivo v25, OFL). El
   navegador baja latin-ext solo si aparece un carácter de ese rango: hoy
   ningún nombre de plaza lo usa, así que en la práctica son 88 kB. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("/fuentes/archivo-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("/fuentes/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* SOL es papel, siempre. El 16/9/2026 Pablo probó el build 3 en su iPhone,
     que tiene el modo oscuro puesto, y la app salió negra: nunca fue una
     decisión de diseño, era una paleta alternativa heredada. La marca es la
     luz del mediodía sobre el pasto seco y eso no tiene versión nocturna.
     `color-scheme:light` le dice al navegador (y al WKWebView de la app) que
     no invierta ni los formularios ni las barras. No hay ningún bloque
     `prefers-color-scheme:dark` en este archivo, y no se vuelve a agregar. */
  color-scheme:light;

  /* superficie */
  --papel:#F2ECE1;
  --papel-2:#E7DECE;
  --papel-3:#DCD1BD;
  --tinta:#14100B;
  /* .80 y .62 no son estéticos: son los mínimos que dan 6,4:1 y 5,0:1 sobre el
     papel. Todo el texto secundario es chico y esto se lee al sol, en la calle. */
  --tinta-70:rgba(20,16,11,.80);
  --tinta-45:rgba(20,16,11,.62);
  --tinta-18:rgba(20,16,11,.18);
  --tinta-09:rgba(20,16,11,.09);
  /* EL FILETE DE UN CONTROL (mejora 25, marca/SISTEMA.md §6bis). `--tinta-18`
     es el filete que SEPARA (divisorias de lista, bordes de tarjeta): es
     decoración y la norma no le pide nada. El filete que DIBUJA un control
     (un chip, el secundario, el buscador, un campo) es otra cosa: es lo único
     que dice dónde empieza y dónde termina el botón, así que tiene que llegar
     a 3:1 (WCAG 1.4.11). Medido el 23/9/2026: `--tinta-18` daba 1,47 sobre
     papel. Éste da 3,90 sobre papel, 3,44 sobre papel-2 y 3,04 sobre papel-3,
     que son los tres fondos donde hay controles. */
  --filete-btn:#7F7462;
  /* EL ACENTO LLENO. El único lugar donde el naranja es fondo y no texto: la
     pastilla de "tocá el lugar donde te sentás" del mapa grande. Hasta hoy
     era `var(--sol)` con `#fff` escrito a mano, que daba 3,76 y no llegaba.
     Estos dos van juntos y se dan vuelta en LUNA. */
  --acento-lleno:#B33D09;
  --sobre-acento:#F2ECE1;   /* 4,98:1 */
  /* Cuánto se atenúa el rótulo de un botón mientras carga (§7, "Los cinco
     estados"). 55% dejaba el texto en 2,2:1, que es un rótulo que no se lee
     justo cuando dice que algo está pasando. 78% sigue leyéndose como
     atenuado y el peor par queda en 5,1:1. */
  --mezcla-cargando:78%;

  /* luz y sombra */
  --sol:#E8500C;
  --sol-vivo:#FF6B12;
  --sol-txt:#B03A08;   /* el naranja para texto: 5,2:1 sobre papel */
  --sol-alto:#FFB300;
  --sombra:#2B3550;
  --sombra-prof:#1B2236;

  /* escala del mapa, de sombra a sol */
  --m0:#222B44;
  --m1:#3E3F55;
  --m2:#6B4A4A;
  --m3:#B85A1C;
  --m4:#F5860E;
  --m5:#FFC22B;

  /* Escala del mapa de noche, de oscuridad a farola y luna. Es la misma que
     ya venía usando `web/mapa-ciudad.js` (que la lee de estos tokens y, si no
     están, cae exactamente a estos valores): ahora vive en un solo lugar para
     que el mapa de la ciudad y el de la plaza digan lo mismo con el mismo
     color. Igual que la del sol, no cambia entre SOL y LUNA: es el fenómeno,
     no la interfaz (marca/SISTEMA.md §8bis). */
  --n0:#0B0F1C;   /* oscuridad */
  --n1:#1A2542;
  --n2:#3C4160;   /* poca luz */
  --n3:#8A7144;   /* farola */
  --n4:#CBD5EE;   /* farola y luna */
  /* El gris de "no sabemos". No es un escalón más de la escala: es otra cosa.
     Donde `celdas[].luz` viene `null` la celda va acá y NUNCA en `--n0`:
     negro afirmaría que está oscuro, que es justo lo que no medimos
     (V2-CONTRATO.md §1.3). */
  --mc-sin:#6E6459;

  --ok:#1E6B4A;

  /* tipografía: una sola familia, y el ancho hace los roles.
     La pila de respaldo es la obligatoria del sistema; si Archivo no llegó
     todavía (o no llegó nunca, sin señal), font-stretch no hace nada sobre
     Helvetica y el texto sale a ancho normal, que es lo correcto. */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --w-narrow:78%;    /* Archivo Narrow: etiquetas en versalitas */
  --w-expand:116%;   /* Archivo Expanded: la cifra protagonista */

  --r:14px;
  --gutter:clamp(18px,5.2vw,28px);
  --grano:.05;

  /* la botonera de abajo (V2-CONTRATO.md §3). `--tabs-alto` es el dibujo y
     `--tabs-total` es lo que de verdad ocupa en pantalla, con la barra de
     gestos del iPhone incluida: todo lo que vive fijo abajo (el panel de la
     plaza, la invitación, la tostada) se levanta esa altura, y todo lo que
     scrollea deja ese aire al final. */
  --tabs-alto:56px;
  --tabs-total:calc(var(--tabs-alto) + env(safe-area-inset-bottom));

  /* tiempos y curva. 120 ms para el toque (que tiene que sentirse inmediato)
     y 150 a 200 ms para los cambios de pantalla y de hoja. Nada más lento:
     arriba de 220 ms una app de consulta se siente pesada. */
  --t-toque:.12s;
  --t-medio:.17s;
  --t-pantalla:.2s;
  --e-salida:cubic-bezier(.2,.8,.25,1);

  /* el movimiento largo (marca/SISTEMA.md §9). Una pantalla entera y una hoja
     pueden pasar de 220 ms porque no son una respuesta a un toque: son un
     viaje, y el viaje tiene que explicar de dónde viene lo que entra. */
  --t-capa:.26s;                              /* lista ⇄ plaza */
  --t-hoja:.32s;                              /* hojas y el panel de la plaza */
  --t-dato:.4s;                               /* el número que cuenta, el sol que se corre */
  --e-capa:cubic-bezier(.2,.8,.2,1);          /* entra rápido y frena */
  --e-resorte:cubic-bezier(.34,1.3,.64,1);    /* resorte suave: solo al abrir */

  /* el cambio de modo (24/9/2026). SOL ⇄ LUNA cambia catorce tokens de golpe.
     No se tapa la pantalla ni se mueve nada: se prende una transición de
     color sobre todo lo que está a la vista y se dan vuelta los tokens, así
     que cada elemento va de su color viejo al nuevo en su lugar. Medio
     segundo es el tiempo en que el ojo lee un cambio de luz como un cambio
     de luz y no como un parpadeo. */
  --t-morfo:.38s;

  /* fondos de las pastillas de estado: el mismo color de la leyenda del mapa,
     bajado a un velo que no compite con la tinta (marca/SISTEMA.md §3: el
     naranja es acento, no relleno). */
  --past-sol:rgba(232,80,12,.10);
  --past-sol-borde:rgba(232,80,12,.22);
  --past-medio:rgba(107,74,74,.12);
  --past-medio-borde:rgba(107,74,74,.24);
  --medio-txt:#6B4A4A;
  --past-sombra:rgba(43,53,80,.10);
  --past-sombra-borde:rgba(43,53,80,.22);
  /* la nube (12/10/2026): el gris cálido del sol apagado, #8A7F72, oscurecido
     para que el texto llegue a contraste sobre papel */
  --nube-txt:#5F564C;
  --past-nube:rgba(138,127,114,.16);
  --past-nube-borde:rgba(138,127,114,.34);
}


*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
/* La página no se agranda con los dedos (24/9/2026). `pan-x pan-y` deja pasar
   el desplazamiento en los dos sentidos y le saca al navegador las dos formas
   de cambiar la escala: el pellizco y el doble toque. Los mapas tienen su
   propio zoom sobre el lienzo y no lo pierden, porque ellos declaran
   `touch-action:none` por su cuenta. El zoom del documento, en cambio, era un
   callejón sin salida: una vez agrandado, con todo lo de arriba capturando el
   toque, no había gesto que lo devolviera. */
html{touch-action:pan-x pan-y}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--display);
  font-size:1rem;
  line-height:1.42;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}

/* grano de papel, muy sutil, apagado si molesta */
.grano{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:60;opacity:var(--grano);mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:reduce){.grano{display:none}}
/* En la app nativa de iOS (WKWebView de Capacitor) esta capa fija a pantalla
   completa con mix-blend-mode deja al WebView sin actualizaciones de render: la
   pagina se arma entera pero no pinta nunca y queda todo color papel. Visto el
   11/9/2026 en el simulador (iOS 26.5). En Safari de iPhone no pasa, asi que
   solo se apaga la mezcla adentro de la app; el grano se sigue viendo. */
html.nativo-ios .grano{mix-blend-mode:normal}

/* ---------- el scroller: solo la lista ---------- */
.scroller{
  height:100dvh;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
/* Lo que hace que la vista de atrás se corra y se apague cuando entra la
   plaza está ahora en `.vista`, abajo: desde el 21/9/2026 la plaza puede
   abrirse desde el inicio, desde el buscador o desde el mapa, y las tres
   tienen que quedar atrás igual (marca/SISTEMA.md §9). */
.pantalla{
  min-height:100dvh;
  /* abajo, el aire de la botonera: lo último de la lista tiene que poder
     leerse entero y no quedar debajo de las cuatro pestañas */
  padding:calc(env(safe-area-inset-top) + 14px) var(--gutter) calc(var(--tabs-total) + 14px);
  display:flex;flex-direction:column;
  position:relative;
}

/* ---------- la plaza, como capa ----------
   Entra desde la derecha en 200 ms y tapa la lista, que queda abajo con su
   scroll intacto. Es lo que espera cualquiera en un teléfono: la flecha de
   arriba a la izquierda devuelve exactamente al lugar de la lista donde
   estaba. Antes era la segunda mitad de un scroller, y con 661 filas la
   lista medía cuarenta y seis mil píxeles: el viaje no llegaba nunca. */
.capa-plaza{
  position:fixed;inset:0;z-index:30;
  background:var(--papel);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--t-capa) var(--e-capa),visibility 0s linear var(--t-capa);
}
.capa-plaza.abierta{
  transform:none;visibility:visible;
  transition:transform var(--t-capa) var(--e-capa),visibility 0s;
}
/* mientras el dedo la arrastra desde el borde izquierdo, la capa sigue al
   dedo: sin transición, el transform lo escribe app.js cuadro a cuadro */
.capa-plaza.arrastrando{transition:none}
@media (prefers-reduced-motion:reduce){
  .capa-plaza{transition:visibility 0s linear var(--t-capa)}
  .capa-plaza.abierta{transition:none}
}
/* con la plaza abierta, la lista de atrás no scrollea por debajo */
html.con-plaza,html.con-plaza body{overflow:hidden}
/* La plaza entra entera en una pantalla en cualquier teléfono de hoy. Con el
   mapa ocupando el 45% del alto puede quedar justa en pantallas muy chicas, y
   ahí preferimos que scrollee un centímetro antes que recortar el botón. */
#pantalla-sol{gap:0}

/* ---------- barra superior ---------- */
.barra{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--tinta-18);
  flex:0 0 auto;
}
/* la flecha y el menú se comen su propio padding para que el dibujo quede
   alineado con el borde del texto y no con el borde de su caja táctil */
.barra .ico-btn:first-child{margin-left:-10px}
.barra .ico-btn:last-child{margin-right:-10px}
.marca{display:flex;flex-direction:column;gap:1px}
.marca-nom{
  font-size:1.125rem;font-weight:800;letter-spacing:-.05em;line-height:1;
  display:inline-flex;align-items:center;gap:6px;
}
/* los íconos de la cabecera viven en el bloque de botones, más abajo */
/* El punto al lado del wordmark es el astro del que habla la pantalla: de día
   el disco del sol, de noche la luna con su limbo iluminado a la izquierda,
   que es como se la ve desde acá (V2-CONTRATO.md §3bis). El recorte lo hace
   una sombra interior corrida, así que no entra ningún dibujo nuevo. */
.marca-nom::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--sol-vivo);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sol-vivo) 22%,transparent);
}
html[data-modo=luna] .marca-nom::before{
  background:var(--sombra);
  box-shadow:inset -3px 0 0 0 var(--papel),
             0 0 0 3px color-mix(in srgb,var(--sombra) 20%,transparent);
}
.marca-sub{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.59375rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-45);
}
.barra-der{display:flex;align-items:center;gap:10px}
.chip-prec{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--filete-btn);background:transparent;border-radius:999px;
  padding:5px 9px 5px 5px;cursor:pointer;min-height:32px;
  transition:border-color .18s,background .18s;
}
.chip-prec:hover,.chip-prec[aria-expanded=true]{border-color:var(--tinta-45);background:var(--tinta-09)}
/* Desde el 23/9/2026 acá va una PALABRA y no una letra (marca/SISTEMA.md
   §10bis): "medida" o "estimada". El círculo de 20 px dejó de servir, así que
   es una píldora, que es la forma que §6 permite para una palabra sola. */
.chip-letra{
  min-height:20px;padding:2px 9px;border-radius:999px;display:inline-grid;place-items:center;
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--papel);background:var(--tinta);white-space:nowrap;
}
#chip-prec[data-p="estimada"] .chip-letra{background:transparent;color:var(--tinta-70);box-shadow:inset 0 0 0 1px var(--tinta-45)}
.chip-txt{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.59375rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-45);
}
/* el detalle vive dentro de la hoja "más", debajo de su fila */
.prec-detalle{
  padding:2px 2px 14px;
  font-size:0.84375rem;line-height:1.45;color:var(--tinta-70);
  border-bottom:1px solid var(--tinta-09);
}
.prec-detalle p{margin:0}
/* el link de "Calificá SOL": terciario, con su área de toque */
.mas-calificar-ir{display:inline-block;margin-top:4px;padding-left:0}
.prec-nota{margin-top:7px !important;padding-top:7px;border-top:1px solid var(--tinta-09);color:var(--tinta)}

/* ---------- estados ---------- */
.estado{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:20px 0;
}
.estado-txt{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.03em}
.estado-sub{margin:0;max-width:30ch;font-size:0.90625rem;color:var(--tinta-45);line-height:1.45}
.estado .btn{margin-top:8px}
.estado-acc{display:flex;flex-direction:column;align-items:center;gap:2px}
.estado-ico{
  width:34px;height:34px;border-radius:50%;margin-bottom:2px;
  background:
    linear-gradient(var(--tinta-45),var(--tinta-45)) 50% 8px/2.6px 12px no-repeat,
    linear-gradient(var(--tinta-45),var(--tinta-45)) 50% 23px/2.6px 2.6px no-repeat,
    var(--papel-3);
}
.pulso{display:flex;gap:7px;margin-bottom:4px}
.pulso i{
  width:9px;height:9px;border-radius:50%;background:var(--sol-vivo);
  animation:latir 1.25s ease-in-out infinite;
}
.pulso i:nth-child(2){animation-delay:.16s;background:var(--sol-alto)}
.pulso i:nth-child(3){animation-delay:.32s;background:var(--sombra)}
@keyframes latir{0%,100%{transform:translateY(0);opacity:.35}45%{transform:translateY(-7px);opacity:1}}
@media (prefers-reduced-motion:reduce){.pulso i{animation:none;opacity:.8}}

/* ---------- elegir zona ---------- */
.estado-zonas{
  justify-content:flex-start;align-items:stretch;text-align:left;
  gap:0;padding:0;min-height:0;
}
.zonas-cab{flex:0 0 auto;padding:22px 0 14px}
.zonas-tit{
  margin:0 0 6px;font-size:clamp(1.75rem,8vw,2.5rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.02;
}
.estado-zonas .estado-sub{max-width:36ch;text-align:left}
.zonas-grilla{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:9px;align-content:start;padding:2px 0 4px;
  -webkit-overflow-scrolling:touch;
}
.zona{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  min-height:70px;padding:12px 14px;text-align:left;cursor:pointer;
  border:1px solid var(--filete-btn);border-radius:var(--r);
  background:var(--papel-2);
  transition:border-color .16s,transform .14s,background .16s;
}
.zona:hover{border-color:var(--tinta-45)}
.zona:active{transform:scale(.985)}
.zona-nom{font-size:1rem;font-weight:650;letter-spacing:-.025em;line-height:1.15}
.zona-n{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-45);font-variant-numeric:tabular-nums;
}
.zona[aria-pressed=true]{
  border-color:transparent;background:var(--tinta);
}
.zona[aria-pressed=true] .zona-nom{color:var(--papel)}
.zona[aria-pressed=true] .zona-n{color:color-mix(in srgb,var(--papel) 66%,transparent)}
.zona-todas{background:transparent;border-style:dashed}
.zonas-pie{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 0 calc(env(safe-area-inset-bottom) + 6px);
  border-top:1px solid var(--tinta-09);
}

/* chip de zona en la respuesta */
.resp-linea{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.resp-linea .eyebrow{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-zona{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
  border:1px solid var(--filete-btn);background:transparent;border-radius:999px;
  padding:5px 8px 5px 11px;cursor:pointer;min-height:30px;max-width:52vw;
  transition:border-color .18s,background .18s;
}
.chip-zona:hover{border-color:var(--tinta-45);background:var(--tinta-09)}
/* con filtro puesto el chip se ve encendido: comunica que la lista está acotada */
.chip-zona[data-filtro=si]{border-color:var(--tinta-45);background:var(--tinta-09)}
.chip-zona[data-filtro=si] .chip-zona-nom{color:var(--tinta)}
.chip-zona-nom{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chip-zona-v{width:13px;height:13px;flex:0 0 auto;color:var(--tinta-45)}

/* ---------- respuesta: el nombre, el dato y el mapa ----------
   Rediseño del 16/9/2026. Pablo: "el mapa está muy chiquito, no se entiende
   como mapa; priorizar la info y el mapa". Así que arriba van tres cosas
   (nombre, ubicación, el dato en un renglón), después el mapa a todo el ancho
   y como mínimo el 45% del alto de la pantalla, y abajo el botón. Todo lo
   demás está en el panel "Más de esta plaza". */
/* `flex:1 0 auto` y no `1 1 0` (13/10/2026): con el cielo tapado la frase
   suma dos o tres renglones, y una respuesta que no podía crecer más que la
   pantalla dejaba Guardar, Compartir y la pregunta ABAJO del panel y de la
   botonera, sin scroll para llegar (la capa medía lo mismo que su contenido
   visible). Ahora crece con lo que tiene adentro y la capa scrollea; el
   padding de abajo cubre el panel cerrado, y el de .pantalla, la botonera. */
.respuesta{
  flex:1 0 auto;display:flex;flex-direction:column;min-height:0;
  padding-bottom:calc(var(--panel-cerrado) + 6px);
  animation:entrar-pantalla var(--t-pantalla) var(--e-salida) both;
}
@keyframes entrar-pantalla{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.respuesta{animation:none}}

.resp-cabeza{padding-top:8px;flex:0 0 auto}
.eyebrow{
  margin:0 0 6px;font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sol-txt);
}
.resp-cabeza .eyebrow{margin:6px 0 0}
.lugar{margin:0;display:flex;flex-direction:column;gap:3px}
.lugar-nom{
  font-size:clamp(1.5rem,6.6vw,2rem);font-weight:800;letter-spacing:-.045em;line-height:1.04;
}
.lugar-meta{
  font-size:0.75rem;font-weight:500;letter-spacing:.04em;color:var(--tinta-45);
  font-variant-numeric:tabular-nums;
}

/* EL DATO. Una línea, grande, y nada arriba ni abajo compitiendo con ella. */
.frase{
  flex:0 0 auto;
  margin:10px 0 11px;
  font-size:clamp(1.125rem,5.1vw,1.375rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.22;max-width:26ch;
  animation:entrar-frase .38s var(--e-salida) both;
}
.frase b{font-weight:750}
.frase[data-e=sol] b{color:var(--sol-txt)}
.frase[data-e=sombra] b{color:var(--sombra)}
.frase[data-e=medio] b{color:var(--medio-txt)}
@keyframes entrar-frase{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.frase{animation:none}}

/* EL CIELO MANDA (12/10/2026). Con el cielo tapado el titular es el cielo
   ("Tapado. Ahora no hay sol en ninguna plaza.") y la geometría pasa a esta
   segunda línea como condicional ("Si se abre, el sol pega del lado de Campo
   hasta las 17:45."). El color es el gris cálido del sol apagado (#8A7F72,
   §9), bajado para texto: la nube no es sombra (azul) ni sol (naranja). */
/* "Tapado." es la palabra que manda: va en tinta, con el mismo peso, y el
   gris cálido queda para la segunda línea (13/10/2026). Antes era la palabra
   más apagada de la frase. */
.frase[data-e=nube] b,.dest-frase[data-e=nube] b,.plan-frase[data-e=nube] b{color:var(--tinta)}
.cielo-linea{
  margin:-4px 0 12px;
  font-size:0.9375rem;font-weight:550;letter-spacing:-.012em;line-height:1.3;
  color:var(--tinta-70);max-width:36ch;
}
.cielo-linea[data-e=nube]{color:var(--nube-txt)}
/* de dónde sale el cielo de ahora: satélite o pronóstico, con la hora. Chica
   y en el gris de los datos de apoyo: es el margen del dato, no el dato. */
.cielo-fuente{
  margin:-6px 0 11px;
  font-size:0.75rem;font-weight:500;letter-spacing:.005em;line-height:1.3;
  color:var(--tinta-45);font-variant-numeric:tabular-nums;
}
/* con renglones de cielo, el mapa cede alto para que la fila de acciones y la
   pregunta queden a la vista sin tener que scrollear (A1, 13/10/2026) */
.respuesta[data-cielo=si] .mapa-caja{min-height:34dvh}
.dest-cielo{display:block;margin-top:6px;font-size:0.875rem;font-weight:550;line-height:1.3;color:var(--nube-txt)}
.dest-frase[data-e=medio] .dest-cielo{color:var(--tinta-70)}
.pastilla[data-e=nube]{color:var(--nube-txt);background:var(--past-nube);border-color:var(--past-nube-borde)}
.pastilla .past-chico{font-size:.6875rem;font-weight:550;opacity:.8;margin-left:1px;white-space:nowrap}
/* en la fila la columna derecha no pasa de la mitad: la hora chica baja a un
   segundo renglón adentro de la pastilla antes que pisar el nombre */
.it-der .pastilla:has(.past-chico){display:inline-grid;grid-template-columns:auto auto;align-items:center;justify-content:end;column-gap:5px;row-gap:0;border-radius:14px;min-width:max-content;white-space:nowrap}
.it-der .pastilla .past-chico{grid-column:1 / -1;text-align:right;margin-left:0}
.grande-sub[data-e=nube]{color:var(--nube-txt)}
.mio[data-e=nube] b{color:var(--nube-txt)}
/* el sol velado: está y alumbra, pero sin latido; el tapado ya es el apagado */
.astro-sol[data-e=velado] .astro-halo,
.astro-sol[data-e=velado] .astro-nucleo{animation:none;opacity:.45}
.astro-sol[data-e=velado] .astro-rayos{animation:none;opacity:.4}

/* ¿VA A LLOVER? (marca/SISTEMA.md §10 ter).
   Una línea sola, debajo del dato, y SOLO los días que hay algo que avisar:
   los demás días este renglón no existe y la pantalla queda como estaba.
   Va en el azul de la sombra y no en el naranja: el naranja es el sol y una
   lluvia en naranja competiría con el dato que manda. Sin caja, sin fondo y
   sin pastilla: es una frase, y una frase de más no tiene que parecer una
   alarma. La misma clase sirve en la pantalla de la plaza y en la tarjeta del
   inicio; lo único que cambia es el margen. */
.lluvia{
  display:flex;align-items:center;gap:7px;
  margin:0 0 12px;
  font-size:0.9375rem;font-weight:600;letter-spacing:-.012em;line-height:1.25;
  color:var(--sombra);max-width:32ch;
}
.lluvia .gota{flex:0 0 auto;width:15px;height:15px;fill:currentColor}

/* LA ESTACIÓN (marca/SISTEMA.md §10 quater).
   Mismo molde que la lluvia y por la misma razón: es una frase de más, no una
   alarma, y existe SOLO los días que la estación se pronuncia. Los días
   corrientes el renglón no está y la pantalla queda exactamente como estaba.
   El color es el de la tinta al 80%, no el naranja ni el azul: el naranja es
   la luz directa (§3, el acento no se reparte) y el azul ya es de la lluvia.
   Un día de calor y una tarde de lluvia pueden caer juntos, y dos frases del
   mismo color se leerían como una sola. */
.estacion{
  display:flex;align-items:center;gap:7px;
  margin:0 0 12px;
  font-size:0.9375rem;font-weight:600;letter-spacing:-.012em;line-height:1.25;
  color:var(--tinta-70);max-width:34ch;
}
.estacion .termo{flex:0 0 auto;width:15px;height:15px;fill:currentColor}

/* LAS VENTANAS (23/10/2026, 1.0.3). Mismo molde que la lluvia y la estación:
   una frase y nada más, sin caja, sin fondo, sin pastilla. El rótulo ("Hoy"
   o "Plan B") va en tinta y con peso, pegado a la frase: así se lee como un
   titulito de diario y no como una etiqueta. */
.ventanas{
  margin:0 0 12px;
  font-size:0.9375rem;font-weight:550;letter-spacing:-.012em;line-height:1.3;
  color:var(--tinta-70);max-width:36ch;font-variant-numeric:tabular-nums;
}
.ventanas-rot{font-weight:750;color:var(--tinta);margin-right:.2em}
.ventanas[data-e=sol] .ventanas-rot{color:var(--sol-txt)}
.ventanas[data-e=medio] .ventanas-rot{color:var(--medio-txt)}

/* ---------- mapa ----------
   45% del alto de la pantalla como piso, y el ancho entero. Es la pieza
   protagonista de la pantalla, no una miniatura al pie. */
.mapa-caja{
  margin:0;flex:1 1 auto;min-height:45dvh;
  display:flex;flex-direction:column;gap:6px;
}
.mapa-marco{position:relative;flex:1 1 auto;min-height:0;display:flex}
#mapa{
  flex:1;width:100%;min-height:0;display:block;
  border-radius:var(--r);
  background:var(--papel-2);
  border:1px solid var(--tinta-18);
  touch-action:manipulation;
}
/* La leyenda envuelve: de día son tres nombres y entran en un renglón, de
   noche son cinco (los cuatro de la escala más el gris de "no sabemos") y
   caen en dos. No es una regla de LUNA: es la misma fila, que acepta que el
   contenido sea más largo. */
.mapa-pie{
  display:flex;align-items:center;gap:6px 11px;flex-wrap:wrap;
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.59375rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-45);white-space:nowrap;
}
.leyenda{display:inline-flex;align-items:center;gap:5px}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.sw-sombra{background:var(--m0)}
.sw-medio{background:var(--m2)}
.sw-sol{background:var(--m5)}
/* los cuatro de la noche, los mismos colores que el mapa de la ciudad */
.sw-n0{background:var(--n0)}
.sw-n1{background:var(--n2)}
.sw-n2{background:var(--n3)}
.sw-n3{background:var(--n4)}
.sw-sin{background:var(--mc-sin)}
.mapa-esc{margin-left:auto}
/* con el cielo tapado: la leyenda va apagada como el mapa, "sol" pasa a
   "sol si se abre" y abajo va, a la vista, qué quiere decir el color */
.mapa-pie[data-cielo=tapado] .ley-sol .sw{filter:saturate(.3)}
/* con el cielo velado, la leyenda va apagada a medias, como el mapa */
.mapa-pie[data-cielo=velado] .ley-sol .sw{filter:saturate(.6)}
.mapa-nota-cielo{
  flex:1 0 100%;order:9;
  font-stretch:normal;text-transform:none;letter-spacing:0;white-space:normal;
  font-size:0.75rem;font-weight:550;line-height:1.3;color:var(--nube-txt);
}

/* ---------- línea de tiempo ---------- */
.tiempo{flex:0 0 auto;padding-top:12px}
.tiempo-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.tiempo-hora{
  font-size:0.8125rem;font-weight:600;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;color:var(--tinta-70);
}
.tiempo-ahora{
  border:0;background:transparent;padding:4px 0;cursor:pointer;
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.65625rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sol-txt);text-decoration:underline;text-underline-offset:3px;
}
.tiempo-pista{position:relative;height:56px}
#linea,#linea-grande{position:absolute;inset:0;width:100%;height:100%;border-radius:9px;display:block}
.rango{
  position:absolute;inset:-10px -6px;width:calc(100% + 12px);height:calc(100% + 20px);
  margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;
}
.rango::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:76px}
.rango::-moz-range-thumb{width:44px;height:76px;border:0;background:transparent}
.rango:focus-visible{opacity:.001}
.tiempo-pista:has(.rango:focus-visible){outline:2px solid var(--tinta);outline-offset:3px;border-radius:11px}
.tiempo-ejes{
  display:flex;justify-content:space-between;margin-top:5px;
  font-size:0.59375rem;font-weight:500;letter-spacing:.06em;color:var(--tinta-45);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   EL SISTEMA DE BOTONES  (marca/SISTEMA.md §8)
   Cinco tipos y cinco estados, todos acá y en ningún otro lado. Si un botón
   nuevo necesita un color o un alto que no está en este bloque, se agrega
   acá primero y después se usa. Nada de estilos sueltos pegados al lado del
   elemento: eso es lo que hacía que la app se viera genérica.

     .btn            primario     tinta sobre papel, 56 px, esquina 12
     .btn.secu       secundario   filete de tinta de 1 px, fondo transparente
     .acc-txt        terciario    texto subrayado, sin caja
     .chip           chip         filete de 1 px; activo: tinta llena e ícono
     .ico-btn        ícono        44 px, solo el dibujo

   Estados, los mismos en todos: presionado (escala .97 y opacidad .9 en
   120 ms), cargando (`data-estado=cargando`: rótulo atenuado y un punto que
   late), deshabilitado, y listo (`data-estado=listo`: una marca que entra y
   se va sola). El color de acento permitido, además de tinta y papel, es el
   naranja del sol para el dato, el azul de sombra y el marrón de "a medias":
   los tres de la leyenda del mapa, y solo como pastilla de estado.
   ============================================================ */
.acciones{flex:0 0 auto;padding-top:11px;display:flex;flex-direction:column;gap:2px}

/* ---- primario ---- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:10px 22px;border-radius:12px;border:1px solid var(--tinta);
  /* (mejora 24) con el texto del sistema grande el rótulo pasa a dos
     renglones: sin aire vertical tocaba el filete */
  text-align:center;
  background:var(--tinta);color:var(--papel);cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:650;letter-spacing:-.015em;
  transition:transform var(--t-toque) var(--e-salida),opacity var(--t-toque),
             background var(--t-medio),border-color var(--t-medio),color var(--t-medio);
}
.btn:active:not([disabled]){transform:scale(.97);opacity:.9}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.btn-chico{min-height:44px;padding:0 16px;font-size:0.90625rem;border-radius:10px}
/* .btn-sol quedó de la versión anterior (era el naranja con degradado) y hoy
   es el primario. Se deja la clase para no tocar el HTML de todas las hojas. */
.btn-sol{background:var(--tinta);border-color:var(--tinta);color:var(--papel);box-shadow:none}

/* ---- secundario: filete de tinta, fondo del papel de abajo ---- */
.btn.secu,.btn-fantasma{
  background:transparent;color:var(--tinta);border-color:var(--tinta);
}
@media (hover:hover){.btn.secu:hover,.btn-fantasma:hover{background:var(--tinta-09)}}

/* ---- terciario: texto subrayado ---- */
.acc-txt{
  border:0;background:transparent;cursor:pointer;padding:9px 4px;min-height:44px;
  font-family:inherit;font-size:0.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--tinta-70);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--tinta-18);
  transition:color var(--t-medio),text-decoration-color var(--t-medio),transform var(--t-toque) var(--e-salida),opacity var(--t-toque);
}
.acc-txt:hover{color:var(--tinta);text-decoration-color:var(--tinta-45)}
.acc-txt:active:not([disabled]){transform:scale(.97);opacity:.9}
.acc-txt[disabled]{opacity:.5;cursor:default;transform:none}
/* la variante en versalitas, para los pies de hoja */
.btn-min{
  border:0;background:transparent;cursor:pointer;padding:9px 2px;min-height:40px;
  font-family:inherit;font-stretch:var(--w-narrow);font-weight:600;font-size:0.6875rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-45);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--tinta-18);
  transition:color var(--t-medio),text-decoration-color var(--t-medio),transform var(--t-toque) var(--e-salida),opacity var(--t-toque);
}
.btn-min:hover{color:var(--tinta);text-decoration-color:var(--tinta-45)}
.btn-min:active:not([disabled]){transform:scale(.97);opacity:.9}
.btn-min[disabled]{opacity:.5;cursor:default;transform:none}
.btn-reporte{color:var(--tinta-70)}

/* ---- chip: filete de 1 px; encendido, tinta llena, con su ícono ---- */
.chip{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  min-height:38px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--filete-btn);background:transparent;color:var(--tinta-70);
  cursor:pointer;white-space:nowrap;
  font-family:inherit;font-size:0.84375rem;font-weight:600;letter-spacing:-.01em;
  transition:border-color var(--t-medio),background var(--t-medio),color var(--t-medio),
             transform var(--t-toque) var(--e-salida),opacity var(--t-toque);
}
.chip:hover{border-color:var(--tinta-45);color:var(--tinta)}
.chip:active:not([disabled]){transform:scale(.97);opacity:.9}
.chip[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.chip .int-ico{width:15px;height:15px;color:currentColor}
.chip[disabled]{opacity:.5;cursor:default;transform:none}

/* ---- ícono ---- */
.ico-btn{
  width:44px;height:44px;display:grid;place-items:center;
  border:0;background:transparent;border-radius:10px;cursor:pointer;color:var(--tinta);
  transition:background var(--t-medio),transform var(--t-toque) var(--e-salida),opacity var(--t-toque);
}
@media (hover:hover){.ico-btn:hover{background:var(--tinta-09)}}
.ico-btn:active:not([disabled]){transform:scale(.97);opacity:.9}
.ico-btn svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}

/* ---- estado CARGANDO: el rótulo se apaga y late un punto al lado ----
   Es el estado que se colgaba: cualquier botón que entra acá tiene que salir,
   y de eso se ocupa `ocupado()` en app.js, que siempre lo devuelve a su
   rótulo original aunque la promesa de abajo explote o no vuelva nunca.

   Bug del 16/9/2026 (botón "Activar avisos" gris y sin texto, visto en el
   iPhone de Pablo): la regla vieja decía
   `color:color-mix(in srgb,currentColor 55%,transparent)`. Adentro de la
   propia declaración de `color` de un elemento, `currentColor` NO puede
   referirse al valor que esa misma regla está fijando (no hay forma de que
   una propiedad se lea a sí misma): CSS lo resuelve contra el `color`
   HEREDADO del padre. El padre de estos botones es texto tinta (oscuro), así
   que el rótulo quedaba tinta al 55% sobre un fondo `.btn` que también es
   tinta: texto oscuro sobre fondo oscuro, invisible. Se ve mezclado con el
   `[disabled]` de abajo (opacity:.5 en todo el botón), pero esa opacidad no
   era la causa real: aunque se saque, el texto seguía sin poder leerse.
   La solución es nombrar el color base de cada tipo en vez de `currentColor`:
   cada uno mezclado con transparente al 55%, y el fondo y el borde quedan a
   opacidad completa (mientras carga, lo único atenuado es el texto). */
.btn[data-estado=cargando]{
  color:color-mix(in srgb,var(--papel) var(--mezcla-cargando),transparent);
  pointer-events:none;
}
.acc-txt[data-estado=cargando]{
  color:color-mix(in srgb,var(--tinta-70) var(--mezcla-cargando),transparent);
  pointer-events:none;
}
/* el terciario en versalitas partía de `--tinta-45`, que ni al 100% llega a
   4,5:1 (da 5,0 justo, y atenuado nunca): mientras carga arranca de
   `--tinta-70`, que atenuado al 78% queda en 5,1:1 (mejora 25) */
.btn-min[data-estado=cargando]{
  color:color-mix(in srgb,var(--tinta-70) var(--mezcla-cargando),transparent);
  pointer-events:none;
}
.btn[disabled][data-estado=cargando],
.acc-txt[disabled][data-estado=cargando],
.btn-min[disabled][data-estado=cargando]{opacity:1}
.btn[data-estado=cargando]::after,
.acc-txt[data-estado=cargando]::after,
.btn-min[data-estado=cargando]::after{
  content:"";display:inline-block;margin-left:9px;
  width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:latir-punto 1s ease-in-out infinite;
}
@keyframes latir-punto{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

/* ---- estado LISTO: la marca se DIBUJA y se va ----
   Antes era un tilde de bordes que aparecía de golpe. Ahora es un trazo SVG
   que se dibuja en 300 ms con `stroke-dashoffset` (marca/SISTEMA.md §9): el
   botón no dice "listo", lo hace. El elemento lo pone `ocupado()` en app.js y
   lo saca solo a los 1,4 s, junto con el estado. */
.btn-marca{display:inline-flex;align-items:center;margin-left:9px;flex:0 0 auto}
.btn-marca svg{
  width:17px;height:17px;display:block;
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.btn-marca path{stroke-dasharray:26;stroke-dashoffset:26;animation:trazar-marca .3s var(--e-capa) forwards}
@keyframes trazar-marca{to{stroke-dashoffset:0}}
/* el rótulo se corre apenas para hacerle lugar a la marca, sin saltar */
.btn[data-estado=listo],.acc-txt[data-estado=listo],.btn-min[data-estado=listo]{pointer-events:none}

/* ---- pastilla de estado: la única superficie que lleva color ----
   Naranja para "sol hasta", azul para "en sombra", marrón para "a medias".
   Son los tres colores de la leyenda del mapa y significan lo mismo acá. */
.pastilla{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  font-size:0.75rem;font-weight:650;letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;
  border:1px solid transparent;
}
.pastilla::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pastilla[data-e=sol]{color:var(--sol-txt);background:var(--past-sol);border-color:var(--past-sol-borde)}
.pastilla[data-e=medio]{color:var(--medio-txt);background:var(--past-medio);border-color:var(--past-medio-borde)}
.pastilla[data-e=sombra]{color:var(--sombra);background:var(--past-sombra);border-color:var(--past-sombra-borde)}
.pastilla[data-e=vacio]{color:var(--tinta-45);background:var(--tinta-09);border-color:transparent}
.pastilla[data-e=vacio]::before{display:none}
/* El cuarto estado no es un color más: es la ausencia de color. "sin dato" de
   día y "sin alumbrado" de noche dicen NO SABEMOS, y eso va en gris. El azul
   de sombra dice "medimos y está en sombra" (de noche, "medimos y está
   oscuro"), que es un dato distinto (V2-CONTRATO.md §3bis). */
.pastilla[data-e=nada]{color:var(--tinta-45);background:var(--tinta-09);border-color:transparent}

@media (prefers-reduced-motion:reduce){
  .btn,.acc-txt,.btn-min,.chip,.ico-btn{transition:none}
  .btn[data-estado=cargando]::after,.acc-txt[data-estado=cargando]::after,.btn-min[data-estado=cargando]::after{animation:none;opacity:.7}
  .btn-marca path{animation:none;stroke-dashoffset:0}
}

.ico{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.acciones-min{display:flex;align-items:center;justify-content:center;gap:26px}

/* tirador hacia la lista */
.tirador{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 2px);
  border:0;background:transparent;padding:8px 26px;cursor:pointer;
}
.tirador span{
  display:block;width:38px;height:3.5px;border-radius:99px;background:var(--tinta-18);
  animation:respirar 2.6s ease-in-out infinite;
}
@keyframes respirar{0%,100%{opacity:.5;transform:scaleX(.8)}50%{opacity:1;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.tirador span{animation:none}}

/* ---------- pantalla lista ---------- */
.pantalla-lista{background:var(--papel-2);gap:0}
.lista-cab{padding:10px 0 14px;border-bottom:1px solid var(--tinta-18);flex:0 0 auto}
.lista-cab h2{margin:0 0 12px;font-size:clamp(1.375rem,5.6vw,1.625rem);font-weight:800;letter-spacing:-.04em}
.lista-sub{margin:9px 0 0;font-size:0.8125rem;color:var(--tinta-45)}
.lista-acc{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.btn-zona{color:var(--tinta-70)}
.btn-ubic{color:var(--tinta)}
.lista-vacio{margin:26px 0 0;font-size:0.90625rem;line-height:1.45;color:var(--tinta-45);max-width:38ch}

/* ---------- buscador ---------- */
.buscador{
  display:flex;align-items:center;gap:9px;
  border:1px solid var(--filete-btn);border-radius:12px;background:var(--papel);
  padding:0 10px;min-height:48px;
  transition:border-color .18s;
}
/* el foco lo marca el filete de tinta. WebKit de iOS dibuja además su propio
   anillo naranja alrededor del campo, y el naranja es solo de la cifra y de
   las celdas de sol (marca/SISTEMA.md §3). */
.buscador:focus-within{border-color:var(--tinta)}
.buscador-campo:focus,.buscador-campo:focus-visible{outline:none}
.buscador-ico{
  width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--tinta-45);stroke-width:1.6;
  stroke-linecap:round;
}
.buscador-campo{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:1rem;font-weight:500;color:var(--tinta);
  padding:12px 0;-webkit-appearance:none;appearance:none;
}
.buscador-campo::placeholder{color:var(--tinta-45)}
.buscador-campo::-webkit-search-cancel-button{display:none}
.buscador-x{
  width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;border-radius:2px;
}
.buscador-x svg{width:17px;height:17px;fill:none;stroke:var(--tinta-45);stroke-width:1.8;stroke-linecap:round}
.lista{list-style:none;margin:0;padding:0;flex:1}
/* Las 661 filas están todas en el documento, y hasta el 24/9/2026 el navegador
   les calculaba el estilo a las 661 cada vez que cambiaba algo de arriba: el
   cambio de SOL a LUNA costaba 220 ms de pantalla congelada solo en eso, y la
   transición de color empezaba cuando ya nadie la miraba.

   `content-visibility:auto` le dice al navegador que a la fila que no está a
   la vista no le calcule estilo, ni maquetación, ni la pinte. El alto que
   reserva mientras tanto es `contain-intrinsic-size`, con `auto` adelante para
   que se quede con el alto REAL de cada fila una vez que la mostró: así la
   barra de desplazamiento no salta al pasar.

   Donde el navegador no lo entiende (iPhone anterior al 18) la regla se
   ignora y todo funciona como antes, solo que más lento. */
.lista > li{content-visibility:auto;contain-intrinsic-size:auto 72px}
.item{
  /* fit-content(50%): la columna de la pastilla no pasa de la mitad de la
     fila. Antes el tope era un `max-width:50%` en .it-der, que adentro de una
     pista `auto` se resolvía contra la pista misma y partía "sol hasta 18:15"
     en tres renglones (12/10/2026). */
  width:100%;display:grid;grid-template-columns:1fr fit-content(50%);gap:3px 12px;align-items:center;
  padding:14px 2px;border:0;border-bottom:1px solid var(--tinta-09);
  background:transparent;text-align:left;cursor:pointer;min-height:66px;
  transition:background var(--t-medio),padding-left var(--t-medio),transform var(--t-toque) var(--e-salida),opacity var(--t-toque);
}
@media (hover:hover){.item:hover{background:var(--tinta-09);padding-left:8px}}
.item:active{transform:scale(.99);opacity:.9}
.item[aria-current=true]{padding-left:10px;box-shadow:inset 3px 0 0 var(--sol)}
.it-nom{font-size:1.0625rem;font-weight:600;letter-spacing:-.025em;line-height:1.18}
.it-sub{
  grid-column:1;font-size:0.75rem;font-weight:500;letter-spacing:.01em;
  color:var(--tinta-45);font-variant-numeric:tabular-nums;
}
.it-der{
  grid-column:2;grid-row:1 / span 2;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;
  /* (mejora 24) con el texto del sistema grande la pastilla "sol hasta 18:30"
     se comía la mitad del ancho y el nombre de la plaza bajaba a cuatro
     renglones. La columna derecha no pasa de la mitad: la pastilla se parte
     en dos renglones antes que dejar el nombre en una tira. */
  min-width:0;
}
/* y la pastilla acepta partirse ahí adentro; suelta, sigue en un renglón */
.it-der .pastilla{white-space:normal;text-align:right}
.pie{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--tinta-09);
  font-size:0.75rem;line-height:1.5;color:var(--tinta-45);max-width:44ch;flex:0 0 auto;
}
.pie span{display:block;font-size:0.625rem;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;margin-top:4px}
.pie br{display:none}
.pie a{
  display:inline-block;margin-top:9px;
  color:var(--tinta-70);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--tinta-18);transition:color .18s,text-decoration-color .18s;
}
.pie a:hover{color:var(--tinta);text-decoration-color:var(--tinta-45)}

/* ---------- sheet: contar qué pasa ---------- */
.sheet-decir,.sheet-zonas{
  max-height:min(90dvh,780px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.sheet-decir .sheet-tira,.sheet-zonas .sheet-tira{position:sticky;top:0;z-index:1}
.sheet-invita{
  margin:0 0 16px;font-size:0.875rem;line-height:1.45;color:var(--tinta-70);
  padding:11px 13px;border-radius:var(--r);
  background:var(--papel-2);border:1px solid var(--tinta-09);
}
.sheet-invita b{font-weight:650;color:var(--tinta)}
.form-decir{display:flex;flex-direction:column;gap:12px}
.campo{display:flex;flex-direction:column;gap:5px;position:relative;min-width:0}
.campo-tit{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-45);
}
.form-decir textarea,
.form-decir input,
.form-decir select{
  font:inherit;font-size:1rem;color:var(--tinta);
  background:var(--papel-2);
  border:1px solid var(--filete-btn);border-radius:var(--r);
  padding:11px 13px;width:100%;min-width:0;
  transition:border-color .16s,background .16s;
  -webkit-appearance:none;appearance:none;
}
.form-decir textarea{
  min-height:104px;resize:vertical;line-height:1.42;padding-bottom:26px;
}
.form-decir select{
  padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.form-decir textarea:focus,
.form-decir input:focus,
.form-decir select:focus{outline:none;border-color:var(--tinta);background:var(--papel)}
.form-decir textarea::placeholder,.form-decir input::placeholder{color:var(--tinta-45)}
.campo-cont{
  position:absolute;right:11px;bottom:9px;pointer-events:none;
  font-size:0.625rem;font-weight:500;letter-spacing:.04em;
  color:var(--tinta-45);font-variant-numeric:tabular-nums;
}
.campo-cont[data-tope=si]{color:var(--sol-txt)}
.campo-nota{font-size:0.75rem;line-height:1.35;color:var(--tinta-45)}
.campo-fila{display:flex;gap:10px}
.campo-fila .campo{flex:1 1 0}
.campo-mas{
  border:1px solid var(--tinta-09);border-radius:var(--r);
  background:transparent;
}
.campo-mas > summary{
  list-style:none;cursor:pointer;padding:12px 13px;min-height:46px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:0.84375rem;color:var(--tinta-70);
}
.campo-mas > summary::-webkit-details-marker{display:none}
.campo-mas > summary::after{
  content:"";margin-left:auto;width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid var(--tinta-45);border-bottom:2px solid var(--tinta-45);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
.campo-mas[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.campo-mas[open] > summary{border-bottom:1px solid var(--tinta-09)}
.op-tag{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.59375rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-45);border:1px solid var(--tinta-18);border-radius:999px;padding:2px 7px;
}
.campo-mas .campo-cuerpo{display:flex;flex-direction:column;gap:12px;padding:13px}
.sheet-rapido{margin-top:20px;padding-top:15px;border-top:1px solid var(--tinta-09)}
.sheet-rapido-tit{
  margin:0 0 10px;font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-45);
}
.sheet-zonas .zonas-grilla{max-height:min(62dvh,520px);margin-bottom:4px}

/* ---------- sheet de reporte ---------- */
.velo{
  position:fixed;inset:0;z-index:70;background:rgba(10,8,6,.5);
  backdrop-filter:blur(3px);animation:aparecer .2s ease both;
}
.velo.yendose{animation:desaparecer .2s ease both}
.sheet{
  position:fixed;z-index:71;left:0;right:0;bottom:0;
  background:var(--papel);border-radius:22px 22px 0 0;
  padding:10px var(--gutter) calc(env(safe-area-inset-bottom) + 20px);
  /* El segundo `box-shadow` es el faldón: con el resorte la hoja se pasa un
     cachito de su lugar y abajo quedaría una franja de velo a la vista. Es
     una sombra sólida de papel, 70 px hacia abajo, quieta: no se anima nunca
     y viaja pegada al transform de la hoja. Va como sombra y no como
     `::after` porque las hojas largas son su propio contenedor de scroll y
     ahí un absoluto a `top:100%` cae al final del contenido, no del borde. */
  box-shadow:0 -18px 44px -18px rgba(0,0,0,.5),0 70px 0 0 var(--papel);
  /* entra con resorte suave: sube de más y se acomoda (marca/SISTEMA.md §9) */
  animation:subir-resorte var(--t-hoja) var(--e-resorte) both;
  max-width:520px;margin:0 auto;
}
.sheet.yendose{animation:bajar-hoja .2s var(--e-capa) both}
/* arrastrando el tirador la hoja sigue al dedo, sin transición */
.sheet.arrastrando{animation:none;transition:none}
.sheet-tira{width:40px;height:4px;border-radius:99px;background:var(--tinta-18);margin:0 auto 14px}
.sheet h2{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.04em}
.sheet-sub{margin:5px 0 16px;font-size:0.875rem;color:var(--tinta-45);line-height:1.4}
.sheet-ops{display:flex;flex-direction:column;gap:10px}
.op{
  display:flex;align-items:center;gap:13px;width:100%;min-height:66px;
  padding:12px 16px;border-radius:var(--r);border:1px solid var(--filete-btn);
  background:var(--papel-2);cursor:pointer;text-align:left;
  transition:border-color .16s,transform .14s;
}
.op:hover{border-color:var(--tinta-45)}
.op:active{transform:scale(.985)}
.op-ico{width:30px;height:30px;border-radius:9px;flex:0 0 auto}
.op-ico-sol{background:linear-gradient(135deg,var(--sol-alto),var(--sol))}
.op-ico-sombra{background:linear-gradient(135deg,var(--m1),var(--m0))}
.op-txt{display:flex;flex-direction:column;gap:1px}
.op-txt b{font-size:1rem;font-weight:650;letter-spacing:-.02em}
.op-txt small{font-size:0.8125rem;color:var(--tinta-45)}
.sheet-cerrar{display:block;margin:14px auto 0}
@keyframes subir{from{transform:translateY(100%)}to{transform:none}}
@keyframes subir-resorte{from{transform:translateY(100%)}to{transform:none}}
@keyframes bajar-hoja{from{transform:none}to{transform:translateY(100%)}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes desaparecer{from{opacity:1}to{opacity:0}}
/* La franja de arriba de cada hoja es el tirador: se arrastra hacia abajo y la
   hoja se va. Es una capa transparente encima de la tira, para que el área
   agarrable sea de 38 px de alto y todo el ancho, y no los 40 × 4 del dibujo.
   `touch-action:none` es lo que deja que el dedo arrastre en vez de scrollear
   la hoja; por eso vive en un elemento propio y no en `.sheet`. */
.sheet-agarre{
  position:sticky;top:0;z-index:2;
  display:block;height:38px;margin-bottom:-38px;
  touch-action:none;cursor:grab;background:transparent;
}
.sheet-agarre:active{cursor:grabbing}
@media (prefers-reduced-motion:reduce){.sheet,.velo,.prec-detalle{animation:none}}

/* ---------- mi plaza: chip, línea propia, marcador ---------- */
.resp-chips{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-width:0}
.chip-mia{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--filete-btn);background:transparent;border-radius:999px;
  padding:5px 10px 5px 8px;cursor:pointer;min-height:30px;
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-70);white-space:nowrap;
  transition:border-color .18s,background .18s,color .18s;
}
.chip-mia:hover{border-color:var(--tinta-45);background:var(--tinta-09)}
.chip-mia-ico{width:14px;height:14px;flex:0 0 auto;fill:none;color:var(--tinta-45);transition:color .18s,fill .18s}
.chip-mia[aria-pressed=true]{border-color:transparent;background:var(--tinta);color:var(--papel)}
.chip-mia[aria-pressed=true] .chip-mia-ico{color:var(--sol-alto);fill:var(--sol-alto)}
.chip-mia[data-principal=si] .chip-mia-ico{color:var(--sol-alto);fill:var(--sol-alto)}
/* la estrella late al guardar: una sola vez, cortita */
@keyframes guardar-latido{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.chip-mia.latido{animation:guardar-latido .38s cubic-bezier(.2,.8,.25,1)}
@media (prefers-reduced-motion:reduce){.chip-mia.latido{animation:none}}

.mio{
  margin:8px 0 0;padding:0;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;text-align:left;
  font-size:0.84375rem;color:var(--tinta-70);line-height:1.35;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tinta-18);
  transition:color .18s,text-decoration-color .18s;
}
.mio:hover{color:var(--tinta);text-decoration-color:var(--tinta-45)}
.mio::before{
  content:"";flex:0 0 auto;width:12px;height:12px;border-radius:50%;
  border:2.2px solid var(--tinta);box-shadow:inset 0 0 0 2px var(--papel);background:var(--sol-vivo);
}
.mio b{font-weight:650;color:var(--tinta)}
.sw-mio{border-radius:50%;border:2px solid var(--tinta);background:var(--sol-vivo);box-shadow:inset 0 0 0 1.5px var(--papel);width:11px;height:11px}
/* mientras se elige el sector tocando, el mapa lo dice encima */
.mapa-caja{position:relative}
.mapa-aviso{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:3;
  padding:7px 13px;border-radius:999px;background:var(--tinta);color:var(--papel);
  font-size:0.8125rem;font-weight:550;white-space:nowrap;pointer-events:none;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.5);animation:aparecer .2s ease both;
}
#mapa[data-eligiendo=si]{cursor:crosshair;outline:2px solid var(--sol);outline-offset:2px}
#mapa{cursor:zoom-in}
/* agrandar: un botón chico en la esquina del mapa; el mapa entero también abre */
.mapa-agrandar{
  position:absolute;top:8px;right:8px;z-index:2;
  width:34px;height:34px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--filete-btn);background:var(--papel);color:var(--tinta-70);
  display:grid;place-items:center;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.35);
  transition:border-color .16s,color .16s,transform .14s;
}
.mapa-agrandar:hover{border-color:var(--tinta-45);color:var(--tinta)}
.mapa-agrandar:active{transform:scale(.94)}
.mapa-agrandar svg{width:17px;height:17px}
#mapa[data-eligiendo=si] ~ .mapa-agrandar{display:none}

/* ---------- mapa en grande ---------- */
.grande{
  position:fixed;inset:0;z-index:74;
  background:var(--papel);color:var(--tinta);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  animation:aparecer .18s ease both;
}
/* con el mapa grande abierto nada de atrás puede scrollear */
html.con-grande,html.con-grande body{overflow:hidden;overscroll-behavior:none}
.grande-cab{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px var(--gutter) 9px;border-bottom:1px solid var(--tinta-18);
}
.grande-tit{min-width:0;display:flex;flex-direction:column;gap:3px}
.grande-nom{
  font-size:1.125rem;font-weight:800;letter-spacing:-.035em;line-height:1.08;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.grande-sub{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sol-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.grande-acc{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.grande-btn{
  width:40px;height:40px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--filete-btn);background:var(--papel-2);color:var(--tinta-70);
  display:grid;place-items:center;transition:border-color .16s,color .16s,opacity .16s,transform .14s;
}
.grande-btn svg{width:20px;height:20px}
.grande-btn:hover{border-color:var(--tinta-45);color:var(--tinta)}
.grande-btn:active{transform:scale(.94)}
.grande-btn:disabled{opacity:.3;cursor:default;transform:none}
.grande-cerrar{background:var(--tinta);color:var(--papel);border-color:transparent;margin-left:4px}
.grande-cerrar:hover{color:var(--papel)}
.grande-lienzo{flex:1 1 0;min-height:120px;position:relative;margin:10px var(--gutter) 0}
#mapa-grande{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  border-radius:var(--r);background:var(--papel-2);border:1px solid var(--tinta-09);
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
#mapa-grande.arrastrando{cursor:grabbing}
#mapa-grande[data-eligiendo=si]{cursor:crosshair;outline:2px solid var(--sol);outline-offset:2px}
.grande-pista{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  max-width:calc(100% - 24px);padding:7px 13px;border-radius:999px;
  background:var(--tinta);color:var(--papel);
  font-size:0.8125rem;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;box-shadow:0 8px 22px -10px rgba(0,0,0,.5);
  transition:opacity .35s;
}
.grande-pista[data-ver=no]{opacity:0}
.grande-pista[data-modo=elegir]{top:12px;bottom:auto;background:var(--acento-lleno);color:var(--sobre-acento)}
.grande-pie{
  flex:0 0 auto;display:flex;flex-direction:column;gap:2px;
  padding:8px var(--gutter) 10px;width:100%;max-width:820px;margin:0 auto;
}
.grande-pie .tiempo{padding-top:8px}
.grande-pie .tiempo-pista{height:50px}
@media (prefers-reduced-motion:reduce){.grande{animation:none}}
@media (min-width:900px) and (min-height:520px){
  .grande-cab{padding-left:clamp(18px,3vw,40px);padding-right:clamp(18px,3vw,40px)}
  .grande-lienzo{margin-left:clamp(18px,3vw,40px);margin-right:clamp(18px,3vw,40px)}
  .grande-nom{font-size:1.375rem}
  .grande-sub{font-size:0.6875rem}
  .grande-pie .tiempo-pista{height:60px}
}

.zonas-nota{margin:8px 0 0;font-size:0.75rem;line-height:1.4;color:var(--tinta-45);text-align:center;max-width:36ch}
.lista-nota{margin:2px 0 0;font-size:0.75rem;line-height:1.4;color:var(--tinta-45);max-width:44ch}
.it-estrella{
  display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;
  color:var(--sol-txt);fill:currentColor;
}
.it-mia .it-nom{color:var(--tinta)}

/* ---------- sheet: mi plaza ---------- */
.sheet-mia{max-height:min(92dvh,820px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet-mia .sheet-tira{position:sticky;top:0;z-index:1}
.sheet-mia .eyebrow{margin-bottom:4px}
.sheet-mia .sheet-sub{margin-bottom:14px;color:var(--tinta-70)}
.sheet-mia .sheet-sub b{font-weight:650;color:var(--tinta)}
.mia-bloque{
  padding:13px 13px 14px;border:1px solid var(--tinta-09);border-radius:var(--r);
  background:var(--papel-2);margin-top:10px;
  display:flex;flex-direction:column;gap:9px;
}
.mia-bloque .campo-tit{margin:0}
.mia-ayuda{margin:0;font-size:0.8125rem;line-height:1.4;color:var(--tinta-45)}
.sectores{display:flex;flex-wrap:wrap;gap:7px}
.sector{
  border:1px solid var(--filete-btn);background:var(--papel);border-radius:999px;
  padding:8px 13px;min-height:38px;cursor:pointer;
  font-size:0.875rem;font-weight:550;letter-spacing:-.01em;color:var(--tinta-70);
  transition:border-color .16s,background .16s,color .16s,transform .14s;
}
.sector:hover{border-color:var(--tinta-45)}
.sector:active{transform:scale(.97)}
.sector[aria-pressed=true]{background:var(--tinta);color:var(--papel);border-color:transparent}
.sector[data-sol=si]::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sol-alto);margin-left:7px;vertical-align:1px}
.mia-lugar{
  margin:0;font-size:0.9375rem;line-height:1.4;color:var(--tinta-70);display:block;
}
.mia-lugar b{font-weight:650;color:var(--tinta)}
/* la aclaración va en su propio renglón: al lado del nombre del lugar armaba
   dos columnas de distinto alto y se leía como dos datos sueltos */
.mia-lugar small{display:block;margin-top:3px;font-size:0.78125rem;line-height:1.35;color:var(--tinta-45)}
.mia-lugar[data-hay=si]::before{
  content:"";display:inline-block;vertical-align:-1px;margin-right:8px;
  width:11px;height:11px;border-radius:50%;
  border:2px solid var(--tinta);background:var(--sol-vivo);box-shadow:inset 0 0 0 1.5px var(--papel);
}
.mia-lugar-acc{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:2px}
.av-estado{display:flex;flex-direction:column;gap:10px}
.av-estado .btn{width:100%}
.av-explica-txt{margin:0;font-size:0.9375rem;line-height:1.4;color:var(--tinta)}
.av-explica-txt b{font-weight:700}
.av-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:0.875rem;color:var(--tinta-70)}
.av-select{
  font:inherit;font-size:0.875rem;font-weight:600;color:var(--tinta);
  background:var(--papel);border:1px solid var(--filete-btn);border-radius:999px;
  padding:6px 30px 6px 12px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.av-select:focus{outline:none;border-color:var(--tinta)}
.av-select-chico{padding:3px 24px 3px 9px;font-size:0.8125rem;margin:0 3px}
.av-check{display:flex;align-items:flex-start;gap:10px;font-size:0.875rem;line-height:1.45;color:var(--tinta);cursor:pointer}
.av-check input{
  flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--sol);cursor:pointer;
}
.av-previo{padding-top:4px;border-top:1px solid var(--tinta-09)}
.av-ok{
  margin:0;font-size:0.90625rem;line-height:1.4;color:var(--tinta);
  display:flex;align-items:flex-start;gap:8px;
}
.av-ok::before{
  content:"";flex:0 0 auto;margin-top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);
}
.av-ok b{font-weight:650}
.av-ok[data-estado=pendiente]::before{background:var(--sol-alto);box-shadow:0 0 0 3px color-mix(in srgb,var(--sol-alto) 25%,transparent)}
.av-acc{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.av-nodisp-txt{margin:0;font-size:0.90625rem;line-height:1.45;color:var(--tinta)}
.instala{
  display:flex;flex-direction:column;gap:6px;
  padding:11px 13px;border-radius:12px;background:var(--papel);border:1px solid var(--tinta-09);
  font-size:0.84375rem;line-height:1.45;color:var(--tinta-70);
}
.instala b{font-weight:650;color:var(--tinta)}
.instala p{margin:0}
.instala .ico-ios{width:17px;height:17px;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0 1px}
.mia-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.mia-pie .btn-min:only-child{margin-left:auto}

/* ---------- invitación a la pantalla de inicio ---------- */
.invita{
  position:fixed;z-index:65;left:12px;right:12px;
  bottom:calc(var(--tabs-total) + 12px);
  max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;
  padding:12px 14px 12px 12px;border-radius:18px;
  background:var(--papel);border:1px solid var(--tinta-18);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
  animation:subir .32s cubic-bezier(.2,.85,.25,1) both;
}
.invita-ico{width:44px;height:44px;border-radius:11px;display:block;grid-row:1 / span 2}
.invita-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.invita-tit{margin:0;font-size:0.96875rem;font-weight:700;letter-spacing:-.025em}
.invita-sub{margin:0;font-size:0.8125rem;color:var(--tinta-45);line-height:1.35}
.invita-txt .instala{margin-top:8px}
.invita-acc{grid-column:2;display:flex;align-items:center;gap:14px;margin-top:2px}
.btn-chico{min-height:38px;padding:0 16px;font-size:0.875rem}
@media (prefers-reduced-motion:reduce){.invita,.mapa-aviso{animation:none}}

/* ---------- tostada ---------- */
.tostada{
  position:fixed;z-index:80;left:50%;transform:translate(-50%,14px);
  bottom:calc(var(--tabs-total) + 22px);
  background:var(--tinta);color:var(--papel);
  padding:12px 18px;border-radius:999px;max-width:calc(100vw - 36px);
  font-size:0.875rem;font-weight:550;letter-spacing:-.01em;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
}
.tostada.ver{opacity:1;transform:translate(-50%,0)}

/* ---------- línea de confort y clima chico ---------- */
.confort{
  margin:7px 0 0;display:inline-flex;align-items:center;gap:7px;
  font-size:0.84375rem;color:var(--tinta-70);line-height:1.35;
}
.confort::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--sol-alto);box-shadow:0 0 0 3px color-mix(in srgb,var(--sol-alto) 22%,transparent);
}
.confort[data-tono=frio]::before{background:var(--sombra);box-shadow:0 0 0 3px color-mix(in srgb,var(--sombra) 22%,transparent)}
.confort[data-tono=cuidado]::before{background:var(--sol);box-shadow:0 0 0 3px color-mix(in srgb,var(--sol) 28%,transparent)}
.confort[data-tono=sombra]::before{background:var(--tinta-45);box-shadow:none}
.tiempo-hora-grupo{display:inline-flex;align-items:baseline;gap:9px;min-width:0}
.tiempo-clima{
  font-size:0.65625rem;font-weight:500;letter-spacing:.04em;color:var(--tinta-45);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- acceso al finde desde la respuesta ---------- */
.finde-acceso{
  display:flex;align-items:center;gap:11px;width:100%;min-height:46px;
  padding:7px 10px 7px 12px;border-radius:var(--r);cursor:pointer;text-align:left;
  border:1px solid var(--tinta-18);background:var(--papel-2);
  transition:border-color .16s,transform .14s;
}
.finde-acceso:hover{border-color:var(--tinta-45)}
.finde-acceso:active{transform:scale(.99)}
.finde-acceso-ico{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--sol-alto) 0 38%,transparent 40%),
    repeating-conic-gradient(from 0deg,var(--sol) 0 8deg,transparent 8deg 45deg);
}
.finde-acceso-txt{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px}
.finde-acceso-eye{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.59375rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sol-txt);
}
.finde-acceso-tit{
  font-size:0.875rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.finde-acceso-v{width:16px;height:16px;flex:0 0 auto;color:var(--tinta-45)}
@media (max-height:680px) and (max-width:899px){
  .finde-acceso{min-height:40px;padding:5px 10px 5px 12px}
  .finde-acceso-eye{display:none}
}
.zona-finde{border-color:color-mix(in srgb,var(--sol) 45%,transparent);background:color-mix(in srgb,var(--sol-alto) 12%,var(--papel-2))}
.zona-finde .zona-n{color:var(--sol-txt)}

/* ---------- el finde: la vista ---------- */
.finde{
  position:fixed;inset:0;z-index:74;
  background:var(--papel);color:var(--tinta);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 0;
  animation:aparecer .18s ease both;
}
html.con-finde,html.con-finde body{overflow:hidden;overscroll-behavior:none}
.finde-cab{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px var(--gutter) 9px;border-bottom:1px solid var(--tinta-18);
}
.finde-cab-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.finde-cab .eyebrow{margin:0}
.finde-fechas{
  font-size:0.9375rem;font-weight:700;letter-spacing:-.025em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.finde-cuerpo{
  flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:16px var(--gutter) calc(env(safe-area-inset-bottom) + 28px);
  display:flex;flex-direction:column;gap:18px;
}
.finde-estado{padding:40px 0 10px;flex:0 0 auto}
.finde-contenido{display:flex;flex-direction:column;gap:14px}
.finde-alerta{
  margin:0;padding:10px 13px;border-radius:12px;
  background:color-mix(in srgb,var(--sol-alto) 16%,var(--papel-2));border:1px solid color-mix(in srgb,var(--sol) 35%,transparent);
  font-size:0.84375rem;line-height:1.4;color:var(--tinta);
}
.finde-tit{
  margin:2px 0 0;font-size:clamp(1.625rem,7vw,2.25rem);font-weight:800;letter-spacing:-.045em;line-height:1.04;
}
/* ---------------- LOS DOS DÍAS (rehecho el 24/9/2026) ----------------
   Antes: dos columnas al 50% con un párrafo largo adentro de cada una. En un
   teléfono de 375 px eso son dos canaletas de siete caracteres de ancho y
   treinta renglones de alto, una al lado de la otra. Era ilegible.

   Ahora cada día ocupa el ancho entero y son tres renglones: el nombre con
   su punto de color y el horario del sol arriba, una frase corta de qué
   esperar, y abajo la mañana y la tarde como dos pastillas con su color.
   Lo que había que leer en un párrafo ahora se mira. */
.finde-dias{display:grid;grid-template-columns:1fr;gap:10px}
.finde-dia{
  padding:13px 14px 14px;border-radius:var(--r);border:1px solid var(--tinta-09);
  background:var(--papel-2);display:flex;flex-direction:column;gap:8px;min-width:0;
}
.finde-dia-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.finde-dia-nom{font-size:1.0625rem;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.finde-dia-nom::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--m5);flex:0 0 auto}
.finde-dia[data-reg=despejado] .finde-dia-nom::before{background:var(--m5)}
.finde-dia[data-reg=nubes] .finde-dia-nom::before{background:linear-gradient(135deg,var(--m5) 50%,var(--m1) 50%)}
.finde-dia[data-reg=velado] .finde-dia-nom::before{background:var(--m2)}
.finde-dia[data-reg=tapado] .finde-dia-nom::before{background:var(--m0)}
.finde-dia[data-reg=sin] .finde-dia-nom::before{background:var(--tinta-18)}
.finde-dia-sol{
  font-size:0.75rem;font-weight:600;letter-spacing:.02em;color:var(--tinta-45);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;
}
.finde-dia-txt{margin:0;font-size:0.9375rem;line-height:1.3;color:var(--tinta);font-weight:600;letter-spacing:-.015em}
/* la mañana y la tarde, una al lado de la otra y del mismo ancho */
.finde-tramos{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.finde-tramo{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 7px;min-width:0;
  padding:7px 10px 8px;border-radius:calc(var(--r) - 3px);
  background:var(--papel);border:1px solid var(--tinta-09);
}
.finde-tramo i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--tinta-18);grid-row:1/3}
.finde-tramo[data-reg=despejado] i{background:var(--m5)}
.finde-tramo[data-reg=nubes] i{background:linear-gradient(135deg,var(--m5) 50%,var(--m1) 50%)}
.finde-tramo[data-reg=velado] i{background:var(--m2)}
.finde-tramo[data-reg=tapado] i{background:var(--m0)}
.finde-tramo b{font-size:0.625rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-45);line-height:1.2}
.finde-tramo span{font-size:0.875rem;font-weight:600;letter-spacing:-.01em;color:var(--tinta);line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- LO DESTACADO, TOCABLE ----------------
   El resumen era un párrafo que nombraba dos plazas y no dejaba ir a
   ninguna. Ahora son dos filas que se tocan y abren la plaza. */
.finde-top{display:flex;flex-direction:column;gap:8px}
.finde-top:empty{display:none}
.finde-dest{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;
  width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:var(--r);border:1px solid var(--tinta-09);
  background:var(--papel-2);color:inherit;
  transition:background var(--t-toque) ease,transform var(--t-toque) var(--e-salida);
}
@media (hover:hover){.finde-dest:hover{background:var(--tinta-09)}}
.finde-dest:active{transform:scale(.99)}
.finde-dest-rot{grid-column:1/-1;font-size:0.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sol-txt)}
.finde-dest-nom{font-size:1rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;min-width:0}
.finde-dest-sub{grid-column:1;font-size:0.8125rem;color:var(--tinta-45)}
.finde-dest-dato{
  grid-row:2/4;grid-column:2;text-align:right;
  font-size:0.8125rem;font-weight:700;color:var(--sol-txt);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.finde-zonas{display:flex;flex-direction:column;gap:8px}
.finde-zona{
  border:1px solid var(--tinta-09);border-radius:var(--r);background:var(--papel-2);
}
.finde-zona[data-mia=si]{border-color:var(--tinta-18)}
.finde-zona > summary{
  list-style:none;cursor:pointer;padding:12px 13px;min-height:48px;
  display:flex;align-items:center;gap:8px;
  font-size:1rem;font-weight:700;letter-spacing:-.025em;
}
.finde-zona > summary::-webkit-details-marker{display:none}
.finde-zona > summary::after{
  content:"";margin-left:auto;width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid var(--tinta-45);border-bottom:2px solid var(--tinta-45);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
.finde-zona[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.finde-zona-tag{
  font-stretch:var(--w-narrow);font-size:0.59375rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--sol-txt);border:1px solid color-mix(in srgb,var(--sol) 40%,transparent);border-radius:999px;padding:2px 7px;
  white-space:nowrap;flex:0 0 auto;margin-left:6px;
}
.finde-zona > summary::after{margin-left:auto}
.finde-zona-tag + *{margin-left:0}
.finde-zona-cuerpo{padding:0 13px 12px;display:flex;flex-direction:column;gap:10px}
.finde-zona-nota{margin:0;font-size:0.8125rem;line-height:1.4;color:var(--tinta-45)}
.finde-dia-bloque{display:flex;flex-direction:column;gap:6px}
.finde-dia-tit{
  margin:0;font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-45);
}
.finde-plaza{
  width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
  padding:10px 12px;border-radius:12px;border:1px solid var(--tinta-09);background:var(--papel);
  text-align:left;cursor:pointer;min-height:56px;
  transition:border-color .16s,transform .14s;
}
.finde-plaza:hover{border-color:var(--tinta-45)}
.finde-plaza:active{transform:scale(.99)}
.fp-nom{font-size:0.96875rem;font-weight:650;letter-spacing:-.025em;line-height:1.18}
.fp-lado{grid-column:1;font-size:0.8125rem;line-height:1.35;color:var(--tinta-70)}
.fp-nota{grid-column:1;font-size:0.75rem;line-height:1.35;color:var(--tinta-45)}
.fp-franja{
  grid-column:2;grid-row:1 / span 3;align-self:center;text-align:right;
  font-size:0.75rem;font-weight:600;letter-spacing:.01em;
  color:var(--sol-txt);font-variant-numeric:tabular-nums;white-space:nowrap;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.fp-franja small{font-size:0.59375rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-45)}
.finde-plaza-sola{background:var(--papel)}
.finde-acciones{display:flex;flex-direction:column;gap:12px}
.finde-acciones .btn{width:100%}
.finde-bloque{
  padding:13px 13px 14px;border:1px solid var(--tinta-09);border-radius:var(--r);
  background:var(--papel-2);display:flex;flex-direction:column;gap:9px;
}
.finde-bloque .campo-tit{margin:0}
.finde-texto{margin:0;font-size:0.90625rem;line-height:1.42;color:var(--tinta)}
/* el finde por mail: la fila que se abre en un formulario corto */
.fm-estado{display:flex;flex-direction:column;gap:10px}
.fm-form{gap:12px}
.fm-form .btn{width:100%}
.fm-acepto{font-size:0.875rem}
.form-decir .fm-acepto input{-webkit-appearance:checkbox;appearance:auto;width:20px;height:20px;min-width:20px;padding:0;margin:2px 0 0;border:0;background:none;border-radius:0}
.fm-acepto input[aria-invalid=true]{outline:2px solid var(--sol-txt);outline-offset:2px}
.form-decir input[aria-invalid=true]{border-color:var(--sol-txt)}
.fm-error{margin:0;font-size:0.84375rem;line-height:1.4;font-weight:600;color:var(--sol-txt)}
.fm-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}
.finde-mail .mia-ayuda a{color:var(--tinta-70)}
.finde-extras{display:flex;flex-direction:column;gap:12px}
.finde-recorrido{display:flex;flex-direction:column;gap:7px;padding-top:8px;border-top:1px solid var(--tinta-09)}
.finde-recorrido:first-child{border-top:0;padding-top:0}
.finde-recorrido-tit{margin:0;font-size:0.875rem;font-weight:650;letter-spacing:-.02em}
.finde-pasos{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.finde-paso{display:flex;align-items:stretch;gap:10px;position:relative;padding-left:16px}
/* la línea que une los pasos: se sigue el sol de una plaza a la otra */
.finde-paso::before{
  content:"";position:absolute;left:4px;top:-8px;bottom:-8px;width:2px;
  background:var(--tinta-18);
}
.finde-paso:first-child::before{top:50%}
.finde-paso:last-child::before{bottom:50%}
.finde-paso::after{
  content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:var(--sol-alto);border:2px solid var(--papel-2);box-sizing:border-box;
}
.finde-paso .finde-plaza{min-height:50px;padding:8px 11px;flex:1 1 auto}
.finde-precision{margin:2px 0 0;font-size:0.78125rem;line-height:1.45;color:var(--tinta-45)}
.finde-pie{margin-top:4px}
@media (min-width:900px) and (min-height:520px){
  .finde-cab{padding-left:clamp(18px,3vw,40px);padding-right:clamp(18px,3vw,40px)}
  .finde-cuerpo{
    padding-left:clamp(18px,3vw,40px);padding-right:clamp(18px,3vw,40px);
    display:grid;grid-template-columns:minmax(300px,0.9fr) 1.1fr;column-gap:clamp(28px,4vw,60px);
    align-content:start;
  }
  .finde-estado{grid-column:1 / -1}
  .finde-contenido{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto auto auto 1fr}
  .finde-alerta{grid-column:1 / -1}
  .finde-tit{grid-column:1;font-size:2.5rem}
  .finde-dias{grid-column:1;align-self:start}
  .finde-top{grid-column:1}
  .finde-zonas{grid-column:2;grid-row:2 / span 3}
  .finde-acciones{grid-column:1;max-width:420px}
  .finde-extras{grid-column:2}
  .finde-pie{grid-column:1}
}
@media (prefers-reduced-motion:reduce){.finde{animation:none}}

/* ---------- foco visible ---------- */
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:6px}

/* ---------- ancho grande: dos columnas ---------- */
@media (min-width:900px) and (min-height:520px){
  .pantalla-lista{min-height:auto}
  #pantalla-sol{
    min-height:100dvh;
    display:grid;
    grid-template-columns:minmax(340px,0.85fr) 1.15fr;
    grid-template-rows:auto 1fr;
    column-gap:clamp(28px,4vw,60px);
    align-content:start;
    /* la botonera de abajo también está en escritorio: lo último de la
       columna (la pregunta, la leyenda del mapa) tiene que quedar arriba */
    padding-bottom:calc(var(--tabs-total) + 24px);
  }
  .barra{grid-column:1 / -1}
  .prec-detalle{top:calc(env(safe-area-inset-top) + 76px);right:auto;width:min(46ch,42vw)}
  .estado{grid-column:1 / -1}
  .respuesta{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:subgrid;
    grid-template-rows:auto auto 1fr;
    min-height:0;
  }
  /* cada renglón del dato en su fila de la columna izquierda, pegado a la
     frase (13/10/2026): auto-ubicados, el cielo caía debajo de los botones,
     a media pantalla del titular, y la lluvia en la columna del mapa. Las
     filas de lo que está oculto miden cero. */
  .respuesta{grid-template-rows:auto auto auto auto auto auto auto 1fr auto auto}
  .resp-cabeza{grid-column:1;grid-row:1;padding-top:26px}
  .frase{grid-column:1;grid-row:2;padding-top:6px;font-size:1.625rem;max-width:22ch}
  .cielo-linea{grid-column:1;grid-row:3;margin-top:0}
  .cielo-fuente{grid-column:1;grid-row:4}
  .lluvia{grid-column:1;grid-row:5}
  .estacion{grid-column:1;grid-row:6}
  .mio{grid-column:1;grid-row:7}
  .acciones{grid-column:1;grid-row:9;align-self:end;max-width:420px;padding-bottom:8px}
  .coincide{grid-column:1;grid-row:10;max-width:420px}
  .mapa-caja{grid-column:2;grid-row:1 / -1;min-height:420px;padding-top:26px}
  .respuesta{padding-bottom:0}
  .tirador{display:none}
  .lugar-nom{font-size:clamp(1.875rem,3.1vw,2.625rem)}
  .pantalla-lista{
    padding-top:34px;padding-bottom:40px;
    display:grid;grid-template-columns:minmax(280px,0.85fr) 1.15fr;
    column-gap:clamp(28px,4vw,60px);align-content:start;
  }
  .lista-cab{grid-column:1;border-bottom:0;position:sticky;top:34px}
  .lista{grid-column:2;border-top:1px solid var(--tinta-18)}
  .pie{grid-column:1;margin-top:22px;border-top:0;padding-top:0}
  .tiempo-pista{height:66px}
  .estado-zonas{max-width:900px}
  .zonas-grilla{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .zonas-pie{flex-direction:row;justify-content:flex-start;gap:22px;flex-wrap:wrap}
  .zonas-nota{text-align:left;margin:0}
  .chip-zona{max-width:26vw}
  .invita{left:auto;right:28px;bottom:28px;margin:0;max-width:400px}
}

/* Alturas medias (iPhone 13/14/15, SE grande): el mapa baja a 42% para que la
   fila "Guardar · Compartir" entre en la pantalla sin scrollear. Debajo del
   42% deja de leerse como mapa, y ahí preferimos que se scrollee. */
@media (max-height:860px) and (max-width:899px){
  .mapa-caja{min-height:42dvh}
  .frase{font-size:clamp(1.0625rem,4.8vw,1.25rem);margin:9px 0 10px}
  /* la pregunta de vuelta se aprieta antes que empujar nada fuera de la
     pantalla: si no se ve, no se contesta (marca/SISTEMA.md §7 sexies) */
  .coincide{margin-top:8px;padding-top:7px}
}

/* pantallas muy bajas: primero se achica el texto, y el mapa baja al 38% del
   alto, que sigue siendo un mapa y no una miniatura */
@media (max-height:680px) and (max-width:899px){
  .resp-cabeza{padding-top:6px}
  .frase{font-size:1.125rem;margin:9px 0 10px}
  .mapa-caja{min-height:29dvh}
  .respuesta[data-cielo=si] .mapa-caja{min-height:26dvh}
  .tiempo-pista{height:46px}
  .btn{min-height:48px}
  .acciones{padding-top:8px}
  .coincide{margin-top:5px;padding-top:5px}
  .coincide-q{font-size:0.78125rem}
  .coincide-acc{gap:14px}
  .coincide-acc .acc-txt{min-height:28px;font-size:0.84375rem}
}

/* ============================================================
   BIENVENIDA · seis pantallas, la primera vez y nada más
   Qué es, cuánto abarca, el mapa de la ciudad, la noche, los intereses y la
   ubicación. La cuarta se ve de noche: la bienvenida entera toma los tokens
   de LUNA mientras esa pantalla está a la vista, que es la única manera de
   mostrar el modo en vez de contarlo.
   ============================================================ */
html.con-bienve,html.con-bienve body{overflow:hidden;overscroll-behavior:none}
.bienve{
  position:fixed;inset:0;z-index:120;
  background:var(--papel);color:var(--tinta);
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 12px) 0 calc(env(safe-area-inset-bottom) + 28px);
  transition:background var(--t-pantalla) var(--e-capa),color var(--t-pantalla) var(--e-capa);
}
.bienve-saltar{
  position:absolute;z-index:2;
  top:calc(env(safe-area-inset-top) + 12px);right:var(--gutter);
  border:0;background:transparent;cursor:pointer;padding:10px 2px;min-height:44px;
  font-family:inherit;font-size:0.9375rem;font-weight:600;color:var(--tinta-45);
}
/* la flecha de volver, espejo de "Saltar": mismo alto, misma altura de barra */
.bienve-atras{
  position:absolute;z-index:2;
  top:calc(env(safe-area-inset-top) + 12px);left:var(--gutter);
  border:0;background:transparent;cursor:pointer;padding:10px 2px;min-height:44px;min-width:44px;
  display:grid;place-items:center;color:var(--tinta-45);
}
.bienve-atras svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bienve-pista{
  flex:1 1 auto;min-height:0;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.bienve-pista::-webkit-scrollbar{display:none}
.bienve-p{
  flex:0 0 100%;width:100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:0 var(--gutter);text-align:center;
}
.bienve-ico{
  width:96px;height:96px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.bienve-tit{margin:0;font-size:2rem;font-weight:700;letter-spacing:-.04em;line-height:1.08;max-width:15ch}
.bienve-txt{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--tinta-70);max-width:32ch}
.bienve-pie{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:0 var(--gutter);
}
.bienve-puntos{display:flex;gap:7px}
.bienve-puntos i{width:7px;height:7px;border-radius:50%;background:var(--tinta-18);transition:background .2s}
.bienve-puntos i[data-on=true]{background:var(--tinta)}
.bienve-pie .btn{width:100%;max-width:420px}
.bienve-no{margin-top:-6px}
@media (min-width:900px){
  .bienve-tit{font-size:2.5rem}
  .bienve-txt{font-size:1.125rem}
}
@media (max-height:680px){
  .bienve-ico{width:72px;height:72px}
  .bienve-tit{font-size:1.6875rem}
  .bienve-p{gap:14px}
}

/* ---------- pantalla 4: la noche ----------
   No hay un dibujo de luna: hay el gesto. El wordmark de verdad, la flecha, y
   el wordmark después de tocarlo. Los tokens de la paleta ya cambiaron (los
   pone `.bienve[data-oscuro=true]`, abajo en el bloque de LUNA), así que acá
   no hay ni un color escrito a mano. */
.bienve-cambio{
  display:flex;align-items:center;gap:14px;flex:0 0 auto;
  padding:16px 20px;
  border:1px solid var(--tinta-18);border-radius:12px;
  background:var(--papel-2);
}
.bienve-wm-caja{position:relative;display:inline-flex}
.bienve-wm{
  font-size:1.625rem;font-weight:800;letter-spacing:-.05em;line-height:1;
  display:inline-flex;align-items:center;gap:8px;
}
.bienve-wm::before{
  content:"";width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  background:var(--sol-vivo);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sol-vivo) 22%,transparent);
}
/* la misma luna del wordmark de la cabecera, más grande: disco recortado por
   una sombra interior corrida, con el limbo iluminado a la izquierda */
.bienve-wm-luna::before{
  background:var(--sombra);
  box-shadow:inset -4.5px 0 0 0 var(--papel-2),
             0 0 0 4px color-mix(in srgb,var(--sombra) 20%,transparent);
}
.bienve-flecha{
  width:26px;height:18px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  color:var(--tinta-45);
}
/* el anillo del toque: el mismo "acá estás" del marcador del mapa, y por las
   mismas razones de §9 late tres veces y se queda quieto, no para siempre */
.bienve-toque{
  position:absolute;left:6px;top:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:1.5px solid var(--sol-txt);
  opacity:0;pointer-events:none;
}
.bienve-p-noche.late .bienve-toque{animation:bienve-toque 1.5s var(--e-capa) 3}
@keyframes bienve-toque{
  0%{opacity:.85;transform:scale(.45)}
  70%{opacity:0;transform:scale(2.1)}
  100%{opacity:0;transform:scale(2.1)}
}
@media (max-height:680px){
  .bienve-wm{font-size:1.375rem}
  .bienve-cambio{padding:12px 16px;gap:11px}
}
@media (prefers-reduced-motion:reduce){
  .bienve{transition:background .12s linear,color .12s linear}
  .bienve-p-noche.late .bienve-toque{animation:none}
}

/* ---------- pantalla 3: los intereses ----------
   Chips grandes, dos por fila, con el ícono chico adelante. Elegidos: tinta
   llena, como el botón primario. Sin fondo, sin sombra, esquina de 12. */
.bienve-p-int{justify-content:center;gap:16px}
.bienve-p-int .bienve-txt{margin-bottom:4px}
.int-chips{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  width:100%;max-width:420px;
}
.int-chip{
  display:flex;align-items:center;gap:9px;
  min-height:56px;padding:0 13px;
  border:1px solid var(--filete-btn);border-radius:12px;background:transparent;
  color:var(--tinta);cursor:pointer;text-align:left;
  font-family:inherit;font-size:0.90625rem;font-weight:600;letter-spacing:-.018em;line-height:1.15;
  transition:border-color .16s,background .16s,color .16s,transform .14s cubic-bezier(.2,.8,.25,1);
}
.int-chip:active{transform:scale(.985)}
.int-chip[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.int-ico{
  width:21px;height:21px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  color:var(--tinta-45);transition:color .16s;
}
.int-chip[aria-pressed=true] .int-ico{color:var(--papel)}
@media (max-height:680px){
  .int-chip{min-height:48px;font-size:0.84375rem}
  .int-ico{width:18px;height:18px}
}
@media (max-width:330px){
  .int-chips{grid-template-columns:1fr}
}
/* "Mis intereses" desde la hoja "más": la misma pantalla 3, sola. Sin puntos
   de paso, sin "Saltar", sin las otras tres. */
.bienve.solo-int .bienve-p:not(.bienve-p-int){display:none}
.bienve.solo-int .bienve-puntos{display:none}
.bienve.solo-int .bienve-pista{scroll-snap-type:none;overflow-x:hidden}

/* La fila de chips de intereses del inicio se fue el 22/9/2026 con el orden
   por interés (V2-CONTRATO.md §3): se llevó `.filtros-int`, `.filtro-int` y
   `.chip-mas`. Los intereses se eligen en la bienvenida y en "Mis intereses",
   y ahora anotan cada plaza (marca/SISTEMA.md §7bis). */

/* ============================================================
   ESTADO "ELEGIR UNA PLAZA" · sin link, sin guardada y sin ubicación
   ============================================================ */
.estado-elegir{gap:14px}
.estado-elegir .estado-acc{gap:6px;width:100%;max-width:360px}
.estado-elegir .btn{width:100%}

/* ============================================================
   PANTALLA "MÁS"
   Era una hoja que subía desde las tres rayas de arriba a la derecha. Desde
   el 21/9/2026 es la cuarta pestaña: las mismas filas, el mismo dibujo, en
   una pantalla que ya no tapa nada y no hay que cerrar.
   ============================================================ */
.mas-lista{display:flex;flex-direction:column}
.mas-fila{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;text-decoration:none;color:inherit;
  border:0;border-bottom:1px solid var(--tinta-09);background:transparent;
  padding:15px 2px;min-height:60px;cursor:pointer;
  transition:padding-left .16s,background .16s;
}
@media (hover:hover){.mas-fila:hover{background:var(--tinta-09);padding-left:8px}}
.mas-fila-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mas-fila-nom{font-size:1.03125rem;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.mas-fila-sub{
  font-size:0.78125rem;line-height:1.3;color:var(--tinta-45);
  /* (mejora 24) con el texto grande, un renglón con puntos suspensivos se
     come media frase. Dos renglones y recién ahí se corta. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.mas-v{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--tinta-45);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* la fila del finde se dibuja como cualquier otra: sin caja ni ícono aparte */
.mas-lista .finde-acceso{
  border:0;border-bottom:1px solid var(--tinta-09);border-radius:0;
  padding:15px 2px;background:transparent;min-height:60px;gap:14px;
}
.mas-lista .finde-acceso:active{transform:none}
/* el título del finde (id #finde-acceso-tit) es la bajada de la fila */
.mas-lista .mas-fila-sub{max-width:100%}
/* las plazas guardadas, al final y solo si hay alguna */
.mas-guardadas{margin-top:26px}
.mas-guardadas .eyebrow{margin:0 0 2px}

/* ============================================================
   INICIO: "CERCA TUYO"
   La lista es la pantalla de inicio desde el 16/9/2026. Arriba, la marca y el
   menú; después el título, el buscador y la fila de filtros; después las
   filas, agrupadas en "Con sol ahora" y "En sombra".
   ============================================================ */
.lista-cab-alto{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 10px;position:relative;
}
.lista-cab-alto .marca-nom{font-size:1.0625rem}
.lista-cab-alto .ico-btn{margin-right:-10px}

/* ---- la pista de la noche ----
   Para quien saltó la bienvenida antes de la pantalla 4. Señala el wordmark,
   que es el interruptor de verdad, en vez de repetirle una pantalla que ya
   descartó. Aparece una sola vez en la vida del teléfono y se va sola. */
.pista-noche{
  position:absolute;z-index:6;top:calc(100% + 8px);left:-6px;
  max-width:min(300px,calc(100vw - 2 * var(--gutter)));
  text-align:left;padding:9px 12px;
  border:1px solid var(--tinta-18);border-radius:12px;
  background:var(--papel-2);color:var(--tinta-70);cursor:pointer;
  font-family:inherit;font-size:0.84375rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;
  animation:pista-entra var(--t-pantalla) var(--e-capa) both;
}
/* el pico que la ata al wordmark: un cuadrado girado, sin dibujo aparte */
.pista-noche::before{
  content:"";position:absolute;top:-5px;left:16px;
  width:8px;height:8px;transform:rotate(45deg);
  background:var(--papel-2);
  border-left:1px solid var(--tinta-18);border-top:1px solid var(--tinta-18);
}
.pista-noche:active{transform:scale(.985)}
@keyframes pista-entra{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pista-noche{animation:aparecer .12s linear both}
  .pista-noche:active{transform:none}
}

/* ---- la fila de filtros, en scroll horizontal ----
   Se sale del padding de la pantalla a propósito: el chip que asoma cortado en
   el borde derecho es lo que dice, sin escribirlo, que hay más para el costado. */
.chips-fila{
  display:flex;gap:7px;align-items:center;
  margin:10px 0 0;
  padding:2px var(--gutter) 4px;
  margin-left:calc(var(--gutter) * -1);
  margin-right:calc(var(--gutter) * -1);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.chips-fila::-webkit-scrollbar{display:none}

/* ---- la fila larga (23/9/2026, marca/SISTEMA.md §7 ter) ----
   Desde que "Planes" tiene siete actividades de día y seis de noche, el chip
   cortado en el borde derecho ya no alcanza: hay más para los dos lados. La
   clase la pone `marcarFilaLarga()` en app.js **solo cuando la fila de verdad
   no entra**, medido con scrollWidth: la misma fila con cuatro chips en una
   pantalla ancha no lleva ninguna de las dos cosas de acá.
     · el degradé de los bordes dice que sigue, sin escribir "hay más" ni
       agregar una flecha, que sería un elemento más en la pantalla;
     · el imán de scroll hace que los chips caigan alineados y no a mitad de
       camino, que es lo que hace sentir infinita una fila.
   Y `en-ini` / `en-fin` apagan el degradé de la punta a la que ya se llegó:
   un degradé que no esconde nada promete algo que no hay. */
.chips-muchos{
  scroll-snap-type:x proximity;
  --f1:0px;--f2:22px;--f3:calc(100% - 22px);--f4:100%;
  -webkit-mask-image:linear-gradient(to right,transparent var(--f1),#000 var(--f2),#000 var(--f3),transparent var(--f4));
  mask-image:linear-gradient(to right,transparent var(--f1),#000 var(--f2),#000 var(--f3),transparent var(--f4));
}
.chips-muchos.en-ini{--f1:0px;--f2:0px}
.chips-muchos.en-fin{--f3:100%;--f4:100%}
.chips-muchos>.chip{scroll-snap-align:center}
@media (prefers-reduced-motion:reduce){.chips-muchos{scroll-snap-type:none}}

.lista-acc{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px}
.lista-sub{margin:0;font-size:0.8125rem;color:var(--tinta-45)}
.lista-nota{margin:6px 0 0;font-size:0.71875rem;line-height:1.4;color:var(--tinta-45);max-width:42ch}
.btn-ubic{color:var(--tinta);padding:4px 2px;min-height:auto}

/* LA SALIDA SIN UBICACIÓN (mejora 22). Aparece en el lugar del botón de
   arriba cuando el permiso se negó o no llegó. Es una caja de papel 2, sin
   filete: no es una alerta, es la otra puerta. El orden de adentro es el de
   la frase: qué se gana, la acción, y abajo en terciario el reintento, que
   es lo secundario justamente porque a esa pregunta ya se contestó. */
.sin-ubic{
  margin-top:10px;padding:12px 14px;border-radius:12px;
  background:var(--papel-2);
}
.sin-ubic-txt{margin:0 0 10px;font-size:0.8125rem;line-height:1.45;color:var(--tinta-70);max-width:46ch}
.sin-ubic-acc{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sin-ubic-acc .acc-txt{min-height:44px}
/* con la zona ya elegida es un rótulo y no una puerta: sin caja, un renglón */
.sin-ubic[data-zona=si]{padding:0;background:transparent}
.sin-ubic[data-zona=si] .sin-ubic-txt{margin:0 0 2px;font-size:0.78125rem;color:var(--tinta-45)}
.sin-ubic[data-zona=si] .sin-ubic-acc{gap:16px}
/* las dos acciones entran en un renglón de 375 px con el tamaño de apoyo;
   con el texto del sistema en grande, caen una debajo de la otra y ya está */
.sin-ubic[data-zona=si] .acc-txt{font-size:0.8125rem;min-height:38px;padding:6px 2px}

/* ---- el separador de grupo ---- */
.lista-grupo{
  display:block;
  padding:18px 2px 7px;
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-45);
  border-bottom:1px solid var(--tinta-18);
}
.lista-grupo:first-child{padding-top:8px}

/* ============================================================
   EL PANEL "MÁS DE ESTA PLAZA"
   Fijo abajo, fuera del scroller. Cerrado deja ver el tirador y el título;
   abierto sube al 72% de la pantalla. Es donde vive todo lo que Pablo pidió
   sacar de la pantalla de plaza sin perderlo: la barra horaria, el clima, la
   línea del interés y la precisión.
   ============================================================ */
:root{ --panel-cerrado:52px; }
.panel{
  /* apoyado sobre la botonera, no sobre el borde de la pantalla: el área
     segura del teléfono ya la cubren las cuatro pestañas */
  position:fixed;z-index:40;left:0;right:0;bottom:var(--tabs-total);
  background:var(--papel);
  border-top:1px solid var(--tinta-18);
  border-radius:var(--r) var(--r) 0 0;
  display:flex;flex-direction:column;
  max-height:min(72dvh,700px);
  transform:translateY(calc(100% - var(--panel-cerrado)));
  transition:transform var(--t-pantalla) var(--e-salida);
  will-change:transform;
}
.panel[data-abierto=si]{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.panel{transition:none}}
.panel-tirador{
  flex:0 0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  width:100%;min-height:var(--panel-cerrado);padding:8px var(--gutter);
  border:0;background:transparent;cursor:pointer;color:inherit;
  transition:background var(--t-medio),padding var(--t-pantalla) var(--e-salida);
}
/* La barra de gestos ya la cubre la botonera, así que el tirador no tiene que
   comérsela: el panel cerrado son sus 52 px y nada más. */
/* la tira va arriba de todo, cruzando el tirador, y el título con su flecha
   comparten renglón: así el panel cerrado ocupa 52 px y no 64 */
.panel-tirador .panel-tira{grid-column:1 / -1;justify-self:center;margin-bottom:6px}
.panel-tit{grid-column:2}
.panel-v{grid-column:3;justify-self:start;margin-left:8px}
@media (hover:hover){.panel-tirador:hover{background:var(--tinta-09)}}
.panel-tira{display:block;width:38px;height:3.5px;border-radius:99px;background:var(--tinta-18)}
.panel-tit{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-70);
}
.panel-v{
  width:16px;height:16px;fill:none;stroke:var(--tinta-45);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-pantalla) var(--e-salida);
}
.panel[data-abierto=si] .panel-v{transform:rotate(180deg)}
.panel-cuerpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px var(--gutter) 20px;
}
.panel-ayuda{margin:0 0 4px;font-size:0.78125rem;line-height:1.35;color:var(--tinta-45)}
.panel-linea{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--tinta-09);
  font-size:0.875rem;line-height:1.4;color:var(--tinta-70);
}
.panel-clima{color:var(--tinta-45)}
.interes{color:var(--tinta-70);letter-spacing:-.005em}
.panel-fila{margin-top:8px;border-top:1px solid var(--tinta-09);border-bottom:0}
.panel .prec-detalle{
  position:static;width:auto;margin:0 0 6px;
  border:0;border-radius:0;background:transparent;padding:0 2px 8px;box-shadow:none;
}

/* ============================================================
   LA HOJA "MI PLAZA", MÍNIMA
   Dos decisiones y un botón. Lo demás, abajo de "Más opciones", cerrado.
   ============================================================ */
.dec{margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.dec-tit{
  margin:0;font-size:1rem;font-weight:700;letter-spacing:-.025em;color:var(--tinta);
}
.chips-umbral{margin:0;padding:2px 0 4px}
.mia-fina{margin:2px 0 0;font-size:0.8125rem;line-height:1.35;color:var(--tinta-45);text-align:center}
.mia-mas{margin:6px 0 0}
.mia-mas > summary{
  list-style:none;cursor:pointer;display:inline-block;padding:8px 2px;min-height:40px;
  font-size:0.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--tinta-70);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--tinta-18);
}
.mia-mas > summary::-webkit-details-marker{display:none}
.mia-mas > summary:hover{color:var(--tinta);text-decoration-color:var(--tinta-45)}
.mia-mas-cuerpo{display:flex;flex-direction:column;gap:11px;padding:4px 0 2px}
.mia-mas-cuerpo .btn-min{align-self:flex-start;margin-top:2px}
.sheet-mia .mia-lugar{margin:0}

/* ============================================================
   §9 · EL MOVIMIENTO  (marca/SISTEMA.md §9)
   Agregado el 16/9/2026, tercera prueba de Pablo: "animaciones en las
   interacciones: botones, transiciones entre pantallas para adelante y para
   atrás; que el sol que se ve en el mapa sea un sol brillante en vez de un
   punto; todo lo que podamos".

   Tres reglas, y ninguna animación entra si no las cumple:
     1. Explica algo: de dónde viene, a dónde va, o qué acaba de pasar.
     2. Dura entre 120 y 350 ms. Lo único más largo son los dos latidos que
        no interrumpen a nadie (el sol respira en 3 s, los rayos giran en 60).
     3. Por cuadro se mueven `transform` y `opacity` y nada más: en el
        WKWebView del iPhone animar `top`, `left`, `width`, `height` o
        `box-shadow` rehace la maquetación sesenta veces por segundo.
   ============================================================ */

/* ---------- los chips: el pop y la tinta que crece del centro ----------
   Al encenderse el chip da un salto de 6% en 170 ms y el relleno de tinta
   entra desde el centro en vez de aparecer de golpe. Dice, sin escribirlo,
   que el chip ES el filtro: la tinta lo va ocupando. */
.chip,.int-chip{position:relative;overflow:hidden;isolation:isolate}
.chip::before,.int-chip::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--tinta);
  transform:scale(0);opacity:0;
  transition:transform var(--t-medio) var(--e-capa),opacity var(--t-medio);
}
.chip[aria-pressed=true]::before,
.int-chip[aria-pressed=true]::before{transform:scale(1);opacity:1}
/* el fondo lo pone ahora la capa de tinta, no el propio chip */
.chip[aria-pressed=true],.int-chip[aria-pressed=true]{background:transparent}
@keyframes chip-pop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
.chip.pop,.int-chip.pop{animation:chip-pop var(--t-medio) var(--e-capa)}

/* ---------- las filas de la lista ----------
   Se hunden al tocarlas y entran en cascada al cargar: 8 px y opacidad, de a
   30 ms, y solo las primeras doce. Más que eso ya no se ve (están fuera de
   pantalla) y cuesta cuadros. */
.item:active{transform:scale(.985);opacity:.88}
@keyframes entrar-fila{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.item.cascada{animation:entrar-fila .22s var(--e-capa) both;animation-delay:var(--d,0ms)}
/* la pastilla de estado cambia de color, no salta de color */
.pastilla{transition:background var(--t-medio),color var(--t-medio),border-color var(--t-medio)}

/* ---------- filas fantasma mientras la lista pide los datos ----------
   Es el único lugar del sistema donde se anima `background-position`: es un
   solo elemento por fila, sin maquetación abajo, y el brillo que se desplaza
   es justamente lo que dice "esto todavía está viniendo". */
.fila-fantasma{list-style:none;padding:14px 2px;min-height:66px;border-bottom:1px solid var(--tinta-09);display:flex;flex-direction:column;justify-content:center;gap:8px}
.fila-fantasma i{
  display:block;height:13px;border-radius:3px;
  background:linear-gradient(90deg,var(--tinta-09) 0%,var(--tinta-09) 35%,var(--papel) 50%,var(--tinta-09) 65%,var(--tinta-09) 100%);
  background-size:280% 100%;background-position:120% 0;
  animation:fantasma 1.35s ease-in-out infinite;
}
.fila-fantasma i:first-child{width:62%;height:16px}
.fila-fantasma i:last-child{width:38%;height:11px}
.fila-fantasma:nth-child(2n) i{animation-delay:.12s}
.fila-fantasma:nth-child(3n) i{animation-delay:.24s}
@keyframes fantasma{to{background-position:-120% 0}}

/* ---------- tirar para refrescar, con el sol chico girando ----------
   El indicador vive arriba de la lista, escondido, y lo baja el dedo. */
.refresco{
  position:absolute;left:50%;top:0;z-index:5;
  width:34px;height:34px;margin:-38px 0 0 -17px;
  display:grid;place-items:center;pointer-events:none;
  opacity:0;
  transition:opacity var(--t-medio),transform var(--t-medio) var(--e-capa);
}
/* mientras el dedo lo baja, el indicador va pegado al dedo y no detrás */
.refresco.sigue{transition:none}
.refresco svg{width:24px;height:24px;color:var(--sol-txt);display:block}
.refresco[data-girando=si]{opacity:1;transform:translateY(46px)}
.refresco[data-girando=si] svg{animation:girar-sol 1s linear infinite}
@keyframes girar-sol{to{transform:rotate(360deg)}}

/* ---------- el buscador: la lupa se corre y el campo crece ---------- */
.buscador{transition:border-color var(--t-medio),transform var(--t-medio) var(--e-capa)}
.buscador:focus-within{transform:scale(1.014)}
.buscador-ico{transition:transform var(--t-medio) var(--e-capa),stroke var(--t-medio)}
.buscador:focus-within .buscador-ico{transform:translateX(-2px) scale(1.1);stroke:var(--tinta)}

/* ---------- los puntos de paso de la bienvenida ---------- */
.bienve-puntos i{transition:background var(--t-medio),transform var(--t-medio) var(--e-capa)}
.bienve-puntos i[data-on=true]{transform:scale(1.5)}

/* ---------- la pantalla de intereses entra desde abajo ---------- */
@keyframes entrar-desde-abajo{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.bienve.solo-int .bienve-p-int,.bienve.solo-int .bienve-pie{
  animation:entrar-desde-abajo var(--t-hoja) var(--e-resorte) both;
}
.bienve.solo-int .bienve-pie{animation-delay:.05s}

/* ---------- el panel "Más de esta plaza": resorte al abrir ----------
   Al abrir, resorte; al cerrar, la curva de siempre: un resorte al cerrar
   haría desaparecer el tirador medio segundo, que es lo contrario de lo que
   tiene que pasar. El faldón tapa el cachito que el resorte pasa de largo. */
.panel{transition:transform var(--t-hoja) var(--e-capa);box-shadow:0 70px 0 0 var(--papel)}
.panel[data-abierto=si]{transition-timing-function:var(--e-resorte)}
.panel.arrastrando{transition:none}
/* con el panel abierto, la pantalla de atrás se oscurece apenas: dice que el
   panel está adelante sin taparla del todo (ahí se sigue viendo el mapa) */
.panel-velo{
  position:fixed;inset:0;z-index:39;background:rgba(10,8,6,.34);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-hoja) var(--e-capa);
}
.panel-velo[data-ver=si]{opacity:1;pointer-events:auto}
#panel-tirador{touch-action:none}

/* ============================================================
   EL SOL DEL MAPA
   Hasta el build 4 era un punto naranja de 4,6 px con ocho rayitas, dibujado
   en el canvas. Ahora es un sol: disco, dos capas de halo radial, un brillo
   que respira en 3 s y rayos que dan una vuelta cada 60 s. Va en HTML encima
   del canvas y no adentro, por una razón de rendimiento: latir en el canvas
   obliga a redibujar la plaza entera (polígono, celdas, calles, nombres)
   sesenta veces por segundo; acá late una capa compuesta por el GPU y el
   mapa se dibuja solo cuando cambia el dato.
   Cuando cambia la hora el sol se CORRE hasta su azimut nuevo en 400 ms: es
   lo que muestra que el sol se mueve y la sombra con él.
   ============================================================ */
.astros{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;overflow:hidden;border-radius:var(--r);
}
.astro{position:absolute;left:0;top:0;width:0;height:0;transition:transform var(--t-dato) var(--e-capa)}
.astro.sin-viaje{transition:none}
.astro > *{position:absolute;left:0;top:0;display:block;transform:translate(-50%,-50%)}

.astro-halo{
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--sol-vivo) 40%,transparent) 0%,
    color-mix(in srgb,var(--sol-vivo) 14%,transparent) 44%,
    transparent 72%);
  animation:sol-respira 3s ease-in-out infinite;
}
.astro-nucleo{
  width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--sol-alto) 92%,transparent) 0%,
    color-mix(in srgb,var(--sol-vivo) 48%,transparent) 52%,
    transparent 80%);
  animation:sol-respira 3s ease-in-out infinite;
  animation-delay:-1.5s;
}
.astro-disco{width:11px;height:11px;border-radius:50%;background:var(--sol-vivo)}
.astro-rayos{width:54px;height:54px;color:var(--sol-vivo);opacity:.75;animation:sol-gira 60s linear infinite}
.astro-rayos line{stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@keyframes sol-respira{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:.95}
}
@keyframes sol-gira{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
/* La plaza en sombra: el sol está, pero apagado. Gris cálido (no gris de
   pantalla), sin latido y sin giro. Que el sol siga ahí es el dato: la luz
   viene de ese lado, lo que no llega es al pasto. */
.astro-sol[data-e=sombra] .astro-halo,
.astro-sol[data-e=sombra] .astro-nucleo{
  animation:none;opacity:.34;
  background:radial-gradient(circle,rgba(138,127,114,.55) 0%,rgba(138,127,114,.18) 48%,transparent 76%);
  transform:translate(-50%,-50%) scale(1);
}
.astro-sol[data-e=sombra] .astro-disco{background:#8A7F72}
.astro-sol[data-e=sombra] .astro-rayos{animation:none;color:#8A7F72;opacity:.45;transform:translate(-50%,-50%) rotate(0deg)}

/* La luna, en LUNA. Mismo lugar y mismo viaje que el sol (se corre a su
   azimut nuevo en 400 ms), pero no late ni gira: la luz de la luna no
   parpadea, y un latido acá sería adorno. La fase es la de verdad: el path
   del disco lo escribe app.js con `luna.iluminada_pct` y `luna.fase`, y
   cuando la luna está bajo el horizonte no se dibuja nada. */
.astro-luna-halo{
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(203,213,238,.30) 0%, rgba(203,213,238,.11) 46%, transparent 74%);
}
.astro-luna-disco{width:26px;height:26px;overflow:visible}
.astro-luna-disco .luna-borde{fill:none;stroke:rgba(203,213,238,.34);stroke-width:.7}
.astro-luna-disco .luna-luz{fill:#E4EBFA}

/* "vos": el anillo pulsa una sola vez al aparecer y se va. Una sola, porque
   es un aviso de "acá estás", no un latido permanente que distraiga. */
.astro-vos span{
  width:15px;height:15px;border-radius:50%;
  border:2px solid var(--tinta);opacity:0;
}
.astro-vos.pulso-uno span{animation:vos-pulso .9s var(--e-capa) both}
@keyframes vos-pulso{
  0%{transform:translate(-50%,-50%) scale(.55);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(2.7);opacity:0}
}

/* el mapa se funde cortito cuando cambia la hora sin que el dedo esté en la
   barra: las celdas nuevas no aparecen de golpe */
@keyframes fundir-mapa{0%{opacity:.55}100%{opacity:1}}
#mapa.fundido{animation:fundir-mapa .18s ease-out both}

/* El astro aparece y desaparece con la altura: la luna que se puso no se
   apaga de un cuadro al otro, se va. Solo `opacity`, porque el `transform`
   de estos elementos es su posición en el mapa y no se puede pisar. */
.astro.llegando{animation:aparecer .18s var(--e-capa) both}
.astro.yendose{animation:desaparecer .16s var(--e-capa) both}

/* ============================================================
   EL CAMBIO DE MODO · SOL ⇄ LUNA (24/9/2026)
   Es el gesto más importante de la app y ya tuvo dos formas malas: primero
   un corte seco, y después una cortina del color nuevo que bajaba, tapaba
   la pantalla y la destapaba ya cambiada. La cortina se veía bien en el
   papel y mal en la mano: por un instante la app perdía todos sus
   elementos, se ponía de un color y los recuperaba después.

   Ahora no se mueve ni desaparece nada. Se prende una transición de color
   sobre todo lo que está en pantalla, se dan vuelta los tokens, y cada
   elemento viaja de su color viejo al nuevo sin moverse un píxel. El color
   pasa por encima de la app; la app se queda quieta.

   La regla vale medio segundo y se saca: fuera del cambio de modo ningún
   elemento carga con una transición que no pidió. Los lienzos no entienden
   de transiciones y se resuelven aparte, en app.js, fundiendo el dibujo
   viejo sobre el nuevo adentro del mismo canvas.
   ============================================================ */
/* CORREGIDO EL 24/9/2026, SEGUNDA VUELTA. La primera versión ponía la
   transición en `*`, o sea en los 4.780 elementos del documento. En la Mac
   eso se veía bien; en el iPhone se trababa, y con razón: las 661 filas de la
   lista están TODAS en el documento, así que el navegador tenía 4.780
   transiciones vivas y en cada cuadro las tenía que adelantar una por una,
   incluidas las 650 filas que nadie está mirando.

   Ahora la transición la llevan SOLO los bloques que están a la vista, que
   app.js marca con la clase `morf` justo antes de dar vuelta los tokens y
   desmarca al terminar. Son unos veinte bloques y sus hijos, o sea un par de
   cientos de nodos en vez de casi cinco mil. El texto que no está adentro de
   un bloque marcado igual acompaña, porque `color` se hereda del cuerpo y el
   cuerpo sí está en la lista. */
html.morfando-modo body,
html.morfando-modo .vista,
html.morfando-modo .pantalla,
html.morfando-modo .capa-plaza,
html.morfando-modo .tabs,
html.morfando-modo .panel,
html.morfando-modo .morf,
html.morfando-modo .morf *,
html.morfando-modo .morf *::before,
html.morfando-modo .morf *::after{
  transition-property:background-color,background-image,border-color,color,fill,stroke,box-shadow,outline-color,text-decoration-color !important;
  transition-duration:var(--t-morfo) !important;
  transition-timing-function:linear !important;
  transition-delay:0s !important;
}
/* mientras dura el cambio no arranca ninguna animación nueva: la única que
   tiene que verse es el color */
html.morfando-modo .morf,html.morfando-modo .morf *{animation:none !important}
/* el disco del wordmark es lo único que se mueve: es el interruptor que se
   tocó, y tiene que acusar recibo. Un latido chico, en su lugar. */
.marca-modo .marca-nom::before,.marca-modo::before{transition:transform var(--t-morfo) var(--e-resorte)}
html.morfando-modo .marca-modo .marca-nom::before,
html.morfando-modo .marca-modo::before{transform:scale(.82)}

/* ============================================================
   EL CAMBIO DE PESTAÑA (22/9/2026)
   Las cuatro pestañas están en fila: Inicio, Planes, Mapa, Más. Ir a la
   derecha trae la vista desde la derecha y manda la anterior a la izquierda;
   ir a la izquierda es el espejo. Es lo mismo que dice la botonera: hay un
   orden y estoy moviéndome adentro de él.

   El viaje es corto (18% del ancho, no el ancho entero) porque no es un
   cambio de nivel como la plaza: es un hermano al lado del otro. Un viaje de
   pantalla completa entre pestañas se siente lento a la tercera vez.
   ============================================================ */
.vista.entrando{animation:vista-entra var(--t-pantalla) var(--e-capa) both}
/* la que se va sigue siendo visible mientras se va: sin esto, la anterior
   desaparecería en el mismo cuadro y no habría dirección que mostrar. Va
   DESPUÉS de `.vista:not(.activa)` a propósito: misma especificidad, gana la
   de abajo. */
.vista.saliendo{
  visibility:visible;opacity:1;pointer-events:none;
  animation:vista-sale var(--t-pantalla) var(--e-capa) both;
}
@keyframes vista-entra{
  from{opacity:0;transform:translateX(calc(var(--dir,1) * 18%))}
  to{opacity:1;transform:none}
}
@keyframes vista-sale{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateX(calc(var(--dir,1) * -14%))}
}
/* el ícono de la pestaña que se acaba de elegir da un salto corto hacia
   arriba: es la respuesta al dedo, y pasa a la vez que el filete crece */
@keyframes tab-salta{0%{transform:translateY(0)}45%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.tab.recien .tab-ico{animation:tab-salta var(--t-medio) var(--e-capa)}

/* ============================================================
   CUANDO LLEGA UN DATO (22/9/2026)
   La pastilla de cada fila no se calcula con el índice: llega cuando termina
   de bajar el archivo de esa plaza, de a una. Hasta hoy el "···" se convertía
   en "sol hasta 18:30" de un cuadro al otro y la lista parpadeaba de a saltos
   sueltos. Ahora las que llegan en el mismo puñado entran escalonadas de a
   40 ms, cortito (180 ms) y sin desplazar nada: la fila no se mueve, entra el
   dato. Lo mismo la anotación de interés, que viaja con la pastilla.
   ============================================================ */
@keyframes entrar-dato{
  from{opacity:0;transform:translateY(-5px) scale(.94)}
  to{opacity:1;transform:none}
}
.pastilla.llega,.it-marca.llega{
  animation:entrar-dato .18s var(--e-capa) both;
  animation-delay:var(--d,0ms);
}

/* ============================================================
   LA RECOMENDACIÓN DE "PLANES", AL CAMBIAR DE ACTIVIDAD (22/9/2026)
   La actividad no cambia qué plazas se listan: cambia la frase de abajo de
   cada una. Si la frase se reemplaza sin más, diez renglones cambian de texto
   en silencio y nadie se entera de que el chip hizo algo. La frase sale hacia
   arriba y la nueva entra desde abajo, escalonada de a 25 ms de la primera a
   la última: se lee como una persiana, que es lo que acaba de pasar.
   ============================================================ */
@keyframes frase-sale{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
@keyframes frase-entra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.plan-frase.cambiando{animation:frase-sale .12s var(--e-capa) both;animation-delay:var(--d,0ms)}
.plan-frase.cambiada{animation:frase-entra .19s var(--e-capa) both;animation-delay:var(--d,0ms)}

/* ============================================================
   LA BIENVENIDA, PANTALLA POR PANTALLA (22/9/2026)
   Las seis viajan con el scroll-snap de siempre, que ya es dirección. Lo que
   faltaba era que lo de adentro llegara: el ícono, el título y el texto de la
   pantalla que queda a la vista entran escalonados de a 60 ms. Solo la que
   está viva, y solo una vez: al volver atrás no se repite, porque volver
   atrás es encontrar algo que ya estaba.
   ============================================================ */
.bienve-p[data-viva=true] > *{animation:bienve-llega .26s var(--e-capa) both}
.bienve-p[data-viva=true] > *:nth-child(2){animation-delay:.06s}
.bienve-p[data-viva=true] > *:nth-child(3){animation-delay:.12s}
.bienve-p[data-viva=true] > *:nth-child(4){animation-delay:.18s}
@keyframes bienve-llega{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============================================================
   PREFERS-REDUCED-MOTION · todo pasa a fundidos de 120 ms
   Nada se desplaza, nada rota, nada late. Lo que antes viajaba, aparece.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.12s !important;
    animation-iteration-count:1 !important;
    transition-duration:.12s !important;
  }
  .scroller,html.con-plaza .scroller{transform:none;opacity:1;transition:none}
  .capa-plaza{transform:none;visibility:hidden;opacity:0;transition:opacity .12s linear,visibility 0s linear .12s}
  .capa-plaza.abierta{opacity:1;visibility:visible;transition:opacity .12s linear,visibility 0s}
  .sheet{animation:aparecer .12s linear both}
  .sheet.yendose{animation:desaparecer .12s linear both}
  .panel,.panel[data-abierto=si]{transition:transform .12s linear}
  .item.cascada{animation:aparecer .12s linear both;animation-delay:0ms !important}
  .chip::before,.int-chip::before{transition:opacity .12s linear}
  .chip[aria-pressed=true]::before,.int-chip[aria-pressed=true]::before{transform:scale(1)}
  .chip.pop,.int-chip.pop{animation:none}
  .astro{transition:none}
  .astro-halo,.astro-nucleo,.astro-rayos{animation:none !important;opacity:.8}
  .astro-halo,.astro-nucleo{transform:translate(-50%,-50%) scale(1)}
  .astro-vos.pulso-uno span{animation:none;opacity:0}
  .fila-fantasma i{animation:none;background:var(--tinta-09)}
  .refresco[data-girando=si] svg{animation:none}
  .buscador:focus-within{transform:none}
  .buscador:focus-within .buscador-ico{transform:none}
  .bienve-puntos i[data-on=true]{transform:none}
  .bienve.solo-int .bienve-p-int,.bienve.solo-int .bienve-pie{animation:aparecer .12s linear both}
  #mapa.fundido{animation:aparecer .12s linear both}
  /* lo agregado el 22/9/2026. Nada se desplaza: lo que viajaba, aparece; y
     lo que tapaba la pantalla para cambiar de modo, directamente no está.
     Los escalonados se van todos a cero: escalonar es movimiento. */
  .astro.llegando,.astro.yendose{animation:none}
  html.morfando-modo,html.morfando-modo *,
  html.morfando-modo *::before,html.morfando-modo *::after{transition-duration:0s !important}
  .marca-modo .marca-nom::before,.marca-modo::before,
  html.morfando-modo .marca-modo .marca-nom::before{transition:none;transform:none}
  .vista.entrando{animation:aparecer .12s linear both}
  .vista.saliendo{animation:none;visibility:hidden;opacity:0}
  .tab.recien .tab-ico{animation:none}
  .pastilla.llega,.it-marca.llega{animation:aparecer .12s linear both;animation-delay:0ms !important}
  .plan-frase.cambiando{animation:desaparecer .12s linear both;animation-delay:0ms !important}
  .plan-frase.cambiada{animation:aparecer .12s linear both;animation-delay:0ms !important}
  .bienve-p[data-viva=true] > *{animation:none;opacity:1;transform:none;animation-delay:0ms !important}
}

/* En escritorio el panel deja de ser una hoja a todo el ancho y pasa a ser una
   tarjeta en la esquina, para no taparle el pie a la columna de la izquierda.
   Va al final del archivo a propósito: tiene que ganarle a `.panel` de arriba,
   que tiene la misma especificidad. */
@media (min-width:900px) and (min-height:520px){
  .panel{
    left:auto;right:28px;bottom:28px;width:min(430px,40vw);
    border:1px solid var(--tinta-18);border-radius:var(--r);
    max-height:min(64dvh,620px);
    /* acá el panel flota separado del borde: el faldón de papel del teléfono
       sería un rectángulo suelto sobre la página */
    box-shadow:none;
  }
  .panel:not([data-abierto=si]){transform:translateY(calc(100% - var(--panel-cerrado)))}
  .capa-plaza{transform:none;visibility:hidden;transition:opacity var(--t-capa) var(--e-capa),visibility 0s linear var(--t-capa);opacity:0}
  .capa-plaza.abierta{opacity:1;visibility:visible;transition:opacity var(--t-capa) var(--e-capa),visibility 0s}
  /* en escritorio la plaza no entra desde la derecha, así que la lista no se
     corre: se queda donde está y la plaza se funde encima */
  html.con-plaza .scroller{transform:none;opacity:1}
}

/* ============================================================
   LA TARJETA DE ARRIBA (17/9/2026)
   La primera plaza de la lista, semidesplegada: nombre, la frase grande del
   dato, el mapa en chico y un dato de interés. Es una fila más de la misma
   lista, con la misma interfaz; lo único distinto es que está abierta.
   ============================================================ */
.destacada{
  position:relative;
  margin:2px 0 0;padding:0 0 4px;
  border-bottom:1px solid var(--tinta-18);
}
.dest-abrir{
  width:100%;display:flex;flex-direction:column;gap:2px;
  padding:14px 44px 2px 2px;   /* el hueco de la derecha es el del chevron */
  border:0;background:transparent;text-align:left;cursor:pointer;
  color:inherit;font-family:inherit;
  transition:transform var(--t-toque) var(--e-salida),opacity var(--t-toque);
}
.dest-abrir:active{transform:scale(.99);opacity:.9}
.dest-nom{font-size:1.3125rem;font-weight:700;letter-spacing:-.035em;line-height:1.14}
.dest-meta{
  font-size:0.75rem;font-weight:500;letter-spacing:.01em;
  color:var(--tinta-45);font-variant-numeric:tabular-nums;
}
.dest-frase{
  margin-top:8px;
  font-size:clamp(1.0625rem,4.6vw,1.25rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.24;max-width:28ch;
}
.dest-frase b{font-weight:750}
.dest-frase[data-e=sol] b{color:var(--sol-txt)}
.dest-frase[data-e=sombra] b{color:var(--sombra)}
.dest-frase[data-e=medio] b{color:var(--medio-txt)}
/* la línea de lluvia de la tarjeta: la misma de la pantalla de la plaza, un
   punto más chica porque acá compite con la lista que sigue abajo */
.dest-lluvia{margin:8px 0 0;font-size:0.875rem}

/* lo plegable: el mapa y el dato de interés. Se pliega con un toque en el
   chevron o deslizando hacia arriba, y se anima solo con transform y opacity
   (marca/SISTEMA.md §9) salvo el alto, que acá no tiene nada abajo que
   rehacer: la lista se corre y listo. */
.dest-plegable{
  overflow:hidden;
  transition:max-height var(--t-pantalla) var(--e-capa),opacity var(--t-medio);
  max-height:340px;opacity:1;
}
.destacada[data-plegada=true] .dest-plegable{max-height:0;opacity:0}
.destacada[data-plegada=true] .dest-chevron svg{transform:rotate(180deg)}
.dest-mapa{position:relative;margin:10px 0 0}
#dest-mapa{
  display:block;width:100%;height:180px;
  border-radius:var(--r);background:var(--papel-2);
}
/* una tapa invisible encima del canvas: tocar el mapa abre la plaza, igual
   que tocar el nombre. El canvas no es un botón y no toma el toque solo. */
.dest-tapa{
  position:absolute;inset:0;border:0;background:transparent;cursor:pointer;
  border-radius:var(--r);
}
.dest-interes{margin:9px 0 2px}
.dest-finde{
  width:100%;display:flex;flex-direction:column;gap:2px;
  margin:10px 0 4px;padding:11px 13px;
  border:1px solid var(--tinta-18);border-radius:12px;
  background:var(--papel);text-align:left;cursor:pointer;
  color:inherit;font-family:inherit;
}
.dest-finde-tit{font-size:0.875rem;font-weight:650;letter-spacing:-.02em}
.dest-finde-sub{font-size:0.75rem;color:var(--tinta-45);line-height:1.35}
.dest-chevron{
  position:absolute;top:10px;right:-6px;
  width:40px;height:40px;display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;border-radius:50%;
}
.dest-chevron svg{
  width:20px;height:20px;fill:none;stroke:var(--tinta-45);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-medio) var(--e-capa);
}
@media (prefers-reduced-motion:reduce){
  .dest-plegable,.dest-chevron svg{transition:none}
}

/* ============================================================
   LA ANOTACIÓN DE INTERÉS · marca/SISTEMA.md §7bis
   Tres tamaños, y el tamaño lo decide el lugar, no el dato: una palabra en la
   fila, una frase en la tarjeta, rótulo y frase en el panel. Solo se anota lo
   que la plaza SÍ tiene: no existe la anotación en negativo.
   ============================================================ */

/* 1 · en la fila de la lista: UNA, debajo de la pastilla, en la columna
   derecha que ya existía. Así la fila no crece ni un píxel. */
.it-marca{
  display:inline-flex;align-items:center;gap:4px;max-width:132px;
  font-size:0.71875rem;font-weight:550;letter-spacing:.005em;line-height:1.2;
  color:var(--tinta-45);font-variant-numeric:tabular-nums;
}
.it-marca-ico{
  width:13px;height:13px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.it-marca-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 2 · en la tarjeta de arriba: DOS como mucho, con la frase entera */
.dest-anota{
  display:flex;align-items:flex-start;gap:7px;
  margin:0;font-size:0.8125rem;line-height:1.4;color:var(--tinta-70);
}
.dest-anota + .dest-anota{margin-top:5px}
.dest-anota-ico{
  width:15px;height:15px;flex:0 0 auto;margin-top:2px;
  fill:none;stroke:var(--tinta-45);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* 3 · en el panel de la plaza: TODAS, con el rótulo del interés arriba, en la
   etiqueta de marca/SISTEMA.md §2 */
.panel-anota + .panel-anota{margin-top:11px}
.panel-anota-rot{
  display:flex;align-items:center;gap:5px;margin-bottom:2px;
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinta-45);
}
.panel-anota-ico{
  width:13px;height:13px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.panel-anota-val{display:block;font-size:0.875rem;line-height:1.4;color:var(--tinta-70)}
/* EL PLIEGUE (mejora 21, marca/SISTEMA.md §7bis). El panel muestra tres
   anotaciones y guarda el resto acá. Es lo que recorta LUNA, donde no hay
   elección que las achique y salían las siete seguidas. El renglón que lo
   abre es el terciario de siempre (§7) y dice cuántas hay: nada desaparece,
   se sabe qué falta y está a un toque. No lleva caja ni filete propio: una
   caja más adentro del panel sería sumar una cosa a la pantalla que se está
   tratando de descargar. */
.panel-anota-mas{margin-top:12px;padding:6px 2px;min-height:44px}
.panel-anota-resto{margin-top:12px}
.panel-anota-resto>.panel-anota + .panel-anota{margin-top:11px}
@media (prefers-reduced-motion:no-preference){
  .panel-anota-resto:not([hidden]){animation:anotas-entran .2s var(--e-salida) both}
}
@keyframes anotas-entran{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============================================================
   LA TARJETA DEL COMERCIO (mejora 28, marca/SISTEMA.md §7 octies)

   Estas reglas están acá y no hacen nada: con el interruptor de
   `web/comercios.js` en `false`, `#comercio` queda vacío y `hidden`, así que
   no hay un solo nodo al que aplicarlas. Lo que NO se hace es esconder la
   tarjeta con CSS: si el apagado dependiera de una regla de estilo, un
   `display` mal puesto la publicaría. El apagado es de código.

   La forma es la de una anotación de interés, y a propósito: el comercio es
   un atributo más de la plaza y se somete a la misma regla (los atributos
   entran como pregunta y salen como filete gris, nunca como aviso). Lo único
   que la separa de una anotación es el filete izquierdo, que dice "esto es
   de otra naturaleza" sin gritarlo, y el naranja de una sola línea: la del
   sol de la vereda, que es lo que realmente se vende.
   ============================================================ */
.comercio{padding-bottom:2px}
.comercio-caja{
  display:block;width:100%;text-align:left;
  border:0;background:transparent;cursor:pointer;color:inherit;
  font:inherit;padding:2px 0 2px 11px;
  border-left:2px solid var(--tinta-18);
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-medio),opacity var(--t-toque);
}
.comercio-caja:active{opacity:.85}
@media (hover:hover){.comercio-caja:hover{border-left-color:var(--sol-txt)}}
/* el rótulo, en versalitas, igual que el de una anotación: dice qué es esto
   antes de decir quién es, y dice "el" para que la exclusividad se lea */
.comercio-rot{
  display:flex;align-items:center;gap:5px;margin-bottom:3px;
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.625rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinta-45);
}
.comercio-nom{display:block;font-size:0.875rem;line-height:1.4;color:var(--tinta)}
/* LA LÍNEA QUE SE VENDE. Cualquiera puede poner el nombre de un bar en una
   app; nadie más puede decir a qué hora se va el sol de su vereda. Es la
   única línea de la tarjeta con el naranja de texto, y por eso lo tiene. */
.comercio-sol{display:block;margin-top:2px;font-size:0.875rem;line-height:1.4;color:var(--sol-txt);font-weight:550}
/* la promo, que se prende y se apaga sola con el sol: gris, más chica, y
   siempre debajo del dato. Nunca existe sin él. */
.comercio-promo{display:block;margin-top:3px;font-size:0.8125rem;line-height:1.4;color:var(--tinta-70)}
.comercio-detalle{margin:9px 0 0 13px}
@media (prefers-reduced-motion:no-preference){
  .comercio-detalle:not([hidden]){animation:anotas-entran .2s var(--e-salida) both}
}
.comercio-nota{margin:0;font-size:0.75rem;line-height:1.45;color:var(--tinta-45)}
.comercio-acc{margin-top:10px}
.comercio-hecho{
  margin:0;font-size:0.8125rem;line-height:1.4;color:var(--tinta-70);font-weight:550;
}

/* el wordmark del inicio es un botón: toca y cambia a LUNA */
.marca-modo{
  border:0;background:transparent;padding:0;cursor:pointer;
  color:inherit;font-family:inherit;
  font-size:1.125rem;font-weight:800;letter-spacing:-.05em;line-height:1;
  display:inline-flex;align-items:center;gap:6px;
  -webkit-tap-highlight-color:transparent;
}

/* ============================================================
   LAS CUATRO PESTAÑAS (21/9/2026, V2-CONTRATO.md §3)
   Inicio, Buscar, Mapa y Más. Cada una es una "vista": todas siguen en el
   documento todo el tiempo y lo único que cambia es cuál se ve. Es a
   propósito y no es gratis: así la lista no pierde el scroll, el buscador no
   pierde lo escrito y el mapa no se vuelve a armar cada vez que se pasa por
   otra pestaña.
   ============================================================ */
.vista{
  /* la vista de atrás se corre y se apaga cuando entra la plaza, igual que
     antes hacía el scroller: la lista no desapareció, quedó atrás */
  transition:transform var(--t-capa) var(--e-capa),opacity var(--t-capa) var(--e-capa);
}
/* las tres nuevas van fijas encima del scroller, que es el inicio y ocupa su
   lugar en el flujo del documento */
.vista-planes,.vista-mapa,.vista-mas{
  position:fixed;inset:0;z-index:10;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--papel-2);
}
/* `visibility` y no `display:none`: con display la vista pierde el scroll y
   el campo del buscador se vacía de foco cada vez que se vuelve */
.vista:not(.activa){visibility:hidden;opacity:0;pointer-events:none;transition:none}
html.con-plaza .vista.activa{transform:translateX(-20%);opacity:.6}
html.arrastrando-plaza .vista.activa{transition:none}
@media (prefers-reduced-motion:reduce){
  .vista{transition:none}
  html.con-plaza .vista.activa{transform:none}
}

/* el hueco que deja la flecha de la cabecera de la plaza, para que el
   wordmark quede en el centro real y no corrido */
.barra-hueco{display:block;width:44px;height:44px;flex:0 0 auto}

/* ---------- la botonera ---------- */
.tabs{
  position:fixed;z-index:45;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--papel);
  border-top:1px solid var(--tinta-18);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--tabs-alto);padding:6px 4px 8px;
  border:0;background:transparent;cursor:pointer;
  color:var(--tinta-45);
  transition:color var(--t-medio),transform var(--t-toque) var(--e-salida),opacity var(--t-toque);
}
.tab[aria-selected=true]{color:var(--tinta)}
.tab:active{transform:scale(.97);opacity:.9}
.tab-ico{
  width:23px;height:23px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.tab[aria-selected=true] .tab-ico{stroke-width:1.9}
.tab-txt{
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.59375rem;letter-spacing:.11em;
  text-transform:uppercase;line-height:1;pointer-events:none;
}
/* la marca de la pestaña activa: un filete de tinta que crece desde el centro,
   como el relleno de los chips (marca/SISTEMA.md §9) */
.tab-marca{
  position:absolute;top:0;left:50%;
  width:22px;height:2px;border-radius:0 0 2px 2px;background:var(--tinta);
  transform:translateX(-50%) scaleX(0);
  transition:transform var(--t-medio) var(--e-capa);
}
.tab[aria-selected=true] .tab-marca{transform:translateX(-50%) scaleX(1)}
.tab:focus-visible{outline:2px solid var(--tinta);outline-offset:-3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.tab,.tab-marca{transition:none}}
/* en una pantalla ancha los cuatro botones no se estiran de punta a punta:
   quedan juntos en el medio, que es donde está el pulgar de nadie pero sí la
   mirada */
@media (min-width:900px){
  .tabs{grid-template-columns:repeat(4,minmax(0,140px));justify-content:center}
}
/* la bienvenida es lo único que hay en pantalla mientras dura */
html.con-bienve .tabs{visibility:hidden}

/* ---------- pestaña "Planes" ----------
   Qué vas a hacer en la plaza. Arriba las actividades, una encendida por vez
   (el chip de §7, sin una sola regla propia), y abajo la misma lista de
   plazas cercanas con UN renglón más: la recomendación, que es lo único que
   cambia al cambiar de actividad (V2-CONTRATO.md §3, "Planes"). */
.pantalla-planes,.pantalla-mas,.pantalla-mapa{background:var(--papel-2);gap:0}
.lista-planes{margin-top:2px}
/* La fila es la de la lista con un renglón más, así que no hereda `.item`:
   `.item` es una grilla de dos columnas con la pastilla a la derecha, y acá
   la frase ocupa el ancho entero. Mismo alto de toque, mismo filete. */
.plan-fila{
  width:100%;display:flex;flex-direction:column;align-items:stretch;gap:3px;
  padding:14px 2px;border:0;border-bottom:1px solid var(--tinta-09);
  background:transparent;text-align:left;cursor:pointer;min-height:66px;
  transition:background var(--t-medio),padding-left var(--t-medio),
             transform var(--t-toque) var(--e-salida),opacity var(--t-toque);
}
@media (hover:hover){.plan-fila:hover{background:var(--tinta-09);padding-left:8px}}
.plan-fila:active{transform:scale(.99);opacity:.9}
.plan-fila:focus-visible{outline:2px solid var(--tinta);outline-offset:-3px;border-radius:8px}
/* La recomendación. Lleva el color de la pastilla porque dice lo mismo que
   ella (ámbar el sol, marrón a medias, azul la sombra medida) y el gris de
   `nada`, que es NO SABEMOS y nunca "está en sombra" (marca/SISTEMA.md §7). */
.plan-frase{
  margin-top:5px;font-size:0.875rem;line-height:1.42;letter-spacing:-.012em;
  color:var(--tinta-70);max-width:46ch;
}
.plan-frase b{font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.plan-frase[data-e=sol] b{color:var(--sol-txt)}
.plan-frase[data-e=medio] b{color:var(--medio-txt)}
.plan-frase[data-e=sombra] b{color:var(--sombra)}
.plan-frase[data-e=nada]{color:var(--tinta-45)}
.plan-frase[data-e=nada] b{color:var(--tinta-45);font-weight:600}
.plan-frase[data-e=vacio]{color:var(--tinta-45);letter-spacing:.2em}
@media (prefers-reduced-motion:reduce){.plan-fila{transition:none}}

/* ---------- pestaña "Mapa" ----------
   Acá solo está el marco. Lo que se dibuja adentro lo pone window.MapaCiudad,
   que vive en web/mapa-ciudad.js y se escribe aparte. */
.mapa-ciudad-marco{
  flex:1 1 auto;min-height:240px;position:relative;
  margin-top:12px;
  border:1px solid var(--tinta-18);border-radius:12px;
  background:var(--papel);overflow:hidden;
}
.mapa-ciudad{position:absolute;inset:0}
.mapa-ciudad canvas,.mapa-ciudad svg{display:block;max-width:100%}
.mapa-ciudad-espera{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-align:center;padding:24px;
}
.mapa-ciudad-espera .estado-txt{margin:6px 0 0}
.mapa-ciudad-espera .estado-sub{margin:2px 0 0}

/* ============================================================
   LA FRANJA (23/9/2026 · marca/SISTEMA.md §7 quater)
   Un renglón arriba, y hay UNO SOLO: o el dato está viejo, o por esta zona no
   tenemos alumbrado, o es el dato del día. Nunca dos. No lleva ninguno de los
   tres acentos: la pastilla de las filas sigue siendo lo único con color.
   ============================================================ */
.franja{
  margin:8px 0 0;padding:8px 10px;
  background:var(--tinta-09);border-radius:var(--r);
  font-size:0.78125rem;line-height:1.42;color:var(--tinta-70);
}
.franja b{font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.franja .franja-rot{
  display:block;margin:0 0 2px;
  font-stretch:var(--w-narrow);font-weight:600;font-size:0.59375rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-45);
}
/* el inicio ya trae la tarjeta pegada abajo: la franja se separa de ella */
#franja-inicio{margin-bottom:12px}
#franja-planes{margin-bottom:4px}

/* ============================================================
   LA PREGUNTA DE VUELTA (23/9/2026 · marca/SISTEMA.md §7 sexies)
   Una pregunta, dos botones de una palabra, y se va. Sin caja y sin color:
   está abajo de las acciones y no puede competir con el botón primario.
   ============================================================ */
.coincide{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:10px;
  border-top:1px solid var(--tinta-09);
}
.coincide-q{margin:0;font-size:0.8125rem;line-height:1.35;color:var(--tinta-45)}
.coincide-acc{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.coincide-acc .acc-txt{font-size:0.875rem;min-height:34px;padding:0 2px}
.coincide[data-hecho=si]{justify-content:flex-start}

/* ============================================================
   TU SOL (23/9/2026 · marca/SISTEMA.md §11)
   Lo único de la app que es de la persona. Dos renglones y un botón para
   borrarlo, arriba de "mis plazas".
   ============================================================ */
.mas-misol{margin-top:26px}
.mas-misol .eyebrow{margin:0 0 2px}
.misol-dato{margin:0;font-size:0.9375rem;line-height:1.5;color:var(--tinta)}
.misol-dato b{font-weight:700;font-variant-numeric:tabular-nums}
.misol-nota{margin:4px 0 0;font-size:0.71875rem;line-height:1.4;color:var(--tinta-45);max-width:42ch}
.misol-borrar{margin-top:6px;font-size:0.8125rem;color:var(--tinta-45);min-height:36px;padding:0 2px}

/* ============================================================
   MODO LUNA (17/9/2026)
   La única excepción a "papel siempre" (marca/SISTEMA.md §8bis). No se
   hereda del sistema y no se activa sola: se entra tocando el wordmark y se
   sale tocándolo de nuevo. Lo que cambia son los tokens y nada más: ni un
   componente tiene una regla propia para LUNA.
   ============================================================ */
/* Los mismos tokens los toma la bienvenida mientras se mira la pantalla de la
   noche (la cuarta de seis): una sola lista de tokens para los dos, así no
   hay dos noches que mantener de acuerdo. */
html[data-modo=luna],.bienve[data-oscuro=true]{
  color-scheme:dark;
  --papel:#14100B;
  --papel-2:#1E1913;
  --papel-3:#2A231A;
  --tinta:#F2ECE1;
  --tinta-70:rgba(242,236,225,.80);
  --tinta-45:rgba(242,236,225,.60);
  --tinta-18:rgba(242,236,225,.20);
  --tinta-09:rgba(242,236,225,.10);
  /* el naranja de texto sobre papel no llega a contraste sobre tinta: acá el
     que contrasta es el vivo, y la sombra pasa a un azul que se ve */
  --sol-txt:#FFA24D;
  --sombra:#9FB0DA;
  --medio-txt:#D9A68A;
  --past-sol:rgba(255,162,77,.14);
  --past-sol-borde:rgba(255,162,77,.30);
  --past-medio:rgba(217,166,138,.14);
  --past-medio-borde:rgba(217,166,138,.28);
  --past-sombra:rgba(159,176,218,.13);
  --past-sombra-borde:rgba(159,176,218,.28);
  /* Los tres que faltaban, medidos el 23/9/2026 (mejora 25). LUNA es donde el
     papel deja de proteger: un token que no se da vuelta acá se queda con el
     valor del día y deja de llegar.
       · el filete de los controles: el del día da 1,73 sobre la noche
       · el acento lleno: en LUNA el naranja es el fondo claro, así que el
         texto de encima pasa a ser la tinta de la noche (9,5:1)
       · el verde de "listo": el de SOL daba 2,94 sobre la noche */
  --filete-btn:#746D62;    /* 3,70 · 3,41 · 3,03 sobre los tres papeles */
  --acento-lleno:#FFA24D;
  --sobre-acento:#14100B;  /* 9,5:1 */
  --ok:#3E9E72;            /* 5,72:1 (el de SOL daba 2,94) */
}
html[data-modo=luna] body{background:var(--papel);color:var(--tinta)}
/* el chip encendido va en tinta llena: sobre papel es negro sobre claro, y
   acá es claro sobre oscuro. El token ya cambió, así que sale solo. */

/* ============================================================
   1.0.3 (23/10/2026): LA PROPUESTA DE AVISOS Y "AVISAME SI SE ABRE"
   ============================================================ */
/* La hoja chica que aparece una sola vez al guardar una plaza. Una pregunta,
   una frase y dos respuestas; el resultado reemplaza a la frase. */
.sheet-propuesta h2{font-size:1.375rem;line-height:1.18;max-width:20ch}
.sheet-propuesta .eyebrow{margin:0 0 6px}
.sheet-propuesta .prop-sub{margin-bottom:18px;font-size:0.9375rem;color:var(--tinta-70)}
.sheet-propuesta .btn{width:100%}
.sheet-propuesta .sheet-cerrar{margin-top:10px}
.prop-res{margin:4px 0 18px;font-size:0.9375rem;line-height:1.45;color:var(--tinta)}
.prop-res b{font-weight:650}
/* la fila de "Más" que es un interruptor: a la derecha, la palabra */
.mas-estado{flex:0 0 auto;font-size:0.8125rem;font-weight:650;letter-spacing:.02em;color:var(--tinta-45)}
.mas-se-abre[aria-checked=true] .mas-estado{color:var(--sol-txt)}
.mas-se-abre[aria-disabled=true]{cursor:default}
.mas-se-abre[aria-disabled=true] .mas-fila-nom{color:var(--tinta-45)}