/* ═══════════════════════════════════════════════════════════════════════
   TemaServextex.css
   Paleta compartida con soporte de tema claro y oscuro.

   Convencion CGVentas (misma de BitacoraBackup.html / ConfigBackup.html):
   los colores se declaran UNA vez en :root y su equivalente en .dark-version.
   Ninguna pantalla nueva escribe un color directo, ni en el HTML ni en el JS:
   usa estas variables o las clases st-* de abajo. Los graficos leen las
   mismas variables desde static/js/TemaGraficos.js.

   Todo lleva prefijo st- para no chocar con Argon ni con Bootstrap.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --st-bg:         #f1f1ef;
    --st-surface:    #ffffff;
    --st-surface-2:  #f5f5f3;
    --st-hover:      #eeeeeb;
    --st-line:       #e6e6e3;
    --st-line-2:     #858a86;
    --st-fg:         #191c1a;
    --st-muted:      #565c58;
    --st-faint:      #666c68;
    --st-primary:    #0e6b4e;
    --st-primary-hover:#0b5a41;
    --st-primary-ink:#ffffff;
    --st-ok:         #0e6b4e;
    --st-warn:       #8f5a10;
    --st-bad:        #ad2a20;
    --st-info:       #2a6690;
    --st-nav-activo: #e3e3e0;
    --st-nav-hover:  #e9e9e6;
    --st-velo:       rgb(25 28 26 / .36);
    --st-sombra:     0 1px 2px rgb(25 28 26 / .04), 0 8px 32px rgb(25 28 26 / .035);
    /* Series de graficos: orden fijo (azul, naranja, aqua), validado para daltonismo */
    --st-s1:         #2a78d6;
    --st-s2:         #eb6834;
    --st-s3:         #1baf7a;
    --st-grid:       #e6e6e3;
    --st-r-lienzo:   20px;
    --st-r-mosaico:  12px;
    --st-r-control:  10px;
    --st-r-corto:    6px;
    --st-fuente:     "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --st-mono:       var(--st-fuente);
}
.dark-version {
    --st-bg:         #121413;
    --st-surface:    #1a1d1b;
    --st-surface-2:  #232624;
    --st-hover:      #2b2f2c;
    --st-line:       #2d312e;
    --st-line-2:     #777d79;
    --st-fg:         #eceeeb;
    --st-muted:      #a7ada9;
    --st-faint:      #a1a7a3;
    --st-primary:    #54c9a0;
    --st-primary-hover:#6bd4af;
    --st-primary-ink:#06170f;
    --st-ok:         #54c9a0;
    --st-warn:       #e0ac62;
    --st-bad:        #f28b80;
    --st-info:       #7bb8e0;
    --st-nav-activo: #2a2e2b;
    --st-nav-hover:  #212422;
    --st-velo:       rgb(0 0 0 / .6);
    --st-sombra:     0 1px 2px rgb(0 0 0 / .3), 0 8px 32px rgb(0 0 0 / .16);
    --st-s1:         #3987e5;
    --st-s2:         #d95926;
    --st-s3:         #199e70;
    --st-grid:       #2d312e;
}

/* ── Utilidades ─────────────────────────────────────────────────────── */
.st-mono   { font-family: var(--st-mono); font-variant-numeric: tabular-nums; }
.st-num    { font-variant-numeric: tabular-nums; }
.st-muted  { color: var(--st-muted) !important; }
.st-fg     { color: var(--st-fg) !important; }
.st-ok-tx  { color: var(--st-ok) !important; }
.st-warn-tx{ color: var(--st-warn) !important; }
.st-bad-tx { color: var(--st-bad) !important; }
.st-lbl    { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); }
.st-oculto { display: none !important; }

/* ── Tarjetas ───────────────────────────────────────────────────────── */
.st-card   { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 12px; min-width: 0; color: var(--st-fg); }
.st-card-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--st-line); }
.st-card-h h3, .st-card-h h6 { margin: 0; font-size: 15px; font-weight: 700; color: var(--st-fg); }
.st-card-b { padding: 14px 16px; }
.st-stack  { display: grid; gap: 14px; }
.st-grid2  { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.st-grid2-wide { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.st-grid3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 991px) {
    .st-grid2, .st-grid2-wide, .st-grid3 { grid-template-columns: minmax(0, 1fr); }
}
.st-tone-warn { box-shadow: inset 3px 0 0 var(--st-warn); }
.st-tone-bad  { box-shadow: inset 3px 0 0 var(--st-bad); }
.st-tone-info { box-shadow: inset 3px 0 0 var(--st-info); }

/* ── Sub-pestanas tipo pildora ──────────────────────────────────────── */
.st-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.st-subtabs button { border: 1px solid var(--st-line-2); background: var(--st-surface); color: var(--st-muted); border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; font-size: 13px; }
.st-subtabs button[aria-selected="true"] {
    background: color-mix(in srgb, var(--st-primary) 14%, var(--st-surface));
    border-color: color-mix(in srgb, var(--st-primary) 50%, var(--st-line-2));
    color: var(--st-fg);
}

/* ── Pildoras de estado (siempre con texto, nunca solo color) ───────── */
.st-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.st-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-pill.ok   { color: var(--st-ok);    background: color-mix(in srgb, var(--st-ok) 12%, transparent); }
.st-pill.warn { color: var(--st-warn);  background: color-mix(in srgb, var(--st-warn) 13%, transparent); }
.st-pill.bad  { color: var(--st-bad);   background: color-mix(in srgb, var(--st-bad) 12%, transparent); }
.st-pill.info { color: var(--st-info);  background: color-mix(in srgb, var(--st-info) 12%, transparent); }
.st-pill.neu  { color: var(--st-muted); background: color-mix(in srgb, var(--st-muted) 12%, transparent); }
.st-tag { font-family: var(--st-mono); font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 5px; background: var(--st-surface-2); border: 1px solid var(--st-line); color: var(--st-muted); white-space: nowrap; }

/* ── Chips de resumen (filtran el listado) ──────────────────────────── */
.st-sumrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.st-sum { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; cursor: pointer; text-align: left; color: var(--st-fg); }
.st-sum .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-sum .k { font-size: 12px; color: var(--st-muted); }
.st-sum[data-tone="warn"] { box-shadow: inset 3px 0 0 var(--st-warn); }
.st-sum[data-tone="bad"]  { box-shadow: inset 3px 0 0 var(--st-bad); }
.st-sum[data-tone="info"] { box-shadow: inset 3px 0 0 var(--st-info); }
.st-sum[aria-pressed="true"] { border-color: var(--st-primary); }

/* ── Tabla ligera ───────────────────────────────────────────────────── */
.st-tbl-wrap { overflow-x: auto; }
.st-tbl { border-collapse: collapse; width: 100%; font-size: 13px; color: var(--st-fg); }
.st-tbl th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--st-muted) !important; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--st-line); white-space: nowrap; background: var(--st-surface-2); }
.st-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--st-line); white-space: nowrap; vertical-align: middle; color: var(--st-fg); }
.st-tbl tbody tr.st-clic { cursor: pointer; }
.st-tbl tbody tr:hover td { background: color-mix(in srgb, var(--st-primary) 6%, transparent); }
.st-tbl .r { text-align: right; }
.st-delta { font-family: var(--st-mono); font-size: 12px; font-weight: 500; padding: 1px 6px; border-radius: 5px; }
.st-delta.on  { color: var(--st-warn); background: color-mix(in srgb, var(--st-warn) 13%, transparent); }
.st-delta.off { color: var(--st-faint); }

/* ── Ficha de documento ─────────────────────────────────────────────── */
.st-doc-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
@media (max-width: 991px) { .st-doc-head { grid-template-columns: 1fr; } }
.st-doc-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-doc-id .n { font-size: 24px; font-weight: 700; font-family: var(--st-mono); color: var(--st-fg); }
.st-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 18px; margin-top: 12px; }
.st-kv > div { display: grid; gap: 1px; min-width: 0; }
.st-kv .v { font-weight: 600; overflow-wrap: anywhere; color: var(--st-fg); }

/* ── Avisos ─────────────────────────────────────────────────────────── */
.st-alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 10px 12px; border: 1px solid; color: var(--st-fg); }
.st-alert.warn { border-color: color-mix(in srgb, var(--st-warn) 40%, transparent); background: color-mix(in srgb, var(--st-warn) 9%, var(--st-surface)); }
.st-alert.info { border-color: color-mix(in srgb, var(--st-info) 40%, transparent); background: color-mix(in srgb, var(--st-info) 8%, var(--st-surface)); }
.st-alert.bad  { border-color: color-mix(in srgb, var(--st-bad) 40%, transparent);  background: color-mix(in srgb, var(--st-bad) 8%, var(--st-surface)); }
.st-alert .ic { font-weight: 800; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: none; color: var(--st-surface); }
.st-alert.warn .ic { background: var(--st-warn); }
.st-alert.info .ic { background: var(--st-info); }
.st-alert.bad  .ic { background: var(--st-bad); }

/* ── Linea de tiempo ────────────────────────────────────────────────── */
.st-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.st-tl li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
.st-tl li:last-child { padding-bottom: 0; }
.st-tl li::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: -2px; width: 2px; background: var(--st-line); }
.st-tl li:last-child::before { display: none; }
.st-tl .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; margin-left: 3px; background: var(--st-surface); border: 2px solid var(--st-primary); }
.st-tl .dot.warn { border-color: var(--st-warn); background: var(--st-warn); }
.st-tl .dot.bad  { border-color: var(--st-bad); }
.st-tl .dot.ok   { border-color: var(--st-ok); }
.st-tl .dot.neu  { border-color: var(--st-faint); }
.st-tl .t { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; color: var(--st-fg); }
.st-tl .when { font-family: var(--st-mono); font-size: 12.5px; }
.st-tl .who { font-size: 12px; color: var(--st-muted); }

/* ── Historial (anterior -> nuevo) ──────────────────────────────────── */
.st-chg { display: grid; gap: 10px; }
.st-chg-item { border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; }
.st-chg-h { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 7px 10px; background: var(--st-surface-2); font-size: 12px; color: var(--st-fg); }
.st-chg-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-top: 1px solid var(--st-line); font-size: 13px; color: var(--st-fg); }
.st-chg-row .f { color: var(--st-muted); font-family: var(--st-mono); font-size: 12px; overflow-wrap: anywhere; }
.st-chg-row .old { text-decoration: line-through; color: var(--st-bad); opacity: .85; overflow-wrap: anywhere; }
.st-chg-row .new { color: var(--st-ok); font-weight: 600; overflow-wrap: anywhere; }

/* ── Relacionados ───────────────────────────────────────────────────── */
.st-rel { display: grid; gap: 8px; }
.st-rel a, .st-rel .st-rel-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--st-line); border-radius: 8px; text-decoration: none; color: var(--st-fg); cursor: pointer; }
.st-rel a:hover, .st-rel .st-rel-item:hover { border-color: var(--st-primary); }
.st-json { margin: 0; background: var(--st-surface-2); border: 1px solid var(--st-line); border-radius: 8px; padding: 12px; font-family: var(--st-mono); font-size: 12px; overflow: auto; max-height: 420px; color: var(--st-fg); white-space: pre; }
.st-json .k { color: var(--st-primary); }
.st-json .s { color: var(--st-ok); }
.st-json .n { color: var(--st-warn); }

/* ── Dashboard ──────────────────────────────────────────────────────── */
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.st-kpi { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; min-width: 0; color: var(--st-fg); }
.st-kpi .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.st-kpi .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--st-muted); }
.st-trend { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-trend.up   { color: var(--st-ok); }
.st-trend.down { color: var(--st-bad); }
.st-spark { width: 84px; height: 26px; flex: none; }
.st-chart-box { position: relative; height: 260px; }
.st-chart-box.sm { height: 220px; }
.st-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--st-muted); }
.st-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.st-legend .s1 { background: var(--st-s1); }
.st-legend .s2 { background: var(--st-s2); }
.st-legend .s3 { background: var(--st-s3); }
.st-legend .faint { background: var(--st-faint); }
.st-alerts { display: grid; gap: 8px; }
.st-al { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--st-line); border-radius: 8px; background: var(--st-surface); color: var(--st-fg); }
.st-al .c { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-al.st-clic { cursor: pointer; }
.st-al.st-clic:hover { border-color: var(--st-primary); }
.st-bars { display: grid; gap: 8px; }
.st-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; align-items: center; font-size: 13px; color: var(--st-fg); }
.st-bar-row .nm { display: grid; gap: 3px; min-width: 0; }
.st-bar-row .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bar-row .val { text-align: right; font-variant-numeric: tabular-nums; }
.st-track { height: 8px; border-radius: 4px; background: var(--st-surface-2); overflow: hidden; }
.st-track i { display: block; height: 100%; border-radius: 4px; background: var(--st-s1); }
.st-vacio { color: var(--st-muted); font-size: 13px; padding: 10px 0; text-align: center; }

/* ── Controles ──────────────────────────────────────────────────────── */
.st-ctrls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.st-ctrls .st-fld { display: grid; gap: 4px; min-width: 0; }
.st-ctrls .st-fld label { font-size: 11px; font-weight: 600; color: var(--st-muted); letter-spacing: .04em; text-transform: uppercase; margin: 0; }

/* Controles dentro de los filtros st-ctrls: las reglas oscuras de
   EstilosServextex.css solo alcanzan a .card .card-body, y un filtro fuera de
   una tarjeta (ej. Sucursal en Inicio) se quedaba blanco en tema oscuro.
   Solo se cambia color de fondo/texto/borde y la flecha del select. */
:root       { --st-select-flecha: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2367748e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.dark-version { --st-select-flecha: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ba6bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.st-ctrls .form-select,
.st-ctrls .form-control {
    background-color: var(--st-surface);
    color: var(--st-fg);
    border-color: var(--st-line-2);
}
.st-ctrls .form-select { background-image: var(--st-select-flecha); }
.st-ctrls .form-select:focus,
.st-ctrls .form-control:focus { border-color: var(--st-primary); }
.dark-version .st-ctrls .form-select,
.dark-version .st-ctrls .form-control { color-scheme: dark; }
.st-ctrls .form-select option { background-color: var(--st-surface); color: var(--st-fg); }