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

#trend24 { margin: 12px 0 24px; }
#trend24 > h3 { margin: 0 0 10px; font-weight: 600; }

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