@charset "UTF-8";

/* ==========================================================================
   Caudales Laja–Diguillín — hoja de estilos

   Tema claro únicamente. El logo institucional es un JPG de fondo blanco, y
   sobre superficies oscuras quedaba encerrado en una placa que lo aislaba del
   resto de la página. Con una sola paleta clara el logo se integra al fondo y
   la marca manda.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  color-scheme: light;

  /* Escala tipográfica editorial: salto amplio entre texto y titulares, para
     que la jerarquía se lea de un vistazo y no por matices de peso. */
  --txt-2xs: 0.6875rem;   /* 11 */
  --txt-xs:  0.75rem;     /* 12 */
  --txt-sm:  0.875rem;    /* 14 */
  --txt-md:  1rem;        /* 16 */
  --txt-lg:  1.1875rem;   /* 19 */
  --txt-xl:  1.5rem;      /* 24 */
  --txt-2xl: 2.125rem;    /* 34 */
  --txt-3xl: 2.875rem;    /* 46 */
  --txt-4xl: 4rem;        /* 64 */

  /* Ritmo de espaciado 4/8, con escalones altos para separar capítulos */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 11rem;

  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --radio-xl: 28px;
  --radio-full: 999px;

  --ancho-max: 1280px;
  --ancho-ancho: 1440px;

  /* Capas */
  --z-base: 0;
  --z-elevado: 10;
  --z-sticky: 40;
  --z-tooltip: 100;
  --z-modal: 1000;

  /* Movimiento */
  --dur-rapida: 140ms;
  --dur-media: 240ms;
  --dur-lenta: 520ms;
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-entrada: cubic-bezier(0.4, 0, 1, 1);

  /* Satoshi para todo: su versalita geométrica sostiene titulares grandes y
     sus cifras tabulares mantienen las columnas de datos alineadas. */
  --fuente-titulo: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --fuente-texto:  "Satoshi", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-mono:   "Satoshi", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* --------------------------------------------------------- Colores de marca
   Tomados del sitio institucional lajadiguillin.cl y del logo de la Junta:
     #454687  índigo   · texto "Río Diguillín" del logo, color primario
     #4bb9de  celeste  · agua, en el isotipo
     #31a43f  verde    · botones de acción del sitio y hoja del isotipo
     #f0785f  coral    · destacados y categorías del sitio
     #293132  grafito  · color de titulares del sitio
   Los tonos por tema son variaciones de estos, ajustadas para cumplir contraste.
   -------------------------------------------------------------------------- */
:root {
  --marca-indigo:  #454687;
  --marca-celeste: #4bb9de;
  --marca-verde:   #31a43f;
  --marca-coral:   #f0785f;
  --marca-grafito: #293132;
}

:root {
  --fondo:            #f6f7fb;
  --fondo-alt:        #ecf0f7;
  --superficie:       #ffffff;
  --superficie-alt:   #f7f9fc;
  --superficie-hover: #eef2f8;
  --borde:            #dde3ec;
  --borde-fuerte:     #b7c2d3;

  --texto:            #293132;
  --texto-suave:      #4d5a63;
  /* Suficientemente oscuro para superar 4.5:1 también sobre --fondo-alt */
  --texto-tenue:      #5b6974;

  --acento:           #454687;
  --acento-fuerte:    #32336b;
  --acento-suave:     #e7e7f6;
  --acento-contraste: #ffffff;

  /* Rampa de estado: del ocre seco al coral de crecida, pasando por el verde
     institucional. Cada tono va acompañado de un icono propio en la interfaz. */
  --estado-muy-bajo:  #9c4f1c;
  --estado-bajo:      #85630c;
  --estado-normal:    #257b30;
  --estado-alto:      #17708f;
  --estado-muy-alto:  #c0392b;
  --estado-sin-datos: #5b6974;

  --serie-1: #1786b0;
  --serie-2: #454687;
  --serie-3: #257b30;   /* estación meteorológica (verde de marca, accesible) */

  --sombra-1: 0 1px 2px rgba(41, 49, 50, 0.06), 0 1px 3px rgba(41, 49, 50, 0.05);
  --sombra-2: 0 2px 4px rgba(41, 49, 50, 0.05), 0 8px 20px rgba(41, 49, 50, 0.08);
  --sombra-3: 0 8px 16px rgba(41, 49, 50, 0.09), 0 24px 48px rgba(41, 49, 50, 0.13);

  /* Ambiente: dos lavados radiales muy tenues sobre el fondo, no un color
     plano. Se aplica a toda la página, no sólo a la portada. */
  --trama-ambiente:
    radial-gradient(58% 46% at 8% -6%, rgba(75, 185, 222, 0.16) 0%, transparent 62%),
    radial-gradient(50% 44% at 96% 2%, rgba(69, 70, 135, 0.13) 0%, transparent 60%),
    radial-gradient(70% 40% at 50% 104%, rgba(49, 164, 63, 0.07) 0%, transparent 64%);
}

/* --------------------------------------------------------------- 2. Reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Deja libre la altura de la cabecera fija al saltar por anclas */
  scroll-padding-top: 8.5rem;
}
@media (min-width: 900px) { html { scroll-padding-top: 5.5rem; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  background-image: var(--trama-ambiente);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--txt-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Ninguna animación fuera de cuadro puede provocar barra horizontal */
  overflow-x: hidden;
  max-width: 100%;
}

/* Grano finísimo sobre el ambiente: quita el aspecto de degradado plano */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
h3, h4 { line-height: 1.2; letter-spacing: -0.02em; }

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

img, svg { max-width: 100%; }

a {
  color: var(--acento);
  text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

/* Cifras siempre tabulares: evita saltos de ancho al actualizarse */
.cifra, table, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ 3. Utilidades */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px)  { .contenedor { padding-inline: var(--sp-5); } }
@media (min-width: 1024px) { .contenedor { padding-inline: var(--sp-6); } }

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

.saltar {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-4);
  background: var(--acento);
  color: var(--acento-contraste);
  border-radius: var(--radio-md);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-media) var(--curva-salida);
}
.saltar:focus-visible { transform: translateY(0); }

/* Cada sección es un capítulo, con aire para respirar — pero moderado, para que
   la página no obligue a un scroll interminable entre bloques de datos. */
.seccion { padding-block: var(--sp-7); }
@media (min-width: 768px)  { .seccion { padding-block: var(--sp-8); } }
@media (min-width: 1200px) { .seccion { padding-block: var(--sp-9); } }

.seccion__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.seccion__titulo {
  font-size: clamp(2rem, 1.4rem + 2.4vw, var(--txt-3xl));
  max-width: 18ch;
}
.seccion__bajada {
  color: var(--texto-suave);
  font-size: var(--txt-lg);
  line-height: 1.55;
  max-width: 48ch;
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------- 4. Encabezado */

.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--borde);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  min-height: 3.75rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  margin-right: auto;
  padding: var(--sp-1);
  border-radius: var(--radio-md);
}
/* El logo institucional es un JPG de fondo blanco. Al trabajar con una sola
   paleta clara ya no necesita placa ni borde que lo aíslen: se apoya
   directamente sobre el fondo, sin recolorearlo ni alterar sus proporciones. */
.marca__logo {
  display: block;
  height: 42px;
  width: auto;
  flex: none;
  mix-blend-mode: multiply;
}

.marca__divisor {
  width: 1px;
  align-self: stretch;
  margin-block: var(--sp-2);
  background: var(--borde);
  flex: none;
}

.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--txt-sm);
  letter-spacing: -0.015em;
}
.marca__sub {
  font-size: var(--txt-2xs);
  color: var(--texto-tenue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* En pantallas angostas la marca se comprime para que los controles quepan
   en la misma línea y la cabecera fija no se coma media pantalla. */
@media (max-width: 700px) {
  .marca { gap: var(--sp-2); }
  .marca__logo { height: 36px; }
  /* En pantallas angostas manda el logo: el rótulo textual sobra */
  .marca__divisor, .marca__texto { display: none; }
}

/* Navegación de escritorio: barra horizontal en la cabecera. Bajo 900px se
   oculta por completo y su lugar lo toma el menú hamburguesa (.nav-movil). */
.nav {
  display: none;
  gap: var(--sp-1);
}
@media (min-width: 900px) { .nav { display: flex; } }

.nav__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  padding-inline: var(--sp-3);
  border-radius: var(--radio-md);
  color: var(--texto-suave);
  font-size: var(--txt-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.nav__enlace:hover { background: var(--superficie-hover); color: var(--texto); }
.nav__enlace[aria-current="true"] { color: var(--acento); background: var(--acento-suave); }

/* Botón hamburguesa: sólo bajo 900px. */
.nav-toggle { display: inline-flex; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* ------------------------------------------------- 4b. Menú móvil */

/* Overlay a pantalla completa. Se muestra alternando [hidden] desde JS; la
   transición de opacidad la controla el atributo data-abierto. */
.nav-movil {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  justify-items: end;
  background: color-mix(in srgb, var(--marca-grafito) 45%, transparent);
  opacity: 0;
  transition: opacity var(--dur-media) ease;
}
.nav-movil[hidden] { display: none; }
.nav-movil[data-abierto="true"] { opacity: 1; }
@media (min-width: 900px) { .nav-movil { display: none !important; } }

.nav-movil__panel {
  width: min(88vw, 340px);
  height: 100%;
  padding: calc(var(--sp-8) + env(safe-area-inset-top, 0)) var(--sp-5) var(--sp-6);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-media) var(--curva-salida);
}
.nav-movil[data-abierto="true"] .nav-movil__panel { transform: translateX(0); }

.nav-movil__lista { display: grid; gap: var(--sp-1); }

.nav-movil__enlace {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--sp-4);
  border-radius: var(--radio-md);
  color: var(--texto);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.nav-movil__enlace:hover,
.nav-movil__enlace:focus-visible { background: var(--superficie-hover); }
.nav-movil__enlace[aria-current="true"] { color: var(--acento); background: var(--acento-suave); }

/* ------------------------------------------------------------- 5. Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--txt-sm);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--dur-rapida) ease,
              border-color var(--dur-rapida) ease,
              color var(--dur-rapida) ease,
              opacity var(--dur-rapida) ease;
}
.boton:hover:not(:disabled) { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
.boton:active:not(:disabled) { background: var(--fondo-alt); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }

.boton--acento {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-contraste);
}
.boton--acento:hover:not(:disabled) { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

.boton--icono {
  min-width: 44px;
  padding-inline: var(--sp-2);
}
.boton--sm {
  min-height: 40px;
  padding-inline: var(--sp-3);
  font-size: var(--txt-xs);
}
.boton__icono { width: 18px; height: 18px; flex: none; }
.boton--sm .boton__icono { width: 15px; height: 15px; }

/* Grupo de descargas: rótulo + par de botones (CSV / Excel). Se apila en su
   propia columna dentro del encabezado de sección. */
.descargas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}
.descargas__rotulo {
  font-size: var(--txt-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
  font-weight: 600;
}
.descargas__botones { display: flex; gap: var(--sp-2); }

.boton.esta-cargando .boton__icono { animation: girar 900ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Control segmentado (selector de rango / escala) */
.segmentado {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
}
.segmentado__opcion {
  min-height: 44px;
  padding-inline: var(--sp-3);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--texto-suave);
  font-size: var(--txt-sm);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.segmentado__opcion:hover { color: var(--texto); }
.segmentado__opcion[aria-checked="true"] {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-1);
}

/* --------------------------------------------------------------- 6. Hero */

/* Portada en división editorial: relato a la izquierda, lectura viva a la
   derecha, con negativo generoso entre ambos. */
.hero {
  position: relative;
  padding-block: var(--sp-7) var(--sp-8);
}
@media (min-width: 900px) { .hero { padding-block: var(--sp-8) var(--sp-9); } }

.hero__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__rejilla {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.85fr);
    gap: var(--sp-8);
  }
}

.hero__contenido { position: relative; z-index: 1; }

/* 15ch a este cuerpo mantiene el titular en 2 líneas en escritorio y 3 en
   móvil. Ensanchar la caja es lo que evita el muro de texto de 6 líneas. */
.hero__titulo {
  font-size: clamp(3rem, 1.9rem + 4.4vw, 5.25rem);
  max-width: 15ch;
  letter-spacing: -0.042em;
  font-weight: 700;
}
.hero__titulo em {
  font-style: normal;
  color: var(--acento);
}

.hero__bajada {
  margin-top: var(--sp-5);
  font-size: var(--txt-lg);
  line-height: 1.55;
  color: var(--texto-suave);
  max-width: 44ch;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

/* Panel vivo de la portada: la cifra que la gente vino a ver, sin scroll. */
.hero__panel {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--radio-xl);
  background: color-mix(in srgb, var(--superficie) 82%, transparent);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-2);
  backdrop-filter: blur(10px);
}

.hero__panel-titulo {
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--sp-4);
}

.resumen-vivo { display: grid; gap: var(--sp-4); }

.resumen-vivo__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--borde);
}
.resumen-vivo__item:last-child { border-bottom: 0; padding-bottom: 0; }

.resumen-vivo__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-md);
  font-weight: 600;
}
.resumen-vivo__sector { display: block; font-size: var(--txt-xs); color: var(--texto-tenue); font-weight: 400; }

.resumen-vivo__cifra {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-2xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: right;
}
.resumen-vivo__unidad { font-size: var(--txt-xs); color: var(--texto-tenue); font-weight: 500; }

.resumen-vivo__estado {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--color-estado, var(--texto-suave));
}
.resumen-vivo__estado svg { width: 14px; height: 14px; flex: none; }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  font-size: var(--txt-xs);
  font-weight: 500;
  color: var(--texto-suave);
}
.pastilla__punto {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--estado-normal);
}
.pastilla__punto--vivo { position: relative; }
.pastilla__punto--vivo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: var(--estado-normal);
  opacity: 0;
  animation: pulso 2.4s var(--curva-salida) infinite;
}
@keyframes pulso {
  0%   { opacity: 0.7; transform: scale(0.7); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0; }
}

/* -------------------------------------------------- 7. Tarjetas estación */

.rejilla-estaciones {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .rejilla-estaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-1);
}

.estacion {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  overflow: hidden;
  transition: transform var(--dur-lenta) var(--curva-salida),
              box-shadow var(--dur-lenta) var(--curva-salida),
              border-color var(--dur-media) ease;
}
.estacion:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-3);
  border-color: var(--borde-fuerte);
}

.estacion::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--color-estado, var(--acento));
}

/* Lavado del color de estado hacia la esquina superior: el estado se percibe
   antes de leer la insignia. */
.estacion::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 62%; height: 55%;
  pointer-events: none;
  background: radial-gradient(100% 100% at 100% 0%,
              color-mix(in srgb, var(--color-estado, var(--acento)) 13%, transparent) 0%,
              transparent 70%);
}
.estacion > * { position: relative; z-index: 1; }

.estacion__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.estacion__nombre { font-size: var(--txt-lg); }
.estacion__lugar {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
  letter-spacing: 0.03em;
}

.estacion__medida {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.estacion__valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.6rem, 2rem + 2.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.estacion__unidad {
  font-size: var(--txt-md);
  font-weight: 550;
  color: var(--texto-suave);
}

.estacion__fecha {
  margin-top: var(--sp-2);
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
}

.deltas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radio-full);
  background: var(--superficie-alt);
  border: 1px solid var(--borde);
  font-size: var(--txt-xs);
  font-weight: 550;
  color: var(--texto-suave);
}
.delta__icono { width: 13px; height: 13px; }
.delta--sube { color: var(--estado-alto); }
.delta--baja { color: var(--estado-muy-bajo); }

.chispa { margin-top: var(--sp-4); height: 56px; }
.chispa svg { display: block; width: 100%; height: 100%; overflow: visible; }

.estacion__pie {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--borde);
}

.extremos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.extremo__etiqueta {
  font-size: var(--txt-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
}
.extremo__valor {
  display: block;
  margin-top: 2px;
  font-size: var(--txt-md);
  font-weight: 600;
}

/* Barra de posición dentro del rango anual */
.posicion { margin-top: var(--sp-4); }
.posicion__cabecera {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--txt-xs);
  color: var(--texto-suave);
  margin-bottom: var(--sp-2);
}
.posicion__pista {
  position: relative;
  height: 10px;
  border-radius: var(--radio-full);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--estado-muy-bajo) 45%, transparent) 0%,
    color-mix(in srgb, var(--estado-bajo) 40%, transparent) 22%,
    color-mix(in srgb, var(--estado-normal) 40%, transparent) 50%,
    color-mix(in srgb, var(--estado-alto) 40%, transparent) 78%,
    color-mix(in srgb, var(--estado-muy-alto) 50%, transparent) 100%
  );
  border: 1px solid var(--borde);
}
.posicion__marca {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 20px;
  border-radius: var(--radio-full);
  background: var(--texto);
  border: 2px solid var(--superficie);
  transform: translate(-50%, -50%);
  transition: left var(--dur-lenta) var(--curva-salida);
}
.posicion__leyenda {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: var(--txt-2xs);
  color: var(--texto-tenue);
}

/* --------------------------------------------------------- 8. Gráfico */

.panel-grafico { padding: var(--sp-4); }
@media (min-width: 768px) { .panel-grafico { padding: var(--sp-5); } }

.grafico__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.grafico__controles-derecha { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.leyenda__opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background: var(--superficie);
  font-size: var(--txt-sm);
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur-rapida) ease, background var(--dur-rapida) ease;
}
.leyenda__opcion:hover:not(:disabled) { background: var(--superficie-hover); }
.leyenda__opcion[aria-pressed="false"] { opacity: 0.42; }
.leyenda__opcion:disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.leyenda__muestra {
  width: 12px; height: 12px;
  flex: none;
  border-radius: 3px;
  background: var(--color-serie);
}

/* Selector de parámetro a graficar (caudal, nivel, temperatura, …). */
.grafico__parametros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--borde);
}
.paramtab {
  min-height: 40px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: var(--txt-sm);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease,
              border-color var(--dur-rapida) ease;
}
.paramtab:hover { background: var(--superficie-hover); color: var(--texto); }
.paramtab--activo {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-contraste);
}

/* Otros parámetros del día, dentro de la tarjeta de estación. */
.otros-param {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--borde);
}
.otros-param__titulo {
  display: block;
  font-size: var(--txt-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
  margin-bottom: var(--sp-3);
}
.otros-param__grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.paramchip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie-alt);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-rapida) ease, background var(--dur-rapida) ease;
}
.paramchip:hover { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
.paramchip--activo {
  border-color: var(--acento);
  background: var(--acento-suave);
}
.paramchip__nombre {
  font-size: var(--txt-2xs);
  color: var(--texto-tenue);
  line-height: 1.2;
}
.paramchip__valor {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: 700;
  color: var(--texto);
}

.grafico__lienzo {
  position: relative;
  width: 100%;
  /* Altura reservada de antemano: evita saltos de layout al pintar (CLS) */
  height: 300px;
}
@media (min-width: 768px)  { .grafico__lienzo { height: 380px; } }
@media (min-width: 1024px) { .grafico__lienzo { height: 440px; } }

/* Sólo el SVG del gráfico (hijo directo) ocupa todo el lienzo; el icono del
   estado vacío está anidado en .vacio y conserva su tamaño propio. */
.grafico__lienzo > svg { display: block; width: 100%; height: 100%; }

.eje-texto { font-size: 11px; fill: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.rejilla-linea { stroke: var(--borde); stroke-width: 1; }
.eje-linea { stroke: var(--borde-fuerte); stroke-width: 1; }
.banda { fill: var(--color-serie); opacity: 0.14; }
.linea {
  fill: none;
  stroke: var(--color-serie);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.punto-foco {
  fill: var(--superficie);
  stroke: var(--color-serie);
  stroke-width: 2.5;
}
.cruz { stroke: var(--borde-fuerte); stroke-width: 1; stroke-dasharray: 3 3; }

.punto-teclado {
  fill: transparent;
  cursor: pointer;
}
.punto-teclado:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.globo {
  position: absolute;
  z-index: var(--z-tooltip);
  min-width: 168px;
  padding: var(--sp-3);
  border-radius: var(--radio-md);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  box-shadow: var(--sombra-3);
  font-size: var(--txt-xs);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-rapida) ease, transform var(--dur-rapida) var(--curva-salida);
}
.globo[data-visible="true"] { opacity: 1; transform: translateY(0); }
.globo__fecha {
  font-weight: 650;
  color: var(--texto);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--borde);
}
.globo__fila { display: flex; align-items: center; gap: var(--sp-2); padding-block: 2px; }
.globo__muestra { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.globo__nombre { color: var(--texto-suave); }
.globo__valor { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.globo__rango { color: var(--texto-tenue); font-size: var(--txt-2xs); }

/* --------------------------------------------------- 9. Resumen y tabla */

.rejilla-resumen {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .rejilla-resumen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.metrica { padding: var(--sp-4); }
.metrica__etiqueta {
  font-size: var(--txt-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
}
.metrica__valor {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.metrica__nota { font-size: var(--txt-xs); color: var(--texto-suave); }

.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  max-height: 30rem;
  overflow-y: auto;
}

table.tabla {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--txt-sm);
}
.tabla caption { text-align: left; padding: var(--sp-3) var(--sp-4); color: var(--texto-suave); font-size: var(--txt-xs); }
.tabla thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-elevado);
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--borde);
  padding: var(--sp-1) var(--sp-4);
  text-align: right;
  font-size: var(--txt-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}
.tabla thead th:first-child { text-align: left; }
.tabla thead th.grupo { text-align: center; border-inline: 1px solid var(--borde); }
.tabla tbody td {
  padding: var(--sp-3) var(--sp-4);
  text-align: right;
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 55%, transparent);
  white-space: nowrap;
}
.tabla tbody td:first-child { text-align: left; color: var(--texto-suave); }
.tabla tbody tr:hover { background: var(--superficie-hover); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .destacado { font-weight: 650; color: var(--texto); }

/* El botón ocupa toda la celda para alcanzar el área táctil mínima. */
.orden {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
  width: 100%;
  min-height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  border-radius: var(--radio-sm);
}
.orden:hover { color: var(--texto); }
.tabla thead th:first-child .orden { justify-content: flex-start; }
.orden__icono { width: 12px; height: 12px; opacity: 0.4; }
th[aria-sort] .orden__icono { opacity: 1; color: var(--acento); }

/* ----------------------------------------------- 10. Estados de carga */

.esqueleto {
  background: linear-gradient(
    90deg,
    var(--superficie-alt) 25%,
    var(--superficie-hover) 37%,
    var(--superficie-alt) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radio-sm);
  animation: brillo 1.5s ease-in-out infinite;
}
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.esqueleto--titulo { height: 1.1rem; width: 55%; }
.esqueleto--cifra  { height: 3.2rem; width: 62%; margin-top: var(--sp-5); }
.esqueleto--linea  { height: 0.8rem; width: 100%; margin-top: var(--sp-3); }
.esqueleto--bloque { height: 100%; width: 100%; }

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radio-md);
  border: 1px solid color-mix(in srgb, var(--estado-bajo) 45%, transparent);
  background: color-mix(in srgb, var(--estado-bajo) 10%, transparent);
  color: var(--texto);
  font-size: var(--txt-sm);
}
.aviso--error {
  border-color: color-mix(in srgb, var(--estado-muy-alto) 45%, transparent);
  background: color-mix(in srgb, var(--estado-muy-alto) 10%, transparent);
}
.aviso__icono { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--estado-bajo); }
.aviso--error .aviso__icono { color: var(--estado-muy-alto); }
.aviso__cuerpo { flex: 1; }
.aviso__titulo { font-weight: 650; margin-bottom: var(--sp-1); }
.aviso__acciones { margin-top: var(--sp-3); }

.vacio {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--texto-suave);
}
.vacio__icono { width: 40px; height: 40px; color: var(--texto-tenue); }

/* ------------------------------------------------------- 11. Contenido */

/* División con columna fija: el titular queda anclado mientras las tarjetas
   pasan por el costado. Se resuelve con `position: sticky` en vez del pin de
   ScrollTrigger — mismo efecto, y sin una capa de JS que pueda fallar. */
.split { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .split {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .split__fijo { position: sticky; top: 7rem; }
}
.split__fijo .seccion__titulo { max-width: 12ch; }
.split__fijo .seccion__bajada { max-width: 38ch; }

/* Bento denso: 4 columnas x 2 filas = 8 celdas, repartidas 4 y 2+2.
   `grid-auto-flow: dense` cierra cualquier hueco si una tarjeta falta. */
.rejilla-notas {
  display: grid;
  grid-auto-flow: dense;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .rejilla-notas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  .nota--ancha   { grid-column: span 4; }
  .nota--angosta { grid-column: span 2; }
}

.nota {
  padding: var(--sp-6);
  transition: transform var(--dur-lenta) var(--curva-salida),
              box-shadow var(--dur-lenta) var(--curva-salida),
              border-color var(--dur-media) ease;
}
.nota:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-3);
  border-color: var(--borde-fuerte);
}
.nota__icono {
  width: 26px; height: 26px;
  color: var(--acento);
  margin-bottom: var(--sp-3);
}
.nota__titulo { font-size: var(--txt-md); margin-bottom: var(--sp-2); }
.nota__texto { font-size: var(--txt-sm); color: var(--texto-suave); }

.escala-estados {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.escala-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radio-md);
  background: var(--superficie-alt);
  font-size: var(--txt-sm);
}
.escala-item__punto {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: none;
}
.escala-item__texto { color: var(--texto-suave); font-size: var(--txt-xs); margin-left: auto; text-align: right; }

/* ---------------------------------------------------- 11c. Mapa */

.mapa-rejilla {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .mapa-rejilla {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    align-items: stretch;
  }
}

.mapa-marco {
  overflow: hidden;
  padding: 0;
  min-height: 340px;
}
.mapa-lienzo {
  width: 100%;
  height: 100%;
  min-height: 340px;
}
@media (min-width: 900px) { .mapa-lienzo { min-height: 460px; } }

/* Marcadores propios sobre el mapa (Leaflet DivIcon): un pin con el color de la
   serie de cada estación, coherente con el gráfico. */
.marcador-mapa {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--color-serie, var(--acento));
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: var(--sombra-2);
}
.marcador-mapa svg { width: 15px; height: 15px; transform: rotate(45deg); }

.mapa-lista { display: grid; gap: var(--sp-4); align-content: start; }

.mapa-item { padding: var(--sp-5); }
.mapa-item__cabecera { display: flex; gap: var(--sp-3); align-items: flex-start; }
.mapa-item__punto {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--radio-md);
  color: #fff;
  background: var(--serie-1);
}
.mapa-item__punto[data-serie="1"] { background: var(--serie-2); }
.mapa-item__punto svg { width: 20px; height: 20px; }
.mapa-item__nombre { font-size: var(--txt-md); }
.mapa-item__sector {
  display: block;
  margin-top: 2px;
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
}
.mapa-item__desc {
  margin-top: var(--sp-3);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.mapa-item__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
}
.mapa-item__datos dt {
  font-size: var(--txt-2xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-tenue);
}
.mapa-item__datos dd {
  margin: 2px 0 0;
  font-size: var(--txt-sm);
  font-weight: 600;
}
.mapa-item__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--txt-sm);
  font-weight: 600;
  text-decoration: none;
}
.mapa-item__enlace .boton__icono { width: 15px; height: 15px; }
.mapa-item__enlace:hover { color: var(--acento-fuerte); }

/* Los controles de Leaflet heredan tipografía y radios del sitio. */
.leaflet-container { font-family: var(--fuente-texto); background: var(--fondo-alt); }
.leaflet-popup-content-wrapper { border-radius: var(--radio-md); }
.leaflet-popup-content { font-size: var(--txt-sm); margin: var(--sp-3) var(--sp-4); }
.leaflet-popup-content strong { font-family: var(--fuente-titulo); }

/* ------------------------------------------------- 11b. Declaración */

/* Frase editorial cuya opacidad se revela palabra por palabra al hacer scroll.
   El estado inicial lo fija GSAP, nunca el CSS: si el JS no corre, la frase se
   lee entera desde el primer momento. */
.declaracion {
  padding-block: var(--sp-7);
}
@media (min-width: 900px) { .declaracion { padding-block: var(--sp-8); } }

.declaracion__texto {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.032em;
  max-width: 22ch;
  text-wrap: balance;
}
.declaracion__texto .palabra { display: inline-block; }
.declaracion__texto strong { font-weight: 700; color: var(--acento); }

.declaracion__pie {
  margin-top: var(--sp-6);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  max-width: 52ch;
}

/* ---------------------------------------------------------- 12. Pie */

.pie {
  margin-top: var(--sp-8);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--borde);
  background: color-mix(in srgb, var(--fondo-alt) 70%, transparent);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.pie img { mix-blend-mode: multiply; }
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
}
.pie__legal { max-width: 62ch; font-size: var(--txt-xs); color: var(--texto-tenue); }