/* Módulo «prevision»: los próximos días y, si se despliega, las próximas horas.
   Solo lo descargan las webs que lo tengan encendido. */

/* Los iconos del tiempo. Todos sus colores son variables, y NO por capricho: un icono es un
   elemento gráfico y su forma tiene que distinguirse del fondo (mínimo 3, WCAG 2.2 1.4.11), y lo
   que se distingue sobre una tarjeta clara no es lo mismo que sobre una oscura: una nube blanca
   sobre papel se queda en 1,03 y un sol amarillo en 1,68, es decir, no se ven.
   Estos valores son los del TEMA CLARO del motor, medidos sobre la tarjeta (#FFFFFF) y sobre la
   celda de las horas (#E8ECF0): entre 3,60 y 7,05. Hasta el 23/09/2026 eran los del tema oscuro,
   porque el tema del motor era el de Nature Live Cams.
   El relleno y el contorno van separados a propósito: una web de tema oscuro deja el relleno
   claro y pone los dos «-borde» en «transparent», que es lo que dibuja la forma. */
:root{
  --wi-sol:#E3C33B; --wi-sol-borde:#9A7500;
  --wi-luna:#DDE2E8; --wi-luna-borde:#6B7684;
  --wi-nube:#F5F7F9; --wi-nube-borde:#4E5A66; --wi-nube-grosor:1.5;
  --wi-gota:#1C6E8C; --wi-tormenta:#9A7500; --wi-niebla:#5A6674;
}
.wi{width:2rem;height:2rem;flex:none}
.wi-sol{fill:var(--wi-sol);stroke:var(--wi-sol-borde);stroke-width:1}
.wi-rayos path{stroke:var(--wi-sol-borde,var(--wi-sol));stroke-width:1.7;stroke-linecap:round;fill:none}
.wi-luna{fill:var(--wi-luna);stroke:var(--wi-luna-borde);stroke-width:1}
.wi-nube{fill:var(--wi-nube);stroke:var(--wi-nube-borde);stroke-width:var(--wi-nube-grosor);stroke-linejoin:round}
.wi-gotas path{stroke:var(--wi-gota);stroke-width:1.8;stroke-linecap:round;fill:none}
.wi-nieve path{stroke:var(--wi-nube-borde);stroke-width:1.5;stroke-linecap:round;fill:none}
.wi-tormenta{fill:none;stroke:var(--wi-tormenta);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wi-niebla path{stroke:var(--wi-niebla);stroke-width:1.8;stroke-linecap:round;fill:none}

/* Va dentro de la caja de «ahora mismo», ocupando toda su anchura y separada por una línea: es la
   continuación del mismo dato, no otro bloque. */
.prev{margin:.7rem 0 0;padding:.9rem 1rem 1rem;background:var(--deep);border-radius:var(--r)}
.prev-h{font:500 .98rem/1.2 var(--display);color:var(--haze);margin:0 0 .5rem}
/* Los días, uno al lado del otro y siempre en la misma fila: son tres o cuatro, y partirlos en dos
   filas desiguales se lee peor. Con tope de ancho, que estirados hasta el borde quedan vacíos. */
.prev-dias{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.5rem;margin:0;padding:0;max-width:36rem}
.prev-dia{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:.1rem .55rem;
  padding:.55rem .7rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--deep)}
.prev-dia .wi{grid-row:1/3}
.prev-dia--hoy{border-color:var(--acento)}
.prev-nombre{font:600 .95rem/1.2 var(--display);align-self:end}
.prev-temp{font-size:1.02rem;align-self:start;font-variant-numeric:tabular-nums;white-space:nowrap}
.prev-min{color:var(--dim)}
.prev-mm{grid-column:2;font-size:.82rem;color:var(--wi-gota);min-height:1em}
/* En una pantalla estrecha no caben tres tarjetas con el icono al lado: se pone encima. */
@media (max-width:34rem){
  .prev-dia{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;justify-items:center;text-align:center;gap:.05rem;padding:.5rem .3rem}
  .prev-dia .wi{grid-row:auto;width:1.8rem;height:1.8rem}
  .prev-nombre{align-self:auto;font-size:.88rem}
  .prev-temp{font-size:.9rem}
  .prev-dia{padding:.5rem .2rem}
  .prev-mm{grid-column:auto;font-size:.76rem}
}

/* El detalle por horas: una tira que se arrastra, como la de las cámaras de un lugar. */
.prev-detalle{margin:.7rem 0 0;font-size:.9rem}
/* Con aspecto de botón: como un renglón más de texto no lo pulsaba nadie. */
.prev-detalle>summary{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;padding:.4rem .85rem;
  border:1.5px solid var(--rule);border-radius:2rem;background:var(--deep2);font:500 .98rem/1.2 var(--display);color:var(--snow)}
.prev-detalle>summary:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.prev-detalle>summary::before{content:"";flex:none;width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.prev-detalle[open]>summary::before{transform:rotate(45deg)}
.prev-detalle>summary:hover{border-color:var(--acento);color:var(--acento)}
@media (prefers-reduced-motion:reduce){.prev-detalle>summary::before{transition:none}}
.prev-horas{list-style:none;display:flex;gap:.35rem;overflow-x:auto;margin:.6rem 0 0;padding:0 0 .4rem;scrollbar-width:thin}
.prev-horas li{flex:0 0 4rem;border:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .2rem;
  border-radius:var(--r);background:var(--deep2);font-size:.85rem}
.prev-horas .wi{width:1.7rem;height:1.7rem}
.ph-hora{color:var(--dim);font-variant-numeric:tabular-nums}
.ph-temp{font-weight:700;font-variant-numeric:tabular-nums}
.ph-mm{font-size:.72rem;color:var(--wi-gota);min-height:1em}
.prev-fuente{margin:.6rem 0 0}