/* ══════════════════════════════════════════════════════════════════════════
   CIELO · estilos de la animación del tiempo

   La animación queda al fondo y las cifras encima. Es deliberado: lo que se
   mueve es ilustración, y lo que decide es el número. Si la lectura dependiera
   de interpretar el dibujo, la aplicación estaría comunicando peor.
   ══════════════════════════════════════════════════════════════════════════ */
.cielo-host {
  position: relative;
  width: 100%;
  min-height: 190px;
  border-radius: var(--r, 14px);
  overflow: hidden;
  border: 1px solid var(--line, rgba(140, 180, 215, .16));
  background: var(--panel, #101823);
}
.cielo-lienzo { display: block; width: 100%; height: 100%; }

.cielo-info {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 13px 14px;
  /* Un velo desde abajo para que las cifras se lean sobre cualquier cielo,
     de día o de noche, con lluvia o despejado. */
  background: linear-gradient(180deg, rgba(4, 8, 14, .34) 0%, rgba(4, 8, 14, 0) 34%,
                                      rgba(4, 8, 14, .58) 78%, rgba(4, 8, 14, .78) 100%);
  pointer-events: none;
}
.cielo-titular {
  font: 600 clamp(.98rem, 2.6vw, 1.22rem)/1.3 var(--f-display, system-ui, sans-serif);
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
.cielo-titular b { color: var(--amber, #f0a202); }

.cielo-cifras { display: flex; gap: 8px; flex-wrap: wrap; }
.cielo-cifra {
  flex: 1; min-width: 92px;
  padding: 7px 9px; border-radius: 9px;
  background: rgba(6, 10, 16, .52);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(5px);
}
.cielo-cifra .k {
  font: 600 .58rem/1.2 var(--f-mono, ui-monospace, monospace);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.cielo-cifra .v {
  font: 700 .96rem/1.25 var(--f-display, system-ui, sans-serif);
  color: #fff; margin-top: 2px;
}
.cielo-cifra .s {
  font: 400 .66rem/1.35 var(--f-body, system-ui, sans-serif);
  color: rgba(255, 255, 255, .68); margin-top: 1px;
}

@media (max-width: 620px) {
  .cielo-host { min-height: 230px; }
  .cielo-cifra { min-width: calc(50% - 4px); flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Quien pidió menos movimiento no debería recibir lluvia animada. El
     lienzo se queda quieto y las cifras siguen siendo lo importante. */
  .cielo-lienzo { opacity: .5; }
}