/* JDServer-Webs v6.0 — modules/live/live.css (v1.3.4 halo+multi-alert) */
#live { margin: 14px 0 20px; }

.live-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.live-title { font-weight: 600; }
.live-updated { font-size: .9rem; color: var(--muted); display:flex; align-items:center; gap:8px; }

.live-age {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.15rem .5rem; border-radius: 999px;
  font-size: .78rem; line-height: 1;
  border: 1px solid var(--border);
  background: var(--card); color: var(--muted);
}
.live-age .dot{ width: .55rem; height: .55rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--border) inset; }
.live-age.ok .dot{ background: #16a34a; }
.live-age.warn .dot{ background: #f59e0b; }
.live-age.bad .dot{ background: #dc2626; }
.live-age.unk .dot{ background: #6b7280; }

.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.live-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 14px;
  display:flex; flex-direction:column; gap:6px;
  min-height: 92px;
}
.metric-label { font-size: .88rem; color: var(--muted); }
.metric-main { font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric-unit { font-size: 1rem; opacity:.8; margin-left: .2rem; }
.metric-sub { font-size: .95rem; color: var(--muted); }

@media (max-width: 520px){
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================== Alertas visuales live (halos por métrica) ================== */

/* Temp / Sensación */
@keyframes liveGlowHot {
  0%,100% { box-shadow: 0 0 0 rgba(248,113,113,0); }
  50%     { box-shadow: 0 0 22px rgba(248,113,113,0.55); }
}
@keyframes liveGlowCold {
  0%,100% { box-shadow: 0 0 0 rgba(56,189,248,0); }
  50%     { box-shadow: 0 0 22px rgba(56,189,248,0.55); }
}
.live-card.live-alert-hot{
  border-color: rgba(248,113,113,0.75);  /* rojo suave */
  animation: liveGlowHot 2.4s ease-in-out infinite;
}
.live-card.live-alert-cold{
  border-color: rgba(56,189,248,0.75);   /* azul cielo suave */
  animation: liveGlowCold 2.4s ease-in-out infinite;
}

/* Humedad muy alta / muy baja */
@keyframes liveGlowHumid {
  0%,100% { box-shadow: 0 0 0 rgba(34,197,94,0); }
  50%     { box-shadow: 0 0 20px rgba(34,197,94,0.55); }
}
@keyframes liveGlowDry {
  0%,100% { box-shadow: 0 0 0 rgba(245,158,11,0); }
  50%     { box-shadow: 0 0 20px rgba(245,158,11,0.55); }
}
.live-card.live-alert-humid{
  border-color: rgba(34,197,94,0.8);   /* verde humedad */
  animation: liveGlowHumid 2.4s ease-in-out infinite;
}
.live-card.live-alert-dry{
  border-color: rgba(245,158,11,0.85); /* ámbar seco */
  animation: liveGlowDry 2.4s ease-in-out infinite;
}

/* Viento fuerte */
@keyframes liveGlowWind {
  0%,100% { box-shadow: 0 0 0 rgba(59,130,246,0); }
  50%     { box-shadow: 0 0 22px rgba(59,130,246,0.6); }
}
.live-card.live-alert-wind{
  border-color: rgba(59,130,246,0.9);  /* azul viento */
  animation: liveGlowWind 2.2s ease-in-out infinite;
}

/* Lluvia intensa (mm/h) */
@keyframes liveGlowRain {
  0%,100% { box-shadow: 0 0 0 rgba(56,189,248,0); }
  50%     { box-shadow: 0 0 22px rgba(56,189,248,0.65); }
}
.live-card.live-alert-rain{
  border-color: rgba(56,189,248,0.9);  /* azul agua */
  animation: liveGlowRain 2.1s ease-in-out infinite;
}

/* Sol / radiación muy alta */
@keyframes liveGlowSun {
  0%,100% { box-shadow: 0 0 0 rgba(250,204,21,0); }
  50%     { box-shadow: 0 0 22px rgba(250,204,21,0.7); }
}
.live-card.live-alert-sun{
  border-color: rgba(250,204,21,0.95); /* amarillo sol */
  animation: liveGlowSun 2.6s ease-in-out infinite;
}

/* UV alto */
@keyframes liveGlowUVI {
  0%,100% { box-shadow: 0 0 0 rgba(217,70,239,0); }
  50%     { box-shadow: 0 0 22px rgba(217,70,239,0.7); }
}
.live-card.live-alert-uvi{
  border-color: rgba(217,70,239,0.95); /* violeta UV */
  animation: liveGlowUVI 2.5s ease-in-out infinite;
}

/* Presión muy baja / muy alta */
@keyframes liveGlowBarLow {
  0%,100% { box-shadow: 0 0 0 rgba(56,189,248,0); }
  50%     { box-shadow: 0 0 20px rgba(56,189,248,0.6); }
}
@keyframes liveGlowBarHigh {
  0%,100% { box-shadow: 0 0 0 rgba(129,140,248,0); }
  50%     { box-shadow: 0 0 20px rgba(129,140,248,0.6); }
}
.live-card.live-alert-lowbar{
  border-color: rgba(56,189,248,0.9);   /* azul borrasca */
  animation: liveGlowBarLow 2.3s ease-in-out infinite;
}
.live-card.live-alert-highbar{
  border-color: rgba(129,140,248,0.9);  /* lila anticiclón */
  animation: liveGlowBarHigh 2.3s ease-in-out infinite;
}