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

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

/* ── Contenido ── */
main { max-width: 40rem; margin: 0 auto; padding: 0 1rem 2rem; }
.bloque { padding: 1.5rem 0 0.5rem; }
.bloque + .bloque { border-top: 1px solid var(--linea); margin-top: 1rem; }
/* Portada: en el móvil una sola columna en este orden; en pantallas grandes, dos columnas independientes */
.portada { display: flex; flex-direction: column; }
.portada .col { display: contents; }
.portada .bloque { border-top: 1px solid var(--linea); margin-top: 1rem; }
.portada .b-horas { border-top: 0; margin-top: 0; order: 2; }
.b-avisos { order: 1; } .b-estacion { order: 3; } .b-dias { order: 4; } .b-fechas { order: 5; } .b-radar { order: 6; } .b-historico { order: 7; } .b-aemet { order: 8; } .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; }
.hora__cambio { font-size: 0.72rem; color: var(--tinta-suave); border-left: 1px dashed var(--linea); }

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

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

/* Radar */
.pestanas { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.pestanas button {
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta);
  padding: 0.35rem 0.8rem; border-radius: 2rem; cursor: pointer;
}
.pestanas button[aria-selected="true"] { background: var(--azulejo); border-color: var(--azulejo); color: 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 3rem 1fr; padding: 0.7rem 0; }
  .dia svg.ico { width: 2.4rem; height: 2.4rem; }
  .dia__rango { grid-template-columns: 2.6rem 1fr 2.6rem; gap: 0.6rem; }
  .dia__rango b { font-size: 1.35rem; }
  .barra { height: 0.7rem; }
  .dia__mas p { max-width: 46rem; }
  .pie { grid-template-columns: repeat(2, 1fr); column-gap: 3.5rem; }
}


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

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

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

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

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

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

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

@media (min-width: 64rem) {
  .cielo--pagina .cielo__dentro { display: block; }
  .pagina__titulo { font-size: 2rem; }
  .hist__titulo { font-size: 1.6rem; }
  .tarjetas { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .graficas { grid-template-columns: 1fr 1fr; }
  .mes-cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .mes-cuerpo h2 { margin-top: 1.2rem; }
  .cal__dia { min-height: 5.4rem; padding: 0.35rem 0.5rem; }
  .cal__t b { font-size: 1.35rem; }
  .sobre { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
  .sobre h2 { grid-column: 1 / -1; }
  .sobre p { margin-top: 0; }
}
.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; }
.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; }

/* 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; }

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

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

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

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

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

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

/* 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__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; }
.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; }
.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; }
.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__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; }
.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); }
@media (max-width: 30rem) { .leyenda li { grid-template-columns: 1fr; gap: 0.15rem; } .leyenda li .ent__chip { justify-self: start; } }

.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; }

.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; }
.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__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.5rem 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; }
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; }