/* ==========================================================================
   Comparador de previsiones — hoja de estilo única.
   Página oscura, paneles de datos claros: el mismo contraste del comparador
   de meteoblue, que es lo que hace legible una tabla tan densa.
   ========================================================================== */

:root {
  --bg: #0d0e11;
  --bg-soft: #16181d;
  --line: rgba(255, 255, 255, .10);
  --fg: #f2f4f7;
  /* Algo más claro de lo habitual en fondo oscuro: estos textos ahora caen
     sobre la malla de color, donde un gris apagado se pierde. */
  --fg-dim: #9ca5b3;
  --accent: #d81e3f;

  /* Superficies translúcidas: dejan ver el fondo de color a través. */
  --glass: rgba(20, 22, 28, .55);
  --glass-strong: rgba(14, 16, 21, .55);

  --panel: #f1f2f5;
  --panel-head: #dee2e8;
  --ink: #14161a;
  --ink-dim: #5d6675;
  --sep: rgba(0, 0, 0, .13);

  --labelw: 96px;

  /* Alto de la fila de días. Es una variable y no un número suelto porque el
     recuadro de «ahora» empieza justo debajo: si los dos valores se separan, el
     recuadro se sale a la fila de días o deja un hueco. */
  --dayrowh: 26px;
}

* { box-sizing: border-box; }

/* Necesario: varios contenedores llevan `display:flex`, que gana al
   `display:none` que el navegador aplica por el atributo `hidden`. */
[hidden] { display: none !important; }

html, body { margin: 0; }

/* El color base va en `html` y `body` queda transparente: así la malla de color
   de `body::before` puede pintarse por detrás del contenido (`z-index: -1`) sin
   que el propio fondo del body la tape. */
html {
  background: var(--bg);
  /* `clip` y no `hidden`: recorta lo que sobresalga sin convertir la raíz en
     contenedor de scroll, que rompería los `position: sticky` de la cabecera y
     de la columna de etiquetas. */
  overflow-x: clip;
}

/* --- Fondo de color -------------------------------------------------------
   Malla de gradientes en la parte alta del documento, que se desvanece hacia
   abajo con una máscara para que la zona de datos quede tranquila y legible.
   Va en `position: absolute` y no `fixed` a propósito: así se queda arriba y
   desaparece al bajar, en vez de seguirte por toda la tabla.
   Sin `filter: blur`, que en una página con más de 20.000 celdas sale caro; los
   gradientes ya se funden solos con paradas suaves. */
body::before {
  content: '';
  position: absolute;
  /* Sin sobresalir a los lados: con `right` negativo el documento entero cogía
     scroll horizontal y se podía arrastrar la página de lado. */
  top: 0; left: 0; right: 0;
  height: 820px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 62% at  8% 22%, rgba(129, 55, 245, .72), transparent 70%),
    radial-gradient(55% 58% at 33% 40%, rgba(0, 168, 255, .58),  transparent 70%),
    radial-gradient(58% 60% at 57% 14%, rgba(240, 60, 160, .60), transparent 70%),
    radial-gradient(52% 55% at 78% 38%, rgba(0, 214, 175, .46),  transparent 70%),
    radial-gradient(56% 58% at 99% 12%, rgba(64, 120, 255, .58), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
}

/* Rastro de color tenue anclado a la ventana, para que al bajar por la tabla no
   quede todo negro del todo. Muy bajo de opacidad: aquí manda la legibilidad. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 0% 100%, rgba(129, 55, 245, .24), transparent 70%),
    radial-gradient(38% 42% at 100% 90%, rgba(0, 168, 255, .19), transparent 70%);
}

body {
  background: transparent;
  color: var(--fg);
  font: 400 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* --- Barra superior ------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid var(--line);
}

.topbar-main { min-width: 0; flex: 1 1 220px; }

.title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Estrella de favorito ------------------------------------------------- */

.fav-star {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 38px; height: 38px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.fav-star svg { width: 25px; height: 25px; fill: none; stroke: #b9a06a; stroke-width: 1.7; }
.fav-star:hover { background: rgba(255, 255, 255, .08); }
.fav-star:hover svg { stroke: var(--fg); }
.fav-star.is-on svg { fill: #ffc53d; stroke: #ffc53d; }

/* --- Fila de favoritos --------------------------------------------------- */

.favs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px 0;
}
.favs-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-dim);
}

.fav-list { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.fav {
  display: inline-flex; align-items: stretch;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  max-width: 200px;
}
.fav.is-current { border-color: rgba(216, 30, 63, .55); background: rgba(216, 30, 63, .14); }

.fav-go, .fav-del {
  font: inherit; color: var(--fg);
  background: none; border: 0; cursor: pointer;
}
.fav-go {
  padding: 6px 4px 6px 12px;
  font-size: 13px;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-del {
  padding: 0 9px 0 5px;
  font-size: 15px; line-height: 1; color: var(--fg-dim);
}
.fav-go:hover { color: #fff; }
.fav-del:hover { color: #ff8fa3; background: rgba(255, 255, 255, .07); }

/* El nombre del sitio consultado: grande y en dorado degradado, que contrasta
   con los azules y violetas del fondo y hace juego con la estrella de favorito
   y los iconos de sol. El `color` de reserva es para navegadores donde falle el
   recorte del degradado sobre el texto. */
.topbar h1 {
  margin: 0;
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #ffcf6b;
  background: linear-gradient(96deg, #ffe6a3 0%, #ffc65c 42%, #ff9f43 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 2px;   /* que el degradado no corte las colas de la «j» o la «g» */
}

.place-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #aab3c0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-tools { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; }

/* --- Buscador ------------------------------------------------------------- */

.search { position: relative; flex: 1 1 auto; min-width: 0; }

.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: var(--fg-dim); pointer-events: none;
}

.search input {
  width: 100%;
  padding: 9px 30px 9px 32px;
  font: inherit;
  /* 16 px es obligatorio, no una decisión de diseño: Safari en iOS hace zoom
     automático al enfocar un campo de texto con letra MENOR de 16 px, y después
     no deshace el zoom, así que la pantalla se queda cortada.
     La alternativa sería `maximum-scale=1` en el viewport, pero eso impediría
     ampliar la página con los dedos, y perder el zoom por accesibilidad para
     arreglar un zoom no deseado es un mal cambio. */
  font-size: 16px;
  color: var(--fg);
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  appearance: none;
}
.search input::placeholder { color: var(--fg-dim); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 30, 63, .22); }
.search input::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; line-height: 1;
  font-size: 18px; color: var(--fg-dim);
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.search-clear:hover { color: var(--fg); background: rgba(255, 255, 255, .08); }

.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 40;
  margin: 0; padding: 4px;
  max-height: 320px; overflow-y: auto;
  list-style: none;
  background: #1b1e24;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.search-results li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.search-results li:hover,
.search-results li.is-active { background: rgba(255, 255, 255, .09); }
.search-results li b { font-weight: 600; font-size: 14px; }
.search-results li span { font-size: 12px; color: var(--fg-dim); }
.search-results .sr-empty { color: var(--fg-dim); font-size: 13px; cursor: default; }
.search-results .sr-empty:hover { background: none; }

/* --- Botón de ubicación --------------------------------------------------- */

.btn-geo {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  padding: 9px 13px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--fg);
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.btn-geo svg { width: 15px; height: 15px; fill: var(--accent); }
.btn-geo:hover:not(:disabled) { border-color: rgba(255, 255, 255, .28); }
.btn-geo:disabled { opacity: .5; cursor: default; }

/* --- Pestañas de rango --------------------------------------------------- */

/* --- Resumen de cabecera -------------------------------------------------- */

.summary {
  display: flex; align-items: stretch; gap: 18px; flex-wrap: wrap;
  margin: 12px 14px 4px;
  padding: 14px 16px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
}

.sum-now { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.sum-now .sum-ic .wx { width: 46px; height: 46px; }

.sum-main { display: flex; flex-direction: column; }
.sum-temp {
  font-size: 46px; font-weight: 300; line-height: 1;
  letter-spacing: -.03em;
}
.sum-spread { margin-top: 3px; font-size: 11px; color: var(--fg-dim); white-space: nowrap; }

.sum-facts {
  display: flex; gap: 18px; margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.sum-facts dt { font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .04em; }
.sum-facts dd { margin: 2px 0 0; font-size: 14px; color: #cfd6e2; white-space: nowrap; }
.sum-facts dd b { color: var(--fg); font-weight: 600; }

/* Tira de días, con la misma banda de temperatura que las filas de modelos */
.sum-days {
  position: relative;
  flex: 1 1 340px;
  display: grid;
  grid-template-columns: repeat(var(--sdays, 5), 1fr);
  min-width: 0;
}
/* La misma banda que las filas de modelos, pero muy rebajada: allí va detrás de
   texto oscuro sobre panel claro y aquí detrás de texto claro sobre fondo
   oscuro, donde el rosa a plena opacidad se come la legibilidad. */
.sum-bandwrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .3; }

.sd {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 2px 4px;
  border-left: 1px dashed rgba(255, 255, 255, .13);
}
.sd:first-child { border-left: 0; }
/* Colores algo más claros que en el resto de la interfaz: aquí el texto cae
   sobre la banda rosa y con los tonos apagados de siempre se leía mal. */
.sd-name { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; color: #b6bfcd; }
.sd.is-today .sd-name { color: #ff5c7a; }
.sd-ic .wx { width: 24px; height: 24px; }
.sd-t { font-size: 12px; color: #a7b0be; white-space: nowrap; }
.sd-t i { font-style: normal; }
.sd-t b { color: var(--fg); font-weight: 600; }
.sd-r { font-size: 10px; color: #6ea9dd; min-height: 13px; }

.tabs {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 14px 10px;
}

.tabset { display: inline-flex; align-items: center; gap: 7px; }
.tabset-label { font-size: 11.5px; color: var(--fg-dim); }

.tabgroup {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--glass); backdrop-filter: blur(12px); border-radius: 999px;
}

.pill {
  padding: 6px 15px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--fg-dim);
  background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.pill:hover { color: var(--fg); }
.pill.is-active { color: #fff; background: var(--accent); }

/* Botón de actualizar. Envuelve la etiqueta de la hora para que toda ella sea
   pulsable: instalada en el móvil no hay botón de recargar del navegador. */
.btn-refresh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px;
  font: inherit;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.btn-refresh svg { width: 13px; height: 13px; flex: 0 0 auto; fill: var(--fg-dim); }
.btn-refresh:hover:not(:disabled) { border-color: rgba(255, 255, 255, .28); }
.btn-refresh:hover:not(:disabled) svg { fill: var(--fg); }
.btn-refresh:disabled { cursor: default; }
.btn-refresh.is-busy svg { animation: spin .9s linear infinite; fill: var(--accent); }

.updated { margin: 0; font-size: 11.5px; color: var(--fg-dim); white-space: nowrap; }
.updated b { color: #cfd6e2; font-weight: 600; }

/* --- Estado -------------------------------------------------------------- */

.status {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 14px 24px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--fg-dim);
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.status.is-error { color: #ffc9d2; border-color: rgba(216, 30, 63, .5); }
.status.is-error .spinner { display: none; }

.spinner {
  width: 16px; height: 16px; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* --- Rejilla ------------------------------------------------------------- */

.scroller {
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Su barra nativa queda al final de la tabla, fuera de alcance: se oculta y
     el desplazamiento con ratón se hace con `.hbar`, que va fija abajo. */
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }

/* --- Barra de desplazamiento fija ---------------------------------------- */

.hbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 15;
  height: 15px;
  overflow-x: scroll;
  overflow-y: hidden;
  background: rgba(13, 14, 17, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .38) transparent;
}
.hbar > div { height: 1px; }
.hbar::-webkit-scrollbar { height: 14px; }
.hbar::-webkit-scrollbar-track { background: transparent; }
.hbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .34);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}
.hbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .55); background-clip: content-box; }

body.has-hbar { padding-bottom: 15px; }

/* En pantallas táctiles se arrastra con el dedo, así que la barra solo quitaría
   sitio. */
@media (pointer: coarse) {
  .hbar { display: none !important; }
  body.has-hbar { padding-bottom: 0; }
}

/* El ancho de columna lo fija el detalle horario elegido (`--slot-set`, puesto
   desde JS); el móvil usa su propia variante más estrecha. */
.board {
  width: max-content; min-width: 100%; padding-bottom: 8px;
  --slotw: var(--slot-set, 46px);
}

/* Cada bloque de modelo se aísla y, si está fuera de pantalla, el navegador se
   ahorra maquetarlo y pintarlo. Importa mucho aquí: la columna de etiquetas son
   99 elementos `sticky` que hay que recolocar en cada fotograma del scroll
   horizontal, y en un móvil solo se ve un modelo y medio a la vez. Medido: el
   scroll pasaba de 6,7 ms por paso a mucho menos.

   `contain-intrinsic-size: auto 300px` da una altura estimada mientras el bloque
   está saltado, para que la página no dé botes al entrar y salir; con `auto`, en
   cuanto se ha medido una vez se recuerda la real.

   En navegadores sin `content-visibility` (Safari anterior al 18) simplemente se
   ignora y todo sigue funcionando igual. */
.model {
  margin-bottom: 16px;

  /* El ancho se declara explícitamente en vez de deducirse del contenido, y esto
     es OBLIGATORIO para que la línea siguiente no rompa la tabla:
     `content-visibility` aplica contención de TAMAÑO, así que un bloque saltado
     se mide «como si no tuviera contenido» y `width: max-content` del padre
     colapsaba la tabla al ancho de la ventana (medido: 1.890 px → 900). Y lo
     hacía de forma intermitente, según si el bloque ya se había medido antes,
     que es peor que romperse siempre. Aquí el ancho es calculable sin mirar el
     contenido, así que no hay ambigüedad. */
  width: calc(var(--labelw) + var(--slots) * var(--slotw));

  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

.mrow {
  display: grid;
  grid-template-columns: var(--labelw) repeat(var(--slots), var(--slotw));
}
.mrow > * { grid-row: 1; }

.cell {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.cell.label {
  position: sticky; left: 0; z-index: 4;
  justify-content: flex-start; gap: 4px;
  padding-left: 10px;
  font-size: 11.5px;
  color: var(--ink-dim);
  background: var(--panel);
  box-shadow: 7px 0 9px -7px rgba(0, 0, 0, .35);
}
.cell.label .u { color: #98a1b0; font-size: 10px; }

/* Cabecera del modelo: fila propia fuera de la rejilla, para que los nombres
   largos no queden partidos por el ancho de la columna de etiquetas. */
.mhead { display: flex; align-items: center; height: 40px; }

.mhead-in {
  position: sticky; left: 0;
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 12px;
  white-space: nowrap;
}
.mhead-in b { font-size: 14.5px; font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.mhead-in small { font-size: 10.5px; color: var(--fg-dim); }

.badge {
  padding: 3px 9px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .01em;
  color: #cfd6e2;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.badge.warn {
  color: #ffd6c2;
  background: rgba(216, 30, 63, .16);
  border-color: rgba(216, 30, 63, .45);
}

/* Antigüedad de la pasada del modelo. Ámbar cuando ya debería existir una más
   nueva según el propio ritmo de actualización del modelo. */
.badge.run { color: #a9d5b4; border-color: rgba(120, 210, 150, .32); background: rgba(80, 200, 120, .12); }
.badge.run.warn { color: #ffd9a8; border-color: rgba(255, 190, 90, .42); background: rgba(255, 180, 60, .13); }

/* `position: relative` es la referencia de la marca de «ahora». Sin ella la
   marca se colgaría de `.model`, que por el `content-visibility` es contenedor
   en los navegadores que lo soportan y NO lo es en Safari anterior al 18: la
   línea se estiraría hasta la cabecera oscura en unos sitios y no en otros. */
.mbody { position: relative; background: var(--panel); color: var(--ink); }

/* Marca del bloque en curso: un recuadro que sigue el rectángulo de la columna,
   desde la fila de horas hasta abajo. Empezó siendo una línea vertical en el
   minuto exacto y se cambió porque cruzaba las celdas por el medio y tapaba los
   números; el borde cae en el hueco entre columnas, donde no hay nada escrito.

   Arranca DEBAJO de la fila de días (`--dayrowh`) y no en el borde del panel: la
   fila de días es de otro nivel —agrupa columnas— y meter ahí el recuadro hacía
   que pareciese que se está marcando el día entero.

   `pointer-events: none` porque cubre una columna entera: sin él se comería los
   tooltips de los iconos y las temperaturas que hay debajo.

   Por debajo de la columna de etiquetas (`z-index: 4`) a propósito: al
   desplazarse en horizontal el recuadro se va por la izquierda y desaparece bajo
   las etiquetas, en vez de quedarse pintado encima de ellas. */
/* Los bloques de hoy que ya han pasado. Se muestran para poder ver la forma del
   día entero —cuánto ha llovido, cuánto ha apretado a mediodía— y no solo lo que
   queda, pero atenuados, porque son contexto y no previsión.

   Un velo encima y no celdas teñidas: la banda de color de la temperatura es un
   SVG estirado sobre toda la fila y se quedaría a plena intensidad justo debajo
   del texto atenuado, con el pasado destacando más que lo que viene.

   La opacidad está ajustada mirándolo: tiene que apagar sin volver ilegibles las
   temperaturas, que son la mitad de la gracia de mostrar el pasado. */
.pastveil {
  position: absolute; top: var(--dayrowh); bottom: 0; left: var(--labelw); z-index: 3;
  background: rgba(241, 242, 245, .58);
  pointer-events: none;
}

.nowmark {
  position: absolute; top: var(--dayrowh); bottom: 0; z-index: 3;
  width: var(--slotw);
  border: 2px solid var(--accent);
  border-radius: 4px;
  pointer-events: none;
}

/* Cabecera de días */
.r-days { height: var(--dayrowh); }
.r-days .cell { background: var(--panel-head); }
.r-days .label { background: var(--panel-head); }
.r-days .dcell {
  justify-content: flex-start;
  padding-left: 9px;
  font-size: 11.5px; font-weight: 600; color: #3b4351;
  border-left: 1px solid rgba(0, 0, 0, .16);
  white-space: nowrap; overflow: hidden;
}

/* Filas de datos */
.r-times { height: 19px; }
.r-times .cell { font-size: 10.5px; color: #7c8595; }

.r-icons { height: 30px; }
.r-icons .ic { display: flex; }
.wx { width: 21px; height: 21px; display: block; }
/* Color de la luna, que hereda del contexto. Claro sobre la tarjeta oscura del
   resumen; azul oscuro sobre los paneles claros de la tabla, donde el tono claro
   tenía un contraste de 1,14:1 y no se veía. */
.wx { color: #DDE4F1; }
.mbody .wx { color: #55619B; }
.wx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.r-temp { height: 44px; position: relative; }
/* Fuera del flujo de la rejilla: así las celdas se colocan solas y no hace
   falta un `grid-column` en línea por celda. */
.r-temp .bandwrap {
  position: absolute; left: var(--labelw); right: 0; top: 0; bottom: 0;
  z-index: 0; pointer-events: none;
}
.band { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.r-temp .cell { z-index: 1; }
.r-temp .label { z-index: 4; }
.t { font-size: 13.5px; font-weight: 700; color: #1b1e24; }
.t.hot { color: #b3231c; }
.t.cold { color: #1256a8; }

.r-rain, .r-prob, .r-hum { height: 20px; }
.r-wind { height: 25px; }

.v { font-size: 11px; color: #3f4756; }
.r-rain .v { color: #1f6fbf; font-weight: 600; }
.r-rain .r2 { color: #14589f; }
.r-rain .r3 { color: #0c4784; font-weight: 700; }
.r-rain .r4 {
  padding: 0 4px; border-radius: 3px;
  color: #fff; background: #0c4784; font-weight: 700;
}
.r-prob .phi { color: #14589f; font-weight: 700; }

.wind {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11px; color: #333b47;
}
.wind .arr { width: 9px; height: 9px; flex: 0 0 auto; fill: #6a7382; }
.wind i { font-style: normal; }
.wind.w1 { background: #dcf3fb; }
.wind.w2 { background: #a9e7f6; }
.wind.w3 { background: #92e5b7; }
.wind.w4 { background: #ffe08c; }
.wind.w5 { background: #ffb5a9; color: #6d1c12; }

/* --- Bloque de consenso -------------------------------------------------- */

.model.is-consensus .mhead-in b { color: #ffd873; }
.model.is-consensus .mbody {
  background: #eef2f8;                          /* algo más frío que los modelos */
  border-top: 2px solid rgba(255, 216, 115, .75);
}
.model.is-consensus .r-days .cell { background: #d9e1ec; }
.model.is-consensus .r-days .cell.alt { background: #cfd8e5; }

/* Temperatura de consenso: la mediana grande y la mitad del rango entre
   modelos debajo. El fondo va del verde (coinciden) al rojo (están partidos). */
.r-ctemp { height: 46px; }
.ct {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  padding: 3px 5px; border-radius: 5px;
}
.ct b { font-size: 13.5px; font-weight: 700; color: #14161a; }
.ct i { font-style: normal; font-size: 9.5px; color: #5f6875; }
.ct.s1 { background: #cdf0d8; }   /* menos de 1,5 °C de diferencia */
.ct.s2 { background: #e6f4c8; }
.ct.s3 { background: #ffe6ad; }
.ct.s4 { background: #ffc9bd; }   /* más de 5 °C: sin consenso */

/* Cuántos modelos coinciden en que llueve */
.r-vote { height: 20px; }
.vote {
  padding: 0 4px; border-radius: 3px;
  font-size: 10px; font-weight: 600; color: #4a5361;
}
.vote.v1 { color: #8a929f; }                        /* casi ninguno: poco probable */
.vote.v2 { background: #ffe0a8; color: #6b4a05; }   /* partidos: el caso interesante */
.vote.v3 { background: #bcdcf7; color: #0c4784; }

/* Sensación térmica: se tiñe solo cuando se aparta 5° o más de la real. */
.r-feels { height: 20px; }
.feels { font-size: 11px; color: #4a5361; }
.feels.colder { color: #1256a8; font-weight: 600; }
.feels.hotter { color: #b3231c; font-weight: 600; }

/* Racha de viento: escala más severa que la del viento medio, porque una racha
   de 60 km/h importa mucho más que una media de 60. */
.r-gust { height: 20px; }
.gust {
  padding: 1px 5px; border-radius: 4px;
  font-size: 11px; font-weight: 600; color: #333b47;
}
.gust.g1 { color: #5d6675; font-weight: 400; }
.gust.g2 { background: #dcf3fb; }
.gust.g3 { background: #ffe08c; }
.gust.g4 { background: #ffbfa4; }
.gust.g5 { background: #ff9b8c; color: #6d1c12; }

/* Nieve y cota de cero grados: filas de invierno */
.r-snow, .r-fl { height: 20px; }
.r-snow .v { color: #1f7fa8; font-weight: 600; }
.r-snow .n2 { color: #17698d; }
.r-snow .n3 { color: #0f5772; font-weight: 700; }
.r-snow .n4 { padding: 0 4px; border-radius: 3px; color: #fff; background: #0f5772; }
.r-fl .v { color: #6b7280; font-size: 10px; }

/* Separadores, día alterno, columna actual y corte del horizonte */
.mbody .cell.dstart { border-left: 1px solid var(--sep); }
.mbody .cell.alt { background: rgba(0, 0, 0, .035); }
.r-days .cell.alt { background: #d6dae1; }
/* El bloque que contiene la hora actual. Tinte suave a propósito: quien manda
   aquí es la línea, y dos señales igual de fuertes para el mismo dato se
   estorban. */
.mbody .cell.now { background: rgba(216, 30, 63, .09); }
.mbody .cell.na {
  background: repeating-linear-gradient(135deg,
    rgba(0, 0, 0, .05) 0 4px, rgba(0, 0, 0, .02) 4px 8px);
}
.mbody .cell.cut { border-left: 2px dashed rgba(0, 0, 0, .3); }

.nomodel {
  justify-content: flex-start;
  padding-left: 10px;
  font-size: 10.5px; font-style: italic; color: #8b93a1;
}

/* --- Pie ----------------------------------------------------------------- */

.footer { padding: 4px 14px 40px; color: var(--fg-dim); font-size: 12px; }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 10px 0; padding: 0;
  list-style: none;
}
.legend b { color: #c3cad6; font-weight: 600; }

.foot-note { margin: 6px 0; }
.foot-note a { color: #9fb6d6; }

/* --- Móvil --------------------------------------------------------------- */

@media (max-width: 720px) {
  :root { --labelw: 62px; }
  .board { --slotw: var(--slot-set-sm, 38px); }

  .topbar { gap: 8px; padding: 8px 10px; }
  .topbar-main { flex: 1 1 100%; }
  .topbar-tools { flex: 1 1 100%; }
  .btn-geo span { display: none; }
  .btn-geo { padding: 9px 11px; }

  .fav-star { width: 36px; height: 36px; }
  .fav-star svg { width: 22px; height: 22px; }
  .favs { padding: 8px 10px 0; gap: 6px; }
  .favs-label { flex: 1 1 100%; }
  /* Los favoritos se desplazan en horizontal en vez de apilarse en varias
     filas y comerse la pantalla del móvil. */
  .fav-list {
    flex: 1 1 100%; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .fav-list::-webkit-scrollbar { display: none; }
  .fav { flex: 0 0 auto; }

  .summary { margin: 10px 10px 2px; padding: 12px; gap: 12px; border-radius: 14px; }
  .sum-now { gap: 10px; flex: 1 1 100%; }
  .sum-now .sum-ic .wx { width: 40px; height: 40px; }
  .sum-temp { font-size: 40px; }
  /* Con tres datos (hoy, lluvia y sol) esta fila ya no cabe en 375 px: medido,
     el bloque se iba a 390. Se envuelve en vez de recortarse. */
  .sum-facts { gap: 6px 12px; padding-left: 12px; margin-left: auto; flex-wrap: wrap; }
  .sum-facts dd { font-size: 13px; }
  .sum-facts dt { font-size: 9.5px; }
  .sum-days { flex: 1 1 100%; }
  .sd-ic .wx { width: 22px; height: 22px; }
  .sd-t { font-size: 11px; }

  .tabs { padding: 10px 10px 8px; gap: 10px; }
  .status { margin: 6px 10px 20px; padding: 12px; font-size: 13px; }
  .footer { padding: 4px 10px 32px; }

  .cell.label { padding-left: 7px; font-size: 10px; }
  .cell.label .u { display: none; }
  /* Con la insignia de la pasada, la cabecera no cabe en una línea de móvil
     (medido: 494 px en 413). Se deja envolver a dos líneas en vez de recortar
     información: la resolución del modelo y su alcance son justo lo que
     justifica fiarse más de uno o de otro. */
  .mhead { height: auto; min-height: 36px; padding: 3px 0; }
  .mhead-in {
    gap: 4px 6px; padding: 0 8px;
    flex-wrap: wrap; white-space: normal;
    max-width: calc(100vw - 10px);
  }
  .mhead-in b { font-size: 12.5px; }
  .mhead-in small { font-size: 9.5px; }
  .badge { padding: 2px 7px; font-size: 9.5px; }
  .wx { width: 18px; height: 18px; }
  .t { font-size: 12px; }
  .v, .wind { font-size: 10px; }
  .wind { padding: 1px 2px; gap: 1px; }
  .wind .arr { width: 8px; height: 8px; }
  .r-days .dcell { padding-left: 6px; font-size: 10.5px; }
}