/* ============================================================ MODO OSCURO — InvoicePro (AdminLTE 3.2 dark-mode sobre body) Se activa con la clase .dark-mode en (toggle en el navbar). ============================================================ */ /* --- Ajustes base --- */ body.dark-mode .content-wrapper, body.dark-mode .main-footer { background-color: #343a40; } /* --- Breadcrumb (style.css usa blanco con !important) --- */ body.dark-mode .breadcrumb { background-color: #454d55 !important; border-color: #4b545c !important; } body.dark-mode .breadcrumb a { color: #c2c7d0 !important; } body.dark-mode .breadcrumb-item.active { color: #8f979e; } /* --- Tablas: el thead de style.css es claro con !important --- */ body.dark-mode .table, body.dark-mode .table td, body.dark-mode .table th { color: #e9ecef; } body.dark-mode .table thead tr { background-color: #212529 !important; color: #f8f9fa !important; } body.dark-mode .table thead th { border-bottom-color: #4b545c; } body.dark-mode .table td, body.dark-mode .table th { border-top-color: #4b545c; } body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); } /* --- DataTables --- */ body.dark-mode .table.dataTable td, body.dark-mode .table.dataTable th { color: #e9ecef; } body.dark-mode div.dataTables_wrapper div.dataTables_info, body.dark-mode div.dataTables_wrapper div.dataTables_length label, body.dark-mode div.dataTables_wrapper div.dataTables_filter label { color: #c2c7d0; } /* --- Paginación --- */ body.dark-mode .page-link { background-color: #454d55; border-color: #4b545c; color: #c2c7d0; } body.dark-mode .page-link:hover { background-color: #4b545c; color: #fff; } body.dark-mode .page-item.active .page-link { background-color: #3f6791; border-color: #3f6791; color: #fff; } body.dark-mode .page-item.disabled .page-link { background-color: #343a40; border-color: #4b545c; color: #6c757d; } /* --- Tarjetas de módulos del panel (style.css las pinta claras) --- */ body.dark-mode a.card-icon { color: #e9ecef !important; border-color: #4b545c !important; } body.dark-mode a.card-icon:hover, body.dark-mode .card-icon-selected { background-color: #4e4a1f !important; } body.dark-mode a.card-icon h4, body.dark-mode a.card-icon p { color: #e9ecef; } /* --- Pestañas dentro de cards --- */ body.dark-mode .nav-tabs .nav-link { color: #c2c7d0; border-color: #4b545c #4b545c transparent; } body.dark-mode .nav-tabs .nav-link:hover { border-color: #4b545c; } body.dark-mode .nav-tabs .nav-link.active { background-color: #454d55; color: #fff; border-color: #4b545c #4b545c transparent; } /* --- Texto genérico en áreas con color propio --- */ body.dark-mode .text-muted { color: #9aa3ad !important; } body.dark-mode .dropdown-menu { background-color: #454d55; } body.dark-mode .dropdown-item { color: #e9ecef; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #343a40; color: #fff; } body.dark-mode .dropdown-header { color: #c2c7d0; } body.dark-mode .dropdown-divider { border-color: #4b545c; } /* --- Formularios / inputs en dark --- */ body.dark-mode .form-control:focus { background-color: #343a40; color: #fff; } /* --- SweetAlert2 --- */ body.dark-mode .swal2-popup { background: #343a40; } body.dark-mode .swal2-title, body.dark-mode .swal2-html-container, body.dark-mode .swal2-content { color: #f8f9fa; } body.dark-mode .swal2-popup .form-control { background-color: #454d55; color: #fff; border-color: #4b545c; } /* --- jquery-confirm --- */ body.dark-mode .jconfirm .jconfirm-box { background: #343a40; } body.dark-mode .jconfirm .jconfirm-box .jconfirm-title-c { color: #f8f9fa; } body.dark-mode .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content { color: #e9ecef; } body.dark-mode .jconfirm .jconfirm-box .jconfirm-buttons .btn-default { background-color: #454d55; color: #e9ecef; } /* --- Select2 --- */ body.dark-mode .select2-container--bootstrap4 .select2-selection { background-color: #454d55; border-color: #4b545c; } body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { color: #e9ecef; } body.dark-mode .select2-dropdown { background-color: #454d55; border-color: #4b545c; } body.dark-mode .select2-results__option { color: #e9ecef; } body.dark-mode .select2-results__option[aria-selected=true] { background-color: #343a40; } body.dark-mode .select2-results__option--highlighted[aria-selected] { background-color: #3f6791; color: #fff; } /* --- DateRangePicker / datepicker --- */ body.dark-mode .daterangepicker, body.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu { background-color: #454d55; border-color: #4b545c; } body.dark-mode .daterangepicker td, body.dark-mode .daterangepicker th, body.dark-mode .daterangepicker .calendar-table { background-color: #454d55; color: #e9ecef; } body.dark-mode .daterangepicker td.off, body.dark-mode .daterangepicker td.off.end-date, body.dark-mode .daterangepicker td.off.in-range, body.dark-mode .daterangepicker td.off.start-date { background-color: #3a4147; color: #8f979e; } body.dark-mode .daterangepicker td.in-range { background-color: #4b545c; } body.dark-mode .daterangepicker td.active, body.dark-mode .daterangepicker td.active:hover { background-color: #3f6791; } /* --- Botones flotante (login) --- */ .btn-theme-float { position: fixed; top: 12px; right: 14px; z-index: 1080; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.1rem; text-decoration: none !important; } .btn-theme-float:hover { background: rgba(255, 255, 255, .3); color: #fff; } /* --- Página de login en oscuro --- */ body.login-page.dark-mode { background: #1f2d3d !important; } body.login-page.dark-mode .login-box .card { background-color: #343a40; color: #e9ecef; } body.login-page.dark-mode .login-box-msg, body.login-page.dark-mode .login-card-body label { color: #e9ecef; } /* --- Gráficos Highcharts (best effort) --- */ body.dark-mode .highcharts-background { fill: #343a40; } body.dark-mode .highcharts-title, body.dark-mode .highcharts-subtitle, body.dark-mode .highcharts-axis-labels text, body.dark-mode .highcharts-legend-item text, body.dark-mode .highcharts-data-labels text { fill: #e9ecef !important; } body.dark-mode .highcharts-grid line, body.dark-mode .highcharts-grid path { stroke: #4b545c; } /* --- Info boxes / small boxes --- */ body.dark-mode .info-box { background-color: #454d55; color: #e9ecef; } body.dark-mode .info-box .info-box-text, body.dark-mode .info-box .info-box-number { color: #e9ecef; } /* --- Resaltado de bajo stock --- */ body.dark-mode .low-stock { background-color: #a52828; color: #fff !important; }