/* JDServer-Webs v6.2.6 — modules/radar_rv/radar-rv.css */
#radar-rv{
  margin:16px 0 28px;
}

#radar-rv > h3{
  margin:0 0 12px;
  font-weight:600;
}

.card.radar-rv-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 12px;
  display: grid;
  gap: 12px;
  min-width: 0;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.radar-rv-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.radar-rv-mapwrap{
  position: relative;
  width: 100%;
  height: 370px;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border, rgba(255,255,255,.12)) 85%, transparent);
}

.radar-rv-map{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.03);
}

.radar-rv-meta{
  display: grid;
  gap: 6px;
}

.radar-rv-meta-label{
  font: 600 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--muted);
}

.radar-rv-meta-value{
  font: 500 15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--text, inherit);
}

.radar-rv-controls{
  display: grid;
  gap: 12px;
}

.radar-rv-controls-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.radar-rv-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid color-mix(in oklab, var(--border, rgba(255,255,255,.12)) 82%, transparent);
  background: color-mix(in oklab, var(--card, #0f172a) 90%, white 8%);
  color: var(--text, inherit);
  border-radius: 16px;
  min-height: 36px;
  padding: 0 14px;
  font: 600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    transform .15s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.radar-rv-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.radar-rv-btn-primary{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand, #60a5fa) 78%, white 18%),
    color-mix(in oklab, var(--brand, #60a5fa) 72%, black 8%)
  );
  color: #fff;
  border-color: color-mix(in oklab, var(--brand, #60a5fa) 62%, black 16%);
  border-radius: 16px;
  padding-inline: 14px;
  box-shadow:
    0 8px 20px color-mix(in oklab, var(--brand, #60a5fa) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.radar-rv-speedwrap{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.radar-rv-speedlabel{
  font: 600 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--muted);
}

.radar-rv-select{
  min-height: 36px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--border, rgba(255,255,255,.12)) 82%, transparent);
  background: color-mix(in oklab, var(--card, #0f172a) 90%, white 8%);
  color: var(--text, inherit);
  padding: 0 12px;
  font: 500 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:
    0 1px 2px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.radar-rv-rangebox{
  display: grid;
  gap: 8px;
}

.radar-rv-rangehead{
  font: 600 14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--text, inherit);
}

.radar-rv-rangeinfo{
  font: 500 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--muted);
}

.radar-rv-range{
  width: 100%;
}

.radar-rv-legend{
  display: grid;
  gap: 8px;
  margin-top: -2px;
}

.radar-rv-legend-label{
  font: 600 12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--muted);
}

.radar-rv-legend-bar{
  height: 10px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--border, rgba(255,255,255,.12)) 88%, transparent);
  background:
    linear-gradient(
      90deg,
      #c7ecff 0%,
      #2f9bff 36%,
      #facc15 68%,
      #f97316 84%,
      #ef4444 94%,
      #c026d3 100%
    );
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}

.radar-rv-legend-ticks{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  font: 500 11px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--muted);
}

.radar-rv-legend-ticks span:nth-child(1){ text-align:left; }
.radar-rv-legend-ticks span:nth-child(2),
.radar-rv-legend-ticks span:nth-child(3){ text-align:center; }
.radar-rv-legend-ticks span:nth-child(4){ text-align:right; }

.radar-rv-attrib,
#radar-rv .leaflet-control-attribution{
  font: 12px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--muted);
}

#radar-rv .leaflet-control-attribution{
  background: rgba(15,23,42,.72);
  color: #e5e7eb;
  backdrop-filter: blur(6px);
}

#radar-rv .leaflet-control-attribution a{
  color: #bfdbfe;
}

#radar-rv .leaflet-control-zoom a{
  color: #111827;
}

/* Alertas visuales */
@keyframes rvGlowBlue{
  0%,100%{ box-shadow:0 0 0 rgba(56,189,248,0) }
  50%{ box-shadow:0 0 24px rgba(56,189,248,.45) }
}

@keyframes rvGlowRed{
  0%,100%{ box-shadow:0 0 0 rgba(244,63,94,0) }
  50%{ box-shadow:0 0 28px rgba(244,63,94,.50) }
}

@keyframes rvGlowAmber{
  0%,100%{ box-shadow:0 0 0 rgba(245,158,11,0) }
  50%{ box-shadow:0 0 24px rgba(245,158,11,.46) }
}

.radar-rv-card.alert-rain{
  border-color: rgba(56,189,248,.58);
  animation: rvGlowBlue 2.5s ease-in-out infinite;
}

.radar-rv-card.alert-rain .radar-rv-meta-label{
  color: #38bdf8;
}

.radar-rv-card.alert-extreme{
  border-color: rgba(244,63,94,.62);
  animation: rvGlowRed 2.2s ease-in-out infinite;
}

.radar-rv-card.alert-extreme .radar-rv-meta-label{
  color: #f43f5e;
}

.radar-rv-card.alert-thunder{
  outline: 1px solid rgba(245,158,11,.45);
  animation: rvGlowAmber 2.0s ease-in-out infinite;
}

@media (max-width: 760px){
  .radar-rv-mapwrap{
    height: 320px;
  }

  .radar-rv-controls-row{
    align-items: stretch;
  }

  .radar-rv-speedwrap{
    margin-left: 0;
    width: 100%;
  }

  .radar-rv-btn{
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 14px;
  }

  .radar-rv-select{
    width: 100%;
    min-height: 34px;
    font-size: 12px;
    border-radius: 14px;
  }

  .radar-rv-speedlabel{
    font-size: 12px;
  }

  .radar-rv-legend-ticks{
    font-size: 10px;
    gap: 6px;
  }

  .radar-rv-btn-primary{
    padding-inline: 12px;
  }
}