/* JDServer-Webs v6.5 — modules/climate_anomalies/climate-anomalies.css
 * Tarjeta KPIs de anomalías + barras comparativas, look Aurora-Live
 *
 * Objetivo (auto/claro/oscuro en iOS/Android/macOS/Windows + navegadores):
 * - Nunca usar colores “fijos” (rgba negro/blanco) para fondos/textos.
 * - Texto siempre con var(--text) / var(--muted) (sin --fg ambiguo).
 * - <select> legible en Safari/iOS (auto).
 * - Tracks/barras con contraste estable en claro/oscuro.
 */

#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;

  /* base text (evita sorpresas con tokens raros en auto) */
  color: var(--text, inherit);
}

/* 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;
  color: var(--text, inherit);
}

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

/* ── 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(--text, inherit);
  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);
}

/* Select: Safari/iOS (auto) + contraste estable */
.ca-controls select{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:10px;
  padding:.35rem .55rem;
  font-size:.92rem;

  color: var(--text, inherit);
  -webkit-text-fill-color: var(--text, currentColor);

  /* ayuda a que el control respete el tema en auto */
  color-scheme: light dark;

  -webkit-appearance: auto;
  appearance: auto;
}

.ca-controls select option{
  background: var(--card);
  color: var(--text, inherit);
}

/* 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(--bg-elevated, 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; color: var(--text, inherit); }
.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(--text, inherit); font-weight:600; }

/* Track: sin rgba fijo -> mezcla con tokens del tema */
.ca-bar .track{
  position:relative;
  height:12px;
  border-radius:999px;

  /* Fondo suave y consistente en claro/oscuro */
  background: color-mix(in oklab, var(--card) 55%, var(--border) 45%);
}

.ca-bar .normal{
  position:absolute; top:50%; transform:translateY(-50%);
  height:14px; width:2px;
  background: color-mix(in oklab, var(--border) 85%, transparent);
  border-radius:2px;
}

.ca-bar .fill{
  position:absolute; top:0; left:0; height:100%;
  border-radius:999px;

  /* fallback por si --brand-accent no existe */
  background: linear-gradient(180deg, var(--brand-accent, var(--brand)), var(--brand));
  opacity:.95;
}

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

/* 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; }
}