/* estilos.css — la app del cielo. Tres modos, todos por variables:
   normal = noche de Arrakis sobre el azul de la Fundación (marino #000363, cielo #99ccff, naranja #f5924a, arena),
   noche  = SOLO rojo sobre negro, para no deslumbrar (ni un píxel blanco: el logo, las gráficas y la previsión también),
   bn     = blanco y negro, claro, para pleno día o para imprimir.
   Reglas de /pulido-visual: tabular-nums en cifras, clic ≥ 40 px, radio concéntrico, sin morados, sin texto con degradado,
   sin brillos difuminados, animación solo de transform/opacity y con prefers-reduced-motion. 9-oct-2026. */

:root {
  color-scheme: dark;
  --fondo: #03041c; --fondo-2: #070b36; --panel: rgba(8, 12, 56, .78);
  --linea: rgba(153, 204, 255, .14); --linea-2: rgba(153, 204, 255, .34);
  --tinta: #eef2fa; --tinta-2: #b4bedd; --tinta-3: #8189ad;
  --marino: #000363; --cielo: #99ccff; --naranja: #f5924a; --arena: #e3c08f; --bio: #74e3cf;
  --ok: #5fd39a; --aviso: #ffc456; --malo: #ff6f61;
  --s-temp: var(--naranja); --s-rocio: var(--cielo); --s-hum: var(--bio); --s-pres: var(--arena); --s-viento: var(--tinta); --s-racha: var(--tinta-3);
  --fr-dia: #e8cf9c; --fr-civil: #8d7a63; --fr-nautico: #33417a; --fr-astro: #18205a; --fr-noche: #04061f; --fr-luna: #dfe6f5;
  --duna-lejos: rgba(227, 192, 143, .10); --duna-cerca: rgba(227, 192, 143, .18); --cupula: #01022a;
  --estrella: rgba(238, 242, 250, .75);
  --f-texto: 'Catamaran', 'Segoe UI', system-ui, sans-serif;
  --f-dato: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r: 14px; --r-in: 8px; --pad: 6px;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 20px; --esp-5: 32px; --esp-6: 56px;
  --filtro-iframe: none;
}
:root[data-modo="noche"] {
  color-scheme: dark;
  --fondo: #050000; --fondo-2: #0d0101; --panel: rgba(18, 2, 2, .85);
  --linea: rgba(255, 70, 50, .16); --linea-2: rgba(255, 70, 50, .36);
  --tinta: #ff5a45; --tinta-2: #d8432f; --tinta-3: #a5301f;
  --marino: #1a0000; --cielo: #ff6a52; --naranja: #ff5a45; --arena: #c7381f; --bio: #ff7a5f;
  --ok: #ff5a45; --aviso: #ff8a6a; --malo: #ffb3a0;
  --s-temp: #ff5a45; --s-rocio: #b8321f; --s-hum: #ff5a45; --s-pres: #ff5a45; --s-viento: #ff5a45; --s-racha: #9c2a1b;
  --fr-dia: #6b1508; --fr-civil: #4a0e05; --fr-nautico: #2e0803; --fr-astro: #1a0402; --fr-noche: #080000; --fr-luna: #ff5a45;
  --duna-lejos: rgba(255, 70, 50, .08); --duna-cerca: rgba(255, 70, 50, .14); --cupula: #000;
  --estrella: rgba(255, 90, 69, .45);
  --filtro-iframe: invert(1) grayscale(1) sepia(1) saturate(6) hue-rotate(-40deg) brightness(.5);
}
:root[data-modo="bn"] {
  color-scheme: light;
  --fondo: #f3f3f0; --fondo-2: #ffffff; --panel: #ffffff;
  --linea: rgba(0, 0, 0, .12); --linea-2: rgba(0, 0, 0, .38);
  --tinta: #0b0b0b; --tinta-2: #3a3a3a; --tinta-3: #6b6b6b;
  --marino: #0b0b0b; --cielo: #4a4a4a; --naranja: #0b0b0b; --arena: #6b6b6b; --bio: #2b2b2b;
  --ok: #0b0b0b; --aviso: #555; --malo: #0b0b0b;
  --s-temp: #0b0b0b; --s-rocio: #555; --s-hum: #0b0b0b; --s-pres: #0b0b0b; --s-viento: #0b0b0b; --s-racha: #777;
  --fr-dia: #ffffff; --fr-civil: #d9d9d9; --fr-nautico: #a8a8a8; --fr-astro: #6e6e6e; --fr-noche: #2a2a2a; --fr-luna: #0b0b0b;
  --duna-lejos: rgba(0, 0, 0, .05); --duna-cerca: rgba(0, 0, 0, .09); --cupula: #c9c9c9;
  --estrella: transparent;
  --filtro-iframe: grayscale(1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background-color: var(--fondo); color: var(--tinta);
  font: 400 16px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased;
  /* estrellas fijas: puntos, no brillos; sin animación */
  background-image:
    radial-gradient(1px 1px at 12% 18%, var(--estrella) 99%, transparent), radial-gradient(1px 1px at 27% 8%, var(--estrella) 99%, transparent),
    radial-gradient(1.2px 1.2px at 41% 22%, var(--estrella) 99%, transparent), radial-gradient(1px 1px at 58% 12%, var(--estrella) 99%, transparent),
    radial-gradient(1px 1px at 71% 27%, var(--estrella) 99%, transparent), radial-gradient(1.4px 1.4px at 86% 9%, var(--estrella) 99%, transparent),
    radial-gradient(1px 1px at 93% 31%, var(--estrella) 99%, transparent), radial-gradient(1px 1px at 6% 36%, var(--estrella) 99%, transparent),
    radial-gradient(1px 1px at 34% 39%, var(--estrella) 99%, transparent), radial-gradient(1px 1px at 64% 41%, var(--estrella) 99%, transparent),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 46vh, var(--fondo) 100%);
  background-repeat: no-repeat; background-size: 100% 70vh, 100% 70vh, 100% 70vh, 100% 70vh, 100% 70vh, 100% 70vh, 100% 70vh, 100% 70vh, 100% 70vh, 100% 70vh, 100% 100%;
}
a { color: var(--cielo); text-underline-offset: 3px; }
b, .temp-num, .inst-valor, .lectura, .efem dd, .eje, select { font-variant-numeric: tabular-nums; }

/* barra superior */
.barra { max-width: 1440px; margin: 0 auto; padding: var(--esp-3) 16px; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.logo { width: 120px; height: 61px; background: var(--tinta); -webkit-mask: url(img/logo_0.png) left center / contain no-repeat; mask: url(img/logo_0.png) left center / contain no-repeat; }
.controles { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.ctl { display: flex; flex-direction: column; gap: 2px; }
.ctl span { font: 500 11px/1 var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.ctl select { min-height: 40px; min-width: 40px; padding: 0 28px 0 10px; border-radius: var(--r-in); border: 0; color: var(--tinta); background-color: var(--panel); box-shadow: 0 0 0 1px var(--linea-2); font: 600 14px var(--f-texto); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.ctl select:focus-visible, .info:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }

main { max-width: 1440px; margin: 0 auto; padding: 0 16px var(--esp-6); }
.etq { font: 500 11px/1.4 var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); display: inline-flex; align-items: center; gap: 6px; }

/* cabeza */
.cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; padding-top: var(--esp-4); }
.lugar h1 { margin: 2px 0 0; font: 800 clamp(40px, 7vw, 76px)/0.95 var(--f-texto); letter-spacing: -0.01em; text-wrap: balance; color: var(--tinta); }
.lugar h1 .h1-pre { display: block; margin-bottom: 4px; font: 300 clamp(20px, 2.6vw, 28px)/1.1 var(--f-texto); letter-spacing: 0; color: var(--tinta-2); }
.sub { margin: var(--esp-2) 0 0; color: var(--tinta-2); font-size: 15px; }
.estado { margin: 0; font: 500 12px/1.4 var(--f-dato); color: var(--tinta-2); display: inline-flex; align-items: center; gap: 8px; }
.estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.estado-viejo { color: var(--aviso); } .estado-viejo i { background: var(--aviso); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aviso) 22%, transparent); }

/* bloque principal: temperatura + veredicto */
.principal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--esp-5); align-items: end; margin-top: var(--esp-5); }
.temp { margin: 0; display: flex; align-items: flex-start; line-height: .85; }
.temp-num { font: 200 clamp(96px, 16vw, 188px)/0.85 var(--f-texto); letter-spacing: -0.04em; color: var(--tinta); }
.temp-u { font: 400 clamp(24px, 3vw, 36px)/1 var(--f-texto); color: var(--naranja); margin-top: .35em; margin-left: 6px; }
.temp-rango { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin: var(--esp-3) 0 0; color: var(--tinta-2); font-size: 15px; }
.temp-rango b { color: var(--tinta); font-weight: 600; }

/* paneles con esquinas de visor (un solo nivel: nunca tarjeta dentro de tarjeta) */
.veredicto, .inst, .g { position: relative; background: var(--panel); border-radius: var(--r); box-shadow: 0 0 0 1px var(--linea); }
.veredicto::before, .veredicto::after, .inst::before, .inst::after, .g::before, .g::after {
  content: ''; position: absolute; width: 10px; height: 10px; border: 0 solid var(--linea-2); pointer-events: none; }
.veredicto::before, .inst::before, .g::before { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
.veredicto::after, .inst::after, .g::after { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }

.veredicto { padding: var(--esp-4); }
.v-texto { margin: var(--esp-1) 0 var(--esp-3); font: 800 26px/1.15 var(--f-texto); text-wrap: balance; }
.v-bueno .v-texto { color: var(--ok); } .v-regular .v-texto { color: var(--aviso); } .v-malo .v-texto { color: var(--malo); } .v-dia .v-texto { color: var(--tinta-2); }
.criterios { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.criterios li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: var(--esp-2); min-height: 30px; border-bottom: 1px solid var(--linea); font-size: 15px; }
.criterios li:last-child { border-bottom: 0; }
.criterios b { font: 500 13px var(--f-dato); color: var(--tinta); }
/* forma además de color: se distingue también en rojo y en blanco y negro */
.criterios i { width: 10px; height: 10px; justify-self: center; }
.c-ok i { border-radius: 50%; background: var(--ok); }
.c-aviso i { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--aviso); }
.c-malo i { background: var(--malo); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.c-info i { width: 8px; height: 2px; background: var(--tinta-3); }
.nota { margin: var(--esp-2) 0 0; font-size: 13px; color: var(--tinta-3); text-wrap: pretty; }

/* horizonte: dunas y cúpulas */
.horizonte { display: block; width: 100%; height: 70px; margin-top: var(--esp-4); }
.duna-lejos { fill: var(--duna-lejos); } .duna-cerca { fill: var(--duna-cerca); }
.cupulas rect, .cupulas path { fill: var(--cupula); stroke: var(--linea-2); stroke-width: 1; }

/* instrumentos */
.instrumentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-3); margin-top: var(--esp-3); }
.inst { padding: var(--esp-4) var(--esp-4) var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-1); min-height: 168px; }
.inst-valor { margin: 0; font: 600 22px/1.2 var(--f-texto); color: var(--tinta); }
.inst-valor.grande { font: 300 40px/1.05 var(--f-texto); margin-top: var(--esp-2); }
.inst-valor small { font: 500 13px var(--f-dato); color: var(--tinta-2); }
.inst-sub { margin: 0; font-size: 14px; color: var(--tinta-2); }
.arco { width: 112px; margin: 2px 0 -6px; }
.arco-fondo { fill: none; stroke: var(--linea); stroke-width: 6; stroke-linecap: round; }
.arco-valor { fill: none; stroke: var(--s-hum); stroke-width: 6; stroke-linecap: round; }
.arco-marca { fill: var(--tinta-2); }

/* botón ⓘ: se ve pequeño, pero su área de clic es de 40×40 */
.info { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--linea-2); color: var(--tinta-2); font: 600 11px/1 var(--f-dato); cursor: pointer; text-transform: none; letter-spacing: 0; }
.info::after { content: ''; position: absolute; inset: -11px; }
.info:hover { color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta-2); }

/* secciones */
.bloque { margin-top: var(--esp-6); }
.seccion { margin: 0 0 var(--esp-2); font: 800 26px/1.2 var(--f-texto); display: flex; align-items: center; gap: var(--esp-2); text-wrap: balance; }

/* esta noche */
.franja { position: relative; margin-top: var(--esp-3); }
.fr-lunas { position: relative; height: 6px; margin-bottom: 4px; }
.fr-cielo { position: relative; height: 34px; border-radius: var(--r-in); overflow: hidden; box-shadow: 0 0 0 1px var(--linea); }
.fr { position: absolute; top: 0; bottom: 0; }
.fr-dia { background: var(--fr-dia); } .fr-civil { background: var(--fr-civil); } .fr-nautico { background: var(--fr-nautico); } .fr-astro { background: var(--fr-astro); } .fr-noche { background: var(--fr-noche); }
.fr-luna { position: absolute; top: 0; height: 6px; border-radius: 3px; background: var(--fr-luna); }
.fr-horas { position: relative; height: 18px; margin-top: 4px; }
.fr-h { position: absolute; transform: translateX(-50%); font: 400 11px var(--f-dato); color: var(--tinta-3); }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); margin-top: var(--esp-2); font-size: 13px; color: var(--tinta-2); }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px var(--linea); }
.leyenda .fr-luna-l { height: 4px; border-radius: 2px; background: var(--fr-luna); }
.noche-datos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: var(--esp-5); margin-top: var(--esp-4); align-items: start; }
.efem { margin: 0; display: grid; gap: 0; }
.efem div { display: flex; justify-content: space-between; gap: var(--esp-3); padding: 8px 0; border-bottom: 1px solid var(--linea); }
.efem dt { color: var(--tinta-2); font-size: 15px; } .efem dd { margin: 0; font: 500 15px var(--f-dato); }
.luna-caja { display: flex; gap: var(--esp-3); align-items: center; }
.luna-svg { width: 64px; height: 64px; flex: none; }
.luna-oscura { fill: var(--fondo-2); } .luna-luz { fill: var(--fr-luna); } .luna-borde { fill: none; stroke: var(--linea-2); }
.luna-nombre { margin: 2px 0; font: 700 19px/1.2 var(--f-texto); }
.aviso-noche { margin: var(--esp-3) 0 0; color: var(--aviso); }
.cielo-lugar { margin: var(--esp-4) 0 0; color: var(--tinta-2); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cielo-lugar b { color: var(--tinta); }

/* previsión */
/* la previsión es la imagen oficial de Clear Outside (se actualiza sola cada hora); en móvil se desliza de lado */
.prevision-marco { display: block; margin-top: var(--esp-3); border-radius: var(--r); overflow-x: auto; box-shadow: 0 0 0 1px var(--linea); }
.prevision-marco img { display: block; max-width: none; width: 100%; min-width: 720px; height: auto; filter: var(--filtro-iframe); }

/* gráficas */
.graficas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-3); }
.g { margin: 0; padding: var(--esp-3) var(--esp-3) var(--esp-2); }
.g figcaption { display: flex; flex-direction: column; gap: 2px; min-height: 46px; padding: 0 var(--esp-2); }
.lectura { display: flex; flex-wrap: wrap; gap: 2px var(--esp-3); font: 400 12px/1.5 var(--f-dato); color: var(--tinta-2); }
.lectura b { color: var(--tinta); font-weight: 500; }
.lectura-hora { color: var(--tinta-3); }
.muestra { display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: middle; }
.muestra-temp { background: var(--s-temp); } .muestra-rocio { background: var(--s-rocio); } .muestra-hum { background: var(--s-hum); }
.muestra-pres { background: var(--s-pres); } .muestra-viento { background: var(--s-viento); } .muestra-racha { background: var(--s-racha); }
.g-caja { width: 100%; }
.grafica { display: block; width: 100%; height: auto; touch-action: pan-y; }
.noche { fill: var(--fondo); opacity: .55; } .noche-noche { opacity: .9; } .noche-astro { opacity: .75; } .noche-civil { opacity: .3; } .noche-nautico { opacity: .5; }
.rejilla line { stroke: var(--linea); } .rejilla .marca { stroke: var(--linea-2); }
.eje { font: 400 10px var(--f-dato); fill: var(--tinta-3); }
.serie { stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.serie-temp { stroke: var(--s-temp); } .serie-rocio { stroke: var(--s-rocio); stroke-dasharray: 5 4; } .serie-hum { stroke: var(--s-hum); }
.serie-pres { stroke: var(--s-pres); } .serie-viento { stroke: var(--s-viento); } .serie-racha { stroke: var(--s-racha); stroke-dasharray: 2 3; }
.cursor-linea { stroke: var(--tinta-2); stroke-width: 1; }
.cursor-punto { fill: var(--fondo); stroke-width: 2; }
.serie-punto-temp { stroke: var(--s-temp); } .serie-punto-rocio { stroke: var(--s-rocio); } .serie-punto-hum { stroke: var(--s-hum); }
.serie-punto-pres { stroke: var(--s-pres); } .serie-punto-viento { stroke: var(--s-viento); } .serie-punto-racha { stroke: var(--s-racha); }
.capa { fill: transparent; cursor: crosshair; }

/* glosario */
.glosario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esp-5); margin-top: var(--esp-3); }
.glosario details { border-bottom: 1px solid var(--linea); }
.glosario summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 700 17px var(--f-texto); list-style: none; }
.glosario summary::-webkit-details-marker { display: none; }
.glosario summary::before { content: '+'; width: 24px; font: 400 18px var(--f-dato); color: var(--naranja); }
.glosario details[open] summary::before { content: '−'; }
.glosario p { margin: 0 0 var(--esp-3) 24px; color: var(--tinta-2); max-width: 62ch; text-wrap: pretty; }

/* pie */
.pie { margin-top: var(--esp-6); padding-top: var(--esp-4); border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 14px; }
.pie p { margin: 0 0 var(--esp-2); }
.aviso-grande { margin: var(--esp-6) 0; font: 700 22px var(--f-texto); color: var(--aviso); }

/* entrada: una sola vez y suave (página de visita ocasional); nada si se pide menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  .principal, .instrumentos, .bloque { animation: entrar .5s cubic-bezier(.23, 1, .32, 1) both; }
  .instrumentos { animation-delay: 60ms; } .bloque { animation-delay: 120ms; }
  @keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .ctl select, .info { transition: box-shadow .15s ease-out, color .15s ease-out; }
}

/* móvil */
@media (max-width: 880px) {
  .principal { grid-template-columns: 1fr; gap: var(--esp-4); }
  .noche-datos { grid-template-columns: 1fr; gap: var(--esp-4); }
  .graficas, .glosario { grid-template-columns: 1fr; }
  .instrumentos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
  .inst { min-height: 0; padding: var(--esp-3); }
  .inst-valor.grande { font-size: 30px; }
}
@media print { body { background: #fff; color: #000; } .controles, .prevision-marco { display: none; } }

/* ── la línea del cielo (ayer, hoy y mañana) con manija ── */
.subseccion { margin: var(--esp-5) 0 var(--esp-2); font: 700 19px/1.2 var(--f-texto); }
.linea { position: relative; margin-top: var(--esp-3); padding-top: 2px; touch-action: pan-y; cursor: grab; user-select: none; }
.linea.arrastrando { cursor: grabbing; }
.li-nubes { position: relative; height: 10px; margin-top: 3px; border-radius: 3px; background: var(--linea); }
.li-nube { position: absolute; top: 0; bottom: 0; background: var(--fr-luna); }
.li-dia { font-weight: 500; color: var(--tinta-2); text-transform: capitalize; }
.li-nube-l { background: var(--fr-luna); opacity: .6; }
.li-lectura { margin-top: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--r); background: var(--fx-cristal, var(--panel)); box-shadow: 0 0 0 1px var(--linea); }
.li-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--esp-3); }
.li-cab b { font: 700 18px var(--f-texto); text-transform: capitalize; }
.li-fuente { font: 500 11px/1.6 var(--f-dato); letter-spacing: .1em; text-transform: uppercase; padding: 0 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--linea-2); color: var(--tinta-2); }
.li-medido { color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); } .li-previsto { color: var(--cielo); box-shadow: inset 0 0 0 1px var(--cielo); }
.li-fase { font-size: 14px; color: var(--tinta-2); }
.li-v { margin: var(--esp-2) 0; font: 800 20px/1.2 var(--f-texto); }
.li-v.v-bueno { color: var(--ok); } .li-v.v-regular { color: var(--aviso); } .li-v.v-malo { color: var(--malo); } .li-v.v-dia, .li-v.v-sin { color: var(--tinta-2); }
.li-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 var(--esp-4); }
.li-dato { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: var(--esp-2); min-height: 32px; border-bottom: 1px solid var(--linea); font-size: 15px; }
.li-dato b { font: 500 13px var(--f-dato); }
.li-dato i { width: 10px; height: 10px; justify-self: center; }
.li-dato.c-ok i { border-radius: 50%; background: var(--ok); } .li-dato.c-aviso i { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--aviso); }
.li-dato.c-malo i { background: var(--malo); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.li-dato.c-info i { width: 8px; height: 2px; background: var(--tinta-3); }
.li-datos { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.li-dato b { white-space: nowrap; }

/* ── la línea del cielo v2 (9-oct, con David): zoom, flechas, calendario, «hoy» bien marcado, la estrella de manija ── */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.li-mando { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-3); }
.li-nav { display: inline-flex; align-items: center; gap: 4px; }
.li-btn, .li-ahora-btn, .li-fecha input { min-height: 40px; min-width: 40px; border: 0; border-radius: var(--r-in); background: var(--fx-cristal, var(--panel)); box-shadow: 0 0 0 1px var(--linea-2); color: var(--tinta); cursor: pointer; }
.li-btn { padding: 0; font: 500 22px/1 var(--f-dato); }
.li-btn:disabled { opacity: .3; cursor: default; }
.li-fecha input { padding: 0 10px; font: 500 13px var(--f-dato); color-scheme: dark; }
:root[data-modo="bn"] .li-fecha input { color-scheme: light; }
.li-zoom { display: inline-flex; gap: 2px; padding: 3px; border-radius: calc(var(--r-in) + 3px); background: var(--fx-cristal, var(--panel)); box-shadow: 0 0 0 1px var(--linea-2); }
.li-zoom button { min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-in); background: transparent; color: var(--tinta-2); font: 600 14px var(--f-texto); cursor: pointer; white-space: nowrap; }
.li-zoom button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }
.li-ahora-btn { margin-left: auto; padding: 0 14px; font: 600 14px var(--f-texto); }
.li-btn:focus-visible, .li-zoom button:focus-visible, .li-ahora-btn:focus-visible, .li-fecha input:focus-visible, .ley:focus-visible, .rosa-btn:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }

/* filas de la línea: días (20) · Luna (6) · franjas (34) · nubes (10) · horas (18). La manija y «ahora» van de la Luna a las nubes */
.li-dias { position: relative; height: 20px; }
.li-dia-etq { position: absolute; top: 0; transform: translateX(-50%); padding: 0 6px; font: 500 11px/18px var(--f-dato); color: var(--tinta-2); text-transform: capitalize; white-space: nowrap; }
.li-dia-etq.hoy { border-radius: 4px; background: var(--tinta); color: var(--fondo); }
.li-dia-etq.hoy b { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fr-lunas { margin-top: 4px; }
.li-sep { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: color-mix(in srgb, var(--tinta) 45%, transparent); pointer-events: none; }
.li-hoy { position: absolute; top: 0; bottom: 0; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--tinta); pointer-events: none; }
.li-ahora { position: absolute; top: 24px; bottom: 20px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--naranja); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 10px var(--naranja); pointer-events: none; }
:root[data-modo="noche"] .li-ahora, :root[data-modo="bn"] .li-ahora { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.li-ahora-etq { position: absolute; top: 1px; transform: translateX(-50%); padding: 0 6px; border-radius: 4px; background: var(--naranja); color: #1a0c00; font: 600 10px/16px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
:root[data-modo="noche"] .li-ahora-etq { color: #000; }
.li-manija { position: absolute; top: 24px; bottom: 20px; width: 44px; margin-left: -22px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.li-manija::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--tinta); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.li-estrella { position: absolute; left: 4px; top: 12px; width: 36px; height: 36px; overflow: visible; filter: drop-shadow(0 0 6px var(--fx-halo, transparent)); }
.li-estrella path { fill: var(--tinta); stroke: var(--fondo); stroke-width: 2.6; stroke-linejoin: round; paint-order: stroke; }
.li-manija:focus-visible { outline: none; } .li-manija:focus-visible .li-estrella path { stroke: var(--cielo); }
.fr-luna { cursor: default; }

/* leyenda: cada pieza es un botón que se explica sola */
.leyenda { gap: 2px var(--esp-1); }
.ley { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--tinta-2); font: 400 13px var(--f-texto); cursor: help; }
.ley:hover { background: var(--linea); color: var(--tinta); }

/* ── rosa de los vientos ── */
.rosa-btn { position: relative; display: block; width: 108px; margin: -4px 0 -2px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: zoom-in; }
.rosa-btn::after { content: '⤢'; position: absolute; right: -10px; top: 0; font: 500 13px var(--f-dato); color: var(--tinta-3); }
.brujula { display: block; width: 100%; overflow: visible; }
.brujula-aro { fill: none; stroke: var(--linea-2); }
.brujula-ticks { fill: none; stroke: var(--tinta-3); stroke-width: .7; }
.brujula-letra { font: 500 7.5px var(--f-dato); fill: var(--tinta-2); }
.brujula-letra.norte { fill: var(--tinta); font-weight: 700; }
.rosa-c1 { fill: color-mix(in srgb, var(--cielo) 30%, transparent); }
.rosa-c2 { fill: color-mix(in srgb, var(--cielo) 10%, transparent); }
.rosa-sector { fill: none; stroke: var(--naranja); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 2.5px var(--naranja)); }
:root[data-modo="noche"] .rosa-sector, :root[data-modo="bn"] .rosa-sector { filter: none; }
.rosa-rastro { fill: var(--cielo); }
.rosa-eje { fill: var(--tinta); }
.brujula-flecha { fill: var(--naranja); }
.brujula-astil { fill: none; stroke: var(--naranja); stroke-width: 1.4; stroke-linecap: round; }
.rosa-nombre { font: 600 6px var(--f-dato); letter-spacing: .08em; text-transform: uppercase; fill: var(--tinta-3); }
.rosa-nombre.activo { fill: var(--naranja); font-weight: 700; }

/* la rosa en grande, en un diálogo */
.dlg { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r); background: var(--fondo-2); color: var(--tinta); box-shadow: 0 0 0 1px var(--linea-2), 0 24px 64px rgba(0, 0, 0, .5); }
.dlg::backdrop { background: rgba(2, 3, 20, .62); backdrop-filter: blur(3px); }
:root[data-modo="noche"] .dlg::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: none; }
:root[data-modo="bn"] .dlg::backdrop { background: rgba(255, 255, 255, .7); backdrop-filter: none; }
.dlg-caja { position: relative; padding: var(--esp-4); }
.dlg-cerrar { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: var(--r-in); background: transparent; color: var(--tinta-2); font: 300 30px/1 var(--f-texto); cursor: pointer; }
.dlg-cerrar:hover { color: var(--tinta); background: var(--linea); }
.dlg-cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--esp-4); align-items: center; margin-top: var(--esp-2); }
.dlg .brujula.grande { justify-self: center; max-width: 360px; }
.dlg .brujula-letra { font-size: 6px; }
.dlg-viento { margin: 2px 0 var(--esp-2); font: 800 34px/1.1 var(--f-texto); }
.dlg-viento small { font: 500 13px var(--f-dato); color: var(--tinta-2); }
.dlg-local { margin: 0 0 var(--esp-2); color: var(--tinta-2); } .dlg-local b { color: var(--naranja); }
.dlg-desc { margin: 0 0 var(--esp-3); color: var(--tinta-2); text-wrap: pretty; }

/* ayuda que sale al segundo de estar encima de una «i» (o al tocarla) */
.pop { position: fixed; z-index: 60; max-width: min(340px, calc(100vw - 32px)); padding: 12px 14px; border-radius: var(--r-in); background: var(--fondo-2); color: var(--tinta); box-shadow: 0 0 0 1px var(--linea-2), 0 12px 32px rgba(0, 0, 0, .45); font-size: 14px; line-height: 1.45; }
.pop b { display: block; margin-bottom: 4px; font: 700 15px/1.3 var(--f-texto); }
.pop p { margin: 0 0 6px; color: var(--tinta-2); text-wrap: pretty; }
.pop-mas { min-height: 28px; padding: 0; border: 0; background: none; color: var(--cielo); font: 600 13px var(--f-texto); cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .dlg[open] { animation: dlg-entra .22s cubic-bezier(.23, 1, .32, 1); }
  @keyframes dlg-entra { from { opacity: 0; transform: scale(.96); } }
  .pop:not([hidden]) { animation: pop-entra .16s cubic-bezier(.23, 1, .32, 1); }
  @keyframes pop-entra { from { opacity: 0; transform: translateY(4px); } }
  .rosa-btn::after { opacity: 0; transition: opacity .15s ease-out; }
  .rosa-btn:hover::after, .rosa-btn:focus-visible::after { opacity: 1; }
}
@media (max-width: 880px) {
  .li-ahora-btn { margin-left: 0; }
  .dlg-cuerpo { grid-template-columns: 1fr; }
  .rosa-btn { width: 96px; }
}
.li-modelo { color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linea-2); }
.v-solbueno .v-texto, .li-v.v-solbueno { color: var(--ok); } .v-solregular .v-texto, .li-v.v-solregular { color: var(--aviso); } .v-solmalo .v-texto, .li-v.v-solmalo { color: var(--malo); }

/* el cuadradito de la esquina de cada panel: lo abre en grande */
.inst .etq { padding-right: 34px; }
.ampliar { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--tinta-3); cursor: zoom-in; }
.ampliar::after { content: ''; position: absolute; inset: -6px; }
.ampliar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ampliar:hover { color: var(--tinta); background: var(--linea); }
.ampliar:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.inst.alarma .i-limite, .inst.aviso .i-limite { margin-right: 4px; }

/* el panel en grande */
.dlg-cifra { margin: 0; font: 200 clamp(56px, 9vw, 96px)/1 var(--f-texto); letter-spacing: -0.02em; text-align: center; font-variant-numeric: tabular-nums; }
.dlg-medidor { display: grid; justify-items: center; }
.dlg-medidor .arco { width: min(260px, 100%); margin: 0; }
.dlg-medidor .dlg-cifra { margin-top: -56px; font-size: 48px; }
.dlg-limites { display: flex; flex-wrap: wrap; gap: 4px var(--esp-4); margin: 0 0 var(--esp-3); font: 500 13px var(--f-dato); color: var(--tinta-2); }
.dlg-limites span { display: inline-flex; align-items: center; gap: 8px; }
.dlg-limites i { width: 10px; height: 10px; }
.dlg-limites .c-aviso i { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--aviso); }
.dlg-limites .c-malo i { background: var(--malo); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.dlg-g { margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-3) var(--esp-2); }
.dlg-g figcaption { min-height: 24px; }

/* los ocho vientos, desplegables */
.dlg-vientos { margin-top: var(--esp-4); border-top: 1px solid var(--linea); }
.dlg-vientos summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: 700 16px var(--f-texto); list-style: none; }
.dlg-vientos summary::-webkit-details-marker { display: none; }
.dlg-vientos summary::before { content: '+'; width: 24px; font: 400 18px var(--f-dato); color: var(--naranja); }
.dlg-vientos[open] summary::before { content: '−'; }
.dlg-vientos dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-4); margin: 0 0 var(--esp-4); }
.dlg-vientos dl div { padding: var(--esp-2) var(--esp-3); border-radius: var(--r-in); box-shadow: inset 0 0 0 1px var(--linea); }
.dlg-vientos dl div.activo { box-shadow: inset 0 0 0 1px var(--naranja); }
.dlg-vientos dt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dlg-vientos dt b { font: 700 17px var(--f-texto); }
.dlg-vientos .activo dt b { color: var(--naranja); }
.dlg-vientos dt small { font: 500 11px var(--f-dato); letter-spacing: .06em; color: var(--tinta-3); }
.dlg-vientos dd { margin: 4px 0 0; font-size: 14px; color: var(--tinta-2); text-wrap: pretty; }
.dlg-vientos > .etq { display: block; margin-bottom: var(--esp-2); }
@media (max-width: 640px) { .dlg-vientos dl { grid-template-columns: 1fr; } }

/* la lectura del momento: los valores largos (viento con su nombre) se parten a la derecha en vez de salirse */
.li-dato { grid-template-columns: 14px auto minmax(0, 1fr); }
.li-dato b { white-space: normal; text-align: right; overflow-wrap: anywhere; }
.li-dato span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ── tanda 3 (9-oct): Luna con nombre, nubes en tres capas, termómetro, paneles personalizables ── */
/* filas: días (20) · Luna (14) · franjas (34) · nubes altas/medias/bajas (3 × 5) · horas (18) */
.fr-lunas { height: 14px; margin-bottom: 4px; }
.fr-luna { position: absolute; top: 0; height: 14px; border-radius: 7px; background: transparent; overflow: hidden; display: flex; align-items: center; padding-left: 6px; font: 600 9.5px/1 var(--f-dato); color: var(--fondo); white-space: nowrap; }
.fr-luna::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fr-luna); opacity: var(--a, 1); }
.fr-lunas { isolation: isolate; }
.li-nubes { height: auto; display: grid; gap: 1px; background: transparent; }
.li-nubes-fila { position: relative; height: 5px; border-radius: 2px; background: var(--linea); }
.li-ahora, .li-manija { top: 24px; bottom: 20px; }
.li-estrella { top: 19px; }

/* el cuadradito de ampliar, casi minúsculo (David, 9-oct) */
.ampliar { top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 5px; opacity: .55; }
.ampliar svg { width: 11px; height: 11px; stroke-width: 1.8; }
.ampliar:hover, .ampliar:focus-visible { opacity: 1; }
.ampliar::after { inset: -9px; }
.inst .etq { padding-right: 22px; }

/* termómetro de frío a calor */
.termo { margin-top: var(--esp-3); max-width: 420px; }
.termo-barra { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #5aa9ff 0%, #74e3cf 22%, #a8e06a 42%, #ffd166 60%, #f5924a 78%, #ff5a4a 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.termo-hoy { position: absolute; top: -3px; bottom: -3px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--tinta); opacity: .7; }
.termo-ahora { position: absolute; top: -6px; left: var(--x); width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--tinta); box-shadow: 0 0 0 2px var(--fondo), 0 0 10px var(--fx-halo, transparent); }
.termo-escala { position: relative; height: 16px; margin-top: 6px; }
.termo-marca { position: absolute; transform: translateX(-50%); font: 400 10px var(--f-dato); color: var(--tinta-3); }
.sensacion { font-weight: 700; color: var(--tinta); }
.inst .termo { margin-top: var(--esp-2); }
:root[data-modo="noche"] .termo-barra { background: linear-gradient(90deg, #3a0802, #ff5a45); }
:root[data-modo="bn"] .termo-barra { background: linear-gradient(90deg, #ddd, #222); }
@media (prefers-reduced-motion: no-preference) {
  .fx-encender .termo-ahora { animation: fx-termo 1.1s cubic-bezier(.23, 1, .32, 1) both; }
  @keyframes fx-termo { from { left: 0; } }
}

/* paneles: el botón de personalizar y su diálogo */
.inst-pie { display: flex; justify-content: flex-end; margin-top: var(--esp-2); }
.personalizar { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--tinta-3); font: 500 11px var(--f-dato); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.personalizar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.personalizar:hover { color: var(--tinta); background: var(--linea); }
.personalizar:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.dlg-estrecho { width: min(460px, calc(100vw - 32px)); }
.pan-lista { list-style: none; margin: var(--esp-3) 0; padding: 0; }
.pan-lista li { display: grid; grid-template-columns: 1fr 40px 40px; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--linea); }
.pan-lista label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 16px; }
.pan-lista input { width: 18px; height: 18px; accent-color: var(--naranja); }

/* solsticios, equinoccios y la Luna en la lectura del momento */
.li-efem { display: flex; flex-wrap: wrap; gap: 2px var(--esp-4); margin: 4px 0 0; font: 400 12.5px/1.5 var(--f-dato); color: var(--tinta-2); }
.li-efem span { display: inline-flex; align-items: center; gap: 6px; }
.li-hito { padding: 0 8px; border-radius: 4px; background: var(--naranja); color: #1a0c00; font: 600 11px/1.7 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; }

/* ── la viñeta del tiempo (como en el parte de la tele) ── */
.vineta { width: 40px; height: 34px; flex: none; overflow: visible; }
.vi-sol circle { fill: #ffd166; } .vi-sol path { stroke: #ffd166; stroke-width: 2; stroke-linecap: round; fill: none; }
.vi-luna { fill: #e9edf7; }
.vi-nube { fill: #f1f4f9; stroke: rgba(0, 0, 0, .12); stroke-width: .6; }
.vi-gris { fill: #b7c0ce; } .vi-oscura { fill: #6d768b; }
.vi-gota { stroke: #8ec5ff; stroke-width: 2.2; stroke-linecap: round; }
.vi-rayo { fill: #ffd84d; stroke: #b98a00; stroke-width: .6; stroke-linejoin: round; }
.vi-niebla { stroke: #c9d1de; stroke-width: 2.4; stroke-linecap: round; fill: none; }
:root[data-modo="noche"] .vineta * { fill: none; stroke: var(--tinta); stroke-width: 1.4; }
:root[data-modo="bn"] .vineta * { fill: #fff; stroke: #000; stroke-width: 1.2; }
:root[data-modo="bn"] .vi-gris, :root[data-modo="bn"] .vi-oscura { fill: #bbb; }
.estado-cielo { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--esp-2); font-size: 18px; }
.estado-cielo .vineta { width: 52px; height: 44px; }
.estado-cielo b { font-weight: 700; }
.li-estado { display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--f-texto); }
.li-estado .vineta { width: 32px; height: 27px; }

/* ── «Ver el cielo»: el contenido se aparta y queda el cielo entero ── */
.ver-cielo { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-in); background: var(--panel); box-shadow: 0 0 0 1px var(--linea-2); color: var(--tinta); font: 600 14px var(--f-texto); cursor: pointer; }
.ver-cielo svg { width: 15px; height: 15px; fill: var(--naranja); }
.ver-cielo[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }
.ver-cielo:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.solo-cielo main, .solo-cielo .controles .ctl, .solo-cielo .logo { opacity: 0; pointer-events: none; }
.pastilla-cielo { display: none; }
.solo-cielo .pastilla-cielo { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--fx-cristal, var(--panel)); box-shadow: 0 0 0 1px var(--linea-2); font-size: 14px; color: var(--tinta-2); backdrop-filter: blur(6px); }
.pastilla-cielo b { color: var(--tinta); white-space: nowrap; text-transform: capitalize; }
.pastilla-cielo .vineta { width: 34px; height: 29px; }
@media (prefers-reduced-motion: no-preference) {
  main, .controles .ctl, .logo { transition: opacity .45s ease-in-out; }
}
@media (max-width: 640px) { .ver-cielo span { display: none; } .pastilla-cielo span { display: none; } }

/* auditoría impeccable (9-oct): nada de texto por debajo de 11 px; «Paneles» sin mayúsculas espaciadas encima de un título */
.termo-marca, .li-ahora-etq, .ley small { font-size: 11px; }
.fr-lunas { height: 16px; }
.fr-luna { height: 16px; border-radius: 8px; font-size: 11px; }
.li-estrella { top: 21px; }
.personalizar { font: 500 13px var(--f-texto); letter-spacing: 0; text-transform: none; }

/* ── tanda 4 (9-oct): columna de capas, filas de la línea con nombre, botón de las nubes, escenarios ── */
/* la columna de capas: en el margen izquierdo del cielo, a la altura a la que se pintan (Escena.BANDAS) */
.columna-capas { position: fixed; left: 0; top: 0; z-index: 1; width: 96px; height: calc(max(100vh, 700px) - var(--alto-dock, 0px)); pointer-events: none; display: none; }
@media (min-width: 1640px) { .columna-capas { display: block; } }
.solo-cielo .columna-capas { display: block; }
.sin-nubes .columna-capas, :root[data-modo="bn"] .columna-capas { display: none; }
.cc-capa { position: absolute; left: 14px; right: 6px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); }
.cc-etq { font: 500 11px/1.2 var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.cc-capa b, .cc-precip b { font: 600 13px/1.3 var(--f-dato); color: var(--tinta); font-variant-numeric: tabular-nums; }
.cc-capa i { display: block; width: 56px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--tinta) var(--p), color-mix(in srgb, var(--tinta) 18%, transparent) var(--p)); }
.cc-niebla .cc-etq { color: var(--tinta-3); }
.cc-precip { position: absolute; left: 14px; bottom: 8px; padding-left: 10px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--cielo); }
.cc-precip b { font-size: 12px; }

/* el botón de las nubes, junto a «Ver el cielo» */
.nubes-btn { align-self: flex-end; display: grid; place-items: center; width: 44px; min-height: 40px; padding: 0; border: 0; border-radius: var(--r-in); background: var(--panel); box-shadow: 0 0 0 1px var(--linea-2); color: var(--tinta-3); cursor: pointer; }
.nubes-btn svg { width: 22px; height: 17px; fill: currentColor; }
.nubes-btn[aria-pressed="true"] { color: var(--tinta); }
.nubes-btn[aria-pressed="false"] svg { opacity: .4; }
.nubes-btn[aria-pressed="false"]::after { content: ''; position: absolute; width: 26px; height: 2px; background: var(--tinta-3); transform: rotate(-35deg); }
.nubes-btn { position: relative; }
.nubes-btn:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }

/* la línea: nombre de cada fila a la izquierda; nubes, niebla y lluvia en filas de 11 px */
.linea-marco { display: grid; grid-template-columns: 54px minmax(0, 1fr); }
.linea-etq { position: relative; }
.linea-etq span { position: absolute; left: 0; right: 6px; height: 12px; font: 500 11px/12px var(--f-dato); color: var(--tinta-3); text-align: right; white-space: nowrap; }
.linea-etq span:first-child { height: 16px; line-height: 16px; }
.li-nubes { gap: 1px; }
.li-nubes-fila { height: 11px; }
.li-fila-niebla .li-nube { background: var(--tinta-2); }
.li-fila-lluvia .li-nube { background: var(--cielo); }
@media (max-width: 640px) { .linea-marco { grid-template-columns: 46px minmax(0, 1fr); } }

/* la muestra (escenario elegido) se dice en la lectura */
.li-muestra { padding: 0 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--aviso); color: var(--aviso); font: 600 11px/1.7 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; }
.pastilla-cielo .pas-info { display: inline-flex; align-items: center; gap: 10px; }
.pas-esc select { min-height: 36px; padding: 0 28px 0 10px; border: 0; border-radius: 999px; color: var(--tinta); background-color: var(--panel); box-shadow: 0 0 0 1px var(--linea-2); font: 600 13px var(--f-texto); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.pas-esc select:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.vi-piedra { fill: #f2f6ff; stroke: #8796ad; stroke-width: .6; }
.vi-copo { stroke: #f2f6ff; stroke-width: 1.4; stroke-linecap: round; fill: none; }
/* los rótulos de la columna se leen también encima de una nube blanca */
.cc-etq, .cc-capa b, .cc-precip b { text-shadow: 0 0 3px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .5); }
:root[data-modo="noche"] .cc-etq, :root[data-modo="noche"] .cc-capa b { text-shadow: none; }

/* ── la barra de abajo, fija (9-oct, como Ventusky): el mando del tiempo siempre a mano ── */
body { padding-bottom: var(--alto-dock, 120px); }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 8px 16px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--fondo) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 -1px 0 var(--linea-2), 0 -14px 34px rgba(0, 0, 0, .28); }
:root[data-modo="bn"] .dock { background: #fff; backdrop-filter: none; box-shadow: 0 -1px 0 #000; }
.dock-dentro { max-width: 1440px; margin: 0 auto; display: grid; gap: 6px; }
.dock-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dock .li-mando { margin: 0; gap: 4px; }
.dock .li-btn, .dock .li-fecha input, .dock .li-ahora-btn { min-height: 36px; min-width: 36px; }
.dock .li-ahora-btn { margin-left: 0; }
.dk-play { font-size: 15px; color: var(--naranja); }
.dk-play[aria-pressed="true"] { background: var(--naranja); color: #1a0c00; font-size: 12px; letter-spacing: -.1em; }
.dk-lectura { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; font-size: 14px; color: var(--tinta-2); }
.dk-lectura .vineta { width: 30px; height: 26px; }
.dk-lectura b { color: var(--tinta); text-transform: capitalize; }
.dk-lectura > span { overflow: hidden; text-overflow: ellipsis; }
.dk-v { font-weight: 700; }
.dk-v.v-bueno, .dk-v.v-solbueno { color: var(--ok); } .dk-v.v-regular, .dk-v.v-solregular { color: var(--aviso); } .dk-v.v-malo, .dk-v.v-solmalo { color: var(--malo); }
.dk-esc { display: none; }
.solo-cielo .dk-esc { display: block; }
.dk-esc select { min-height: 36px; padding: 0 28px 0 10px; border: 0; border-radius: var(--r-in); color: var(--tinta); background-color: var(--panel); box-shadow: 0 0 0 1px var(--linea-2); font: 600 13px var(--f-texto); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.dk-esc select:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.dock .leyenda { display: none; margin: 0; }
.dock.abierto .leyenda { display: flex; }

/* la línea dentro de la barra: filas en rejilla con alturas por variable; la manija y «ahora» ocupan de la Luna a las nubes */
.dock .linea-marco { --h-dias: 16px; --h-luna: 6px; --h-barra: 16px; --h-horas: 14px; --est: 26px; --hueco: 3px;
  display: grid; grid-template-columns: 0 minmax(0, 1fr); }
.dock.abierto .linea-marco { --h-dias: 20px; --h-luna: 16px; --h-barra: 28px; --h-horas: 18px; --est: 32px; grid-template-columns: 54px minmax(0, 1fr); }
.dock .linea { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--h-dias) var(--h-luna) var(--h-barra) auto var(--h-horas); row-gap: var(--hueco); margin: 0; padding: 0; }
.dock .li-dias, .dock .fr-lunas, .dock .fr-cielo, .dock .li-nubes, .dock .fr-horas { margin: 0; min-height: 0; }
.dock .li-dias { height: var(--h-dias); }
.dock .li-dia-etq { line-height: var(--h-dias); }
.dock .fr-lunas { height: var(--h-luna); }
.dock .fr-luna { height: var(--h-luna); border-radius: calc(var(--h-luna) / 2); }
.dock:not(.abierto) .fr-luna { font-size: 0; padding: 0; }
.dock .fr-cielo { height: var(--h-barra); }
.dock .fr-horas { height: var(--h-horas); }
.dock .li-ahora, .dock .li-manija { grid-row: 2 / 5; grid-column: 1; top: 0; bottom: 0; }
.dock .li-estrella { width: var(--est); height: var(--est); left: calc(22px - var(--est) / 2); top: calc(var(--h-luna) + var(--hueco) + var(--h-barra) / 2 - var(--est) / 2); }
.dock .li-nubes { margin: 0; }
.dock:not(.abierto) .li-nubes-fila:not(.li-fila-total) { display: none; }
.dock:not(.abierto) .li-fila-total { height: 5px; }
.dock.abierto .li-fila-total { display: none; }
.dock.abierto .li-nubes-fila { height: 11px; }
.dock .linea-etq { display: grid; grid-template-rows: var(--h-dias) var(--h-luna) var(--h-barra) auto var(--h-horas); row-gap: var(--hueco); overflow: hidden; }
.dock .linea-etq span { position: static; height: auto; }
.dock .le-luna { grid-row: 2; font: 500 11px/16px var(--f-dato); color: var(--tinta-3); text-align: right; padding-right: 6px; }
.dock .le-nubes { grid-row: 4; display: grid; gap: 1px; }
.dock .le-nubes span { height: 11px; font: 500 11px/11px var(--f-dato); color: var(--tinta-3); text-align: right; padding-right: 6px; white-space: nowrap; }
.dock:not(.abierto) .linea-etq { visibility: hidden; }
@media (max-width: 760px) {
  .dock { padding-inline: 10px; }
  .dk-lectura { order: 10; flex-basis: 100%; font-size: 13px; }
  .dock .li-zoom button { padding: 0 8px; }
}
/* «Ver el cielo»: el contenido se va, la barra se queda */
.solo-cielo .dock { background: color-mix(in srgb, var(--fondo) 55%, transparent); }
/* plegada, la columna de nombres NO ocupa (antes, oculta pero con altura, estiraba la fila de nubes: hueco de 54 px) */
.dock:not(.abierto) .linea-marco { grid-template-columns: minmax(0, 1fr); }
.dock:not(.abierto) .linea-etq { display: none; }
.dock .linea, .dock .linea-etq { align-content: start; }
/* la fase de la Luna dibujada al principio de cada barrita */
.li-luna-fase { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 4px; flex: none; }
.li-luna-fase .luna-svg { width: 12px; height: 12px; filter: none; }
.dock .linea-marco { --h-luna: 12px; }
.dock.abierto .linea-marco { --h-luna: 16px; }
.dock:not(.abierto) .fr-luna { padding-left: 1px; }
.dock:not(.abierto) .li-luna-fase { width: 11px; height: 11px; margin: 0; }
.dock:not(.abierto) .li-luna-fase .luna-svg { width: 10px; height: 10px; }
/* lunas especiales en la barrita de la Luna: de sangre (eclipse total) roja, eclipse parcial rojiza, azul, superluna */
.fr-luna.luna-sangre::before { background: #c0392b; opacity: .95; }
.fr-luna.luna-sangre { color: #fff; }
.luna-sangre .luna-luz { fill: #ff6a4d; }
.fr-luna.luna-eclipse::before { background: linear-gradient(90deg, var(--fr-luna), #c0392b); }
.fr-luna.luna-azul::before { background: #7fb2ff; opacity: .95; }
.luna-azul .luna-luz { fill: #cfe2ff; }
.luna-super .li-luna-fase { transform: scale(1.3); }
.luna-micro .li-luna-fase { transform: scale(.8); }
:root[data-modo="noche"] .fr-luna.luna-azul::before, :root[data-modo="noche"] .fr-luna.luna-sangre::before { background: var(--fr-luna); }

/* termómetro VERTICAL junto a la cifra (David, 9-oct): de −15 a 45 °C, frío abajo y calor arriba; la cifra, siempre blanca */
.temp-fila { display: flex; align-items: stretch; gap: 20px; }
.termo-v { display: flex; gap: 6px; max-width: none; margin: 0; padding-block: 12px 6px; }
.termo-v .termo-barra { width: 8px; height: auto; flex: none; background: linear-gradient(0deg, #5aa9ff 0%, #74e3cf 22%, #a8e06a 42%, #ffd166 60%, #f5924a 78%, #ff5a4a 100%); }
.termo-v .termo-hoy { left: -3px; right: -3px; top: auto; bottom: 0; }
.termo-v .termo-ahora { left: -6px; top: auto; bottom: var(--y); width: 20px; height: 4px; margin: 0 0 -2px 0; }
.termo-v .termo-escala { position: relative; width: 30px; height: auto; margin: 0; }
.termo-v .termo-marca { left: 0; transform: translateY(50%); line-height: 1; }
:root[data-modo="noche"] .termo-v .termo-barra { background: linear-gradient(0deg, #3a0802, #ff5a45); }
:root[data-modo="bn"] .termo-v .termo-barra { background: linear-gradient(0deg, #ddd, #222); }
@media (prefers-reduced-motion: no-preference) {
  .fx-encender .termo-v .termo-ahora { animation: fx-termo-v 1.1s cubic-bezier(.23, 1, .32, 1) both; }
  @keyframes fx-termo-v { from { bottom: 0; } }
}
/* con el último dato de hace un rato: se dice, en ámbar, sin quitar el veredicto */
.v-viejo { margin: -6px 0 var(--esp-2); font: 500 12px var(--f-dato); color: var(--aviso); }

/* escala de oscuridad del SQM estimado: de ciudad (claro) a cielo oscuro (azul noche) */
.sqm-escala .termo-barra { background: linear-gradient(90deg, #c9b98a 0%, #6f7a94 40%, #24306a 75%, #05071f 100%); }
.sqm-base { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--cielo); opacity: .8; }
:root[data-modo="noche"] .sqm-escala .termo-barra { background: linear-gradient(90deg, #ff5a45, #1a0402); }
:root[data-modo="bn"] .sqm-escala .termo-barra { background: linear-gradient(90deg, #eee, #111); }
.vi-gorda { stroke-width: 3; }

/* ── pestañas «Ahora» · «Efemérides» ── */
.barra { flex-wrap: wrap; }
.pestanas { display: inline-flex; gap: 2px; padding: 3px; border-radius: calc(var(--r-in) + 3px); background: var(--fx-cristal, var(--panel)); box-shadow: 0 0 0 1px var(--linea-2); align-self: flex-end; }
.pestanas button { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-in); background: transparent; color: var(--tinta-2); font: 600 15px var(--f-texto); cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--tinta); color: var(--fondo); }
.pestanas button:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.efem-pagina { max-width: 1440px; margin: 0 auto; padding: 0 16px var(--esp-6); }
.solo-cielo .efem-pagina { opacity: 0; pointer-events: none; }

/* ── efemérides ── */
.ef:first-child { margin-top: var(--esp-4); }
.ef-subt { margin: 0; font-size: 17px; color: var(--tinta-2); text-wrap: balance; }
.ef-subt b { color: var(--tinta); text-transform: capitalize; }
.ef-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-4); }
.ef-tarjeta { position: relative; padding: var(--esp-4); border-radius: var(--r); background: var(--fx-cristal, var(--panel)); box-shadow: 0 0 0 1px var(--linea), inset 0 1px 0 0 var(--fx-filo, transparent); }
.ef-tarjeta .efem { margin-top: var(--esp-2); }
.ef-cab { display: flex; align-items: center; gap: var(--esp-3); }
.ef-cab .luna-svg { width: 56px; height: 56px; }
.ef-grande { margin: 2px 0 0; font: 700 22px/1.15 var(--f-texto); }
.ef-nota { margin: var(--esp-3) 0 0; color: var(--tinta-2); }
.ef-nota b { color: var(--tinta); }
.ef-vis { margin-top: var(--esp-3); }
.ef-grafico { --ef-nombre: 92px; position: relative; display: grid; gap: 4px; margin-top: var(--esp-3); }
.ef-fila, .ef-horas { display: grid; grid-template-columns: var(--ef-nombre) minmax(0, 1fr); align-items: center; }
.ef-nombre { font: 500 13px var(--f-texto); color: var(--tinta-2); padding-right: 10px; text-align: right; }
.ef-pista { position: relative; height: 16px; border-radius: 4px; overflow: hidden; }
.ef-pista > span { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; }
.ef-fondo { position: absolute; inset: 0; opacity: .5; }
.ef-fondo .fr { position: absolute; top: 0; bottom: 0; }
.ef-horas .ef-pista { height: 18px; overflow: visible; }
.ef-horas .ef-pista > span { position: absolute; top: 2px; transform: translateX(-50%); font: 400 11px var(--f-dato); color: var(--tinta-3); background: none; }
.ef-marca { position: absolute; top: 0; bottom: 22px; width: 2px; margin-left: -1px; background: var(--tinta); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none; }
.ef-planetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--esp-3); margin-top: var(--esp-3); }
.ef-planeta { opacity: .72; }
.ef-planeta.visible { opacity: 1; box-shadow: 0 0 0 1px var(--linea-2), inset 0 1px 0 0 var(--fx-filo, transparent); }
.ef-punto { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: 0 0 10px var(--fx-halo, transparent); }
.ef-mag { margin-left: auto; font: 600 18px var(--f-dato); font-variant-numeric: tabular-nums; }
.ef-mag small { font: 500 11px var(--f-dato); color: var(--tinta-3); }
.ef-cuando { margin: var(--esp-2) 0 0; font-weight: 700; color: var(--tinta); }
.ef-planeta:not(.visible) .ef-cuando { color: var(--tinta-3); font-weight: 400; }
.ef-mando { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-3); }
.ef-filtros { flex-wrap: wrap; }
.ef-mes { margin: var(--esp-4) 0 var(--esp-2); font: 700 17px var(--f-texto); text-transform: capitalize; color: var(--tinta-2); }
.ef-lista { list-style: none; margin: 0; padding: 0; }
.ef-suceso { display: grid; grid-template-columns: 150px 28px minmax(0, 1fr); align-items: start; gap: var(--esp-2); padding: 8px 0; border-bottom: 1px solid var(--linea); }
.ef-suceso time { font: 500 13px/1.6 var(--f-dato); color: var(--tinta-2); text-transform: capitalize; font-variant-numeric: tabular-nums; }
.ef-suceso b { display: block; font-weight: 700; }
.ef-suceso div span { display: block; font-size: 14px; color: var(--tinta-2); }
.ef-icono { display: grid; place-items: center; width: 22px; height: 22px; }
.ef-icono .luna-svg { width: 20px; height: 20px; }
.ef-ico { width: 12px; height: 12px; border-radius: 50%; }
.ef-ico-eclipses { background: radial-gradient(circle at 35% 50%, var(--fondo) 45%, var(--naranja) 47%); box-shadow: 0 0 0 1px var(--naranja); }
.ef-ico-planetas { background: #f0dcb4; }
.ef-ico-estaciones { background: #ffd166; border-radius: 2px; transform: rotate(45deg); }
.ef-ico-meteoros { width: 16px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, var(--tinta)); transform: rotate(-35deg); }
.ef-vis-si, .ef-vis-no { display: inline-block !important; margin-top: 2px; padding: 0 6px; border-radius: 4px; font: 600 11px/1.7 var(--f-dato); letter-spacing: .04em; }
.ef-vis-si { color: var(--ok) !important; box-shadow: inset 0 0 0 1px var(--ok); }
.ef-vis-no { color: var(--tinta-3) !important; box-shadow: inset 0 0 0 1px var(--linea-2); }
@media (max-width: 760px) {
  .ef-rejilla { grid-template-columns: 1fr; }
  .ef-grafico { --ef-nombre: 70px; }
  .ef-suceso { grid-template-columns: 1fr; gap: 2px; }
  .ef-suceso .ef-icono { display: none; }
}
/* «octubre de 2026» → «Octubre de 2026» (solo la primera letra) */
.ef-mes { text-transform: none; }
.ef-mes::first-letter { text-transform: uppercase; }

/* barra plegada más alta y con las tres capas de nubes a la vista (David, 9-oct: «está muy apretado abajo; más ancha en
   altura la barra de los días; no veo todos los tipos de nubes»). Desplegada (▴) suma niebla, lluvia y la leyenda. */
.dock:not(.abierto) .linea-marco { --h-dias: 18px; --h-luna: 14px; --h-barra: 26px; --h-horas: 16px; --est: 30px; grid-template-columns: 54px minmax(0, 1fr); }
.dock.abierto .linea-marco { --h-barra: 34px; --est: 36px; }
.dock:not(.abierto) .linea-marco .linea-etq { display: grid; visibility: visible; }
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-nubes_altas,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-nubes_medias,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-nubes_bajas,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-nubes { display: block; height: 10px; }
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-total,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-niebla,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-lluvia { display: none; }
.dock:not(.abierto) .le-nubes .le-niebla, .dock:not(.abierto) .le-nubes .le-lluvia { display: none; }
.dock:not(.abierto) .le-nubes span { height: 10px; line-height: 10px; }
.dock:not(.abierto) .fr-luna { font-size: 11px; padding-left: 3px; }
@media (max-width: 640px) { .dock .linea-marco, .dock:not(.abierto) .linea-marco { grid-template-columns: 46px minmax(0, 1fr); } }

/* barra de abajo al DOBLE de alto (David, 9-oct: «dale hasta el doble de altura») */
.dock:not(.abierto) .linea-marco { --h-dias: 24px; --h-luna: 24px; --h-barra: 52px; --h-horas: 22px; --est: 46px; --hueco: 4px; grid-template-columns: 64px minmax(0, 1fr); }
.dock.abierto .linea-marco { --h-dias: 26px; --h-luna: 28px; --h-barra: 64px; --h-horas: 22px; --est: 50px; --hueco: 4px; grid-template-columns: 64px minmax(0, 1fr); }
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-nubes_altas,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-nubes_medias,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-nubes_bajas,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-nubes { height: 20px; }
.dock.abierto .li-nubes .li-nubes-fila { height: 20px; }
.dock .li-nubes { gap: 2px; }
.dock .le-nubes { gap: 2px; }
.dock:not(.abierto) .le-nubes span, .dock.abierto .le-nubes span { height: 20px; line-height: 20px; font-size: 12px; }
.dock .le-luna { line-height: var(--h-luna); font-size: 12px; }
.dock .fr-luna { font-size: 12px; padding-left: 6px; }
.dock .li-luna-fase, .dock:not(.abierto) .li-luna-fase { width: 18px; height: 18px; margin-right: 6px; }
.dock .li-luna-fase .luna-svg, .dock:not(.abierto) .li-luna-fase .luna-svg { width: 16px; height: 16px; }
.dock .li-dia-etq { font-size: 13px; }
.dock .fr-h { font-size: 12px; top: 3px; }
.dock .li-ahora-etq { top: 3px; font-size: 11px; line-height: 17px; }
@media (max-width: 640px) {
  .dock .linea-marco, .dock:not(.abierto) .linea-marco { grid-template-columns: 52px minmax(0, 1fr); }
  .dock:not(.abierto) .linea-marco { --h-barra: 40px; --est: 38px; }
}

/* «Tipos de nubes»: botón en la barra y su ficha ilustrada */
.dk-nubes { display: inline-flex; align-items: center; gap: 8px; }
.dk-nubes svg { width: 20px; height: 15px; fill: currentColor; opacity: .85; }
.dlg-ancho { width: min(900px, calc(100vw - 32px)); }
.ln-lista { list-style: none; margin: var(--esp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.ln-tipo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--esp-3); align-items: center; padding: var(--esp-2) var(--esp-3); border-radius: var(--r-in); box-shadow: inset 0 0 0 1px var(--linea); background: color-mix(in srgb, var(--cielo-medio, #0c1446) 70%, transparent); }
.ln-dibujo { display: grid; place-items: center; height: 76px; }
.ln-dibujo img { max-width: 120px; max-height: 76px; }
.ln-dibujo .vineta { width: 64px; height: 54px; }
.ln-tipo b { display: block; font: 700 17px var(--f-texto); }
.ln-altura { display: block; font: 500 11px var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.ln-tipo p { margin: 4px 0 0; font-size: 14px; color: var(--tinta-2); text-wrap: pretty; }
.ln-niebla { display: grid; gap: 6px; width: 96px; }
.ln-niebla i { display: block; height: 10px; border-radius: 5px; background: #e2e6ee; opacity: .8; }
.ln-niebla i:nth-child(2) { width: 80%; margin-left: 14%; opacity: .6; }
.ln-niebla i:nth-child(3) { width: 90%; opacity: .45; }
.ln-cae { display: block; margin-top: var(--esp-4); }
:root[data-modo="noche"] .ln-dibujo img { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(-40deg) brightness(.6); }
:root[data-modo="bn"] .ln-dibujo img { filter: grayscale(1) contrast(1.2); }
@media (max-width: 760px) { .ln-lista { grid-template-columns: 1fr; } .ln-tipo { grid-template-columns: 90px minmax(0, 1fr); } .dk-nubes span { display: none; } }
/* la «i» junto a «Luna» en la columna de la barra */
.dock .le-luna { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.dock .le-luna .info { width: 16px; height: 16px; font-size: 10px; }
/* los rótulos de la columna de capas, sobre un fondo oscurito: se leen también encima de una nube blanca */
.cc-etq, .cc-capa b, .cc-precip b { width: fit-content; padding: 0 5px; border-radius: 4px; background: rgba(4, 8, 28, .5); }
:root[data-modo="noche"] .cc-etq, :root[data-modo="noche"] .cc-capa b { background: rgba(20, 0, 0, .6); }
/* veleta en calma: la flecha se queda, tenue, en la última dirección */
.aguja.calma { opacity: .4; }
/* los límites del arco de humedad: rayitas de color (ámbar aviso, roja límite) y su leyenda debajo de la cifra */
.arco-marca { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.arco-marca.aviso { stroke: var(--aviso); }
.arco-marca.malo { stroke: var(--malo); }
.arco-ley .aviso { color: var(--aviso); } .arco-ley .malo { color: var(--malo); }

/* ── barómetro de esfera ── */
.barometro { display: block; width: 128px; margin: 0 0 -4px; overflow: visible; }
.baro-zona { fill: none; stroke-width: 6; stroke-linecap: butt; }
.baro-tempestad { stroke: #e0604f; } .baro-lluvia { stroke: #e9a05a; } .baro-variable { stroke: #8c9cc4; } .baro-bueno { stroke: #6fc7a6; } .baro-seco { stroke: #e8cd6a; }
.baro-ticks { fill: none; stroke: var(--tinta-3); stroke-width: .9; }
.baro-aguja { fill: var(--naranja); } .baro-cola { stroke: var(--naranja); stroke-width: 2.4; stroke-linecap: round; }
:root[data-modo="noche"] .baro-zona { stroke: var(--tinta-3); } :root[data-modo="noche"] .baro-tempestad { stroke: var(--tinta); }
:root[data-modo="bn"] .baro-zona { stroke: #999; } :root[data-modo="bn"] .baro-tempestad { stroke: #000; }

/* ── pluviómetro ── */
.pluvio-fila { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-1); }
.pluvio-fila .inst-valor.grande { margin-top: 0; }
.pluviometro { width: 44px; height: 80px; flex: none; }
.pluvio-tubo { fill: color-mix(in srgb, var(--cielo) 6%, transparent); stroke: var(--linea-2); stroke-width: 1.4; }
.pluvio-agua { fill: color-mix(in srgb, var(--cielo) 70%, transparent); }
.pluvio-superficie { fill: color-mix(in srgb, var(--cielo) 95%, white); opacity: .8; }
.pluvio-escala, .pluvio-boca { fill: none; stroke: var(--tinta-3); stroke-width: 1.2; stroke-linecap: round; }
.tormenta-linea, .cal-transp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--esp-2); }
.tormenta-linea i, .cal-transp i { width: 9px; height: 9px; border-radius: 50%; }
.tormenta-linea.c-ok i, .cal-transp.c-ok i { background: var(--ok); }
.tormenta-linea.c-aviso i, .cal-transp.c-aviso i { box-shadow: inset 0 0 0 2px var(--aviso); }
.tormenta-linea.c-malo i, .cal-transp.c-malo i { background: var(--malo); }
.tormenta-linea b, .cal-transp b { color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) {
  .fx-encender .pluvio-agua, .fx-encender .pluvio-superficie { animation: fx-llenar 1.3s cubic-bezier(.23, 1, .32, 1) both; transform-box: fill-box; transform-origin: bottom; }
  @keyframes fx-llenar { from { transform: scaleY(0); } }
}

/* ── la estrella que tiembla según el seeing ── */
.estrella-seeing { position: absolute; top: 46px; right: 22px; width: 58px; height: 58px; fill: #f4f2e6; filter: drop-shadow(0 0 8px rgba(244, 242, 230, .6)); }
.estrella-seeing.s-aviso { fill: #f6e6bf; } .estrella-seeing.s-malo { fill: #f8d9b0; }
:root[data-modo="noche"] .estrella-seeing { fill: var(--tinta); filter: none; }
:root[data-modo="bn"] .estrella-seeing { fill: #000; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .estrella-seeing.s-ok { animation: fx-titila 3.2s ease-in-out infinite; }
  .estrella-seeing.s-aviso { animation: fx-tiembla 1.1s steps(6) infinite; }
  .estrella-seeing.s-malo { animation: fx-hierve .5s steps(5) infinite; }
  @keyframes fx-titila { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(.97); } }
  @keyframes fx-tiembla { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(.8px, -.4px) scale(1.03); } 50% { transform: translate(-.6px, .5px) scale(.97); }
    75% { transform: translate(.4px, .7px) scale(1.02); } 100% { transform: translate(0, 0) scale(1); } }
  @keyframes fx-hierve { 0% { transform: translate(0, 0) scale(1); filter: blur(0); } 20% { transform: translate(2px, -1px) scale(1.1); filter: blur(.8px); }
    40% { transform: translate(-1.6px, 1.2px) scale(.9); filter: blur(1.4px); } 60% { transform: translate(1.2px, 1.6px) scale(1.06); filter: blur(.5px); }
    80% { transform: translate(-2px, -.8px) scale(.94); filter: blur(1.1px); } 100% { transform: translate(0, 0) scale(1); filter: blur(0); } }
  :root[data-modo="noche"] .estrella-seeing { animation-duration: 6s; }
}

/* ── sol y UV ── */
.sol-fila { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-2); }
.sol-fila .inst-valor.grande { margin-top: 0; }
.sol-icono { width: 52px; height: 52px; flex: none; }
.sol-icono circle { fill: #ffd166; } .sol-icono path { stroke: #ffd166; stroke-width: 2.6; stroke-linecap: round; }
.sol-icono.uv2 circle, .sol-icono.uv2 path { fill: #f5924a; stroke: #f5924a; } .sol-icono.uv3 circle, .sol-icono.uv3 path, .sol-icono.uv4 circle, .sol-icono.uv4 path { fill: #ff5a4a; stroke: #ff5a4a; }
.sol-icono path { fill: none !important; }
:root[data-modo="noche"] .sol-icono circle { fill: none; stroke: var(--tinta); stroke-width: 2; } :root[data-modo="noche"] .sol-icono path { stroke: var(--tinta); }
@media (prefers-reduced-motion: no-preference) {
  .sol-icono path { transform-origin: 24px 24px; animation: fx-rayos 24s linear infinite; }
  @keyframes fx-rayos { to { transform: rotate(360deg); } }
}

/* ── la barra de abajo: filas de corriente en chorro y de calima (solo desplegada) ── */
.li-fila-chorro .li-nube { background: #9ec3ff; }
.li-fila-calima .li-nube { background: #e8c890; }
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-chorro, .dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-calima { display: none; }
.dock:not(.abierto) .le-nubes .le-chorro, .dock:not(.abierto) .le-nubes .le-calima { display: none; }
/* la columna de capas: la del chorro, en azul */
.cc-chorro { border-left-color: #9ec3ff; }

/* la Luna de «Esta noche» con su color: de sangre, eclipse, azul; mayor si es superluna */
.luna-caja.luna-sangre .luna-luz { fill: #d9452f; } .luna-caja.luna-sangre .luna-svg { filter: drop-shadow(0 0 12px rgba(220, 70, 40, .7)); }
.luna-caja.luna-eclipse .luna-luz { fill: #e88a6a; }
.luna-caja.luna-azul .luna-luz { fill: #a9c8ff; } .luna-caja.luna-azul .luna-svg { filter: drop-shadow(0 0 12px rgba(140, 180, 255, .7)); }
.luna-caja.luna-super .luna-svg { transform: scale(1.18); } .luna-caja.luna-micro .luna-svg { transform: scale(.86); }
.luna-marca { margin: 2px 0; font: 600 13px var(--f-texto); color: var(--naranja); display: inline-flex; align-items: center; gap: 6px; }
.luna-caja.luna-azul .luna-marca { color: #a9c8ff; }

/* los planetas al telescopio */
.ef-tele { margin: var(--esp-2) 0 0; padding: 6px 0 2px; border-radius: var(--r-in); background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--linea); }
.ef-tele figcaption { padding: 0 10px 4px; font: 500 10.5px var(--f-dato); color: var(--tinta-3); }
.tl { display: block; width: 100%; height: auto; overflow: visible; }
.tl-jupiter { fill: #e9d6b0; } .tl-franja { fill: #b88a5a; opacity: .75; } .tl-mancha { fill: #c0634a; opacity: .8; }
.tl-luna { fill: #f4f0e6; } .tl-rot { font: 500 8px var(--f-dato); fill: var(--tinta-3); }
.tl-saturno { fill: #e6cf94; } .tl-franja-s { fill: #c9a866; opacity: .6; }
.tl-anillo { fill: none; stroke: #d9c48e; stroke-width: 3.2; } .tl-anillo-b { fill: none; stroke: #f0deae; stroke-width: 2.4; } .tl-anillo-c { fill: none; stroke: #a8946a; stroke-width: 1.4; opacity: .7; }
.tl-oscuro { fill: rgba(40, 46, 70, .9); } .tl-borde { fill: none; stroke: var(--linea-2); }
.tl-nota { margin: 0; padding: 0 10px 6px; font: 500 11px var(--f-dato); color: var(--tinta-2); }
:root[data-modo="noche"] .tl * { fill: var(--tinta); stroke: var(--tinta); }
.tl-j, .tl-s { max-height: 96px; } .tl-f { max-height: 84px; }

/* arriba, con la estrella en otro momento: «dom 11, 13:00 · Previsto» y el botón para volver a ahora */
.estado-momento { gap: 10px; flex-wrap: wrap; }
.estado-momento b { color: var(--tinta); text-transform: capitalize; }
.estado-momento.est-previsto i, .estado-momento.est-modelo i { background: var(--cielo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cielo) 22%, transparent); }
.estado-momento.est-sin i { background: var(--tinta-3); box-shadow: none; }
.volver-ahora { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-in); background: var(--naranja); color: #1a0c00; font: 600 13px var(--f-texto); cursor: pointer; }
.volver-ahora:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }

/* el mes en la barra: solo el número del día (el 1, con su mes) */
.li-dia-etq.mes { padding: 0 2px; font-size: 11px; }
.li-dia-etq.mes.uno { color: var(--tinta); font-weight: 700; text-transform: none; }
.linea.zoom-30 .fr-luna { padding-left: 0; justify-content: center; }
.linea.zoom-30 .li-luna-fase { margin: 0; }

/* ── 10-oct: filas que no crecen, y los cuadritos de la NOCHE y la LUNA ── */
.instrumentos { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
@media (max-width: 880px) { .instrumentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-nombre { font: 500 12.5px var(--f-texto); color: var(--tinta-2); letter-spacing: 0; }
.baro-dice { font: 600 13px var(--f-dato); color: var(--tinta); }
.noche-barra { position: relative; height: 14px; margin-top: 2px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--linea); }
.noche-barra .nb-luna { position: absolute; top: 2px; height: 2px; border-radius: 1px; background: var(--fr-luna); }
.noche-barra .nb-ahora { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--naranja); }
.noche-regla { display: flex; justify-content: space-between; margin: 0; font: 500 10.5px var(--f-dato); color: var(--tinta-3); }
.inst-valor .u-h { margin-left: 4px; font: 400 18px var(--f-texto); color: var(--tinta-2); }
.luna-orbita { display: block; width: 100%; height: auto; margin: 2px 0; overflow: hidden;
  --lo-tierra: #4f8fd6; --lo-sol: #ffcf6e; --lo-luz: #f3ecd6; --lo-osc: #262e46; }
.lo-halo { fill: var(--lo-sol); opacity: .16; } .lo-sol { fill: var(--lo-sol); }
.lo-rayo { stroke: var(--lo-sol); stroke-width: .5; stroke-dasharray: 1 3; opacity: .35; }
.lo-orbita { fill: none; stroke: var(--tinta-3); stroke-width: .6; stroke-dasharray: 2 2.5; }
.lo-tierra { fill: var(--lo-tierra); } .lo-tierra-noche { fill: rgba(0, 0, 0, .55); }
.lo-luna-osc { fill: var(--lo-osc); stroke: var(--tinta-3); stroke-width: .4; } .lo-luna-luz { fill: var(--lo-luz); }
.inst-luna.luna-sangre .lo-luna-luz { fill: #d9452f; } .inst-luna.luna-azul .lo-luna-luz { fill: #a9c8ff; }
:root[data-modo="noche"] .luna-orbita { --lo-tierra: #6b1a12; --lo-sol: #ff5a45; --lo-luz: #ff8a75; --lo-osc: #2a0806; }
:root[data-modo="bn"] .luna-orbita { --lo-tierra: #666; --lo-sol: #111; --lo-luz: #fff; --lo-osc: #999; }
.luna-fila { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.luna-fila .luna-svg { width: 22px; height: 22px; flex: none; }
.luna-nombre-p { font: 600 18px/1.25 var(--f-texto); color: var(--tinta); min-width: 0; }
.luna-chip { display: inline-block; padding: 1px 6px; border-radius: 4px; font: 600 10.5px/1.5 var(--f-dato); letter-spacing: .1em; color: #a9c8ff; box-shadow: inset 0 0 0 1px currentColor; }
.luna-sangre .luna-chip, .luna-eclipse .luna-chip { color: #ff7a5c; } .luna-super .luna-chip { color: #ffcf6e; } .luna-micro .luna-chip { color: var(--tinta-2); }
:root[data-modo="noche"] .luna-chip { color: var(--naranja); }
.dlg-panel-copia .luna-orbita { max-width: 420px; margin-inline: auto; }
.inst-noche .inst-valor.grande { align-items: baseline; }
.noche-horas { display: grid; gap: 4px; margin: 4px 0 0; }
.noche-horas div { display: flex; justify-content: space-between; gap: 8px; padding-top: 5px; border-top: 1px solid var(--linea); }
.noche-horas dt { font-size: 14px; color: var(--tinta-2); }
.noche-horas dd { margin: 0; font: 600 14px var(--f-texto); font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }

/* ── los rumbos de la bóveda, en lo alto de la barra fija (David, 10-oct: se veían transparentes a través de la página) ── */
.dock { padding-top: 24px; }
.dock-rumbos { position: absolute; left: 0; right: 0; top: 0; height: 17px; pointer-events: none; box-shadow: 0 1px 0 var(--linea); }
.dock-rumbos span { position: absolute; top: 3px; transform: translateX(-50%); font: 500 10px/12px var(--f-dato); letter-spacing: .08em; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dock-rumbos span::before { content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 3px; background: currentColor; }
.dock-rumbos span:first-child { transform: none; margin-left: 10px; } .dock-rumbos span:first-child::before { left: -10px; }
.dock-rumbos span:last-child { transform: translateX(-100%); margin-left: -10px; } .dock-rumbos span:last-child::before { left: auto; right: -10px; }

/* ── la barra de arriba, fija al bajar (David, 10-oct), con el mismo cristal que la de abajo; en el móvil no, que ocupa ── */
@media (min-width: 881px) {
  html { scroll-padding-top: 84px; }
  .barra { position: sticky; top: 0; z-index: 30; max-width: none; padding-inline: max(16px, calc((100% - 1408px) / 2));
    background: color-mix(in srgb, var(--fondo) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--linea-2), 0 14px 34px rgba(0, 0, 0, .22); }
  :root[data-modo="bn"] .barra { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 #000; }
  .solo-cielo .barra { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── cuadritos que no bailan (David, 10-oct): sin dato, «—» atenuado; cada texto que cambia, en una línea fija ── */
.inst.sin-dato .inst-valor, .inst.sin-dato .estrella-seeing { opacity: .45; }
.inst-valor .aire-ie { margin-left: 10px; font: 500 12px var(--f-texto); color: var(--tinta-2); }
.inst-sub.aire-nivel { font: 600 14px var(--f-texto); }
.inst-sub.aire-nivel.n- { color: var(--tinta-3); font-weight: 500; }
.sol-txt { min-width: 0; }
.inst .cal-lista li span, .inst .cal-lista li b { white-space: nowrap; }

/* ── alturas FIJAS, preparadas para el texto más largo (David, 10-oct: «todo baila y crece»). Medidas con
   pruebas/medir.html en 9 estados (normal, alarma, tormenta, aguacero, calor, frío, diluvio, sin previsión, noche pasada):
   el cuadrito más alto, 259 px en escritorio y 258 en el móvil; el veredicto, 528 y 564 ── */
.instrumentos { grid-auto-rows: 264px; }
.inst { min-height: 0; overflow: hidden; }
.luna-orbita { max-height: 84px; }
.tormenta-linea.una-linea { flex-wrap: nowrap; }
.veredicto { display: flex; flex-direction: column; min-height: 540px; }
.veredicto .nota { margin-top: auto; padding-top: var(--esp-3); }
@media (max-width: 880px) { .instrumentos { grid-auto-rows: 262px; } .veredicto { min-height: 576px; } }
/* medido igual: a 900 px el veredicto llega a 558; en el móvil, la línea del momento (con «Volver a ahora») ocupa dos
   renglones y la cabecera pasa de 154 a 196 px, y la de máxima/mínima, de 24 a 55: se les guarda el sitio siempre */
@media (min-width: 881px) and (max-width: 1199px) { .veredicto { min-height: 566px; } }
@media (max-width: 880px) { .cabeza { min-height: 196px; } .temp-rango { min-height: 55px; } }

/* ── la página algo más pequeña en el ordenador (David, 10-oct: «se ve muy grande… de aumentos nada más»): como un zoom
   del 85 % pero SOLO del contenido; el cielo de fondo, los rumbos y la columna de capas siguen a pantalla completa.
   config.json → pantalla.escala lo cambia; en el móvil no se toca. Las posiciones (arrastrar la estrella, las gráficas)
   se calculan en proporción, así que el zoom no las descoloca ── */
@media (min-width: 881px) {
  main, .dock-dentro, .dlg, .barra > * { zoom: var(--escala, .85); }
  .barra { padding-inline: max(16px, calc((100% - 1408px * var(--escala, .85)) / 2)); }
}

/* ── las filas por horas de la barra (10-oct): cada celda, un color con su intensidad (--o) y, con sitio, su cifra ── */
.li-nubes-fila .li-nube { display: flex; align-items: center; justify-content: center; gap: 1px; overflow: hidden; opacity: 1;
  background: color-mix(in srgb, var(--cc, var(--fr-luna)) calc(var(--o, 1) * 100%), transparent); }
.li-nubes-fila .li-nube b { font: 600 10px/1 var(--f-dato); color: var(--tinta); font-variant-numeric: tabular-nums; text-shadow: 0 0 3px rgba(0, 0, 0, .7); }
.li-nubes-fila .li-nube i { font: 700 10px/1 var(--f-texto); font-style: normal; color: var(--tinta); display: inline-block; }
.li-fila-lluvia { --cc: var(--cielo); } .li-fila-niebla { --cc: var(--tinta-2); } .li-fila-chorro { --cc: #9ec3ff; } .li-fila-calima { --cc: #e8c890; }
.li-fila-semaforo .li-nube { --o: .85; border-right: 1px solid rgba(0, 0, 0, .25); }
.li-fila-semaforo .c-ok { --cc: var(--ok); } .li-fila-semaforo .c-aviso { --cc: var(--aviso); } .li-fila-semaforo .c-malo { --cc: var(--malo); }
.li-fila-viento .li-nube { --cc: var(--tinta); --o: .08; } .li-fila-viento .c-aviso { --cc: var(--aviso); --o: .45; } .li-fila-viento .c-malo { --cc: var(--malo); --o: .55; }
.li-fila-temp .li-nube { --cc: hsl(var(--tc, 200) 75% 55%); --o: .5; }
.li-fila-rocio .c-ok { --cc: var(--ok); --o: .3; } .li-fila-rocio .c-aviso { --cc: var(--aviso); --o: .6; } .li-fila-rocio .c-malo { --cc: var(--malo); --o: .7; } .li-fila-rocio .c-hielo { --cc: #a8dcff; --o: .8; }
.li-fila-rocio .c-info { --o: 0; }
.li-fila-hum .li-nube { --cc: var(--tinta); } .li-fila-hum .c-aviso { --cc: var(--aviso); --o: .5 !important; } .li-fila-hum .c-malo { --cc: var(--malo); --o: .6 !important; }
:root[data-modo="noche"] .li-fila-temp .li-nube { --cc: var(--malo); }
:root[data-modo="bn"] .li-fila-temp .li-nube { --cc: #888; }
.ley-sem { background: linear-gradient(90deg, var(--ok) 0 33%, var(--aviso) 33% 66%, var(--malo) 66%); }
.linea-etq [data-g] { cursor: help; }
.le-nubes span { text-transform: lowercase; }
/* plegada: el semáforo, el total y las tres capas; desplegada, todas */
.dock .li-nubes .li-nubes-fila.li-fila-semaforo { display: block; height: 12px; }
.dock .le-nubes .le-semaforo { height: 12px !important; line-height: 12px !important; }
.dock .li-nubes .li-nubes-fila.li-fila-total { display: block; }
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-total { height: 20px; }
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-viento, .dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-temp,
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-rocio, .dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-hum { display: none; }
.dock:not(.abierto) .le-nubes .le-viento, .dock:not(.abierto) .le-nubes .le-temp, .dock:not(.abierto) .le-nubes .le-rocio, .dock:not(.abierto) .le-nubes .le-hum { display: none; }
.dock .li-nubes-fila.li-fila-semaforo, .dock .li-nubes-fila.li-fila-semaforo .li-nube { display: block; }
.dock .li-nubes-fila.li-fila-semaforo .li-nube { position: absolute; top: 0; bottom: 0; }
/* fuentes y créditos */
.fuentes-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--esp-3) var(--esp-5); margin: var(--esp-3) 0 0; }
.fuentes-lista dt { font: 600 15px var(--f-texto); color: var(--tinta); margin-bottom: 4px; }
.fuentes-lista dd { margin: 0; color: var(--tinta-2); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.fuentes-lista a { color: var(--cielo); }

/* ── la barra a todo el ancho (botón ⟷): los mismos días, estirados ── */
.dock.ancho .dock-dentro { max-width: none; }
.dk-ancho svg { width: 18px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dk-ancho[aria-pressed="true"] { color: var(--naranja); box-shadow: inset 0 0 0 1px var(--naranja); }
/* ── la marca MeteoHacks, al pie ── */
.pie .marca { margin-top: var(--esp-3); font-size: 13px; color: var(--tinta-3); letter-spacing: .02em; }
.pie .marca a { color: var(--tinta-2); text-decoration: none; }
.pie .marca b { font: 700 14px var(--f-texto); letter-spacing: .04em; color: var(--tinta); }
.pie .marca b span { color: var(--naranja); }
/* plegada: el total también (una regla vieja más fuerte lo escondía y los nombres quedaban una fila corridos) */
.dock:not(.abierto) .li-nubes .li-nubes-fila.li-fila-total { display: block; height: 20px; }
@media (min-width: 641px) { .dock:not(.abierto) .linea-marco, .dock.abierto .linea-marco { grid-template-columns: 84px minmax(0, 1fr); } }
.li-nubes-fila .li-flecha { width: 9px; height: 9px; flex: none; fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── pestaña REGISTROS (10-oct) ── */
.rg-mando { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; justify-content: space-between; margin-top: var(--esp-3); }
.rg-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-vars button { padding: 7px 14px; border-radius: 999px; border: 0; background: var(--panel); color: var(--tinta-2); font: 600 14px var(--f-texto); box-shadow: 0 0 0 1px var(--linea); cursor: pointer; }
.rg-vars button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); box-shadow: none; }
.rg-nav { display: flex; align-items: center; gap: var(--esp-2); margin: var(--esp-3) 0 var(--esp-2); flex-wrap: wrap; }
.rg-etq { font: 600 18px var(--f-texto); color: var(--tinta); min-width: 12ch; text-align: center; text-transform: capitalize; }
#rg-desliza { flex: 1 1 200px; max-width: 420px; accent-color: var(--naranja); }
.rg-grafica { position: relative; margin-top: var(--esp-2); }
.rg-svg { display: block; overflow: visible; }
.rg-capa { fill: transparent; cursor: crosshair; }
.rg-rejilla { stroke: var(--linea); stroke-width: 1; }
.rg-dia { stroke: var(--linea-2); stroke-width: 1; stroke-dasharray: 2 4; }
.rg-eje { fill: var(--tinta-3); font: 500 11px var(--f-dato); font-variant-numeric: tabular-nums; }
.rg-eje.rg-uno { fill: var(--tinta-2); font-weight: 700; }
.rg-eje2 { fill: var(--cielo); }
.rg-noche { fill: rgba(0, 0, 0, .28); }
.rg-normal { fill: color-mix(in srgb, var(--tinta) 9%, transparent); }
.rg-linea-normal { fill: none; stroke: var(--tinta-3); stroke-width: 1.4; stroke-dasharray: 4 4; }
.rg-vela { fill: color-mix(in srgb, var(--naranja) 70%, transparent); }
.rg-vela.rg-hum { fill: color-mix(in srgb, var(--s-hum, #6fd3c2) 55%, transparent); }
.rg-vela.rg-pres { fill: color-mix(in srgb, #b9a6ff 50%, transparent); }
.rg-media { fill: var(--tinta); }
.rg-inc { opacity: .35; }
.rg-linea { fill: none; stroke: var(--naranja); stroke-width: 2; stroke-linejoin: round; }
.rg-linea.rg-hum { stroke: var(--s-hum, #6fd3c2); } .rg-linea.rg-viento { stroke: var(--tinta); stroke-width: 1.6; } .rg-linea.rg-pres { stroke: #b9a6ff; }
.rg-linea.rg-rocio { stroke: #7fc4ff; } .rg-linea.rg-tenue { stroke: var(--tinta-3); stroke-dasharray: 3 3; stroke-width: 1.4; }
.rg-banda { fill: color-mix(in srgb, var(--naranja) 22%, transparent); }
.rg-barra-ll { fill: var(--cielo); }
.rg-acum { fill: none; stroke: var(--cielo); stroke-width: 2; }
.rg-acum-normal { fill: none; stroke: var(--cielo); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .7; }
.rg-barra-racha { fill: color-mix(in srgb, var(--tinta) 30%, transparent); } .rg-barra-racha.aviso { fill: var(--aviso); } .rg-barra-racha.malo { fill: var(--malo); }
.rg-punto-racha { fill: var(--tinta-2); } .rg-punto-racha.aviso { fill: var(--aviso); } .rg-punto-racha.malo { fill: var(--malo); }
.rg-margen { fill: color-mix(in srgb, var(--malo) 16%, transparent); }
.rg-cursor { stroke: var(--tinta); stroke-width: 1; opacity: .7; pointer-events: none; }
.rg-tip { position: absolute; top: 8px; transform: translateX(12px); min-width: 190px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--fondo) 92%, transparent); box-shadow: 0 0 0 1px var(--linea-2), 0 10px 30px rgba(0, 0, 0, .35); pointer-events: none; z-index: 2; }
.rg-tip.rg-tip-izq { transform: translateX(calc(-100% - 12px)); }
.rg-tip-f { margin: 0 0 6px; font: 600 13px var(--f-texto); color: var(--tinta); text-transform: capitalize; }
.rg-tip-filas { display: grid; grid-template-columns: auto auto; gap: 3px 14px; font-size: 13px; color: var(--tinta-2); }
.rg-tip-filas b { color: var(--tinta); font: 600 13px var(--f-dato); text-align: right; font-variant-numeric: tabular-nums; }
.rg-tip-inc { display: block; margin-top: 6px; font-size: 12px; color: var(--aviso); font-style: normal; }
.rg-mas { color: #ff8a6b; } .rg-menos { color: #7fc4ff; }
.rg-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--esp-2); font-size: 13px; color: var(--tinta-2); }
.rg-ley i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.rg-l-vela { background: color-mix(in srgb, var(--naranja) 70%, transparent); } .rg-l-media { background: var(--tinta); width: 8px !important; height: 8px !important; border-radius: 50% !important; }
.rg-l-normal { background: color-mix(in srgb, var(--tinta) 14%, transparent); } .rg-l-lnormal { border-top: 2px dashed var(--tinta-3); height: 0 !important; }
.rg-l-inc { background: color-mix(in srgb, var(--naranja) 70%, transparent); opacity: .35; } .rg-l-linea { border-top: 2px solid var(--naranja); height: 0 !important; }
.rg-l-banda { background: color-mix(in srgb, var(--naranja) 22%, transparent); } .rg-l-ll { background: var(--cielo); } .rg-l-acum { border-top: 2px solid var(--cielo); height: 0 !important; }
.rg-l-acumn { border-top: 2px dashed var(--cielo); height: 0 !important; } .rg-l-hum { border-top: 2px solid var(--s-hum, #6fd3c2); height: 0 !important; }
.rg-l-vela-hum { background: color-mix(in srgb, var(--s-hum, #6fd3c2) 55%, transparent); } .rg-l-racha { background: color-mix(in srgb, var(--tinta) 30%, transparent); }
.rg-l-viento { border-top: 2px solid var(--tinta); height: 0 !important; } .rg-l-vela-pres { background: color-mix(in srgb, #b9a6ff 50%, transparent); } .rg-l-pres { border-top: 2px solid #b9a6ff; height: 0 !important; }
.rg-l-rocio { border-top: 2px solid #7fc4ff; height: 0 !important; } .rg-l-tenue { border-top: 2px dashed var(--tinta-3); height: 0 !important; } .rg-l-margen { background: color-mix(in srgb, var(--malo) 25%, transparent); }
.rg-l-noche { background: rgba(0, 0, 0, .4); box-shadow: 0 0 0 1px var(--linea); }
.rg-ayuda { margin-top: var(--esp-2); }
.rg-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--esp-3); margin-top: var(--esp-4); }
.rg-t { padding: var(--esp-3) var(--esp-4); border-radius: var(--r); background: var(--panel); box-shadow: 0 0 0 1px var(--linea); }
.rg-t-v { margin: 6px 0 0; font: 300 30px/1.1 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums; }
.rg-t-s { margin: 4px 0 0; font-size: 13px; color: var(--tinta-2); }
.rg-t.rg-calor .rg-t-v { color: #ffb48a; } .rg-t.rg-frio .rg-t-v { color: #9fd1ff; }
.rg-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-3); margin-top: var(--esp-3); }
.rg-rec { display: grid; gap: 4px; text-align: left; padding: var(--esp-3) var(--esp-4); border: 0; border-radius: var(--r); background: var(--panel); box-shadow: 0 0 0 1px var(--linea); color: var(--tinta); cursor: pointer; font: inherit; }
.rg-rec:hover { box-shadow: 0 0 0 1px var(--linea-2); }
.rg-rec b { font: 300 26px/1.1 var(--f-texto); font-variant-numeric: tabular-nums; } .rg-rec small { color: var(--tinta-2); font-size: 13px; }
.rg-tabla-caja { overflow-x: auto; margin-top: var(--esp-3); }
.rg-tabla { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.rg-tabla th, .rg-tabla td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--linea); white-space: nowrap; vertical-align: top; }
.rg-tabla th:first-child { text-align: left; text-transform: capitalize; color: var(--tinta); }
.rg-tabla thead th { font: 600 12px var(--f-dato); color: var(--tinta-3); letter-spacing: .06em; text-transform: uppercase; }
.rg-tabla td { color: var(--tinta); } .rg-tabla td small { display: block; color: var(--tinta-3); font-size: 12px; } .rg-tabla td i { display: block; font-style: normal; font-size: 12px; }
.rg-tabla tr.rg-parcial td, .rg-tabla tr.rg-parcial th { opacity: .6; }
.rg-clima { margin-top: var(--esp-3); }
.rg-cl-ll { fill: color-mix(in srgb, var(--cielo) 35%, transparent); } .rg-cl-ll-med { fill: none; stroke: var(--cielo); stroke-width: 1.5; }
.rg-cl-t { fill: none; stroke: var(--naranja); stroke-width: 2.2; } .rg-cl-med { fill: var(--tinta); stroke: var(--fondo); stroke-width: 1.5; }
.dlg-pie { margin: var(--esp-3) 0 0; text-align: right; }

.rg-raya { stroke: var(--aviso); stroke-width: 1.4; opacity: .5; }
.rg-reloj { fill: url(#rg-rayas); pointer-events: none; }
.rg-aviso-reloj { color: var(--aviso); }
.rg-reloj-chip { font-size: 12px; color: var(--aviso); }
.rg-etq, .rg-tabla th:first-child, .rg-tip-f { text-transform: none; }

/* ── ocultar el cielo (botón del ojo, 10-oct): fuera el lienzo, los rumbos y la columna de capas; queda el color ── */
.sin-cielo .fx-cielo, .sin-cielo .dock-rumbos, .sin-cielo .columna-capas { display: none !important; }
.sin-cielo .dock { padding-top: 8px; }
.cielo-btn svg { width: 22px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cielo-btn svg circle { fill: currentColor; stroke: none; }

/* ── colores por valor en las gráficas (10-oct): con .rg-color, velas, líneas, franjas y barras toman el degradado ── */
.rg-color .rg-vela, .rg-color .rg-vela.rg-hum, .rg-color .rg-vela.rg-pres, .rg-color .rg-barra-ll { fill: url(#rg-deg); }
.rg-color .rg-vela, .rg-color .rg-barra-ll { opacity: .9; }
.rg-color .rg-vela.rg-inc, .rg-color .rg-barra-ll.rg-inc { opacity: .35; }
.rg-color .rg-linea, .rg-color .rg-linea.rg-hum, .rg-color .rg-linea.rg-pres, .rg-color .rg-linea.rg-rocio { stroke: url(#rg-deg); stroke-width: 2.4; }
.rg-color .rg-banda { fill: url(#rg-deg); opacity: .28; }
.rg-color .rg-barra-racha, .rg-color .rg-punto-racha { fill: url(#rg-deg); }
.rg-color .rg-linea.rg-viento { stroke: var(--tinta); }
/* los iconos de cada medida */
.ic-medida { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 6px; }
.ic-medida .ic-lleno { fill: currentColor; stroke: none; }
.ic-temp { color: #f5924a; } .ic-hum { color: #74e3cf; } .ic-rocio { color: #99ccff; } .ic-pres { color: #e3c08f; } .ic-viento { color: #c9d3e6; } .ic-lluvia { color: #6fb6ff; }
:root[data-modo="noche"] .ic-medida, :root[data-modo="bn"] .ic-medida { color: currentColor; }
.rg-vars button { display: inline-flex; align-items: center; }
.rg-vars button[aria-pressed="true"] .ic-medida { color: var(--fondo); }
.g figcaption .etq { display: inline-flex; align-items: center; }
/* la columna de capas también empieza debajo de la barra de arriba (la tapaba: «no sale lo del chorro», 10-oct) */
.columna-capas { top: var(--alto-barra, 0px); height: calc(max(100vh, 700px) - var(--alto-dock, 0px) - var(--alto-barra, 0px)); }