/* ============================================================================
 * theme.css — Tokens de color del panel KERP (auditoría 2026-07-02: 606 hexes).
 * Regla: el ACENTO es skinnable (lo pisa skinApplySpec); los SEMÁNTICOS son fijos
 * — verde=éxito/dinero, rojo=peligro, ámbar=aviso, azul=info — para que ningún
 * skin rompa el significado (un error SIEMPRE se ve rojo).
 * Migración por fases: F1 shell+transferencias · F2 costeos/inventario/bot/kds.
 * ========================================================================== */
:root{
  /* Acento (lo define el skin elegido en Configuración) */
  --accent:#1f9d57; --accent-d:#178045; --accent-btn:#1a8248;
  --accent-grad:linear-gradient(180deg,#22ad61,#178045);
  --on-acc:#fff;
  --acc-soft:#eaf6ef;      /* fondos suaves del acento (pestaña activa, pills) */
  --acc-line:#bfe3cf;      /* bordes suaves del acento */

  /* Éxito / dinero (fijo) */
  --ok:#16a34a; --ok-d:#0f6e56; --ok-ink:#1d6b4a; --ok-soft:#ecfdf3;
  /* Peligro / error (fijo) */
  --danger:#dc2626; --danger-d:#b91c1c; --danger-ink:#a32d2d; --danger-soft:#fef2f2;
  /* Aviso (fijo) */
  --warn:#f59e0b; --warn-d:#b45309; --warn-ink:#92400e; --warn-soft:#fff7ed;
  /* Informativo (fijo) */
  --info:#2563eb; --info-soft:#eff6ff;
  /* Destacado (fijo) */
  --viol:#7c3aed; --viol-soft:#f5f3ff;

  /* Tinta y superficies */
  --ink:#23262b; --ink-strong:#1a1a2e;
  --mut:#6b7280; --mut-2:#9aa0a6;
  --line:#ececed; --bg:#f7f8f9; --card:#fff; --soft:#f5f5f5;

  /* --- Tokens añadidos para el modo noche (valor = hex hardcodeado actual, así
   *     tokenizar los usos inline NO cambia un pixel en modo día). Se voltean en el
   *     bloque html[data-theme="dark"] de abajo. --- */
  --line-2:#f1f2f4;                 /* divisor aún más sutil que --line */
  --panel:#eef0f2;                  /* franja de control segmentado / tabsrow / hubchips */
  --wash:#fafbfc;                   /* relleno casi-blanco: th de tabla, footers, zebra */
  --hover:#f5f6f7;                  /* hover de items de nav / botones secundarios */
  --ok-border:#b9e6d0;             /* borde de cajas éxito (compañero de --ok-soft) */
  --danger-border:#f0c9c4;         /* borde de cajas peligro */
  --warn-border:#f0d49a;           /* borde de cajas aviso */
  --info-border:#d8e6fb;           /* borde de cajas info */
  --danger-deep:#7a1414;           /* rojo profundo de estado (baneado/IP bloqueada) */
  --info-ink:#185fa5;              /* texto azul oscuro (sobre --info-soft) */
  --viol-ink:#3c3489;             /* texto violeta oscuro (sobre --viol-soft) */
  --ink-mid:#4b4f57;               /* tinta intermedia (timestamps, sub-labels) */
  /* Acentos de gráfica/canal (no semánticos: se conservan legibles en ambos temas) */
  --c-blue:#378add;                /* repartidores / domicilio / insumos */
  --c-purple:#7f77dd;              /* app / mano de obra */
  --c-orange:#ef9f27;              /* costos / llevar */
  --c-teal:#0f9b8e;                /* pago mixto */
  /* Sombras tokenizadas (se aclaran/profundizan según tema) */
  --shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-2:0 6px 24px rgba(16,24,40,.12);
  --shadow-pop:0 12px 40px rgba(16,24,40,.18);
  /* Velo de modales */
  --veil:rgba(0,0,0,.45);
  /* Cuanto se aclara un color de marca crudo para leerse sobre la superficie
   * del tema (pildoras de entidad). 0% = tal cual; lo sube el bloque de noche. */
  --ent-lift:0%;
  color-scheme:light;
}

/* ============================================================================
 * MODO NOCHE — se activa con html[data-theme="dark"] (lo pone el toggle o el
 * script anti-parpadeo). Solo redefine TOKENS: todo lo que consume var(--x)
 * se voltea solo. Los usos hardcodeados se migraron a estos tokens.
 * Los SEMÁNTICOS suben luminosidad para conservar contraste sobre fondo oscuro.
 * ========================================================================== */
html[data-theme="dark"]{
  color-scheme:dark;

  /* Tinta y superficies */
  --ink:#e7e9ec; --ink-strong:#edf0f3;
  --mut:#9aa2ae; --mut-2:#828a96; --ink-mid:#b7bcc4;
  --line:#646c7a; --line-2:#272b31; --bg:#121419; --card:#1e2127; --soft:#262a31;
  --panel:#15181d; --wash:#23262c; --hover:#272c34;

  /* Éxito / dinero */
  --ok:#3ddc84; --ok-d:#2bb56b; --ok-ink:#63d79e; --ok-soft:#122a1e; --ok-border:#245038;
  /* Peligro / error */
  --danger:#f26157; --danger-d:#e5493d; --danger-ink:#f4938b; --danger-soft:#2c1614; --danger-border:#5c2723; --danger-deep:#f47169;
  /* Aviso */
  --warn:#f7b83d; --warn-d:#e59a1f; --warn-ink:#f0c886; --warn-soft:#2a2010; --warn-border:#664c17;
  /* Informativo */
  --info:#5b93ff; --info-soft:#15203a; --info-border:#26395c; --info-ink:#7fb0ff;
  /* Destacado */
  --viol:#a98bf0; --viol-soft:#20193a; --viol-ink:#c3b0f5;

  /* Acento suave/línea: fallback (skinApplySpec los recalcula con tinte oscuro) */
  --acc-soft:rgba(255,255,255,.07); --acc-line:rgba(255,255,255,.16);

  /* Sombras: negro más profundo para dar volumen sobre fondo oscuro */
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 8px 28px rgba(0,0,0,.55);
  --shadow-pop:0 16px 48px rgba(0,0,0,.65);
  --veil:rgba(0,0,0,.62);
  --ent-lift:55%;
}

/* Los acentos de gráfica/canal (--c-*) NO se voltean: se mantienen legibles y
 * reconocibles en ambos temas (identidad de canal). */

/* Control segmentado estándar (sub-pestañas de todo el panel, calcado de Inventario):
 * franja gris contenedora; la activa es tarjeta blanca elevada con texto oscuro. */
.segtabs{display:inline-flex;gap:2px;background:var(--soft);border-radius:10px;padding:3px;flex-wrap:wrap}
.segtab{padding:8px 16px;border:none;background:transparent;border-radius:7px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--mut);transition:.15s;display:inline-flex;align-items:center;gap:7px}
.segtab:hover:not(.on){color:var(--ink)}
.segtab.on{background:var(--card);color:var(--ink-strong);font-weight:700;box-shadow:var(--shadow-1)}
html[data-theme="dark"] .segtabs{background:#15181d}
html[data-theme="dark"] .segtab.on{background:#2a2f37}

/* ============================================================================
 * TOGGLE flotante modo noche/día (arriba a la derecha, siempre visible) +
 * retoques finos que la tokenización automática no alcanza (rgba/translúcidos).
 * ========================================================================== */
.themetgl{position:fixed;top:11px;right:33px;z-index:9999;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;padding:0;transition:transform .12s,background .15s,border-color .15s}
.themetgl:hover{transform:scale(1.07)}
.themetgl:active{transform:scale(.95)}
.themetgl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media print{.themetgl{display:none!important}}

/* ============================================================================
 * IMPRESION EN MODO NOCHE. El navegador descarta los FONDOS al imprimir pero
 * RESPETA el color de texto del autor: con html[data-theme="dark"] puesto, la
 * Orden de Compra (boton "Imprimir Orden", inventario.js) salia con tinta
 * #e7e9ec sobre papel blanco = 1.22:1, es decir en blanco. Aqui se devuelven
 * los valores de DIA solo durante la impresion; nada mas cambia en pantalla.
 * Los modulos con sistema de tokens propio (--dp-*, --m-*) se resetean aparte
 * porque sus bloques de noche viven acotados a su contenedor.
 * ========================================================================== */
@media print{
  html[data-theme="dark"]{
    color-scheme:light;
    --ink:#23262b; --ink-strong:#1a1a2e; --ink-mid:#4b4f57;
    --mut:#6b7280; --mut-2:#9aa0a6;
    --line:#ececed; --line-2:#f1f2f4;
    --bg:#fff; --card:#fff; --soft:#f5f5f5; --panel:#eef0f2; --wash:#fafbfc; --hover:#f5f6f7;
    --ok:#16a34a; --ok-d:#0f6e56; --ok-ink:#1d6b4a; --ok-soft:#ecfdf3; --ok-border:#b9e6d0;
    --danger:#dc2626; --danger-d:#b91c1c; --danger-ink:#a32d2d; --danger-soft:#fef2f2; --danger-border:#f0c9c4; --danger-deep:#7a1414;
    --warn:#f59e0b; --warn-d:#b45309; --warn-ink:#92400e; --warn-soft:#fff7ed; --warn-border:#f0d49a;
    --info:#2563eb; --info-soft:#eff6ff; --info-border:#d8e6fb; --info-ink:#185fa5;
    --viol:#7c3aed; --viol-soft:#f5f3ff; --viol-ink:#3c3489;
    --shadow-1:none; --shadow-2:none; --shadow-pop:none;
    --ent-lift:0%;
    /* Estos tres los reescribe skinApplySpec como estilo INLINE sobre <html>, asi
     * que solo un !important los alcanza. El valor de dia depende del skin elegido,
     * asi que en papel se neutralizan. */
    --acc-soft:#f5f5f5 !important; --acc-line:#ececed !important; --veil:rgba(0,0,0,.45) !important;
  }
  /* !important porque costeos.css e inventario.css se enlazan DESPUES de theme.css
   * y su bloque de noche tiene la MISMA especificidad (1,1,1): sin esto ganaria el
   * ultimo declarado y la orden seguiria imprimiendose con tinta clara. */
  html[data-theme="dark"] #page-costeos,
  html[data-theme="dark"] #page-inventario,
  html[data-theme="dark"] #page-nomina{
    --m-bg:#f6f7f9 !important; --m-bg-2:#f6f7f9 !important; --m-surface:#fff !important; --m-border:#eaecef !important; --m-border-strong:#e2e5e9 !important;
    --m-text:#0b1220 !important; --m-text-2:#475467 !important; --m-text-3:#667085 !important; --m-accent:#0b1220 !important;
    --m-blue:#2563eb !important; --m-blue-soft:#eff5ff !important; --m-green:#16a34a !important; --m-green-soft:#ecfdf3 !important;
    --m-red:#dc2626 !important; --m-red-soft:#fef2f2 !important; --m-orange:#ea580c !important; --m-orange-soft:#fff4ed !important;
    --m-purple:#7c3aed !important; --m-purple-soft:#f5f0ff !important; --m-gray-soft:#f2f4f7 !important;
    --m-shadow-card:none !important; --m-shadow-hover:none !important;
    --dp-bg:#f4f7f6 !important; --dp-surface:#fff !important; --dp-border:#e0e0e0 !important; --dp-border-soft:#eee !important;
    --dp-text:#1a1a2e !important; --dp-text-muted:#64748b !important; --dp-text-soft:#94a3b8 !important;
    --dp-primary:#1a1a2e !important; --dp-primary-hover:#2a2a4a !important;
    --dp-success:#27ae60 !important; --dp-danger:#e63946 !important; --dp-warning:#f39c12 !important; --dp-info:#3498db !important;
    --dp-shadow-card:none !important; --dp-shadow-hover:none !important;
    /* Nomina imprime el P&L con Ctrl+P (tiene su propio @media print en nomina.js).
     * --pnld-amber/-green/-red/-blue se usan como COLOR DE TEXTO y en el bloque de
     * noche son las variantes claras: sobre papel blanco caian a 1.4-3.2:1. */
    --pnld-amber:#b45309 !important; --pnld-amber-soft:#fff7ed !important; --pnld-amber-dot:#d97706 !important;
    --pnld-blue:#2563eb !important; --pnld-blue-soft:#eff6ff !important;
    --pnld-green:#16a34a !important; --pnld-green-soft:#ecfdf3 !important;
    --pnld-red:#dc2626 !important; --pnld-red-soft:#fef2f2 !important;
    --pnld-soft:#f2f4f7 !important; --pnld-bg-row:#fbfcfd !important; --pnld-shadow:none !important;
  }
}
/* dejar libre la esquina: el FAB de WhatsApp se corre a la izquierda del toggle */
.wafab{right:62px!important}

/* Translúcidos y piezas con color fijo que deben oscurecerse en modo noche */
html[data-theme="dark"] .topbar{background:rgba(22,25,30,.85)}
/* La franja fija superior envuelve al .topbar y admin.css la deja blanca (rgba(255,255,255,.96)).
 * Sin esto queda una barra blanca a lo ancho en TODAS las pantallas; y como
 * html[data-theme=dark] .topbar (0,2,1) le gana a .topstrip .topbar (0,2,0), el reset
 * background:none de admin.css se pierde y aparece una banda oscura flotando encima. */
html[data-theme="dark"] .topstrip{background:rgba(22,25,30,.85)}
html[data-theme="dark"] .topstrip .topbar{background:none}
html[data-theme="dark"] .subnav{background:var(--card)}
html[data-theme="dark"] .dsw{background:#3a3f47}
html[data-theme="dark"] .dsw::after{background:#e7e9ec}
html[data-theme="dark"] .pchnd{background:rgba(30,33,39,.92)}
html[data-theme="dark"] .pcard:hover{box-shadow:0 4px 14px rgba(0,0,0,.5)}
html[data-theme="dark"] .mswbtn.on{background:var(--acc-soft);color:var(--ink)}
/* El toast es una pastilla oscura fija (#15171c): en noche queda a 1.03:1 del
 * fondo de pagina y pierde silueta. Se le da superficie y borde propios. */
html[data-theme="dark"] #toast{background:var(--soft);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-2)}
/* Barras de scroll discretas en oscuro */
html[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a4048;border-radius:6px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent}

/* ============================================================================
 * MODO NOCHE para módulos con sistema de tokens propio que se inyecta por JS
 * (Nómina). Se voltean sus variables internas → todo lo que las consume oscurece.
 * ========================================================================== */
html[data-theme="dark"] #page-nomina{
  --dp-bg:#121419; --dp-surface:#1e2127; --dp-border:#313640; --dp-border-soft:#272b31;
  --dp-text:#e7e9ec; --dp-text-muted:#9aa2ae; --dp-text-soft:#8f97a3;
  --dp-primary:#8b93ff; --dp-primary-hover:#a3a9ff;
  --dp-success:#3ddc84; --dp-danger:#f26157; --dp-warning:#f7b83d; --dp-info:#5bb0e8;
  --dp-shadow-card:0 1px 2px rgba(0,0,0,.5); --dp-shadow-hover:0 8px 24px rgba(0,0,0,.55);
  --m-bg:#121419; --m-surface:#1e2127; --m-border:#313640; --m-border-strong:#3b414c;
  --m-text:#e7e9ec; --m-text-2:#9aa2ae; --m-text-3:#8f97a3; --m-accent:#e7e9ec;
  --m-blue:#5b93ff; --m-blue-soft:#15203a; --m-green:#3ddc84; --m-green-soft:#122a1e;
  --m-red:#f26157; --m-red-soft:#2c1614; --m-orange:#ff8a4c; --m-orange-soft:#2a1a10;
  --m-purple:#a98bf0; --m-purple-soft:#20193a; --m-gray-soft:#23262c;
  --m-shadow-card:0 1px 2px rgba(0,0,0,.5); --m-shadow-hover:0 6px 18px rgba(0,0,0,.55);
  --pnld-amber:#f0c886; --pnld-amber-soft:#2a2010; --pnld-amber-dot:#f7b83d;
  --pnld-blue:#5b93ff; --pnld-blue-soft:#15203a;
  --pnld-green:#3ddc84; --pnld-green-soft:#122a1e;
  --pnld-red:#f26157; --pnld-red-soft:#2c1614;
  --pnld-shadow:0 1px 3px rgba(0,0,0,.5);
  --pnld-bg-row:#23262c; --pnld-soft:#23262c;
}
html[data-theme="dark"] #page-nomina .dp-sidebar{background:#0d0f13}

/* ============================================================================
 * MODO NOCHE — color de marca en "Ventas por canal por marca".
 * El % y la barrita se pintaban con el color de identidad crudo: el negro de
 * Kung Pao contra --card (#1e2127) desaparecía. brandVars() (inicio.js) manda
 * las dos variantes en el mismo elemento y aquí se elige la de noche: mismo
 * tono, más luminoso; si el color es neutro (negro/gris) no hay tono que
 * rescatar y se usa la tinta del tema. El aro del chip del logo se refuerza
 * para que un logo de fondo oscuro no se funda con la tarjeta.
 * ========================================================================== */
html[data-theme="dark"] .cxmbrpct{color:var(--bmk-dk,var(--ink-strong))}
html[data-theme="dark"] .cxmminib i{background:var(--bmk-dk,var(--accent))}
html[data-theme="dark"] .cxmbrlg{box-shadow:0 1px 3px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.22)}