/* JDServer — stations-summary.css (v1.4 UI restore) */

:root{
  /* Colores base por tipo de KPI (suave, legible en claro/oscuro) */
  --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;
}

.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;
}
.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{
  --bg: var(--tint, #f2f5f8);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #fff 12%), var(--bg));
  border:1px solid color-mix(in srgb, var(--bg) 70%, #000 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;
}

/* Sombra suavecita al pasar */
.ss-card:hover{ box-shadow:0 10px 26px rgba(0,0,0,.08); }