/* JDServer-Webs v6.1 — modules/graphs/graphs.css (v1.5 aligned with trends)
   - Tarjetas y leyendas con el mismo look&feel que trends
   - Altura un pelín mayor para ganar “aire”
*/

#charts{ margin: 18px 0 28px; }

/* Cabecera */
.charts-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 8px;
}
.charts-title{ font-weight:600; }

/* Selector de rango */
.charts-range{ display:flex; gap:8px; }
.range-btn{
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 999px;
  padding: 6px 10px;
  font: 500 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.range-btn.active{
  background: rgba(var(--brand-rgb), .08);
  border-color: rgba(var(--brand-rgb), .25);
}

/* Grid de tarjetas (como trends) */
.charts-wrap{
  display:grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .charts-wrap{ grid-template-columns: 1fr 1fr; }
}

/* Tarjeta estilo trends / live */
.chart-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 10px 12px;       /* igual que .tr-card */
  display: grid; gap: 8px;  /* separación uniforme */
}
.chart-inner{ width:100%; }

/* Altura algo mayor que antes; dual sube un poco más abajo */
.chart-canvas{
  display:block; width:100%; height: 240px;
  border-radius: 10px; overflow:hidden;
}

/* Leyendas DOM (idénticas a trends) */
.chart-legend,
.dual-legend{
  display:flex; gap:12px; align-items:center;
  margin: 2px 4px 4px 4px;
  color: var(--muted);
  font: 12px/1.1 system-ui,-apple-system, Segoe UI, Roboto, sans-serif;
}

.chart-legend .lg,
.dual-legend .lg{
  display:inline-flex; align-items:center; gap:8px;
  font: 600 13px/1.2 system-ui,-apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--fg);
  opacity: .92;
}

.chart-legend .lg i,
.dual-legend .lg i{
  --c: #999;
  width:10px; height:10px; border-radius:999px; background: var(--c);
  display:inline-block;
}

/* Colores por métrica (mapeo coherente con trends) */
:root{
  --chart-temp: #ef4444; /* rojo */
  --chart-hum:  #0ea5a4; /* teal */
  --chart-wind: #10b981; /* green (consistente con trends) */
  --chart-bar:  #8b5cf6; /* purple */
  --chart-sun:  #22c55e; /* green vivo */
  --chart-uvi:  #a855f7; /* violet */
  --chart-prec: #0ea5e9; /* sky */
}

/* La tarjeta dual (Sol + UVI) algo más alta */
.chart-inner .chart-canvas.dual{
  height: 260px;
}

/* Dark-mode safe (colores ya basados en vars) */
/* No es necesario añadir overrides: var(--card), var(--border), var(--fg), var(--muted) ya cambian con el tema. */