/* efectos.css — la app del cielo como pantalla holográfica (estilo Avatar y HUD de videojuego), 9-oct-2026, con David:
   «no tanto volumen; efectos de pantalla que queden bien, y si no, nada; si no deja mirar, efecto alarma porque pasa
   algún parámetro». Regla: un efecto solo si significa algo.
   · Holograma: paneles translúcidos con filo de luz y esquinas de visor que se despliegan al cargar (una sola vez).
   · ALARMA: algún criterio en rojo → el veredicto y el instrumento culpable laten en rojo con su rótulo. En ámbar,
     marco fijo sin parpadeo.
   · En visión nocturna nada brilla salvo la alarma, más lenta y tenue. En blanco y negro, sin halos.
   · Con «menos movimiento» del sistema, todo quieto (la alarma queda como marco fijo). */

:root { --fx-filo: rgba(153, 204, 255, .28); --fx-halo: rgba(153, 204, 255, .20); --fx-cristal: rgba(10, 18, 70, .55); }
:root[data-modo="noche"] { --fx-filo: rgba(255, 70, 50, .22); --fx-halo: transparent; --fx-cristal: rgba(20, 2, 2, .80); }
:root[data-modo="bn"] { --fx-filo: rgba(0, 0, 0, .14); --fx-halo: transparent; --fx-cristal: #fff; }

/* cielo estrellado en canvas, fijo detrás de todo (las estrellas del CSS quedan de respaldo si no hay JS) */
.fx-cielo { position: fixed; inset: 0 auto auto 0; z-index: -1; pointer-events: none; }
/* el cielo cambia con la altura real del Sol (efectos.js pone --cielo-*); fijo a la ventana, como un cielo de verdad */
:root { --cielo-alto: #03041c; --cielo-medio: #05082a; --cielo-horizonte: #070b36; }
:root[data-modo="normal"] body:has(.fx-cielo), :root:not([data-modo]) body:has(.fx-cielo) {
  background-color: var(--cielo-alto);
  background-image: linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo-medio) 62%, var(--cielo-horizonte) 100%);
  background-size: 100% 100%; background-repeat: no-repeat; background-attachment: fixed; transition: background-color 2s linear; }
:root[data-modo="noche"] body:has(.fx-cielo), :root[data-modo="bn"] body:has(.fx-cielo) { background-image: none; }
/* de día el cristal de los paneles toma el tono del cielo, no el azul de la noche */
:root[data-modo="normal"][data-fase="dia"], :root[data-modo="normal"][data-fase="crepusculo"] { --fx-cristal: color-mix(in srgb, var(--cielo-medio) 72%, rgba(0, 0, 0, .35)); --fondo-2: var(--cielo-medio); }

/* holograma: cristal translúcido + filo de luz arriba; esquinas de visor más largas */
.veredicto, .inst, .g { background: var(--fx-cristal); box-shadow: 0 0 0 1px var(--linea), inset 0 1px 0 0 var(--fx-filo); }
.veredicto::before, .veredicto::after, .inst::before, .inst::after, .g::before, .g::after { width: 14px; height: 14px; border-color: var(--fx-filo); }
:root[data-modo="normal"] .veredicto, :root[data-modo="normal"] .inst, :root[data-modo="normal"] .g { backdrop-filter: blur(2px); }

/* lo que está en directo brilla un poco: la cifra grande, el «ahora» de la franja, la Luna, los puntos del cursor */
.temp-num { text-shadow: 0 0 36px var(--fx-halo); }
.luna-svg { filter: drop-shadow(0 0 8px var(--fx-halo)); }
.luna-oscura { fill: color-mix(in srgb, var(--fondo-2) 85%, var(--fr-luna)); }   /* luz cenicienta */
.cursor-punto { filter: drop-shadow(0 0 3px var(--fx-halo)); }
.area { stroke: none; }

/* el punto «en directo» */
.estado i { position: relative; }
.estado i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }

/* ── ALARMA y AVISO ── */
.v-alarma { display: none; }
.veredicto.alarma .v-alarma { display: flex; align-items: center; gap: 8px; margin: calc(-1 * var(--esp-4)) calc(-1 * var(--esp-4)) var(--esp-3);
  padding: 8px var(--esp-4); font: 600 12px/1.3 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--fondo);
  background: repeating-linear-gradient(-45deg, var(--malo) 0 10px, color-mix(in srgb, var(--malo) 82%, #000) 10px 20px); }
.veredicto.alarma, .inst.alarma { box-shadow: 0 0 0 1px var(--malo), inset 0 1px 0 0 var(--malo); }
.inst.aviso { box-shadow: 0 0 0 1px var(--aviso), inset 0 1px 0 0 var(--aviso); }
.inst .i-limite { display: none; }
.inst.alarma .i-limite, .inst.aviso .i-limite { display: inline-block; margin-left: auto; padding: 1px 6px; border-radius: 4px; font: 600 10.5px/1.5 var(--f-dato); letter-spacing: .1em; }
.inst.alarma .i-limite { background: var(--malo); color: var(--fondo); }
.inst.aviso .i-limite { box-shadow: inset 0 0 0 1px var(--aviso); color: var(--aviso); }
.inst .etq { width: 100%; }
/* el latido de la alarma: un aro que se enciende y se apaga (solo opacidad) */
.veredicto.alarma::before, .inst.alarma::before { content: ''; position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: inherit;
  box-shadow: 0 0 0 1px var(--malo), 0 0 24px 0 color-mix(in srgb, var(--malo) 45%, transparent); opacity: 0; pointer-events: none; }
:root[data-modo="bn"] .veredicto.alarma::before, :root[data-modo="bn"] .inst.alarma::before { box-shadow: 0 0 0 3px #000; }

@media (prefers-reduced-motion: no-preference) {
  .estado i::after { animation: fx-latido 2.4s cubic-bezier(.23, 1, .32, 1) infinite; }
  :root[data-modo="noche"] .estado i::after { animation: none; }
  @keyframes fx-latido { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.2); opacity: 0; } }

  .veredicto.alarma::before, .inst.alarma::before { animation: fx-alarma 1.6s ease-in-out infinite; }
  :root[data-modo="noche"] .veredicto.alarma::before, :root[data-modo="noche"] .inst.alarma::before { animation-duration: 3.2s; }
  @keyframes fx-alarma { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }

  /* al cargar, una vez: las esquinas de visor se despliegan y el panel «se enciende» con un parpadeo de holograma */
  .fx-inicio .veredicto, .fx-inicio .inst, .fx-inicio .g { opacity: 0; }
  .fx-encender .veredicto, .fx-encender .inst, .fx-encender .g { animation: fx-holo .5s steps(1, end) both; }
  .fx-encender .inst:nth-child(2) { animation-delay: 50ms; } .fx-encender .inst:nth-child(3) { animation-delay: 100ms; }
  .fx-encender .inst:nth-child(4) { animation-delay: 150ms; } .fx-encender .inst:nth-child(5) { animation-delay: 200ms; }
  @keyframes fx-holo { 0% { opacity: 0; } 20% { opacity: .7; } 35% { opacity: .15; } 55% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: 1; } }
  .fx-encender .veredicto::after, .fx-encender .inst::after, .fx-encender .g::after { animation: fx-esquina .6s cubic-bezier(.23, 1, .32, 1) both; }
  @keyframes fx-esquina { from { transform: translate(-6px, -6px); opacity: 0; } to { transform: none; opacity: 1; } }

}
/* la aguja del viento la mueve efectos.js (muelle amortiguado), con el atributo transform del SVG */

/* de día (azul cielo): las tintas secundarias suben para leerse sobre el azul */
:root[data-modo="normal"][data-fase="dia"] { --tinta-2: #e2e9f4; --tinta-3: #bfcde2; --linea: rgba(255, 255, 255, .16); --linea-2: rgba(255, 255, 255, .38); }

/* ── VAHO (David, 9-oct: «si se ve que se va a empañar, otra animación»): con el margen de rocío por debajo del aviso la
   pantalla se empaña desde los bordes como un visor; por debajo del límite, del todo. Lo pone efectos.js según el
   momento que se mira (también al mover la manija hacia una hora húmeda). Solo opacidad. */
.fx-vaho { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
  background: var(--gotas-vaho, none) center / cover no-repeat,
    radial-gradient(ellipse at center, transparent 50%, rgba(214, 226, 240, .10) 78%, rgba(214, 226, 240, .22) 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 45%, #000 95%); mask-image: radial-gradient(ellipse at center, transparent 45%, #000 95%);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
body.vaho-1 .fx-vaho { opacity: .35; }
body.vaho-2 .fx-vaho { opacity: .8; }
:root[data-modo="noche"] .fx-vaho { background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 60, 40, .07) 75%, rgba(255, 60, 40, .14) 100%); }
:root[data-modo="bn"] .fx-vaho { background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .07) 100%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* alarma de rocío: gotas que se forman y resbalan por el panel del margen */
.gotas { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.gotas i { position: absolute; top: 18px; width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: .7;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .9), rgba(170, 210, 255, .35) 60%, transparent 72%); }
.gotas i:nth-child(1) { left: 9%; } .gotas i:nth-child(2) { left: 23%; top: 40px; } .gotas i:nth-child(3) { left: 38%; }
.gotas i:nth-child(4) { left: 52%; top: 52px; } .gotas i:nth-child(5) { left: 67%; } .gotas i:nth-child(6) { left: 80%; top: 34px; }
.gotas i:nth-child(7) { left: 92%; top: 60px; }
:root[data-modo="noche"] .gotas i { background: radial-gradient(circle at 35% 35%, rgba(255, 120, 100, .6), rgba(255, 60, 40, .2) 60%, transparent 72%); }
:root[data-modo="bn"] .gotas i { background: radial-gradient(circle at 35% 35%, #fff, rgba(0, 0, 0, .35) 60%, transparent 72%); }

@media (prefers-reduced-motion: no-preference) {
  .fx-vaho { transition: opacity 2.5s ease-in-out; }
  .gotas i { opacity: 0; animation: fx-gota 5s cubic-bezier(.55, 0, .8, .4) infinite; }
  .gotas i:nth-child(2) { animation-delay: .7s; animation-duration: 6.2s; } .gotas i:nth-child(3) { animation-delay: 1.9s; }
  .gotas i:nth-child(4) { animation-delay: 2.6s; animation-duration: 5.6s; } .gotas i:nth-child(5) { animation-delay: 3.4s; animation-duration: 4.4s; }
  .gotas i:nth-child(6) { animation-delay: 1.2s; animation-duration: 6.8s; } .gotas i:nth-child(7) { animation-delay: 4.1s; }
  @keyframes fx-gota { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: .9; transform: scale(1); } 45% { transform: translateY(6px); }
    100% { opacity: 0; transform: translateY(150px) scaleY(1.3); } }
  :root[data-modo="noche"] .gotas i { animation-duration: 9s; }
}

/* vaho SOLO en el panel del margen de rocío (David, 10-oct): el cristal de detrás se empaña y la cifra sigue nítida */
.fx-vaho { display: none; }
.inst { isolation: isolate; }
.vaho-panel { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: var(--gotas-vaho, none) center / 700px auto repeat, linear-gradient(180deg, rgba(220, 232, 245, .10), rgba(220, 232, 245, .26));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.inst.vaho-1 .vaho-panel { opacity: .55; }
.inst.vaho-2 .vaho-panel { opacity: 1; }
:root[data-modo="noche"] .vaho-panel { background: linear-gradient(180deg, rgba(255, 60, 40, .05), rgba(255, 60, 40, .12)); }
:root[data-modo="bn"] .vaho-panel { background: linear-gradient(180deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .1)); }
@media (prefers-reduced-motion: no-preference) { .vaho-panel { transition: opacity 2s ease-in-out; } }
/* el ALIENTO en el cristal del rocío (David, 10-oct: «como alguien respirando de vez en cuando»): cada pocos segundos se
   empaña desde el centro y se va; con alarma, más a menudo. Detrás del texto, como el resto del vaho */
.vaho-panel::after { content: ''; position: absolute; inset: 8% 12%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(236, 243, 251, .55), rgba(236, 243, 251, .2) 60%, rgba(236, 243, 251, 0)); }
.inst.vaho-1 .vaho-panel { opacity: .4; }
.inst.vaho-2 .vaho-panel { opacity: .85; }
.gotas-pocas i:nth-child(1) { left: 14%; } .gotas-pocas i:nth-child(2) { left: 58%; top: 46px; } .gotas-pocas i:nth-child(3) { left: 86%; }
:root[data-modo="noche"] .vaho-panel::after { background: radial-gradient(closest-side, rgba(255, 70, 50, .14), rgba(255, 70, 50, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .inst.vaho-1 .vaho-panel::after, .inst.vaho-2 .vaho-panel::after { animation: fx-aliento 9s ease-in-out infinite; }
  .inst.vaho-2 .vaho-panel::after { animation-duration: 6s; }
  @keyframes fx-aliento { 0%, 55%, 100% { opacity: 0; transform: scale(.6); } 66% { opacity: 1; transform: scale(1); } 88% { opacity: 0; transform: scale(1.12); } }
  .gotas-pocas i { animation-duration: 7.5s; }
}

/* ── animaciones DENTRO de cada panel en aviso o en límite (David, 10-oct), detrás de la cifra ── */
.anim { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.anim i { position: absolute; display: block; opacity: 0; }
/* humedad: gotitas que se forman en el borde de arriba y chorrean */
.anim-gotas i { top: -2px; width: 6px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .85), rgba(150, 215, 230, .35) 60%, transparent 72%); }
.anim-gotas i:nth-child(1) { left: 16%; } .anim-gotas i:nth-child(2) { left: 41%; } .anim-gotas i:nth-child(3) { left: 67%; }
.anim-gotas i:nth-child(4) { left: 82%; } .anim-gotas i:nth-child(5) { left: 29%; }
/* viento: rayitas que cruzan el panel */
.anim-viento i { left: -40%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(200, 225, 255, .55), transparent); }
.anim-viento i:nth-child(1) { top: 28%; width: 46%; } .anim-viento i:nth-child(2) { top: 47%; width: 34%; } .anim-viento i:nth-child(3) { top: 64%; width: 52%; }
.anim-viento i:nth-child(4) { top: 38%; width: 28%; } .anim-viento i:nth-child(5) { top: 78%; width: 40%; }
/* lluvia: unas rayitas que caen dentro del panel */
.anim-lluvia i { top: -14px; width: 1.6px; height: 12px; border-radius: 1px; background: rgba(200, 222, 248, .7); transform: rotate(12deg); }
.anim-lluvia i:nth-child(odd) { height: 9px; }
.anim-lluvia i:nth-child(1) { left: 8%; } .anim-lluvia i:nth-child(2) { left: 19%; } .anim-lluvia i:nth-child(3) { left: 31%; } .anim-lluvia i:nth-child(4) { left: 44%; }
.anim-lluvia i:nth-child(5) { left: 56%; } .anim-lluvia i:nth-child(6) { left: 67%; } .anim-lluvia i:nth-child(7) { left: 78%; } .anim-lluvia i:nth-child(8) { left: 88%; }
.anim-lluvia i:nth-child(9) { left: 95%; }
/* tormenta: fogonazo de relámpago de vez en cuando */
.anim-rayo i { inset: 0; background: radial-gradient(ellipse at 70% 20%, rgba(235, 240, 255, .55), rgba(235, 240, 255, 0) 70%); }
:root[data-modo="noche"] .anim i { filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-40deg) brightness(.7); }
:root[data-modo="bn"] .anim { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .anim-gotas i { animation: fx-chorreo 8s cubic-bezier(.55, 0, .8, .4) infinite; }
  .anim-gotas.n2 i { animation-duration: 5.5s; }
  .anim-gotas i:nth-child(2) { animation-delay: 1.7s; } .anim-gotas i:nth-child(3) { animation-delay: 3.9s; }
  .anim-gotas i:nth-child(4) { animation-delay: 2.6s; } .anim-gotas i:nth-child(5) { animation-delay: 4.8s; }
  @keyframes fx-chorreo { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: .9; transform: scale(1); } 50% { transform: translateY(4px) scaleY(1.15); }
    100% { opacity: 0; transform: translateY(180px) scaleY(1.4); } }
  .anim-viento i { animation: fx-racha 2.6s cubic-bezier(.4, 0, .2, 1) infinite; }
  .anim-viento.n2 i { animation-duration: 1.5s; }
  .anim-viento i:nth-child(2) { animation-delay: .9s; } .anim-viento i:nth-child(3) { animation-delay: 1.6s; }
  .anim-viento i:nth-child(4) { animation-delay: .4s; } .anim-viento i:nth-child(5) { animation-delay: 1.2s; }
  @keyframes fx-racha { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%); } }
  .anim-lluvia i { animation: fx-lluvia-panel 1.1s linear infinite; }
  .anim-lluvia i:nth-child(2n) { animation-delay: .35s; } .anim-lluvia i:nth-child(3n) { animation-delay: .7s; } .anim-lluvia i:nth-child(5n) { animation-delay: .2s; }
  @keyframes fx-lluvia-panel { 0% { opacity: 0; transform: translate(0, 0) rotate(12deg); } 10% { opacity: .9; } 100% { opacity: .9; transform: translate(-30px, 200px) rotate(12deg); } }
  .anim-rayo i { animation: fx-relampago 7s steps(1, end) infinite; }
  .anim-rayo.n2 i { animation-duration: 4.5s; }
  @keyframes fx-relampago { 0%, 100% { opacity: 0; } 2% { opacity: 1; } 3% { opacity: .2; } 4% { opacity: .9; } 6% { opacity: 0; } }
  :root[data-modo="noche"] .anim-rayo i { animation: none; }
}
/* el panel de calidad del cielo: su lista */
.cal-lista { margin: var(--esp-1) 0 var(--esp-1); }
.cal-lista li { min-height: 28px; font-size: 14px; }
/* la franja de alerta sigue el redondeo de la ventana (antes, esquinas rectas que se salían) */
.veredicto.alarma .v-alarma { border-radius: var(--r) var(--r) 0 0; }

/* aviso y límite también en COLOR (David, 10-oct): el arco, la rosa y la cifra de cada panel; y lo mismo en grande */
.arco-valor.aviso { stroke: var(--aviso); } .arco-valor.malo { stroke: var(--malo); }
.rosa-aviso .brujula-flecha { fill: var(--aviso); } .rosa-aviso .brujula-astil { stroke: var(--aviso); } .rosa-aviso .rosa-sector { stroke: var(--aviso); filter: drop-shadow(0 0 2.5px var(--aviso)); }
.rosa-malo .brujula-flecha { fill: var(--malo); } .rosa-malo .brujula-astil { stroke: var(--malo); } .rosa-malo .rosa-sector { stroke: var(--malo); filter: drop-shadow(0 0 3px var(--malo)); }
.inst.aviso .inst-valor, .inst-grande.aviso .dlg-cifra { color: var(--aviso); }
.inst.alarma .inst-valor, .inst-grande.alarma .dlg-cifra { color: var(--malo); }
.inst-grande { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); }
.inst-grande.aviso { box-shadow: inset 0 0 0 1px var(--aviso); } .inst-grande.alarma { box-shadow: inset 0 0 0 1px var(--malo); }
.inst-grande.vaho-1 .vaho-panel { opacity: .4; } .inst-grande.vaho-2 .vaho-panel { opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .inst-grande.vaho-1 .vaho-panel::after, .inst-grande.vaho-2 .vaho-panel::after { animation: fx-aliento 9s ease-in-out infinite; }
  .inst-grande.vaho-2 .vaho-panel::after { animation-duration: 6s; }
}

/* humedad en límite: 9 gotitas */
.anim-gotas i:nth-child(6) { left: 9%; } .anim-gotas i:nth-child(7) { left: 53%; } .anim-gotas i:nth-child(8) { left: 74%; } .anim-gotas i:nth-child(9) { left: 92%; }
@media (prefers-reduced-motion: no-preference) {
  .anim-gotas i:nth-child(6) { animation-delay: .8s; } .anim-gotas i:nth-child(7) { animation-delay: 3.1s; }
  .anim-gotas i:nth-child(8) { animation-delay: 4.4s; } .anim-gotas i:nth-child(9) { animation-delay: 1.3s; }
}

/* ── la gota del rocío y su escala ── */
.rocio-fila { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-2); }
.rocio-fila .inst-valor.grande, .rocio-fila .dlg-cifra { margin-top: 0; }
.gota-rocio { width: 34px; height: 44px; flex: none; overflow: visible; }
.dlg .gota-rocio { width: 56px; height: 72px; }
.gota-borde { fill: none; stroke: var(--tinta-3); stroke-width: 1.6; }
.gota-agua { fill: var(--cielo); opacity: .8; }
.g-aviso .gota-agua { fill: var(--aviso); } .g-malo .gota-agua { fill: var(--malo); }
.g-aviso .gota-borde { stroke: var(--aviso); } .g-malo .gota-borde { stroke: var(--malo); }
.gota-brillo { fill: rgba(255, 255, 255, .55); }
.margen-escala { margin-top: var(--esp-2); }
.margen-escala .termo-barra { background: linear-gradient(90deg, var(--malo) 0%, var(--aviso) 30%, #74e3cf 55%, #5aa9ff 100%); }
.marca-malo, .marca-aviso { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; }
.marca-malo { background: var(--malo); } .marca-aviso { background: var(--aviso); }
:root[data-modo="noche"] .margen-escala .termo-barra { background: linear-gradient(90deg, #ff5a45, #1a0402); }
:root[data-modo="bn"] .margen-escala .termo-barra { background: linear-gradient(90deg, #111, #eee); }
@media (prefers-reduced-motion: no-preference) {
  .g-malo { animation: fx-gota-late 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes fx-gota-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08, .94); } }
}

/* ── UV de insolación: el panel se calienta ── */
.inst.insol-1 { background: radial-gradient(circle at 22% 48%, rgba(255, 150, 60, .26), transparent 62%), var(--fx-cristal, var(--panel)); }
.inst.insol-2 { background: radial-gradient(circle at 22% 48%, rgba(255, 95, 50, .36), transparent 66%), radial-gradient(circle at 80% 100%, rgba(255, 120, 60, .18), transparent 60%), var(--fx-cristal, var(--panel)); }
.insol-1 .sol-icono, .insol-2 .sol-icono { filter: drop-shadow(0 0 10px rgba(255, 140, 60, .85)); }
.inst.insol-1 .inst-valor { color: #ffb15a; } .inst.insol-2 .inst-valor { color: #ff7a52; }
.anim-calor i { left: 8%; width: 84%; height: 10px; bottom: -12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 5Q10 0 20 5T40 5' fill='none' stroke='%23ffa060' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / 40px 10px; }
.anim-calor i:nth-child(2) { left: 20%; width: 64%; } .anim-calor i:nth-child(3) { left: 4%; width: 70%; }
.anim-calor i:nth-child(4) { left: 30%; width: 62%; } .anim-calor i:nth-child(5) { left: 12%; width: 76%; }
:root[data-modo="noche"] .inst.insol-1, :root[data-modo="noche"] .inst.insol-2 { background: var(--fx-cristal, var(--panel)); }
@media (prefers-reduced-motion: no-preference) {
  .anim-calor i { animation: fx-calor 4.2s ease-in infinite; }
  .anim-calor.n2 i { animation-duration: 3s; }
  .anim-calor i:nth-child(2) { animation-delay: 1.4s; } .anim-calor i:nth-child(3) { animation-delay: 2.8s; }
  .anim-calor i:nth-child(4) { animation-delay: .7s; } .anim-calor i:nth-child(5) { animation-delay: 2.1s; }
  @keyframes fx-calor { 0% { opacity: 0; transform: translateY(0); background-position-x: 0; } 15% { opacity: .75; } 100% { opacity: 0; transform: translateY(-170px); background-position-x: 40px; } }
}
/* los rótulos de los extremos de la escala del rocío, dentro del panel */
.margen-escala .termo-marca:first-child { left: 0 !important; transform: none; }
.margen-escala .termo-marca:last-child { left: auto !important; right: 0; transform: none; }

/* ── 10-oct: rocío al revés (seco a la izquierda, se empaña a la derecha) ── */
.margen-escala .termo-barra { background: linear-gradient(90deg, #5aa9ff 0%, #74e3cf 45%, var(--aviso) 72%, var(--malo) 100%); }
:root[data-modo="noche"] .margen-escala .termo-barra { background: linear-gradient(90deg, #1a0402, #ff5a45); }
:root[data-modo="bn"] .margen-escala .termo-barra { background: linear-gradient(90deg, #eee, #111); }
/* calor: sin ondas, solo el rojo alrededor (David) */
.anim-calor { display: none; }
.inst.insol-1, .inst.insol-2 { box-shadow: 0 0 0 1px rgba(255, 140, 60, .55), 0 0 26px rgba(255, 110, 50, .28); }
.inst.insol-2 { box-shadow: 0 0 0 1px rgba(255, 90, 60, .8), 0 0 34px rgba(255, 80, 50, .4); }
/* helada: escarcha en las esquinas, filo helado y la cifra azul hielo */
.inst.helada { background: radial-gradient(circle at 0 0, rgba(210, 236, 255, .22), transparent 38%), radial-gradient(circle at 100% 100%, rgba(210, 236, 255, .18), transparent 40%), var(--fx-cristal, var(--panel));
  box-shadow: 0 0 0 1px rgba(170, 215, 255, .55), 0 0 22px rgba(150, 200, 255, .22); }
.inst.helada-2 { box-shadow: 0 0 0 1px rgba(190, 228, 255, .85), 0 0 30px rgba(160, 210, 255, .36); }
.inst.helada .inst-valor { color: #bfe3ff; }
.inst.helada::after { content: '❄'; position: absolute; right: 14px; bottom: 10px; width: auto; height: auto; border: 0; font-size: 22px; color: rgba(210, 236, 255, .7); }
/* seeing y aire: filas limpias */
.seeing-valor { margin-top: var(--esp-1) !important; text-transform: capitalize; }
.cal-lista b { white-space: nowrap; }
.aire-nivel { font: 600 14px var(--f-texto); }
.aire-nivel.n0 { color: var(--ok); } .aire-nivel.n1 { color: #a8e06a; } .aire-nivel.n2 { color: var(--aviso); } .aire-nivel.n3, .aire-nivel.n4, .aire-nivel.n5 { color: var(--malo); }
/* polvo dentro del panel del aire: motas ocres que derivan */
.anim-polvo i { width: 3px; height: 3px; border-radius: 50%; background: rgba(226, 182, 120, .8); top: 20%; left: -5%; }
.anim-polvo i:nth-child(2n) { top: 38%; width: 2px; height: 2px; } .anim-polvo i:nth-child(3n) { top: 56%; } .anim-polvo i:nth-child(5n) { top: 74%; width: 4px; height: 4px; }
.anim-polvo i:nth-child(7n) { top: 30%; } .anim-polvo i:nth-child(4n) { top: 64%; }
@media (prefers-reduced-motion: no-preference) {
  .anim-polvo i { animation: fx-polvo 7s linear infinite; }
  .anim-polvo.n2 i { animation-duration: 4.5s; }
  .anim-polvo i:nth-child(2) { animation-delay: .6s; } .anim-polvo i:nth-child(3) { animation-delay: 1.3s; } .anim-polvo i:nth-child(4) { animation-delay: 2.1s; }
  .anim-polvo i:nth-child(5) { animation-delay: 2.8s; } .anim-polvo i:nth-child(6) { animation-delay: 3.5s; } .anim-polvo i:nth-child(7) { animation-delay: 4.2s; }
  .anim-polvo i:nth-child(8) { animation-delay: .3s; } .anim-polvo i:nth-child(9) { animation-delay: 1.7s; } .anim-polvo i:nth-child(10) { animation-delay: 2.5s; }
  .anim-polvo i:nth-child(11) { animation-delay: 3.1s; } .anim-polvo i:nth-child(12) { animation-delay: 3.9s; } .anim-polvo i:nth-child(13) { animation-delay: 4.6s; } .anim-polvo i:nth-child(14) { animation-delay: 5.3s; }
  @keyframes fx-polvo { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 50% { transform: translate(160px, -14px); } 90% { opacity: .8; } 100% { opacity: 0; transform: translate(330px, 8px); } }
}
:root[data-modo="noche"] .anim-polvo i { background: rgba(255, 90, 69, .6); }

/* ── el SIMULADOR, siempre a la vista en la barra ── */
.dk-esc { display: inline-flex !important; align-items: center; gap: 6px; }
.dk-esc-etq { font: 500 11px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.dk-esc select { max-width: 210px; }
@media (max-width: 760px) { .dk-esc-etq { display: none; } .dk-esc select { max-width: 150px; } }
/* el emoticono de la sensación, más grande */
.emoji { font-size: 1.35em; line-height: 1; vertical-align: -0.12em; }
/* la temperatura de arriba en los extremos: calor (resplandor naranja o rojo detrás) o helada (escarcha azul y ❄) */
.temp-bloque { position: relative; }
.temp-bloque.t-calor::before, .temp-bloque.t-calor-2::before, .temp-bloque.t-helada::before { content: ''; position: absolute; inset: -10% -6% -4% -10%; z-index: -1; border-radius: 40%; pointer-events: none; }
.temp-bloque.t-calor::before { background: radial-gradient(closest-side, rgba(255, 150, 60, .22), transparent); }
.temp-bloque.t-calor-2::before { background: radial-gradient(closest-side, rgba(255, 80, 50, .32), transparent); }
.temp-bloque.t-helada::before { background: radial-gradient(closest-side, rgba(170, 215, 255, .22), transparent); }
.temp-bloque.t-helada .temp-num { text-shadow: 0 0 22px rgba(190, 228, 255, .55); }
.temp-bloque.t-helada::after { content: '❄'; position: absolute; left: 46%; top: 22%; font-size: 30px; color: rgba(210, 236, 255, .55); }
:root[data-modo="noche"] .temp-bloque::before, :root[data-modo="noche"] .temp-bloque::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .temp-bloque.t-calor-2::before { animation: fx-calor-late 3s ease-in-out infinite; }
  @keyframes fx-calor-late { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
}
.i-limite .t-av { display: none; }
.inst.aviso:not(.alarma) .i-limite .t-lim { display: none; }
.inst.aviso:not(.alarma) .i-limite .t-av { display: inline; }

/* ── una sola «i» por cuadrito, SIEMPRE en el mismo sitio: arriba a la derecha, junto a ampliar (David, 10-oct) ── */
.inst .etq { padding-right: 58px; }
.inst > .etq > .info, .inst > .etq .info { position: absolute; top: 10px; right: 38px; margin: 0; }
.inst .inst-sub .info, .inst .cal-lista .info, .inst .tormenta-linea .info, .inst .cal-transp .info, .inst .inst-valor .info { display: none; }
.inst:not(:has(.ampliar)) > .etq .info { right: 12px; }
.inst:not(:has(.ampliar)) .etq { padding-right: 34px; }

/* el cuadrito copiado dentro de su ventana grande: sin su título (ya lo lleva la ventana) ni su ⤢ */
.dlg-panel-copia .inst { min-height: 0; box-shadow: 0 0 0 1px var(--linea); }
.dlg-panel-copia .inst > .etq { display: none; }
.dlg-panel-copia .ampliar { display: none; }

/* ── cabeceras iguales en todos los cuadritos (David, 10-oct: «¿pueden estar alineadas las dos líneas de indicación?») ──
   el título en una sola línea; la etiqueta de aviso/límite baja a la segunda si no cabe; la cabecera siempre mide lo
   mismo, así la cifra y las barras de debajo quedan a la misma altura de un cuadrito a otro */
.inst > .etq { white-space: nowrap; flex-wrap: wrap; align-content: flex-start; row-gap: 4px; min-height: 40px; letter-spacing: .11em; }
.inst.alarma .i-limite, .inst.aviso .i-limite { margin-left: 0; }
.rocio-fila { margin-top: 0; min-height: 50px; }
.rocio-fila .gota-rocio { height: 42px; }
.inst > .inst-valor.grande { margin-top: 0; min-height: 50px; display: flex; align-items: center; }
.inst .termo, .inst .margen-escala { margin-top: var(--esp-2); }
@media (max-width: 880px) { .inst > .etq { white-space: normal; min-height: 0; } }
.inst > .inst-valor.grande { gap: .3em; }
/* al mover la estrella, las marcas de las barras se deslizan a su sitio (no saltan) */
@media (prefers-reduced-motion: no-preference) {
  .termo-ahora, .sqm-base, .marca-aviso, .marca-malo { transition: left .35s cubic-bezier(.23, 1, .32, 1), bottom .35s cubic-bezier(.23, 1, .32, 1); }
  .gota-agua { transition: y .35s cubic-bezier(.23, 1, .32, 1); }
  .pluvio-agua, .pluvio-superficie { transition: y .35s ease-out, height .35s ease-out, cy .35s ease-out; }
  .inst, .veredicto { transition: box-shadow .3s ease-out; }
}