/* ============================================================
   MeteoRanking — el tiempo, verificado.
   Lenguaje visual «1c · Cielo protagonista» (claude.ai/design,
   proyecto «Interfaz web meteorológica avanzada», 13-jul-2026):
   papel cálido + tintas azul-gris, cielo degradado con arco solar,
   sol ámbar, tarjetas blancas 16px, píldoras de fuente ○/●,
   Instrument Serif / Instrument Sans / IBM Plex Mono.
   ============================================================ */

/* ---------- fuentes autoalojadas ---------- */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;

  /* tintas y superficies (papel cálido + azul-gris frío) */
  --fondo: light-dark(#fbf9f6, #161b25);
  --superficie: light-dark(#ffffff, #1d2431);
  --superficie-alta: light-dark(#f6f4ef, #232b3a);
  --tinta: light-dark(#26303f, #e3e8f0);
  --tinta-2: light-dark(#3a4658, #c3ccd9);
  --tinta-suave: light-dark(#6b7688, #93a0b3);
  --tinta-tenue: light-dark(#9aa3b2, #6a7689);
  --borde: light-dark(#eceff4, #2a3342);
  --borde-suave: light-dark(#f0f2f6, #242c3a);
  --borde-pill: light-dark(#dde2ea, #39445a);
  --borde-cielo: light-dark(#cdd7e6, #39445a);

  /* acentos */
  --marca: light-dark(#3f79c9, #7fa9dd);       /* enlaces, línea del combinado */
  /* acento del combinado Sinapsis (fila del ranking, chip, barra). Alias de
     --marca: antes se usaba var(--isobara), que NUNCA estuvo definida, así
     que el chip de esa fila salía sin color. */
  --sinapsis: light-dark(#3f79c9, #7fa9dd);
  --marca-tinta: light-dark(#2c5da3, #a9c6ea);
  --ambar: #f4b23f;                             /* el sol */
  --ambar-tinta: light-dark(#c99a3a, #e8c877);
  --rojo-max: light-dark(#d1583f, #e07a63);
  --azul-min: light-dark(#3f79c9, #7fa9dd);
  --verde: light-dark(#3f9d6a, #58b381);
  --verde-tinta: light-dark(#2f7d53, #7ecfa0);
  --verde-fondo: light-dark(rgb(63 157 106 / .13), rgb(88 179 129 / .16));

  /* severidad (escala del propio degradado UV de la propuesta) */
  --sev-buena: light-dark(#3f9d6a, #58b381);
  --sev-media: light-dark(#c9a92c, #e0c23a);
  --sev-alta: light-dark(#e0872f, #eb9c4d);
  --sev-muy-alta: light-dark(#d1583f, #e07a63);
  --sev-extrema: light-dark(#9b3ac0, #b568d3);
  --sev-sin-datos: var(--borde);
  --grad-uv: linear-gradient(90deg, #3f9d6a, #e0c23a, #e0872f, #d1583f, #9b3ac0);

  /* gráficas */
  --gr-contexto: light-dark(rgb(107 118 136 / .34), rgb(147 160 179 / .30));
  --gr-combinado: var(--marca);
  --gr-rejilla: light-dark(rgb(38 48 63 / .07), rgb(227 232 240 / .08));
  --gr-area: light-dark(rgb(63 121 201 / .10), rgb(127 169 221 / .12));
  --gr-prec: var(--marca);

  /* tipografía */
  --f-display: "Instrument Serif", Georgia, serif;
  --f-ui: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.855rem;
  --t-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.03rem);
  --t-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --t-xl: clamp(1.7rem, 1.4rem + 1.2vw, 2.5rem);
  --t-display: clamp(4.6rem, 3rem + 7.5vw, 9rem);

  /* espaciado y geometría */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --radio-s: 9px; --radio-m: 16px; --radio-l: 26px; --radio-pastilla: 999px;
  --ancho-contenido: 1160px;
  --ancho-amplio: 1400px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; text-wrap: balance; }
h2 { font-size: var(--t-xl); margin: 0 0 var(--e-2); }
h3 { font-size: var(--t-lg); margin: 0 0 var(--e-2); }
h4 { margin: 0 0 var(--e-2); }
a { color: var(--marca); }
a:hover { color: var(--marca-tinta); }
.mono { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.05em; }
button { font-family: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }

/* píldoras de fuente del dato: ○ modelos / ● observación */
.pill-fuente {
  font-family: var(--f-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.05em; border-radius: var(--radio-pastilla);
  padding: 3px 9px; white-space: nowrap;
  color: var(--tinta-tenue); border: 1px solid var(--borde-pill);
  background: transparent;
}
.pill-fuente.obs {
  color: var(--verde-tinta); background: var(--verde-fondo); border-color: transparent;
}

/* insignia de categoría (UV, aire): MUY ALTO, BUENA… */
.badge-cat {
  font-family: var(--f-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.04em; color: #fff; border-radius: 6px; padding: 3px 8px;
  background: var(--cat, var(--tinta-tenue)); white-space: nowrap;
}

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--fondo) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde-suave);
}
.cabecera-int {
  max-width: var(--ancho-amplio);
  margin-inline: auto;
  padding: var(--e-2) clamp(var(--e-4), 3vw, var(--e-7));
  display: flex; align-items: center; gap: var(--e-5);
}
.logo { display: flex; align-items: center; gap: var(--e-2); text-decoration: none; color: var(--tinta); }
.logo-marca { width: 30px; height: 30px; color: var(--marca); }
.logo-nombre { font-family: var(--f-display); font-size: 1.45rem; letter-spacing: 0.01em; }

.nav-secciones { display: flex; gap: var(--e-2); margin-inline: auto; }
.nav-secciones a {
  text-decoration: none; color: var(--tinta-suave);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  padding: 6px 12px; border-radius: var(--radio-s);
  border-bottom: 2px solid transparent;
}
.nav-secciones a:hover { color: var(--tinta); background: var(--superficie-alta); }
.nav-secciones a.activa { color: var(--tinta); border-bottom-color: var(--tinta); border-radius: var(--radio-s) var(--radio-s) 0 0; }
.nav-fiabilidad::after { content: "●"; font-size: 0.55em; vertical-align: super; color: var(--ambar); margin-left: 3px; }

.cabecera-acciones { display: flex; align-items: center; gap: var(--e-2); }
.btn-ubicacion {
  display: flex; align-items: center; gap: var(--e-1);
  background: var(--superficie); border: 1px solid var(--borde-cielo);
  border-radius: var(--radio-s); padding: 7px 13px 7px 10px;
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  cursor: pointer; color: var(--tinta-2);
}
.btn-ubicacion:hover { border-color: var(--marca); }
.btn-ubicacion svg { width: 14px; height: 14px; color: var(--marca); }
.btn-icono {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 1px solid var(--borde-cielo); border-radius: var(--radio-s);
  cursor: pointer; color: var(--tinta-suave);
}
.btn-icono:hover { background: var(--superficie-alta); color: var(--tinta); }
.btn-icono svg { width: 18px; height: 18px; }

/* hamburguesa: solo existe bajo 980px, donde la nav de secciones desaparece */
.btn-menu { display: none; }

/* menú móvil: hoja editorial bajo la cabecera (dialog modal nativo) */
.dialogo-nav {
  width: min(420px, 92vw);
  margin: 68px auto auto;
}
.nav-movil { display: grid; }
.nav-movil a {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--tinta);
  padding: 12px 6px;
  border-bottom: 1px solid var(--borde-suave);
}
.nav-movil a:hover { color: var(--marca-tinta); background: var(--superficie-alta); }
.nav-movil a.activa { color: var(--marca-tinta); box-shadow: inset 3px 0 0 var(--marca); padding-left: 12px; }

/* barra de progreso del primer arranque / refresco */
.barra-progreso {
  display: flex; align-items: center; gap: var(--e-3);
  max-width: var(--ancho-amplio); margin-inline: auto;
  padding: 0 clamp(var(--e-4), 3vw, var(--e-7)) var(--e-2);
}
.bp-pista { flex: 0 0 220px; height: 4px; border-radius: 2px; background: var(--superficie-alta); overflow: hidden; }
.bp-relleno { height: 100%; width: 5%; border-radius: 2px; background: var(--ambar); transition: width 0.6s ease; }
.bp-texto { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--tinta-suave); }

/* ---------- bandas / layout ---------- */
.banda {
  max-width: var(--ancho-amplio);
  margin-inline: auto;
  padding: clamp(var(--e-7), 6vw, var(--e-9)) clamp(var(--e-4), 3vw, var(--e-7));
}
.banda-cabecera { max-width: var(--ancho-contenido); margin-bottom: var(--e-6); }
.banda-nota { color: var(--tinta-suave); max-width: 68ch; margin: 0; }
.banda-realzada {
  background: linear-gradient(color-mix(in oklab, var(--superficie-alta) 70%, var(--fondo)), var(--fondo));
  border-block: 1px solid var(--borde-suave);
  max-width: none;
}
.banda-realzada > * { max-width: var(--ancho-amplio); margin-inline: auto; }

/* ==========================================================
   HERO «Cielo protagonista» (propuesta 1c)
   ========================================================== */
.hero { padding: 0; max-width: none; }

.cielo {
  background: linear-gradient(180deg, #8db8e8 0%, #bcd6f2 42%, #eef4fb 100%);
  color: #fff;
  overflow: hidden;
  transition: background 1s ease;
  position: relative;
}
/* scrim: velo oscuro tras el bloque de texto blanco del hero. Sobre el cielo
   diurno (#8db8e8) el blanco quedaba a ≈2,1:1; con el velo (y los alfas
   subidos de kicker/meta) todo el bloque supera AA 4,5:1. */
.cielo::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 190px;
  background: linear-gradient(180deg, rgb(16 32 58 / .62) 0%, rgb(16 32 58 / .52) 60%, rgb(16 32 58 / 0) 100%);
  pointer-events: none;
}
.cielo-int { position: relative; }
.cielo.crepusculo {
  background: linear-gradient(180deg, #5c6f9b 0%, #c99a7c 62%, #f3e5d8 100%);
}
.cielo.noche {
  background: linear-gradient(180deg, #222f4a 0%, #47597e 62%, #b8c4d9 100%);
}
.cielo-int {
  max-width: var(--ancho-amplio);
  margin-inline: auto;
  /* menos aire arriba: solo reducimos el padding superior, sin tocar tamaños */
  padding: var(--e-3) clamp(var(--e-4), 3vw, var(--e-7)) 0;
}
.hero-kicker {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  color: rgb(255 255 255 / .92); margin: 0; text-transform: uppercase;
}
.hero-lugar {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  color: #fff; margin: 2px 0 0;
}
.hero-meta {
  font-family: var(--f-mono); font-size: var(--t-xs);
  color: rgb(255 255 255 / .9); margin: 4px 0 0;
}

/* la escena: arco + sol + lectura central. Reducimos SOLO la altura del
   contenedor (el hueco vacío de cielo está aquí, encima del número); los
   tamaños de fuente no se tocan y el arco/sol se recalculan en JS en píxeles
   reales para que el sol siga siendo un círculo perfecto. */
.escena { position: relative; height: clamp(168px, 19vw, 210px); margin-top: var(--e-2); }
.escena svg.arco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arco-traza {
  fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 2;
  stroke-dasharray: 2 7; stroke-linecap: round;
}
.noche .arco-traza, .crepusculo .arco-traza { stroke: rgb(255 255 255 / .35); }
.sol-glow { fill: var(--ambar); opacity: 0.35; filter: blur(6px); }
.sol-disco { fill: url(#grad-sol); }
.noche .sol-glow { fill: #dfe7f4; opacity: 0.22; }
.noche .sol-disco { fill: url(#grad-luna); }

.escena-extremo {
  position: absolute; bottom: 10px; text-align: center;
  /* la base del cielo es clara: texto OSCURO para que contraste bien */
  color: #223049;
}
.escena-extremo.salida { left: clamp(4px, 2vw, 24px); }
.escena-extremo.puesta { right: clamp(4px, 2vw, 24px); }
.escena-extremo .mono { display: block; font-size: 0.64rem; letter-spacing: 0.1em; opacity: 1; color: #4a5c7a; }
.escena-extremo b { font-size: var(--t-base); font-weight: 700; }

.escena-centro {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  text-align: center; color: var(--tinta); width: max-content; max-width: 92vw;
}
.noche .escena-centro, .crepusculo .escena-centro { color: #fff; }
.hero-temp {
  font-family: var(--f-display);
  font-size: var(--t-display);
  line-height: 0.84;
  font-variant-numeric: tabular-nums;
}
.hero-cond { font-size: var(--t-lg); margin-top: 4px; color: inherit; opacity: 0.92; }
.escena-centro .pill-fuente {
  display: inline-block; margin-top: 9px;
  background: rgb(255 255 255 / .72); border-color: transparent;
  color: var(--tinta-suave); backdrop-filter: blur(3px);
}
.noche .escena-centro .pill-fuente { background: rgb(255 255 255 / .16); color: rgb(255 255 255 / .85); }

/* banda de datos bajo el cielo */
.hero-datos {
  padding-top: var(--e-5);
  padding-bottom: var(--e-6);
}
.banda-datos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  overflow: hidden;
}
.bd-celda { padding: var(--e-4) var(--e-4); border-right: 1px solid var(--borde-suave); min-width: 0; }
.bd-celda:last-child { border-right: none; }
.bd-etiqueta {
  font-family: var(--f-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.07em; color: var(--tinta-tenue); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.bd-etiqueta .simbolo { font-size: 0.7rem; }
.bd-valor {
  font-size: 1.45rem; color: var(--tinta); margin-top: 5px;
  font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.15;
}
.bd-valor small { font-size: 0.8rem; color: var(--tinta-tenue); font-weight: 400; }
.bd-contexto { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: 2px; }

.tarjetas-extra {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-4);
}
.tx-card {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-m); padding: var(--e-4) var(--e-4);
}
.tx-card.apagada {
  background: var(--superficie-alta); border-style: dashed; color: var(--tinta-tenue);
}
.tx-fila { display: flex; align-items: center; gap: var(--e-2); margin-top: 7px; }
.tx-valor { font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 500; }
.tx-detalle { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: 6px; }
.tx-emoji { font-size: 2.1rem; line-height: 1; }
.barra-uv { height: 5px; border-radius: var(--radio-pastilla); background: var(--grad-uv); margin-top: 9px; position: relative; }
.barra-uv i {
  position: absolute; top: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--superficie); border: 2.5px solid var(--tinta);
  transform: translateX(-50%);
}
.leyenda-fuentes {
  margin: var(--e-4) 0 0; color: var(--tinta-tenue);
  display: flex; gap: var(--e-5); flex-wrap: wrap;
}
.leyenda-fuentes .obs { color: var(--verde-tinta); }

/* ---------- tira horaria ---------- */
.tira-horaria {
  display: flex; gap: var(--e-4); overflow-x: auto;
  padding: var(--e-3) var(--e-1) var(--e-4);
  scrollbar-width: thin;
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--e-5);
}
.th-col {
  min-width: 52px; text-align: center; display: flex;
  flex-direction: column; gap: 3px; align-items: center;
}
.th-hora { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--tinta-tenue); }
.th-emoji { font-size: 1.25rem; }
.th-temp { font-weight: 600; font-variant-numeric: tabular-nums; }
.th-lluvia { font-family: var(--f-mono); font-size: 0.62rem; color: var(--gr-prec); min-height: 1em; }
.th-dia {
  align-self: stretch; writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--tinta-tenue); border-left: 1px solid var(--borde);
  padding-left: 6px; min-width: 20px;
}

/* ---------- tarjetas de días ---------- */
.dias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--e-4);
  margin-bottom: var(--e-7);
}
.dia-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: var(--e-3) var(--e-4);
  display: grid; gap: 4px; justify-items: start;
}
.dia-card:hover { border-color: var(--marca); }
.dc-dia { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinta-tenue); }
.dc-emoji { font-size: 1.7rem; }
.dc-temps { font-variant-numeric: tabular-nums; font-weight: 600; }
.dc-temps .max { color: var(--rojo-max); }
.dc-temps .min { color: var(--azul-min); font-weight: 500; }
.dc-lluvia { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gr-prec); }

/* ---------- gráficas ---------- */
.dg-controles, .segmentos { display: flex; gap: 2px; flex-wrap: wrap; }
.segmentos {
  background: var(--superficie-alta); border-radius: var(--radio-s);
  padding: 2px; width: fit-content;
}
.segmentos button, .dg-controles button {
  border: none; background: none; cursor: pointer;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-suave);
  padding: 5px 12px; border-radius: 7px;
}
.segmentos button[aria-selected="true"], .segmentos button.activo,
.dg-controles button[aria-selected="true"] {
  background: var(--superficie); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--borde-pill);
}
.dg-controles { margin-bottom: var(--e-4); }

.grafica-figura { position: relative; margin: 0; }
.grafica { width: 100%; height: auto; display: block; }
.gr-rejilla { stroke: var(--gr-rejilla); }
.gr-eje { fill: var(--tinta-tenue); font-family: var(--f-mono); font-size: 11px; }
.gr-contexto { stroke: var(--gr-contexto); stroke-width: 1.1; }
.gr-combinado { stroke: var(--gr-combinado); stroke-width: 2.4; stroke-linecap: round; }
.gr-secundaria { stroke: var(--ambar-tinta); stroke-width: 1.6; stroke-dasharray: 5 4; }
.gr-area { fill: var(--gr-area); }
.gr-etiqueta-directa {
  fill: var(--gr-combinado); font-family: var(--f-mono);
  font-size: 11px; font-weight: 500;
}
.gr-cruz { stroke: var(--tinta-tenue); stroke-width: 1; stroke-dasharray: 3 3; }
.gr-punto { fill: var(--gr-combinado); stroke: var(--superficie); stroke-width: 1.5; }
.gr-barra-prec { fill: var(--gr-prec); }
.gr-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  background: color-mix(in oklab, var(--superficie) 96%, transparent);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: var(--e-2) var(--e-3);
  font-family: var(--f-mono); font-size: 0.66rem; line-height: 1.7;
  color: var(--tinta-suave);
  max-width: 190px;
  font-variant-numeric: tabular-nums;
}
.gr-tooltip .tt-comb { color: var(--gr-combinado); }
.gr-leyenda {
  display: flex; gap: var(--e-4); flex-wrap: wrap;
  margin-top: var(--e-2); font-size: var(--t-xs); color: var(--tinta-suave);
}
.gr-leyenda .muestra { display: inline-block; width: 16px; height: 0; border-top: 2.4px solid var(--gr-combinado); vertical-align: middle; margin-right: 5px; }
.gr-leyenda .muestra.ctx { border-top: 1.1px solid var(--gr-contexto); }

/* ---------- multimodelo ---------- */
.mm-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--e-2); }
.mm-tabla {
  display: grid;
  grid-template-columns: 104px repeat(var(--n, 24), 46px);
  align-items: center;
  min-width: min-content;
  row-gap: 2px;
}
.mm-esquina, .mm-esquina-h {
  position: sticky; left: 0; z-index: 2; background: var(--fondo);
  grid-column: 1;
}
.mm-dia {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--tinta-suave); font-weight: 500;
  padding: 0 0 2px 4px; border-left: 1px solid var(--borde);
}
.mm-hora {
  font-family: var(--f-mono); font-size: 0.66rem; color: var(--tinta-tenue);
  text-align: center; padding-bottom: 4px;
}
.mm-modelo {
  position: sticky; left: 0; z-index: 2; background: var(--fondo);
  grid-column: 1; display: flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
  padding: 4px 10px 4px 2px; height: 100%;
  border-right: 1px solid var(--borde);
}
.mm-punto { width: 8px; height: 8px; border-radius: 2px; background: var(--chip, var(--borde)); flex: 0 0 auto; }
.mm-nombre-sinapsis { font-weight: 700; color: var(--tinta); }
/* zebra: filas alternas con fondo algo más oscuro para seguir cada modelo */
.mm-z { background: color-mix(in oklab, var(--tinta) 10%, transparent); }
.mm-modelo.mm-z { background: color-mix(in oklab, var(--tinta) 10%, var(--fondo)); }
.mm-regional { color: var(--tinta-suave); font-weight: 500; }
.mm-hr { color: var(--ambar-tinta); font-size: 0.7rem; margin-left: 3px; }
.mm-celda {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 0; border-radius: 7px;
}
.mm-icono { font-size: 1.15rem; line-height: 1; }
.mm-temp {
  font-family: var(--f-mono); font-size: 0.66rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* franja de fondo alterna en la fila del combinado */
.mm-tabla > .mm-nombre-sinapsis,
.mm-tabla > .mm-nombre-sinapsis ~ .mm-celda:nth-child(-n+33) { }
.mm-nombre-sinapsis { background: color-mix(in oklab, var(--marca) 9%, var(--fondo)); box-shadow: inset 2px 0 0 var(--marca); }

/* ---------- fiabilidad ---------- */
.fiabilidad-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--e-5);
  margin-bottom: var(--e-5);
}
.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: var(--e-5);
}
.panel-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.definicion { color: var(--tinta-tenue); margin: var(--e-1) 0 var(--e-4); }
.nota-metodo { font-size: var(--t-xs); color: var(--tinta-tenue); margin: var(--e-4) 0 0; max-width: 60ch; }

.rk-fila {
  display: grid;
  grid-template-columns: 26px minmax(110px, 1fr) minmax(90px, 2fr) 100px;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-2) var(--e-2);
  border-radius: var(--radio-s);
  font-variant-numeric: tabular-nums;
}
.rk-fila.sinapsis {
  background: color-mix(in oklab, var(--marca) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--marca);
}
.rk-pos { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--tinta-tenue); text-align: right; }
.rk-nombre { font-size: var(--t-sm); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.rk-nombre .chip { width: 8px; height: 8px; border-radius: 2px; background: var(--chip, var(--borde)); flex: 0 0 auto; }
.rk-nombre small { color: var(--tinta-tenue); font-weight: 400; }
.rk-pista { height: 6px; border-radius: 3px; background: var(--superficie-alta); overflow: hidden; }
.rk-barra { height: 100%; border-radius: 3px; background: color-mix(in oklab, var(--marca) 45%, var(--superficie-alta)); }
.sinapsis .rk-barra { background: var(--marca); }
.rk-valor { font-family: var(--f-mono); font-size: var(--t-sm); text-align: right; }
.rk-valor small { color: var(--tinta-tenue); font-size: 0.62rem; }
.rk-sin-datos { opacity: 0.45; }

/* tira de verificación tipo página de estado */
.tv-tira { display: flex; gap: 2px; margin: var(--e-2) 0 var(--e-4); }
.tv-dia {
  /* <button>: alcanzable por teclado y con nombre accesible (aria-label) */
  appearance: none; border: none; padding: 0; margin: 0;
  flex: 1; height: 26px; border-radius: 2px;
  background: var(--sev, var(--sev-sin-datos));
  min-width: 4px; cursor: default; position: relative;
}
.tv-dia:hover, .tv-dia:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; z-index: 2; }
.tv-leyenda { display: flex; gap: var(--e-4); font-size: var(--t-xs); color: var(--tinta-tenue); flex-wrap: wrap; }
.tv-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--sev); margin-right: 4px; vertical-align: -1px; }

.lv-fila {
  display: grid; grid-template-columns: 72px 1fr auto; gap: var(--e-3);
  font-size: var(--t-sm); padding: var(--e-1) 0;
  font-variant-numeric: tabular-nums;
}
.lv-fecha { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--tinta-tenue); align-self: center; }
.lv-mejor { color: var(--verde-tinta); font-weight: 600; text-align: right; }

.panel-ancho { margin-top: var(--e-5); }

/* ---------- radar ---------- */
.radar-mapa {
  height: clamp(360px, 55vh, 560px);
  border-radius: var(--radio-m);
  border: 1px solid var(--borde);
  overflow: hidden;
  background: var(--superficie-alta);
}
.radar-linea-tiempo { display: flex; align-items: center; gap: var(--e-4); margin-top: var(--e-3); }
.radar-linea-tiempo input[type="range"] { flex: 1; accent-color: var(--marca); }
#radar .banda-cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--e-3); max-width: none; }

/* ---------- avanzado ---------- */
.avanzado-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: var(--e-5);
}
.avz-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: var(--e-4) var(--e-5);
}
.avz-card h3 { font-family: var(--f-ui); font-size: var(--t-base); font-weight: 600; }
.avz-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.avz-tabla td, .avz-tabla th { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--borde-suave); }
.avz-tabla td:first-child, .avz-tabla th:first-child { text-align: left; }
.avz-tabla th { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--tinta-tenue); text-transform: uppercase; }

/* ---------- pie ---------- */
.pie { border-top: 1px solid var(--borde); background: var(--superficie); margin-top: var(--e-8); }
.pie-int {
  max-width: var(--ancho-amplio); margin-inline: auto;
  padding: var(--e-7) clamp(var(--e-4), 3vw, var(--e-7));
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--e-7);
}
.pie .logo-marca { width: 26px; height: 26px; }
.pie p { margin: var(--e-2) 0; }
.pie-metodo { font-size: var(--t-sm); color: var(--tinta-suave); max-width: 62ch; }
.pie-datos h4 { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--tinta-tenue); }
.pie-datos ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.pie-datos li { margin-bottom: var(--e-1); }
.pie-sello { color: var(--tinta-tenue); margin-top: var(--e-4); }
/* enlaces legales/informativos del pie (comunes a portada y páginas estáticas) */
.pie-enlaces { margin-top: var(--e-4); font-size: var(--t-sm); color: var(--tinta-tenue); }
.pie-enlaces a { color: var(--tinta-suave); text-decoration: none; }
.pie-enlaces a:hover { color: var(--marca); text-decoration: underline; }

/* ---------- diálogos ---------- */
.dialogo {
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
  color: var(--tinta);
  padding: var(--e-5);
  width: min(480px, 92vw);
}
.dialogo::backdrop { background: rgb(20 26 38 / 0.5); backdrop-filter: blur(2px); }
.buscador { display: flex; gap: var(--e-2); }
.buscador input {
  flex: 1; padding: 9px 12px; border-radius: var(--radio-s);
  border: 1px solid var(--borde-pill); background: var(--fondo); color: inherit;
  font: inherit;
}
.btn-primario {
  background: var(--tinta); color: var(--fondo);
  border: none; border-radius: var(--radio-s);
  padding: 9px 16px; font-weight: 600; cursor: pointer;
}
.btn-texto { background: none; border: none; color: var(--marca); font-weight: 600; cursor: pointer; padding: var(--e-2); }
.resultados, .lista-ubicaciones { list-style: none; margin: var(--e-3) 0; padding: 0; }
.resultados li, .lista-ubicaciones li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  padding: var(--e-2) 0; border-bottom: 1px solid var(--borde-suave);
  font-size: var(--t-sm);
}
.resultados .zona, .lista-ubicaciones .zona { color: var(--tinta-tenue); font-size: var(--t-xs); }
/* resultados del buscador de ciudades (modo precomputado): enlaces reales */
.resultado-ciudad {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  flex: 1; color: inherit; text-decoration: none;
}
.resultado-ciudad:hover, .resultado-ciudad:focus-visible { color: var(--marca); }
.ajuste-fila { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e-3); }

/* ---------- bloque SSR (worker) e hidratación ---------- */
/* El worker inyecta en <!--SSR:CONTENIDO--> un bloque semántico legible sin
   JS (h2, resumen, tabla de 7 días, resumen del ranking). La app lo oculta al
   terminar el primer render rico; sin JS se queda visible tal cual. */
.ssr-nucleo {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: var(--e-6) var(--e-5);
  font-size: var(--t-sm);
}
.ssr-nucleo h2 { font-family: var(--f-display); margin: 0 0 var(--e-3); }
.ssr-nucleo table {
  width: 100%; border-collapse: collapse; margin: var(--e-4) 0;
}
.ssr-nucleo th, .ssr-nucleo td {
  text-align: left; padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--borde-suave);
}
.ssr-nucleo th { color: var(--tinta-tenue); font-weight: 600; font-size: var(--t-xs); }
.ssr-oculto { display: none !important; }

/* ---------- esqueletos de carga ---------- */
.esqueleto {
  background: linear-gradient(100deg, var(--superficie-alta) 40%,
    color-mix(in oklab, var(--superficie-alta) 60%, var(--superficie)) 50%,
    var(--superficie-alta) 60%);
  background-size: 200% 100%;
  animation: brillo 1.4s infinite linear;
  border-radius: var(--radio-s);
  color: transparent !important;
  user-select: none;
}
@keyframes brillo { to { background-position: -200% 0; } }

.aviso-red {
  font-size: var(--t-xs); font-family: var(--f-mono);
  color: var(--sev-alta); padding: var(--e-1) 0;
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
}
/* dentro del hero el aviso va sobre el cielo: legible sobre el scrim */
.cielo .aviso-red { color: #ffd9a0; margin: 6px 0 0; }
.btn-reintentar {
  border: 1px solid currentColor; border-radius: var(--radio-pastilla);
  padding: 2px 12px; font-family: var(--f-mono); font-size: var(--t-xs);
  color: inherit; background: transparent;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .banda-datos { grid-template-columns: repeat(3, 1fr); }
  .bd-celda:nth-child(3n) { border-right: none; }
  .bd-celda:nth-child(-n+3) { border-bottom: 1px solid var(--borde-suave); }
  .tarjetas-extra { grid-template-columns: repeat(2, 1fr); }
  .fiabilidad-grid, .pie-int { grid-template-columns: 1fr; }
  .nav-secciones { display: none; }
  .btn-menu { display: grid; } /* la hamburguesa sustituye a la nav oculta */
}
@media (max-width: 560px) {
  .banda-datos { grid-template-columns: repeat(2, 1fr); }
  .bd-celda:nth-child(3n) { border-right: 1px solid var(--borde-suave); }
  .bd-celda:nth-child(2n) { border-right: none; }
  .bd-celda:nth-child(-n+4) { border-bottom: 1px solid var(--borde-suave); }
  .tarjetas-extra { grid-template-columns: 1fr; }
  .rk-fila { grid-template-columns: 22px minmax(90px, 1.4fr) minmax(50px, 1fr) 88px; gap: var(--e-2); }
  .escena-extremo .mono { font-size: 0.55rem; }
}