/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   cw-ui.css — el rediseño R-01 («panel de datos», maquetas aprobadas por Ima el 22-oct-2026).
   UNA sola hoja para las páginas de Astro y las de PHP: se sirve como archivo (/ui/cw-ui.css?v=N) y la
   piden BaseLayout.astro y lib/ui.php con el MISMO número (test ui_base_test.php). Si cambia algo acá,
   se sube el número en los dos lados: el CDN cachea el CSS un mes y sin número nuevo nadie lo ve.

   Reglas del diseño (docs/design/DESIGN.md + ADR 2026-10-22-rediseno-maquetas-panel):
   · Fondo #0a0a0a, tarjetas #141414 con borde casi invisible y radio 16. Todo en Geist.
   · Las cifras mandan; los rótulos van chicos y en gris.
   · Color SOLO con significado: ámbar = arde / acción, verde = contenido o bueno, gris = terminado,
     rojo = intensidad muy fuerte. Nada de color decorativo.
   · Todas las clases nuevas llevan prefijo `u-` (o `sn-` la barra, que ya se llamaba así): las páginas
     viejas tienen sus .card, .row, .dd… y no se pueden pisar mientras conviven las dos versiones.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --u-bg: #0a0a0a; --u-card: #141414; --u-card2: #1c1c1c; --u-input: #0a0a0a;
  --u-line: rgba(255,255,255,.06); --u-line2: rgba(255,255,255,.1);
  --u-text: #ededed; --u-mut: #8f8f8f; --u-faint: #5c5c5c;
  --u-amber: #f59e0b; --u-green: #4ade80; --u-red: #ef4444; --u-orange: #f97316;
  --u-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --u-r: 16px;
}

/* ── Barra superior (sn-*) · la misma en Astro (SiteNav.astro) y en PHP (nav.php) ─────────────────── */
.sn-navbar { position: sticky; top: 0; z-index: 1200; height: 60px; box-sizing: border-box; background: rgba(10,10,10,.92);
  border-bottom: 1px solid var(--u-line); font-family: var(--u-font); -webkit-font-smoothing: antialiased; }
.sn-in { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 36px; box-sizing: border-box; }
.sn-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--u-text) !important; text-decoration: none; white-space: nowrap; }
.sn-brand:hover { opacity: 1 !important; text-decoration: none; }
.sn-mark { width: 22px; height: 22px; flex: none; display: block; }   /* el logo de siempre (la llama), no un cuadrado: la maqueta usaba un marcador */
.sn-links { display: flex; align-items: center; gap: 26px; }
.sn-link { font-size: 14px; color: var(--u-mut) !important; text-decoration: none; white-space: nowrap; transition: color .15s; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.sn-link:hover, .sn-link.active { color: var(--u-text) !important; opacity: 1 !important; text-decoration: none; }
.sn-more { position: relative; }
.sn-more > summary { list-style: none; display: flex; align-items: center; gap: 4px; }
.sn-more > summary::-webkit-details-marker { display: none; }
.sn-more > summary::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 1px; }
.sn-pop { position: absolute; left: -12px; top: calc(100% + 14px); width: 280px; background: var(--u-card); border: 1px solid var(--u-line2);
  border-radius: 14px; padding: 6px; box-shadow: 0 20px 40px rgba(0,0,0,.55); z-index: 1300; }
.sn-pop a { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px; color: var(--u-text) !important; text-decoration: none; }
.sn-pop a:hover, .sn-pop a.active { background: var(--u-card2); opacity: 1 !important; text-decoration: none; }
.sn-pop a b { font-weight: 500; font-size: 14px; }
.sn-pop a span { font-size: 12px; color: var(--u-mut); }
.sn-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.sn-search { display: flex; align-items: center; gap: 8px; width: 240px; height: 36px; padding: 0 12px; box-sizing: border-box; border-radius: 10px;
  background: var(--u-card); border: 1px solid var(--u-line); color: var(--u-faint); }
.sn-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--u-text); font: 13px var(--u-font); }
.sn-search input::placeholder { color: var(--u-faint); }
.sn-search:focus-within { border-color: var(--u-line2); }
.sn-search svg { flex: none; width: 14px; height: 14px; }
.sn-lang { font-size: 13px; color: var(--u-mut); white-space: nowrap; }
.sn-lang a { color: var(--u-mut) !important; text-decoration: none; }
.sn-lang a.active { color: var(--u-text) !important; font-weight: 500; }
.sn-burger { display: none; width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center; background: none; border: 0; color: var(--u-text); cursor: pointer; }
.sn-burger svg { width: 20px; height: 20px; }
/* Botón «fondo del mapa» de las páginas con mapa grande (lo cablea basemap.js). Fuera de ellas no existe. */
.sn-basemap-d { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; background: none;
  border: 1px solid var(--u-line2); color: var(--u-mut); font: 500 13px var(--u-font); cursor: pointer; white-space: nowrap; }
.sn-basemap-d:hover { color: var(--u-text); }
.sn-basemap-d svg { width: 15px; height: 15px; }
.sn-basemap-off { display: none !important; }

/* Menú del celular: panel a pantalla completa. ⚠️ Los z-index de overlay y panel son los del test
   menus_sobre_anuncios_test.php: por ENCIMA del adhesivo de Mediavine (2147483535). */
.sn-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 2147483540; }
.sn-overlay.open { opacity: 1; visibility: visible; }
.sn-drawer { position: fixed; inset: 0; background: var(--u-bg); transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s; z-index: 2147483541; display: flex; flex-direction: column;
  overflow-y: auto; font-family: var(--u-font); color: var(--u-text); -webkit-font-smoothing: antialiased; }
.sn-drawer.open { transform: none; opacity: 1; visibility: visible; }
.sn-dhead { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--u-line); flex: none; }
.sn-close { width: 44px; height: 44px; margin-right: -10px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--u-text); cursor: pointer; }
.sn-dbody { padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.sn-dsearch { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 10px; background: var(--u-card); border: 1px solid var(--u-line); color: var(--u-faint); }
.sn-dsearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--u-text); font: 15px var(--u-font); }
.sn-dsearch svg { width: 15px; height: 15px; flex: none; }
.sn-dmain a { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--u-line); color: var(--u-text) !important; text-decoration: none; }
.sn-dmain a:first-child { border-top: 0; }
.sn-dmain a b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.sn-dmain a.active b { color: var(--u-amber); }
.sn-dmain a > span { flex: 1; min-width: 0; }
.sn-dmain a > span > span { display: block; font-size: 13px; color: var(--u-mut); }
.sn-dmain a i, .sn-dmore a i { margin-left: auto; font-style: normal; color: var(--u-mut); }
.sn-dlbl { font-size: 12px; color: var(--u-mut); padding: 12px 0 4px; }
.sn-dmore a, .sn-dmore button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--u-line);
  background: none; color: var(--u-text) !important; font: 15px var(--u-font); text-decoration: none; text-align: left; padding: 0; cursor: pointer; }
.sn-dmore .sn-dlbl + a { border-top: 0; }
.sn-dmore button:empty { display: none; }
.sn-dfoot { margin-top: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; gap: 18px; font-size: 13px; }
.sn-dfoot a { color: var(--u-mut) !important; text-decoration: none; }

@media (max-width: 1099px) { .sn-search { display: none; } }
/* Cortes MEDIDOS en Chrome el 22-oct (tools/preview, EN y ES, 360-1440 px): con el buscador, lo más justo es ES a
   1100 px y sobran 226 px entre los enlaces y la derecha; sin él, a 960 sobran 342. El hamburguesa recién hace falta
   por debajo de ~620 px: se pone a 767 para que los iPad en vertical (768/810/834) vean la barra entera. */
@media (max-width: 767px) {
  .sn-navbar { height: 52px; }
  .sn-in { padding: 0 16px; gap: 12px; }
  .sn-brand { font-size: 14px; gap: 8px; }
  .sn-mark { width: 20px; height: 20px; }
  .sn-links, .sn-right .sn-lang, .sn-right .sn-basemap-d { display: none; }
  .sn-burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .sn-drawer, .sn-overlay { transition: none; } }
/* T-24 (21-oct-2026), heredado de la barra vieja y GLOBAL a propósito: en el celular, sin desenfoque detrás de lo
   que queda fijo o se repite al scrollear (en iPhone el backdrop-filter se recalcula en cada cuadro y da tirones), y
   los puntos «en vivo» laten 3 veces y se quedan quietos. Cubre las piezas de las páginas que todavía no migraron. */
@media (max-width: 1079px) {
  .sn-navbar, .navbar, .stat-card, .region-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .navbar { background: rgba(26, 26, 26, 0.97) !important; }
  .sn-live-dot, .live-dot { animation-iteration-count: 3 !important; }
}
@media (prefers-reduced-motion: reduce) { .sn-live-dot, .live-dot { animation: none !important; } }

/* ── Globos de ayuda (ⓘ, InfoTip / nw_info_html) en TODO el sitio ─────────────────────────────────────────────────
   ⚠️ Cerrados NO ocupan lugar. Las páginas los escondían con opacity/visibility y, aunque no se veían, seguían
   ensanchando la página en el celular: medido el 22-oct con tools/preview, 564 px de ancho en una región a 390
   (el globo de «lo que ve el satélite») y 407 en la ficha. El celular achica entonces TODA la página para que entre. */
.cw-tw .cw-tip, .rn-fig-i .rn-tip, .hr-trend .hr-tip { display: none; }
.cw-tw:hover .cw-tip, .cw-tw:focus-visible .cw-tip, .cw-tw.on .cw-tip, .rn-fig-i:hover .rn-tip, .rn-fig-i.on .rn-tip, .hr-trend:hover .hr-tip { display: block; }

/* ── Piezas del diseño (u-*) ─────────────────────────────────────────────────────────────────────── */
.u-page { background: var(--u-bg); color: var(--u-text); font-family: var(--u-font); font-size: 14px; line-height: 1.55;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.u-page a { color: inherit; }
.u-mut { color: var(--u-mut); }
.u-lbl { font-size: 12px; color: var(--u-mut); }
.u-lnk { color: var(--u-amber) !important; text-decoration: none; }
.u-lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.u-card { background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-r); padding: 16px; }
@media (min-width: 1080px) { .u-card { padding: 20px; } }
.u-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.u-ch h2, .u-ch h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.u-ch > span, .u-ch > a { font-size: 12px; color: var(--u-mut); text-align: right; text-decoration: none; }
.u-ch > a.u-lnk { color: var(--u-amber); }
.u-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--u-line); }
.u-ch + .u-row, .u-row.u-first { border-top: 0; padding-top: 0; }
.u-row > :first-child { color: var(--u-mut); flex: none; max-width: 45%; }
.u-row > :last-child { text-align: right; min-width: 0; }
.u-g { display: block; font-size: 12px; color: var(--u-mut); line-height: 1.45; margin-top: 2px; }
.u-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--u-mut); }
.u-dot.is-active { background: var(--u-amber); } .u-dot.is-contained { background: var(--u-green); } .u-dot.is-ended { background: var(--u-mut); }
.u-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.u-pill.is-active { background: rgba(245,158,11,.12); color: var(--u-amber); }
.u-pill.is-contained { background: rgba(74,222,128,.12); color: var(--u-green); }
.u-pill.is-ended { background: rgba(255,255,255,.08); color: #d4d4d4; }
.u-cc { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 16px; padding: 0 3px; border-radius: 4px; background: #262626;
  color: #bdbdbd; font-size: 10px; font-weight: 600; letter-spacing: .02em; margin-right: 6px; vertical-align: 1px; }

/* Cifras: grilla de tarjetas con líneas finas (2 columnas en el celular, en fila en escritorio). */
.u-kgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.u-k { padding: 14px 16px; border: 0 solid var(--u-line); min-width: 0; }
.u-kgrid > .u-k:nth-child(odd) { border-right-width: 1px; }
.u-kgrid > .u-k:not(:nth-last-child(-n+2)) { border-bottom-width: 1px; }
.u-kgrid > .u-k:nth-child(odd):last-child { grid-column: 1 / -1; border-right-width: 0; }
.u-val { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-val small { font-size: 13px; font-weight: 500; color: var(--u-mut); letter-spacing: 0; }
.u-val.is-amber { color: var(--u-amber); } .u-val.is-green { color: var(--u-green); }
@media (min-width: 1080px) {
  .u-kgrid.u-krow { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
  .u-krow > .u-k { padding: 18px 22px; border-width: 0 0 0 1px !important; grid-column: auto !important; }
  .u-krow > .u-k:first-child { border-left-width: 0 !important; }
  .u-krow .u-val { font-size: 22px; }
}
.u-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: 8px; overflow: hidden; }
.u-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--u-green); }

/* Selector segmentado (pestañas). */
.u-seg { display: flex; padding: 3px; border-radius: 10px; background: var(--u-input); border: 1px solid var(--u-line); gap: 2px; }
.u-seg > * { flex: 1; display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 7px; border: 0; background: none;
  color: var(--u-mut); font: 13px var(--u-font); white-space: nowrap; cursor: pointer; text-decoration: none; }
.u-seg > [aria-selected="true"], .u-seg > .on { background: #2a2a2a; color: var(--u-text); font-weight: 500; }

/* Botones y campos. */
.u-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--u-text);
  color: var(--u-bg) !important; font: 500 14px var(--u-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.u-btn:hover { background: #fff; opacity: 1 !important; text-decoration: none; }
.u-btn:disabled { opacity: .6; cursor: default; }
.u-btn2 { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--u-line2);
  background: none; color: var(--u-text) !important; font: 500 13px var(--u-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.u-btn2:hover { border-color: rgba(255,255,255,.22); opacity: 1 !important; text-decoration: none; }
.u-inp { height: 40px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid var(--u-line2); background: var(--u-input); color: var(--u-text);
  font: 14px var(--u-font); outline: none; }
.u-inp:focus { border-color: rgba(255,255,255,.3); }
.u-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--u-line2); font-size: 13px;
  white-space: nowrap; color: var(--u-text) !important; text-decoration: none; background: none; }
.u-chip:hover { border-color: rgba(255,255,255,.22); opacity: 1 !important; text-decoration: none; }

/* Lista de incendios (miniatura + nombre + estado). */
.u-fire { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--u-line); color: var(--u-text) !important; text-decoration: none; }
.u-ch + .u-fire, .u-fire.u-first { border-top: 0; padding-top: 0; }
.u-fire:hover { opacity: 1 !important; text-decoration: none; }
.u-fire:hover .u-fn { color: var(--u-amber); }
.u-fire img, .u-fire .u-ph { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; background: #262626; margin: 0; }
.u-fb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.u-fn { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-fr { flex: none; text-align: right; font-size: 13px; }
.u-fr .u-bar { width: 72px; margin: 5px 0 0 auto; }

/* Desplegables (contenido fijo, preguntas). */
.u-dd { border-bottom: 1px solid var(--u-line); }
.u-dd:last-child { border-bottom: 0; }
.u-dd > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 500; cursor: pointer; }
.u-dd > summary::-webkit-details-marker { display: none; }
.u-dd > summary::after { content: "+"; margin-left: auto; color: var(--u-mut); font-size: 16px; width: 16px; text-align: center; font-weight: 400; }
.u-dd[open] > summary::after { content: "−"; }
.u-dd[open] { padding-bottom: 14px; }

/* Espacio del anuncio dentro del flujo (solo para las vistas previas: Mediavine pone los suyos). */
.u-stack { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1080px) { .u-stack { gap: 16px; } }

/* Apoyo al proyecto (Cafecito / Ko-fi, de BaseLayout): con la especificidad de body.u-page para ganarle a la hoja
   global de BaseLayout, que va después en la cascada. Botón blanco y el segundo con borde, como el resto. */
body.u-page .cw-donate { background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-r); }
body.u-page .cw-donate h3 { font-family: var(--u-font); }
body.u-page .cw-donate-btn { background: var(--u-text); color: var(--u-bg) !important; font-family: var(--u-font); border-radius: 10px; box-shadow: none; }
body.u-page .cw-donate-btn:hover { box-shadow: none; }
body.u-page .cw-donate-btn--alt { background: none; color: var(--u-text) !important; border: 1px solid var(--u-line2); }

/* Pie común. */
.u-foot { border-top: 1px solid var(--u-line); margin-top: 40px; font-family: var(--u-font); }
.u-foot-in { max-width: 1200px; margin: 0 auto; padding: 24px 24px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 13px; color: var(--u-mut); box-sizing: border-box; }
.u-foot a { color: var(--u-mut) !important; text-decoration: none; }
.u-foot a:hover { color: var(--u-text) !important; opacity: 1 !important; }
.u-foot .u-foot-src { margin-left: auto; }
.u-foot .u-foot-sup a { color: var(--u-amber) !important; }
@media (max-width: 767px) { .u-foot-in { padding: 20px 16px 96px; } .u-foot .u-foot-src { margin-left: 0; width: 100%; font-size: 12px; } }