/* JDServer-Webs v6.1.2 — modules/radar/radar.css */
#radar { margin: 16px 0 28px; }
#radar > h3 { font-weight: 600; margin: 0 0 12px; }

.radar-grid{
  display: grid;
  grid-template-columns: 1fr; /* móvil: una encima de otra */
  gap: 12px;
}
@media (min-width: 900px){
  .radar-grid{ grid-template-columns: 1fr 1fr; } /* escritorio: dos en línea */
}

.card.radar-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 10px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  min-width: 0;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.radar-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.radar-head{ display:flex; align-items:center; justify-content:space-between; }
.radar-subtitle{ font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); }

.radar-framewrap{
  position: relative;
  width: 100%; height: 360px;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
}
@media (max-width: 600px){ .radar-framewrap{ height: 300px; } }

.radar-frame{ width: 100%; height: 100%; border: 0; display: block; }
.radar-attrib{ margin-top: 4px; font: 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); }

/* =================== Alertas visuales (hoy) =================== */
/* PR≥70% => halo azul; PR≥90% => halo rojo; Tormenta => ámbar */
/* Variantes ALT/STRONG para diferenciar color entre ambas tarjetas */

@keyframes glowBlue   { 0%,100%{box-shadow:0 0 0 rgba(56,189,248,0)} 50%{box-shadow:0 0 24px rgba(56,189,248,.45)} }
@keyframes glowRed    { 0%,100%{box-shadow:0 0 0 rgba(244,63,94,0)}  50%{box-shadow:0 0 28px rgba(244,63,94,.50)} }
@keyframes glowAmber  { 0%,100%{box-shadow:0 0 0 rgba(245,158,11,0)} 50%{box-shadow:0 0 26px rgba(245,158,11,.50)} }
@keyframes glowCyan   { 0%,100%{box-shadow:0 0 0 rgba(34,211,238,0)} 50%{box-shadow:0 0 22px rgba(34,211,238,.45)} }
@keyframes glowOrange { 0%,100%{box-shadow:0 0 0 rgba(249,115,22,0)} 50%{box-shadow:0 0 26px rgba(249,115,22,.50)} }

/* Lluvia moderada (70–89%) */
.radar-card.alert-rain{
  border-color: rgba(56,189,248,.55);
  animation: glowBlue 2.4s ease-in-out infinite;
}
.radar-card.alert-rain .radar-subtitle{ color:#38bdf8; }

/* Variante ALT (para la otra tarjeta, mantiene contraste) */
.radar-card.alert-rain-alt{
  border-color: rgba(34,211,238,.55);
  animation: glowCyan 2.5s ease-in-out infinite;
}
.radar-card.alert-rain-alt .radar-subtitle{ color:#22d3ee; }

/* Lluvia fuerte (≥90%) */
.radar-card.alert-extreme{
  border-color: rgba(244,63,94,.60);
  animation: glowRed 2.2s ease-in-out infinite;
}
.radar-card.alert-extreme .radar-subtitle{ color:#f43f5e; }

/* Variante ALT para la otra tarjeta */
.radar-card.alert-extreme-alt{
  border-color: rgba(249,115,22,.65);
  animation: glowOrange 2.3s ease-in-out infinite;
}
.radar-card.alert-extreme-alt .radar-subtitle{ color:#f97316; }

/* Tormenta (texto del cielo contiene “tormenta”) */
.radar-card.alert-thunder-strong{
  border-color: rgba(245,158,11,.70);
  animation: glowAmber 2.0s ease-in-out infinite;
}
.radar-card.alert-thunder-strong .radar-subtitle{ color:#f59e0b; }

/* Variante ALT más suave para la otra tarjeta */
.radar-card.alert-thunder-alt{
  border-color: rgba(245,158,11,.55);
  animation: glowAmber 2.6s ease-in-out infinite;
  opacity: .98;
}