/* 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 */
  --sobre-azulejo: #FFFFFF; /* texto encima del acento (en oscuro el acento es claro: texto oscuro) */
  --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; --sobre-azulejo: #0E1B2B; --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="intervalos"][data-altas="1"] { --c1: #3D7DB9; --c2: #86ADD2; }   /* sol velado por nubes altas: azul lechoso */
.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-cielo="aguanieve"]   { --c1: #56636F; --c2: #8592A0; }
.cielo[data-cielo="nieve"]       { --c1: #66778A; --c2: #A3B1BF; }
.cielo[data-cielo="niebla"]      { --c1: #6B7883; --c2: #A0AAB3; }
.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="aguanieve"],
.cielo[data-noche="1"][data-cielo="tormenta"]   { --c1: #161C27; --c2: #343D4D; }
.cielo[data-noche="1"][data-cielo="nieve"]      { --c1: #1C2431; --c2: #4A5566; }
.cielo[data-noche="1"][data-cielo="niebla"]     { --c1: #20272F; --c2: #4B545E; }
.cielo[data-cielo="nieve"], .cielo[data-cielo="niebla"] { text-shadow: 0 1px 3px rgb(0 0 0 / 0.28); }
.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 (pueblo.svg como máscara: toma el color del fondo, también en modo oscuro): la alcazaba templaria
   con la bandera del Temple, las torres y el caserío; lo de atrás, semitransparente. La cruz de la bandera es otra
   máscara (pueblo-cruz.svg) con la misma colocación, pintada en rojo. Centrada y con su proporción (2600 × 210);
   el suelo (10 de 210 unidades) se prolonga a los lados. En el móvil se recorta por los lados. */
.cielo__pueblo {
  position: absolute; bottom: -1px; left: 0; right: 0; height: var(--alto-pueblo); background: var(--cal);
  -webkit-mask: url(pueblo.v10.svg) center bottom / contain no-repeat;
          mask: url(pueblo.v10.svg) center bottom / contain no-repeat;
}
.cielo__pueblo::before {
  content: ''; position: absolute; inset: 0; background: #C21F2E;
  -webkit-mask: url(pueblo-cruz.v10.svg) center bottom / contain no-repeat;
          mask: url(pueblo-cruz.v10.svg) center bottom / contain no-repeat;
}
.cielo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: calc(min(var(--alto-pueblo), 100vw * 210 / 2600) * 10 / 210 + 1px);
  background: var(--cal);
}
@media (min-width: 40rem) { .cielo { --alto-pueblo: 7rem; } }
@media (max-width: 39.99rem) {
  .cielo { --alto-pueblo: 5.5rem; }
  /* En el móvil se ve siempre el mismo trozo (de Santa Catalina a San Miguel), sea cual sea el ancho */
  .cielo__pueblo, .cielo__pueblo::before {
    -webkit-mask-size: min(260%, calc(var(--alto-pueblo) * 2600 / 210)) auto; mask-size: min(260%, calc(var(--alto-pueblo) * 2600 / 210)) auto;
    -webkit-mask-position: 41.5% bottom; mask-position: 41.5% bottom;
  }
  .cielo::after { height: calc(min(260vw, var(--alto-pueblo) * 2600 / 210) * 10 / 2600 + 1px); }
}

/* Menú de secciones */
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; max-width: 44rem; margin: 0 auto 0.9rem; }
.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; }
/* Entrar (administrador, acceso educativo y, más adelante, la suscripción): con el muñequito, como en cualquier web */
.menu a.menu__cuenta { display: inline-flex; align-items: center; gap: 0.35em; background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55); }
.menu a.menu__cuenta:hover { background: rgb(255 255 255 / 0.18); }
.menu a.menu__cuenta[aria-current="page"] { background: #fff; box-shadow: none; }
.menu__cuenta svg { width: 1.05em; height: 1.05em; flex: none; }
@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; } .portada .b-indices { order: 2; } .b-dias { order: 3; } .b-estacion { order: 4; } .b-historico { order: 4; } .b-pedanias { order: 4; } .b-fechas { order: 5; } .b-radar { order: 6; } .b-aemet { order: 8; } .b-entorno { order: 9; }
.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); }
/* Cambio de día en la tira de horas: raya a la izquierda y el nombre del día («Mañana», «Pasado mañana», «Jueves 5») */
.hora { position: relative; }
.hora__dia { height: 1.15rem; margin: -0.15rem 0 0.15rem; padding-left: 0.45rem; text-align: left; white-space: nowrap; overflow: visible;
  font-size: 0.78rem; font-weight: 700; color: var(--azulejo); letter-spacing: 0.01em; position: relative; z-index: 1; }
.hora--dia0 .hora__dia { color: var(--tinta-suave); font-weight: 600; }
.hora--nuevo-dia::before { content: ''; position: absolute; left: -0.16rem; top: 0.2rem; bottom: 0.2rem; width: 2px; border-radius: 1px; background: var(--azulejo); opacity: 0.55; }
.hora--nuevo-dia .hora__h { color: var(--tinta); font-weight: 700; }
.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; }
/* Cuánta lluvia en cada hora: columnita que crece con los milímetros, con la cifra encima */
.hora__mm { height: 2.5rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; margin: 0.05rem 0.3rem 0;
  border-bottom: 1px solid var(--linea); }
.hora__mm small { font-size: 0.7rem; font-weight: 700; color: var(--lluvia); line-height: 1; margin-bottom: 0.12rem; font-variant-numeric: tabular-nums; }
.hora__mm span { width: 1rem; min-height: 2px; background: var(--lluvia); border-radius: 2px 2px 0 0; opacity: 0.85; }
/* Nieve: columnita blanca con borde azul claro, y la cifra en centímetros */
.hora__mm--nieve span { background: #F4F8FC; border: 1px solid #9CC3EA; border-bottom: 0; opacity: 1; }
.hora__mm--nieve small, .tramos__mm--nieve { color: #5E8FC0; }
.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 3.1rem 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; line-height: 1.15; }
.dia__ll small { display: block; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
/* Cota de nieve y granizo, debajo de la fila del día */
.dia__extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: -0.15rem; }
.chip { font-size: 0.76rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.chip--nieve { background: #EAF3FC; color: #2F6AA3; border: 1px solid #B9D5F0; }
.chip--granizo { background: #F2EEFA; color: #5B3FA0; border: 1px solid #D3C7EE; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip--nieve { background: #1D3550; color: #CFE3F7; border-color: #34587E; }
  :root:not([data-theme="light"]) .chip--granizo { background: #2E2547; color: #DCD0F7; border-color: #4E4078; } }
:root[data-theme="dark"] .chip--nieve { background: #1D3550; color: #CFE3F7; border-color: #34587E; }
:root[data-theme="dark"] .chip--granizo { background: #2E2547; color: #DCD0F7; border-color: #4E4078; }
@media (max-width: 22.4rem) { .dia > button { grid-template-columns: 5.1rem 1.8rem 3rem 1fr; gap: 0.4rem; } .dia__nombre small { font-size: 0.7rem; } .dia__ll small { font-size: 0.68rem; } }
.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; }
.tramos__mm { display: block; font-size: 0.7rem; font-weight: 600; color: var(--lluvia); }
.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: var(--sobre-azulejo); }
.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; }
/* Hoy aún no ha terminado: tramo discontinuo, punto hueco y cifras más suaves */
.historico .l-provisional { stroke-dasharray: 4 3.5; }
.historico .p-hoy { fill: var(--superficie); stroke-width: 2; }
.historico .p-hoy--max { stroke: var(--calor); }
.historico .p-hoy--min { stroke: var(--frio); }
.historico .v-provisional { opacity: 0.7; }
.historico .t-provisional { font-size: 8.5px; font-style: italic; }
.historico .b-ll--provisional { opacity: 0.3; stroke: var(--lluvia); stroke-dasharray: 3 2; }

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

/* Pie */
.pie__sobre { grid-column: 1 / -1; color: var(--tinta); font-size: 0.85rem; line-height: 1.5; }
.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: 9rem; }
  .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: "oficiales oficiales" "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)); }
  .portada .resumen-avisos { grid-area: oficiales; margin: 1rem 0 0; }
  .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 3.8rem 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: var(--sobre-azulejo); }
.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 button { white-space: nowrap; flex: none; }
/* En el móvil la fila ocupa todo el ancho y el botón de la fecha se encoge si hace falta («Este mes» nunca se parte) */
@media (max-width: 30rem) {
  .fecha-nav { width: 100%; }
  .fecha-nav .cal-boton { flex: 1 1 auto; min-width: 0; justify-content: center; overflow: hidden; padding: 0 0.6rem; }
  .fecha-nav #ir-hoy { padding: 0 0.75rem; }
}
.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; }
/* Migas de pan: Todos los años › 2006 › Enero › 29 */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.4rem; margin-top: 0.8rem; font-size: 0.86rem; color: var(--tinta-suave); }
.migas a { color: var(--azulejo); font-weight: 700; text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas [aria-current] { color: var(--tinta); font-weight: 600; }
.migas__sep { color: var(--tinta-suave); }
.migas + .hist__titulo { margin-top: 0.3rem; }
/* En el móvil, sin migas (las pestañas Récords · Año · Mes · Día ya llevan arriba y abajo) y con menos huecos */
@media (max-width: 40rem) {
  .migas { display: none; }
  .hist__titulo, .migas + .hist__titulo { margin-top: 0.8rem; font-size: 1.2rem; }
  .hist__estado:empty { min-height: 0; }
  .acceso { font-size: 0.8rem; }
}
/* En «Todos los años» no hay fecha que elegir: solo el botón de hoy */
.fecha-nav[data-vista="anios"] > :not(#ir-hoy) { display: none; }
.hist__barra .fecha-nav[data-vista="anios"] { width: auto; }
/* Récords */
.records { margin-top: 0.4rem; margin-bottom: 1.6rem; }
.records__grupo { margin: 1.1rem 0 0.45rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); }
.records__rejilla { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.record { background: var(--superficie); border-radius: 0.6rem; padding: 0.7rem 0.85rem 0.75rem; border-top: 3px solid var(--linea); box-shadow: 0 1px 2px rgba(30, 43, 51, 0.05); }
.record--calor { border-top-color: var(--calor); }
.record--frio { border-top-color: var(--frio); }
.record--agua { border-top-color: var(--lluvia); }
.record--seco { border-top-color: #A0702A; }
.record h4 { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--tinta); }
.record__que { margin: 0.05rem 0 0; font-size: 0.74rem; color: var(--tinta-suave); }
.record__v { margin: 0.3rem 0 0; font-family: var(--cifras); font-size: 1.7rem; font-weight: 600; line-height: 1.1; color: var(--tinta); }
.record__v small { font-size: 0.85rem; font-weight: 500; color: var(--tinta-suave); }
.record__v.calor { color: var(--calor); } .record__v.frio { color: var(--frio); } .record__v.agua { color: var(--lluvia); } .record__v.seco { color: #A0702A; }
.record__cuando { margin: 0.15rem 0 0; font-size: 0.86rem; }
.record a { color: var(--tinta); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--tinta-suave); }
.record a:hover { color: var(--azulejo); border-bottom-color: var(--azulejo); }
.record__mas { margin: 0.5rem 0 0; padding: 0.45rem 0 0 1.2rem; border-top: 1px solid var(--linea); font-size: 0.78rem; color: var(--tinta-suave); }
.record__mas li + li { margin-top: 0.15rem; }
.record__mas b { font-family: var(--cifras); font-weight: 600; color: var(--tinta); }
.record__mas a { font-weight: 500; color: var(--tinta-suave); }
.record__curso { font-size: 0.7rem; font-weight: 700; color: var(--azulejo); }
/* Lo cerrado para los visitantes: con candado (y la cifra, borrosa: es de mentira, la de verdad no llega) */
.record--cerrado { background: color-mix(in srgb, var(--superficie) 70%, var(--cal)); }
.record__v--oculto { color: var(--tinta-suave); filter: blur(6px); user-select: none; }
.record--cerrado .record__cuando, .record__mas--cerrado { color: var(--tinta-suave); font-size: 0.8rem; }
.record__mas--cerrado { list-style: none; padding-left: 0; }
.tarjeta--cerrada { background: color-mix(in srgb, var(--superficie) 70%, var(--cal)); }
.tarjeta--cerrada p { color: var(--tinta-suave); }
.cerrado { margin: 1rem 0; padding: 1rem 1.1rem; border-radius: 0.6rem; background: var(--superficie); border: 1px dashed var(--linea); text-align: center; }
.cerrado p { margin: 0.3rem auto 0; max-width: 40rem; color: var(--tinta-suave); font-size: 0.92rem; }
.cerrado__t { font-size: 1.02rem; color: var(--tinta) !important; }
.cerrado button { margin-top: 0.3rem; padding: 0.35rem 0.9rem; border-radius: 2rem; border: 1px dashed var(--linea); background: none; color: var(--tinta); font-weight: 700; }
.cerrado .ico, .record--cerrado .ico, .tarjeta--cerrada .ico, .record__mas--cerrado .ico { color: var(--azulejo); }
/* En el móvil, de dos en dos */
@media (max-width: 40rem) {
  .records__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .record { padding: 0.6rem 0.6rem 0.65rem; }
  .record h4 { font-size: 0.84rem; }
  .record__v { font-size: 1.4rem; }
  .record__cuando { font-size: 0.8rem; }
  .record__mas { padding-left: 1rem; font-size: 0.72rem; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .record--seco { border-top-color: #C9974F; } :root:not([data-theme="light"]) .record__v.seco { color: #C9974F; } }
:root[data-theme="dark"] .record--seco { border-top-color: #C9974F; }
:root[data-theme="dark"] .record__v.seco { color: #C9974F; }
.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; }
/* Panel → Visitas → Ahora mismo */
.vivo { background: var(--superficie); border-radius: 0.7rem; padding: 0.8rem 0.95rem; margin-top: 0.6rem; box-shadow: 0 0 0 1px var(--linea); }
.vivo:empty { display: none; }
.vivo__cab { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.vivo__cab h2 { margin: 0; font-size: 1.05rem; }
.vivo__cab small { color: var(--tinta-suave); font-size: 0.78rem; }
.vivo__punto { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--tinta-suave); flex: none; }
.vivo__punto--si { background: #2FA65A; box-shadow: 0 0 0 0 rgb(47 166 90 / 0.6); animation: vivo-late 2s ease-out infinite; }
@keyframes vivo-late { to { box-shadow: 0 0 0 0.55rem rgb(47 166 90 / 0); } }
@media (prefers-reduced-motion: reduce) { .vivo__punto--si { animation: none; } }
.vivo__n { margin: 0.45rem 0 0.2rem; }
.vivo__n b { font-family: var(--cifras); font-size: 1.9rem; vertical-align: -0.15rem; margin-right: 0.15rem; }
.vivo__n small { color: var(--tinta-suave); }
.vivo__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.35rem; font-size: 0.86rem; }
.vivo__chips > span:first-child { color: var(--tinta-suave); margin-right: 0.15rem; min-width: 6.5rem; }
.vivo__chip { background: color-mix(in srgb, var(--azulejo) 10%, var(--cal)); border-radius: 1rem; padding: 0.12rem 0.6rem; }
.vivo__lista { margin-top: 0.6rem; }
.vivo__lista summary { cursor: pointer; color: var(--azulejo); font-weight: 700; font-size: 0.88rem; }
.vivo__personas { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.vivo__personas li { padding: 0.4rem 0.6rem; border-radius: 0.45rem; background: color-mix(in srgb, var(--azulejo) 5%, var(--superficie)); box-shadow: 0 0 0 1px var(--linea); }
.vivo__personas li small { display: block; color: var(--tinta-suave); font-size: 0.8rem; margin-top: 0.1rem; }
.vivo__personas li.vivo__ida { opacity: 0.6; }
.vivo__hace { float: right; font-size: 0.78rem; color: var(--tinta-suave); }
.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; }
.ley i.ley-disc { width: 1.1rem; -webkit-mask: repeating-linear-gradient(90deg, #000 0 0.3rem, transparent 0.3rem 0.45rem); mask: repeating-linear-gradient(90deg, #000 0 0.3rem, transparent 0.3rem 0.45rem); }
.ley i.c-tmed-clima { height: 0.32rem; }
.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); }
/* Tablas largas (todos los años): se pegan debajo de la barra fija de arriba, así su cabecera siempre se ve */
.tabla-envoltura--fija { position: sticky; top: var(--alto-barra-hist, 4.2rem); max-height: calc(100vh - var(--alto-barra-hist, 4.2rem) - 0.8rem); z-index: 1; }
/* Todos los años: lista o cuadrícula */
.anios-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin: 1.6rem 0 0.6rem; }
.anios-cab h2 { margin: 0; }
.segmentos--mini button { padding: 0.25rem 0.8rem; font-size: 0.86rem; }
.anios-cuadricula-bloque > .segmentos { margin-bottom: 0.6rem; }
.anios-cuadricula { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.35rem; }
@media (max-width: 46rem) { .anios-cuadricula { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.anio-celda { display: grid; gap: 0.05rem; padding: 0.4rem 0.45rem 0.45rem; border-radius: 0.45rem; text-decoration: none; color: var(--tinta); min-width: 0;
  background: color-mix(in srgb, var(--c) var(--k), var(--superficie)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linea) 80%, transparent); }
.anio-celda:hover { box-shadow: inset 0 0 0 2px var(--azulejo); }
.anio-celda--actual { box-shadow: inset 0 0 0 2px var(--azulejo); }
.anio-celda--rec .anio-celda__a { font-style: italic; }
.anio-celda__a { font-size: 0.88rem; }
.anio-celda__rec { font-size: 0.6rem; font-style: italic; color: var(--tinta-suave); line-height: 1; }
.anio-celda__v { font-family: var(--cifras); font-size: 1rem; font-weight: 600; white-space: nowrap; }
.anio-celda__d { font-size: 0.72rem; min-height: 1.1em; white-space: nowrap; }
.anio-celda__fen { font-size: 0.72rem; white-space: nowrap; overflow: hidden; }
.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; }
.mapa--fijo { height: auto; background: none; overflow: visible; }
.mapa--fijo .mapa-lienzo--fijo { aspect-ratio: 5 / 4; }
.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; }
}
/* ══════════ Estación y AEMET al estilo de Weather Underground: «Ahora mismo», gráficas apiladas y animaciones ══════════ */
.ahora { margin-top: 0.4rem; }
.ahora__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; }
.ahora__cab h2 { margin: 0.9rem 0 0.6rem; }
.ahora__vivo { font-size: 0.88rem; color: var(--tinta-suave); display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ahora__vivo b { color: var(--tinta); }
.ahora__vivo i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #2FB463; box-shadow: 0 0 0 0 rgba(47, 180, 99, 0.6); animation: latido 2s ease-out infinite; flex: none; }
.ahora__vivo--parado i { background: var(--tinta-suave); animation: none; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(47, 180, 99, 0.55); } 70% { box-shadow: 0 0 0 0.55rem rgba(47, 180, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 180, 99, 0); } }
.ahora__rejilla { display: grid; gap: 0.7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dato {
  background: var(--superficie); border-radius: 0.9rem; padding: 0.75rem 0.85rem 0.8rem; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 43, 51, 0.06), 0 4px 14px rgba(30, 43, 51, 0.05); display: flex; flex-direction: column;
  animation: dato-entra 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.dato:nth-child(2) { animation-delay: 0.06s; } .dato:nth-child(3) { animation-delay: 0.12s; } .dato:nth-child(4) { animation-delay: 0.18s; }
.dato:nth-child(5) { animation-delay: 0.24s; } .dato:nth-child(6) { animation-delay: 0.3s; } .dato:nth-child(7) { animation-delay: 0.36s; }
@keyframes dato-entra { from { opacity: 0; transform: translateY(0.8rem) scale(0.98); } to { opacity: 1; transform: none; } }
.dato h3 { font-size: 0.75rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.2rem; }
.dato__pie { font-size: 0.85rem; text-align: center; line-height: 1.3; margin-top: auto; padding-top: 0.2rem; }
.dato__pie small { color: var(--tinta-suave); font-size: 0.78rem; }
.indicador { display: block; width: 100%; max-width: 8.6rem; margin: 0 auto; overflow: visible; }
.indicador text { font-family: var(--texto); text-anchor: middle; }
.indicador__v { font-family: var(--cifras) !important; font-size: 30px; font-weight: 600; fill: var(--tinta); }
.indicador__v--p { font-size: 22px; }
.indicador__u { font-size: 11px; fill: var(--tinta-suave); }

/* Temperatura: cifra grande, sensación, tendencia y la barra de la mínima a la máxima de hoy */
.dato--temp { grid-column: span 2; background: linear-gradient(140deg, color-mix(in srgb, var(--tc, var(--calor)) 17%, var(--superficie)) 0%, var(--superficie) 70%); }
.temp__valor { display: flex; align-items: flex-start; line-height: 0.95; margin: 0.15rem 0 0.25rem; }
.temp__valor span:first-child { font-family: var(--cifras); font-weight: 600; font-size: 4.2rem; color: color-mix(in srgb, var(--tc, var(--tinta)) 80%, var(--tinta)); transition: color 1s; letter-spacing: -0.01em; }
.temp__u { font-family: var(--cifras); font-size: 1.6rem; margin: 0.35rem 0 0 0.15rem; color: var(--tinta-suave); }
.temp__linea { font-size: 0.9rem; min-height: 1.2em; }
.temp__linea .calor { color: var(--calor); font-weight: 700; }
.temp__linea .frio { color: var(--frio); font-weight: 700; }
.rango { position: relative; height: 0.55rem; border-radius: 1rem; background: var(--linea); margin: 0.9rem 0.3rem 0.35rem; }
.rango__tramo { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 1rem; background: linear-gradient(90deg, var(--frio), var(--amarillo), var(--calor));
  transition: left 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rango__marca { position: absolute; top: 50%; left: 50%; width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--tinta); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: left 1.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.rango__textos { display: flex; justify-content: space-between; font-family: var(--cifras); font-size: 1.05rem; font-weight: 600; }
.rango__textos small { font-family: var(--texto); font-size: 0.75rem; font-weight: 400; color: var(--tinta-suave); }
.rango__textos .calor { color: var(--calor); } .rango__textos .frio { color: var(--frio); }

/* Viento: brújula con la flecha en el lado del que viene */
.brujula__aro { fill: none; stroke: var(--linea); stroke-width: 7; }
.brujula__marca { stroke: var(--tinta-suave); stroke-width: 1; opacity: 0.5; }
.brujula__marca--mayor { stroke-width: 2; opacity: 0.9; }
.brujula__letra { font-size: 12px; font-weight: 700; fill: var(--tinta-suave); }
.brujula__estela { fill: var(--azulejo); opacity: 0.22; }
.brujula__aguja { transform-origin: 70px 70px; transform-box: view-box; transition: transform 1.6s cubic-bezier(0.25, 1.35, 0.45, 1), opacity 0.6s; }
.brujula__aguja path { fill: var(--naranja); stroke: var(--superficie); stroke-width: 1.5; stroke-linejoin: round; }
.brujula__aguja--calma { opacity: 0.25; }
/* Humedad: anillo */
.anillo__pista { fill: none; stroke: var(--linea); stroke-width: 9; }
.anillo__valor { fill: none; stroke: var(--lluvia); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Presión: reloj de barómetro */
.reloj__pista { fill: none; stroke: var(--linea); stroke-width: 7; stroke-linecap: round; }
.reloj__baja { fill: none; stroke: var(--lluvia); stroke-width: 7; stroke-linecap: round; opacity: 0.55; }
.reloj__alta { fill: none; stroke: var(--amarillo); stroke-width: 7; stroke-linecap: round; opacity: 0.7; }
.reloj__marca { stroke: var(--tinta-suave); stroke-width: 1; opacity: 0.6; }
.reloj__num { font-size: 8.5px; fill: var(--tinta-suave); }
.reloj__aguja { transform-origin: 70px 70px; transform-box: view-box; transform: rotate(-135deg); transition: transform 1.8s cubic-bezier(0.25, 1.3, 0.45, 1); }
.reloj__aguja path, .reloj__aguja circle { fill: var(--tinta); }
/* Lluvia: vaso que se llena */
.vaso__fondo { fill: color-mix(in srgb, var(--lluvia) 7%, var(--superficie)); }
.vaso__borde { fill: none; stroke: var(--tinta-suave); stroke-width: 2; opacity: 0.6; }
.vaso__agua { transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vaso__ola { fill: var(--lluvia); opacity: 0.85; }
.dato--llueve .vaso__ola { animation: ola 2.4s linear infinite; }
@keyframes ola { from { transform: translateX(0); } to { transform: translateX(20px); } }
.vaso__raya { stroke: var(--tinta-suave); stroke-width: 1; opacity: 0.6; }
.vaso__num { font-size: 8.5px; fill: var(--tinta-suave); text-anchor: start !important; }
/* Sol: arco de la salida a la puesta */
.indicador--sol { max-width: 11rem; }
.sol__horizonte { stroke: var(--linea); stroke-width: 2; }
.sol__camino { fill: none; stroke: var(--linea); stroke-width: 2; stroke-dasharray: 3 4; }
.sol__hecho { fill: none; stroke: var(--amarillo); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; }
.sol__disco { fill: #F7C548; }
.sol__halo { fill: #F7C548; opacity: 0.25; animation: halo 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.25); opacity: 0.12; } }
.sol__astro--noche { opacity: 0; }
.sol__hora { font-size: 10px; fill: var(--tinta-suave); }
.sol__dato { text-align: center; font-size: 0.9rem; min-height: 1.2em; }
.sol__dato b { font-family: var(--cifras); font-size: 1.25rem; font-weight: 600; }
/* UV */
.uv__valor { display: flex; align-items: center; gap: 0.7rem; margin: 0.45rem 0 0.7rem; }
.uv__bola { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #3EA72D; color: #fff;
  font-family: var(--cifras); font-size: 2rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: background 1s; flex: none; }
.uv__nivel { font-weight: 700; font-size: 1.05rem; }
.uv__escala { position: relative; display: flex; height: 0.5rem; border-radius: 1rem; overflow: visible; }
.uv__escala i { display: block; height: 100%; }
.uv__escala i:first-child { border-radius: 1rem 0 0 1rem; } .uv__escala i:nth-child(5) { border-radius: 0 1rem 1rem 0; }
.uv__marca { position: absolute; top: -0.3rem; left: 0; width: 0.25rem; height: 1.1rem; margin-left: -0.125rem; border-radius: 0.2rem;
  background: var(--tinta); box-shadow: 0 0 0 2px var(--superficie); transition: left 1.3s cubic-bezier(0.25, 1.3, 0.45, 1); }
.dato--uv .dato__pie { text-align: left; color: var(--tinta-suave); padding-top: 0.6rem; }

@media (min-width: 48rem) {
  .ahora__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ahora[data-fuente="aemet"] .dato--sol { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .temp__valor span:first-child { font-size: 5rem; }
}

/* Resumen del día: tarjetas con entrada animada */
.resumen-cab { margin-top: 1.4rem !important; }
.tarjeta { border-top: 3px solid transparent; box-shadow: 0 1px 2px rgba(30, 43, 51, 0.05); transition: transform 0.2s, box-shadow 0.2s; }
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(30, 43, 51, 0.09); }
.tarjetas .tarjeta:nth-child(1) { border-top-color: var(--calor); }
.tarjetas .tarjeta:nth-child(2) { border-top-color: var(--lluvia); }
.tarjetas .tarjeta:nth-child(3) { border-top-color: var(--azulejo); }
.tarjetas .tarjeta:nth-child(4) { border-top-color: var(--encina); }
.tarjetas .tarjeta:nth-child(5) { border-top-color: var(--tinta-suave); }
.tarjetas .tarjeta:nth-child(6) { border-top-color: var(--amarillo); }
.tarjetas .tarjeta:nth-child(7) { border-top-color: var(--naranja); }
.hist--entra .tarjeta { animation: dato-entra 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hist--entra .tarjeta:nth-child(2) { animation-delay: 0.05s; } .hist--entra .tarjeta:nth-child(3) { animation-delay: 0.1s; }
.hist--entra .tarjeta:nth-child(4) { animation-delay: 0.15s; } .hist--entra .tarjeta:nth-child(5) { animation-delay: 0.2s; }
.hist--entra .tarjeta:nth-child(6) { animation-delay: 0.25s; } .hist--entra .tarjeta:nth-child(7) { animation-delay: 0.3s; }
.hist--entra .cal__dia { animation: dato-entra 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 18ms); }

/* Gráficas apiladas con un cursor común */
.panel-graficas { background: var(--superficie); border-radius: 0.9rem; padding: 0.4rem 0.75rem 0.6rem; box-shadow: 0 1px 2px rgba(30, 43, 51, 0.06), 0 4px 14px rgba(30, 43, 51, 0.05); }
.pg-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem;
  background: var(--superficie); padding: 0.45rem 0 0.35rem; border-bottom: 1px solid var(--linea); font-size: 0.88rem; }
.pg-cab__hora b { font-family: var(--cifras); font-size: 1.2rem; font-weight: 600; }
.pg-cab__ayuda { color: var(--tinta-suave); font-size: 0.78rem; }
.pg { padding-top: 0.55rem; }
.pg + .pg { border-top: 1px dashed var(--linea); }
.pg__ley { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; font-size: 0.9rem; }
.pg__ley b { margin-right: 0.2rem; }
.pg__ley .ley { color: var(--tinta-suave); }
.pg__ley .ley i { background: var(--c); height: 0.3rem; opacity: 1; }
.pg__ley output { font-family: var(--cifras); font-size: 1.02rem; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pg__svg { display: block; width: 100%; margin-top: 0.15rem; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.pg__svg .eje { font-size: 9.5px; fill: var(--tinta-suave); font-family: var(--texto); }
.pg__svg .rejilla { stroke: var(--linea); stroke-width: 1; }
.pg__vert { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 2 3; }
.pg__noche { fill: var(--tinta); opacity: 0.045; }
.pg__svg .linea { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pg__svg .linea--fina { stroke-width: 1.6; }
.pg__g0 { stop-color: var(--c); stop-opacity: 0.32; }
.pg__g1 { stop-color: var(--c); stop-opacity: 0.02; }
.pg__barra { fill: var(--c); opacity: 0.55; }
.pg__punto { fill: var(--c); opacity: 0.75; }
.pg__extremo { stroke: var(--superficie); stroke-width: 1.5; }
.pg__extremo.calor { fill: var(--calor); } .pg__extremo.frio { fill: var(--frio); }
.pg__extremo-t { font-family: var(--cifras); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; }
.pg__extremo-t.calor { fill: var(--calor); } .pg__extremo-t.frio { fill: var(--frio); }
.pg__cursor line { stroke: var(--tinta); stroke-width: 1; opacity: 0.55; }
.pg__cursor circle { fill: var(--c); stroke: var(--superficie); stroke-width: 2; }
.c-t { --c: var(--calor); } .c-td { --c: var(--encina); } .c-hr { --c: #2BA39A; } .c-viento { --c: var(--azulejo); } .c-racha { --c: var(--naranja); }
.c-dir { --c: var(--azulejo); } .c-acum { --c: var(--lluvia); } .c-ll { --c: var(--lluvia); } .c-p { --c: #7B6CB0; }
.c-sol { --c: #E8A20E; } .c-desp { --c: var(--tinta-suave); } .c-uv { --c: #B567A4; }
.pg__svg .linea.c-desp { stroke-dasharray: 4 4; stroke-width: 1.4; }
@media (prefers-color-scheme: dark) {
  .c-hr { --c: #4CC7BC; } .c-p { --c: #A797E0; } .c-sol { --c: #F2BC3A; } .c-uv { --c: #D58AC4; }
  .pg__noche { fill: #000; opacity: 0.18; }
}
/* Entrada: los datos se dibujan de izquierda a derecha, panel a panel */
.hist--entra .pg__datos { animation: revelar 1.5s cubic-bezier(0.25, 0.75, 0.3, 1) both; }
@keyframes revelar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Tabla: flecha del viento y temperatura con un tinte de color */
.flecha { width: 0.8em; height: 0.8em; vertical-align: -0.08em; margin-right: 0.25em; fill: var(--azulejo); }
.dir-cel { white-space: nowrap; }
.t-tinte { background: color-mix(in srgb, var(--tc, transparent) 13%, transparent); }
.hist .tabla tbody tr:nth-child(even) td:not(.t-tinte) { background: color-mix(in srgb, var(--tinta) 2.5%, var(--superficie)); }

@media (prefers-reduced-motion: reduce) {
  .dato, .hist--entra .tarjeta, .hist--entra .cal__dia, .hist--entra .pg__datos, .ahora__vivo i, .sol__halo, .dato--llueve .vaso__ola { animation: none !important; }
  .brujula__aguja, .reloj__aguja, .anillo__valor, .vaso__agua, .rango__tramo, .rango__marca, .uv__marca, .tarjeta { transition: none !important; }
}
.al-minuto { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4;
  padding: 0 0.35rem; border-radius: 1rem; background: color-mix(in srgb, #2FB463 18%, var(--superficie)); color: #1E7A45; vertical-align: 0.1em; }
@media (prefers-color-scheme: dark) { .al-minuto { color: #6FD39A; } }
.nw { white-space: nowrap; }
.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: var(--sobre-azulejo); }
.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; }
.cal__sin { align-self: end; font-size: 0.62rem; line-height: 1.1; color: var(--tinta-suave); opacity: 0.85; overflow-wrap: anywhere; }
.cal__dia--futuro { opacity: 0.45; }
.pie a { color: inherit; }
.form-acceso { max-width: 24rem; display: grid; gap: 0.6rem; margin-top: 1.2rem; }
/* Acceso educativo (estudiantes y profesorado) */
.acceso__chapa--edu { background: #2E7D5B; }
.educacion .bloque { max-width: 46rem; }
.edu-lista { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.edu-form { max-width: 40rem; margin-top: 0.7rem; }
.edu-form .boton { justify-self: start; }
.edu-form--codigo { max-width: 22rem; }
.edu-form--codigo input { font-family: var(--cifras); font-size: 1.4rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.edu-estado { margin-top: 1.2rem; padding: 0.9rem 1rem; border-radius: 0.6rem; background: var(--superficie); border-left: 0.3rem solid #2E7D5B; }
.edu-estado p + p { margin-top: 0.4rem; }
.edu-estado__ir { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.edu-estado__ir .boton { margin-top: 0.3rem; text-decoration: none; }
.cerrado__edu { font-size: 0.86rem; }
.edu-pendientes { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.edu-sol p { margin: 0; font-size: 0.9rem; color: var(--tinta); }
.edu-sol .nota { color: var(--tinta-suave); }
.cerrado__edu a, .acceso .acceso__edu { color: #2E7D5B; font-weight: 700; }
.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: var(--sobre-azulejo); 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; grid-template-columns: minmax(0, 1fr); }
.panel__dos > * { min-width: 0; }
.panel .nota code { overflow-wrap: anywhere; }
@media (min-width: 64rem) { .panel__dos { grid-template-columns: minmax(0, 1fr) minmax(0, 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, .ficha textarea { 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 textarea { font-variant-numeric: tabular-nums; resize: vertical; width: 100%; box-sizing: border-box; line-height: 1.5; }
.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: var(--sobre-azulejo); }
.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; }
/* Visitas: cambio respecto al periodo anterior, rango de las tablas, reparto en barras */
.delta { font-weight: 700; }
.delta--sube, .tarjeta .delta--sube { color: #2E7D32; } .delta--baja, .tarjeta .delta--baja { color: var(--rojo); } .delta--igual { color: var(--tinta-suave); }
.panel__barras rect.parcial { opacity: 0.4; }
.panel__barras .rejilla { stroke: var(--linea); stroke-width: 1; }
.pestanas { flex-wrap: wrap; }
.tabla th.txt, .tabla td.txt { text-align: left; }
.visitas__rango { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin: 2rem 0 0.2rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.visitas__rango label { font-weight: 700; font-size: 1.05rem; display: flex; align-items: baseline; gap: 0.5rem; }
.visitas__rango select { font: inherit; font-size: 0.95rem; padding: 0.35rem 0.5rem; border: 1px solid var(--linea); border-radius: 0.4rem; background: var(--superficie); color: var(--tinta); color-scheme: light dark; }
.visitas__tres { display: grid; gap: 0.6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.visitas__tres h3 { font-size: 0.8rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.4rem; }
.reparto { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.reparto li { position: relative; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0.55rem; border-radius: 0.35rem; background: var(--superficie); font-size: 0.88rem; overflow: hidden; }
.reparto li span, .reparto li b { position: relative; z-index: 1; }
.reparto li b { font-family: var(--cifras); font-weight: 600; }
.reparto li i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--azulejo) 16%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tarjeta .delta--sube { color: #7BC67E; } }
:root[data-theme="dark"] .tarjeta .delta--sube { color: #7BC67E; }

/* 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: var(--sobre-azulejo); }
.boton--mini { margin: 0; padding: 0.2rem 0.7rem; font-size: 0.8rem; }
.form-fen { max-width: 40rem; }
/* Panel → Fenómenos: editar una anotación, debajo de su fila */
tr.fen-edicion > td { background: color-mix(in srgb, var(--azulejo) 6%, var(--superficie)); padding: 0.6rem 0.8rem 0.9rem; }
.form-fen--editar { margin: 0; box-shadow: none; }
.fen-edicion__botones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.fen-botones { white-space: nowrap; }

/* 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.aviso-rec { margin: 0 0 1rem; }
/* El día comparado con otros años (como el «Summary» de Wunderground) */
.dia-clima { margin-top: 1.4rem; }
.dia-clima h2 { margin-bottom: 0.4rem; }
.tabla--dia-clima { font-size: 0.95rem; white-space: normal; }
.tabla--dia-clima th, .tabla--dia-clima td { white-space: normal; }
.tabla.tabla--dia-clima .cel-cuando { white-space: normal; }
@media (max-width: 30rem) { .tabla--dia-clima th, .tabla--dia-clima td { padding: 0.4rem 0.4rem; } .tabla--dia-clima td { font-size: 0.98rem; } }
.tabla--dia-clima tbody th { text-align: left; font-weight: 700; color: var(--tinta); }
.tabla--dia-clima td { font-family: var(--cifras); font-size: 1.05rem; }
.tabla--dia-clima td .cel-cuando { font-family: var(--texto); }
.tabla.tabla--dia-clima .cel-cuando.calor { color: var(--calor); font-weight: 600; }
.tabla.tabla--dia-clima .cel-cuando.frio { color: var(--frio); font-weight: 600; }
.chapa-record { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 1rem; background: var(--calor); color: #fff; font-family: var(--texto); font-size: 0.66rem; font-weight: 700; vertical-align: 0.15em; text-transform: uppercase; letter-spacing: 0.03em; }
.frio .chapa-record { background: var(--frio); }
.agua .chapa-record { background: var(--lluvia); }
/* Barra: de récord a récord, la franja de lo normal y la máxima y la mínima del día */
.dia-rango { position: relative; height: 4.6rem; margin: 1.6rem 1.4rem 0.9rem; }
.dia-rango__pista { position: absolute; top: 1.55rem; height: 0.35rem; border-radius: 1rem; background: var(--linea); }
/* Lo normal (1991-2020): una franja rayada con borde, más alta que la barra del día, para que se vea por encima y por debajo */
.dia-rango__normal { position: absolute; top: 0.95rem; height: 1.55rem; border-radius: 0.4rem;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--azulejo) 34%, transparent) 0 3px, color-mix(in srgb, var(--azulejo) 12%, transparent) 3px 7px);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--azulejo) 80%, transparent); }
.dia-rango__normal i { position: absolute; left: 50%; top: 1.25rem; transform: translateX(-50%); font-style: normal; font-size: 0.68rem; color: var(--tinta-suave); white-space: nowrap; }
.dia-rango__dia { position: absolute; top: 1.42rem; height: 0.6rem; border-radius: 1rem; background: linear-gradient(90deg, var(--frio), var(--calor)); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
.dia-rango__et { position: absolute; top: -0.25rem; font-family: var(--cifras); font-size: 1.05rem; white-space: nowrap; }
.dia-rango__et small { font-family: var(--texto); font-size: 0.66rem; font-weight: 600; }
/* La mínima acaba en su punto y la máxima empieza en el suyo: así no se pisan aunque el día tenga poca diferencia */
.dia-rango__et--min { color: var(--frio); transform: translateX(calc(-100% + 0.5rem)); }
.dia-rango__et--max { color: var(--calor); transform: translateX(-0.5rem); }
.dia-rango__rec { position: absolute; top: 2.75rem; transform: translateX(-0.4rem); font-size: 0.68rem; line-height: 1.2; color: var(--tinta-suave); text-align: left; white-space: nowrap; }
.dia-rango__rec b { color: var(--frio); font-family: var(--cifras); font-size: 0.78rem; }
.dia-rango__rec--max { transform: translateX(calc(-100% + 0.4rem)); text-align: right; }
.dia-rango__rec--max b { color: var(--calor); }
/* Qué es cada cosa de la barra */
.dia-rango-ley { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; list-style: none; margin: 0.9rem 0 0; padding: 0; font-size: 0.8rem; color: var(--tinta-suave); }
.dia-rango-ley li { display: flex; align-items: center; gap: 0.45rem; }
.dia-rango-ley i { flex: none; width: 1.7rem; }
.dia-rango-ley__dia { height: 0.6rem; border-radius: 1rem; background: linear-gradient(90deg, var(--frio), var(--calor)); }
.dia-rango-ley__normal { height: 0.95rem; border-radius: 0.3rem;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--azulejo) 34%, transparent) 0 3px, color-mix(in srgb, var(--azulejo) 12%, transparent) 3px 7px);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--azulejo) 80%, transparent); }
.dia-rango-ley__pista { height: 0.3rem; border-radius: 1rem; background: var(--linea); }
/* Por encima de lo normal, por debajo o en la media (por la temperatura media del día) */
.dia-veredicto { margin: 0.5rem 0 0; padding: 0.7rem 0.95rem; border-radius: 0.5rem; background: var(--superficie); border-left: 0.3rem solid var(--tinta-suave); }
.dia-veredicto b { display: block; font-size: 1.12rem; color: var(--tinta); }
.dia-veredicto span { display: block; margin-top: 0.1rem; font-size: 0.93rem; color: var(--tinta); }
.dia-veredicto small { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--tinta-suave); }
.dia-veredicto--calor { border-left-color: var(--calor); }
.dia-veredicto--calor b { color: var(--calor); }
.dia-veredicto--frio { border-left-color: var(--frio); }
.dia-veredicto--frio b { color: var(--frio); }
.tarjeta .en-media { font-weight: 600; color: var(--tinta); }
.tarjeta small .calor, .tarjeta small .frio { font-weight: 600; }
/* Años reconstruidos: en cursiva, con sus colores (rojo la máxima, azul la mínima y la lluvia) */
.tabla .fila-rec td { font-style: italic; }
/* El día (o la fecha) de un extremo, debajo del valor y en pequeño */
.tabla .cel-cuando { display: block; font-size: 0.7rem; font-weight: 400; font-style: normal; color: var(--tinta-suave); line-height: 1.2; margin-top: 0.05rem; white-space: nowrap; }
.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); }
}

/* Niveles de aviso (AEMET y 112): chapas de color */
.chapa-nivel { display: inline-block; border-radius: 2rem; padding: 0.1rem 0.6rem; font-size: 0.75rem; font-weight: 700; color: #1E2B33; background: #D9E2E8; white-space: nowrap; }
.chapa-nivel[data-nivel="amarillo"] { background: #F5C518; }
.chapa-nivel[data-nivel="naranja"] { background: #F08A24; color: #fff; }
.chapa-nivel[data-nivel="rojo"] { background: #D6322A; color: #fff; }
.form-aviso legend { font-weight: 700; padding: 0 0.3rem; }
.form-aviso textarea { width: 100%; font: inherit; padding: 0.5rem; border-radius: 0.4rem; border: 1px solid var(--linea); background: var(--cal); color: var(--tinta); }

/* ── Avisos oficiales (AEMET y 112) ── */
:root { --av-amarillo: #F5C518; --av-naranja: #F08A24; --av-rojo: #D6322A; --av-info: #5B7A99;
        --av-amarillo-f: #FFF8DB; --av-naranja-f: #FFEBDD; --av-rojo-f: #FBE1DF; --av-info-f: var(--superficie); }
@media (prefers-color-scheme: dark) {
  :root { --av-amarillo-f: #3A3416; --av-naranja-f: #3D2716; --av-rojo-f: #3D1A18; }
}
.menu a.menu__avisos[data-nivel]::after { content: ''; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; margin-left: 0.35em;
  background: var(--av-amarillo); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85); vertical-align: 0.1em; }
.menu a.menu__avisos[data-nivel="naranja"]::after { background: var(--av-naranja); }
.menu a.menu__avisos[data-nivel="rojo"]::after { background: var(--av-rojo); }
.menu a.menu__avisos[data-nivel="info"]::after { background: var(--av-info); }

.resumen-avisos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; max-width: 72rem; margin: 1rem auto 0; padding: 0.65rem 0.9rem;
  border-radius: 0.6rem; border-left: 0.35rem solid var(--av-amarillo); background: var(--av-amarillo-f); color: var(--tinta); text-decoration: none; font-size: 0.92rem; }
.resumen-avisos[data-nivel="naranja"] { border-color: var(--av-naranja); background: var(--av-naranja-f); }
.resumen-avisos[data-nivel="rojo"] { border-color: var(--av-rojo); background: var(--av-rojo-f); }
.resumen-avisos[data-nivel="info"] { border-color: var(--av-info); background: var(--superficie); }
.resumen-avisos__lista { display: grid; gap: 0.3rem; flex: 1 1 16rem; }
.resumen-avisos__fila { display: flex; align-items: flex-start; gap: 0.45rem; }
.resumen-avisos__fila > svg { margin-top: 0.12em; }
.resumen-avisos__cuando { color: var(--tinta-suave); }
.resumen-avisos__mas { color: var(--tinta-suave); padding-left: 1.6rem; }
.resumen-avisos__ver { margin-left: auto; font-weight: 700; color: var(--azulejo); white-space: nowrap; }
.resumen-avisos:hover .resumen-avisos__ver { text-decoration: underline; }
@media (max-width: 72rem) { .resumen-avisos { margin-left: 1rem; margin-right: 1rem; } }

.aviso-of__marca { width: 1.6rem; height: 1.6rem; flex: none; color: var(--av-amarillo); }
.resumen-avisos .aviso-of__marca { width: 1.15rem; height: 1.15rem; }
[data-nivel="naranja"] > .aviso-of__marca, [data-nivel="naranja"] .aviso-of__cab > .aviso-of__marca { color: var(--av-naranja); }
[data-nivel="rojo"] > .aviso-of__marca, [data-nivel="rojo"] .aviso-of__cab > .aviso-of__marca { color: var(--av-rojo); }
[data-nivel="info"] > .aviso-of__marca, [data-nivel="info"] .aviso-of__cab > .aviso-of__marca { color: var(--av-info); }

.avisos-of { display: grid; gap: 0.8rem; }
@media (min-width: 56rem) { .avisos-of { grid-template-columns: 1fr 1fr; } }
.aviso-of { background: var(--av-amarillo-f); border-left: 0.4rem solid var(--av-amarillo); border-radius: 0.6rem; padding: 0.8rem 1rem; }
.aviso-of[data-nivel="naranja"] { background: var(--av-naranja-f); border-color: var(--av-naranja); }
.aviso-of[data-nivel="rojo"] { background: var(--av-rojo-f); border-color: var(--av-rojo); }
.aviso-of[data-nivel="info"] { background: var(--superficie); border-color: var(--av-info); }
.aviso-of--nada { background: var(--superficie); border-color: var(--encina); }
.aviso-of__cab { display: flex; gap: 0.7rem; align-items: flex-start; }
.aviso-of h3 { margin: 0.1rem 0; font-size: 1.1rem; }
.aviso-of p { margin: 0.35rem 0 0; }
.aviso-of__fuente { font-size: 0.78rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 !important; }
.aviso-of__cuando { color: var(--tinta-suave); font-size: 0.92rem; }
.aviso-of__extra { font-size: 0.85rem; color: var(--tinta-suave); }
.aviso-of .enlace-mas { display: inline-block; margin-top: 0.5rem; }
.leyenda-avisos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.leyenda-avisos .chapa-nivel { min-width: 6.5rem; text-align: center; margin-right: 0.5rem; }
.chapa-nivel[data-nivel="info"] { background: var(--av-info); color: #fff; }

.evento__aviso { display: block; margin-top: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 0.4rem; font-size: 0.88rem; font-weight: 700;
  background: var(--av-amarillo-f); border-left: 0.3rem solid var(--av-amarillo); color: var(--tinta); text-decoration: none; }
.evento__aviso[data-nivel="naranja"] { background: var(--av-naranja-f); border-color: var(--av-naranja); }
.evento__aviso[data-nivel="rojo"] { background: var(--av-rojo-f); border-color: var(--av-rojo); }
.evento__aviso[data-nivel="info"] { background: var(--superficie); border-color: var(--av-info); }
.avisos-pag .tabla th, .avisos-pag .tabla td { text-align: left; }
#tab-avisos .tabla th, #tab-avisos .tabla td { text-align: left; }

/* ── Ajustes del móvil ── */
@media (max-width: 40rem) {
  /* Panel: las pestañas se desplazan de lado en vez de salirse de la pantalla */
  .panel .hist__barra { flex-wrap: nowrap; }
  .panel .segmentos { overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
  .panel .segmentos::-webkit-scrollbar { display: none; }
  .panel .segmentos button { white-space: nowrap; flex: none; padding: 0.35rem 0.8rem; }
  /* Tablas del panel: columnas con aire; la tabla se desplaza de lado */
  .panel .tabla { min-width: 34rem; }
  .panel .tabla td:first-child { min-width: 9rem; }
  /* Menú: cinco secciones caben en dos filas parejas */
  .menu { justify-content: flex-start; }
  /* Filtros de fechas especiales y pestañas: no se pegan al borde */
  .filtros { gap: 0.4rem; }
  .evento__fecha { min-width: 2.6rem; }
}

/* Historial de avisos agrupado por días */
.chapa-nivel--mini { font-size: 0.68rem; padding: 0.02rem 0.45rem; vertical-align: 0.08em; }
.hist-av__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.hist-av__lista small { color: var(--tinta-suave); }
.hist-av__dia { white-space: nowrap; font-weight: 700; }
.avisos-pag .tabla td { vertical-align: top; white-space: normal; }
.hist-av__tramos { list-style: none; margin: 0.15rem 0 0.2rem; padding: 0 0 0 0.6rem; display: grid; gap: 0.15rem; border-left: 2px solid var(--linea); }
.hist-av__dato { font-size: 0.85rem; }

/* ── Noche: estrellas y Luna (solo en la portada, con el cielo de noche) ── */
.cielo > :not(.cielo__noche):not(.cielo__pueblo):not(.cielo__efecto):not(.cielo__bruma) { position: relative; z-index: 1; }
.cielo__noche { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cielo__estrellas { position: absolute; inset: 0; }
.cielo__noche[data-cielo="nubes"] .cielo__estrellas { opacity: 0.25; }
.cielo__noche[data-cielo="nubes"] .cielo__luna { opacity: 0.45; filter: blur(0.6px); }
/* --arriba = dónde empieza el texto de la cabecera, debajo del menú (lo mide app.js: en móviles estrechos el menú
   ocupa dos filas y el sol o la luna tienen que bajar con él para no tapar «Avisos») */
.cielo__luna { position: absolute; top: calc(var(--arriba, 3.9rem) + 0.7rem); right: max(1.2rem, calc(50% - 36rem)); width: 4.2rem; height: 4.2rem; }
@media (min-width: 64rem) { .cielo__luna { top: 3.2rem; width: 5rem; height: 5rem; } }
.parpadea { animation: parpadeo 4s ease-in-out infinite; }
@keyframes parpadeo { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .parpadea { animation: none; } }

.agenda-lista { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; display: grid; gap: 0.4rem; font-size: 0.9rem; }
.agenda-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem; border-bottom: 1px dashed var(--linea); padding-bottom: 0.35rem; }

/* Recibe los avisos */
.form-alertas { max-width: 36rem; }
.form-alertas .opciones { border: 0; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.45rem; }
.form-alertas legend { font-weight: 700; margin-bottom: 0.3rem; }
.casilla, .ficha .casilla { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: var(--tinta); cursor: pointer; }
/* La casilla a la izquierda del texto (las reglas de .ficha label/input la ponían en su propia fila, centrada) */
.casilla input, .ficha .casilla input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0.12rem 0 0; padding: 0; accent-color: var(--azulejo); }
.casilla small { color: var(--tinta-suave); font-size: 0.85em; }
.aviso-spam { margin: 0.6rem 0 0.9rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--amarillo) 18%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--amarillo) 55%, var(--linea)); font-size: 0.93rem; line-height: 1.45; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alertas__botones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.msg { margin-top: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: var(--superficie); border-left: 0.3rem solid var(--encina); }
.msg[data-tipo="mal"] { border-color: var(--naranja); }
.cta-alertas { display: block; margin: 1.2rem 0 0; padding: 0.9rem 1rem; border-radius: 0.6rem; background: var(--azulejo); color: var(--sobre-azulejo); text-decoration: none; }
.cta-alertas b { display: block; font-size: 1.05rem; }
.cta-alertas span { font-size: 0.9rem; opacity: 0.9; }
.cta-alertas:hover { filter: brightness(1.08); }
.texto-legal { max-width: 46rem; }
.texto-legal h2 { font-size: 1.1rem; margin: 1.4rem 0 0.4rem; }
.texto-legal p, .texto-legal li { line-height: 1.6; }
.texto-legal ul { padding-left: 1.2rem; }

/* ── Efectos del tiempo de ahora (efectos.js): lluvia, nieve, rayos, niebla y escarcha ── */
.cielo__detalle { font-size: 0.82rem; opacity: 0.88; max-width: 15rem; line-height: 1.25; }
.cielo__efecto { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cielo__lienzo { position: absolute; inset: 0; display: block; }
.cielo__noche[data-cielo="cubierto"] .cielo__estrellas { opacity: 0; }
.cielo__noche[data-cielo="cubierto"] .cielo__luna { opacity: 0.12; filter: blur(2px); }
/* Destello del relámpago: se ilumina todo el cielo un instante */
.cielo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 20%, rgb(235 240 255 / 0.85), rgb(200 210 255 / 0.25) 60%, transparent 85%);
  opacity: 0;
}
.cielo--rayo::before { animation: relampago 0.55s ease-out; }
@keyframes relampago { 0% { opacity: 0; } 8% { opacity: 0.9; } 20% { opacity: 0.15; } 30% { opacity: 0.7; } 100% { opacity: 0; } }
/* Niebla: bandas blanquecinas que se mueven despacio y tapan en parte el pueblo */
.cielo__bruma {
  position: absolute; left: 0; right: 0; bottom: 0; height: 75%; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
          mask: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
}
.cielo__bruma::before, .cielo__bruma::after {
  content: ''; position: absolute; inset: 0 -50% 0 -50%;
  background:
    radial-gradient(ellipse 30% 22% at 20% 70%, rgb(255 255 255 / 0.55), transparent 70%),
    radial-gradient(ellipse 34% 20% at 55% 82%, rgb(255 255 255 / 0.5), transparent 70%),
    radial-gradient(ellipse 28% 18% at 85% 66%, rgb(255 255 255 / 0.45), transparent 70%),
    linear-gradient(to top, rgb(255 255 255 / 0.38), rgb(255 255 255 / 0.1));
  animation: bruma 70s linear infinite alternate;
}
.cielo__bruma::after { opacity: 0.7; animation-duration: 110s; animation-direction: alternate-reverse; transform: scaleX(-1); }
@keyframes bruma { from { translate: -12% 0; } to { translate: 12% 0; } }
.cielo[data-noche="1"] .cielo__bruma { opacity: 0.45; }
@media (prefers-color-scheme: dark) { .cielo__bruma { opacity: 0.6; } }
/* Escarcha en las esquinas, como en un cristal helado */
.cielo__escarcha > div { position: absolute; top: 0; width: min(38vw, 15rem); }
.cielo__escarcha-izq { left: 0; }
.cielo__escarcha-der { right: 0; transform: scaleX(-1); }
.cielo__escarcha > div::before {
  content: ''; position: absolute; inset: 0 0 -20% 0;
  background: radial-gradient(ellipse at 0 0, rgb(230 242 255 / 0.5), rgb(230 242 255 / 0.12) 45%, transparent 70%);
}
.cielo__escarcha svg { position: relative; display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .cielo--rayo::before, .cielo__bruma::before, .cielo__bruma::after { animation: none; } }

/* ── Calendario propio (calendario.js) ── */
.cal-oculto { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; }
.cal-boton {
  display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; cursor: pointer; white-space: nowrap;
  color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: 2rem;
  height: 2.3rem; padding: 0 0.85rem 0 0.7rem; font-variant-numeric: tabular-nums;
}
.fecha-nav .cal-boton { font-weight: 400; padding: 0 0.85rem 0 0.7rem; }
.cal-boton svg { width: 1.1rem; height: 1.1rem; color: var(--azulejo); flex: none; }
.cal-boton:hover { border-color: var(--azulejo); }
.cal-boton[aria-expanded="true"] { border-color: var(--azulejo); box-shadow: 0 0 0 3px rgb(29 79 145 / 0.15); }
.ficha .cal-boton { width: 100%; height: auto; border-radius: 0.4rem; justify-content: flex-start; background: var(--cal); font-size: 0.95rem; padding: 0.4rem 0.5rem; }
.sf {
  position: fixed; z-index: 1000; width: 18.5rem; max-width: calc(100vw - 16px);
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); border-radius: 0.9rem;
  box-shadow: 0 12px 32px rgb(20 35 50 / 0.18), 0 2px 6px rgb(20 35 50 / 0.08); padding: 0.7rem 0.7rem 0.6rem;
  font-family: var(--texto); animation: cal-entra 0.14s ease-out;
}
@keyframes cal-entra { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sf { animation: none; } }
.sf button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sf button:disabled { cursor: default; }
.sf__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; margin-bottom: 0.45rem; }
.sf__flecha { width: 2.1rem; height: 2.1rem; border-radius: 50%; font-size: 1.35rem !important; line-height: 1; font-weight: 700 !important; color: var(--azulejo) !important; }
.sf__flecha:hover:not(:disabled) { background: rgb(29 79 145 / 0.08) !important; }
.sf__flecha:disabled { opacity: 0.25; }
.sf__titulo { font-weight: 700 !important; font-size: 1.02rem; padding: 0.25rem 0.6rem !important; border-radius: 2rem; }
.sf__titulo:first-letter { text-transform: uppercase; }
.sf__titulo span { font-size: 0.7em; margin-left: 0.35rem; color: var(--tinta-suave); }
button.sf__titulo:hover { background: rgb(29 79 145 / 0.08) !important; }
.sf__titulo--fijo { font-family: var(--cifras); font-size: 1.15rem; }
.sf__rejilla { display: grid; gap: 0.15rem; }
.sf__rejilla--dias { grid-template-columns: repeat(7, 1fr); }
.sf__rejilla--meses { grid-template-columns: repeat(3, 1fr); gap: 0.35rem; padding: 0.2rem 0 0.3rem; }
.sf__sem { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--tinta-suave); padding: 0.15rem 0 0.25rem; letter-spacing: 0.04em; }
.sf__dia, .sf__mes {
  position: relative; height: 2.25rem; border-radius: 50%; font-family: var(--cifras) !important; font-size: 1.05rem !important;
  font-variant-numeric: tabular-nums; transition: background 0.12s;
}
.sf__dia { aspect-ratio: 1; height: auto; width: 100%; max-width: 2.4rem; justify-self: center; }
.sf__mes { border-radius: 2rem; height: 2.5rem; font-family: var(--texto) !important; font-size: 0.95rem !important; }
.sf__dia:hover:not(:disabled), .sf__mes:hover:not(:disabled) { background: rgb(29 79 145 / 0.09) !important; }
.sf__dia:disabled, .sf__mes:disabled { color: var(--tinta-suave) !important; opacity: 0.38; }
.sf__dia--hoy { box-shadow: inset 0 0 0 1.5px var(--azulejo); font-weight: 600; }
.sf [aria-pressed="true"] { background: var(--azulejo) !important; color: var(--sobre-azulejo) !important; font-weight: 600; box-shadow: none; }
@media (prefers-color-scheme: dark) { .sf [aria-pressed="true"] { color: #10202E !important; } }
.sf__dia:focus-visible, .sf__mes:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 1px; }
.sf__pie { display: flex; justify-content: space-between; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--linea); }
.sf__hoy, .sf__cerrar { font-weight: 700 !important; font-size: 0.9rem; padding: 0.3rem 0.7rem !important; border-radius: 2rem; color: var(--azulejo) !important; }
.sf__cerrar { color: var(--tinta-suave) !important; font-weight: 400 !important; }
.sf__hoy:hover:not(:disabled), .sf__cerrar:hover { background: rgb(29 79 145 / 0.08) !important; }
.sf__hoy:disabled { opacity: 0.35; }

/* ── Sol, Luna y nubes de la cabecera (un solo astro, sin icono repetido) ── */
.cielo__noche[data-noche="0"] .cielo__estrellas { display: none; }
.cielo__astro { overflow: visible; }
#nubes-hueco { position: absolute; inset: 0; }
.cielo__nube { position: absolute; height: auto; animation: nube 40s ease-in-out infinite alternate; }
/* La primera nube tapa en parte el sol o la luna (mismo sitio que .cielo__luna) */
.cielo__nube--astro { top: calc(var(--arriba, 3.9rem) + 2.4rem); right: calc(max(1.2rem, calc(50% - 36rem)) - 0.6rem); width: 4.6rem; }
.cielo__nube--bajo { top: calc(var(--arriba, 3.9rem) + 1.2rem); right: calc(max(1.2rem, calc(50% - 36rem)) + 4.4rem); width: 3.3rem; }
.cielo__cirros { width: 7rem; right: calc(max(1.2rem, calc(50% - 36rem)) - 1.2rem); }
.cielo__nube--izq { display: none; top: calc(var(--arriba, 3.9rem) + 0.5rem); right: calc(max(1.2rem, calc(50% - 36rem)) + 5.5rem); width: 4rem; }
@media (min-width: 64rem) {
  .cielo__nube--astro { top: 5.2rem; }
  .cielo__nube--bajo { top: 8.4rem; right: calc(max(1.2rem, calc(50% - 36rem)) - 1rem); }
  .cielo__nube--izq { display: block; top: 3.6rem; }
}
@keyframes nube { from { translate: -0.8rem 0; } to { translate: 0.8rem 0; } }
@media (min-width: 64rem) { .cielo__nube { scale: 1.3; } }
@media (prefers-reduced-motion: reduce) { .cielo__nube { animation: none; } }
.cielo__resumen { gap: 0.1rem; }
#texto-ahora { font-size: 1.15rem; font-weight: 700; }

/* ── Avisos: detalles plegados en las tarjetas e historial por días con titulares ── */
.aviso-of__mas { margin-top: 0.45rem; }
.aviso-of__mas > summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; color: var(--azulejo); width: max-content; }
.aviso-of__mas[open] > summary { margin-bottom: 0.35rem; }
.aviso-of__mas > p { margin-top: 0.35rem; }
.hist-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.hist-av { --c: var(--av-amarillo); background: var(--superficie); border: 1px solid var(--linea); border-left: 0.3rem solid var(--c); border-radius: 0.7rem; }
.hist-av[data-nivel="naranja"] { --c: var(--av-naranja); }
.hist-av[data-nivel="rojo"] { --c: var(--av-rojo); }
.hist-av[data-nivel="info"] { --c: var(--av-info); }
.hist-av > summary { list-style: none; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 1rem; gap: 0.7rem; align-items: center; padding: 0.55rem 0.75rem; cursor: pointer; }
.hist-av > summary::-webkit-details-marker { display: none; }
.hist-av__fecha { display: grid; justify-items: center; line-height: 1.05; }
.hist-av__fecha b { font-family: var(--cifras); font-size: 1.45rem; font-weight: 600; }
.hist-av__fecha small { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); }
.hist-av__titulares { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.hist-av__titulares .chapa-nivel { margin-right: 0.25rem; vertical-align: 0.05em; }
.hist-av__abrir::before { content: '›'; display: block; font-size: 1.4rem; line-height: 1; color: var(--tinta-suave); transition: transform 0.15s; }
.hist-av[open] .hist-av__abrir::before { transform: rotate(90deg); }
.hist-av__detalle { display: grid; gap: 0.7rem; padding: 0.65rem 0.85rem 0.8rem; border-top: 1px dashed var(--linea); font-size: 0.88rem; }
.hist-av__grupo p + p { margin-top: 0.2rem; }
.hist-av__grupo ul { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.hist-av__hora { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-av__texto { color: var(--tinta-suave); }

/* ── Fechas: tarjeta compacta para el móvil ── */
.evento__normal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-top: 0.55rem; padding-top: 0.5rem;
  border-top: 1px dashed var(--linea); font-size: 0.88rem; color: var(--tinta-suave); }
.evento__normal b { color: var(--tinta); font-family: var(--cifras); font-size: 1.02rem; font-weight: 600; }
.evento__cmp { font-size: 0.78rem; font-weight: 700; color: var(--tinta); background: var(--cal); border: 1px solid var(--linea); border-radius: 2rem; padding: 0.05rem 0.55rem; }
.veredicto__ojo { font-size: 0.72rem; font-weight: 700; color: var(--tinta-suave); border: 1px solid var(--linea); border-radius: 2rem; padding: 0.02rem 0.45rem; margin-left: 0.2rem; white-space: nowrap; vertical-align: 0.1em; }
/* Datos estimados (AEMET no los tiene: se estiman con otra estación cercana) o reconstruidos (antes de 2007): la palabra,
   en una chapita, con la explicación al pasar por encima */
.estimado { display: inline-block; padding: 0.02rem 0.4rem; border-radius: 1rem; background: color-mix(in srgb, var(--tinta-suave) 13%, transparent);
  color: var(--tinta-suave); font-family: var(--texto); font-size: 0.66rem; font-weight: 600; font-style: normal; line-height: 1.35;
  letter-spacing: 0; text-transform: none; vertical-align: 0.15em; white-space: nowrap; cursor: help; }
.tabla td:not(:first-child) .estimado { display: table; margin: 0.12rem 0 0 auto; vertical-align: baseline; }
.tarjeta b + .estimado { margin-right: 0.15rem; }
.cal__dia--estimado { outline: 1px dashed color-mix(in srgb, var(--tinta-suave) 60%, transparent); outline-offset: -3px; }
.cal__est { margin-left: 0.2rem; font-size: 0.56rem; font-weight: 600; color: var(--tinta-suave); vertical-align: 0.1em; }
.cal__est-l { display: none; }
@media (min-width: 40rem) { .cal__est-l { display: inline; } .cal__est-c { display: none; } }
.evento__desc { margin-top: 0.3rem; font-size: 0.86rem; color: var(--tinta-suave); }
.evento__desc a { font-weight: 700; color: var(--azulejo); text-decoration: none; }
.evento__desc a:hover { text-decoration: underline; }
.evento__mas { margin-top: 0.45rem; font-size: 0.86rem; color: var(--tinta-suave); }
.evento__mas > summary { cursor: pointer; font-weight: 700; color: var(--azulejo); width: max-content; font-size: 0.86rem; }
.evento__mas > p, .evento__mas > a { margin-top: 0.3rem; display: block; }
.evento__horas { margin-top: 0.4rem; }

/* ── Apoya el proyecto ── */
.apoya-portada { display: flex; align-items: center; gap: 0.7rem; max-width: 40rem; margin: 1.5rem auto 0; padding: 0.8rem 1rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 0.8rem; color: var(--tinta); text-decoration: none; font-size: 0.92rem; }
.apoya-portada[hidden] { display: none; }
.apoya-portada > span:first-child { font-size: 1.5rem; }
.apoya-portada > span:last-child { margin-left: auto; color: var(--azulejo); font-weight: 700; }
.apoya-portada:hover { border-color: var(--azulejo); }
@media (max-width: 40rem) { .apoya-portada { margin: 1.5rem 1rem 0; } }
@media (min-width: 64rem) { .apoya-portada { max-width: 72rem; } }
.apoya .bloque p + p { margin-top: 0.6rem; }
.apoya__boton { margin-top: 1.1rem !important; }
.apoya__lista { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }

/* ── Radar animado ── */
.radar__marco { position: relative; }
.radar-ctrl { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.radar-ctrl button { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie);
  color: var(--tinta); font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; display: grid; place-items: center; padding: 0; }
.radar-ctrl .radar-ctrl__play { background: var(--azulejo); border-color: var(--azulejo); color: var(--sobre-azulejo); font-size: 0.95rem; }
.radar-ctrl input[type="range"] { flex: 1; min-width: 0; accent-color: var(--azulejo); height: 2.4rem; }
.radar-ctrl output { flex: none; min-width: 5.6rem; text-align: right; font-family: var(--cifras); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.radar__jerez { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 0.68rem; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; line-height: 1; }
.radar__jerez i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #E0245E, 0 0 4px #000; order: -1; }

.cielo__radar { display: inline-block; margin-top: 0.45rem; padding: 0.3rem 0.75rem; border-radius: 2rem; background: rgb(255 255 255 / 0.18);
  border: 1px solid rgb(255 255 255 / 0.35); color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.cielo__radar[hidden] { display: none; }

/* ── Radar y mapas ── */
.mapas__tabs { margin: 1rem 0 0.9rem; }
.mapas__panel .pestanas { margin-top: 0.2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.chips button { font: inherit; font-size: 0.88rem; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta);
  border-radius: 2rem; padding: 0.3rem 0.8rem; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--azulejo); border-color: var(--azulejo); color: var(--sobre-azulejo); }
.mapas__marco iframe { display: block; width: 100%; height: min(75vh, 34rem); border: 0; border-radius: 0.6rem; background: var(--superficie); }
.mapas__mapa { height: min(70vh, 32rem); border-radius: 0.6rem; overflow: hidden; background: #0B1220; isolation: isolate; }
.mapas .nota { margin-top: 0.5rem; }
.mapas .radar { max-width: 34rem; }
.leaflet-marker-icon.sat-punto { display: flex; align-items: center; gap: 3px; white-space: nowrap; font: 700 11px/1 var(--texto); color: #fff;
  text-shadow: 0 0 3px #000, 0 0 2px #000; background: none; border: 0; }
.sat-punto i { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px #000; }
/* Jerez como en el radar: punto con aro y el nombre debajo */
.leaflet-marker-icon.sat-punto--jerez { flex-direction: column; gap: 2px; translate: -50% -6px; font-size: 12px; }
.sat-punto--jerez i { width: 10px; height: 10px; box-shadow: 0 0 0 2px #E0245E, 0 0 4px #000; }

.fechas__ventana { margin-top: 1rem; text-align: center; }

.cielo__unidad { font-size: 0.5em; vertical-align: top; position: relative; top: 0.08em; margin-left: 0.03em; letter-spacing: 0; }

/* ── Incendios (pestaña de «Mapas» y línea de la portada) ── */
.fuego { padding: 0.9rem 1rem; border: 1px solid var(--linea); border-radius: 0.8rem; background: var(--superficie); }
.fuego p { margin: 0; }
.fuego__cuando { font-size: 0.85rem; color: var(--tinta-suave); }
.fuego__nivel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-family: var(--cifras); font-size: 2rem; font-weight: 600; line-height: 1.15; margin: 0.15rem 0 0.25rem !important; }
.fuego__fwi { font-size: 1rem; color: var(--tinta-suave); font-weight: 600; }
.fuego__punto { display: inline-block; flex: none; width: 0.75em; height: 0.75em; border-radius: 50%; margin-right: 0.35em; vertical-align: baseline; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15); }
.fuego__nivel .fuego__punto { width: 0.55em; height: 0.55em; margin-right: 0; align-self: center; }
.fuego__que { font-size: 0.95rem; }
.fuego__nada, .fuego__cargando { color: var(--tinta-suave); }
.fuego__epoca { margin: 0.6rem 0 0; padding: 0.55rem 0.8rem; border-radius: 0.6rem; background: var(--superficie); border: 1px solid var(--linea); font-size: 0.92rem; }
.fuego__epoca--activa { border-color: #F08A24; background: rgb(240 138 36 / 0.1); }
#panel-incendios h2 { font-size: 1.1rem; margin: 1.3rem 0 0.5rem; }
.fuego__barras { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; align-items: end; height: 6.5rem; }
.fuego__barra { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; }
.fuego__barra i { display: block; border-radius: 3px 3px 0 0; min-height: 3px; }
.fuego__barra--sin i { height: 3px; background: var(--linea); }
.fuego__barra span { text-align: center; font-size: 0.7rem; color: var(--tinta-suave); margin-top: 2px; font-variant-numeric: tabular-nums; min-height: 2.2em; line-height: 1.1; }
.fuego__barra span small { display: block; font-size: 0.62rem; font-weight: 700; text-transform: lowercase; }
.fuego__rango { font-size: 0.8rem; font-weight: 400; color: var(--tinta-suave); margin-left: 0.3rem; }
.fuego__mapa { height: min(60vh, 26rem); background: var(--superficie); }
.fuego__aemet { margin: 0; }
.fuego__aemet img { display: block; width: 100%; max-width: 40rem; height: auto; border-radius: 0.6rem; background: #fff; }
.fuego__aemet figcaption { font-size: 0.82rem; color: var(--tinta-suave); margin-top: 0.3rem; }
.fuego__112 { margin: 1.2rem 0 0; font-weight: 600; }
.fuego__112 a { color: inherit; }
.mapas__tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mapas__tabs::-webkit-scrollbar { display: none; }
.mapas__tabs button { white-space: nowrap; flex: none; }
@media (max-width: 420px) { .mapas__tabs button { padding: 0.35rem 0.7rem; } }
.fuego-linea { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; margin-top: 0.6rem; font-size: 0.95rem; color: var(--tinta); text-decoration: none; }
.fuego-linea[hidden] { display: none; }
.fuego-linea__fwi { color: var(--tinta-suave); font-size: 0.85rem; }
.fuego-linea:hover b { text-decoration: underline; }
.cielo__radar--fuego { background: rgb(214 50 42 / 0.55); border-color: rgb(255 190 150 / 0.6); }
.leaflet-marker-icon.sat-punto--claro { color: #12191E; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
.sat-punto--claro i { background: #fff; }

/* ── «Cómo fue otros años» (fechas especiales) ── */
.fechas__vista { margin: 1rem 0 0.4rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fechas__vista button { white-space: nowrap; }
.fiestas__intro { margin-top: 0.6rem; }
.records__aviso { margin: 0.4rem 0 0.9rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem; font-size: 0.9rem; line-height: 1.45;
  background: color-mix(in srgb, var(--azulejo) 10%, var(--superficie)); border-left: 0.3rem solid var(--azulejo); }
.records__aviso a { color: var(--azulejo); font-weight: 700; }
/* Portada: inversión térmica en «En las pedanías» */
.inversion { margin: 0.2rem 0 0.8rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem; font-size: 0.9rem; line-height: 1.45;
  background: linear-gradient(90deg, color-mix(in srgb, var(--frio) 22%, var(--superficie)), color-mix(in srgb, var(--calor) 18%, var(--superficie))); }
.inversion p + p { margin-top: 0.3rem; color: var(--tinta-suave); }
.inversion__tit { font-size: 1rem; }
/* Portada: «Hoy conviene…» (tender la ropa, salir a pasear) */
.indices { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.indice { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.1rem 0.7rem; align-items: center; padding: 0.7rem 0.85rem; border-radius: 0.6rem;
  background: var(--superficie); border-left: 0.3rem solid var(--c, var(--linea)); }
.indice[data-nivel="bien"] { --c: #3E9B3A; } .indice[data-nivel="regular"] { --c: #E0A800; } .indice[data-nivel="mal"] { --c: #D7261E; }
.indice__ico { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.indice__ico svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.indice b { font-size: 0.98rem; line-height: 1.25; }
/* Episodios para recordar */
.episodios__lista { display: grid; gap: 1rem; margin-top: 0.8rem; }
.ep { background: var(--superficie); border-radius: 0.7rem; padding: 1rem 1.1rem; border-left: 0.35rem solid var(--lluvia); scroll-margin-top: 1rem; }
.ep h2 { font-size: 1.3rem; line-height: 1.2; }
.ep__cuando { color: var(--tinta-suave); font-size: 0.9rem; margin-top: 0.1rem; }
.ep__texto { margin-top: 0.6rem; display: grid; gap: 0.45rem; line-height: 1.5; }
.ep__fuentes { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 0.8rem; }
.ep__quien { font-weight: 700; font-size: 0.85rem; color: var(--tinta-suave); }
.ep__cifras ul { list-style: none; padding: 0; margin: 0.3rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem 0.8rem; }
.ep__cifras li { display: grid; }
.ep__cifras b { font-family: var(--cifras); font-size: 1.35rem; line-height: 1.1; }
.ep__cifras b small { font-family: var(--texto); font-size: 0.75rem; font-weight: 600; }
.ep__cifras span { font-size: 0.78rem; color: var(--tinta-suave); }
.ep .agua { color: var(--lluvia); } .ep .calor { color: var(--calor); } .ep .frio { color: var(--frio); }
.ep__avisos { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.3rem; font-size: 0.9rem; }
.ep__fen { margin-top: 0.5rem; font-size: 0.9rem; color: var(--tinta-suave); }
.ep__dias { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.88rem; border-top: 1px dashed var(--linea); padding-top: 0.6rem; }
.ep__dias a { font-weight: 700; color: var(--azulejo); }
.fb__he-acciones { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin-left: 0.4rem; vertical-align: middle; }
.tabla--izq th, .tabla--izq td { text-align: left; white-space: normal; }
.tabla--izq td:first-child { white-space: nowrap; }
.widget-vista { display: block; width: 100%; max-width: 420px; height: 215px; border: 0; border-radius: 12px; margin-top: 0.9rem; }
.widget-texto { width: 100%; font: 0.82rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0.6rem; border-radius: 0.5rem; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--tinta); resize: vertical; margin: 0.4rem 0 0.6rem; }
.indice p { font-size: 0.86rem; color: var(--tinta-suave); line-height: 1.35; }
.inversion small { color: var(--tinta-suave); }
#otros .eventos.fiestas { margin-top: 0.9rem; }
.fiesta--grupo { padding: 1rem 1.05rem 1.05rem; scroll-margin-top: 1rem; }
.fiesta--grupo > header h3 { font-size: 1.28rem; }
.fiesta__titular--grupo { margin: 0.45rem 0 0.1rem; font-size: 1rem; }
/* Un botón por día o acto de la fiesta: se ven todos sin bajar; el elegido, en azul */
.fiesta__dias { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0 0.15rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--linea); }
.fiesta__dias button { border: 1px solid var(--linea); background: transparent; color: var(--tinta); padding: 0.3rem 0.75rem; border-radius: 2rem;
  font: inherit; font-size: 0.88rem; line-height: 1.25; cursor: pointer; min-height: 2.1rem; }
.fiesta__dias button:hover { border-color: var(--azulejo); }
.fiesta__dias button[aria-pressed="true"] { background: var(--azulejo); border-color: var(--azulejo); color: var(--sobre-azulejo); font-weight: 700; }
.fiesta__cab-dia { margin-top: 0.6rem; }
.fiesta__cab-dia h4 { font-size: 1.05rem; line-height: 1.25; margin: 0 0 0.05rem; }
.fiesta { background: var(--superficie); border-radius: 0.7rem; padding: 0.9rem 1rem; border-left: 0.35rem solid var(--lluvia); min-width: 0; }
.fiesta h3 { font-size: 1.08rem; line-height: 1.25; margin: 0 0 0.1rem; }
.fiesta__regla { font-size: 0.82rem; color: var(--tinta-suave); }
.fiesta__titular { font-size: 1.05rem; font-weight: 700; margin-top: 0.55rem; }
.fiesta__titular span { font-weight: 400; color: var(--tinta-suave); }
.fiesta__tira { list-style: none; display: flex; flex-wrap: wrap; gap: 3px; margin: 0.5rem 0 0.3rem; padding: 0; }
.fiesta__anio { min-width: 2.7rem; padding: 0 0.25rem; height: 1.6rem; border-radius: 0.3rem; display: grid; place-items: center; font-size: 0.74rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #fff; }
.fiesta__anio--seco { background: #E7C46A; color: #5B4613; }
.fiesta__anio--gotas { background: #9CC6EA; color: #123A6E; }
.fiesta__anio--lluvia { background: #2F78BD; }
.fiesta__anio--nieve { background: #FFFFFF; color: #2F78BD; box-shadow: inset 0 0 0 2px #9CC6EA; }
.fiesta__tira-cab { font-size: 0.75rem; font-weight: 700; color: var(--tinta-suave); margin: 0.45rem 0 0; }
.fiesta__tira-cab span { font-weight: 400; }
.fiesta__tira--rec { gap: 2px; margin-top: 0.25rem; }
.fiesta__tira--rec .fiesta__anio { min-width: 0; width: 1.45rem; height: 1.3rem; padding: 0; border-radius: 0.2rem; font-size: 0.64rem; font-family: var(--cifras); }
.fiesta__tabla tr.fila-rec td { font-style: italic; }
.fiesta__datos { list-style: none; padding: 0; margin: 0.35rem 0 0; display: grid; gap: 0.2rem; font-size: 0.9rem; }
.fiesta__desde { font-size: 0.78rem; color: var(--tinta-suave); margin-top: 0.3rem; }
.fiesta__tabla { margin-top: 0.6rem; border-top: 1px dashed var(--linea); padding-top: 0.5rem; }
.fiesta__tabla summary { cursor: pointer; font-weight: 700; color: var(--azulejo); }
.fiesta__tabla table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.fiesta__tabla th { text-align: left; font-size: 0.75rem; color: var(--tinta-suave); font-weight: 600; padding: 0.2rem 0.3rem; }
.fiesta__tabla td { padding: 0.25rem 0.3rem; border-top: 1px solid var(--linea); white-space: nowrap; }
.fiesta__tabla td small { color: var(--tinta-suave); }
.fiesta__tabla td.lluvia { color: var(--lluvia); font-weight: 700; }
.fiesta__mas td { white-space: normal; color: var(--tinta-suave); font-size: 0.85rem; }
p.fiesta__mas { margin: 0.6rem 0 0; color: var(--tinta-suave); font-size: 0.85rem; }
/* «Año por año» en cuadritos, por décadas */
.fa-ley { margin: 0.4rem 0 0; font-size: 0.76rem; color: var(--tinta-suave); }
.fa-dec { margin: 0.6rem 0 0.25rem; font-size: 0.74rem; font-weight: 700; color: var(--tinta-suave); }
.fa-rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; grid-template-columns: repeat(auto-fill, minmax(7.3rem, 1fr)); }
.fa { display: grid; gap: 0; padding: 0.22rem 0.4rem 0.25rem; border-radius: 0.4rem; background: var(--cal); border-left: 0.3rem solid #E7C46A; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fa--gotas { border-left-color: #9CC6EA; }
.fa--lluvia { border-left-color: #2F78BD; }
.fa--nieve { border-left-color: #9CC6EA; box-shadow: inset 0 0 0 1px #9CC6EA; }
.fa__cab b { font-size: 0.86rem; }
.fa__cab small { font-size: 0.7rem; color: var(--tinta-suave); }
.fa__t { font-family: var(--cifras); font-size: 0.8rem; white-space: nowrap; }
.fa__t i { font-style: normal; font-weight: 600; }
.fa__t .calor { color: var(--calor); } .fa__t .frio { color: var(--frio); }
.fa__ll { font-family: var(--texto); font-size: 0.7rem; color: var(--tinta-suave); }
.fa--lluvia .fa__ll, .fa--nieve .fa__ll { color: var(--lluvia); font-weight: 700; }
.fa__acto { font-size: 0.7rem; color: var(--tinta-suave); }
.fiesta__mas .suscribirse { display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.6rem; border: 1px dashed var(--linea); border-radius: 2rem; font-weight: 700; }
.fiesta .tabla-ancha { overflow-x: auto; }

/* ── Aire, gripe y terremotos (portada y «Entorno») ── */
.entorno-lista { list-style: none; margin: 0; padding: 0; }
.entorno-lista li + li { border-top: 1px solid var(--linea); }
.entorno-lista a { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; color: var(--tinta); text-decoration: none; }
.entorno-lista a:hover .ent__que { text-decoration: underline; }
.ent__que { display: flex; flex-direction: column; font-weight: 600; min-width: 0; }
.ent__que small { font-weight: 400; color: var(--tinta-suave); font-size: 0.82rem; }
.ent__chip { flex: none; display: inline-block; min-width: 6.5rem; text-align: center; padding: 0.22rem 0.6rem; border-radius: 0.35rem;
  font-family: var(--cifras); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.25; }
.ent--destacado { background: var(--av-naranja-f); margin: 0 -0.6rem; padding: 0 0.6rem; border-radius: 0.5rem; }
.entorno { max-width: 52rem; }
.entorno__ir a { border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); padding: 0.35rem 0.9rem; border-radius: 2rem; text-decoration: none; }
.entorno__ir a:hover { border-color: var(--azulejo); color: var(--azulejo); }
.entorno .bloque { scroll-margin-top: 1rem; }
.entorno h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.entorno h3 small { font-weight: 400; color: var(--tinta-suave); }
.entorno__portada { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.entorno__portada > div { flex: 1 1 14rem; min-width: 0; }
.entorno__portada p { margin: 0.15rem 0; }
.entorno__consejo { font-size: 1.05rem; }
.ent__chip--grande { font-size: 1.35rem; padding: 0.55rem 1rem; min-width: 9rem; border-radius: 0.5rem; }
.ent__chip--peq { font-size: 0.85rem; min-width: 0; padding: 0.15rem 0.5rem; }
.entorno__calima { margin-top: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: var(--av-amarillo-f); border-left: 0.3rem solid var(--av-amarillo); }
.entorno__dias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.entorno__dias li { display: flex; align-items: center; gap: 0.4rem; }
.entorno__tabla { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.92rem; }
.entorno__tabla th, .entorno__tabla td { text-align: left; padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.entorno__tabla th[scope="row"] { font-weight: 600; }
.entorno__tabla small { font-weight: 400; color: var(--tinta-suave); }
.entorno__tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entorno-lista--plana { margin-top: 0.8rem; }
.ent__fila { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; }
.entorno__sube { color: var(--rojo); font-weight: 600; }
.entorno__baja { color: var(--encina); font-weight: 600; }
.entorno__barras { margin: 1rem 0 0; }
.entorno__barras svg { width: 100%; height: 5rem; display: block; background: linear-gradient(var(--linea), var(--linea)) bottom / 100% 1px no-repeat; }
.entorno__barras figcaption { font-size: 0.8rem; color: var(--tinta-suave); margin-top: 0.3rem; }
.sismos { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.sismo { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0; border-top: 1px solid var(--linea); }
.sismo__mag { min-width: 3.4rem; font-size: 1.25rem; padding: 0.35rem 0.4rem; }
.sismo__datos { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.92rem; }
.sismo__datos span { color: var(--tinta-suave); }
.sismo__datos b { color: var(--tinta); }
.sismo__datos a { font-size: 0.88rem; }
.sismo__datos .sismo__sentido { color: var(--tinta); font-weight: 600; }
.sismo__datos .sismo__sentido--aqui { color: var(--calor); font-weight: 700; }
.sismo__datos .sismo__sentido--no { color: var(--tinta-suave); font-weight: 400; font-style: italic; }

.leyenda { margin: 0.9rem 0 0.2rem; font-size: 0.9rem; }
.leyenda summary { cursor: pointer; color: var(--azulejo); font-weight: 600; }
.leyenda ul, .leyendas__panel ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.leyenda li, .leyendas__panel li { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr; gap: 0.6rem; align-items: center; }
.leyenda li .ent__chip, .leyendas__panel li .ent__chip { text-align: center; }
.leyenda li > span:last-child, .leyendas__panel li > span:last-child { color: var(--tinta-suave); }
/* Las leyendas de colores, alineadas: todas las chapas del mismo ancho en una columna y los textos en otra */
.leyenda ul:not(.consejos), .leyendas__panel ul:not(.consejos) { grid-template-columns: 8.4rem minmax(0, 1fr); column-gap: 0.8rem; row-gap: 0.65rem; align-items: center; }
.leyenda ul:not(.consejos) > li, .leyendas__panel ul:not(.consejos) > li { display: contents; }
.leyenda ul:not(.consejos) .ent__chip, .leyendas__panel ul:not(.consejos) .ent__chip { width: 100%; box-sizing: border-box; white-space: normal; line-height: 1.2; padding: 0.3rem 0.4rem; }
@media (max-width: 30rem) { .leyenda ul:not(.consejos), .leyendas__panel ul:not(.consejos) { grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: 0.65rem; } }

.fiestas__leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--tinta-suave); }
.fiestas__leyenda li { display: flex; align-items: center; gap: 0.35rem; }
.fiestas__leyenda .fiesta__anio { min-width: 0; width: 1rem; height: 1rem; padding: 0; }
.fiestas__leyenda--tira { margin: 0.35rem 0 0.2rem; gap: 0.2rem 0.8rem; font-size: 0.74rem; }
.fiestas__leyenda--tira .fiesta__anio { width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; }

.entorno .tabla-ancha { overflow-x: auto; }
.cal-polen { border-collapse: separate; border-spacing: 2px; font-size: 0.82rem; width: 100%; table-layout: auto; }
.cal-polen th[scope="row"] { text-align: left; font-weight: 500; padding-right: 0.4rem; line-height: 1.15; }
@media (max-width: 30rem) { .cal-polen th[scope="row"] { font-size: 0.78rem; white-space: nowrap; } }
.cal-polen thead th { font-weight: 600; color: var(--tinta-suave); text-align: center; font-size: 0.75rem; }
.cal-polen td { height: 1.15rem; border-radius: 3px; background: var(--linea); opacity: 0.55; min-width: 0.9rem; }
.cal-polen td.cal-polen__c1, .cal-polen__leyenda .cal-polen__c1 { background: #f0c341; opacity: 1; }
.cal-polen td.cal-polen__c2, .cal-polen__leyenda .cal-polen__c2 { background: #e06e1c; opacity: 1; }
.cal-polen td.cal-polen__hoy.cal-polen__c0 { opacity: 0.9; }
.cal-polen thead th.cal-polen__hoy, .cal-polen__mes { background: var(--azulejo); color: var(--sobre-azulejo); border-radius: 0.3rem; }
.cal-polen__mes { display: inline-block; padding: 0 0.3rem; margin-left: 0.5rem; font-size: 0.75rem; }
.cal-polen__leyenda { font-size: 0.82rem; color: var(--tinta-suave); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }
.cal-polen__leyenda span { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; margin-left: 0.5rem; }
.cal-polen__leyenda span:first-child { margin-left: 0; }
.leyenda ul.consejos { list-style: disc; padding-left: 1.2rem; display: block; }
.leyenda ul.consejos li { display: list-item; color: var(--tinta); margin: 0.3rem 0; }

.entorno__hist { margin-top: 1rem; }
.entorno__hist summary { cursor: pointer; font-weight: 700; color: var(--azulejo); }
.entorno__tabla--hist { margin-top: 0.5rem; }
.entorno__tabla--hist td small, .entorno__tabla--hist th small { display: block; font-size: 0.75rem; }
.entorno__tabla--hist { font-size: 0.86rem; }
.entorno__tabla--hist thead th { white-space: normal; font-size: 0.78rem; line-height: 1.2; vertical-align: bottom; color: var(--tinta-suave); }
.entorno__tabla--hist .num { white-space: normal; }
.entorno__tabla--hist .ent__chip { font-size: 0.72rem; white-space: normal; line-height: 1.15; }
.entorno__tabla--hist th[scope="row"] { white-space: nowrap; }
.entorno__tabla--hist th[scope="row"] small { white-space: normal; }
.tabla tfoot small.pie-tabla { display: block; font-size: 0.7rem; font-weight: 400; color: var(--tinta-suave); }
/* Temperatura de cada hora con su máxima y mínima en pequeño debajo */
/* La temperatura de la hora, bien visible; la máxima y la mínima, discretas debajo */
.tabla td.t-cel { font-family: var(--cifras); font-size: 1.12rem; font-weight: 700; color: var(--tinta); line-height: 1.15; }
.tabla .t-ext { display: block; margin-top: 0.15rem; font-family: var(--texto); font-size: 0.68rem; font-weight: 400; color: var(--tinta-suave); opacity: 0.85; letter-spacing: 0.01em; }
.tabla .t-ext > span { white-space: nowrap; }
.tabla .t-ext .calor, .tabla .t-ext .frio { font-weight: 700; opacity: 1; }
.tabla tfoot td.t-cel { font-size: 1.12rem; }
.tabla tfoot .t-ext { font-size: 0.78rem; }

/* ── Compartir esta página (botón junto al título; en la app instalada no hay barra de direcciones) ── */
.compartir { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 1.9rem; height: 1.9rem; margin-left: 0.55rem; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / 0.16); border: 1px solid rgb(255 255 255 / 0.4); color: #fff; position: relative; z-index: 1; }
.compartir svg { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.compartir:hover, .compartir:focus-visible { background: rgb(255 255 255 / 0.3); }
.pagina__titulo .compartir { width: 2.1rem; height: 2.1rem; margin-left: 0.6rem; vertical-align: 0.15em; }
.compartir-aviso { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  width: min(30rem, calc(100% - 2rem)); padding: 0.7rem 0.9rem; border-radius: 0.8rem; background: #1E2B33; color: #fff;
  font-size: 0.92rem; box-shadow: 0 6px 24px rgb(0 0 0 / 0.3); display: grid; gap: 0.45rem; }
.compartir-aviso[hidden] { display: none; }
.compartir-aviso input { font: inherit; font-size: 0.85rem; width: 100%; padding: 0.35rem 0.5rem; border-radius: 0.4rem;
  border: 1px solid rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.1); color: #fff; }

/* ── 112 Extremadura: sin colores de nivel (van por situaciones operativas); bandera de Extremadura y «112» ── */
.bandera-ext { display: inline-block; flex: none; width: 1.2em; height: 0.8em; border-radius: 2px; vertical-align: -0.05em;
  background: linear-gradient(#00873E 0 33.4%, #FFFFFF 33.4% 66.6%, #111111 66.6%); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18); }
.chapa-112 { display: inline-flex; align-items: center; gap: 0.3em; border-radius: 2rem; padding: 0.05rem 0.5rem 0.05rem 0.35rem; font-size: 0.72rem;
  font-weight: 700; white-space: nowrap; vertical-align: 0.08em; color: var(--tinta); background: var(--superficie); border: 1px solid #00873E; }
/* Símbolos de la web (iconos.js; en vez de emojis): línea fina, del tamaño del texto, con el color de cada fenómeno */
.ico { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.ico--tormenta { color: #6E52C2; }
.ico--granizo { color: #2B8FB0; }
.ico--nieve { color: #3F86CF; }
.ico--helada { color: #2A9BB8; }
.ico--tornado { color: #66717B; }
.ico--niebla { color: #7F8A93; }
.ico--lluvia { color: var(--lluvia); }
.ico--fuego { color: #E06E1C; }
.ico--rayo { color: #D89A00; }
.ico--candado { color: var(--tinta-suave); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico--tormenta { color: #A68FEA; }
  :root:not([data-theme="light"]) .ico--granizo { color: #6CC3E0; }
  :root:not([data-theme="light"]) .ico--nieve { color: #8CBDF0; }
  :root:not([data-theme="light"]) .ico--helada { color: #7FD0E6; }
  :root:not([data-theme="light"]) .ico--tornado, :root:not([data-theme="light"]) .ico--niebla { color: #AAB4BC; }
}
:root[data-theme="dark"] .ico--tormenta { color: #A68FEA; }
:root[data-theme="dark"] .ico--granizo { color: #6CC3E0; }
:root[data-theme="dark"] .ico--nieve { color: #8CBDF0; }
:root[data-theme="dark"] .ico--helada { color: #7FD0E6; }
:root[data-theme="dark"] .ico--tornado, :root[data-theme="dark"] .ico--niebla { color: #AAB4BC; }
/* Sirena: icono propio de la web para el 112 (no es un logotipo oficial) */
.sirena-112 { display: inline-block; flex: none; width: 1.05em; height: 1.05em; color: #00873E; vertical-align: -0.15em; }
.sirena-112--blanca { color: #fff; margin-right: 0.15em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sirena-112:not(.sirena-112--blanca) { color: #3FC477; } }
:root[data-theme="dark"] .sirena-112:not(.sirena-112--blanca) { color: #3FC477; }
.aviso-of__marca--112 b { display: inline-flex; align-items: center; gap: 0.1em; }
.leyenda-avisos .chapa-112 { min-width: 6.5rem; justify-content: center; margin-right: 0.5rem; font-size: 0.75rem; }
.aviso-of__marca--112 { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; width: auto; height: auto; color: var(--tinta); }
.aviso-of__marca--112 .bandera-ext { width: 1.6rem; height: 1.05rem; }
.aviso-of__marca--112 b { font-size: 0.7rem; line-height: 1; }
.resumen-avisos .aviso-of__marca--112 { width: auto; height: auto; flex-direction: row; gap: 0.25rem; }
.resumen-avisos .aviso-of__marca--112 .bandera-ext { width: 1.15rem; height: 0.78rem; }
.resumen-avisos .aviso-of__marca--112 b { font-size: 0.75rem; color: inherit; }
.aviso-of[data-nivel="112"] { background: var(--superficie); border-color: #00873E; }
.hist-av[data-nivel="112"] { --c: #00873E; }

/* ── Por modelos ── */
.mod-aviso { padding: 0.8rem 1rem; border-radius: 0.7rem; background: var(--superficie); border: 1px solid var(--linea); }
.mod-acierto th[scope="row"] b, .mod-acierto td b { display: block; }
.mod-acierto small, .mod-tabla small { display: block; color: var(--tinta-suave); font-size: 0.78rem; font-weight: 400; }
.mod-acierto td, .mod-acierto th { vertical-align: middle; text-align: left; }
.mod-acierto .mod-puesto { font-family: var(--cifras); font-size: 1.3rem; font-weight: 600; color: var(--tinta-suave); text-align: center; width: 2rem; }
.mod-acierto .mod-primero .mod-puesto { color: var(--azulejo); }
.mod-barra { display: block; height: 0.35rem; width: 7rem; max-width: 100%; border-radius: 1rem; margin-bottom: 0.25rem;
  background: linear-gradient(90deg, var(--naranja) calc(var(--v) * 100%), var(--linea) 0); }
.mod-barra--bien { background: linear-gradient(90deg, var(--encina) calc(var(--v) * 100%), var(--linea) 0); }
.modelos__marco { border: 1px solid var(--linea); border-radius: 0.7rem; background: var(--superficie); }
.mod-tabla { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; min-width: 100%; }
.mod-tabla th, .mod-tabla td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--linea); text-align: center; white-space: nowrap; }
.mod-tabla thead th { position: sticky; top: 0; background: var(--superficie); font-weight: 700; z-index: 1; }
.mod-tabla .mod-fija { position: sticky; left: 0; z-index: 2; background: var(--superficie); text-align: left; min-width: 7.5rem; max-width: 9.5rem;
  white-space: normal; box-shadow: 1px 0 0 var(--linea); }
.mod-tabla thead .mod-fija { z-index: 3; }
.mod-tabla .mod-fija b { font-size: 0.86rem; }
.mod-tabla td { min-width: 4.2rem; }
.mod-tabla--horas td { min-width: 3.3rem; }
.mod-ico { display: block; width: 2rem; height: 2rem; margin: 0 auto; }
.mod-tabla--horas .mod-ico { width: 1.7rem; height: 1.7rem; }
.mod-temp { display: block; font-family: var(--cifras); font-size: 0.95rem; color: var(--tinta-suave); }
.mod-temp b { color: var(--tinta); font-size: 1.05rem; }
.mod-lluvia { display: block; font-size: 0.78rem; color: var(--lluvia); font-weight: 700; min-height: 1.1em; }
.mod-lluvia .gota { width: 0.7rem; height: 0.7rem; vertical-align: -0.05em; margin-right: 0.1rem; }
.mod-lluvia--nada { color: var(--linea); font-weight: 400; }
.mod-vacio { color: var(--linea); }
.mod-num { display: inline-block; min-width: 1.25rem; margin-right: 0.3rem; padding: 0 0.2rem; border-radius: 0.3rem; font-size: 0.72rem; font-weight: 700;
  text-align: center; background: var(--cal); color: var(--tinta-suave); vertical-align: 0.1em; }
.mod-comb th, .mod-comb td { background: color-mix(in srgb, var(--azulejo) 9%, var(--superficie)); }
.mod-comb .mod-fija { background: color-mix(in srgb, var(--azulejo) 9%, var(--superficie)); }
.mod-dia { font: inherit; font-weight: 700; color: var(--azulejo); background: none; border: 0; padding: 0.15rem 0.3rem; border-radius: 0.4rem; cursor: pointer; }
.mod-dia--activo { background: var(--azulejo); color: var(--sobre-azulejo); }
.mod-tabla tbody td[data-dia] { cursor: pointer; }
.mod-bloqueo { margin: 0.6rem 0 0; padding: 0.7rem 0.9rem; border-radius: 0.7rem; background: var(--superficie); border: 1px dashed var(--linea); color: var(--tinta-suave); font-size: 0.9rem; }
.mod-bloqueo .suscribirse { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.6rem; border: 1px dashed var(--linea); border-radius: 2rem; font-weight: 700; }
.mod-ranking { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 0.7rem; background: var(--superficie); }
.mod-rk { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 11rem 11rem; gap: 0.2rem 0.8rem; align-items: center; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--linea); }
.mod-rk:last-child { border-bottom: 0; }
.mod-rk__n { font-family: var(--cifras); font-size: 1.35rem; font-weight: 600; color: var(--tinta-suave); text-align: center; }
.mod-rk--primero .mod-rk__n { color: var(--azulejo); }
.mod-rk__m b, .mod-rk__m small { display: block; }
.mod-rk small { color: var(--tinta-suave); font-size: 0.78rem; }
.mod-rk__v > small:first-child { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 40rem) {
  .mod-rk { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "n m m" "n t l"; }
  .mod-rk__n { grid-area: n; }
  .mod-rk__m { grid-area: m; }
  .mod-rk__v:nth-of-type(3) { grid-area: t; }
  .mod-rk__v:nth-of-type(4) { grid-area: l; }
}
#dias-horas { margin-bottom: 0.6rem; }
.modelos .tabla-ancha { overflow-x: auto; }

/* ── Panel → Facebook: publicaciones para revisar ── */
.fbs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); }
.fb { display: grid; gap: 0.5rem; padding: 0.9rem; border: 1px solid var(--linea); border-radius: 0.8rem; background: var(--superficie); min-width: 0; }
.fb__cab { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.fb__img { width: 100%; height: auto; border-radius: 0.5rem; border: 1px solid var(--linea); display: block; }
.fb__img--historia { max-width: 320px; margin-top: 0.5rem; }
.fb__texto { display: grid; gap: 0.2rem; font-size: 0.8rem; color: var(--tinta-suave); }
.fb__texto textarea { font: inherit; font-size: 0.92rem; line-height: 1.45; padding: 0.5rem; border: 1px solid var(--linea); border-radius: 0.4rem;
  background: var(--cal); color: var(--tinta); width: 100%; box-sizing: border-box; resize: vertical; color-scheme: light dark; }
.fb__botones { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fb__botones .boton { margin-top: 0; text-decoration: none; display: inline-block; }
.fb .aviso { margin: 0; }
.fb__avisar .boton { margin-right: 0.3rem; }
.chapa-nivel[data-nivel="112"] { background: #00873E; color: #fff; }

/* Gripe semana a semana (Entorno): barras con su valor, fechas debajo y leyenda de colores */
.gripe-barras { margin: 1rem 0 0; max-width: 42rem; }
.gripe-barras__cols, .gripe-barras__fechas { display: flex; gap: 0.35rem; }
.gripe-barras__cols { align-items: flex-end; height: 8rem; border-bottom: 1px solid var(--tinta-suave); padding-top: 1.1rem; }
.gb { flex: 1 1 0; min-width: 0; max-width: 5rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.gb__v { font-family: var(--cifras); font-size: 0.8rem; font-weight: 600; color: var(--tinta); margin-bottom: 0.15rem; white-space: nowrap; }
.gb__b { width: 100%; border-radius: 0.25rem 0.25rem 0 0; min-height: 2px; }
.gripe-barras__fechas span { flex: 1 1 0; min-width: 0; max-width: 5rem; text-align: center; font-size: 0.72rem; color: var(--tinta-suave); white-space: nowrap; overflow: visible; margin-top: 0.25rem; }
.gb-leyenda { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.6rem; font-size: 0.78rem; color: var(--tinta); }
.gb-leyenda span { display: inline-flex; align-items: center; gap: 0.3rem; }
.gb-leyenda i { width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; display: inline-block; }
.gb-leyenda .gb-leyenda--no { opacity: 0.45; }
.gripe-barras figcaption { font-size: 0.8rem; color: var(--tinta-suave); margin-top: 0.4rem; }

/* «Por modelos», visitantes: los días con suscripción, a la derecha de «Hoy» (columna con candado) */
.mod-bloq-th { color: var(--tinta-suave); font-weight: 600; white-space: nowrap; }
.mod-tabla tbody td.mod-bloq, .mod-tabla .mod-comb td.mod-bloq { vertical-align: top; text-align: center; width: 9.5rem; min-width: 8.5rem; padding: 0.8rem 0.6rem;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--linea) 55%, transparent) 0 5px, transparent 5px 13px), var(--superficie);
  border-left: 1px dashed var(--linea); white-space: normal; cursor: default; }
.mod-bloq__dentro { display: grid; gap: 0.35rem; justify-items: center; padding: 0.8rem 0.5rem; border-radius: 0.7rem;
  background: var(--superficie); border: 1px dashed var(--linea); color: var(--tinta-suave); font-size: 0.88rem; line-height: 1.3; }
.mod-bloq__dentro b { color: var(--tinta); }
.mod-bloq__candado { font-size: 1.6rem; line-height: 1; }
.mod-bloq .suscribirse { margin-top: 0.3rem; padding: 0.15rem 0.6rem; border: 1px dashed var(--linea); border-radius: 1rem; font-weight: 700; color: var(--tinta); white-space: normal; }
.mod-bloq-th { white-space: normal; min-width: 8.5rem; }
@media (min-width: 700px) {
  .mod-tabla tbody td.mod-bloq, .mod-tabla .mod-comb td.mod-bloq { width: 15rem; }
  .mod-bloq__dentro { position: sticky; top: 4.5rem; }
}
/* Desplegables («¿Qué significa cada color?», «Otras temporadas», «Detalles»…): que se vea que se pueden pulsar.
   Un botón con borde y una flecha que gira al abrirse; el texto que va debajo (fuente de los datos) queda aparte. */
.leyenda > summary, .entorno__hist > summary, .fiesta__tabla > summary, .evento__mas > summary, .evento__detalle > summary, .aviso-of__mas > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; width: max-content; max-width: 100%; cursor: pointer;
  padding: 0.32rem 0.85rem 0.32rem 0.75rem; border: 1px solid color-mix(in srgb, var(--azulejo) 40%, transparent); border-radius: 2rem;
  background: color-mix(in srgb, var(--azulejo) 8%, var(--superficie)); color: var(--azulejo); font-weight: 700; font-size: 0.88rem; line-height: 1.3;
  -webkit-user-select: none; user-select: none; }
.leyenda > summary::-webkit-details-marker, .entorno__hist > summary::-webkit-details-marker, .fiesta__tabla > summary::-webkit-details-marker,
.evento__mas > summary::-webkit-details-marker, .evento__detalle > summary::-webkit-details-marker, .aviso-of__mas > summary::-webkit-details-marker { display: none; }
.leyenda > summary::before, .entorno__hist > summary::before, .fiesta__tabla > summary::before, .evento__mas > summary::before,
.evento__detalle > summary::before, .aviso-of__mas > summary::before {
  content: ''; flex: none; width: 0.42rem; height: 0.42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s; margin-right: 0.1rem; }
.leyenda[open] > summary::before, .entorno__hist[open] > summary::before, .fiesta__tabla[open] > summary::before, .evento__mas[open] > summary::before,
.evento__detalle[open] > summary::before, .aviso-of__mas[open] > summary::before { transform: rotate(45deg) translate(-0.1rem, -0.05rem); }
.leyenda > summary:hover, .entorno__hist > summary:hover, .fiesta__tabla > summary:hover, .evento__mas > summary:hover,
.evento__detalle > summary:hover, .aviso-of__mas > summary:hover { background: color-mix(in srgb, var(--azulejo) 15%, var(--superficie)); }
.leyenda[open] > summary, .entorno__hist[open] > summary, .fiesta__tabla[open] > summary { margin-bottom: 0.6rem; }
.leyenda + .nota, .leyenda + p, .entorno__hist + .nota { margin-top: 1rem; }
/* «Por modelos» → Hora a hora, visitantes: los días con suscripción, con candado junto a «Hoy» */
.chips .chip-bloq { border-style: dashed; color: var(--tinta-suave); background: transparent; }
.chips .chip-bloq span[aria-hidden] { font-size: 0.85em; }
#bloqueo-horas { margin: 0 0 0.6rem; }
.mod-bloqueo--destello { animation: destello-bloq 0.9s ease-out; }
@keyframes destello-bloq { from { background: color-mix(in srgb, var(--azulejo) 18%, var(--superficie)); } to { background: var(--superficie); } }
@media (prefers-reduced-motion: reduce) { .mod-bloqueo--destello { animation: none; } }
/* Dos desplegables juntos («¿Qué significa cada color?» y «¿Cómo se calcula?»), cerrados; el que se abre ocupa toda la fila */
.leyendas { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; margin: 0.9rem 0 0.2rem; }
.leyendas > .leyenda { margin: 0; }
.leyendas > .leyenda[open] { flex-basis: 100%; }
.leyendas > .leyenda > .nota { margin: 0; }
/* Avisos → histórico por años y por meses */
.tabla--archivo th, .tabla--archivo td { text-align: center; }
.tabla--archivo th:first-child, .tabla--archivo td:first-child { text-align: left; }
.archivo__elegir { margin: 1rem 0 0.4rem; }
.archivo__elegir input { font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--linea); border-radius: 0.4rem; background: var(--cal); color: var(--tinta); margin-left: 0.4rem; color-scheme: light dark; }
#archivo-titulo { margin: 0.8rem 0 0.4rem; font-size: 1.05rem; }
#archivo .mod-bloqueo { margin-top: 0.9rem; }
/* «Por modelos»: cuánto pesa cada modelo en nuestra previsión (lo aprendido) */
.mod-rk__peso { grid-column: 1 / -1; font-size: 0.8rem; color: var(--tinta-suave); padding-left: 2.2rem; }
.mod-rk__peso b { color: var(--azulejo); }
.mod-rk__peso--fuera { color: var(--naranja); }
.mod-aprende { font-size: 0.88rem; color: var(--tinta-suave); margin: 0 0 0.6rem; }
/* Leyendas como dos botones fijos (Entorno): lo abierto sale debajo de los dos, sin mover nada */
.leyendas--botones { display: block; }
.leyendas__botones { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.leyendas__boton { font: inherit; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; padding: 0.32rem 0.85rem 0.32rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--azulejo) 40%, transparent); border-radius: 2rem; background: color-mix(in srgb, var(--azulejo) 8%, var(--superficie));
  color: var(--azulejo); font-weight: 700; font-size: 0.88rem; line-height: 1.3; }
.leyendas__boton::before { content: ''; flex: none; width: 0.42rem; height: 0.42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s; margin-right: 0.1rem; }
.leyendas__boton[aria-expanded="true"]::before { transform: rotate(45deg) translate(-0.1rem, -0.05rem); }
.leyendas__boton[aria-expanded="true"] { background: color-mix(in srgb, var(--azulejo) 16%, var(--superficie)); }
.leyendas__boton:hover { background: color-mix(in srgb, var(--azulejo) 15%, var(--superficie)); }
.leyendas__panel { margin-top: 0.7rem; font-size: 0.9rem; }
.leyendas__panel > .nota { margin: 0; }
/* Mismo espacio entre todos los botones desplegables seguidos (también «Consejos si tienes alergia» encima de los dos) */
.leyendas__botones { gap: 0.6rem; }
.leyendas { margin-top: 0.9rem; }
div:has(> details.leyenda:last-child) + .leyendas { margin-top: 0.6rem; }
/* Desplegables seguidos (gripe, aire…): todos a la misma distancia, estén dentro o fuera de .leyendas */
:is(.leyenda, .entorno__hist) + :is(.leyenda, .entorno__hist) { margin-top: 0.6rem; }
.leyenda:has(+ :is(.leyenda, .entorno__hist)) { margin-bottom: 0; }
div:has(> :is(details.leyenda, details.entorno__hist):last-child) + .leyendas { margin-top: 0.6rem; }
details.leyenda:last-child { margin-bottom: 0; }
.enlace-boton { font: inherit; color: var(--azulejo); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* ── Mapas propios (radar redibujado, focos de calor): lienzo cuadrado, leyenda y botón de imagen ── */
.mapa-lienzo { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 0.5rem; background: #CFE2EC; box-shadow: 0 0 0 1px var(--linea); }
.radar canvas.mapa-lienzo { min-height: 12rem; }
.mapa-zona { position: absolute; top: 0.45rem; right: 0.45rem; display: flex; border-radius: 2rem; background: rgb(255 255 255 / 0.92);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); padding: 2px; }
.mapa-zona button { font: 600 0.82rem/1 var(--texto); color: #1E2B33; background: none; border: 0; border-radius: 2rem; padding: 0.42rem 0.7rem; cursor: pointer; }
.mapa-zona button[aria-pressed="true"] { background: #1D4F91; color: #fff; }
.mapa-ley { display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--tinta-suave); }
.mapa-ley:empty { display: none; }
.mapa-ley__item { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.mapa-ley__item > i { display: inline-flex; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
.mapa-ley__item > i b { display: block; width: 0.8rem; height: 0.7rem; }
.mapa-ley__item > i.mapa-ley__foco { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #FF3B1F; box-shadow: 0 0 0 1.5px #7A1E00; }
.mapa-ley__item > i.mapa-ley__foco--viejo { background: #F2A33A; width: 0.6rem; height: 0.6rem; }
.mapa-ley__item > i.mapa-ley__30 { width: 1.1rem; height: 0; border-radius: 0; border-top: 2px dashed #E0245E; box-shadow: none; }
.mapa-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.55rem; font-size: 0.85rem; }
.mapa-acciones a { color: var(--tinta-suave); }
.boton-img { display: inline-flex; align-items: center; gap: 0.45rem; font: 600 0.9rem/1 var(--texto); color: var(--azulejo); background: var(--superficie);
  border: 1px solid var(--azulejo); border-radius: 2rem; padding: 0.5rem 0.95rem; cursor: pointer; }
.boton-img svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boton-img[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.boton-img:hover { background: var(--azulejo); color: var(--sobre-azulejo); }
.fuego__lienzo { margin: 0.4rem 0 0; max-width: 34rem; }
.fuego__lienzo canvas { cursor: pointer; }
.fuego__detalle { font-size: 0.85rem; color: var(--tinta-suave); margin: 0.35rem 0 0; min-height: 1.3em; }
.fuego__detalle b { color: var(--tinta); }
@media (max-width: 26rem) {
  .radar-ctrl { gap: 0.3rem; }
  .radar-ctrl button { width: 2.2rem; height: 2.2rem; }
  .radar-ctrl output { min-width: 0; font-size: 0.95rem; white-space: nowrap; }
}

/* Mapas en el ordenador: el mapa a la izquierda y lo demás al lado, en vez de todo en una columna estrecha */
.radar__lado > .mapa-ley:first-child { margin-top: 0.5rem; }
.radar__lado .nota { margin-top: 0.8rem; }
@media (min-width: 64rem) {
  .mapas .radar { max-width: none; display: grid; grid-template-columns: minmax(0, 38rem) minmax(16rem, 1fr);
    grid-template-rows: auto auto 1fr; column-gap: 2rem; align-items: start; }
  .mapas .radar .radar__marco { grid-column: 1; grid-row: 1 / 4; }
  .mapas .radar .radar__lado { grid-column: 2; grid-row: 1; }
  .mapas .radar figcaption { grid-column: 2; grid-row: 2; margin-top: 0.6rem; }
  .mapas .radar__lado > .mapa-ley:first-child { margin-top: 0; }
  .mapas .radar__lado .radar-ctrl { margin-top: 0.9rem; }
  .mapas .radar__lado .mapa-acciones { margin-top: 0.9rem; }

  #panel-incendios:not([hidden]):has(#fuego-focos-bloque:not([hidden])) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: start;
    grid-template-areas: "hoy hoy" "epoca epoca" "focos serie" "focos aemet" "focos aviso" "focos nota" "focos .";
    grid-template-rows: auto auto auto auto auto auto 1fr;
  }
  #panel-incendios #fuego-hoy { grid-area: hoy; }
  #panel-incendios #fuego-epoca { grid-area: epoca; }
  #panel-incendios #fuego-serie { grid-area: serie; }
  #panel-incendios #fuego-focos-bloque { grid-area: focos; }
  #panel-incendios #fuego-mapas-bloque { grid-area: aemet; }
  #panel-incendios .fuego__112 { grid-area: aviso; }
  #panel-incendios > .nota { grid-area: nota; }
  #panel-incendios .fuego__lienzo { max-width: none; }
  #panel-incendios .fuego__aemet img { max-width: 100%; }
}
.mapa-ley__item > i.mapa-ley__rayo { width: 0.75rem; height: 0.95rem; border-radius: 0; box-shadow: none; background: #FFE03A;
  clip-path: polygon(59% 0, 25% 56%, 49% 56%, 39% 100%, 76% 39%, 52% 39%); outline: none; }
.radar-rayos { color: var(--tinta); }
/* Al tocar un mapa en el móvil no se tiñe ni se selecciona el lienzo entero (el resaltado azul de Android) */
.mapa-lienzo { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.mapa-lienzo:focus { outline: none; }

/* Histórico de avisos: resumen de un año (mes a mes y por tipo) */
.arch-anio { display: inline-flex; align-items: center; gap: 0.45rem; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--azulejo); cursor: pointer; }
.arch-anio__flecha { width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.25s; }
.arch-anio[aria-expanded="true"] .arch-anio__flecha { transform: rotate(45deg) translate(-2px, -2px); }
.tabla--archivo tbody tr[data-anio] { cursor: pointer; }
.arch-fila--abierta td, .arch-fila--abierta th { background: color-mix(in srgb, var(--azulejo) 8%, var(--superficie)) !important; }
.arch-pista { margin-top: 0.4rem; }
.arch-resumen { margin-top: 0.9rem; background: var(--superficie); border-radius: 0.9rem; padding: 0.9rem 1rem 1rem; box-shadow: 0 1px 2px rgba(30, 43, 51, 0.06), 0 4px 14px rgba(30, 43, 51, 0.05);
  animation: dato-entra 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.arch-resumen h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.arch-resumen h4 { margin: 1.1rem 0 0.5rem; font-size: 0.95rem; }
.arch-frase { font-size: 0.92rem; color: var(--tinta-suave); }
.arch-frase b { color: var(--tinta); }
.arch-meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.3rem; align-items: end; height: 10rem; margin-top: 0.8rem; }
.arch-mes { display: grid; grid-template-rows: auto 1fr auto auto; height: 100%; border: 0; background: none; padding: 0; font: inherit; color: var(--tinta); cursor: pointer; border-radius: 0.4rem; }
.arch-mes:hover:not([disabled]) .arch-mes__barra { background: color-mix(in srgb, var(--azulejo) 8%, transparent); }
.arch-mes[disabled] { cursor: default; opacity: 0.45; }
.arch-mes__n { font-family: var(--cifras); font-weight: 600; font-size: 0.95rem; text-align: center; min-height: 1.2em; }
.arch-mes__barra { display: flex; flex-direction: column-reverse; justify-content: flex-start; border-bottom: 2px solid var(--linea); border-radius: 0.3rem 0.3rem 0 0; overflow: hidden; }
.arch-mes__barra i { display: block; width: 62%; margin: 0 auto; transform-origin: bottom; animation: barra-crece 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.arch-mes__barra i:first-child { border-radius: 0 0 0.15rem 0.15rem; }
.arch-mes__barra i:last-child { border-radius: 0.3rem 0.3rem 0 0; }
@keyframes barra-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.arch-mes__nombre { font-size: 0.72rem; color: var(--tinta-suave); text-align: center; margin-top: 0.2rem; line-height: 1.2; height: 1.2em; }
/* Misma altura con o sin «112·2» debajo: si no, la barra de ese mes quedaba más alta que las demás */
.arch-mes__112 { font-size: 0.62rem; font-weight: 700; color: #00873E; text-align: center; line-height: 1.2; height: 1.2em; white-space: nowrap; }
[data-nivel="rojo"].arch-mes__barra i, .arch-mes__barra i[data-nivel="rojo"], .arch-ley i[data-nivel="rojo"] { background: var(--av-rojo); }
.arch-mes__barra i[data-nivel="naranja"], .arch-ley i[data-nivel="naranja"] { background: var(--av-naranja); }
.arch-mes__barra i[data-nivel="amarillo"], .arch-ley i[data-nivel="amarillo"] { background: var(--av-amarillo); }
.arch-mes__barra i[data-nivel="otro"], .arch-ley i[data-nivel="otro"] { background: #8FB9A0; }
.arch-ley { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: center; margin-top: 0.6rem; }
.arch-ley span { display: inline-flex; align-items: center; gap: 0.3rem; }
.arch-ley i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 0.15rem; }
.tabla--tipos th[scope="row"] { font-weight: 600; }
.chapa-112-mini { display: inline-block; font-size: 0.65rem; font-weight: 700; color: #fff; background: #00873E; border-radius: 1rem; padding: 0 0.35rem; vertical-align: 0.1em; }
@media (max-width: 30rem) { .arch-meses { gap: 0.15rem; height: 8.5rem; } .arch-mes__barra i { width: 78%; } .arch-mes__nombre { font-size: 0.64rem; } }
@media (prefers-reduced-motion: reduce) { .arch-resumen, .arch-mes__barra i { animation: none; } }

/* Radar: letrero cuando no hay lluvia cerca */
.radar-seco {
  position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%); z-index: 2; margin: 0; max-width: calc(100% - 2rem); width: max-content;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.05rem; padding: 0.45rem 0.95rem 0.5rem;
  background: rgba(255, 255, 255, 0.93); color: #1E2B33; border-radius: 0.8rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  pointer-events: none; animation: seco-entra 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.radar-seco b { font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.radar-seco b::before { content: ''; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: radial-gradient(circle, #F7C548 45%, rgba(247, 197, 72, 0.3) 47%, rgba(247, 197, 72, 0) 70%); flex: none; }
.radar-seco span { font-size: 0.78rem; color: #55636D; }
@keyframes seco-entra { from { opacity: 0; transform: translate(-50%, 0.5rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .radar-seco { animation: none; } }

/* Terremotos: resumen en cifras y filas compactas */
.sismos-estado { margin: 0.2rem 0 0.8rem; padding: 0.6rem 0.8rem; border-radius: 0.6rem; font-size: 0.95rem;
  background: color-mix(in srgb, #2FB463 12%, var(--superficie)); border-left: 0.3rem solid #2FB463; }
.sismos-estado--notado { background: color-mix(in srgb, var(--calor) 12%, var(--superficie)); border-left-color: var(--calor); font-weight: 600; }
.sismos-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.sismos-cifras > div { background: var(--superficie); border-radius: 0.7rem; padding: 0.55rem 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; }
.sismos-cifras b { font-family: var(--cifras); font-size: 1.7rem; font-weight: 600; line-height: 1; }
.sismos-cifras span { font-size: 0.76rem; color: var(--tinta-suave); line-height: 1.25; }
.sismos-sub { font-size: 0.95rem; margin: 1.1rem 0 0.1rem; }
.sismo { align-items: center; padding: 0.55rem 0; }
.sismo__mag { min-width: 2.9rem; font-size: 1.1rem; padding: 0.3rem 0.35rem; text-align: center; }
.sismo__datos { flex: 1; gap: 0; }
.sismo__datos p { margin: 0; }
.sismo__donde b { font-size: 0.98rem; }
.sismo__donde span { font-size: 0.85rem; }
.sismo__cuando { font-size: 0.82rem; color: var(--tinta-suave); }
.sismo__ign { flex: none; font-size: 0.75rem; font-weight: 700; text-decoration: none; color: var(--azulejo); border: 1px solid var(--linea); border-radius: 1rem; padding: 0.1rem 0.5rem; }
.sismo--lejos .sismo__donde b { color: var(--tinta-suave); }
.sismos-mas > summary { cursor: pointer; font-weight: 700; color: var(--azulejo); padding: 0.4rem 0; border-top: 1px solid var(--linea); list-style: none; }
.sismos-mas > summary::-webkit-details-marker { display: none; }
.sismos-mas > summary::before { content: '▸ '; }
.sismos-mas[open] > summary::before { content: '▾ '; }
.sismos-mas .sismos { margin-top: 0; }

/* Gripe: lo práctico primero */
.gripe-estado { display: flex; gap: 0.9rem; align-items: center; padding: 0.8rem 0.9rem; border-radius: 0.9rem;
  background: color-mix(in srgb, var(--c) 16%, var(--superficie)); border-left: 0.35rem solid var(--c); }
.gripe-estado .ent__chip--grande { flex: none; }
.gripe-estado__frase { font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0; }
.gripe-estado__tend { font-size: 0.85rem; color: var(--tinta-suave); margin: 0.2rem 0 0; }
.gripe-estado__tend .entorno__sube, .gripe-estado__tend .entorno__baja { font-weight: 700; }
.gripe-consejo { margin: 0.7rem 0 0; font-size: 0.92rem; line-height: 1.45; }
.gripe-sub { font-size: 0.98rem; margin: 1.2rem 0 0.5rem; }
.virus-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 48rem) { .virus-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.virus { background: var(--superficie); border-radius: 0.7rem; padding: 0.5rem 0.75rem 0.6rem; }
.virus__cab { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.virus__cab small { color: var(--tinta-suave); font-size: 0.78rem; }
.virus__pct { margin-left: auto; font-family: var(--cifras); font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.virus__pct small { font-family: var(--texto); font-weight: 400; font-size: 0.75rem; color: var(--tinta-suave); }
.virus__barra { height: 0.45rem; border-radius: 1rem; background: var(--linea); margin: 0.3rem 0 0.35rem; overflow: hidden; }
.virus__barra i { display: block; height: 100%; border-radius: 1rem; background: linear-gradient(90deg, #7fc8a9, #f0c341 50%, #c8324b); background-size: 200% 100%;
  animation: barra-ancha 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-origin: left; }
@keyframes barra-ancha { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.virus__nota { font-size: 0.8rem; color: var(--tinta-suave); margin: 0; }
.virus__nota b { color: var(--tinta); }
.gripe-numeros { margin-top: 0.8rem; }
.gripe-barras__cols .gb { max-width: 3.2rem; }
.gripe-barras__fechas span { max-width: 3.2rem; }
.gripe-barras__cols { height: 6rem; }
@media (prefers-reduced-motion: reduce) { .virus__barra i { animation: none; } }
@media (max-width: 30rem) {
  .gripe-estado { align-items: flex-start; }
  .gripe-estado .ent__chip--grande { font-size: 1rem; padding: 0.35rem 0.6rem; min-width: 0; }
}

/* Portada: estaciones de las pedanías */
.pedanias { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.ped { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.8rem; align-items: center;
  background: var(--superficie); border-radius: 0.7rem; padding: 0.55rem 0.75rem; }
.ped__cab { display: flex; flex-direction: column; min-width: 0; }
.ped__cab a { color: var(--tinta); text-decoration: none; }
.ped__cab a:hover b { text-decoration: underline; }
.ped__cab small { font-size: 0.75rem; color: var(--tinta-suave); }
.ped__t { display: flex; flex-direction: column; align-items: flex-end; }
.ped__t > b { font-family: var(--cifras); font-size: 1.7rem; font-weight: 600; line-height: 1; }
.ped__t > b small { font-size: 0.9rem; color: var(--tinta-suave); margin-left: 0.1rem; }
.ped__dif { font-size: 0.72rem; font-weight: 700; color: var(--tinta-suave); white-space: nowrap; }
.ped__dif--frio { color: var(--frio); } .ped__dif--calor { color: var(--calor); }
.ped__mas { grid-column: 1 / -1; margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--tinta-suave); }
.ped__mas small { font-size: 0.72rem; }
.ped__max { color: var(--calor); font-weight: 600; } .ped__min { color: var(--frio); font-weight: 600; }
.ped__ll { color: var(--lluvia); font-weight: 700; }
.ped__mas .rumbo { width: 0.8rem; height: 0.8rem; vertical-align: -0.1rem; margin-right: 0.15rem; color: var(--azulejo); }
.ped--dudoso, .ped--viejo { opacity: 0.6; }

/* Histórico: elegir entre la estación del pueblo y las de las pedanías */
/* En una sola fila (en el móvil se desliza de lado), pequeña: no debe pesar más que los datos */
/* Todas a la vista (en varias líneas si hace falta): deslizando de lado, la gente no sabía que había más */
.est-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.7rem; }
.est-sel::-webkit-scrollbar { display: none; }
.est-sel__et { flex: none; font-size: 0.74rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.15rem; }
.est-sel a { flex: none; white-space: nowrap; font-size: 0.78rem; font-weight: 600; text-decoration: none; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 2rem; padding: 0.16rem 0.65rem; }
.est-sel a[aria-current="page"] { background: var(--encina); border-color: var(--encina); color: #fff; }
.ped__cab a b::after { content: ' ›'; color: var(--tinta-suave); font-weight: 400; }
.acceso__chapa--gratis { background: #2FB463 !important; }

/* ── Entrar (/acceso/): acceso educativo, suscripción (próximamente) y administrador ── */
.cuenta__estado { margin: 1rem 0 0.5rem; }
.cuenta__caja h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cuenta__caja--edu { border-left: 4px solid #2E7D5B; padding-left: 1rem; padding-top: 0.6rem; }
.cuenta__caja--edu > h2 { margin-top: 0; }
.cuenta__opciones { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cuenta__opciones a { display: block; height: 100%; box-sizing: border-box; padding: 0.75rem 0.9rem; border-radius: 0.7rem; text-decoration: none; color: inherit;
  border: 1.5px solid var(--linea); background: var(--superficie); }
.cuenta__opciones a:hover { border-color: #2E7D5B; }
.cuenta__opciones b { display: block; color: #2E7D5B; }
.cuenta__opciones b::after { content: ' →'; }
.cuenta__opciones small { display: block; margin-top: 0.2rem; opacity: 0.8; }
.cuenta__caja--admin summary { cursor: pointer; list-style: none; }
.cuenta__caja--admin summary::-webkit-details-marker { display: none; }
.cuenta__caja--admin summary h2 { display: inline-flex; font-size: 1rem; opacity: 0.85; }
.cuenta__caja--admin summary h2::after { content: '▾'; font-size: 0.8em; }
.cuenta__caja--admin details[open] summary h2::after { content: '▴'; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cuenta__opciones b { color: #7FD1A6; } }
:root[data-theme="dark"] .cuenta__opciones b { color: #7FD1A6; }
/* «Desde cuándo no» en «Comparado con otros años» */
.dia-desde { list-style: none; margin: 0.55rem 0 0.2rem; padding: 0; display: grid; gap: 0.3rem; font-size: 0.93rem; }
.dia-desde li { padding-left: 1.1rem; position: relative; }
.dia-desde li::before { content: '↺'; position: absolute; left: 0; color: var(--tinta-suave); }