/* JDServer-Webs v6.1 — modules/climate_anomalies/climate-anomalies.css */
/* Tarjeta KPIs de anomalías + barras comparativas, look Aurora-Live */

#climate-anomalies.module { margin-top: 18px; }

.ca-card{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow-2);
  padding:12px;
}

.ca-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.ca-head h3{ margin:0; font-size:1.05rem; }

.ca-meta{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  color:var(--muted); font-size:.9rem;
}

.ca-kpis{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  margin-top: 10px;
}

.ca-kpi{
  border:1px solid var(--border);
  border-radius:14px;
  background: var(--card);
  padding:10px 12px;
}
.ca-kpi .label{ color:var(--muted); font-size:.86rem; margin-bottom:4px; }
.ca-kpi .value{ font-size:1.25rem; font-weight:700; }

.ca-kpi .sub{
  margin-top:4px; font-size:.9rem; color:var(--muted);
}

/* Barras comparativas */
.ca-bars{
  margin-top:12px;
  display:grid; gap:10px;
}

.ca-bar{
  display:grid;
  grid-template-columns: 140px 1fr 70px;
  gap:10px;
  align-items:center;
}
.ca-bar .name{ color:var(--fg); font-weight:600; }
.ca-bar .track{
  position:relative; height:12px; border-radius:999px;
  background: rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .ca-bar .track{ background: rgba(255,255,255,.08); }
}

.ca-bar .normal{
  position:absolute; top:50%; transform:translateY(-50%);
  height:14px; width:2px; background: var(--border);
  border-radius:2px;
}

.ca-bar .fill{
  position:absolute; top:0; left:0; height:100%;
  border-radius:999px;
  background: linear-gradient(180deg, var(--brand-accent), var(--brand));
  opacity:.95;
}

.ca-bar .num{
  text-align:right; font-variant-numeric: tabular-nums;
  color:var(--muted);
}

/* Colores alternativos por variable */
:root{
  --ca-warn: #f59e0b; /* cálido */
  --ca-cold: #3b82f6; /* frío */
  --ca-wet : #60a5fa; /* precip > normal */
  --ca-dry : #ef4444; /* precip < normal */
}

/* Responsive */
@media (max-width: 960px){
  .ca-kpis{ grid-template-columns: repeat(2, 1fr); }
  .ca-bar{ grid-template-columns: 120px 1fr 64px; }
}
@media (max-width: 540px){
  .ca-kpis{ grid-template-columns: 1fr; }
  .ca-bar{ grid-template-columns: 110px 1fr 56px; }
}