/* SAV Analytics — tokens de la paleta validada (dataviz).
   Claro y oscuro son AMBOS seleccionados, no un flip automático. */
:root {
  --surface-1:  #fcfcfb;   /* superficie de gráfico */
  --page:       #f9f9f7;
  --ink:        #0b0b0b;
  --ink-2:      #52514e;
  --muted:      #898781;
  --grid:       #e1e0d9;
  --axis:       #c3c2b7;
  --series-1:   #2a78d6;   /* slot categórico 1 (única serie) */
  --neg:        #d03b3b;   /* polo negativo del diverging */
  --good:       #006300;
  --border:     rgba(11,11,11,.10);
  --radius:     10px;
  /* Colores de ESTADO: reservados, nunca se usan para una serie de datos */
  --st-good:     #0ca30c;
  --st-warning:  #fab219;
  --st-serious:  #ec835a;
  --st-critical: #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #1a1a19;
    --page:      #0d0d0d;
    --ink:       #ffffff;
    --ink-2:     #c3c2b7;
    --muted:     #898781;
    --grid:      #2c2c2a;
    --axis:      #383835;
    --series-1:  #3987e5;
    --neg:       #e66767;
    --good:      #0ca30c;
    --border:    rgba(255,255,255,.10);
    --st-good:     #0ca30c;
    --st-warning:  #fab219;
    --st-serious:  #ec835a;
    --st-critical: #d03b3b;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 14px 24px; background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; letter-spacing: -.01em; }
.brand span { color: var(--series-1); }
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs a {
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-size: 14px;
}
.tabs a:hover { background: var(--page); }
.tabs a.on { background: var(--series-1); color: #fff; }
.who { font-size: 13px; color: var(--muted); }

/* ---------- filtros: UNA sola fila arriba, aplica a todos los gráficos ---------- */
.filtros {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: end;
  padding: 16px 24px 8px;
}
.filtros label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.filtros select, .filtros input {
  font: inherit; font-size: 14px; padding: 7px 9px; color: var(--ink);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
}
.filtros button {
  font: inherit; font-size: 14px; padding: 8px 18px; cursor: pointer;
  background: var(--series-1); color: #fff; border: 0; border-radius: 8px;
}
.nota-rango { margin: 0 24px 8px; font-size: 12px; color: var(--muted); }

main { padding: 8px 24px 48px; max-width: 1320px; }

/* ---------- ALERTAS: el corazón del resumen ejecutivo ----------
   Un color de estado nunca va solo: siempre lleva título + monto (texto). */
.alertas { display: grid; gap: 8px; margin: 12px 0 20px; }
.alerta {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: var(--radius); padding: 12px 16px;
}
.alerta:hover { border-color: var(--series-1); }
.alerta .punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.alerta .txt { flex: 1; min-width: 0; }
.alerta .t { margin: 0; font-size: 14px; font-weight: 600; }
.alerta .d { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.alerta .i { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); }
.alerta .monto { text-align: right; flex: none; }
.alerta .monto .v { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.alerta .monto .u { display: block; font-size: 11px; color: var(--muted); }

.sev-critical { border-left-color: var(--st-critical); }
.sev-critical .punto { background: var(--st-critical); }
.sev-serious  { border-left-color: var(--st-serious); }
.sev-serious  .punto { background: var(--st-serious); }
.sev-warning  { border-left-color: var(--st-warning); }
.sev-warning  .punto { background: var(--st-warning); }
.sev-good     { border-left-color: var(--st-good); }
.sev-good     .punto { background: var(--st-good); }

/* ---------- rejilla densa (panel ejecutivo) ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.grid > .card { margin: 0; }
.grid > .span2 { grid-column: 1 / -1; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

.card-h { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 6px; }
.big { text-align: right; white-space: nowrap; }
.hero-sm { font-size: 34px; font-weight: 600; letter-spacing: -.02em; display: block; }
.big .delta { font-size: 12.5px; }

.kpi-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.mini .label { margin: 0; font-size: 11.5px; color: var(--muted); }
.mini .value { margin: 2px 0 1px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.mini .delta { margin: 0; font-size: 11.5px; }

/* leyenda: obligatoria con 2 series; el texto va en tinta, el color en la marca */
.legend { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.legend .key-cur  { background: var(--series-1); }
.legend .key-prev { background: var(--axis); }
footer { padding: 24px; color: var(--muted); font-size: 12px; }

/* ---------- hero + tiles ---------- */
.hero-wrap { padding: 20px 0 8px; }
.hero-label { margin: 0; font-size: 13px; color: var(--muted); }
.hero {                      /* figuras proporcionales, nunca tabular-nums */
  margin: 2px 0; font-size: 52px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05;
}
.hero-delta { margin: 0; font-size: 13px; }
.hero-delta.up, .delta.up { color: var(--good); }
.hero-delta.down, .delta.down { color: var(--neg); }
.hero-delta.muted, .delta.muted, .muted { color: var(--muted); }
.spark { width: 120px; height: 28px; margin-top: 6px; display: block; }
.spark-line { fill: none; stroke: var(--axis); stroke-width: 2; stroke-linecap: round; }
.spark-dot  { fill: var(--series-1); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0; }
.tile {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.tile .label { margin: 0; font-size: 12px; color: var(--muted); }
.tile .value { margin: 4px 0 2px; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.tile .delta { margin: 0; font-size: 12px; }

/* ---------- cards y gráficos ---------- */
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin: 16px 0;
}
.card h2 { margin: 0; font-size: 16px; font-weight: 600; }
.card .sub { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
/* `stroke` se HEREDA en SVG: si un ancestro lo define (p.ej. una clase de
   layout que se llame igual que una de gráfico), todas las marcas lo heredan.
   Este reset corta la herencia en la raíz del gráfico. */
.chart { width: 100%; height: auto; display: block; overflow: visible; stroke: none; }
.empty { color: var(--muted); font-size: 14px; padding: 24px 0; }

/* marcas: el dato es lo único que puede ser fuerte */
.gridline { stroke: var(--grid); stroke-width: 1; }         /* hairline SÓLIDO */
.axis  { stroke: var(--axis); stroke-width: 1; }
.line  { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dot   { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }  /* anillo de superficie */
.line-prev { fill: none; stroke: var(--axis); stroke-width: 2; stroke-linejoin: round; }
.bar   { fill: var(--series-1); }
.bar.neg { fill: var(--neg); }
.bar.dim { fill: var(--axis); }   /* de-emphasis: el día flojo, contexto no protagonista */
.hit   { fill: transparent; }
.hit:hover + * { opacity: 1; }

/* el texto NUNCA lleva el color de la serie */
.tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cat  { fill: var(--ink-2); font-size: 13px; }
.val  { fill: var(--ink); font-size: 12px; font-weight: 600; }

/* ---------- tablas (la vista gemela de cada gráfico) ---------- */
.tabla { margin-top: 12px; }
.tabla summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
thead th { color: var(--muted); font-weight: 500; font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot th { font-weight: 600; }
.pos { color: var(--good); }
.negv { color: var(--neg); }

.aviso {
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 3px solid var(--series-1);
  border-radius: var(--radius); padding: 12px 16px; margin: 16px 0;
  font-size: 13px; color: var(--ink-2);
}
code { background: var(--page); padding: 1px 5px; border-radius: 4px; }

/* ---------- login ---------- */
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; padding: 32px; width: min(360px, 92vw);
}
.login-card .brand { font-size: 20px; }
.login-card .sub { color: var(--muted); font-size: 13px; margin: 4px 0 20px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.login-card input {
  font: inherit; padding: 9px 10px; border-radius: 8px; color: var(--ink);
  background: var(--page); border: 1px solid var(--border);
}
.login-card button {
  font: inherit; padding: 10px; margin-top: 4px; cursor: pointer;
  background: var(--series-1); color: #fff; border: 0; border-radius: 8px;
}
.error { color: var(--neg); font-size: 13px; margin: 0 0 12px; }

@media (max-width: 720px) {
  .tabs { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
  .hero { font-size: 40px; }
  .card { overflow-x: auto; }
}