/* JDServer-Webs v6.6 — 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;
  position: relative;
}
.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;
  display:block;
  cursor: crosshair;
  touch-action: pan-y;

  /* Importante: el fondo del canvas acompaña al tema del scope real */
  background: var(--card);
}

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

/* Tooltip / crosshair */
.trend-tooltip{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity .08s ease;

  background: color-mix(in oklab, var(--card) 88%, #000 12%);
  border: 1px solid color-mix(in oklab, var(--border) 85%, #000 15%);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  padding: 6px 8px;

  font: 600 .86rem/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--fg, var(--text));
  backdrop-filter: blur(8px);
}
.trend-tooltip.is-on{ opacity: 1; }
.trend-tooltip .tt-val{ font-weight: 700; letter-spacing: .1px; }
.trend-tooltip .tt-time{
  margin-top: 3px;
  font-weight: 600;
  font-size: .78rem;
  color: var(--muted);
}

/* Colores por variable (paleta diferenciada y coherente) */
:root{
  --chart-temp:      #ef4444; /* rojo: temperatura */
  --chart-hum:       #0ea5e9; /* azul: humedad */
  --chart-wind:      #22c55e; /* verde: viento */
  --chart-bar:       #475569; /* pizarra: presión */
  --chart-sun:       #facc15; /* amarillo: radiación solar */
  --chart-uvi:       #9333ea; /* violeta: índice UV */

  --chart-prec:      #2563eb; /* azul profundo: precipitación */
  --chart-prec-int:  #ec4899; /* fucsia: intensidad de lluvia */
  --chart-prec-day:  #14b8a6; /* turquesa: lluvia diaria */

  --chart-wind-dir:  #84cc16; /* lima: dirección viento (cuando salga en dots) */
}