/* ============================================================================
   cluod.css — Sistema de diseño de cluod.es
   Un solo fichero, sin preprocesador. FASE 1 de la orden de trabajo.
   Orden: 1) variables  2) tipografía  3) retícula  4) componentes
          5) movimiento  6) utilidades de escala (color = significado)
   ========================================================================== */

/* ---- Tipografía (P2 · prensa moderna): Libre Franklin + Source Serif 4 ---- */
/* Servidas desde el propio dominio (subconjunto latino, variables): sin CDN. */
@font-face { font-family: "Libre Franklin"; src: url("fuentes/libre-franklin-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fuentes/source-serif-4-latin-wght.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap; }

/* ---- @property para poder animar/transicionar variables de color -------- */
@property --acento { syntax: "<color>"; inherits: true; initial-value: transparent; }

:root {
  color-scheme: light dark;

  /* -- 1. ESCALAS DE COLOR (oklch) ------------------------------------- */

  /* Temperatura, 12 tramos: ≤−5 · 0 · 5 · 10 · 15 · 20 · 25 · 30 · 35 · 40 · 45 · >45 °C
     de violeta-azul oscuro → azul → cian → verde → amarillo → naranja → rojo oscuro */
  --t-1:  oklch(38% 0.14 295);   /* ≤ −5  violeta-azul oscuro */
  --t-2:  oklch(48% 0.15 275);   /* 0     azul índigo */
  --t-3:  oklch(60% 0.14 250);   /* 5     azul */
  --t-4:  oklch(72% 0.12 220);   /* 10    azul cian */
  --t-5:  oklch(80% 0.12 195);   /* 15    cian */
  --t-6:  oklch(85% 0.14 155);   /* 20    verde */
  --t-7:  oklch(88% 0.15 110);   /* 25    verde-amarillo */
  --t-8:  oklch(87% 0.16 90);    /* 30    amarillo */
  --t-9:  oklch(80% 0.17 65);    /* 35    naranja */
  --t-10: oklch(68% 0.19 45);    /* 40    naranja rojizo */
  --t-11: oklch(57% 0.21 30);    /* 45    rojo */
  --t-12: oklch(45% 0.19 22);    /* > 45  rojo oscuro */

  /* Lluvia, 5 azules por intensidad: ≤2 · 2-15 · 15-30 · 30-60 · >60 mm/h */
  --ll-1: oklch(90% 0.04 240);
  --ll-2: oklch(80% 0.09 240);
  --ll-3: oklch(68% 0.14 245);
  --ll-4: oklch(55% 0.16 250);
  --ll-5: oklch(42% 0.16 258);

  /* Aviso (Meteoalerta) */
  --av-verde:    oklch(72% 0.17 145);
  --av-amarillo: oklch(88% 0.17 95);
  --av-naranja:  oklch(72% 0.18 55);
  --av-rojo:     oklch(58% 0.22 27);

  /* Aire EAQI 6: buena · razonable · regular · mala · muy mala · extrem. mala */
  /* Rampa ÚNICA de salubridad (regla 13): la misma en aire, calima y polen */
  --aire-1: #76B44B;  /* buena */
  --aire-2: #5A9830;  /* razonablemente buena (solo EAQI) */
  --aire-3: #FFCD48;  /* regular */
  --aire-4: #FF992B;  /* desfavorable */
  --aire-5: #FA433E;  /* muy desfavorable */
  --aire-6: #B042B9;  /* extremadamente desfavorable */

  /* Noche, 5 bandas (hex que traen las fichas en noches.color) */
  --noche-1: #7e57c2;   /* tórrida / muy mala */
  --noche-2: #ef6c50;   /* mala */
  --noche-3: #f2a63b;   /* regular */
  --noche-4: #67b36a;   /* buena */
  --noche-5: #2f9e8f;   /* excelente / fresca */

  /* UV (OMS), 5 tramos: bajo · moderado · alto · muy alto · extremo */
  --uv-1: oklch(75% 0.16 150);
  --uv-2: oklch(86% 0.16 100);
  --uv-3: oklch(74% 0.18 55);
  --uv-4: oklch(60% 0.21 28);
  --uv-5: oklch(55% 0.17 320);

  /* Rayos: rampa de amarillo a violeta */
  --rayos-1: oklch(90% 0.15 100);
  --rayos-2: oklch(82% 0.17 75);
  --rayos-3: oklch(70% 0.19 45);
  --rayos-4: oklch(58% 0.20 20);
  --rayos-5: oklch(50% 0.18 320);

  /* -- Neutros con light-dark() --------------------------------------- */
  --fondo:      light-dark(oklch(98% 0.003 250), oklch(15% 0.008 260));
  --tarjeta:    light-dark(oklch(100% 0 0),       oklch(20% 0.008 260));
  --tarjeta-2:  light-dark(oklch(96.5% 0.004 250),oklch(24% 0.008 260));
  --borde:      light-dark(oklch(89% 0.006 250),  oklch(30% 0.01 260));
  --texto:      light-dark(oklch(24% 0.01 260),   oklch(94% 0.005 250));
  --texto-2:    light-dark(oklch(48% 0.01 260),   oklch(68% 0.008 255));
  --enlace:     light-dark(oklch(48% 0.15 250),   oklch(78% 0.12 240));
  --enlace-h:   light-dark(oklch(38% 0.17 255),   oklch(88% 0.10 235));

  /* -- 2. TIPOGRAFÍA -------------------------------------------------- */
  --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fs-hero: clamp(56px, 12vw, 72px);
  --fs-h1:   clamp(28px, 5vw, 36px);
  --fs-h2:   clamp(22px, 3.4vw, 28px);
  --fs-cuerpo: clamp(16px, 2.1vw, 18px);
  --fs-datos: clamp(12px, 1.4vw, 13px);
  --fs-cifra: clamp(30px, 6vw, 40px);

  /* -- Espaciado / geometría ----------------------------------------- */
  --margen: 16px;
  --radio: 12px;
  --gap-apartado: 32px;
  --alto-cabecera: 44px;
  --alto-barra: 48px;
  --alto-pestanas: 56px;
  --alto-tiempo: 56px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --toque: 44px;

  /* Cromo: SIEMPRE claro e igual en todas las páginas (análisis 23/09 §4.2) */
  --cromo: #ffffff;
  --cromo-2: #f3f4f6;
  --cromo-borde: #e3e5e9;
  --cromo-texto: #16181d;
  --cromo-texto-2: #5b616e;
  --cromo-activo: #0b5cd6;
}

/* ---- Reset acotado ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-cuerpo);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--enlace-h); text-decoration: underline; }

h1, h2, h3 { text-wrap: balance; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; }
p  { text-wrap: pretty; margin: 0 0 .8em; }

/* Todo lo numérico con cifras tabulares (ya heredado; refuerzo en tablas) */
table, .cifra, .hero-temp, td, th { font-variant-numeric: tabular-nums; }

/* ---- 3. RETÍCULA --------------------------------------------------- */
.pagina {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--margen);
}
.contenido {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-apartado);
}
.principal { min-width: 0; }               /* evita desbordes de SVG en grid */
.lateral   { min-width: 0; }

@media (min-width: 1024px) {
  .contenido { grid-template-columns: 2fr 1fr; align-items: start; }
  .lateral {
    position: sticky;
    top: calc(var(--alto-cabecera) + var(--alto-barra) + 8px);
    display: grid;
    gap: 16px;
  }
  /* la lateral acompaña hasta Clima; luego el flujo sigue a una columna */
  .principal { grid-column: 1; }
}

.apartado { scroll-margin-top: calc(var(--alto-cabecera) + var(--alto-barra) + 8px); }
.apartado + .apartado { margin-top: 8px; }

/* Cada componente razona por su propio ancho, no por el de la página */
.tarjeta, .meteograma, .semana, .tira, .arco, .grafico { container-type: inline-size; }

/* ---- 4. COMPONENTES BASE ------------------------------------------ */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(16px, 3vw, 20px);
}
.tarjeta--2 { background: var(--tarjeta-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1;
  background: var(--tarjeta-2); border: 1px solid var(--borde);
  white-space: nowrap;
}
.chip .punto { width: 10px; height: 10px; border-radius: 999px; background: var(--acento, currentColor); }

.datos {
  font-size: var(--fs-datos);
  color: var(--texto-2);
  margin: 10px 0 0;
}
.vacio { color: var(--texto-2); font-style: italic; }

.pregunta { /* H2 en forma de pregunta */ }
.respuesta { /* primera frase con el número */ font-family: var(--serif);
             font-size: clamp(17px, 2.4vw, 21px); line-height: 1.45; }

/* ==== ESQUELETO COMPARTIDO: cabecera 44 · contenido · pestañas 56 ======= */
.cabecera, .pestanas, .buscador-capa, .hoja, .barra-tiempo, .leyenda, .mapa-ctrl {
  color-scheme: light; color: var(--cromo-texto);
}
.cabecera {
  position: sticky; top: 0; z-index: 30;
  height: var(--alto-cabecera);
  display: flex; align-items: center; gap: 4px;
  padding: 0 4px 0 var(--margen);
  background: var(--cromo);
  border-bottom: 1px solid var(--cromo-borde);
}
.logo { display: inline-flex; align-items: center; gap: 7px; height: var(--toque);
  font-weight: 800; letter-spacing: -0.03em; font-size: 18px; color: var(--cromo-texto); }
.logo:hover { text-decoration: none; color: var(--cromo-texto); }
.logo svg { width: 24px; height: 24px; }
.cabecera-titulo { flex: 1; min-width: 0; margin-left: 6px; padding-left: 10px;
  border-left: 1px solid var(--cromo-borde);
  font-size: 15px; font-weight: 600; color: var(--cromo-texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boton-cromo {
  flex: none; min-width: var(--toque); height: var(--toque);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--cromo-texto); cursor: pointer;
}
.boton-cromo:hover { background: var(--cromo-2); }
.boton-cromo:focus-visible, .pestanas a:focus-visible { outline: 2px solid var(--cromo-activo); outline-offset: -2px; }
.boton-cromo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
/* Escritorio: las pestañas suben a la cabecera; la barra inferior desaparece */
.menu { display: none; }

/* -- Pestañas inferiores: Municipio · Mapas · Avisos · Evolución -- */
.pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  height: calc(var(--alto-pestanas) + var(--seguro-abajo));
  padding-bottom: var(--seguro-abajo);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--cromo); border-top: 1px solid var(--cromo-borde);
}
.pestanas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--toque); color: var(--cromo-texto-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
}
.pestanas a:hover { text-decoration: none; color: var(--cromo-texto); }
.pestanas svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.pestanas a[aria-current="page"] { color: var(--cromo-activo); }
.pestanas a[aria-current="page"] svg { stroke-width: 2.1; }
.pestanas .contador { position: absolute; transform: translate(12px, -12px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--av-amarillo); color: #1a1300; font-size: 11px; line-height: 18px; }
.pestanas a { position: relative; }
body.con-pestanas { padding-bottom: calc(var(--alto-pestanas) + var(--seguro-abajo)); }

@media (min-width: 1024px) {
  .pestanas { display: none; }
  body.con-pestanas { padding-bottom: 0; }
  .menu { display: inline-flex; gap: 2px; margin-right: 4px; }
  .menu a { height: var(--toque); display: inline-flex; align-items: center; padding: 0 12px;
    border-radius: 10px; color: var(--cromo-texto-2); font-weight: 600; font-size: 14px; }
  .menu a:hover { background: var(--cromo-2); text-decoration: none; color: var(--cromo-texto); }
  .menu a[aria-current="page"] { color: var(--cromo-activo); }
}

/* -- Buscador a pantalla completa (dialog) -- */
.buscador-capa { margin: 0; padding: 0; border: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  background: var(--cromo); }
.buscador-capa::backdrop { background: rgb(0 0 0 / .25); }
@media (min-width: 720px) {
  .buscador-capa { margin: 64px auto auto; width: min(560px, 92vw); height: auto; max-height: 76vh;
    border-radius: 16px; box-shadow: 0 20px 60px rgb(0 0 0 / .18); }
}
.buscador-fila { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 4px 0 12px;
  border-bottom: 1px solid var(--cromo-borde); }
.buscador-fila input { flex: 1; min-width: 0; height: var(--toque); border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 18px; color: var(--cromo-texto); }
.buscador-cuerpo { padding: 8px 0 24px; overflow: auto; }
.buscador-cuerpo h3 { margin: 16px 16px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--cromo-texto-2); }
.buscador-lista { list-style: none; margin: 0; padding: 0; }
.buscador-lista a, .buscador-ubicacion { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 16px; color: var(--cromo-texto); font-size: 16px; }
.buscador-lista a:hover, .buscador-lista a[aria-selected="true"] { background: var(--cromo-2); text-decoration: none; }
.buscador-lista small { color: var(--cromo-texto-2); font-size: 13px; }
.buscador-ubicacion { width: 100%; border: 0; background: none; font: inherit; font-weight: 600; color: var(--cromo-activo);
  cursor: pointer; justify-content: flex-start; }
.buscador-ubicacion svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* -- Puente al mapa al final de cada apartado (ficha → mapa centrado) -- */
.puente { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); margin-top: 6px;
  font-size: 14px; font-weight: 600; }
.puente::after { content: "→"; transition: translate .15s; }
.puente:hover::after { translate: 3px 0; }
.puentes { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 10px 0 0; }
.puentes .puente { margin-top: 0; }
.cabecera-municipio { text-align: center; padding-top: 6px; }
.cabecera-municipio .datos { max-width: 60ch; margin-inline: auto; }

/* -- Barra de apartados (sticky bajo la cabecera) -- */
.barra-apartados {
  position: sticky; top: var(--alto-cabecera); z-index: 20;
  height: var(--alto-barra);
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--margen);
  color-scheme: light; background: var(--cromo);
  border-bottom: 1px solid var(--cromo-borde);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.barra-apartados::-webkit-scrollbar { display: none; }
.barra-apartados a {
  scroll-snap-align: start; white-space: nowrap;
  height: 36px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--cromo-texto-2);
  border: 1px solid transparent;
}
.barra-apartados a:hover { background: var(--cromo-2); text-decoration: none; }
.barra-apartados a[aria-current="true"] { background: var(--cromo-texto); color: #fff; }
.barra-apartados a.destacado { color: var(--cromo-texto); border-color: var(--cromo-borde); }
.barra-apartados a.destacado.n-amarillo { background: var(--av-amarillo); color: #1a1300; border-color: transparent; }
.barra-apartados a.destacado.n-naranja { background: var(--av-naranja); color: #1a0d00; border-color: transparent; }
.barra-apartados a.destacado.n-rojo { background: var(--av-rojo); color: #fff; border-color: transparent; }
.barra-apartados a.destacado.rayos { background: var(--rayos-2); color: #1a1000; border-color: transparent; }

/* -- Migas -- */
.migas { font-size: 13px; color: var(--texto-2); margin: 12px 0 6px; }
.migas a { color: var(--texto-2); }
.migas span::after { content: "›"; margin: 0 6px; color: var(--borde); }

/* -- Barra de progreso de lectura -- */
.progreso-lectura {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--enlace); z-index: 40;
}

/* -- details/summary -- */
details { border-top: 1px solid var(--borde); margin-top: 10px; }
summary {
  cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 15px;
  list-style: none; color: var(--texto-2);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: " ▾"; }
details[open] summary::after { content: " ▴"; }

/* -- Tablas -- */
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
th { font-weight: 600; color: var(--texto-2); }
tr.hoy { background: var(--tarjeta-2); font-weight: 600; }

/* -- Banda de aviso a todo el ancho -- */
.banda-aviso {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--radio);
  font-weight: 700;
}
.banda-aviso.n-amarillo { background: var(--av-amarillo); color: #1a1300; }
.banda-aviso.n-naranja  { background: var(--av-naranja);  color: #1a0d00; }
.banda-aviso.n-rojo     { background: var(--av-rojo);     color: #fff; }
.banda-aviso.n-verde    { background: var(--av-verde);    color: #04170c; }

/* -- Hero de "Ahora mismo" -- */
.hero { display: grid; gap: 14px; }
.hero-linea1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-temp { font-size: var(--fs-hero); font-weight: 800; line-height: .95; letter-spacing: -0.03em; }
.hero-cielo { font-size: clamp(16px, 3vw, 20px); color: var(--texto-2); text-align: right; }
.hero-fila { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--texto-2); }
.hero-fila .icono-viento { display: inline-block; width: 1em; height: 1em; vertical-align: -0.1em; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* -- Tarjetas "lo que hace único" -- */
.unico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@container (max-width: 420px) { .unico { grid-template-columns: 1fr; } }
.unico .tarjeta { padding: 14px; }
.unico .cifra { font-size: var(--fs-cifra); font-weight: 800; line-height: 1; }
.unico .txt { font-size: 13px; color: var(--texto-2); margin-top: 4px; }

/* -- Iconos -- */
.icono { width: 1.4em; height: 1.4em; display: inline-block; vertical-align: -0.25em;
         fill: none; stroke: currentColor; stroke-width: 1.5;
         stroke-linecap: round; stroke-linejoin: round; }
.icono--sol { fill: currentColor; stroke: none; }

/* -- Iconos de tiempo a color, animados -- */
.icono-tiempo { display: inline-block; vertical-align: -0.35em; overflow: visible;
                filter: drop-shadow(0 3px 6px rgba(255,158,44,.18)); }
.icono-tiempo .it-rayos, .icono-tiempo .it-disco { transform-box: view-box; }
.it-rayos   { animation: it-spin 14s linear infinite; }
.it-disco   { animation: it-late 3s ease-in-out infinite; }
.it-halo    { transform-box: fill-box; transform-origin: center; animation: it-halo 3s ease-in-out infinite; }
.it-nube    { animation: it-flotar 4.5s ease-in-out infinite; }
.it-gota    { animation: it-gota 1.1s linear infinite; }
.it-copo    { transform-box: fill-box; transform-origin: center; animation: it-copo 2.2s linear infinite; }
.it-rayo    { animation: it-destello 2.6s ease-in-out infinite; }
.it-bruma   { animation: it-deriva 3.6s ease-in-out infinite; }
.it-estrella{ animation: it-brilla 1.8s ease-in-out infinite; }
@keyframes it-spin    { to { transform: rotate(360deg); } }
@keyframes it-late    { 50% { transform: scale(1.07); } }
@keyframes it-halo    { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.16); opacity: 1; } }
@keyframes it-flotar  { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
@keyframes it-gota    { 0% { transform: translateY(-5px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes it-copo    { 0% { transform: translateY(-4px) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(13px) rotate(90deg); opacity: 0; } }
@keyframes it-destello{ 0%,55%,70%,100% { opacity: 1; } 60%,75% { opacity: .1; } }
@keyframes it-deriva  { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(6px); } }
@keyframes it-brilla  { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .it-rayos, .it-disco, .it-halo, .it-nube, .it-gota, .it-copo, .it-rayo, .it-bruma, .it-estrella { animation: none; }
}
}

/* ---- 5. UTILIDADES DE ESCALA (color = significado) ---------------- */
.t-1{--acento:var(--t-1)} .t-2{--acento:var(--t-2)} .t-3{--acento:var(--t-3)}
.t-4{--acento:var(--t-4)} .t-5{--acento:var(--t-5)} .t-6{--acento:var(--t-6)}
.t-7{--acento:var(--t-7)} .t-8{--acento:var(--t-8)} .t-9{--acento:var(--t-9)}
.t-10{--acento:var(--t-10)} .t-11{--acento:var(--t-11)} .t-12{--acento:var(--t-12)}
.ll-1{--acento:var(--ll-1)} .ll-2{--acento:var(--ll-2)} .ll-3{--acento:var(--ll-3)}
.ll-4{--acento:var(--ll-4)} .ll-5{--acento:var(--ll-5)}
.aire-1{--acento:var(--aire-1)} .aire-2{--acento:var(--aire-2)} .aire-3{--acento:var(--aire-3)}
.aire-4{--acento:var(--aire-4)} .aire-5{--acento:var(--aire-5)} .aire-6{--acento:var(--aire-6)}
.uv-1{--acento:var(--uv-1)} .uv-2{--acento:var(--uv-2)} .uv-3{--acento:var(--uv-3)}
.uv-4{--acento:var(--uv-4)} .uv-5{--acento:var(--uv-5)}
.n-1{--acento:var(--noche-1)} .n-2{--acento:var(--noche-2)} .n-3{--acento:var(--noche-3)}
.n-4{--acento:var(--noche-4)} .n-5{--acento:var(--noche-5)}
.rayos-1{--acento:var(--rayos-1)} .rayos-2{--acento:var(--rayos-2)} .rayos-3{--acento:var(--rayos-3)}
.rayos-4{--acento:var(--rayos-4)} .rayos-5{--acento:var(--rayos-5)}
.fondo-acento { background: var(--acento); }
.borde-acento { border-color: var(--acento); }

/* Pastilla coloreada por escala (chips de aire/uv/noche/semana) */
.pastilla {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 8px 10px; border-radius: 10px; min-width: 56px;
  background: var(--acento); color: #10130f;
  font-weight: 700; line-height: 1.2;
}
.pastilla small { font-weight: 600; font-size: 12px; opacity: .85; }

/* Tira de celdas (rayos, lluvia, ventilar) */
.tira-celdas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 28px; }
.tira-celdas .celda { background: var(--tarjeta-2); border-radius: 3px; }
.tira-celdas .celda[data-acento] { background: var(--acento); }
.tira-horas { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-2); margin-top: 4px; }

/* Barra de rango de temperatura (semana) */
.rango { position: relative; height: 12px; border-radius: 999px; background: var(--tarjeta-2); }
.rango .relleno {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-min), var(--c-max));
}

/* ---- 6. MOVIMIENTO ------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .apartado {
      animation: entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    .linea-dibujada {
      stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1;
      animation: dibujar linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .progreso-lectura {
      animation: progreso linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes entrar { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes progreso { to { transform: scaleX(1); } }

/* details con apertura suave */
@supports (interpolate-size: allow-keywords) {
  details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .2s ease, content-visibility .2s allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
}
@starting-style { details[open]::details-content { block-size: 0; } }

/* Transición entre municipios */
@view-transition { navigation: auto; }
.hero { view-transition-name: hero; }
h1 { view-transition-name: titulo; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Pie */
.pie { margin-top: 48px; padding: 24px var(--margen) 40px; border-top: 1px solid var(--borde);
       color: var(--texto-2); font-size: 14px; }
.pie a { color: var(--texto-2); }
.pie-interior { max-width: 1180px; margin-inline: auto; display: grid; gap: 10px; }
.pie p { margin: 0; }
.pie .fuentes { font-size: 12.5px; }

/* Minimapa de la ficha: bloque independiente y desmontable (decisión pendiente 23/09) */
#minimapa { margin: 0 0 8px; }
#minimapa .mm-lienzo { height: 220px; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde); background: var(--tarjeta-2); }
#minimapa .mm-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 13px; color: var(--texto-2); margin-top: 6px; }

/* ==== PÁGINAS DE LISTA (home, avisos, provincia) ======================= */
.portada-buscar { text-align: center; padding: 28px 0 8px; }
.portada-buscar h1 { margin-bottom: 14px; }
.campo-buscar { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto;
  height: 56px; padding: 0 18px; border: 1px solid var(--borde); border-radius: 16px; background: var(--tarjeta);
  font: inherit; font-size: 17px; color: var(--texto-2); cursor: text; text-align: left; }
.campo-buscar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.fila-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.chip-enlace { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); font-size: 14px; font-weight: 600; }
.chip-enlace:hover { text-decoration: none; border-color: var(--texto-2); }
.chip-enlace.primario { color: var(--enlace); }

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifras .tarjeta { padding: 14px 16px; }
.cifras .cifra { font-size: var(--fs-cifra); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cifras .txt { font-size: 13.5px; color: var(--texto-2); margin-top: 6px; }
.cifras .txt a { color: var(--texto); font-weight: 600; }

.listas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.lista-diez { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.lista-diez li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 44px; border-bottom: 1px solid var(--borde); counter-increment: p; font-size: 15px; }
.lista-diez li:last-child { border-bottom: 0; }
.lista-diez li::before { content: counter(p); color: var(--texto-2); font-size: 13px; text-align: right; }
.lista-diez a { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-diez small { display: block; color: var(--texto-2); font-weight: 400; font-size: 12.5px; }
.valor { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.valor::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--acento, var(--borde)); }

.accesos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.acceso { display: grid; gap: 4px; color: var(--texto); }
.acceso:hover { text-decoration: none; border-color: var(--texto-2); }
.acceso strong { font-size: 16px; }
.acceso .cifra { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.acceso span { font-size: 13.5px; color: var(--texto-2); }

/* Mapa de puntos de España (SVG del servidor; capas por clase sobre el mismo SVG) */
.mapa-es { position: relative; }
.mapa-es svg { width: 100%; height: auto; }
.mapa-es svg path { fill: none; stroke: var(--c, #d7dbe0); stroke-width: 4; stroke-linecap: round; }
.mapa-es svg path.base { stroke: #dde1e6; }
.mapa-es g[data-l] { display: none; }
.mapa-es[data-capa="tmax"] g[data-l="tmax"], .mapa-es[data-capa="aviso"] g[data-l="aviso"], .mapa-es[data-capa="aire"] g[data-l="aire"],
.mapa-es[data-capa="noche"] g[data-l="noche"], .mapa-es[data-capa="lluvia"] g[data-l="lluvia"] { display: inline; }
.mapa-es svg { cursor: pointer; }
.selector-capa { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; }
.selector-capa button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.selector-capa button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.leyenda-es { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.leyenda-es span { flex: 1; background: var(--acento); }
.leyenda-es-txt { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-2); margin-top: 4px; }

.aviso-zona { display: grid; gap: 6px; align-content: start; }
.aviso-zona.n-amarillo { --acento: var(--av-amarillo); }
.aviso-zona.n-naranja { --acento: var(--av-naranja); }
.aviso-zona.n-rojo { --acento: var(--av-rojo); }
.aviso-zona h3 { font-size: 17px; margin: 0 0 2px; }
.aviso-zona p { margin: 0; font-size: 14.5px; }
.etiqueta-nivel { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 700;
  background: var(--acento); color: #1a1300; }
.aviso-zona.n-rojo .etiqueta-nivel { color: #fff; }

/* Capas del mapa de España: el selector cambia data-capa; cada punto lleva una clase por capa */
.mapa-es[data-capa="tmax"] .t1{--c:var(--t-1)} .mapa-es[data-capa="tmax"] .t2{--c:var(--t-2)} .mapa-es[data-capa="tmax"] .t3{--c:var(--t-3)} .mapa-es[data-capa="tmax"] .t4{--c:var(--t-4)} .mapa-es[data-capa="tmax"] .t5{--c:var(--t-5)} .mapa-es[data-capa="tmax"] .t6{--c:var(--t-6)} .mapa-es[data-capa="tmax"] .t7{--c:var(--t-7)} .mapa-es[data-capa="tmax"] .t8{--c:var(--t-8)} .mapa-es[data-capa="tmax"] .t9{--c:var(--t-9)} .mapa-es[data-capa="tmax"] .t10{--c:var(--t-10)} .mapa-es[data-capa="tmax"] .t11{--c:var(--t-11)} .mapa-es[data-capa="tmax"] .t12{--c:var(--t-12)} 
.mapa-es[data-capa="aviso"] .av{--c:var(--av-verde)} .mapa-es[data-capa="aviso"] .aa{--c:var(--av-amarillo)} .mapa-es[data-capa="aviso"] .an{--c:var(--av-naranja)} .mapa-es[data-capa="aviso"] .ar{--c:var(--av-rojo)}
.mapa-es[data-capa="aire"] .e1{--c:var(--aire-1)} .mapa-es[data-capa="aire"] .e2{--c:var(--aire-2)} .mapa-es[data-capa="aire"] .e3{--c:var(--aire-3)} .mapa-es[data-capa="aire"] .e4{--c:var(--aire-4)} .mapa-es[data-capa="aire"] .e5{--c:var(--aire-5)} .mapa-es[data-capa="aire"] .e6{--c:var(--aire-6)} 
.mapa-es[data-capa="noche"] .n1{--c:var(--noche-1)} .mapa-es[data-capa="noche"] .n2{--c:var(--noche-2)} .mapa-es[data-capa="noche"] .n3{--c:var(--noche-3)} .mapa-es[data-capa="noche"] .n4{--c:var(--noche-4)} .mapa-es[data-capa="noche"] .n5{--c:var(--noche-5)} 
.mapa-es[data-capa="lluvia"] .l0{--c:#e6e9ee} .mapa-es[data-capa="lluvia"] .l1{--c:var(--ll-1)} .mapa-es[data-capa="lluvia"] .l2{--c:var(--ll-2)} .mapa-es[data-capa="lluvia"] .l3{--c:var(--ll-3)} .mapa-es[data-capa="lluvia"] .l4{--c:var(--ll-4)} .mapa-es[data-capa="lluvia"] .l5{--c:var(--ll-5)} 
.mapa-es[data-capa="aviso"] .av { --c: #dfe5da; }
.mapa-es .recuadro { fill: none; stroke: var(--borde); stroke-width: 1; }
.mapa-es .rotulo { font-size: 11px; fill: var(--texto-2); }
.leyenda-capa[hidden] { display: none; }
.ficha-punto { position: absolute; z-index: 5; min-width: 200px; max-width: 260px; padding: 12px 14px; border-radius: 12px;
  background: var(--tarjeta); border: 1px solid var(--borde); box-shadow: 0 8px 24px rgb(0 0 0 / .14); font-size: 14px; transform: translate(-50%, calc(-100% - 10px)); }
.ficha-punto[hidden] { display: none; }
.ficha-punto strong { display: block; font-size: 16px; }
.ficha-punto small { color: var(--texto-2); }
.ficha-punto .valor { margin: 6px 0; }

.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }