/* ================================================================
   iFacture — Modo oscuro (paleta Petroleo, decision del 2026-09-27)
   ================================================================
   Mismos tokens de ifacture-componentes.css con otros valores. Se activa
   con <html data-theme="dark">, que pone el script del head segun la
   preferencia del usuario (Claro / Oscuro / Segun el sistema).

   REGLAS
   - Aqui van valores de tokens y solo lo que Bootstrap, Color Admin o un
     plugin no toman de las variables.
   - Contraste medido contra --if-surface: todo texto >= 4.5 (WCAG AA).
   - El PDF y lo que va en papel sigue en blanco.
   ================================================================ */

html[data-theme="dark"] {
    color-scheme: dark;

    /* --- Marca: petroleo aclarado; sobre fondo oscuro el #0B5563 no se lee --- */
    --if-primary:        #5BBFCB;
    --if-primary-hover:  #7ACDD7;
    --if-primary-active: #9ADAE1;
    --if-primary-bg:     #123A40;
    --if-primary-bg-alt: #0F2E33;
    --if-primary-rgb:    91 191 203;
    --if-on-primary:     #05262B;
    --if-recuadro:       #F0625F;

    /* --- Semanticos --- */
    --if-success:    #56C98A; --if-success-bg: #10291C; --if-success-br: #245C3C;
    --if-warning:    #E8AE55; --if-warning-bg: #2C2111; --if-warning-br: #6A4B1B;
    --if-danger:     #F27B77; --if-danger-hover: #F59A97; --if-danger-bg: #321618; --if-danger-br: #7A2E30;
    --if-info:       #5BBFCB; --if-info-bg: #123A40; --if-info-br: #25606A;
    --if-neutral:    #AAB8B8; --if-neutral-bg: #1D2629; --if-neutral-br: #36454A;

    /* --- Neutros con tinte petroleo --- */
    --if-text:        #E4F0F0;
    --if-text-body:   #B4CACA;
    --if-text-muted:  #87A3A4;
    --if-text-subtle: #718E90;

    --if-bg:            #0A1719;
    --if-surface:       #0F2124;
    --if-surface-alt:   #13282B;
    --if-surface-hover: #193337;
    --if-surface-zebra: #112427;

    --if-border:       #1F3B3F;
    --if-border-soft:  #183236;
    --if-border-input: #2F5358;

    --if-chart-1: #3AB3C8;
    --if-chart-2: #E48A45;

    --if-sidebar-bg: var(--if-surface); --if-sidebar-text: var(--if-text-body); --if-sidebar-border: var(--if-border);
    --if-sidebar-active-bg: var(--if-primary-bg); --if-sidebar-active-text: var(--if-primary);

    --if-shadow:         0 1px 2px rgba(0, 0, 0, .4);
    --if-shadow-lg:      0 4px 14px rgba(0, 0, 0, .45);
    --if-shadow-overlay: 0 16px 40px rgba(0, 0, 0, .6);
    --if-focus-ring:     0 0 0 2px var(--if-bg), 0 0 0 4px var(--if-primary);

    /* --- Puente con Bootstrap 5.2 (no trae modo oscuro) --- */
    --bs-body-bg: var(--if-bg); --bs-body-bg-rgb: 10, 23, 25; --bs-body-color: var(--if-text-body);
    --bs-border-color: var(--if-border-input); --bs-border-color-translucent: rgba(255, 255, 255, .08);
    --bs-primary-rgb: 91, 191, 203; --bs-info-rgb: 91, 191, 203;
    --bs-success-rgb: 86, 201, 138; --bs-warning-rgb: 232, 174, 85; --bs-danger-rgb: 242, 123, 119;
    --bs-light: var(--if-surface-alt); --bs-light-rgb: 19, 40, 43; --bs-white-rgb: 15, 33, 36;

    /* --- Puente con Color Admin --- */
    --app-theme-rgb: 91, 191, 203;
    --app-content-bg: var(--if-bg);
    --app-component-bg: var(--if-surface); --app-component-color: var(--if-text);
    --app-component-dropdown-bg: var(--if-surface-alt); --app-component-modal-bg: var(--if-surface);
    --app-component-secondary-bg: var(--if-surface-alt);
    --app-component-table-border-color: var(--if-border); --app-component-table-separator-color: var(--if-border);
    --app-component-active-color: var(--if-on-primary); --app-component-active-bg-rgb: 91, 191, 203;
    --app-header-bg: var(--if-surface); --app-header-color: var(--if-text);
    --app-header-input-bg: var(--if-surface-alt); --app-header-input-border: var(--if-border);
    --app-sidebar-bg: var(--if-surface); --app-sidebar-component-color: var(--if-text-body);
    --app-sidebar-menu-header-color: var(--if-text-subtle); --app-sidebar-menu-divider-bg: var(--if-border);
    --app-sidebar-profile-bg: var(--if-surface-alt);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app,
html[data-theme="dark"] .app-content { background: var(--if-bg); }

/* Logo: cada plantilla trae las dos versiones y aqui se oculta la que no va
   (especificidad sobre .app-sidebar figure.s-logo img) */
:root:not([data-theme="dark"]) img.if-logo-oscuro,
:root[data-theme="dark"] img.if-logo-claro { display: none !important; }

/* Botones con hover escrito a mano en componentes */
html[data-theme="dark"] .btn-success { --bs-btn-hover-bg: #74D6A0; --bs-btn-hover-border-color: #74D6A0; --bs-btn-active-bg: #74D6A0; --bs-btn-active-border-color: #74D6A0; }
html[data-theme="dark"] .btn-warning { --bs-btn-hover-bg: #EFC27E; --bs-btn-hover-border-color: #EFC27E; --bs-btn-active-bg: #EFC27E; --bs-btn-active-border-color: #EFC27E; }
html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-white, html[data-theme="dark"] .btn-light {
    --bs-btn-bg: var(--if-surface); --bs-btn-color: var(--if-text); --bs-btn-border-color: var(--if-border-input);
    --bs-btn-hover-bg: var(--if-surface-hover); --bs-btn-hover-color: var(--if-text); --bs-btn-hover-border-color: var(--if-border-input);
    --bs-btn-active-bg: var(--if-surface-hover); --bs-btn-active-color: var(--if-text);
}

/* Formularios y superficies de Bootstrap / Color Admin */
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .select2-container--default .select2-selection {
    background-color: var(--if-surface); color: var(--if-text); border-color: var(--if-border-input);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--if-text-subtle); }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled { background-color: var(--if-surface-alt); }
html[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--if-surface); border-color: var(--if-border-input); }
html[data-theme="dark"] .select2-container--default .select2-selection__rendered { color: var(--if-text); }
html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .popover {
    background-color: var(--if-surface); color: var(--if-text-body); border-color: var(--if-border);
}
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--if-border); }
html[data-theme="dark"] .dropdown-item { color: var(--if-text-body); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--if-surface-hover); color: var(--if-text); }
html[data-theme="dark"] .table {
    --bs-table-color: var(--if-text-body); --bs-table-bg: transparent; --bs-table-striped-bg: var(--if-surface-zebra);
    --bs-table-striped-color: var(--if-text-body); --bs-table-hover-bg: var(--if-surface-hover); --bs-table-hover-color: var(--if-text);
    border-color: var(--if-border);
}
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--if-surface) !important; }
html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-black { color: var(--if-text) !important; }
html[data-theme="dark"] .text-muted { color: var(--if-text-muted) !important; }
html[data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .6; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* Plugins */
html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .daterangepicker, html[data-theme="dark"] .datepicker-dropdown,
html[data-theme="dark"] .swal2-popup, html[data-theme="dark"] #toast-container > div {
    background-color: var(--if-surface-alt) !important; color: var(--if-text-body) !important; border-color: var(--if-border) !important;
}
html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container { color: var(--if-text) !important; }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--if-primary-bg); color: var(--if-text); }
html[data-theme="dark"] .select2-search__field { background: var(--if-surface); color: var(--if-text); border-color: var(--if-border-input) !important; }
html[data-theme="dark"] .daterangepicker .calendar-table { background: transparent; border-color: var(--if-border); }
html[data-theme="dark"] .daterangepicker .calendar-table .next span, html[data-theme="dark"] .daterangepicker .calendar-table .prev span { border-color: var(--if-text-body); }
html[data-theme="dark"] .daterangepicker td.off, html[data-theme="dark"] .daterangepicker td.off.in-range { background: transparent; color: var(--if-text-subtle); }
html[data-theme="dark"] .daterangepicker td.available:hover, html[data-theme="dark"] .daterangepicker th.available:hover { background: var(--if-surface-hover); }
html[data-theme="dark"] .daterangepicker td.in-range { background: var(--if-primary-bg); color: var(--if-text); }
html[data-theme="dark"] .daterangepicker td.active, html[data-theme="dark"] .daterangepicker td.active:hover { background: var(--if-primary); color: var(--if-on-primary); }
html[data-theme="dark"] .daterangepicker:before, html[data-theme="dark"] .daterangepicker:after { display: none; }
html[data-theme="dark"] table.dataTable > tbody > tr { background-color: transparent; }

/* Lo que va en papel sigue claro */
html[data-theme="dark"] #modal-pdf .modal-body, html[data-theme="dark"] iframe, html[data-theme="dark"] embed { background: #FFFFFF; }