/* ============================================ DARK MODE - SurveeControl / Research Control ============================================ Activado mediante la clase .dark-mode en Respeta también @media (prefers-color-scheme: dark) ============================================ */ /* --- Variables CSS para facilitar mantenimiento --- */ :root { --dm-bg-primary: #121212; --dm-bg-secondary: #1e1e1e; --dm-bg-card: #252525; --dm-bg-input: #2c2c2c; --dm-text-primary: #f0f0f0; --dm-text-secondary: #cccccc; --dm-text-muted: #999999; --dm-border-color: #3a3a3a; --dm-accent: #889be6; --dm-success: #66bb6a; --dm-warning: #ffa726; --dm-danger: #ef5350; --dm-shadow: rgba(0, 0, 0, 0.5); --dm-hover-bg: rgba(255, 255, 255, 0.08); } /* ============================================= BODY & BACKGROUNDS ============================================= */ html.dark-mode, body.dark-mode { background-color: var(--dm-bg-primary) !important; color: var(--dm-text-primary) !important; } body.dark-mode .main-panel { background: var(--dm-bg-secondary) !important; } body.dark-mode .main-panel > .content { background: var(--dm-bg-secondary) !important; } /* ============================================= NAVBAR ============================================= */ body.dark-mode .navbar { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .navbar .navbar-brand { color: var(--dm-text-primary) !important; } body.dark-mode .navbar .nav > li > a { color: var(--dm-text-primary) !important; } body.dark-mode .navbar .nav > li > a:hover, body.dark-mode .navbar .nav > li > a:focus { background-color: var(--dm-hover-bg) !important; color: var(--dm-accent) !important; } body.dark-mode .navbar .dropdown-menu { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; box-shadow: 0 2px 10px var(--dm-shadow) !important; } body.dark-mode .navbar .dropdown-menu > li > a { color: var(--dm-text-primary) !important; } body.dark-mode .navbar .dropdown-menu > li > a:hover { background-color: var(--dm-hover-bg) !important; color: var(--dm-accent) !important; } body.dark-mode .navbar .dropdown-menu .divider { background-color: var(--dm-border-color) !important; } /* ============================================= SIDEBAR (ya es oscuro, ajustes mínimos) ============================================= */ body.dark-mode .sidebar { background-color: #0d0d0d !important; } body.dark-mode .sidebar:after { background: linear-gradient(to bottom, #1a1a1a 0%, #0d0d0d 100%) !important; } body.dark-mode .sidebar .logo { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } /* ============================================= CARDS ============================================= */ body.dark-mode .card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; box-shadow: 0 1px 4px var(--dm-shadow) !important; } body.dark-mode .card .header, body.dark-mode .card .title, body.dark-mode .card .category { color: var(--dm-text-primary) !important; } body.dark-mode .card .content { color: var(--dm-text-secondary) !important; } body.dark-mode .card .footer { border-top-color: var(--dm-border-color) !important; color: var(--dm-text-muted) !important; } /* ============================================= TABLAS ============================================= */ body.dark-mode .table { color: var(--dm-text-primary) !important; } body.dark-mode .table > thead > tr > th { color: var(--dm-text-secondary) !important; border-bottom-color: var(--dm-border-color) !important; } body.dark-mode .table > tbody > tr > td { border-top-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .table > tbody > tr:hover > td { background-color: var(--dm-hover-bg) !important; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02) !important; } body.dark-mode table.dataTable { background-color: var(--dm-bg-card) !important; box-shadow: 0 2px 5px var(--dm-shadow) !important; } body.dark-mode table.dataTable td, body.dark-mode table.dataTable th { border-color: var(--dm-border-color) !important; } /* ============================================= FORMULARIOS ============================================= */ body.dark-mode .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .form-control:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 1px var(--dm-accent) !important; } body.dark-mode .form-control::placeholder { color: var(--dm-text-muted) !important; } body.dark-mode .form-control[readonly] { background-color: #1a1a1a !important; color: var(--dm-text-muted) !important; } body.dark-mode .border-input { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .form-group label, body.dark-mode label { color: var(--dm-text-secondary) !important; } body.dark-mode .input-group-addon { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-secondary) !important; } /* Select nativo */ body.dark-mode select.form-control, body.dark-mode .form-control[type="select"], body.dark-mode select { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode select option { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } /* Select2 */ body.dark-mode .select2-container--bootstrap .select2-selection, body.dark-mode .select2-container .select2-selection, body.dark-mode .select2-container .select2-selection--single, body.dark-mode .select2-container .select2-selection--multiple { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .select2-container .select2-selection__rendered { color: var(--dm-text-primary) !important; } body.dark-mode .select2-container--bootstrap .select2-results__option { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } body.dark-mode .select2-container--bootstrap .select2-results__option--highlighted, body.dark-mode .select2-results__option--highlighted { background-color: var(--dm-accent) !important; color: #fff !important; } body.dark-mode .select2-dropdown { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .select2-container .select2-selection__placeholder { color: var(--dm-text-muted) !important; } body.dark-mode .select2-search__field { background-color: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; } body.dark-mode .select2-container--bootstrap .select2-selection__arrow { background-color: transparent !important; } /* Select2 multiple - tags/chips seleccionados */ body.dark-mode .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, body.dark-mode .select2-container .select2-selection--multiple .select2-selection__choice, body.dark-mode .select2-selection__choice { background-color: #3a3a3a !important; border-color: #555 !important; color: var(--dm-text-primary) !important; } body.dark-mode .select2-selection__choice__remove { color: var(--dm-text-muted) !important; } body.dark-mode .select2-selection__choice__remove:hover { color: var(--dm-danger) !important; } /* Select2 multiple - fondo del contenedor */ body.dark-mode .select2-container--bootstrap .select2-selection--multiple, body.dark-mode .select2-container .select2-selection--multiple { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; } /* Textarea */ body.dark-mode textarea.form-control, body.dark-mode textarea { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } /* Progress bar */ body.dark-mode .progress { background-color: var(--dm-border-color) !important; } body.dark-mode .progress-bar { color: #fff !important; } /* ============================================= BOTONES ============================================= */ body.dark-mode .btn-default { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .btn-default:hover { background-color: var(--dm-hover-bg) !important; border-color: var(--dm-accent) !important; color: var(--dm-accent) !important; } body.dark-mode .btn { color: #fff !important; } body.dark-mode .btn .fa, body.dark-mode .btn .pe-7s-server, body.dark-mode .btn .glyphicon, body.dark-mode .btn i { color: #fff !important; } body.dark-mode .btn-primary { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } body.dark-mode .btn-primary:hover { background-color: #7a8dd6 !important; border-color: #7a8dd6 !important; color: #fff !important; } body.dark-mode .btn-success { background-color: var(--dm-success) !important; border-color: var(--dm-success) !important; color: #fff !important; } body.dark-mode .btn-success:hover { background-color: #57a35c !important; color: #fff !important; } body.dark-mode .btn-danger { background-color: var(--dm-danger) !important; border-color: var(--dm-danger) !important; color: #fff !important; } body.dark-mode .btn-danger:hover { background-color: #d44542 !important; color: #fff !important; } body.dark-mode .btn-warning { background-color: var(--dm-warning) !important; border-color: var(--dm-warning) !important; color: #fff !important; } body.dark-mode .btn-warning:hover { background-color: #e69520 !important; color: #fff !important; } body.dark-mode .btn-info { background-color: #4fc3f7 !important; border-color: #4fc3f7 !important; color: #fff !important; } body.dark-mode .btn-info:hover { background-color: #3daee0 !important; color: #fff !important; } body.dark-mode .btn-fill { color: #fff !important; } body.dark-mode .btn-simple { color: var(--dm-text-primary) !important; } /* Botones pequeños de acciones (xs, sm) */ body.dark-mode .btn-xs, body.dark-mode .btn-sm, body.dark-mode .btn-group-xs > .btn, body.dark-mode .btn-group-sm > .btn { color: #fff !important; } body.dark-mode .btn-xs .fa, body.dark-mode .btn-sm .fa, body.dark-mode .btn-xs i, body.dark-mode .btn-sm i { color: #fff !important; } /* ============================================= MODALES ============================================= */ body.dark-mode .modal-content { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .modal-header { border-bottom-color: var(--dm-border-color) !important; } body.dark-mode .modal-header .close { color: var(--dm-text-primary) !important; opacity: 0.7; } body.dark-mode .modal-footer { border-top-color: var(--dm-border-color) !important; } body.dark-mode .modal-title { color: var(--dm-text-primary) !important; } /* Bootbox */ body.dark-mode .bootbox .modal-content { background-color: var(--dm-bg-card) !important; } /* ============================================= ALERTAS ============================================= */ body.dark-mode .alert-info { background-color: rgba(104, 179, 200, 0.15) !important; border-color: rgba(104, 179, 200, 0.3) !important; color: #7ce0f9 !important; } body.dark-mode .alert-success { background-color: rgba(76, 175, 80, 0.15) !important; border-color: rgba(76, 175, 80, 0.3) !important; color: #81c784 !important; } body.dark-mode .alert-warning { background-color: rgba(255, 183, 77, 0.15) !important; border-color: rgba(255, 183, 77, 0.3) !important; color: #ffcc80 !important; } body.dark-mode .alert-danger { background-color: rgba(239, 83, 80, 0.15) !important; border-color: rgba(239, 83, 80, 0.3) !important; color: #ef9a9a !important; } /* ============================================= LABELS & BADGES ============================================= */ body.dark-mode .label-default { background-color: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; } /* ============================================= PANELES & WELLS ============================================= */ body.dark-mode .panel { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .panel-heading { background-color: rgba(255, 255, 255, 0.03) !important; border-bottom-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .panel-body { color: var(--dm-text-secondary) !important; } body.dark-mode .panel-footer { background-color: #2a2a2a !important; border-top-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .panel-footer a, body.dark-mode a .panel-footer, body.dark-mode .panel-footer .row { color: var(--dm-text-primary) !important; } body.dark-mode .announcement-bottom { background-color: #2a2a2a !important; color: var(--dm-text-primary) !important; } body.dark-mode .announcement-bottom .fa { color: var(--dm-text-primary) !important; } body.dark-mode .announcement-text { color: var(--dm-text-primary) !important; } body.dark-mode .panel-info .panel-heading { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .panel-info { border-color: var(--dm-border-color) !important; } body.dark-mode .well { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } /* ============================================= PAGINATION ============================================= */ body.dark-mode .pagination > li > a, body.dark-mode .pagination > li > span { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .pagination > li > a:hover { background-color: var(--dm-hover-bg) !important; color: var(--dm-accent) !important; } body.dark-mode .pagination > .active > a, body.dark-mode .pagination > .active > span { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } /* ============================================= BREADCRUMBS & TABS ============================================= */ body.dark-mode .breadcrumb, body.dark-mode ol.breadcrumb { display: none !important; } body.dark-mode .nav-tabs { border-bottom-color: var(--dm-border-color) !important; } body.dark-mode .nav-tabs > li > a { color: var(--dm-text-secondary) !important; } body.dark-mode .nav-tabs > li.active > a, body.dark-mode .nav-tabs > li.active > a:hover { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; border-bottom-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } body.dark-mode .tab-content { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } /* ============================================= FOOTER ============================================= */ body.dark-mode .footer { background-color: var(--dm-bg-primary) !important; border-top-color: var(--dm-border-color) !important; } body.dark-mode .footer .copyright { color: var(--dm-text-muted) !important; } /* ============================================= SCROLLBAR ============================================= */ body.dark-mode ::-webkit-scrollbar { background-color: var(--dm-bg-secondary) !important; } body.dark-mode ::-webkit-scrollbar-thumb { background-color: #4a5568 !important; border-radius: 3px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background-color: #5a6a7e !important; } /* ============================================= PRELOADER ============================================= */ body.dark-mode #page-loader { background: var(--dm-bg-primary) !important; } body.dark-mode #page-loader .preloader-interior { border-top-color: var(--dm-accent) !important; } body.dark-mode #page-loader .preloader-interior:before { border-top-color: var(--dm-accent) !important; } body.dark-mode #page-loader .preloader-interior:after { border-top-color: var(--dm-accent) !important; } /* ============================================= MISCELÁNEOS ============================================= */ body.dark-mode hr { border-top-color: var(--dm-border-color) !important; } body.dark-mode h1, body.dark-mode .h1, body.dark-mode h2, body.dark-mode .h2, body.dark-mode h3, body.dark-mode .h3, body.dark-mode h4, body.dark-mode .h4, body.dark-mode h5, body.dark-mode .h5, body.dark-mode h6, body.dark-mode .h6 { color: var(--dm-text-primary) !important; } body.dark-mode p { color: var(--dm-text-secondary) !important; } body.dark-mode a { color: var(--dm-accent) !important; } body.dark-mode a:hover { color: #a8b8f0 !important; } /* Links que son botones: forzar blanco */ body.dark-mode a.btn, body.dark-mode a.btn:hover, body.dark-mode a.btn:focus, body.dark-mode a.btn:active { color: #fff !important; } body.dark-mode a.btn-default, body.dark-mode a.btn-default:hover { color: var(--dm-text-primary) !important; } /* Tooltips */ body.dark-mode .tooltip-inner { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; border: 1px solid var(--dm-border-color); } /* Popover */ body.dark-mode .popover { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .popover-title { background-color: rgba(255, 255, 255, 0.05) !important; border-bottom-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .popover-content { color: var(--dm-text-secondary) !important; } /* Summernote Editor */ body.dark-mode .note-editor { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .note-editor .note-toolbar { background-color: var(--dm-bg-card) !important; border-bottom-color: var(--dm-border-color) !important; } body.dark-mode .note-editor .note-editing-area .note-editable { background-color: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; } body.dark-mode .note-editor .note-statusbar { background-color: var(--dm-bg-card) !important; border-top-color: var(--dm-border-color) !important; } /* Dropzone */ body.dark-mode .dropzone { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-secondary) !important; } /* DataTables overrides */ body.dark-mode .dataTables_wrapper .dataTables_filter input { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .dataTables_wrapper .dataTables_length select { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .dataTables_wrapper .dataTables_info { color: var(--dm-text-muted) !important; } /* Bootstrap Tags Input */ body.dark-mode .bootstrap-tagsinput { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .bootstrap-tagsinput .tag { background-color: var(--dm-accent) !important; } /* Calendar/Datetimepicker */ body.dark-mode .bootstrap-datetimepicker-widget { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode .bootstrap-datetimepicker-widget table th, body.dark-mode .bootstrap-datetimepicker-widget table td { color: var(--dm-text-primary) !important; } body.dark-mode .bootstrap-datetimepicker-widget table td.active, body.dark-mode .bootstrap-datetimepicker-widget table td span.active { background-color: var(--dm-accent) !important; } /* Light Gallery */ body.dark-mode .lg-toolbar, body.dark-mode .lg-actions .lg-next, body.dark-mode .lg-actions .lg-prev { background-color: var(--dm-bg-card) !important; } /* Maxsize cards en dashboard */ body.dark-mode .maxsize .bg-warning { background-color: var(--dm-bg-card) !important; color: var(--dm-warning) !important; } body.dark-mode .maxsize .bg-info { background-color: var(--dm-bg-card) !important; color: var(--dm-accent) !important; } body.dark-mode .maxsize .bg-danger { background-color: var(--dm-bg-card) !important; color: var(--dm-danger) !important; } body.dark-mode .maxsize .bg-success { background-color: var(--dm-bg-card) !important; color: var(--dm-success) !important; } /* ============================================= TOGGLE BUTTON STYLES ============================================= */ .dark-mode-toggle { cursor: pointer; padding: 10px 15px; transition: all 0.3s ease; } .dark-mode-toggle:hover { opacity: 0.8; } .dark-mode-toggle .fa { font-size: 16px; transition: transform 0.3s ease; } .dark-mode-toggle:hover .fa { transform: rotate(20deg); } /* ============================================= TRANSICIÓN SUAVE ============================================= */ body.dark-mode, body.dark-mode .main-panel, body.dark-mode .navbar, body.dark-mode .card, body.dark-mode .form-control, body.dark-mode .modal-content, body.dark-mode .footer { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ============================================= SOPORTE prefers-color-scheme (auto) ============================================= */ @media (prefers-color-scheme: dark) { body.dark-mode-auto { background-color: var(--dm-bg-primary) !important; color: var(--dm-text-primary) !important; } } /* ============================================= TEXTOS GENERALES - MÁXIMO CONTRASTE ============================================= */ body.dark-mode, body.dark-mode td, body.dark-mode th, body.dark-mode span, body.dark-mode div, body.dark-mode li, body.dark-mode .td-name { color: var(--dm-text-primary) !important; } body.dark-mode .text-muted { color: var(--dm-text-muted) !important; } body.dark-mode .text-primary { color: var(--dm-accent) !important; } /* ============================================= FILTROS SUPERIORES (barra de búsqueda/filtros) ============================================= */ body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="number"], body.dark-mode input[type="search"], body.dark-mode input[type="date"], body.dark-mode input[type="tel"], body.dark-mode textarea, body.dark-mode select { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: var(--dm-text-muted) !important; opacity: 1 !important; } /* Inputs dentro de tablas (ej: bonificaciones) */ body.dark-mode table input, body.dark-mode table select, body.dark-mode table textarea, body.dark-mode table .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; color: var(--dm-text-primary) !important; } /* Fieldset */ body.dark-mode fieldset { border-color: var(--dm-border-color) !important; } body.dark-mode legend { color: var(--dm-text-primary) !important; border-bottom-color: var(--dm-border-color) !important; } /* ============================================= TABLA - ENCABEZADOS Y FILAS ============================================= */ body.dark-mode .table > thead > tr > th, body.dark-mode .table > thead > tr > td { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border-color) !important; font-weight: 600; } body.dark-mode .table > tbody > tr { background-color: var(--dm-bg-secondary) !important; } body.dark-mode .table > tbody > tr:nth-child(even) { background-color: var(--dm-bg-card) !important; } body.dark-mode .table > tbody > tr > td { color: var(--dm-text-primary) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .table > tbody > tr:hover > td { background-color: rgba(255, 255, 255, 0.06) !important; } body.dark-mode .table > tfoot > tr > td { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-border-color) !important; } /* Links dentro de tablas */ body.dark-mode .table a { color: var(--dm-accent) !important; } body.dark-mode .table a:hover { color: #a8b8f0 !important; } /* Links que son botones dentro de tablas: blanco */ body.dark-mode .table a.btn, body.dark-mode .table a.btn:hover, body.dark-mode .table a.btn:focus { color: #fff !important; } /* Table dentro de card con contenido */ body.dark-mode .card .content .table { background-color: var(--dm-bg-secondary) !important; } body.dark-mode .card .content .table > thead > tr > th { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } /* ============================================= TABLA TIPO LIQUIDACIÓN (table-bordered con th/td inline) ============================================= */ body.dark-mode .table-bordered { border-color: var(--dm-border-color) !important; } body.dark-mode .table-bordered > tbody > tr > th, body.dark-mode .table-bordered > thead > tr > th, body.dark-mode .table-bordered > tfoot > tr > th, body.dark-mode .table-bordered tr > th, body.dark-mode .table th { background-color: #2a2a2a !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .table-bordered > tbody > tr > td, body.dark-mode .table-bordered > thead > tr > td, body.dark-mode .table-bordered > tfoot > tr > td, body.dark-mode .table-bordered tr > td, body.dark-mode .table td { background-color: var(--dm-bg-secondary) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .table-bordered > tbody > tr > td span, body.dark-mode .table-bordered > tbody > tr > td strong, body.dark-mode .table-bordered > tbody > tr > td u, body.dark-mode .table td span, body.dark-mode .table td strong, body.dark-mode .table td u { color: var(--dm-text-primary) !important; } body.dark-mode .table-bordered .copietab, body.dark-mode .table .copietab { color: var(--dm-text-muted) !important; } /* Tabla responsive especial (liquidación) */ body.dark-mode .table-responsive-special { background-color: var(--dm-bg-secondary) !important; } body.dark-mode .table-responsive-special .table { background-color: var(--dm-bg-secondary) !important; } /* Override para cualquier tabla con fondo blanco inline */ body.dark-mode table.dataTable, body.dark-mode .table { background-color: var(--dm-bg-secondary) !important; } /* ============================================= CARDS - TÍTULO GRANDE (ej: "LIQUIDACIONES PENDIENTES") ============================================= */ body.dark-mode .content h1, body.dark-mode .content h2, body.dark-mode .content h3, body.dark-mode .content h4, body.dark-mode .content h5, body.dark-mode .content h6, body.dark-mode .content .title { color: var(--dm-text-primary) !important; } /* ============================================= SELECT2 - MEJORADO PARA VISIBILIDAD ============================================= */ body.dark-mode .select2-container .select2-selection__rendered { color: var(--dm-text-primary) !important; } body.dark-mode .select2-container .select2-selection__placeholder { color: var(--dm-text-muted) !important; } body.dark-mode .select2-container--bootstrap .select2-selection--single { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-color) !important; } body.dark-mode .select2-search__field { background-color: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; } /* ============================================= BADGES / LABELS DE ESTADO ============================================= */ body.dark-mode .label { color: #fff !important; } body.dark-mode .badge { color: #fff !important; } /* ============================================= ICONOS DE ACCIÓN EN TABLA ============================================= */ body.dark-mode .table .btn .fa, body.dark-mode .table .btn .pe-7s-server, body.dark-mode .table .btn .glyphicon, body.dark-mode .table .btn i { color: #fff !important; } body.dark-mode .table > tbody > tr > td .fa:not(.btn .fa), body.dark-mode .table > tbody > tr > td .glyphicon:not(.btn .glyphicon) { color: var(--dm-text-secondary) !important; } body.dark-mode .table > tbody > tr > td .fa:not(.btn .fa):hover, body.dark-mode .table > tbody > tr > td .glyphicon:not(.btn .glyphicon):hover { color: var(--dm-accent) !important; } /* ============================================= CHECKBOX EN TABLA ============================================= */ body.dark-mode input[type="checkbox"] { accent-color: var(--dm-accent); } /* ============================================= WRAPPER (fondo general detrás de todo) ============================================= */ body.dark-mode .wrapper { background-color: var(--dm-bg-primary) !important; }