:root{
  --bg:#0b1020; --panel:#121a30; --panel2:#0f1628; --line:#223052;
  --txt:#e8eefc; --muted:#8aa0c8; --accent:#39b6ff; --accent2:#7cf0c6;
  --warn:#ffb648; --bad:#ff6b6b; --ok:#4dd98b;
}
*{box-sizing:border-box}
#faltanArchivos{display:none!important}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:linear-gradient(180deg,#0f1830,#0b1020);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:34px;height:34px;border-radius:9px;object-fit:cover;background:#0b1220;box-shadow:0 0 0 1px rgba(88,166,255,.28)}
.brand-txt h1{margin:0; font-size:20px; letter-spacing:.5px}
.brand-txt .ver{color:var(--accent); font-weight:600}
.brand-txt p{margin:2px 0 0; font-size:12px; color:var(--muted)}
/* El oficio de la app en una línea: radar + río. Se esconde en el teléfono. */
.brand-txt .tagline{font-size:10.5px; letter-spacing:.3px; color:#7fb4e8; text-transform:uppercase}
/* La firma del autor: es lo único de la barra que no cambia nunca, así que va
   más discreta que la línea del punto y se mantiene en la vista teléfono. */
.brand-txt .credit{margin:1px 0 0; font-size:11px; letter-spacing:.2px; opacity:.72}
.status{display:flex; align-items:center; gap:12px}
.clock{font-variant-numeric:tabular-nums; font-size:14px; color:var(--accent2)}
.btn{
  background:#17233f; color:var(--txt); border:1px solid var(--line);
  padding:7px 12px; border-radius:8px; cursor:pointer; font-size:13px;
}
.btn:hover{background:#1d2c4e; border-color:var(--accent)}
.btn.active{background:#1d3a4e; border-color:var(--accent); color:var(--accent2)}
/* Botón de nubes: va solo en la barra, es la capa estrella y se ve encendida */
.btn-cloud{font-weight:600; border-color:#2b436e}
.btn-cloud.active{
  background:linear-gradient(180deg,#17507a,#123553); border-color:var(--accent);
  color:#e6f6ff; box-shadow:0 0 0 1px rgba(57,182,255,.35), 0 2px 10px rgba(57,182,255,.22);
}
/* Botón de rayos: el .btn.active azul no se distinguía del de "Viento" apagado,
   y acá importa saber si la capa está o no (un rayo puede ser la única alerta).
   Amarillo = el color del dato, para que el botón y el mapa digan lo mismo. */
.btn-rayo{font-weight:600; border-color:#4a3a12}
.btn-rayo.active{
  background:linear-gradient(180deg,#5a4413,#332708); border-color:#c9a227;
  color:#ffe98a; box-shadow:0 0 0 1px rgba(255,223,59,.3), 0 2px 10px rgba(255,177,39,.22);
}
/* Layout */
.layout{flex:1; display:grid; grid-template-columns:1fr 400px; min-height:0}
@media (max-width:1280px){.layout{grid-template-columns:1fr 360px}}
@media (max-width:1040px){
  .layout{grid-template-columns:1fr; grid-template-rows:minmax(56vh,1fr) auto}
  .panel{border-left:0; border-top:1px solid var(--line)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .conv-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.map-wrap{position:relative; min-height:0}
#map{position:absolute; inset:0; background:#0a0f1e}
/* Vista alternativa: widget oficial de RainViewer */
.rv-wrap{position:absolute; inset:0; z-index:650; background:#0a0f1e}
.rv-wrap[hidden]{display:none}
.rv-frame{width:100%; height:100%; border:0; display:block}
.rv-tag{
  position:absolute; right:12px; bottom:12px; z-index:660;
  background:rgba(13,20,38,.86); border:1px solid var(--line);
  border-radius:8px; padding:5px 9px; font-size:11px; color:var(--muted);
  backdrop-filter:blur(4px); pointer-events:none;
}
.map-error{
  position:absolute; inset:0; z-index:700; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:4px;
  padding:24px; background:rgba(10,15,30,.92); color:var(--txt);
  font-size:14px; line-height:1.6;
}
.map-error code{background:#17233f; border:1px solid var(--line); border-radius:6px; padding:2px 6px; font-size:12px}
/* Tarjeta que tapa TODO cuando el index.html se abrió con doble clic (file://):
   no es un aviso encima del mapa, porque detrás no hay nada que dejar ver. Por
   eso el z-index le gana a la .topbar (1200): si no, la barra tapa el título. */
.local-aviso{
  position:fixed; inset:0; z-index:1400; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
  padding:34px 26px 40px; background:#0a0f1e; color:var(--txt);
  font-size:15px; line-height:1.62;
}
.local-aviso p{max-width:760px; margin:0}
.local-aviso .la-k{font-size:12px; letter-spacing:1.4px; color:var(--muted); text-transform:uppercase}
.local-aviso .la-t{font-size:24px; font-weight:800; line-height:1.25}
.local-aviso .la-h{font-weight:800; margin-top:12px; padding-left:11px; border-left:4px solid var(--accent2)}
.local-aviso .la-p{margin-top:20px; color:var(--muted); font-size:12.5px}
/* Badge de hora del cuadro (observado / pronóstico) */
.ts-badge{
  position:absolute; left:58px; top:12px; z-index:600;
  display:flex; flex-direction:column; gap:2px; min-width:120px;
  background:rgba(13,20,38,.86); border:1px solid var(--line);
  border-left:4px solid var(--accent2); border-radius:10px;
  padding:8px 12px; backdrop-filter:blur(4px);
}
.ts-badge .ts-time{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.ts-badge .ts-kind{font-size:10px; letter-spacing:.8px; color:var(--muted)}
.ts-badge.observed{border-left-color:var(--ok)}
.ts-badge.observed .ts-kind{color:var(--ok)}
.ts-badge.forecast{border-left-color:var(--warn)}
.ts-badge.forecast .ts-kind{color:var(--warn)}
/* "Acá no cae nada, pero está lloviendo allá": chip encima del mapa */
.afuera-chip{
  position:absolute; left:58px; top:92px; z-index:600;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:min(42%,290px);
  background:rgba(13,20,38,.9); border:1px solid var(--line);
  border-left:4px solid var(--accent2); border-radius:10px;
  padding:7px 11px; backdrop-filter:blur(4px); cursor:pointer;
  color:var(--fg); font:600 12px/1.25 system-ui; text-align:left;
}
.afuera-chip:hover{background:rgba(24,36,62,.95); border-left-color:var(--ok)}
.afuera-chip .ac-km{color:var(--accent2); font-weight:800; letter-spacing:.3px}
.afuera-chip .ac-donde{color:var(--muted); font-weight:500}
.afuera-chip[hidden]{display:none}
/* Legend */
.legend{
  position:absolute; left:12px; bottom:84px; z-index:600;
  background:rgba(13,20,38,.86); border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; width:220px; backdrop-filter:blur(4px);
}
.legend-title{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}
.legend-bar{
  height:10px; margin:6px 0 4px; border-radius:5px;
  /* La escala real del mosaico (Universal Blue de RainViewer), no la NEXRAD
     genérica: los colores de acá son los mismos píxeles que se ven en el mapa. */
  background:linear-gradient(90deg,
    #928871 0%,#decf97 15%,#88ddee 17%,#00a3e0 25%,#0077aa 33%,#005b8e 42%,#004768 48%,
    #ffee00 50%,#ffaa00 58%,#ff8100 65%,#ff4400 67%,#c10000 75%,#5d0000 82%,
    #ffaaff 83%,#ff4eff 92%,#ffffff 100%);
}
.legend-labels{display:flex; justify-content:space-between; font-size:10px; color:var(--muted)}
/* Rótulos colocados sobre su propio tramo de la barra, no repartidos a ojo. */
.legend-labels.ramp{display:flex; gap:0}
.legend-labels.ramp span{text-align:left; white-space:nowrap; font-size:9.5px}
/* Los números van sobre su tramo de la barra y las palabras, en el mismo orden,
   debajo: en un cartel de 220 px las dos cosas en una sola línea se pegaban
   ("5 · débil (llovizna)25 · moderada") y no se leía ninguna. */
.legend-words{margin-top:3px; font-size:9.5px; line-height:1.3; color:var(--muted)}
/* Los dos símbolos nuevos, en el mismo cartel de 220 px: si se los deja con la
   letra por defecto parten la leyenda en dos y tapa el mapa. */
.legend-sym{
  margin-top:7px; padding-top:6px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px;
  font-size:9.5px; line-height:1.35; color:var(--muted);
}
.legend-sym b{font-weight:700; margin-right:3px}
.legend-sym .ls-rayo{color:#ffdf3b}
.legend-sym .ls-nube{color:#a9c6e8}
/* Capas: nubes / viento / movimiento */
/* Capas: rayos / viento / movimiento.
   Una fila de botones arriba a la derecha, no una columna con título y
   párrafos: la columna anterior se comía una franja del mapa entero y justo
   arriba a la derecha es donde caen las tormentas del norte. */
.layers{
  position:absolute; right:12px; top:12px; z-index:600;
  display:flex; flex-direction:column; align-items:flex-end; gap:5px;
  max-width:min(46%,330px); pointer-events:none;
}
.layers-row{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; pointer-events:auto}
.btn-layer{font-size:12px; padding:6px 10px; background:rgba(13,20,38,.86); backdrop-filter:blur(4px)}
.layer-note{
  font-size:10.5px; color:var(--muted); line-height:1.35; text-align:right;
  background:rgba(13,20,38,.82); border:1px solid var(--line);
  border-radius:8px; padding:3px 8px; backdrop-filter:blur(4px); pointer-events:auto;
}
/* El único cartel del mapa que tiene que verse también en el teléfono: si el
   radar nos está dosificando y no lo decimos, la pantalla en blanco se lee como
   "la app no anda". Con el aviso puesto, se ve que está esperando y por qué. */
.radar-aviso{color:var(--warn); border-color:rgba(255,182,72,.5); max-width:min(64vw,320px)}
/* La leyenda del viento es UNA línea apoyada sobre el reproductor, abajo a la
   derecha: ahí no tapa ninguna tormenta. Antes era un recuadro de seis renglones
   pegado a las capas y tapaba la esquina del mapa. */
.wind-strip{
  position:absolute; right:12px; bottom:96px; z-index:600;
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  font-size:10.5px; color:var(--muted);
  background:rgba(13,20,38,.82); border:1px solid var(--line);
  border-radius:9px; padding:4px 9px; backdrop-filter:blur(4px);
}
.wind-strip[hidden]{display:none}
.wind-strip .ws-k{color:var(--txt); font-weight:600}
.wind-strip .ws-row{display:flex; align-items:center; gap:1px; white-space:nowrap}
.wl-arrow{
  display:inline-block; width:0; height:0; margin-right:4px;
  border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:9px solid var(--muted);
}
.wl-arrow.c1{border-left-color:#7cf0c6}
.wl-arrow.c2{border-left-color:#ffd24a}
.wl-arrow.c3{border-left-color:#ff8a3c}
.wl-arrow.c4{border-left-color:#ff6b6b}
/* Las partículas de viento van en un canvas propio, encima de las capas de
   mapas (pane 400) pero debajo de las flechas de tormenta y los controles. */
.wind-canvas{position:absolute; left:0; top:0; z-index:450; pointer-events:none}
/* La proyección va por debajo de las flechas (450) y encima del agua actual:
   es el "después" de esa misma lluvia, no una capa nueva que la tape. */
.cast-canvas{position:absolute; left:0; top:0; z-index:440; pointer-events:none}
/* Flechas (viento del modelo, células del radar, deriva de nubes) */
.arrow{background:none; border:0}
.arrow svg{overflow:visible; transform-origin:50% 50%}
.arrow.viento path{stroke-width:2.2}
.arrow.celula path{stroke-width:3}
.arrow.nube path{stroke-width:3.2}
.arrow.nube svg{filter:drop-shadow(0 0 2px rgba(8,12,24,.95))}
/* Player */
.player{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:600;
  display:flex; align-items:center; gap:10px;
  background:rgba(13,20,38,.9); border:1px solid var(--line);
  border-radius:12px; padding:8px 12px; backdrop-filter:blur(4px);
}
/* El crédito de Esri y RainViewer es obligatorio y el reproductor lo tapaba de
   arriba abajo: se levanta por encima de la barra (la barra mide 54 px y pega a
   12 px del borde, o sea que 66 px es el mínimo y acá va con aire). */
#map .leaflet-bottom.leaflet-right{bottom:70px}
.btn-play{min-width:42px; font-size:15px}
.seek{flex:1; accent-color:var(--accent)}
.seek-label{font-variant-numeric:tabular-nums; font-size:13px; color:var(--accent2); min-width:56px}
.speed{background:#17233f; color:var(--txt); border:1px solid var(--line); border-radius:7px; padding:5px}
.frame-info{font-size:11px; color:var(--muted); min-width:120px; text-align:right}
/* --- Barra de proyección ---------------------------------------------------
   UNA línea apoyada arriba del reproductor, del lado izquierdo: a la derecha
   vive la leyenda del viento y arriba a la derecha las capas, así que acá no
   tapa ninguna tormenta. Se apaga con su botón y con «Sólo lluvia». */
.cast-bar{
  position:absolute; left:12px; bottom:62px; z-index:600;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px;
  max-width:min(74%,600px);
  font-size:11px; color:var(--muted);
  background:rgba(13,20,38,.88); border:1px solid var(--line);
  border-radius:11px; padding:6px 10px; backdrop-filter:blur(4px);
  pointer-events:auto;
}
.cast-bar[hidden]{display:none}
.cast-bar .cb-k{color:var(--txt); font-weight:700; white-space:nowrap}
.cast-bar .cb-say{color:#cde9ff; line-height:1.3}
/* El violeta distingue "proyectado" del azul de las opciones ya vistas. */
.cast-bar .rng button.on{background:#3a2a55; color:#dcb8ff}
/* Panel */
.panel{
  background:var(--panel); border-left:1px solid var(--line);
  padding:14px; overflow-y:auto; display:flex; flex-direction:column; gap:12px;
}
/* ===== Radar de proximidad: la tarjeta de decisión =========================
   Todo lo que necesita una decisión entra sin scroll en 1440 px: semáforo,
   cuenta regresiva,.scope, franja de 10 min y los cuatro números. */

/* ===== Dónde estoy + si la lluvia cierra o abre ============================
   Las dos primeras preguntas que uno se hace, arriba de todo y en grande. El
   kilómetro baja de a poco (4 veces por segundo, con la recta medida) en vez
   de saltar cada 10 min, que es lo que hace creer que el aparato está quieto. */
.city-card{
  background:linear-gradient(165deg,#122036,#0a1226);
  border:1px solid #24405f; border-radius:14px; padding:11px 12px;
  display:flex; flex-direction:column; gap:9px;
}
.city-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.city-id{flex:1; min-width:0}
.city-name{font-size:21px; font-weight:800; letter-spacing:.5px; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.city-where{font-size:9.5px; color:var(--muted); margin-top:5px; line-height:1.35;
  letter-spacing:.2px; font-variant-numeric:tabular-nums}
.city-km{flex:none; text-align:right}
.city-km span{display:block; font-size:26px; font-weight:800; line-height:1;
  letter-spacing:-.5px; font-variant-numeric:tabular-nums; color:var(--accent)}
.city-km small{display:block; font-size:8.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.3px; margin-top:4px; max-width:108px; line-height:1.25; margin-left:auto}
.city-km.cerca span{color:var(--bad)}
.tr-state{
  font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  border-radius:9px; padding:7px 9px; text-align:center; line-height:1.35;
}
.tr-state.t-in{background:rgba(255,77,109,.14); border:1px solid #7d2032; color:#ffd7de;
  animation:trpulse 2.4s ease-in-out infinite}
.tr-state.t-out{background:rgba(77,217,139,.1); border:1px solid #1f5a42; color:#a9efcd}
.tr-state.t-flat{background:#101d34; border:1px solid var(--line); color:#c3d3ee}
.tr-state.t-none{background:#101d34; border:1px dashed var(--line); color:var(--muted); font-weight:600}
@keyframes trpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,109,.26)}50%{box-shadow:0 0 0 7px rgba(255,77,109,.05)}}
.tr-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.tr-cell{background:#0e1a2f; border:1px solid var(--line); border-radius:9px;
  padding:6px 5px; text-align:center; min-width:0}
.tr-cell b{display:block; font-size:16px; font-weight:800; line-height:1.1;
  font-variant-numeric:tabular-nums}
.tr-cell small{display:block; font-size:8px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.3px; margin-top:3px; line-height:1.2}
.tr-cell b.good{color:var(--ok)}
.tr-cell b.mid{color:var(--warn)}
.tr-cell b.bad{color:var(--bad)}
/* Los ocho octantes del horizonte, cada uno con su propio cierre: puede estar
   abriendo por el NE y cerrando por el NO al mismo tiempo, y un solo número de
   todo el círculo taparía esa diferencia. */
.tr-sec{display:grid; grid-template-columns:repeat(8,1fr); gap:3px}
.tr-sec:empty{display:none}
.tr-sec .ts{border:1px solid var(--line); border-radius:7px; padding:3px 0 4px;
  text-align:center; background:#0e1a2f; cursor:help}
.tr-sec .ts b{display:block; font-size:8.5px; font-weight:700; color:var(--muted); line-height:1}
.tr-sec .ts em{display:block; font-style:normal; font-size:12px; line-height:1.15}
.tr-sec .ts.in{border-color:#7d2032; background:rgba(255,77,109,.15); color:#ffb3c1}
.tr-sec .ts.out{border-color:#1f5a42; background:rgba(77,217,139,.12); color:#9fe8c6}
.tr-sec .ts.flat{border-color:#3c5a86; color:#c3d3ee}
.tr-sec .ts.no{opacity:.4}
.tr-note{font-size:9.5px; color:var(--muted); line-height:1.45}
.scope-card{
  background:linear-gradient(165deg,#0f1c36,#0a1226);
  border:1px solid #24405f; border-radius:14px; padding:10px;
  display:flex; flex-direction:column; gap:10px;
}
/* --- Semáforo + cuenta regresiva --- */
.alert-bar{
  display:flex; align-items:center; gap:10px;
  background:#12213c; border:1px solid var(--line); border-radius:11px; padding:9px 11px;
}
.alert-lamp{
  width:12px; height:12px; border-radius:50%; flex:none;
  background:var(--muted); box-shadow:0 0 0 3px rgba(138,160,200,.16);
}
.alert-txt{flex:1; min-width:0}
.alert-txt #alertTitle{font-size:14px; font-weight:700; line-height:1.2}
.alert-why{font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-top:4px; line-height:1.4}
.alert-eta{flex:none; text-align:right}
.eta-clock{font-size:23px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:var(--txt)}
.eta-clock.now{color:var(--accent2)}
.eta-lbl{font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:3px}
/* Sin alerta: verde tranquilo. Los demás niveles suben de temperatura y el
   rojo hace latir la lamparita para que se vea de reojo. */
.alert-bar.a0{background:#0d2438; border-color:#1d4a63}
.alert-bar.a0 .alert-lamp{background:var(--ok); box-shadow:0 0 0 3px rgba(77,217,139,.18)}
.alert-bar.a1{background:#1d2a17; border-color:#4d5a1f}
.alert-bar.a1 .alert-lamp{background:var(--warn); box-shadow:0 0 0 3px rgba(255,182,72,.2)}
.alert-bar.a1 .alert-why{color:#e6cf8f}
.alert-bar.a2{background:#2b1d10; border-color:#6b4118}
.alert-bar.a2 .alert-lamp{background:#ff8a3c; box-shadow:0 0 0 3px rgba(255,138,60,.22)}
.alert-bar.a2 #alertTitle{color:#ffcf9e}
.alert-bar.a2 .alert-why{color:#f0b488}
.alert-bar.a3{background:#330f18; border-color:#7d2032}
.alert-bar.a3 .alert-lamp{background:#ff4d6d; box-shadow:0 0 0 3px rgba(255,77,109,.3); animation:lamp 1.3s ease-in-out infinite}
.alert-bar.a3 #alertTitle{color:#ffd7de}
.alert-bar.a3 .alert-why{color:#ff9db0}
.alert-bar.a3 .eta-clock{color:#ff4d6d}
@keyframes lamp{0%,100%{box-shadow:0 0 0 3px rgba(255,77,109,.3)}50%{box-shadow:0 0 0 7px rgba(255,77,109,.12)}}
@media (prefers-reduced-motion:reduce){.alert-bar.a3 .alert-lamp{animation:none}}
/* --- Probabilidad de lluvia (formato cartel de boxes) ---
   El número grande es la respuesta; la línea dice qué se espera y cuándo, y la
   fuente (radar o modelos) va al lado para que se sepa de dónde sale. */
.prob-bar{
  display:flex; align-items:center; gap:10px;
  background:#101d34; border:1px solid var(--line); border-radius:11px; padding:7px 11px;
}
/* display:flex le gana al atributo hidden del navegador: sin esta línea el cartel
   se queda en pantalla vacío, con los guiones de ejemplo encima. */
.prob-bar[hidden]{display:none}
.prob-pct{
  flex:none; min-width:48px; text-align:center; font-size:22px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
  border-radius:8px; padding:4px 6px; background:rgba(57,182,255,.12); color:var(--accent);
}
.prob-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
/* 11,5 px: la línea del cartel ("SE ESPERAN ~2,4 mm/h EN ~25 MIN") entra justa
   en el panel de 294 px. Más grande, se parte en dos y el número pierde peso. */
.prob-txt b{font-size:11.5px; letter-spacing:.2px; line-height:1.25}
.prob-txt small{font-size:10px; color:var(--muted); line-height:1.3}
.prob-bar.mid{border-color:#3c5a86}
.prob-bar.hi{border-color:#7a5a1f; background:#221a0d}
.prob-bar.hi .prob-pct{background:rgba(255,182,72,.16); color:#ffd08a}
.prob-bar.lo .prob-pct{background:rgba(124,240,198,.1); color:var(--ok)}
.prob-detail{display:flex; flex-wrap:wrap; gap:6px 12px; margin:0 0 8px; font-size:11px; color:var(--muted)}
.prob-detail .pd-item b{color:var(--txt); font-variant-numeric:tabular-nums}
.prob-detail .pd-note{flex:1 1 100%; font-size:10.5px; line-height:1.4}
/* --- Rayos del satélite (cartel amarillo bajo el disco) ---
   Es el único cartel que puede decir "peligro" sin lluvia en el radar: un rayo a
   20 km es un aviso, aunque el disco esté celeste. Por eso va en amarillo propio,
   distinto del naranja de la lluvia, y con el kilómetro grande a la derecha. */
.rayo-bar{
  display:flex; align-items:center; gap:10px;
  background:#241c06; border:1px solid #7a5f1c; border-left:3px solid #ffdf3b;
  border-radius:11px; padding:7px 11px;
}
.rayo-bar[hidden]{display:none}
.rb-ico{flex:none; font-size:20px; line-height:1; filter:drop-shadow(0 0 6px rgba(255,223,59,.55))}
.rb-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.rb-txt b{font-size:11.5px; letter-spacing:.2px; line-height:1.25; color:#ffe98a}
.rb-txt small{font-size:10px; color:#b39a55; line-height:1.3}
.rb-km{flex:none; min-width:46px; text-align:center; display:flex; flex-direction:column; gap:1px}
.rb-km b{
  font-size:22px; font-weight:800; line-height:1; letter-spacing:-.5px; color:#ffdf3b;
  font-variant-numeric:tabular-nums;
}
.rb-km small{font-size:8.5px; color:#a08a4a; letter-spacing:.2px}
.rayo-bar.near{border-left-color:#ff8a3c; background:#2a1608}
.rayo-bar.near .rb-km b{color:#ffb347}
.rayo-bar.near .rb-txt b{color:#ffd7a1}
/* "Tronó hace N min": la barra sigue visible —esa es la marca que se pide— pero se
   temple a un amarillo viejo para no gritar como si estuviera cayendo ahora. */
.rayo-bar.viejo{border-left-color:#a9903a; background:#1e1a0c; opacity:.9}
.rayo-bar.viejo .rb-km b{color:#d8c06a}
.rayo-bar.viejo .rb-txt b{color:#e2cf8f}
/* --- El disco --- */
.scope-wrap{position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; min-height:220px}
#scope{display:block}
.scope-top{display:flex; justify-content:space-between; gap:6px; width:100%}
.scope-bottom{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%}
.chip{
  font-size:10px; color:#bcd3f5; font-variant-numeric:tabular-nums;
  background:rgba(9,16,32,.82); border:1px solid var(--line); border-radius:20px; padding:2px 8px;
}
/* El disco necesita decir QUÉ está mirando. Antes era un círculo anónimo: uno
   no sabía qué ciudad tenía en el centro ni qué había en un punto concreto.
   Arriba va el nombre del punto; abajo, lo que se tocó en el disco. */
.scope-city{
  width:100%; min-width:0; text-align:center;
  font-size:13.5px; font-weight:700; color:var(--txt); line-height:1.2;
}
.scope-city small{display:block; font-weight:500; font-size:10.5px; color:var(--muted); margin-top:1px}
/* La pista de cómo se usa el disco: una línea nada más, que si fuera un cartel
   taparía la lluvia que se está mirando. */
.scope-hint{
  width:100%; min-width:0; text-align:center;
  font-size:10.5px; color:var(--muted); margin-top:-3px;
}
.scope-hint[hidden]{display:none}
.scope-probe{
  width:100%; min-width:0; text-align:center;
  font-size:11.5px; line-height:1.4; color:#cfe0f7;
  background:rgba(9,16,32,.78); border:1px solid var(--line);
  border-radius:9px; padding:5px 8px;
}
.scope-probe[hidden]{display:none}
.scope-probe b{color:var(--accent2)}
.scope-probe .sp-lugar{font-weight:700; color:var(--txt)}
.rng{display:flex; align-items:center; background:rgba(9,16,32,.85); border:1px solid var(--line); border-radius:9px; padding:2px}
.rng button{
  background:transparent; color:var(--muted); border:0; border-radius:7px; cursor:pointer;
  font-size:11px; padding:4px 9px; font-variant-numeric:tabular-nums;
}
.rng button:hover{color:var(--txt)}
.rng button.on{background:#1d3a4e; color:var(--accent2); font-weight:700}
.rng-lbl{font-size:10px; color:var(--muted); padding:0 7px 0 3px}
.btn-poi{font-size:11px; padding:5px 9px; background:rgba(12,22,42,.9)}
/* --- Franja de 10 en 10 --- */
.strip-card,.cells-card{background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:11px 12px}
.st-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:baseline;
  font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.st-src{text-transform:none; letter-spacing:0; color:#7fb4e8; font-size:10px}
.mstrip{display:flex; gap:3px; align-items:stretch; height:58px; margin-top:9px}
.ms{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px;
  background:#0b1426; border:1px solid #1a2642; border-radius:6px; padding:3px 1px;
}
.ms-bar{width:100%; max-width:22px; height:var(--h,3px); background:var(--msb,transparent); border-radius:3px 3px 0 0}
.ms em{font-style:normal; font-size:8px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.ms.now{border-color:var(--accent); box-shadow:0 0 0 1px rgba(57,182,255,.3) inset}
.ms.now em{color:var(--accent2)}
.ms.fut{border-style:dashed; opacity:.9}
.ms.none .ms-bar{background:#223052; height:3px}
.ms-loading{font-size:11px; color:var(--muted); align-self:center}
.st-note{font-size:10.5px; color:var(--muted); margin-top:8px; line-height:1.45}
/* --- Los cuatro números --- */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.mx{background:#0c1628; border:1px solid var(--line); border-radius:11px; padding:9px 5px; text-align:center}
.mx span{display:block; font-size:19px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.mx small{display:block; font-size:9px; color:var(--muted); margin-top:5px; line-height:1.3}
.mx em{display:block; font-style:normal; font-size:8.5px; color:#7fb4e8; text-transform:uppercase; letter-spacing:.3px}
/* --- De qué está hecho el aire ---
   Cuatro lecturas del modelo sobre el punto: energía, altura a la que se congela
   el agua, humedad y cielo. La rayita de la izquierda es el semáforo: azul cuando
   el aire está quieto, rojo cuando está pidiendo tormenta. */
.conv-card{background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:11px 12px}
.conv-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:9px}
.cvx{position:relative; overflow:hidden; text-align:center; border:1px solid var(--line);
  border-radius:12px; padding:9px 5px 8px 9px; background:linear-gradient(180deg,#0e1c33,#0a1322)}
.cvx::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cv,#2b6cb0)}
.cv-v{display:block; font-size:16px; font-weight:800; line-height:1.05; color:var(--txt);
  font-variant-numeric:tabular-nums}
.cv-v i{font-style:normal; font-size:9px; font-weight:600; color:var(--muted)}
.cvx small{display:block; margin-top:4px; font-size:8.5px; text-transform:uppercase;
  letter-spacing:.35px; color:var(--muted)}
.cvx em{display:block; margin-top:4px; font-size:10px; font-style:normal; line-height:1.25;
  color:#cddcf5; min-height:25px}
.cv-0{--cv:#2b6cb0}
.cv-1{--cv:#c9b341}
.cv-2{--cv:#e08b2f}
.cv-3{--cv:#ff4d6d}
.cv-3 em{color:#ffb3c1; font-weight:700}
.cv-load{display:block; padding:8px 2px; font-size:11px; color:var(--muted)}
/* --- Tabla de células --- */
.ctab{width:100%; border-collapse:collapse; margin-top:9px; font-size:11.5px; font-variant-numeric:tabular-nums}
.ctab th{font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); text-align:left;
  padding:3px 5px 5px; border-bottom:1px solid var(--line); font-weight:600}
.ctab td{padding:6px 5px; border-bottom:1px solid rgba(120,150,200,.12); border-left:3px solid var(--cb,transparent)}
.ctab tr:last-child td{border-bottom:0}
.ctab td b{font-weight:700}
.ctab td i{display:block; font-style:normal; font-size:9px; color:var(--muted); margin-top:2px}
.ctab .cbrg{font-weight:700}
.ctab .lnear{color:#ff4d6d; font-weight:800}
.ctab .lmedia{color:#ff8a3c; font-weight:700}
.ctab .llejos{color:var(--warn)}
.ctab .lnoop{color:var(--muted); font-size:10px}
.ct-empty{color:var(--muted); font-size:11px; padding:10px 5px}
/* --- El detalle, plegado: no compite con el instrumento --- */
.more{background:#0e1729; border:1px solid var(--line); border-radius:12px}
.more summary{cursor:pointer; padding:10px 12px; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; list-style:none; outline-offset:2px}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:'▾'; float:right; color:var(--accent)}
.more[open] summary::after{content:'▴'}
.more-body{padding:2px 12px 12px; display:flex; flex-direction:column; gap:10px}
.cons-row{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.cr-block{background:#0b1426; border:1px solid #1a2642; border-radius:10px; padding:9px 10px}
.cc-mid{font-size:15px; font-weight:800; line-height:1.2; margin:5px 0 3px}
.cc-mid.yes{color:var(--accent2)}
.cc-mid.near{color:var(--warn)}
.cc-mid.no{color:var(--muted)}
.cr-block .cc-value #consValue{font-size:26px}
/* Tarjeta Pro: proyección de células */
.pc-state{font-size:11.5px; color:var(--muted); margin-top:9px; line-height:1.45}
.pc-state b{color:var(--txt)}
.pc-facts{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0 0}
.pc-facts .pf{background:#0c1830; border:1px solid var(--line); border-radius:9px; padding:6px 8px}
.pc-facts dt{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.pc-facts dd{margin:2px 0 0; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums}
.pc-outlook{margin-top:10px}
.po-title{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.po-strip{
  display:flex; gap:3px; align-items:flex-end; height:52px; margin-top:6px;
  padding:6px; background:#0c1830; border:1px solid var(--line); border-radius:9px;
}
.po-cell{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; justify-content:flex-end}
.po-bar{width:100%; max-width:18px; min-height:2px; border-radius:3px 3px 0 0; background:#25406b}
.po-cell.wet .po-bar{background:linear-gradient(180deg,var(--accent),var(--accent2))}
.po-h{font-size:9px; color:var(--muted); font-variant-numeric:tabular-nums}
.po-cell.wet .po-h{color:var(--accent2)}
.po-note{font-size:11px; color:var(--muted); margin-top:6px; line-height:1.45}
.po-note b{color:var(--txt)}
.po-empty{font-size:11px; color:var(--bad); margin-top:6px}
.pc-note{font-size:11px; color:var(--muted); margin:9px 0 0; line-height:1.5}
/* Punto de interés (marcador arrastrable del motor Pro) */
.poi{background:none; border:0}
.poi i{
  display:block; width:14px; height:14px; margin:4px;
  border-radius:50%; border:2px solid var(--accent2);
  background:rgba(124,240,198,.25); box-shadow:0 0 0 4px rgba(124,240,198,.15);
  cursor:grab;
}
.poi:active i{cursor:grabbing}
/* Rayo del satélite sobre el mapa. Es un SVG propio y no el emoji ⚡: el emoji se
   dibuja distinto en Windows, Android y iPhone, y acá la posición del glifo ES el
   dato — un glyph desplazado 3 px desplazaría el rayo 3 km.
   Versión 12: el rayo vivo lleva un aro que se abre (un pulso, como el timbre de
   una alarma) y un halo cálido que lo separa del mapa; el rayo ya pasado queda
   sin aro, sin halo y medio apagado, para que nadie confunda "hace 15 minutos"
   con "está cayendo ahora". */
.rayo-i{background:none; border:0; pointer-events:none; position:relative; overflow:visible}
.rayo-i .ry-halo,.rayo-i .ry-aro{
  position:absolute; left:50%; top:50%; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none;
}
.rayo-i .ry-halo{
  width:230%; height:230%;
  background:radial-gradient(circle,rgba(255,228,110,.42) 0%,rgba(255,170,40,.16) 42%,rgba(255,150,30,0) 70%);
}
.rayo-i .ry-aro{
  width:150%; height:150%; border:1.6px solid rgba(255,240,170,.95);
  animation:ry-onda 2s ease-out infinite;
}
.rayo-i.r3 .ry-aro{border-color:rgba(255,190,90,.95)}
.rayo-i.r4 .ry-aro{border-color:rgba(255,130,90,.95)}
@keyframes ry-onda{
  0%{transform:translate(-50%,-50%) scale(.5); opacity:.95}
  70%{transform:translate(-50%,-50%) scale(1.15); opacity:0}
  100%{transform:translate(-50%,-50%) scale(1.15); opacity:0}
}
.rayo-i svg{
  position:relative; display:block; width:100%; height:100%; overflow:visible;
  fill:#ffdf3b; stroke:#2a1f04; stroke-width:1.4; stroke-linejoin:round;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.85)) drop-shadow(0 0 5px rgba(255,223,59,.55));
}
.rayo-i.r2 svg{fill:#ffc93c}
.rayo-i.r3 svg{fill:#ff9d2e}
.rayo-i.r4 svg{fill:#ff5d3b; stroke:#2a0a04; filter:drop-shadow(0 1px 3px rgba(0,0,0,.85)) drop-shadow(0 0 7px rgba(255,93,59,.75))}
/* Rayo que ya no está en el cuadro del satélite pero se retiene 20 min: sin aro,
  sin halo y apagado. Si latiera igual que el vivo, un rayo de hace cuarto de hora
  se vería como actividad del minuto actual. */
.rayo-i.hist .ry-aro,.rayo-i.hist .ry-halo{display:none}
.rayo-i.hist svg{
  fill:#9c8c46; stroke:#12161f; opacity:.62;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
/* Sin internet el rayo no late: la animación es adorno, el dato es el lugar. */
@media (prefers-reduced-motion:reduce){.rayo-i .ry-aro{animation:none; opacity:.55}}
.cc-value{display:flex; align-items:baseline; gap:6px; margin:6px 0 2px}
.cc-value #consValue{font-size:42px; font-weight:800; line-height:1}
.cc-value small{color:var(--muted)}
.cc-label{font-size:16px; font-weight:700}
.cc-meta{display:flex; gap:16px; margin-top:10px; font-size:12px; color:var(--muted)}
.cc-meta b{color:var(--txt)}
.cc-note{font-size:11px; color:var(--muted); margin:10px 0 0; line-height:1.5}
.cc-k{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
  font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.cc-sub{font-size:11.5px; color:var(--muted); line-height:1.45}
.cc-verdict{font-size:12px; line-height:1.45; margin:12px 0 0; padding:8px 10px;
  border-radius:8px; background:rgba(57,182,255,.10); border-left:3px solid var(--accent)}
.cc-verdict.conflict{background:rgba(255,107,107,.12); border-left-color:var(--bad)}
.cc-verdict[hidden]{display:none}
.cc-warn{font-size:12px; line-height:1.45; margin:8px 0 0; padding:8px 10px;
  border-radius:8px; background:rgba(255,182,72,.14); border-left:3px solid var(--warn)}
.cc-warn[hidden]{display:none}
/* --- Ficha del servicio de radar --- */
.radar-card{background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:11px 12px}
.rd-ficha{margin:9px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:11px; overflow:hidden}
.rd-r{display:flex; flex-direction:column; gap:2px; background:#0b1426; padding:8px 9px; margin:0}
.rd-r dt{font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
.rd-r dd{margin:0; font-size:12.5px; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums}
.rd-r dd em{font-style:normal; font-weight:400; color:var(--muted); font-size:10.5px}
.rd-vacio{grid-column:1/-1; background:#2a1420; color:#ffb3c6; font-size:11.5px; padding:10px}
.rd-nota{margin:9px 0 0; font-size:10.5px; line-height:1.5; color:var(--muted)}
.rd-nota b{color:#cfe0f5}
.sources{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px}
.src-head{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px}
.src-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.src-extra,.src-audit{margin:9px 0 0; font-size:10.5px; line-height:1.45; color:var(--muted)}
.src-extra b{color:var(--txt)}
.src-audit{border-top:1px solid var(--line); padding-top:8px}
.src-audit b{color:#cfe0f5}
.src-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-radius:9px;
  background:#0c1426; border:1px solid #1a2642; font-size:13px;
}
.src-item .nm{display:flex; align-items:center; gap:8px}
.dot{width:8px; height:8px; border-radius:50%; background:#44608f}
.src-item.ok .dot{background:var(--ok)}
.src-item.bad .dot{background:var(--bad)}
.src-item.reliable{border-color:var(--accent); background:#102244; box-shadow:0 0 0 1px rgba(57,182,255,.25) inset}
.src-item .val{font-variant-numeric:tabular-nums; font-weight:700}
.src-item .tag{font-size:10px; color:var(--accent); margin-left:6px}
.src-item.bad .val{color:var(--bad); font-weight:400; font-size:11px}
.foot{font-size:11px; color:var(--muted); line-height:1.5}
.foot .muted{opacity:.8}
.i-none{color:var(--accent)} .i-weak{color:var(--ok)} .i-mod{color:var(--warn)}
.i-strong{color:#ff8a3c} .i-torr{color:var(--bad)}
/* Leaflet dark attribution */
.leaflet-container{background:#0a0f1e}
.leaflet-control-attribution{background:rgba(13,20,38,.7)!important; color:#6f85ad!important}
.leaflet-control-attribution a{color:#8fb6ff!important}
/* Definiciones cortas debajo de cada número del panel Pro */
.pc-facts .pf-def{font-size:10px; color:var(--muted); font-weight:400; line-height:1.35; margin-top:3px}
/* Glosario: qué es tormenta, nube, viento y movimiento */
.wl-foot{margin-top:5px; padding-top:5px; border-top:1px solid var(--line); font-size:10px; line-height:1.4; opacity:.85}
.glo{
  position:fixed; inset:0; z-index:1200; padding:24px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,8,18,.74); backdrop-filter:blur(3px);
}
/* Sin esto, el display:flex de arriba gana y el glosario nunca se esconde. */
.glo[hidden]{display:none}
.glo-card{
  width:min(760px,100%); max-height:88vh; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.glo-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.glo-head h2{margin:0; font-size:18px}
.glo-body{padding:6px 18px 20px; overflow-y:auto; font-size:13px; line-height:1.55}
.glo-body h3{margin:18px 0 4px; font-size:14px; color:var(--accent2)}
.glo-body p{margin:4px 0}
.glo-body ul{margin:4px 0 0; padding-left:20px}
.glo-body li{margin:3px 0}
.glo-ico{margin-right:6px}
.glo-units{margin-top:20px; padding-top:12px; border-top:1px solid var(--line)}

/* ============== Aviso para instalar en el teléfono ========================= */
.install-tip{
  display:flex; align-items:center; gap:12px; flex:none;
  padding:10px 16px; background:linear-gradient(180deg,#123055,#0f2540);
  border-bottom:1px solid var(--accent); color:#e6f6ff;
}
.install-tip[hidden]{display:none}
.it-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.it-txt b{font-size:13px}
.it-txt span{font-size:12px; line-height:1.4; color:#bfe0f7}
.btn-install{background:#1d3a4e; border-color:var(--accent); color:var(--accent2); font-weight:700; flex:none}
.it-x{
  background:none; border:0; color:#9fd0f0; font-size:22px; line-height:1;
  padding:2px 8px; cursor:pointer; flex:none;
}
.it-x:hover{color:#fff}

/* ============== Pestañas del panel ==========================================
   Antes era una columna infinita de tarjetas: para ver los números uno tenía que
   pasar por encima el disco. Tres preguntas, tres solapas, y lo que no se ve no
   se pinta. */
.tabs{
  display:flex; gap:3px; flex:none; padding:3px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  /* Va debajo del disco, y el disco ocupa casi todo el alto: sin sticky uno
     tendría que adivinar que hay más abajo. Pegada arriba, siempre visible. */
  position:sticky; top:0; z-index:6;
  box-shadow:0 8px 14px -10px rgba(0,0,0,.75);
}
.tab{
  flex:1; appearance:none; background:none; border:0; color:var(--muted);
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.2px;
  padding:8px 4px; border-radius:9px; cursor:pointer; min-height:42px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
}
.tab:hover{color:var(--txt); background:#16223c}
.tab[aria-selected="true"]{
  background:linear-gradient(180deg,#17507a,#123553); color:#e6f6ff;
  box-shadow:0 0 0 1px rgba(57,182,255,.32) inset;
}
.tab .tb-ico{font-size:15px; line-height:1.1}
.tabpane{display:flex; flex-direction:column; gap:12px; flex:none}
.tabpane[hidden]{display:none}

/* ============== Lluvia en el país ==========================================
   Dos cuentas separadas: lo que el radar ya vio (medición, con nombre y km²) y
   lo que los modelos ven para las próximas 24 h en las ciudades grandes (un
   porcentaje). Mezclarlas en una sola lista sería vender pronóstico como hecho. */
.pais-head{display:flex; align-items:center; gap:8px; justify-content:space-between}
.pais-res{font-size:12.5px; line-height:1.45; color:var(--txt); flex:1; min-width:0}
.pais-res b{color:var(--accent2)}
.pais-card{
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  padding:9px 10px; display:flex; flex-direction:column; gap:8px;
}
.pais-nota{font-size:11px; color:var(--muted); line-height:1.5; margin:0}
.pz-load{font-size:11px; color:var(--muted)}
.pz-vacio{font-size:12px; color:var(--muted); line-height:1.45; padding:6px 2px}
.pais-zonas{display:flex; flex-direction:column; gap:5px}
/* Cada zona es un botón: se toca y el mapa vuela hasta ahí. El borde izquierdo
   es el color real del radar para esa fuerza, así la lista se lee con el mapa. */
.pz{
  display:flex; align-items:center; gap:9px; width:100%; min-width:0; text-align:left;
  background:#0f1a30; color:var(--txt); border:1px solid var(--line);
  border-left:4px solid #00a3e0; border-radius:9px; padding:6px 9px;
  cursor:pointer; font:inherit;
}
.pz:hover{border-color:var(--accent); border-left-color:inherit; background:#14223c}
.pz-nombre{flex:1; min-width:0; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pz-nombre small{display:block; font-weight:500; font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pz-fuerza{font-size:11px; color:var(--muted); white-space:nowrap}
.pz-dbz{font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.pz-dbz small{display:block; font-size:8px; font-weight:600; color:var(--muted); letter-spacing:.3px}
.pz-km2{font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:62px; text-align:right}
.pz[data-b="1"]{border-left-color:#00a3e0}
.pz[data-b="2"]{border-left-color:#ffee00}
.pz[data-b="3"]{border-left-color:#ff8100}
.pz[data-b="4"]{border-left-color:#ff4400}
.pz[data-b="5"]{border-left-color:#c10000}
/* Zona afuera del país (se muestra cuando acá no cae nada): el borde punteado
   alcanza para que nadie crea que está lloviendo sobre su cabeza. */
.pz.fuera{border-left-style:dashed; background:#0d1728}
.pais-tab{display:flex; flex-direction:column; gap:2px}
.pt{
  display:grid; grid-template-columns:minmax(0,1fr) 46px 44px 52px; gap:7px; align-items:center;
  width:100%; min-width:0; text-align:left; background:none; border:0; border-radius:7px;
  padding:4px 6px; color:var(--txt); font:inherit; font-size:12px; cursor:pointer;
}
.pt:nth-child(odd){background:#0f1a30}
.pt:hover{background:#14223c}
.pt-nombre{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.pt-nombre small{color:var(--muted); font-weight:500}
.pt-ahora{text-align:right; font-variant-numeric:tabular-nums}
.pt-prob{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted)}
.pt-mm{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted)}
.pt.ahi{outline:1px solid var(--accent); outline-offset:-1px}
.pt-ahora.lluvia{color:var(--accent2); font-weight:800}
.pt-ahora.seco{color:var(--muted)}
.pt-prob.alto{color:var(--warn); font-weight:700}
.pt-cab{font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; cursor:default}
.pt-cab:nth-child(odd){background:none}
/* Modo "Sólo lluvia": el botón se planta distinto porque cambia TODA la vista,
   no es una capa más. */
.btn-lluvia{border-color:#1d4a66}
.btn-lluvia.active{background:linear-gradient(180deg,#1a6fa5,#124a70); border-color:var(--accent2); color:#eaffff}
/* Sello de servicio: es parte del mensaje, no una letra chica. */
.foot .sello{
  font-size:11.5px; line-height:1.45; color:#d6f5e6;
  background:rgba(124,240,198,.10); border:1px solid rgba(124,240,198,.3);
  border-radius:9px; padding:6px 9px;
}
.foot .sello b{color:var(--accent2)}
/* Abajo hay cuatro cosas que viven encima del mapa y ninguna puede pisar a la
   otra: la barra de reproducción (0 a 66 px), el crédito obligatorio de Esri y
   RainViewer (70 a 87), la leyenda del viento (96) y este cartel (150). Las
   alturas están medidas en pantalla, no calculadas. */
.map-wrap .map-mode{
  position:absolute; left:50%; bottom:150px; transform:translateX(-50%); z-index:600;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 9px;
  max-width:min(92%,540px); text-align:center;
  font-size:11px; color:#eaffff; background:rgba(18,74,112,.9);
  border:1px solid var(--accent2); border-radius:9px; padding:6px 11px;
  pointer-events:auto;
}
.map-mode b{font-size:11.5px; white-space:nowrap}
.map-mode span{font-weight:500; color:#cde9ff; line-height:1.3}
.map-mode .btn-mini{font-size:10.5px; padding:3px 8px}
.map-mode[hidden]{display:none}
/* En "Sólo lluvia" el aviso de "llueve más allá" sobra: la pantalla entera ya
   está mostrando dónde llueve, y los dos carteles decían lo mismo. */
.map-wrap.solo .afuera-chip{display:none}
/* La etiqueta de cada zona lloviendo, dibujada sobre el mapa en modo "Sólo
   lluvia". Leaflet escribe el transform del contenedor con estilo en línea, así
   que el centrado tiene que ir en un span adentro: si se intentara sobre el
   contenedor, la etiqueta saltaría a la esquina del mapa. */
.zona-tag{background:none; border:0; padding:0; overflow:visible}
.zona-tag .zt{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  white-space:nowrap; text-align:center; pointer-events:none;
  background:rgba(9,18,32,.82); border:1px solid rgba(126,220,255,.55);
  border-radius:7px; padding:2px 6px; font:700 10.5px/1.25 "Segoe UI",sans-serif;
  color:#dff4ff; font-variant-numeric:tabular-nums;
}
.zona-tag .zt small{display:block; font-weight:500; font-size:9px; color:#a8c8e4}
.zona-tag.b4 .zt,.zona-tag.b5 .zt{border-color:#ff7a5c; color:#ffe4dc}

/* ============== Predicción del tiempo =======================================
   Todo este bloque habla en probabilidades y lo dice: un pronóstico no es una
   medición, y fingir lo contrario es lo que hace que la gente le crea menos. */
.fc-note{
  font-size:11.5px; line-height:1.5; color:#cfe0f7;
  background:#10203a; border:1px solid #24406b; border-left:3px solid var(--warn);
  border-radius:10px; padding:9px 11px;
}
.fc-note b{color:#fff}
.fc-day{
  background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:11px 12px; display:flex; flex-direction:column; gap:9px;
}
.fc-day > h3{
  margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted); font-weight:700;
}
.fc-row{
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-top:1px solid #1a2540;
}
.fc-row:first-of-type{border-top:0}
.fc-ico{font-size:24px; line-height:1; flex:none; width:32px; text-align:center}
.fc-main{flex:1; min-width:0}
.fc-when{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.fc-say{font-size:13.5px; line-height:1.35; color:var(--txt); margin-top:2px}
.fc-nums{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; font-size:11px; color:var(--muted)}
.fc-nums b{color:var(--txt); font-variant-numeric:tabular-nums}
.fc-pct{
  flex:none; text-align:right; min-width:56px;
  font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;
}
.fc-pct small{display:block; font-size:9.5px; font-weight:600; color:var(--muted); letter-spacing:.4px}
.fc-pct.p0{color:var(--muted)} .fc-pct.p1{color:var(--ok)}
.fc-pct.p2{color:var(--warn)} .fc-pct.p3{color:#ff8a3c} .fc-pct.p4{color:var(--bad)}
/* La barrita es el mismo porcentaje, para leerlo de reojo sin tener que sumar. */
.fc-bar{height:5px; border-radius:3px; background:#1b2a4a; overflow:hidden; margin-top:6px}
.fc-bar i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#39b6ff,#7cf0c6)}
.fc-hours{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.fc-hour{
  background:var(--panel2); border:1px solid var(--line); border-radius:11px;
  padding:8px 4px; text-align:center; min-width:0;
}
.fc-hour.now{border-color:var(--accent); box-shadow:0 0 0 1px rgba(57,182,255,.3) inset}
.fc-hour .h{font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums}
.fc-hour .i{font-size:19px; line-height:1.25}
.fc-hour .p{font-size:13px; font-weight:800; font-variant-numeric:tabular-nums}
.fc-hour .m{font-size:9.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.fc-trust{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted)}
.fc-trust .dots{display:flex; gap:3px}
.fc-trust .dots i{width:7px; height:7px; border-radius:50%; background:#223052}
.fc-trust .dots i.on{background:var(--accent2)}
.fc-trust.bad .dots i.on{background:var(--warn)}
.fc-proj{
  background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:11px 12px; display:flex; flex-direction:column; gap:6px;
}
.fc-proj .fp-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.fc-proj .fp-k{font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted)}
.fc-proj .fp-big{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--accent2)}
.fc-proj .fp-txt{font-size:12.5px; line-height:1.45}
.fc-proj .fp-warn{font-size:10.5px; color:var(--muted); line-height:1.4}

/* =================== PESTAÑA RÍO URUGUAY ===================================
   Es la única ficha de la app que habla de metros de agua sobre una regla, así
   que el número grande lleva dos decimales y dígitos tabulares: entre 10,86 y
   10,92 hay una decisión que tomar, y si los números bailan no se puede leer. */
.rio-punto{font-size:11.5px; line-height:1.5; color:#cfe0f7; border-radius:12px; padding:9px 11px; margin:0 0 9px; background:#0f1e34; border:1px solid #213a5e}
.rio-punto b{color:#fff}
.rio-punto.cerca{background:#0c2438; border-left:3px solid var(--accent2)}
.rio-punto.lejos{border-left:3px solid var(--warn)}
.rio-bar{display:flex; align-items:center; justify-content:space-between; gap:8px}
.rio-lectura{font-size:11px; color:var(--muted)}
.btn-mini{font-size:11px; padding:5px 9px; min-height:30px}
.rio-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px}
.rio-card{
  background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:11px 12px; display:flex; flex-direction:column; gap:7px;
}
.rio-card h3{margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--accent)}
.rio-card h3 small{
  display:block; margin-top:2px; font-size:10px; letter-spacing:0; text-transform:none;
  color:var(--muted); font-weight:400;
}
.rio-top{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; flex-wrap:wrap}
.rio-v{font-size:34px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.rio-v small{font-size:13px; font-weight:500; color:var(--muted); margin-left:2px}
.rio-estado-txt{font-size:11px; font-weight:700; letter-spacing:.3px}
.rio-top .rio-estado em{display:block; font-style:normal; font-weight:400; color:var(--muted); font-size:10px}
.rio-top .rio-estado.crece{color:#ff8a3c}
.rio-top .rio-estado.baja{color:var(--accent2)}
.rio-top .rio-estado.estacionado{color:var(--muted)}
.rio-hora{font-size:10px; color:var(--muted)}
.rio-svg{display:block; width:100%; height:96px; background:#0b1426; border:1px solid #1a2642; border-radius:8px}
.rio-pro{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.rio-pro th{font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600; text-align:left; padding:0 4px 2px}
.rio-pro td{padding:2px 4px; font-size:14px; border-top:1px solid rgba(120,150,200,.14)}
.rio-pro td i{display:block; font-style:normal; font-size:9px; color:var(--muted)}
.rio-margen{margin:0; font-size:11px; color:var(--muted)}
.rio-margen.encima{color:#ff8a3c}
.rio-margen.debajo{color:var(--txt)}
.rio-como{margin:0; font-size:10.5px; line-height:1.45; color:var(--muted)}
.rio-fall{border-color:#3a2434}
.rio-fall h3{color:#ff9ab0}
.rio-cauce,.rio-tabla{
  background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:11px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.rio-cauce h3,.rio-tabla h3{margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--accent)}
.rio-cauce p{margin:0; font-size:12px; line-height:1.5; color:#cfe0f7}
.rio-cauce .rio-lluvia{color:var(--muted); font-size:11px}
.rio-cor{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.rio-cor th{font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); text-align:right; padding:3px 5px 5px; border-bottom:1px solid var(--line); font-weight:600}
.rio-cor th:first-child{text-align:left}
.rio-cor td{padding:5px; border-bottom:1px solid rgba(120,150,200,.12); font-size:12px}
.rio-cor td small{display:block; font-size:9px; color:var(--muted)}
.rio-cor td.n{text-align:right; font-weight:700}
.rio-cor td.n.ok{color:var(--muted); font-weight:400}
.rio-cor td.crece{color:#ff8a3c}
.rio-cor td.baja{color:var(--accent2)}
.rio-cor td.estacionado{color:var(--muted); font-weight:400}
.rio-cor tr:last-child td{border-bottom:0}
.rio-cor tr.rio-vieja td{opacity:.5}
.rio-cor td.rio-caida{color:var(--muted); font-size:11px; font-weight:400}
.rio-nota,.rio-fuente{margin:0; font-size:10.5px; line-height:1.5; color:var(--muted)}
.rio-fuente a{color:var(--accent)}
.rio-fuentes{padding:0 2px}
.rio-cards{gap:9px}

/* ============== Teléfono: el disco manda, lo demás se despliega ============
   En 390 px no entra el tablero de la PC, y no debería: la pregunta del teléfono
   es "¿me mojo o no?", así que el panel va primero y el mapa debajo. */
@media (max-width:760px){
  html,body{height:auto; overflow:visible}
  body{
    min-height:100dvh; overscroll-behavior-y:contain;
    -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  }
  .topbar{
    position:sticky; top:0; z-index:1300; flex-wrap:wrap;
    gap:8px 10px; padding:9px 10px; padding-top:calc(9px + env(safe-area-inset-top));
  }
  .brand-txt p{display:none}
  .brand-txt .credit{display:block; font-size:10px}
  .brand-txt h1{font-size:17px}
  .status{width:100%; gap:7px; flex-wrap:wrap}
  .clock{font-size:13px}
  .btn{font-size:12px; padding:9px 10px; min-height:40px}

  .install-tip{padding:10px 12px; align-items:flex-start}
  .btn-install{min-height:40px}

  .layout{display:flex; flex-direction:column; flex:none; min-height:0}
  /* En columna, un hijo flex o de grilla no encoge por debajo de su min-content:
     sin esto una sola palabra larga ("LLUVIA EN EL PUNTO") ensancha la página y
     todo lo de la derecha se corta. minmax(0,1fr) es el equivalente en grilla. */
  body>*,.layout>*,.panel>*,.tabpane>*,.tab,.city-top,.tr-grid,.tr-sec,.alert-bar,.prob-bar,.scope-wrap{min-width:0}
  .tr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tr-sec{grid-template-columns:repeat(8,minmax(0,1fr))}
  .alert-eta{flex:0 1 auto}
  .panel{
    order:1; border-left:0; height:auto; overflow:visible;
    padding:10px 10px calc(20px + env(safe-area-inset-bottom)); gap:10px;
  }
  /* En el teléfono la pregunta es "qué tengo encima", no en qué octante cayó el
     ajuste r². La alerta y el disco van primero; la ficha de la ciudad, que es
     la explicación, se lee después. */
  .panel>.scope-card{order:0}
  .panel>.city-card{order:1}
  .panel>.tabs{order:2}
  /* Acá la ventana es la que hace de scroll, no el panel: sticky la pegaría
     contra el borde de la pantalla, encima de la barra de arriba. */
  .panel>.tabs{position:static; box-shadow:none}
  .panel>.tabpane{order:3}
  .panel>.foot{order:4}
  .city-card{padding:11px 12px}
  .tr-note{font-size:11px}
  .map-wrap{order:2; flex:none; height:52vh; min-height:300px; border-top:1px solid var(--line)}

  /* En el mapa chico sobra texto: la leyenda de colores vive en el disco. */
  .legend,.layer-note{display:none}
  .layers .radar-aviso{display:block}
  .layers .radar-aviso[hidden]{display:none}
  .ts-badge{left:52px; top:8px; padding:6px 10px; min-width:0}
  .ts-badge .ts-time{font-size:18px}
  /* En el teléfono el techo del mapa se reparte distinto: el reloj va arriba de
     todo y los tres botones de capa pasan debajo, en una sola línea (a 390 px,
     alineados a la derecha se volvían dos filas y le caían encima del reloj). */
  .layers{top:60px; left:8px; right:auto; align-items:flex-start; max-width:calc(100% - 16px)}
  .btn-layer{min-height:38px; padding:8px 11px}
  .afuera-chip{left:52px; top:106px; max-width:calc(100% - 104px); font-size:11px; padding:6px 9px}
  /* Medido en 390x844: el reproductor mide 52 px (la info del cuadro se oculta
     acá), el crédito de Leaflet sube a 70 y la leyenda del viento a 96 para no
     pisarlo. El cartel de "sólo lluvia" usa el mismo 150 de la compu. */
  .wind-strip{left:8px; right:8px; bottom:96px; gap:7px; font-size:10px; justify-content:flex-end}
  /* La barra de proyección sube a 150 (debajo de la leyenda del viento) y ocupa
     el ancho: con los seis botones chiquitos, el dedo los toca mal. */
  .cast-bar{left:8px; right:8px; bottom:150px; max-width:none; gap:5px 8px; padding:5px 8px}
  .cast-bar .rng button{min-height:34px; padding:5px 11px; font-size:12px}
  /* En el teléfono el cartel no puede crecer: va entre los botones de capa y el
     reproductor, y cada renglón de más le roba mapa a una pantalla de 844 px
     (medido: el mapa entero son 439 px y el cartel llegaba a 106). La pregunta
     ("¿dónde estará la lluvia?") y el título las repite el botón de la capa. */
  .cast-bar .rng-lbl, .cast-bar .cb-k{display:none}
  .map-wrap .map-mode{font-size:10px; max-width:calc(100% - 16px)}
  .player{left:8px; right:8px; bottom:8px; gap:7px; padding:7px 9px; flex-wrap:wrap}
  .frame-info{display:none}
  .speed,.btn-play{min-height:36px}

  .city-name{font-size:19px}
  .city-km span{font-size:23px}
  .tr-sec{gap:2px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .conv-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* El río: una ficha arriba de la otra y la tabla del tramo en 11 px, que en
     390 px cinco columnas de números no entran. */
  .rio-cards{grid-template-columns:minmax(0,1fr)}
  .rio-v{font-size:29px}
  .rio-cor td{padding:4px 3px; font-size:11px}
  .rio-cor th{font-size:8px; padding:3px 3px 5px}
  .rio-svg{height:88px}
  .rng button{min-width:44px; min-height:38px}
  .btn-poi{min-height:38px}
}

/* Teléfonos chicos: el disco ya usa todo el ancho, lo demás se achica una raya. */
@media (max-width:400px){
  .brand-txt h1{font-size:15px}
  .city-km span{font-size:20px}
  .tr-grid{gap:5px}
}

/* ============================ CAPA 2026 =====================================
   Lo de arriba define QUÉ se muestra; esta capa cambia sólo CÓMO se ve: vidrio
   y sombra en lugar de planos planos, una escala de radios pareja, acentos en
   degradado y una entrada suave cuando se abre una solapa. No toca ni tamaños
   de letra ni columnas, para no pelearse con las media query del teléfono. */
:root{
  --r-s:11px; --r-m:15px; --r-l:20px;
  --sh-1:0 1px 2px rgba(3,7,18,.55);
  --sh-2:0 14px 30px -18px rgba(2,6,16,.95);
  --hair:rgba(126,168,226,.2);
  --hair-hi:rgba(126,196,255,.42);
}
body{
  background:
    radial-gradient(1100px 620px at 8% -10%, #16294a 0%, rgba(11,16,32,0) 62%),
    radial-gradient(900px 520px at 100% 0%, #13243f 0%, rgba(11,16,32,0) 58%),
    var(--bg);
}
/* --- Barra de arriba: vidrio esmerilado y una línea de neón por debajo --- */
.topbar{
  background:linear-gradient(180deg,rgba(21,34,60,.92),rgba(11,16,32,.82));
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:0; position:relative; z-index:1200;
}
.topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(57,182,255,.6) 22%,rgba(124,240,198,.35) 60%,transparent);
}
.logo{
  border-radius:12px; box-shadow:0 0 0 1px rgba(120,190,255,.3), 0 6px 18px -8px rgba(57,182,255,.55);
}
.brand-txt h1{ text-shadow:0 0 22px rgba(90,170,255,.28) }
.brand-txt .ver{
  background:linear-gradient(180deg,#8ce0ff,#39b6ff); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
/* --- Botones: píldora con relieve y elevación al pasar encima --- */
.btn,.btn-mini{
  border-radius:999px; border:1px solid var(--hair);
  background:linear-gradient(180deg,#1a2947,#131e37);
  box-shadow:var(--sh-1);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px -12px #000; border-color:var(--hair-hi)}
.btn:active{transform:translateY(0)}
.btn.active{background:linear-gradient(180deg,#1d3f63,#152a48); border-color:var(--hair-hi)}
.btn-cloud.active,.btn-rayo.active{border-radius:999px}
:focus-visible{outline:2px solid #63c5ff; outline-offset:2px; border-radius:6px}

/* --- Panel y tarjetas: la misma piel para todas --- */
.panel{
  background:linear-gradient(180deg,rgba(19,28,50,.95),rgba(12,18,34,.98));
  border-left:1px solid var(--hair);
}
.city-card,.scope-card,.conv-card,.radar-card,.sources,.fc-day,.rio-card,
.rio-cauce,.rio-tabla,.cons-row .cr-block,.install-tip{
  border-radius:var(--r-m); border-color:var(--hair);
  box-shadow:var(--sh-2);
}
/* Las notas de texto (el "cómo se lee" del río y de la predicción) y el cartel
   del punto con el río: mismo radio que el resto, para que la columna no se vea
   hecha de seis estilos distintos. */
.fc-note,.rio-punto,.alert-bar,.prob-detail,.glo-card{border-radius:var(--r-m)}
.glo-card{box-shadow:0 30px 70px -30px #000, 0 0 0 1px var(--hair)}
.city-card,.scope-card{
  background:linear-gradient(168deg,rgba(24,42,72,.92),rgba(9,16,32,.96));
}
/* Celdas y chips internos: radio chico, pelo brillante, número tabular. */
.mx,.tr-cell,.tr-sec .ts,.pc-facts .pf,.cvx,.rd-r,.src-item,.rio-hora,.prob-bar,.rng button{
  border-radius:var(--r-s);
}
.mx,.tr-cell,.pc-facts .pf,.src-item{background:linear-gradient(180deg,rgba(16,28,50,.9),rgba(10,17,32,.92))}
.st-head,.src-head,.legend-title,.rio-card h3,.rio-cauce h3,.rio-tabla h3,.fc-day > h3{
  color:#9db8dd;
}
/* --- Solapas: un solo control segmentado, con la activa iluminada --- */
.tabs{
  background:rgba(9,15,29,.82); border:1px solid var(--hair); border-radius:var(--r-m);
  backdrop-filter:blur(10px); box-shadow:var(--sh-2);
}
.tab{border-radius:11px; transition:background .16s ease, color .16s ease}
.tab[aria-selected="true"]{
  background:linear-gradient(180deg,#1f5c8a,#14324f);
  box-shadow:inset 0 0 0 1px rgba(120,205,255,.5), 0 8px 20px -14px #000;
  text-shadow:0 0 14px rgba(120,205,255,.45);
}
/* --- El reproductor y las fichas flotantes del mapa --- */
.player,.ts-badge,.legend,.layer-note,.wind-strip,.afuera-chip,.map-mode,.rv-tag{
  border-radius:var(--r-m); border-color:var(--hair);
  background:rgba(12,20,38,.82); backdrop-filter:blur(10px) saturate(140%);
  box-shadow:var(--sh-2);
}
.ts-badge{border-radius:var(--r-s)}
/* --- Scrollbar: fino y del color del panel, no el gris de Windows --- */
.panel::-webkit-scrollbar,.glo-body::-webkit-scrollbar,.rio-cor::-webkit-scrollbar{width:10px;height:10px}
.panel::-webkit-scrollbar-track,.glo-body::-webkit-scrollbar-track{background:transparent}
.panel::-webkit-scrollbar-thumb,.glo-body::-webkit-scrollbar-thumb,.rio-cor::-webkit-scrollbar-thumb{
  background:rgba(126,168,226,.3); border-radius:99px; border:3px solid transparent; background-clip:padding-box;
}
.panel::-webkit-scrollbar-thumb:hover{background:rgba(150,195,255,.5); background-clip:padding-box}
/* --- Movimiento de entrada: la solapa nueva aparece, no se teleporta --- */
@keyframes subir{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.tabpane:not([hidden]) > *{animation:subir .26s ease-out both}
.tabpane:not([hidden]) > :nth-child(2){animation-delay:.04s}
.tabpane:not([hidden]) > :nth-child(3){animation-delay:.08s}
.tabpane:not([hidden]) > :nth-child(4){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}