/* ─────────────────────────────────────────────────────────────
   tema.css — modo oscuro de toda la app
   <html data-theme="dark"> lo pone el <head> (partial app_head) antes de
   pintar y lo cambia /scripts/common/tema.js. Todo va dentro de
   @media screen: al imprimir se usan siempre los colores claros.
   html[data-theme="dark"] le gana a los :root de cada módulo por
   especificidad, así que el orden de las hojas no importa.
   ───────────────────────────────────────────────────────────── */

@media screen {
    html[data-theme="dark"] {
        color-scheme: dark;  /* inputs, selects, calendarios y scrollbars nativos */

        /* Paleta compartida (head.ejs, panel, Explorer, Empleados, login, calculadora…) */
        --bg:           #0F172A;
        --surface:      #1E293B;
        --border:       #334155;
        --border-mid:   #475569;
        --ink-1:        #F1F5F9;
        --ink-2:        #CBD5E1;
        --ink-3:        #94A3B8;
        --ink-4:        #64748B;

        --blue:         #3B82F6;
        --blue-bg:      rgba(59, 130, 246, .16);
        --blue-text:    #93C5FD;
        --blue-dim:     rgba(147, 197, 253, .35);
        --green:        #34D399;
        --green-bg:     rgba(52, 211, 153, .14);
        --green-text:   #6EE7B7;
        --amber:        #FBBF24;
        --amber-bg:     rgba(251, 191, 36, .14);
        --amber-text:   #FCD34D;
        --rose:         #FB7185;
        --rose-bg:      rgba(251, 113, 133, .14);
        --rose-text:    #FDA4AF;
        --violet:       #A78BFA;
        --violet-bg:    rgba(167, 139, 250, .16);
        --violet-text:  #C4B5FD;
        --slate:        #94A3B8;
        --slate-bg:     rgba(148, 163, 184, .14);
        --slate-text:   #E2E8F0;

        --shadow-card:  0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .25);
        --shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .4);

        /* Corte Analytics usa su propio prefijo */
        --pf-bg:         #0F172A;
        --pf-surface:    #1E293B;
        --pf-border:     #334155;
        --pf-border-mid: #475569;
        --pf-ink-1:      #F1F5F9;
        --pf-ink-2:      #CBD5E1;
        --pf-ink-3:      #94A3B8;
        --pf-ink-4:      #64748B;
        --pf-blue:       #3B82F6;
        --pf-blue-bg:    rgba(59, 130, 246, .16);
    }

    /* Bootstrap 5.3 (data-bs-theme="dark") con la misma paleta: tarjetas,
       tablas, formularios y modales sobre "surface", no sobre su gris */
    html[data-theme="dark"][data-bs-theme="dark"] {
        --bs-body-bg:               #1E293B;
        --bs-body-bg-rgb:           30, 41, 59;
        --bs-body-color:            #E2E8F0;
        --bs-body-color-rgb:        226, 232, 240;
        --bs-emphasis-color:        #F8FAFC;
        --bs-emphasis-color-rgb:    248, 250, 252;
        --bs-secondary-color:       rgba(226, 232, 240, .7);
        --bs-secondary-bg:          #334155;
        --bs-secondary-bg-rgb:      51, 65, 85;
        --bs-tertiary-bg:           #273449;
        --bs-tertiary-bg-rgb:       39, 52, 73;
        --bs-border-color:          #334155;
        --bs-border-color-translucent: rgba(148, 163, 184, .2);
        --bs-heading-color:         #F1F5F9;
        --bs-link-color:            #93C5FD;
        --bs-link-hover-color:      #BFDBFE;
    }

    html[data-theme="dark"] body {
        background-color: var(--bg);
        color: var(--ink-1);
    }

    /* Superficies "tinta sobre blanco" (chips y botones activos) quedarían
       blanco sobre casi-blanco: en oscuro se invierten a texto oscuro */
    html[data-theme="dark"] .pf-chip.active,
    html[data-theme="dark"] .dash-chip.active,
    html[data-theme="dark"] .shortcut-btn.active,
    html[data-theme="dark"] .filter-btn--apply {
        color: var(--bg);
    }

    /* Bootstrap deja .btn-outline-dark y .bg-dark casi negros también en
       oscuro: sobre las tarjetas no se verían */
    html[data-theme="dark"] .btn-outline-dark {
        --bs-btn-color:                 var(--ink-1);
        --bs-btn-border-color:          var(--border-mid);
        --bs-btn-hover-color:           var(--bg);
        --bs-btn-hover-bg:              var(--ink-1);
        --bs-btn-hover-border-color:    var(--ink-1);
        --bs-btn-active-color:          var(--bg);
        --bs-btn-active-bg:             var(--ink-1);
        --bs-btn-active-border-color:   var(--ink-1);
        --bs-btn-disabled-color:        var(--ink-4);
        --bs-btn-disabled-border-color: var(--border);
    }

    html[data-theme="dark"] .badge.bg-dark { background-color: var(--border-mid) !important; }
}