/* ============================================================
   Portal de Servicios Climáticos (DMC) — Serie histórica
   Patrón "Tabla ancha" (Arquitectura §5.2): desplazamiento
   horizontal con la primera columna (Año) anclada. Igual en móvil.
   Reutiliza tokens.css + portada.css + catalogo.css (breadcrumb).
   Sin CSS inline.
   ============================================================ */

.dmc-serie-pg { padding-block: var(--sp-5) var(--sp-7); }

.dmc-serie-pg__head { margin-bottom: var(--sp-4); }
.dmc-serie-pg__titulo { font-size: clamp(1.6rem,3vw,2.1rem); font-weight:700; letter-spacing:-.02em; margin:0 0 var(--sp-2); }
.dmc-serie-pg__sub { color: var(--tinta-suave); margin:0; }

.dmc-serie-pg__tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom: var(--sp-3); }
.dmc-serie-pg__tools .btn { min-height: var(--touch); }

/* Contenedor con scroll horizontal */
.dmc-serie-wrap { overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); background:#fff; }
.dmc-serie-wrap:focus-visible { outline: var(--foco); outline-offset:2px; }

.dmc-serie { border-collapse:separate; border-spacing:0; min-width:820px; font-size:.9rem; }
.dmc-serie caption { text-align:left; }
.dmc-serie th, .dmc-serie td { padding:8px 12px; border-bottom:1px solid var(--linea); white-space:nowrap; text-align:right; }

/* Encabezado superior anclado */
.dmc-serie thead th { position:sticky; top:0; background:var(--fondo-alt); z-index:2; text-align:right; font-weight:700; }
.dmc-serie thead th:first-child { text-align:left; }

/* Primera columna (Año) anclada a la izquierda */
.dmc-serie tbody th[scope="row"] { position:sticky; left:0; background:#fff; z-index:1; text-align:left; font-family:var(--font-mono); font-weight:700; border-right:1px solid var(--linea); }
.dmc-serie thead th:first-child { position:sticky; left:0; z-index:3; border-right:1px solid var(--linea); }

.dmc-serie tbody tr:hover th[scope="row"],
.dmc-serie tbody tr:hover td { background: color-mix(in srgb, var(--dmc-azul) 5%, #fff); }

.dmc-serie td { font-family:var(--font-mono); }
.dmc-serie .col-anual { font-weight:700; color: var(--dmc-azul); border-left:1px solid var(--linea); }
.dmc-serie thead .col-anual { color: var(--dmc-azul); }

.dmc-serie-pg__nota { margin-top: var(--sp-4); font-size:.8rem; color:var(--tinta-suave); max-width:74ch; }

@media print {
  .dmc-header,.dmc-footer,.dmc-serie-pg__tools .btn,.dmc-navsearch,.dmc-navsesion,.dmc-toggler { display:none !important; }
  .dmc-serie-wrap { overflow:visible; border:0; }
  .dmc-serie th, .dmc-serie td { white-space:normal; }
}