/* Meteo Jerez de los Caballeros · móvil primero */
/* Fuentes alojadas en la propia web (licencia SIL OFL): sin llamadas a Google, mejor para el RGPD */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(fuentes/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url(fuentes/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(fuentes/barlow-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fuentes/barlow-condensed-latin-600-normal.woff2) format('woff2'); }

:root {
  --cal: #F7F8F6;          /* fondo: blanco de cal */
  --tinta: #1E2B33;        /* texto: pizarra */
  --tinta-suave: #55636D;
  --linea: #DDE2E4;
  --azulejo: #1D4F91;      /* acento */
  --encina: #5B6B3C;       /* lo medido por la estación */
  --lluvia: #3A86C8;
  --calor: #C8553D;
  --frio: #3B7BBF;
  --amarillo: #E8B10E;
  --naranja: #E06E1C;
  --rojo: #C7362B;
  --superficie: #FFFFFF;
  --cifras: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --texto: 'Barlow', system-ui, sans-serif;
}
:root { color-scheme: light dark; }   /* controles del navegador (fechas, barras de desplazamiento) en claro u oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --cal: #12191E; --tinta: #E5EAEC; --tinta-suave: #9AA8B1; --linea: #2A353C;
    --azulejo: #7FA8E3; --encina: #A3B572; --lluvia: #6AAEE6; --calor: #E8846D; --frio: #7FB0E6;
    --superficie: #1A2329;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cal); color: var(--tinta);
  font-family: var(--texto); font-size: 1rem; line-height: 1.5;
}
.simbolos { display: none; }
[hidden] { display: none !important; }
h1, h2, p, ol, dl, dd, figure { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--azulejo); outline-offset: 2px; }

/* ── Cabecera: el cielo de Jerez ahora ── */
.cielo {
  --c1: #2F78BD; --c2: #5A9FD8;
  position: relative; color: #fff;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
  --alto-pueblo: 4rem;
  padding: max(1rem, env(safe-area-inset-top)) 1rem calc(var(--alto-pueblo) + 0.25rem);
  transition: background 1.2s ease;
}
.cielo[data-cielo="despejado"]   { --c1: #2F78BD; --c2: #4E95D2; }
.cielo[data-cielo="intervalos"]  { --c1: #4A80B4; --c2: #6E9CC6; }
.cielo[data-cielo="nuboso"]      { --c1: #5E6E7D; --c2: #7D8C99; }
.cielo[data-cielo="chubascos"]   { --c1: #4F5F6E; --c2: #6F7E8B; }
.cielo[data-cielo="lluvia"]      { --c1: #3F4C59; --c2: #5E6B78; }
.cielo[data-cielo="tormenta"]    { --c1: #262C38; --c2: #4A5060; }
.cielo[data-noche="1"]                          { --c1: #0D1830; --c2: #22355A; }
.cielo[data-noche="1"][data-cielo="nuboso"],
.cielo[data-noche="1"][data-cielo="lluvia"],
.cielo[data-noche="1"][data-cielo="chubascos"],
.cielo[data-noche="1"][data-cielo="tormenta"]   { --c1: #161C27; --c2: #343D4D; }
.cielo[data-crepusculo="1"]                     { --c1: #34406E; --c2: #C9835A; }

.cielo__dentro { max-width: 40rem; margin: 0 auto; }
.cielo__lugar { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; }
.cielo__fresco { font-size: 0.9rem; opacity: 0.85; }
.cielo__ahora { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.cielo__temp {
  font-family: var(--cifras); font-weight: 500; line-height: 0.9;
  font-size: clamp(5.5rem, 28vw, 8.5rem); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cielo__resumen { display: grid; gap: 0.25rem; justify-items: start; font-size: 1.05rem; }
.cielo__icono { width: 3.25rem; height: 3.25rem; }
.cielo__extremos { margin-top: 0.5rem; font-size: 0.95rem; }
.cielo__extremos b { font-family: var(--cifras); font-size: 1.25rem; font-weight: 600; }
/* Silueta de Jerez vista desde la N-435 (pueblo.svg como máscara: toma el color del fondo, también en modo oscuro).
   Centrada y con su proporción; el suelo (8 de 176 unidades) se prolonga a los lados. */
.cielo__pueblo {
  position: absolute; bottom: -1px; left: 0; right: 0; height: var(--alto-pueblo); background: var(--cal);
  -webkit-mask: url(pueblo.svg) center bottom / contain no-repeat;
          mask: url(pueblo.svg) center bottom / contain no-repeat;
}
.cielo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: calc(min(var(--alto-pueblo), 100vw * 176 / 1136) * 8 / 176 + 1px);
  background: var(--cal);
}
@media (min-width: 40rem) { .cielo { --alto-pueblo: 6rem; } }

/* Menú de secciones */
.menu { display: flex; gap: 0.35rem; max-width: 40rem; margin: 0 auto 0.9rem; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  flex: none; color: #fff; text-decoration: none; font-weight: 700; font-size: 0.9rem;
  padding: 0.3rem 0.85rem; border-radius: 2rem; background: rgb(255 255 255 / 0.15);
}
.menu a:hover { background: rgb(255 255 255 / 0.26); }
.menu a[aria-current="page"] { background: #fff; color: #1D4F91; }
@media (max-width: 30rem) { .menu { flex-wrap: wrap; gap: 0.3rem; } .menu a { padding: 0.28rem 0.62rem; font-size: 0.85rem; } }

/* Cabecera de las páginas interiores */
.cielo--pagina { --c1: #2F78BD; --c2: #4E95D2; }
.pagina__titulo { font-size: 1.65rem; font-weight: 700; line-height: 1.15; }
.pagina__sub { font-size: 0.95rem; opacity: 0.92; margin-top: 0.3rem; }

/* ── Contenido ── */
main { max-width: 40rem; margin: 0 auto; padding: 0 1rem 2rem; }
.bloque { padding: 1.5rem 0 0.5rem; }
.bloque + .bloque { border-top: 1px solid var(--linea); margin-top: 1rem; }
/* Portada: en el móvil una sola columna en este orden; en pantallas grandes, dos columnas independientes */
.portada { display: flex; flex-direction: column; }
.portada .col { display: contents; }
.portada .bloque { border-top: 1px solid var(--linea); margin-top: 1rem; }
.portada .b-horas { border-top: 0; margin-top: 0; order: 2; }
.b-avisos { order: 1; } .b-estacion { order: 3; } .b-dias { order: 4; } .b-fechas { order: 5; } .b-radar { order: 6; } .b-historico { order: 7; } .b-aemet { order: 8; }
.enlace-mas { display: inline-block; margin-top: 0.75rem; font-weight: 700; color: var(--azulejo); text-decoration: none; }
.enlace-mas:hover { text-decoration: underline; }
.historico a text { fill: var(--azulejo); }
.bloque h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.75rem; }
.nota { font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 0.75rem; }

/* Avisos */
.avisos { display: grid; gap: 0.5rem; padding-top: 1rem; }
.aviso {
  border-left: 0.4rem solid var(--azulejo); background: var(--superficie);
  padding: 0.6rem 0.8rem; border-radius: 0 0.4rem 0.4rem 0;
}
.aviso[data-nivel="amarillo"] { border-color: var(--amarillo); }
.aviso[data-nivel="naranja"]  { border-color: var(--naranja); }
.aviso[data-nivel="rojo"]     { border-color: var(--rojo); }
.aviso strong { display: block; }
.aviso p { font-size: 0.92rem; color: var(--tinta-suave); }

/* Próximas horas: tira deslizable */
.horas {
  list-style: none; padding: 0 0 0.5rem; display: grid; grid-auto-flow: column;
  grid-auto-columns: 3.6rem; gap: 0.25rem; overflow-x: auto; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.hora { scroll-snap-align: start; text-align: center; padding: 0.4rem 0; border-radius: 0.5rem; }
.hora--dia0 { background: var(--superficie); }
.hora__h { font-size: 0.85rem; color: var(--tinta-suave); }
.hora svg { width: 2rem; height: 2rem; display: block; margin: 0.15rem auto; }
.hora__t { font-family: var(--cifras); font-size: 1.35rem; font-weight: 600; }
.hora__ll { font-size: 0.78rem; color: var(--lluvia); min-height: 1.2em; font-weight: 700; }
.hora__ll-barra { height: 0.25rem; background: var(--lluvia); border-radius: 1px; margin: 0.1rem auto 0; opacity: 0.85; }
.hora__cambio { font-size: 0.72rem; color: var(--tinta-suave); border-left: 1px dashed var(--linea); }

/* Estación */
.curva { width: 100%; height: 6.5rem; display: block; margin: 0.4rem 0 0.75rem; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.curva .linea { fill: none; stroke: var(--encina); stroke-width: 2; stroke-linejoin: round; }
.curva .area { fill: var(--encina); opacity: 0.12; }
.curva text { font-size: 10px; fill: var(--tinta-suave); font-family: var(--texto); }
.curva .rejilla { stroke: var(--linea); stroke-width: 1; }
.curva .rejilla--v { stroke-dasharray: 2 3; }
.curva .extremo { fill: var(--tinta); font-weight: 700; }
.curva .cursor line { stroke: var(--tinta-suave); stroke-dasharray: 3 3; }
.curva .cursor circle { fill: var(--encina); stroke: var(--superficie); stroke-width: 1.5; }
.curva .cursor rect { fill: var(--superficie); opacity: 0.92; stroke: var(--linea); }
.curva .cursor text { font-size: 11px; fill: var(--tinta); font-weight: 700; }
.medidas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1rem; }
@media (min-width: 30rem) { .medidas { grid-template-columns: repeat(3, 1fr); } }
.medidas dt { font-size: 0.85rem; color: var(--tinta-suave); }
.medidas dd { font-family: var(--cifras); font-size: 1.6rem; font-weight: 600; line-height: 1.1; display: flex; align-items: center; gap: 0.35rem; }
.medidas dd small { font-family: var(--texto); font-size: 0.85rem; font-weight: 400; color: var(--tinta-suave); }
.medidas .rumbo { width: 1.2rem; height: 1.2rem; color: var(--azulejo); }

/* Próximos días */
.dias { list-style: none; padding: 0; }
.dia { border-bottom: 1px solid var(--linea); }
.dia > button {
  width: 100%; display: grid; align-items: center; gap: 0.5rem; padding: 0.6rem 0;
  grid-template-columns: 5.6rem 2rem 2.6rem 1fr; background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
}
.dia__nombre { font-weight: 700; line-height: 1.2; white-space: nowrap; }
.dia__nombre small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--tinta-suave); }
.dia svg.ico { width: 2rem; height: 2rem; }
.dia__ll { font-size: 0.85rem; font-weight: 700; color: var(--lluvia); text-align: right; }
.dia__rango { display: grid; grid-template-columns: 2.1rem 1fr 2.1rem; align-items: center; gap: 0.35rem; }
.dia__rango b { font-family: var(--cifras); font-weight: 600; font-size: 1.2rem; }
.dia__rango b:first-child { color: var(--frio); text-align: right; }
.dia__rango b:last-child { color: var(--calor); }
.barra { position: relative; height: 0.6rem; }
.barra__halo, .barra__nucleo { position: absolute; top: 0; bottom: 0; border-radius: 0.3rem; }
.barra__halo { background: linear-gradient(90deg, var(--frio), var(--calor)); opacity: 0.22; top: -0.15rem; bottom: -0.15rem; }
.barra__nucleo { background: linear-gradient(90deg, var(--frio), var(--calor)); }
.dia__mas { display: none; padding: 0 0 0.9rem; font-size: 0.9rem; color: var(--tinta-suave); }
.tramos__titulo { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.tramos {
  list-style: none; padding: 0 0 0.4rem; margin: 0 0 0.5rem; display: grid; grid-auto-flow: column; gap: 0.2rem;
  grid-auto-columns: 3.3rem; overflow-x: auto; overscroll-behavior-x: contain;
}
.tramos[data-h="3"] { grid-auto-columns: 4rem; }
.tramos[data-h="6"], .tramos[data-h="12"] { grid-auto-columns: minmax(4.6rem, 1fr); }
.tramos li { text-align: center; background: var(--superficie); border-radius: 0.45rem; padding: 0.3rem 0.1rem; }
.tramos svg { width: 1.8rem; height: 1.8rem; display: block; margin: 0.1rem auto; }
.tramos__h { font-size: 0.75rem; white-space: nowrap; }
.tramos b { display: block; font-family: var(--cifras); font-size: 1.15rem; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.tramos b span { font-weight: 400; color: var(--tinta-suave); }
.tramos__ll { display: block; font-size: 0.72rem; font-weight: 700; color: var(--lluvia); min-height: 1.1em; }
.dia[data-abierto="1"] .dia__mas { display: block; }
.fiab { font-size: 0.75rem; }
.fiab[data-f="baja"] { color: var(--naranja); }

/* Radar */
.pestanas { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.pestanas button {
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta);
  padding: 0.35rem 0.8rem; border-radius: 2rem; cursor: pointer;
}
.pestanas button[aria-selected="true"] { background: var(--azulejo); border-color: var(--azulejo); color: #fff; }
.radar img { width: 100%; height: auto; display: block; border-radius: 0.4rem; background: var(--superficie); min-height: 12rem; }
.radar figcaption { font-size: 0.8rem; color: var(--tinta-suave); margin-top: 0.4rem; }

/* Histórico */
.historico { width: 100%; height: auto; display: block; }
.historico text { font-family: var(--texto); font-size: 10px; fill: var(--tinta-suave); }
.historico .v-max { fill: var(--calor); font-family: var(--cifras); font-size: 12px; font-weight: 600; }
.historico .v-min { fill: var(--frio); font-family: var(--cifras); font-size: 12px; font-weight: 600; }
.historico .v-ll { fill: var(--lluvia); font-size: 9px; font-weight: 700; }
.historico .l-max { stroke: var(--calor); fill: none; stroke-width: 2; }
.historico .l-min { stroke: var(--frio); fill: none; stroke-width: 2; }
.historico .b-ll { fill: var(--lluvia); opacity: 0.5; }

.b-aemet p { color: var(--tinta-suave); }
.cielo__sol { font-size: 0.9rem; opacity: 0.9; margin-top: 0.15rem; }

/* Pie */
.pie { max-width: 40rem; margin: 1rem auto 0; padding: 1.5rem 1rem 3rem; font-size: 0.8rem; color: var(--tinta-suave); display: grid; gap: 0.4rem; border-top: 1px solid var(--linea); }

/* ── Pantallas grandes: dos columnas ── */
@media (min-width: 64rem) {
  .cielo__dentro, main, .pie { max-width: 72rem; }
  .cielo__dentro { display: grid; grid-template-columns: auto 1fr; column-gap: 2.5rem; align-items: end; }
  .cielo__lugar, .cielo__fresco { grid-column: 1 / -1; }
  .cielo__lugar { font-size: 1.25rem; }
  .cielo__ahora { grid-column: 1; grid-row: 3 / span 2; }
  .cielo__temp { font-size: 9.5rem; }
  .cielo__extremos, .cielo__sol { grid-column: 2; font-size: 1.05rem; }
  .cielo__extremos { align-self: end; }
  .cielo__sol { align-self: start; padding-bottom: 1.2rem; }

  .cielo { --alto-pueblo: 8rem; }
  .menu { max-width: 72rem; }
  .portada {
    display: grid; column-gap: 3.5rem; padding-top: 0.5rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "avisos avisos" "horas horas" "izq der";
    align-items: start;
  }
  .portada .col { display: block; }
  .col--izq { grid-area: izq; }
  .col--der { grid-area: der; }
  .b-avisos { grid-area: avisos; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
  .b-horas { grid-area: horas; }
  .portada .bloque, .bloque + .bloque { margin-top: 0; }
  .bloque { border-top: 1px solid var(--linea); padding-top: 1.75rem; padding-bottom: 1.25rem; }
  .portada .b-horas { border-top: 0; }
  .horas { grid-auto-columns: 4.1rem; }
  .medidas { grid-template-columns: repeat(3, 1fr); }
  .dia > button { grid-template-columns: 7rem 2.4rem 3rem 1fr; padding: 0.7rem 0; }
  .dia svg.ico { width: 2.4rem; height: 2.4rem; }
  .dia__rango { grid-template-columns: 2.6rem 1fr 2.6rem; gap: 0.6rem; }
  .dia__rango b { font-size: 1.35rem; }
  .barra { height: 0.7rem; }
  .dia__mas p { max-width: 46rem; }
  .pie { grid-template-columns: repeat(2, 1fr); column-gap: 3.5rem; }
}


@media (prefers-reduced-motion: reduce) { .cielo, .cielo__pueblo { transition: none; } }

/* ══════════ Páginas de histórico (nuestra estación y AEMET) ══════════ */
.hist { max-width: 72rem; }
.hist__barra {
  position: sticky; top: 0; z-index: 10; background: var(--cal);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  padding: 0.9rem 0 0.7rem; border-bottom: 1px solid var(--linea);
}
.segmentos { display: inline-flex; border: 1px solid var(--linea); border-radius: 2rem; overflow: hidden; background: var(--superficie); }
.segmentos button { border: 0; background: none; color: var(--tinta); padding: 0.35rem 0.95rem; cursor: pointer; }
.segmentos button[aria-pressed="true"] { background: var(--azulejo); color: #fff; }
.fecha-nav { display: flex; align-items: center; gap: 0.35rem; }
.fecha-nav button {
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); cursor: pointer;
  min-width: 2.3rem; height: 2.3rem; border-radius: 2rem; padding: 0 0.7rem; font-weight: 700;
}
.fecha-nav button:disabled { opacity: 0.35; cursor: default; }
.fecha-nav input {
  font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 0.5rem; height: 2.3rem; padding: 0 0.5rem; color-scheme: light dark;
}
.hist__titulo { font-size: 1.35rem; font-weight: 700; margin: 1.1rem 0 0.2rem; }
.hist__estado { font-size: 0.9rem; color: var(--tinta-suave); min-height: 1.35em; }
.hist h2 { font-size: 1.15rem; font-weight: 700; margin: 1.6rem 0 0.7rem; }
.vacio { padding: 1.5rem 0; color: var(--tinta-suave); }

/* Tarjetas de resumen */
.tarjetas { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); margin-top: 0.6rem; }
.tarjeta { background: var(--superficie); border-radius: 0.6rem; padding: 0.7rem 0.8rem; }
.tarjeta h3 { font-size: 0.8rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.35rem; }
.tarjeta p { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; line-height: 1.25; }
.tarjeta p + p { margin-top: 0.2rem; }
.tarjeta b { font-family: var(--cifras); font-size: 1.45rem; font-weight: 600; }
.tarjeta small { font-size: 0.8rem; color: var(--tinta-suave); }
.tarjeta .calor { color: var(--calor); }
.tarjeta .frio { color: var(--frio); }
.tarjeta .agua { color: var(--lluvia); }
.comparacion { margin-top: 0.8rem; padding: 0.65rem 0.8rem; border-left: 0.3rem solid var(--azulejo); background: var(--superficie); border-radius: 0 0.4rem 0.4rem 0; font-size: 0.92rem; }
.comparacion a { color: var(--azulejo); font-weight: 700; }

/* Gráficas */
.graficas { display: grid; gap: 0.8rem; }
.grafica { background: var(--superficie); border-radius: 0.6rem; padding: 0.6rem 0.7rem 0.35rem; margin: 0; }
.grafica figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.8rem; font-weight: 700; font-size: 0.9rem; }
.ley { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 400; font-size: 0.78rem; color: var(--tinta-suave); }
.ley i { display: inline-block; width: 0.9rem; height: 0.22rem; border-radius: 1px; }
.grafica svg { display: block; width: 100%; height: 9.5rem; margin-top: 0.3rem; overflow: visible; touch-action: pan-y; }
.grafica .eje { font-size: 10px; fill: var(--tinta-suave); font-family: var(--texto); }
.grafica .rejilla { stroke: var(--linea); stroke-width: 1; }
.grafica .linea { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.grafica .cursor line { stroke: var(--tinta-suave); stroke-dasharray: 3 3; }
.grafica .cursor text { font-size: 11px; fill: var(--tinta); font-family: var(--texto); font-weight: 700; }
.grafica .cursor rect { fill: var(--superficie); opacity: 0.9; }
.c-t { stroke: var(--calor); background: var(--calor); }
.c-td { stroke: var(--encina); background: var(--encina); }
.c-viento { stroke: var(--azulejo); background: var(--azulejo); }
.c-racha { stroke: var(--naranja); background: var(--naranja); }
.c-p { stroke: var(--tinta-suave); background: var(--tinta-suave); }
.c-acum { stroke: var(--lluvia); background: var(--lluvia); }
.c-ll { fill: var(--lluvia); background: var(--lluvia); opacity: 0.45; }

/* Tablas */
.tabla-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 1.6rem 0 0.6rem; }
.tabla-cab h2 { margin: 0; }
.tabla-envoltura { overflow: auto; max-height: 75vh; border: 1px solid var(--linea); border-radius: 0.5rem; background: var(--superficie); }
.tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla th, .tabla td { padding: 0.4rem 0.65rem; text-align: right; border-bottom: 1px solid var(--linea); }
.tabla thead th {
  position: sticky; top: 0; z-index: 2; background: var(--superficie); font-size: 0.78rem; line-height: 1.2;
  color: var(--tinta-suave); font-weight: 700; vertical-align: bottom;
}
.tabla thead th small { display: block; font-weight: 400; }
.tabla th:first-child, .tabla td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--superficie); }
.tabla thead th:first-child { z-index: 3; }
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--azulejo) 7%, var(--superficie)); }
.tabla .calor { color: var(--calor); font-weight: 700; }
.tabla .frio { color: var(--frio); font-weight: 700; }
.tabla .agua { color: var(--lluvia); font-weight: 700; }
.tabla .sin { color: var(--tinta-suave); }
.tabla a { color: var(--azulejo); font-weight: 700; text-decoration: none; }
.tabla tfoot td { font-weight: 700; border-bottom: 0; }

/* Calendario del mes */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin-top: 0.8rem; }
.cal__cab { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--tinta-suave); }
.cal__dia {
  display: grid; grid-template-rows: auto 1fr auto; min-height: 4.6rem; padding: 0.25rem 0.35rem;
  border-radius: 0.45rem; color: var(--tinta); text-decoration: none;
  background: hsl(var(--h, 210) calc(30% + 50% * var(--k, 0)) calc(96% - 10% * var(--k, 0)));
}
a.cal__dia:hover { outline: 2px solid var(--azulejo); }
.cal__n { font-size: 0.75rem; font-weight: 700; }
.cal__t { text-align: right; font-family: var(--cifras); font-weight: 600; line-height: 1.05; }
.cal__t b { display: block; color: var(--calor); font-size: 1.15rem; }
.cal__t span { color: var(--frio); font-size: 0.95rem; }
.cal__ll { text-align: right; font-size: 0.72rem; font-weight: 700; color: var(--lluvia); min-height: 1em; }
.cal__ll small { display: none; font-size: inherit; }
@media (min-width: 30rem) { .cal__ll small { display: inline; } }
.cal__dia--vacio { background: none; border: 1px dashed var(--linea); color: var(--tinta-suave); }
.cal__dia--hoy { box-shadow: inset 0 0 0 2px var(--azulejo); }
@media (prefers-color-scheme: dark) {
  .cal__dia { background: hsl(var(--h, 210) calc(18% + 30% * var(--k, 0)) calc(17% + 9% * var(--k, 0))); }
  .cal__dia--vacio { background: none; }
}

/* Mapa de las estaciones */
.mapa { height: 20rem; border-radius: 0.6rem; overflow: hidden; background: var(--superficie); isolation: isolate; }
.mapa .leaflet-tooltip { font-family: var(--texto); font-size: 0.8rem; line-height: 1.3; }
.sobre p { margin-top: 0.7rem; color: var(--tinta-suave); max-width: 46rem; }

@media (min-width: 64rem) {
  .cielo--pagina .cielo__dentro { display: block; }
  .pagina__titulo { font-size: 2rem; }
  .hist__titulo { font-size: 1.6rem; }
  .tarjetas { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .graficas { grid-template-columns: 1fr 1fr; }
  .mes-cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .mes-cuerpo h2 { margin-top: 1.2rem; }
  .cal__dia { min-height: 5.4rem; padding: 0.35rem 0.5rem; }
  .cal__t b { font-size: 1.35rem; }
  .sobre { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
  .sobre h2 { grid-column: 1 / -1; }
  .sobre p { margin-top: 0; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ══════════ Fechas especiales ══════════ */
.filtros { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 1.1rem; }
.filtros button { border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); padding: 0.35rem 0.9rem; border-radius: 2rem; cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--azulejo); border-color: var(--azulejo); color: #fff; }
.fechas__mes { font-size: 1.2rem; font-weight: 700; margin: 1.4rem 0 0.7rem; }
.eventos { display: grid; gap: 0.8rem; }
.evento {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.8rem; background: var(--superficie);
  border-radius: 0.7rem; padding: 0.9rem 0.9rem 0.9rem 0.7rem; border-left: 0.35rem solid var(--linea);
}
.evento[data-nivel="bien"] { border-left-color: var(--encina); }
.evento[data-nivel="ojo"] { border-left-color: var(--amarillo); }
.evento[data-nivel="mal"] { border-left-color: var(--naranja); }
.evento__fecha { text-align: center; line-height: 1.1; color: var(--tinta-suave); font-size: 0.75rem; text-transform: uppercase; font-weight: 700; }
.evento__fecha b { display: block; font-family: var(--cifras); font-size: 2rem; font-weight: 600; color: var(--tinta); }
.evento__grupo { font-size: 0.78rem; font-weight: 700; color: var(--tinta-suave); }
.evento h3 { font-size: 1.08rem; line-height: 1.25; margin: 0.1rem 0 0.15rem; }
.evento__donde { font-size: 0.88rem; color: var(--tinta-suave); }
.evento__prev, .evento__clima { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--linea); }
.evento__resumen { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.evento__resumen .ico { width: 2.4rem; height: 2.4rem; }
.evento__resumen b { font-family: var(--cifras); font-size: 1.6rem; font-weight: 600; }
.evento__resumen span { font-size: 0.9rem; color: var(--tinta-suave); }
.veredicto { font-weight: 700; margin-top: 0.3rem; }
.veredicto[data-nivel="bien"] { color: var(--encina); }
.veredicto[data-nivel="ojo"] { color: #9A6E00; }
.veredicto[data-nivel="mal"] { color: var(--naranja); }
@media (prefers-color-scheme: dark) { .veredicto[data-nivel="ojo"] { color: var(--amarillo); } }
.evento__horas { list-style: none; padding: 0 0 0.3rem; margin: 0.5rem 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 3.2rem; gap: 0.2rem; overflow-x: auto; }
.evento__horas li { text-align: center; font-size: 0.75rem; background: var(--cal); border-radius: 0.4rem; padding: 0.25rem 0; }
.evento__horas .ico { width: 1.7rem; height: 1.7rem; display: block; margin: 0.1rem auto; }
.evento__horas b { display: block; font-family: var(--cifras); font-size: 1.05rem; font-weight: 600; }
.evento__horas small { display: block; color: var(--lluvia); font-weight: 700; min-height: 1em; }
.evento__nota { font-size: 0.82rem; color: var(--tinta-suave); margin-top: 0.35rem; }
.evento__desde { font-weight: 700; }
.evento__clima p + p { margin-top: 0.3rem; }
.evento__detalle { margin-top: 0.5rem; font-size: 0.88rem; }
.evento__detalle summary { cursor: pointer; color: var(--azulejo); font-weight: 700; }
.evento__detalle ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.evento__detalle li + li { margin-top: 0.2rem; }
@media (min-width: 64rem) { .eventos { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Portada: las próximas fechas especiales */
.proximas { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.proximas a {
  display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: 0.7rem; align-items: center;
  text-decoration: none; color: var(--tinta); background: var(--superficie); border-radius: 0.6rem; padding: 0.6rem 0.75rem;
  border-left: 0.3rem solid var(--linea);
}
.proximas a[data-nivel="bien"] { border-left-color: var(--encina); }
.proximas a[data-nivel="ojo"] { border-left-color: var(--amarillo); }
.proximas a[data-nivel="mal"] { border-left-color: var(--naranja); }
.proximas__fecha { text-align: center; font-size: 0.7rem; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; line-height: 1.1; }
.proximas__fecha b { display: block; font-family: var(--cifras); font-size: 1.5rem; font-weight: 600; color: var(--tinta); }
.proximas__txt b { display: block; line-height: 1.25; }
.proximas__txt small { display: block; font-size: 0.8rem; color: var(--tinta-suave); }
.proximas__txt .veredicto { font-size: 0.82rem; margin-top: 0.1rem; }
.proximas__tiempo { text-align: center; }
.proximas__tiempo .ico { width: 2rem; height: 2rem; display: block; margin: 0 auto; }
.proximas__tiempo b { font-family: var(--cifras); font-size: 1.15rem; font-weight: 600; }

/* Acceso al histórico */
.acceso { font-size: 0.88rem; color: var(--tinta-suave); margin: 0.2rem 0 0.4rem; }
.acceso:empty { display: none; }
.acceso button, .bloqueo button {
  font: inherit; font-size: 0.85rem; font-weight: 700; border: 1px dashed var(--linea); background: var(--superficie);
  color: var(--tinta-suave); border-radius: 2rem; padding: 0.25rem 0.8rem; cursor: not-allowed; margin-left: 0.3rem;
}
.acceso a, .bloqueo a { color: var(--azulejo); font-weight: 700; }
.acceso__chapa { display: inline-block; background: var(--encina); color: #fff; font-weight: 700; font-size: 0.75rem; border-radius: 2rem; padding: 0.1rem 0.6rem; margin-right: 0.3rem; }
.bloqueo { text-align: center; background: var(--superficie); border-radius: 0.8rem; padding: 2rem 1.2rem; margin-top: 1rem; }
.bloqueo svg { width: 2.6rem; height: 2.6rem; color: var(--azulejo); }
.bloqueo h3 { font-size: 1.2rem; margin: 0.4rem 0; }
.bloqueo p { color: var(--tinta-suave); max-width: 32rem; margin: 0.4rem auto 0; }
.bloqueo button { margin: 0.4rem 0 0; }
.cal__dia--bloqueado { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--linea) 6px 7px); }
.cal__candado { align-self: end; justify-self: end; font-size: 0.75rem; opacity: 0.6; }
.pie a { color: inherit; }
.form-acceso { max-width: 24rem; display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.form-acceso input { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--linea); border-radius: 0.5rem; background: var(--superficie); color: var(--tinta); }
.form-acceso button { font: inherit; font-weight: 700; padding: 0.6rem; border: 0; border-radius: 0.5rem; background: var(--azulejo); color: #fff; cursor: pointer; }

/* ══════════ Panel de administrador ══════════ */
.panel h2 { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; }
.panel__barras { width: 100%; height: auto; }
.panel__barras rect { fill: var(--azulejo); opacity: 0.85; }
.panel__barras text { font-size: 10px; fill: var(--tinta-suave); font-family: var(--texto); }
.panel__dos { display: grid; gap: 0 2rem; }
@media (min-width: 64rem) { .panel__dos { grid-template-columns: 1fr 1fr; } }
.panel .tabla td:first-child { white-space: normal; }
.panel__msg { white-space: normal !important; text-align: left !important; font-size: 0.82rem; color: var(--tinta-suave); min-width: 14rem; }
.panel__log { background: var(--superficie); border-radius: 0.5rem; padding: 0.8rem; font-size: 0.78rem; overflow-x: auto; white-space: pre-wrap; max-height: 22rem; }
.punto { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.45rem; background: var(--linea); }
.punto--ok { background: var(--encina); }
.punto--error { background: var(--rojo); }
.fichas { display: grid; gap: 0.7rem; }
@media (min-width: 64rem) { .fichas { grid-template-columns: 1fr 1fr; } }
.ficha { border: 1px solid var(--linea); border-radius: 0.6rem; background: var(--superficie); padding: 0.6rem 0.8rem 0.8rem; margin: 0; display: grid; gap: 0.45rem; }
.ficha legend { font-weight: 700; padding: 0 0.3rem; }
.ficha label { display: grid; gap: 0.15rem; font-size: 0.8rem; color: var(--tinta-suave); }
.ficha input, .ficha select { font: inherit; font-size: 0.95rem; padding: 0.4rem 0.5rem; border: 1px solid var(--linea); border-radius: 0.4rem; background: var(--cal); color: var(--tinta); min-width: 0; color-scheme: light dark; }
.ficha__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; align-items: end; }
.ficha__check { display: flex !important; align-items: center; gap: 0.4rem !important; font-size: 0.9rem !important; color: var(--tinta) !important; padding-bottom: 0.4rem; }
.ficha__borrar { justify-self: start; font: inherit; font-size: 0.85rem; border: 1px solid var(--linea); background: none; color: var(--rojo); border-radius: 2rem; padding: 0.25rem 0.8rem; cursor: pointer; }
.boton { font: inherit; font-weight: 700; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); border-radius: 2rem; padding: 0.45rem 1rem; cursor: pointer; margin-top: 0.7rem; }
.boton--principal { background: var(--azulejo); border-color: var(--azulejo); color: #fff; }
.panel__guardar { position: sticky; bottom: 0; background: var(--cal); padding: 0.6rem 0; border-top: 1px solid var(--linea); margin-top: 1rem; }
.grafica .panel__barras { height: auto; margin: 0; }

/* Año y climograma */
.grafica--meses svg { height: 15rem; }
.grafica .discontinua { stroke-dasharray: 5 4; stroke-width: 1.4; opacity: 0.8; }
.grafica circle.c-t { fill: var(--calor); } .grafica circle.c-frio { fill: var(--frio); } .grafica circle.c-tmed, .grafica circle.c-tmed-clima { fill: var(--tinta); }
.c-frio { stroke: var(--frio); background: var(--frio); }
.c-tmed { stroke: var(--tinta); background: var(--tinta); }
.c-tmed-clima { stroke: var(--calor); background: var(--calor); stroke-width: 2.6 !important; }
.grafica circle.c-tmed-clima { fill: var(--calor); }
.c-ll-normal { fill: none; stroke: var(--lluvia); stroke-dasharray: 3 2; opacity: 0.7; }
.c-normal { background: repeating-linear-gradient(90deg, var(--tinta-suave) 0 4px, transparent 4px 7px) !important; }
.tabla small { font-size: 0.75rem; font-weight: 400; }
.tabla .fila-actual td { background: color-mix(in srgb, var(--azulejo) 8%, var(--superficie)); }
.clima { margin-top: 0.5rem; }
.tabla td.sin[colspan] { text-align: left; }

/* Fenómenos */
.fen { font-size: 0.8rem; margin-right: 0.1rem; }
.fen--estimado { opacity: 0.55; }
.fenomenos-dia:empty { display: none; }
.fenomenos-dia { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.fen-chapa { background: var(--superficie); border-radius: 2rem; padding: 0.25rem 0.75rem; font-size: 0.9rem; }
.fen-chapa small { color: var(--tinta-suave); }
.fen-chapa a { color: var(--azulejo); font-weight: 700; }
.fen-num { font-size: 1rem !important; }
.fen-celda { text-align: left !important; font-size: 0.85rem; }
.fen-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.fen-lista a { color: var(--azulejo); font-weight: 700; }
.chapa { display: inline-block; border-radius: 2rem; padding: 0.05rem 0.55rem; font-size: 0.75rem; font-weight: 700; background: var(--linea); color: var(--tinta); }
.chapa--observado { background: var(--encina); color: #fff; }
.chapa--radar { background: var(--azulejo); color: #fff; }
.boton--mini { margin: 0; padding: 0.2rem 0.7rem; font-size: 0.8rem; }
.form-fen { max-width: 40rem; }

/* Gota de la probabilidad de lluvia */
.gota { width: 0.72em; height: 0.72em; vertical-align: -0.05em; margin-right: 0.12em; color: var(--lluvia); fill: currentColor; display: inline-block; }
.hora__ll .gota, .tramos__ll .gota, .evento__horas .gota { width: 0.8em; height: 0.8em; }
.nota .gota { width: 0.9em; height: 0.9em; }

/* «Lo normal esos días» debajo de la previsión: más discreto */
.evento__clima--extra { font-size: 0.92em; color: var(--tinta-suave); }
.evento__clima--extra b { color: var(--tinta); }

/* Panel: fechas nuevas sugeridas por la actualización */
.sugeridas { background: var(--superficie); border: 1px solid var(--azulejo); border-radius: 0.6rem; padding: 0.7rem 0.9rem; margin: 0.8rem 0; }
.sugeridas ul { margin: 0.4rem 0 0.6rem 1.1rem; columns: 2 16rem; font-size: 0.9rem; }

/* Panel de fenómenos: «también estimado» bajo la chapa */
.fen-tambien { display: block; font-size: 0.72rem; color: var(--tinta-suave); margin-top: 0.15rem; }

/* Día sin datos de cada hora: se explica en vez de dejar huecos */
.comparacion:empty { display: none; }
.aviso-horas { margin-top: 1rem; padding: 0.75rem 0.9rem; background: var(--superficie); border-radius: 0.5rem; border-left: 0.3rem solid var(--tinta-suave); font-size: 0.92rem; color: var(--tinta); }

/* ── Modo oscuro: sigue al sistema (móvil u ordenador) ── */
a { color: var(--azulejo); }
@media (prefers-color-scheme: dark) {
  /* Cielo de día algo más apagado para que no deslumbre; la noche y el atardecer ya son oscuros */
  .cielo--pagina { --c1: #173E66; --c2: #2A5C8E; }
  .cielo[data-cielo="despejado"]:not([data-noche="1"]):not([data-crepusculo="1"])  { --c1: #1D4C7C; --c2: #33689C; }
  .cielo[data-cielo="intervalos"]:not([data-noche="1"]):not([data-crepusculo="1"]) { --c1: #2B5175; --c2: #446C93; }
  .cielo[data-cielo="nuboso"]:not([data-noche="1"]):not([data-crepusculo="1"])     { --c1: #3A4652; --c2: #56636F; }
  /* Mapa: teselas un poco más oscuras para que no sean un foco de luz */
  .leaflet-tile-pane { filter: brightness(0.78) contrast(1.08) saturate(0.85); }
  .leaflet-container { background: #1A2329; }
  img#radar { filter: brightness(0.9); }
}