body { display: flex; flex-direction: column; height: 100vh; margin: 0; font-family: Arial, sans-serif; } body.theme-light { background: #ffffff; color: #0f172a; } body.theme-dark { background: #0b1220; color: #e2e8f0; } .header { background-color: #f8f9fa; padding: 10px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .theme-toggle-btn { border: 0; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #0f172a; } .footer { background-color: rgba(0, 0, 0, 0.05); padding: 10px 20px; text-align: center; font-size: 14px; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); } .main { display: flex; flex: 1; overflow: hidden; } .sidebar { width: 250px; background-color: #1e73be; color: #ffffff; transition: width 0.3s; overflow: hidden; } .sidebar a { text-decoration: none !important; color: #ffffff !important; } .sidebar a:hover { color: #afddf0 !important; } .sidebar.collapsed { width: 45px; } .sidebar .menu-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; white-space: nowrap; } .sidebar .menu-item:hover { background-color: #245380; } .sidebar .menu-item i { margin-right: 10px; font-size: 18px; min-width: 20px; text-align: center; } .sidebar .menu-item span { transition: opacity 0.3s; } .sidebar.collapsed .menu-item span { opacity: 0; width: 0; overflow: hidden; visibility: hidden; } .content { flex: 1; padding: 20px; background-color: #ffffff; overflow-y: auto; } a { text-decoration: none; color: inherit; } body.theme-dark .theme-toggle-btn { background: #1e293b; color: #f8fafc; } body.theme-dark .header, body.theme-dark .footer, body.theme-dark .content { background-color: #0f172a !important; color: #e2e8f0; } body.theme-dark .sidebar { background-color: #0b2942; } body.theme-dark .sidebar .menu-item:hover { background-color: #103a5a; } /* Select2 (filtros de Tabla Resumen/Tabla Base) y controles nativos de Bootstrap/DataTables quedaban con fondo blanco fijo, sin adaptarse al tema oscuro. */ /* !important porque el CSS de Select2/DataTables se inyecta en (cada plantilla lo referencia dentro del bloque content), es decir despues de este archivo (cargado en ) - con la misma especificidad, sin !important esas hojas de estilo ganaban por orden de carga. */ body.theme-dark .form-control, body.theme-dark select, body.theme-dark input[type="text"], body.theme-dark input[type="search"] { background-color: #0f172a !important; border-color: rgba(148, 163, 184, 0.35) !important; color: #e2e8f0 !important; } body.theme-dark .select2-container--default .select2-selection--multiple, body.theme-dark .select2-container--default .select2-selection--single { background-color: #0f172a !important; border-color: rgba(148, 163, 184, 0.35) !important; color: #e2e8f0 !important; } body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e2e8f0 !important; } body.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #1e293b !important; border-color: rgba(148, 163, 184, 0.35) !important; color: #e2e8f0 !important; } body.theme-dark .select2-dropdown { background-color: #0f172a !important; border-color: rgba(148, 163, 184, 0.35) !important; color: #e2e8f0 !important; } body.theme-dark .select2-container--default .select2-results__option { color: #e2e8f0 !important; } body.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #1e293b !important; color: #14b8a6 !important; } body.theme-dark .select2-search__field { background-color: #0f172a !important; color: #e2e8f0 !important; } body.theme-dark .dataTables_wrapper .dataTables_length, body.theme-dark .dataTables_wrapper .dataTables_filter, body.theme-dark .dataTables_wrapper .dataTables_info, body.theme-dark .dataTables_wrapper .dataTables_paginate { color: #e2e8f0 !important; } body.theme-dark .dataTables_wrapper .dataTables_length select, body.theme-dark .dataTables_wrapper .dataTables_filter input { background-color: #0f172a !important; border-color: rgba(148, 163, 184, 0.35) !important; color: #e2e8f0 !important; } body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: #e2e8f0 !important; } body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: #64748b !important; } body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #1e293b !important; border-color: rgba(148, 163, 184, 0.35) !important; color: #14b8a6 !important; } body.theme-dark table.dataTable { color: #e2e8f0 !important; } body.theme-dark table.dataTable tbody tr { background-color: #0f172a !important; } body.theme-dark table.dataTable.table-striped tbody tr:nth-of-type(odd) { background-color: #111c30 !important; }