/* Dark Mode Styles */ :root { --filter-bg: #f9fafb; --filter-border: #e5e7eb; --filter-active-bg: #eff6ff; --filter-active-color: #1d4ed8; --filter-inactive-color: #4b5563; --card-bg: #ffffff; --text-color: #212529; --hover-bg: #f0f9ff; } body.dark-mode { background-color: #121212 !important; color: #e0e0e0 !important; --filter-bg: #252525; --filter-border: #333333; --filter-active-bg: #1d4ed8; --filter-active-color: #ffffff; --filter-inactive-color: #adb5bd; --card-bg: #1e1e1e; --text-color: #e0e0e0; --hover-bg: #2d2d2d; } body.dark-mode .sb-topnav { background-color: #1f1f1f !important; border-bottom: 1px solid #333; } body.dark-mode .sb-sidenav-light { background-color: #1f1f1f !important; color: #e0e0e0 !important; } body.dark-mode .sb-sidenav-light .sb-sidenav-menu .nav-link { color: #adb5bd !important; } body.dark-mode .sb-sidenav-light .sb-sidenav-menu .nav-link:hover { color: #fff !important; } body.dark-mode .card, body.dark-mode .modern-card { background-color: #1e1e1e !important; color: #e0e0e0 !important; border-color: #333 !important; } body.dark-mode .modern-card-header { background: linear-gradient(135deg, #2c3e50 0%, #000000 100%) !important; color: #e0e0e0 !important; } body.dark-mode .modern-card-body { background-color: #1e1e1e !important; } body.dark-mode .card-header { background: #252525 !important; border-bottom-color: #333 !important; color: #e0e0e0 !important; } body.dark-mode .form-control, body.dark-mode .form-select { background-color: #2d2d2d !important; border-color: #444 !important; color: #e0e0e0 !important; } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background-color: #333 !important; border-color: #0d6efd !important; color: #fff !important; } body.dark-mode .table { color: #e0e0e0 !important; border-color: #333 !important; } body.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>* { color: #e0e0e0 !important; background-color: #252525 !important; } body.dark-mode .table-hover>tbody>tr:hover>* { color: #fff !important; background-color: #333 !important; } body.dark-mode .table th { background-color: #252525 !important; color: #e0e0e0 !important; border-bottom-color: #444 !important; } body.dark-mode .table td { border-bottom-color: #333 !important; } body.dark-mode .modal-content { background-color: #1e1e1e !important; border-color: #333 !important; color: #e0e0e0 !important; } body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: #333 !important; } body.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } body.dark-mode .text-muted { color: #adb5bd !important; } body.dark-mode input[readonly] { background-color: #252525 !important; opacity: 0.7; } body.dark-mode .bg-light { background-color: #252525 !important; } body.dark-mode .border { border-color: #333 !important; } /* ===================================================================== Extensions: anti-FOUC shim, app shell, dropdowns, plugins, login. ===================================================================== */ /* Anti-FOUC: applies the instant gets .dark-mode, before theme.js mirrors the class onto . Avoids a white flash on hard refresh. */ html.dark-mode body { background-color: #121212 !important; color: #e0e0e0 !important; } /* ---------- Shell: top navbar (brand) ---------- */ body.dark-mode .sb-topnav-brand { background-color: #1a1a1a !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } body.dark-mode .sb-topnav-brand .navbar-brand { color: #60a5fa !important; } body.dark-mode .sb-topnav-brand .btn-link, body.dark-mode .sb-topnav-brand .nav-link, body.dark-mode .theme-toggle { color: #e0e0e0 !important; } /* ---------- Shell: premium sidebar (the actual sidebar class) ---------- */ body.dark-mode .sb-sidenav-premium { background: linear-gradient(180deg, #0a0a0a 0%, #161616 100%) !important; } body.dark-mode .sb-sidenav-premium .nav-link { color: #cbd5e1 !important; } body.dark-mode .sb-sidenav-premium .nav-link.active { background: linear-gradient(135deg, #0e7490 0%, #1d4ed8 100%) !important; box-shadow: none !important; } body.dark-mode .sb-sidenav-footer { background-color: rgba(0, 0, 0, 0.4) !important; } /* ---------- Dropdown menus ---------- */ body.dark-mode .dropdown-menu { background-color: #1e1e1e !important; border-color: #333 !important; } body.dark-mode .dropdown-item { color: #e0e0e0 !important; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #2d2d2d !important; color: #fff !important; } body.dark-mode .dropdown-divider { border-top-color: #333 !important; } /* ---------- Plugin: Select2 ---------- */ body.dark-mode .select2-container--default .select2-selection--single, body.dark-mode .select2-container--default .select2-selection--multiple, body.dark-mode .select2-dropdown { background-color: #2d2d2d !important; border-color: #444 !important; color: #e0e0e0 !important; } body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e0e0e0 !important; } body.dark-mode .select2-results__option { color: #e0e0e0 !important; } body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #1d4ed8 !important; color: #fff !important; } body.dark-mode .select2-search__field { background-color: #1e1e1e !important; color: #e0e0e0 !important; } /* ---------- Plugin: DataTables ---------- */ body.dark-mode .dataTables_wrapper .dataTables_length, body.dark-mode .dataTables_wrapper .dataTables_filter, body.dark-mode .dataTables_wrapper .dataTables_info, body.dark-mode .dataTables_wrapper .dataTables_processing, body.dark-mode .dataTables_wrapper .dataTables_paginate { color: #e0e0e0 !important; } body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: #e0e0e0 !important; } body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; } body.dark-mode table.dataTable thead th { border-color: #444 !important; } /* ---------- Plugin: SweetAlert2 ---------- */ body.dark-mode .swal2-popup { background-color: #1e1e1e !important; color: #e0e0e0 !important; } body.dark-mode .swal2-title, body.dark-mode .swal2-html-container { color: #e0e0e0 !important; } /* ---------- Plugin: PrimeReact ---------- */ body.dark-mode .p-dropdown, body.dark-mode .p-inputtext, body.dark-mode .p-multiselect { background: #2d2d2d !important; border-color: #444 !important; color: #e0e0e0 !important; } body.dark-mode .p-dropdown-panel, body.dark-mode .p-multiselect-panel { background: #1e1e1e !important; color: #e0e0e0 !important; } body.dark-mode .p-dropdown-items .p-dropdown-item, body.dark-mode .p-multiselect-items .p-multiselect-item { color: #e0e0e0 !important; } body.dark-mode .p-dropdown-items .p-dropdown-item.p-highlight, body.dark-mode .p-multiselect-items .p-multiselect-item.p-highlight { background: #1d4ed8 !important; color: #fff !important; } /* ---------- Login (glassmorphism) dark overrides ---------- */ body.dark-mode .login-gradient-bg { background: linear-gradient(135deg, #062c3a 0%, #0a2a52 100%) !important; } body.dark-mode .login-glass-card { background: rgba(20, 20, 20, 0.45) !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.dark-mode .login-glass-card .form-control { background-color: rgba(255, 255, 255, 0.06) !important; color: #e0e0e0 !important; } body.dark-mode .login-glass-card .form-floating > label { color: #cbd5e1 !important; } /* ---------- Plugin: PrimeReact DataTable ---------- */ body.dark-mode .p-datatable, body.dark-mode .p-datatable .p-datatable-header, body.dark-mode .p-datatable .p-paginator { background: #1e1e1e !important; color: #e0e0e0 !important; border-color: #333 !important; } body.dark-mode .p-datatable .p-datatable-thead > tr > th { background: #252525 !important; color: #e0e0e0 !important; border-color: #444 !important; } body.dark-mode .p-datatable .p-datatable-tbody > tr { background: #1e1e1e !important; color: #e0e0e0 !important; } body.dark-mode .p-datatable .p-datatable-tbody > tr > td { border-color: #333 !important; } body.dark-mode .p-datatable .p-datatable-tbody > tr:nth-child(even) { background: #252525 !important; } body.dark-mode .p-datatable .p-datatable-tbody > tr:hover { background: #333 !important; color: #fff !important; } body.dark-mode .p-datatable .p-sortable-column:hover { background: #2d2d2d !important; color: #fff !important; } body.dark-mode .p-datatable .p-sortable-column .p-sortable-column-icon { color: #adb5bd !important; } body.dark-mode .p-paginator .p-paginator-first, body.dark-mode .p-paginator .p-paginator-prev, body.dark-mode .p-paginator .p-paginator-next, body.dark-mode .p-paginator .p-paginator-last, body.dark-mode .p-paginator .p-paginator-page { color: #e0e0e0 !important; } body.dark-mode .p-paginator .p-paginator-page.p-highlight { background: #1d4ed8 !important; color: #fff !important; } /* Global-filter / inputs inside the DataTable header */ body.dark-mode .p-datatable .p-datatable-header .form-control, body.dark-mode .p-datatable .p-datatable-header .p-inputtext { background: #2d2d2d !important; border-color: #444 !important; color: #e0e0e0 !important; } /* Paginator container + "rows per page" dropdown trigger ("10 v") */ body.dark-mode .p-paginator { background: #1e1e1e !important; border-color: #333 !important; } body.dark-mode .p-paginator .p-dropdown { background: #2d2d2d !important; border-color: #444 !important; } body.dark-mode .p-paginator .p-dropdown .p-dropdown-label, body.dark-mode .p-paginator .p-dropdown .p-dropdown-trigger { color: #e0e0e0 !important; } body.dark-mode .p-paginator .p-paginator-current { color: #adb5bd !important; } /* Custom Overrides for Operaciones and General Dark Mode */ body.dark-mode .modal-header { background: #252525 !important; border-bottom-color: #333 !important; color: #e0e0e0 !important; } body.dark-mode .tab-content { background-color: #1e1e1e !important; color: #e0e0e0 !important; border-color: #333 !important; } body.dark-mode .nav-tabs { border-bottom-color: #333 !important; } body.dark-mode .nav-tabs .nav-link { color: #adb5bd !important; border-color: transparent !important; background-color: transparent !important; } body.dark-mode .nav-tabs .nav-link:hover { color: #fff !important; border-color: transparent !important; } body.dark-mode .nav-tabs .nav-link.active { color: #fff !important; background-color: #1e1e1e !important; border-color: #333 #333 #1e1e1e !important; } body.dark-mode .bg-white { background-color: #1e1e1e !important; }