/* 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;
}

/* ---- Buttons: mejor contraste en modo claro, sin romper el oscuro ---- */
:root{
  /* Fallbacks seguros: si el navegador no soporta color-mix, usará los valores por defecto del var() */
  --wr-btn-bg: var(--card);
  --wr-btn-border: var(--border);
  --wr-btn-hover-bg: var(--card);
  --wr-btn-hover-border: var(--border);
}

/* Si hay soporte para color-mix, damos un tinte suave al “brand” */
@supports (background: color-mix(in oklab, white, black)){
  :root{
    --wr-btn-bg: color-mix(in oklab, var(--brand) 8%, var(--card));
    --wr-btn-border: color-mix(in oklab, var(--brand) 18%, var(--border));
    --wr-btn-hover-bg: color-mix(in oklab, var(--brand) 14%, var(--card));
    --wr-btn-hover-border: color-mix(in oklab, var(--brand) 28%, var(--border));
  }

  /* En oscuro: menos tinte y más “sobrio” */
  html[data-theme="dark"], :root[data-theme="dark"]{
    --wr-btn-bg: color-mix(in oklab, var(--card) 92%, black);
    --wr-btn-border: var(--border);
    --wr-btn-hover-bg: color-mix(in oklab, var(--card) 88%, black);
    --wr-btn-hover-border: color-mix(in oklab, var(--border) 80%, white);
  }
}

.wr-range .btn{
  border:1px solid var(--wr-btn-border, var(--border));
  background: var(--wr-btn-bg, var(--card));
  color: var(--fg);
  padding:.35rem .6rem;
  border-radius: 999px;
  cursor:pointer;
  font-size:.92rem;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

.wr-range .btn:hover{
  background: var(--wr-btn-hover-bg, var(--card));
  border-color: var(--wr-btn-hover-border, var(--border));
  transform: translateY(-1px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.10), 0 6px 16px rgba(0,0,0,.06);
}

.wr-range .btn:active{
  transform: translateY(0px);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.10);
}

.wr-range .btn.active{
  background: linear-gradient(180deg, var(--brand-accent), var(--brand));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.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; }