/* JDServer-Webs v6.3 — 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;
}

/* Head: título + meta + controles */
.ca-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px; flex-wrap:wrap;
}
.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;
}

/* ── Controles de mes ─────────────────────────────────────────────── */
.ca-controls{
  display:flex; align-items:center; gap:6px;
  margin-left:auto;
}
.ca-controls .btn{
  appearance:none; border:1px solid var(--border);
  background:var(--card); color:var(--fg);
  border-radius:10px; padding:.35rem .55rem; cursor:pointer;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.ca-controls .btn:hover{ background:var(--brand-50,color-mix(in oklab,var(--brand,#10b981) 12%,transparent)); border-color:var(--brand-200,color-mix(in oklab,var(--brand,#10b981) 30%,transparent)); }
.ca-controls .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab,var(--brand,#10b981) 30%,transparent); }

.ca-controls select{
  border:1px solid var(--border); background:var(--card); color:var(--fg);
  border-radius:10px; padding:.35rem .55rem; font-size:.92rem;
}

/* KPIs */
.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; }
  .ca-controls{ width:100%; justify-content:flex-end; }
}