/* JDServer-Webs v6.3 — modules/trend24/trend24.css
   Mini-gráficas (sparklines) por variable, look LIVE.
*/

#trend24 { margin: 12px 0 24px; }

/* Cabecera con título + selector horas */
.trend24-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.trend24-head h3{
  margin:0;
  font-weight:600;
}

/* Selector de rango (6 / 24 / 48 h) */
.trend-range{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px;
  border-radius:999px;
  background: var(--bg-soft, rgba(148,163,184,.12));
}
.trend-range button{
  border:0;
  background:transparent;
  padding:4px 10px;
  border-radius:999px;
  font:500 .80rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--muted);
  cursor:pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.trend-range button:hover{
  transform: translateY(-1px);
}
.trend-range button.is-active{
  background: var(--brand-soft, rgba(59,130,246,.12));
  color: var(--brand, var(--fg));
}

/* Grid de tarjetas: móvil 1 col, desktop 2 col */
.trend-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 820px){
  .trend-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Tarjeta estilo LIVE */
.trend-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.trend-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }

.trend-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.trend-title{
  font: 600 .95rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--fg);
  display:flex; align-items:center; gap:8px;
}
.trend-legend-dot{
  width:10px; height:10px; border-radius:999px; flex:0 0 auto;
  background: var(--c, var(--brand));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Canvas */
.trend-canvas{
  width: 100%;
  height: 140px;  /* compacta pero legible */
  display:block;
}

/* Pie con rango temporal / actualización */
.trend-foot{
  border-top: 1px solid var(--border);
  padding: 6px 10px;
  color: var(--muted);
  font: 500 .85rem/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Colores por variable (usa mismas var que las gráficas globales si existen) */
:root{
  --chart-temp:      #ef4444;
  --chart-hum:       #0ea5e9;
  --chart-wind:      #22c55e;
  --chart-bar:       #f59e0b;
  --chart-sun:       #eab308;
  --chart-uvi:       #a855f7;
  --chart-prec:      #3b82f6;
  --chart-prec-int:  #2563eb; /* Intensidad lluvia (mm/h) */
  --chart-prec-day:  #1d4ed8; /* Lluvia diaria acumulada (mm) */
  --chart-wind-dir:  #16a34a; /* Dirección viento (puntos) */
}