/* ============================================================
   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{
  /* 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);

  /* 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;

  --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;
}

@media (prefers-color-scheme:dark){
  :root{
    --papel:#100E0C;
    --papel-2:#1A1714;
    --papel-3:#262119;
    --tinta:#F4EEE3;
    --tinta-70:rgba(244,238,227,.80);
    --tinta-45:rgba(244,238,227,.62);
    --tinta-18:rgba(244,238,227,.18);
    --tinta-09:rgba(244,238,227,.09);
    --sol:#FF7A1F;
    --sol-vivo:#FF8C2E;
    --sol-txt:#FF9542;   /* sobre fondo oscuro el naranja claro ya contrasta */
    --sol-alto:#FFC33D;
    --sombra:#3C4868;
    --m0:#1C2438;
    --m1:#3A3B52;
    --m2:#6E4A44;
    --m3:#C2601C;
    --m4:#FA8F13;
    --m5:#FFCB3B;
    --ok:#4FBF8B;
    --grano:.07;
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--display);
  font-size:16px;
  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-color-scheme:dark){.grano{mix-blend-mode:screen}}
@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}

/* ---------- scroller de dos pantallas ---------- */
.scroller{
  height:100dvh;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.pantalla{
  scroll-snap-align:start;
  min-height:100dvh;
  padding:calc(env(safe-area-inset-top) + 14px) var(--gutter) calc(env(safe-area-inset-bottom) + 14px);
  display:flex;flex-direction:column;
  position:relative;
}
/* la respuesta entra entera en una pantalla: nunca scrollea */
#pantalla-sol{gap:0;height:100dvh;overflow:hidden}

/* ---------- barra superior ---------- */
.barra{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--tinta-18);
  flex:0 0 auto;
}
.marca{display:flex;flex-direction:column;gap:1px}
.marca-nom{
  font-size:20px;font-weight:800;letter-spacing:-.05em;line-height:1;
  display:inline-flex;align-items:center;gap:6px;
}
.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);
}
.marca-sub{
  font-stretch:var(--w-narrow);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-45);
}
.barra-der{display:flex;align-items:center;gap:10px}
.reloj{
  font-size:15px;font-weight:600;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;color:var(--tinta-70);
}
.chip-prec{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--tinta-18);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)}
.chip-letra{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--papel);
  background:var(--tinta);
}
.chip-prec[data-p="A"] .chip-letra{background:var(--ok);color:#fff}
.chip-prec[data-p="B"] .chip-letra{background:var(--sol);color:#fff}
.chip-prec[data-p="C"] .chip-letra{background:var(--sombra);color:#fff}
.chip-txt{
  font-stretch:var(--w-narrow);font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-45);
}
/* flotante: una nota larga nunca puede empujar la respuesta fuera de pantalla */
.prec-detalle{
  position:absolute;z-index:20;
  top:calc(env(safe-area-inset-top) + 72px);
  left:var(--gutter);right:var(--gutter);max-width:46ch;
  padding:12px 14px;border-radius:var(--r);
  background:var(--papel-2);border:1px solid var(--tinta-18);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.45);
  font-size:13.5px;line-height:1.45;color:var(--tinta-70);
  max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;
  animation:aparecer .25s ease both;
}
.prec-detalle p{margin: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:22px;font-weight:700;letter-spacing:-.03em}
.estado-sub{margin:0;max-width:30ch;font-size:14.5px;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(28px,8vw,40px);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(--tinta-18);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:16px;font-weight:650;letter-spacing:-.025em;line-height:1.15}
.zona-n{
  font-stretch:var(--w-narrow);font-weight:600;font-size:10px;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(--tinta-18);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:10px;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 ---------- */
.respuesta{
  flex:1 1 0;display:flex;flex-direction:column;min-height:0;
  padding-bottom:24px;
}
.resp-cabeza{padding-top:14px;flex:0 0 auto}
.eyebrow{
  margin:0 0 6px;font-stretch:var(--w-narrow);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sol-txt);
}
.lugar{margin:0;display:flex;flex-direction:column;gap:3px}
.lugar-nom{
  font-size:clamp(27px,7.6vw,38px);font-weight:800;letter-spacing:-.045em;line-height:1.02;
}
.lugar-meta{
  font-size:11px;font-weight:500;letter-spacing:.05em;color:var(--tinta-45);
  font-variant-numeric:tabular-nums;
}

.veredicto{flex:0 0 auto;padding:14px 0 12px}
.cifra{display:flex;align-items:baseline;gap:6px;line-height:.86}
.cifra-val{
  font-size:clamp(58px,18.5vw,104px);font-weight:800;letter-spacing:-.045em;
  font-stretch:var(--w-expand);font-variant-numeric:tabular-nums;
  background:linear-gradient(96deg,var(--sol) 0%,var(--sol-alto) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:entrar-cifra .55s cubic-bezier(.2,.8,.25,1) both;
}
.cifra.sin-sol .cifra-val{
  font-size:clamp(42px,12.5vw,64px);letter-spacing:-.05em;
  background:linear-gradient(96deg,var(--sombra) 0%,var(--tinta) 90%);
  -webkit-background-clip:text;background-clip:text;
}
.cifra-uni{
  font-size:clamp(13px,3.6vw,17px);font-weight:600;
  letter-spacing:.01em;color:var(--tinta-45);
}
/* sin filter: rompe el compositing del background-clip:text en Chrome */
@keyframes entrar-cifra{
  from{opacity:0;transform:translateY(14px) scale(.965)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.cifra-val{animation:none}}
.frase{
  margin:9px 0 0;font-size:clamp(16.5px,4.5vw,19px);font-weight:500;
  letter-spacing:-.018em;line-height:1.32;max-width:26ch;
}
.frase b{font-weight:750}
.matiz{
  margin:8px 0 0;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--tinta-70);line-height:1.35;
}
.matiz::before{
  content:"";flex:0 0 auto;width:16px;height:9px;border-radius:5px;
  background:linear-gradient(90deg,var(--tinta-18),var(--tinta-45));
}

/* ---------- mapa ---------- */
.mapa-caja{
  margin:0;flex:1 1 0;min-height:96px;
  display:flex;flex-direction:column;gap:6px;
}
#mapa{
  flex:1;width:100%;min-height:0;display:block;
  border-radius:var(--r);
  background:var(--papel-2);
  border:1px solid var(--tinta-09);
  touch-action:manipulation;
}
.mapa-pie{
  display:flex;align-items:center;gap:11px;flex-wrap:nowrap;overflow:hidden;
  font-stretch:var(--w-narrow);font-weight:600;font-size:9px;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)}
.mapa-esc{margin-left:auto}

/* ---------- 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:13px;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:10.5px;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(--sol);outline-offset:3px;border-radius:11px}
.tiempo-ejes{
  display:flex;justify-content:space-between;margin-top:5px;
  font-size:9.5px;font-weight:500;letter-spacing:.06em;color:var(--tinta-45);
  font-variant-numeric:tabular-nums;
}

/* ---------- acciones ---------- */
.acciones{flex:0 0 auto;padding-top:13px;display:flex;flex-direction:column;gap:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--tinta);
  background:var(--tinta);color:var(--papel);cursor:pointer;
  font-size:16px;font-weight:650;letter-spacing:-.015em;
  transition:transform .14s cubic-bezier(.2,.8,.25,1),box-shadow .18s,filter .18s;
}
.btn:active{transform:scale(.975)}
.btn-sol{
  background:linear-gradient(96deg,var(--sol) 0%,var(--sol-vivo) 62%,var(--sol-alto) 130%);
  border-color:transparent;color:#fff;
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--sol) 70%,transparent);
}
.btn-sol:hover{filter:saturate(1.08) brightness(1.03)}
.btn-fantasma{background:transparent;color:var(--tinta);border-color:var(--tinta-18)}
.btn-fantasma:hover{border-color:var(--tinta-45)}
.ico{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.acciones-min{display:flex;align-items:center;justify-content:space-between;gap:12px}
.btn-min{
  border:0;background:transparent;cursor:pointer;padding:9px 2px;min-height:40px;
  font-stretch:var(--w-narrow);font-weight:600;font-size:11px;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 .18s,text-decoration-color .18s;
}
.btn-min:hover{color:var(--tinta);text-decoration-color:var(--tinta-45)}
.btn-reporte{color:var(--tinta-70)}

/* 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 16px;border-bottom:1px solid var(--tinta-18);flex:0 0 auto}
.lista-cab h2{margin:0;font-size:clamp(26px,7vw,34px);font-weight:800;letter-spacing:-.045em}
.lista-sub{margin:5px 0 0;font-size:14px;color:var(--tinta-45)}
.lista-acc{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.btn-zona{color:var(--tinta-70)}
.btn-ubic{color:var(--sol-txt);text-decoration-color:currentColor}
.lista{list-style:none;margin:0;padding:0;flex:1}
.item{
  width:100%;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  padding:15px 2px;border:0;border-bottom:1px solid var(--tinta-09);
  background:transparent;text-align:left;cursor:pointer;min-height:64px;
  transition:background .16s,padding-left .16s;
}
.item:hover{background:var(--tinta-09);padding-left:8px}
.item[aria-current=true]{padding-left:10px;box-shadow:inset 3px 0 0 var(--sol)}
.it-nom{font-size:17px;font-weight:650;letter-spacing:-.025em;line-height:1.18}
.it-sub{
  grid-column:1;font-size:10.5px;font-weight:500;letter-spacing:.05em;
  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;gap:5px}
.it-sol{
  font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;white-space:nowrap;
}
.it-sol[data-e=sol]{color:var(--sol-txt)}
.it-sol[data-e=medio]{color:var(--tinta-70)}
.it-sol[data-e=sombra]{color:var(--sombra)}
@media (prefers-color-scheme:dark){.it-sol[data-e=sombra]{color:#8FA2CE}}
.barrita{width:66px;height:5px;border-radius:99px;background:var(--tinta-18);overflow:hidden}
.barrita i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sol),var(--sol-alto))}
.pie{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--tinta-09);
  font-size:12px;line-height:1.5;color:var(--tinta-45);max-width:44ch;flex:0 0 auto;
}
.pie span{display:block;font-size:10px;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:14px;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:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-45);
}
.form-decir textarea,
.form-decir input,
.form-decir select{
  font:inherit;font-size:16px;color:var(--tinta);
  background:var(--papel-2);
  border:1px solid var(--tinta-18);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(--sol);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:10px;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:12px;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:13.5px;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:9.5px;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:10px;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;
}
.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);
  box-shadow:0 -18px 44px -18px rgba(0,0,0,.5);
  animation:subir .3s cubic-bezier(.2,.85,.25,1) both;
  max-width:520px;margin:0 auto;
}
.sheet-tira{width:40px;height:4px;border-radius:99px;background:var(--tinta-18);margin:0 auto 14px}
.sheet h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.04em}
.sheet-sub{margin:5px 0 16px;font-size:14px;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(--tinta-18);
  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:16px;font-weight:650;letter-spacing:-.02em}
.op-txt small{font-size:13px;color:var(--tinta-45)}
.sheet-cerrar{display:block;margin:14px auto 0}
@keyframes subir{from{transform:translateY(100%)}to{transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@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(--tinta-18);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:10px;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 cifra se reanima 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:13.5px;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:13px;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(--tinta-18);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:18px;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:10px;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(--tinta-18);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:13px;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(--sol);color:#fff}
.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:22px}
  .grande-sub{font-size:11px}
  .grande-pie .tiempo-pista{height:60px}
}

.zonas-nota{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--tinta-45);text-align:center;max-width:36ch}
.lista-nota{margin:2px 0 0;font-size:12px;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:13px;line-height:1.4;color:var(--tinta-45)}
.sectores{display:flex;flex-wrap:wrap;gap:7px}
.sector{
  border:1px solid var(--tinta-18);background:var(--papel);border-radius:999px;
  padding:8px 13px;min-height:38px;cursor:pointer;
  font-size:14px;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:15px;line-height:1.4;color:var(--tinta-70);
  display:flex;align-items:flex-start;gap:8px;
}
.mia-lugar b{font-weight:650;color:var(--tinta)}
.mia-lugar small{font-size:12.5px;color:var(--tinta-45)}
.mia-lugar[data-hay=si]::before{
  content:"";flex:0 0 auto;margin-top:5px;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:15px;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:14px;color:var(--tinta-70)}
.av-select{
  font:inherit;font-size:14px;font-weight:600;color:var(--tinta);
  background:var(--papel);border:1px solid var(--tinta-18);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(--sol)}
.av-select-chico{padding:3px 24px 3px 9px;font-size:13px;margin:0 3px}
.av-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;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:14.5px;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:14.5px;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:13.5px;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(env(safe-area-inset-bottom) + 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:15.5px;font-weight:700;letter-spacing:-.025em}
.invita-sub{margin:0;font-size:13px;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:14px}
@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(env(safe-area-inset-bottom) + 22px);
  background:var(--tinta);color:var(--papel);
  padding:12px 18px;border-radius:999px;max-width:calc(100vw - 36px);
  font-size:14px;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:13.5px;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:10.5px;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:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sol-txt);
}
.finde-acceso-tit{
  font-size:14px;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:15px;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:13.5px;line-height:1.4;color:var(--tinta);
}
.finde-tit{
  margin:2px 0 0;font-size:clamp(26px,7vw,36px);font-weight:800;letter-spacing:-.045em;line-height:1.04;
}
.finde-resumen{margin:0;font-size:clamp(15.5px,4.2vw,18px);line-height:1.38;color:var(--tinta-70);max-width:40ch}
.finde-dias{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.finde-dia{
  padding:11px 12px 12px;border-radius:var(--r);border:1px solid var(--tinta-09);
  background:var(--papel-2);display:flex;flex-direction:column;gap:4px;min-width:0;
}
.finde-dia-nom{font-size:15px;font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:7px}
.finde-dia-nom::before{content:"";width:9px;height:9px;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-txt{margin:0;font-size:13px;line-height:1.38;color:var(--tinta-70)}
.finde-dia-sol{font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--tinta-45);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:16px;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:9.5px;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:13px;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:10px;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:15.5px;font-weight:650;letter-spacing:-.025em;line-height:1.18}
.fp-lado{grid-column:1;font-size:13px;line-height:1.35;color:var(--tinta-70)}
.fp-nota{grid-column:1;font-size:12px;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:12px;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:9.5px;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:14.5px;line-height:1.42;color:var(--tinta)}
.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:14px;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:12.5px;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 1fr}
  .finde-alerta{grid-column:1 / -1}
  .finde-tit{grid-column:1;font-size:40px}
  .finde-resumen{grid-column:1}
  .finde-dias{grid-column:1;align-self:start}
  .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(--sol);outline-offset:3px;border-radius:6px}

/* ---------- ancho grande: dos columnas ---------- */
@media (min-width:900px) and (min-height:520px){
  .scroller{scroll-snap-type:none}
  .pantalla{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;
    padding-bottom:34px;
  }
  .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;
  }
  .resp-cabeza{grid-column:1;grid-row:1;padding-top:26px}
  .veredicto{grid-column:1;grid-row:2;padding-top:20px}
  .acciones{grid-column:1;grid-row:3;align-self:end;max-width:420px;padding-bottom:8px}
  .mapa-caja{grid-column:2;grid-row:1 / span 2;min-height:300px;padding-top:26px}
  .tiempo{grid-column:2;grid-row:3;align-self:start}
  .tirador{display:none}
  .lugar-nom{font-size:clamp(34px,3.4vw,48px)}
  .cifra-val{font-size:clamp(84px,8vw,128px)}
  .frase{font-size:20px;max-width:24ch}
  .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}
}

/* pantallas muy bajas: achicamos la cifra y el mapa antes que romper */
@media (max-height:680px) and (max-width:899px){
  .cifra-val{font-size:clamp(50px,15vw,70px)}
  .resp-cabeza{padding-top:8px}
  .veredicto{padding:10px 0 8px}
  .mapa-caja{min-height:104px}
  .tiempo-pista{height:46px}
  .btn{min-height:48px}
}