/* JDServer-Webs v6.6 — modules/trend24/trend24.css
   Mini-gráficas (sparklines) por variable, prueba visual inspirada en JDStats (2026-09-05).
*/

#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:14px;
  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:7px 12px;
  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: 16px;
}
@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: 20px;
  box-shadow: 0 3px 14px rgba(15,23,42,.035);
  overflow: hidden;
  transition: border-color .2s ease;
  position: relative;
}
.trend-card::before{
  content:""; position:absolute; top:0; left:18px; right:18px; height:2px;
  border-radius:999px; background:var(--trend-accent, var(--border)); opacity:.8;
  pointer-events:none;
}

.trend-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 18px 18px 20px;
}
.trend-compare{
  position:relative;
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid color-mix(in srgb, var(--trend-accent, var(--brand)) 24%, var(--border));
  border-radius:999px;
  padding:5px 8px;
  color:color-mix(in srgb, var(--trend-accent, var(--brand)) 55%, var(--fg, var(--text)));
  background:color-mix(in srgb, var(--trend-accent, var(--brand)) 6%, var(--card));
  font:500 .66rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  cursor:pointer; touch-action:manipulation;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.trend-compare::before{
  content:""; width:6px; height:6px; border-radius:50%;
  border:1px solid var(--trend-previous-accent, currentColor);
  background:transparent;
}
/* El marcado depende únicamente del estado: Safari conserva :hover tras tocar. */
.trend-compare[aria-pressed="true"]{
  color:var(--fg, var(--text));
  border-color:var(--trend-accent, var(--brand));
  background:color-mix(in srgb, var(--trend-accent, var(--brand)) 20%, var(--card));
}
.trend-compare[aria-pressed="true"]::before{
  background:var(--trend-previous-accent, currentColor);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--trend-previous-accent, currentColor) 18%, transparent);
}
.trend-compare:focus-visible{
  outline:2px solid var(--trend-accent, var(--brand)); outline-offset:3px;
}
.trend-compare[aria-busy="true"]{ opacity:.65; }
@media (pointer:coarse){
  /* Aspecto compacto, zona táctil de 44 px para no dificultar su uso. */
  .trend-compare::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
}
.trend-comparison-legend{
  display:flex; gap:16px; flex-wrap:wrap;
  margin:-6px 18px 16px;
  color:var(--muted); font:500 .72rem/1.3 system-ui,sans-serif;
}
.trend-comparison-legend[hidden]{ display:none; }
.trend-comparison-legend span{ display:inline-flex; align-items:center; gap:6px; }
.trend-comparison-legend span::before{
  content:""; width:18px; border-top:2px solid var(--trend-accent, var(--brand));
}
.trend-comparison-legend .trend-previous-label::before{
  border-top-color:var(--trend-previous-accent, var(--trend-accent));
}
.trend-tooltip .tt-previous{
  margin-top:7px; padding-top:6px; border-top:1px solid var(--border);
  font-size:.75rem; font-weight:500;
}
@media (max-width:420px){
  .trend-head{ padding:16px 12px 18px; gap:8px; }
  .trend-title{ font-size:.87rem; gap:8px; }
  .trend-compare{ padding:5px 7px; font-size:.64rem; }
}
.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:10px;
}
.trend-legend-dot{
  width:10px; height:10px; border-radius:999px; flex:0 0 auto;
  background: var(--c, var(--brand));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--brand)) 12%, transparent);
}

/* Canvas */
.trend-canvas{
  width: calc(100% - 24px);
  height: 180px;
  margin: 0 12px;
  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{
  margin: 18px;
  padding: 9px 11px;

  max-width: calc(100% - 16px);
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--bg-soft, rgba(148,163,184,.08));
  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: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  padding: 9px 11px;

  font: 600 .86rem/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--fg, var(--text));
  font-variant-numeric: tabular-nums;
}
.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-feels:     #f97316; /* naranja: sensación térmica */
  --chart-cloud-base:#2dd4bf; /* verde turquesa: base de nubes */
  --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) */

  /* Día anterior: tonos de las mismas familias, compartidos por línea y leyenda. */
  --chart-temp-previous:       #db2777; /* frambuesa: más separación del rojo actual */
  --chart-feels-previous:      #fbbf24;
  --chart-cloud-base-previous: #10b981;
  --chart-hum-previous:        #22d3ee;
  --chart-wind-previous:       #84cc16;
  --chart-bar-previous:        #94a3b8;
  --chart-sun-previous:        #fb923c;
  --chart-uvi-previous:        #c084fc;
  --chart-prec-previous:       #38bdf8;
  --chart-prec-int-previous:   #f472b6;
  --chart-prec-day-previous:   #34d399;
  --chart-wind-dir-previous:   #22c55e;
}