/* JDServer-Webs v6.1 — modules/windrose/windrose.css
   - Rosa de los vientos en SVG
   - Colores por intensidad del viento
   - Leyenda + selector de rango + tooltip
*/

#windrose { margin: 18px 0 28px; }
#windrose > .wr-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 12px;
}

.wr-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; margin-bottom: 6px;
}
.wr-title{
  font-weight: 600;
}
.wr-range{
  display:flex; gap:6px; flex-wrap: wrap;
}
.wr-range .btn{
  border:1px solid var(--border);
  background: var(--card);
  padding:.35rem .6rem; border-radius: 999px; cursor:pointer;
  font-size:.92rem;
}
.wr-range .btn.active{
  background: linear-gradient(180deg, var(--brand-accent), var(--brand));
  color: #fff; border-color: transparent;
}

.wr-wrap{
  position: relative;
  display:grid;
  grid-template-columns: minmax(260px, 1fr) 260px;
  gap: 10px;
}
@media (max-width: 760px){
  .wr-wrap{ grid-template-columns: 1fr; }
}

.wr-svgbox{
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px;
  display:grid; place-items:center;
  min-height: 320px;
}

.wr-legend{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:.92rem;
}
.wr-legend h4{
  margin:0 0 8px 0; font-weight:600; font-size: .96rem;
}
.wr-legend-row{
  display:flex; align-items:center; gap:10px; margin:6px 0;
}
.wr-box{
  width:16px; height:16px; border-radius:4px; border:1px solid var(--border);
}
.wr-meta{ margin-top:8px; color:var(--muted); font-size:.88rem; }

/* Tooltip flotante */
.wr-tooltip{
  position:absolute; pointer-events:none;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
  padding:6px 8px;
  font-size:.9rem; color: var(--fg);
  transform: translate(8px, -8px);
  z-index: 50; display:none;
}

/* Paleta por intensidad (puedes ajustar a tu gusto) */
:root{
  --wr-l1: #93c5fd; /* 0–5 km/h  */
  --wr-l2: #34d399; /* 5–15      */
  --wr-l3: #f59e0b; /* 15–30     */
  --wr-l4: #ef4444; /* >30       */
}

/* Anillos guía y radios */
.wr-grid-line{ stroke: var(--border); stroke-width:1; fill:none; }
.wr-grid-text{ fill: var(--muted); font: 12px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

/* Sectores */
.wr-sector{ opacity:.9; transition: opacity .15s ease, transform .15s ease; }
.wr-sector:hover{ opacity:1; filter: saturate(1.15); }

/* Etiquetas de puntos cardinales */
.wr-cardinal{ fill: var(--muted); font: 12px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; opacity:.85; }