/* JDServer-Webs v6.1 — climate_precip */
#climate-precip .cp-head{
  display:flex;align-items:center;justify-content:space-between;
}
#climate-precip .cp-kpis{
  margin-top:12px; display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 820px){ #climate-precip .cp-kpis{ grid-template-columns: 1fr; } }

#climate-precip .kpi{
  border:1px solid var(--border); background:var(--card);
  border-radius:16px; padding:12px; box-shadow:var(--shadow-2);
}
#climate-precip .kpi .lbl{ font-size:.92rem; color:var(--muted); margin-bottom:4px; }
#climate-precip .kpi .val{ font-size:1.4rem; font-weight:700; }

#climate-precip .cp-bars{
  margin-top:14px;
  border:1px solid var(--border); background:var(--card);
  border-radius:16px; padding:14px; box-shadow:var(--shadow-2);
  display:grid; grid-template-columns: repeat(12, 1fr); gap:8px; align-items:end;
  min-height:160px;
}
#climate-precip .bar{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
#climate-precip .bar .col{
  width:100%; border-radius:8px;
  background: color-mix(in oklab, var(--brand), #888 25%);
  height: 8px; /* será sobreescrito en línea */
  transition: height .35s ease;
}
#climate-precip .bar small{ font-variant-numeric: tabular-nums; opacity:.85; }
#climate-precip .bar .mlbl{ font-size:.8rem; opacity:.7; }

#climate-precip .cp-seasons{
  margin-top:14px; display:grid; gap:12px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 820px){ #climate-precip .cp-seasons{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ #climate-precip .cp-seasons{ grid-template-columns: 1fr; } }

#climate-precip .cp-seasons .card{
  border:1px solid var(--border); background:var(--card);
  border-radius:16px; padding:12px; box-shadow:var(--shadow-2);
}
#climate-precip .cp-seasons h4{ margin:0 0 6px 0; font-size:1rem; }
#climate-precip .cp-seasons .sval{ font-weight:700; font-variant-numeric: tabular-nums; }

#climate-precip .cp-empty{
  margin-top:12px; border:1px dashed var(--border);
  background: color-mix(in oklab, var(--card), var(--brand-50) 8%);
  border-radius:14px; padding:12px 14px;
}
/* Marcar mes más lluvioso / más seco */
#climate-precip .bar.wettest .col { outline: 2px solid color-mix(in oklab, var(--brand), #000 20%); }
#climate-precip .bar.driest .col  { opacity: 0.6; }