/* === estadisticas.css === */

/* ── ESTADÍSTICAS ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.kpi-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 18px 18px;
  position: relative; overflow: hidden; min-width: 0;
}
.kpi-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--kpi-color, var(--amber));
}
.kpi-label { font-size: .75rem; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
/* El tamaño se adapta al ancho de la tarjeta: con importes de siete cifras un
   2rem fijo desbordaba y recortaba el último dígito. tabular-nums alinea las
   columnas de dígitos entre tarjetas. */
.kpi-value {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 1.55vw, 1.85rem);
  font-weight: 800; line-height: 1.05;
  color: var(--kpi-color, var(--amber));
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-sub   { font-size: .78rem; color: var(--text3); margin-top: 4px; }
.kpi-delta { font-size: .8rem; font-weight: 700; margin-top: 4px; }
.delta-up   { color: var(--green); }
.delta-down { color: var(--red); }
.delta-flat { color: var(--text3); }

.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px; margin-bottom: 18px;
}
.charts-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px; margin-bottom: 18px;
}
.chart-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 20px;
}
.chart-title {
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text2);
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.chart-title select {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text); border-radius: var(--r);
  padding: 3px 8px; font-size: .8rem; margin-left: auto;
}
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { max-width: 100%; }
@media (max-width: 900px) {
  .charts-grid, .charts-grid-2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PALETA DE VISUALIZACIÓN
   ──────────────────────────────────────────────────────────────────────────
   Los ocho tonos categóricos, en orden fijo, validados para ambos fondos:
   banda de luminosidad, piso de croma, separación para daltonismo (deutan /
   protan / tritan) y contraste contra la superficie del gráfico.

   Se asignan por ROL, no por posición en los datos: un filtro que cambie
   cuántas series hay no debe repintar las que quedan.

   El modo oscuro son los mismos ocho tonos re-escalonados para ese fondo, no
   una paleta distinta ni una inversión automática.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --viz-1: #2a78d6;  /* azul     — facturación, magnitud de un solo tono */
  --viz-2: #eb6834;  /* naranja  — tickets, agotados */
  --viz-3: #1baf7a;  /* aqua     — ganancia */
  --viz-4: #eda100;  /* amarillo — margen */
  --viz-5: #e87ba4;  /* magenta  — unidades */
  --viz-6: #008300;  /* verde                        */
  --viz-7: #4a3aa7;  /* violeta  — ticket promedio   */
  --viz-8: #e34948;  /* rojo     — alertas de control */
  --viz-grid: rgba(0,0,0,.07);
  --viz-ink:  #6b7280;
}
:root[data-theme="dark"] {
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #c98500;
  --viz-5: #d55181;
  --viz-6: #008300;
  --viz-7: #9085e9;
  --viz-8: #e66767;
  --viz-grid: rgba(255,255,255,.07);
  --viz-ink:  #9ca3af;
}

/* ── Bandas y notas de la pantalla de estadísticas ── */
.stats-band {
  font-family: var(--font-head); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text2);
  margin: 22px 0 12px; display: flex; align-items: baseline; gap: 10px;
}
.stats-band::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--amber); display: inline-block;
}
.stats-band-note {
  font-family: var(--font-body); font-size: .75rem; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--text3);
}
.stats-note {
  font-size: .82rem; color: var(--text2); margin-bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.stats-note b { color: var(--text); }
.stats-warn {
  font-size: .8rem; color: var(--text2); line-height: 1.5;
  background: rgba(245,166,35,.08); border: 1px solid rgba(245,166,35,.35);
  border-radius: 10px; padding: 9px 13px; margin-bottom: 14px;
}
.stats-hint {
  font-size: .78rem; color: var(--text3); line-height: 1.45;
  margin: -8px 0 14px;
}

/* ── Tablas compactas dentro de las tarjetas ── */
.stats-table table { font-size: .82rem; }
.stats-table th, .stats-table td { padding: 7px 10px; }
.stats-table th.num, .stats-table td.num { text-align: right; }
.stats-table td.name {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stats-table .empty {
  text-align: center; color: var(--text3); padding: 16px;
}
/* El valor negativo se marca con texto además del color: el color solo no
   alcanza para quien no lo distingue. */
.stats-neg { color: var(--viz-8); font-weight: 700; }

/* El texto de comparación puede ser largo; que baje de línea antes de empujar
   el ancho de la tarjeta. */
.kpi-delta { display: block; line-height: 1.35; }
.kpi-label { white-space: normal; }