/* JDServer — stations-summary.css (v1.5 dark tuned) */

:root{
  /* Colores base por tipo de KPI (suave) */
  --kpi-temp:#ffe2da;
  --kpi-hum:#e8f3ff;
  --kpi-wind:#e9f7ef;
  --kpi-uv:#f1e9ff;
  --kpi-sun:#fff3d6;
  --kpi-pres:#e9efff;
  --kpi-rain:#e9fff5;
}

#stations-summary{
  margin:6px 0 12px;
}

#stations-summary > .ss-head{
  margin:12px 0 6px;
}

#stations-summary > .ss-head h3{
  margin:0 0 6px;
  font-weight:700;
}

/* GRID de estaciones */
.ss-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
}

/* Tarjeta estación */
.ss-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-1);
  padding:16px;
  transition:box-shadow .18s ease, transform .18s ease;
}

.ss-title{
  font-weight:700;
  margin:0 0 10px;
}

/* KPIs */
.ss-kpis{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 720px){
  .ss-kpis{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.ss-kpi{
  /* En claro: pastel luminoso */
  --bg: var(--tint, #f2f5f8);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 88%, #ffffff 12%),
      var(--bg)
    );
  border:1px solid color-mix(in srgb, var(--bg) 70%, #000000 8%);
  border-radius:14px;
  padding:10px 12px;
  min-height:74px;

  display:grid;
  grid-template-rows:auto auto auto;
  align-content:start;
}

.ss-kpi-l{
  font-size:12px;
  color:var(--muted);
  line-height:1.1;
}

.ss-kpi-v{
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  margin-top:2px;
}

.ss-kpi-u{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* Pie de tarjeta */
.ss-foot{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.ss-upd{
  font-size:12px;
  color:var(--muted);
}

.ss-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.ss-ok{
  border:1px solid var(--border);
  background:linear-gradient(180deg,#f6fff7,#eafff0);
  color:#1b7b3a;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  cursor:default;
}

.ss-link{
  font-size:12px;
  text-decoration:underline;
  color:inherit;
}

/* Hover suave */
.ss-card:hover{
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  transform:translateY(-1px);
}

/* ================== MODO OSCURO ================== */
@media (prefers-color-scheme: dark){

  /* La tarjeta se hace un poco más “glass” y profunda */
  .ss-card{
    background:rgba(15,23,42,0.98);      /* casi negro-azulado */
    border-color:rgba(148,163,184,.45);
    box-shadow:0 18px 40px rgba(0,0,0,.75);
  }

  /* Las pasteles se oscurecen y se mezclan con el fondo,
     manteniendo el tinte pero sin “fosforito” */
  .ss-kpi{
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg) 24%, #020617 76%),
        color-mix(in srgb, var(--bg) 32%, #020617 68%)
      );
    border-color:color-mix(in srgb, var(--bg) 38%, #020617 62%);
  }

  .ss-kpi-l,
  .ss-kpi-u{
    color:#9ca3af;  /* gris suave legible */
  }

  .ss-kpi-v{
    color:#e5e7eb;  /* texto principal claro */
  }

  .ss-upd{
    color:#9ca3af;
  }

  .ss-ok{
    background:linear-gradient(180deg,#052e16,#166534);
    color:#bbf7d0;
    border-color:rgba(22,163,74,.8);
  }
}