/*============================================= MODO OSCURO DEL CMS (opt-in por usuario) Cómo funciona: - Un script temprano en template.php lee localStorage('cmsTheme') y pone data-theme="dark" en ANTES de pintar (sin "flashazo" blanco). - El botón 🌙/☀️ de la barra superior (nav.php) alterna el atributo y lo guarda. - TODAS las reglas de este archivo van prefijadas con html[data-theme="dark"]: con tema claro este archivo NO afecta nada. Nota técnica: colors.css fuerza .bg-light/.text-dark/etc. con !important. Para ganarles usamos !important + MAYOR especificidad (el prefijo del tema). =============================================*/ /*============ Paleta (azul noche, alineada a la marca) ============*/ html[data-theme="dark"]{ --dk-bg: #111a28; /* fondo general */ --dk-surface: #1a2436; /* tarjetas, nav, sidebar, modales */ --dk-surface-2: #212e45; /* cabeceras, bg-light, zonas elevadas */ --dk-border: #34425e; /* bordes y separadores */ --dk-input: #141e2e; /* fondo de campos */ --dk-text: #e7edf6; /* texto principal */ --dk-muted: #9fb1c8; /* texto secundario */ color-scheme: dark; /* scrollbars y controles nativos oscuros */ } /*============ Acentos de texto en oscuro ============ El color de acento del perfil (color_admin) suele ser azul oscuro y se pierde sobre el fondo oscuro. SOLO en modo oscuro, los acentos de texto (iconos del menú, links de acento, paginación) pasan a verde WhatsApp. Los fondos de acento (.backColor) se mantienen con el color del perfil. */ html[data-theme="dark"] .textColor{ color: #25D366 !important; } html[data-theme="dark"] .page-link{ color: #25D366 !important; } /* Badges con fondo azul oscuro (acento del perfil, categorías, sucursal): sobre el fondo oscuro se apagaban — se les sube el brillo SOLO en oscuro. */ html[data-theme="dark"] .badge.backColor, html[data-theme="dark"] .badge.bg-primary, html[data-theme="dark"] .badge.bg-blue, html[data-theme="dark"] .badge.bg-indigo, html[data-theme="dark"] .badge.bg-dark{ filter: brightness(1.5) saturate(1.1); } /* Botones de ACCIONES de las tablas (copiar / editar / eliminar): el "copiar" usa text-dark (se perdía) y el "editar" text-primary (azul apagado). Los aclaramos SOLO en oscuro. El SVG del copiar usa fill=currentColor → hereda. */ html[data-theme="dark"] .btn.text-dark, html[data-theme="dark"] .btn.text-dark i, html[data-theme="dark"] .btn.text-dark svg{ color: var(--dk-text) !important; } html[data-theme="dark"] .text-primary{ color: #4d9fff !important; } html[data-theme="dark"] .text-danger{ color: #ff6b7a !important; } html[data-theme="dark"] .text-maroon{ color: #ff6b7a !important; } /* botón ELIMINAR de las tablas */ html[data-theme="dark"] .text-red{ color: #ff6b7a !important; } html[data-theme="dark"] .text-blue{ color: #6ea8ff !important; } /* BOTONES con fondo de acento (ej. "Agregar registro", Guardar): el azul oscuro del perfil se funde con el fondo → se les sube el brillo SOLO en oscuro para que resalten. Solo aplica a .btn (NO a cabeceras de tarjeta). */ html[data-theme="dark"] .btn.backColor, html[data-theme="dark"] .btn.bg-primary, html[data-theme="dark"] .btn.bg-blue, html[data-theme="dark"] .btn.bg-indigo{ filter: brightness(1.42) saturate(1.05); } /*============ Fondo general y texto base ============*/ html[data-theme="dark"] body{ background-color: var(--dk-bg) !important; color: var(--dk-text); } html[data-theme="dark"] .backDashboard{ background-color: var(--dk-bg) !important; } html[data-theme="dark"] .borderDashboard{ border-color: var(--dk-border) !important; } html[data-theme="dark"] hr{ border-color: var(--dk-border); opacity: 1; } /*============ Utilidades forzadas de colors.css ============*/ html[data-theme="dark"] .bg-white{ background-color: var(--dk-surface) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .bg-light{ background: var(--dk-surface-2) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .text-dark{ color: var(--dk-text) !important; } html[data-theme="dark"] .text-muted{ color: var(--dk-muted) !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end{ border-color: var(--dk-border) !important; } /*============ Barra superior (nav) y sidebar ============*/ html[data-theme="dark"] .navbar{ background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .navbar .btn, html[data-theme="dark"] .navbar a{ color: var(--dk-text); } html[data-theme="dark"] #sidebar-wrapper{ background-color: var(--dk-surface) !important; box-shadow: 0 0 12px rgba(0,0,0,.45) !important; } html[data-theme="dark"] #sidebar-wrapper .sidebar-heading{ background-color: var(--dk-surface) !important; color: var(--dk-text) !important; } /*============ Tarjetas, listas y acordeones ============*/ html[data-theme="dark"] .card{ background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer{ background-color: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .list-group-item{ background-color: transparent; color: var(--dk-text); } html[data-theme="dark"] .list-group-item-action:hover, html[data-theme="dark"] .list-group-item-action:focus{ background-color: var(--dk-surface-2); color: var(--dk-text); } /*============ Tablas ============*/ html[data-theme="dark"] .table{ color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] .table th, html[data-theme="dark"] .table td{ border-color: var(--dk-border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd), html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{ background-color: rgba(255,255,255,.03); color: var(--dk-text); --bs-table-accent-bg: transparent; } html[data-theme="dark"] .table-hover > tbody > tr:hover, html[data-theme="dark"] .table-hover > tbody > tr:hover > *{ background-color: var(--dk-surface-2); color: var(--dk-text); --bs-table-accent-bg: transparent; } html[data-theme="dark"] .table-light, html[data-theme="dark"] .table-light > th, html[data-theme="dark"] .table-light > td{ background-color: var(--dk-surface-2) !important; color: var(--dk-text) !important; } /*============ Formularios (inputs, selects, textareas) ============*/ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .custom-select, html[data-theme="dark"] textarea{ background-color: var(--dk-input) !important; color: var(--dk-text) !important; border-color: #5b6c8f !important; /* mantiene el borde visible del custom.css */ } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder{ color: var(--dk-muted); opacity: .8; } /* Excepción: dentro de .form-floating, Bootstrap OCULTA el placeholder (color transparent) para que no choque con el label grande cuando el campo está vacío; la regla de arriba lo volvía visible en modo oscuro y el label + el placeholder quedaban superpuestos (ej. "Efectivo (Bs)" sobre "Ingresa el monto"). Restaura el comportamiento por defecto de Bootstrap solo en ese contexto. */ html[data-theme="dark"] .form-floating > .form-control::placeholder{ color: transparent; opacity: 1; } html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-control:disabled{ background-color: var(--dk-surface-2) !important; color: var(--dk-muted) !important; } html[data-theme="dark"] .input-group-text{ background-color: var(--dk-surface-2); color: var(--dk-text); border-color: #5b6c8f; } html[data-theme="dark"] .form-floating > label{ color: var(--dk-muted); } html[data-theme="dark"] .form-check-input:not(:checked){ background-color: var(--dk-input); border-color: #5b6c8f; } /*============ Select2 y tags-input ============*/ html[data-theme="dark"] .select2-container--default .select2-selection{ background-color: var(--dk-input) !important; color: var(--dk-text) !important; border-color: #5b6c8f !important; } html[data-theme="dark"] .select2-container--default .select2-selection__rendered{ color: var(--dk-text); } html[data-theme="dark"] .select2-dropdown{ background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field{ background-color: var(--dk-input); color: var(--dk-text); border-color: #5b6c8f; } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected]{ background-color: var(--dk-surface-2); color: var(--dk-text); } html[data-theme="dark"] .bootstrap-tagsinput{ background-color: var(--dk-input) !important; color: var(--dk-text); border-color: #5b6c8f !important; } /*============ Modales, dropdowns y popups ============*/ html[data-theme="dark"] .modal-content{ background-color: var(--dk-surface); color: var(--dk-text); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer{ border-color: var(--dk-border); } html[data-theme="dark"] .btn-close{ filter: invert(1) grayscale(100%) brightness(1.6); } html[data-theme="dark"] .dropdown-menu{ background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] .dropdown-item{ color: var(--dk-text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus{ background-color: var(--dk-surface-2); color: var(--dk-text); } html[data-theme="dark"] .swal2-popup{ background-color: var(--dk-surface) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container{ color: var(--dk-text) !important; } /*============ Paginación y botones neutros ============*/ html[data-theme="dark"] .page-link{ background-color: var(--dk-surface); border-color: var(--dk-border); } html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn-light{ color: var(--dk-text); } html[data-theme="dark"] .btn-outline-dark{ color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] .progress{ background-color: var(--dk-surface-2); } /*============ Plugins de fecha (daterangepicker / datetimepicker) ============*/ html[data-theme="dark"] .daterangepicker{ background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] .daterangepicker .calendar-table{ background-color: var(--dk-surface); border-color: var(--dk-border); } html[data-theme="dark"] .daterangepicker td.off{ background-color: var(--dk-surface); color: var(--dk-muted); } html[data-theme="dark"] .daterangepicker td.available:hover, html[data-theme="dark"] .daterangepicker th.available:hover{ background-color: var(--dk-surface-2); } html[data-theme="dark"] .xdsoft_datetimepicker{ background-color: var(--dk-surface) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } /*============ Editor Summernote (lo básico para que no ciegue) ============*/ html[data-theme="dark"] .note-editor.note-frame{ border-color: var(--dk-border); } html[data-theme="dark"] .note-editor .note-toolbar{ background-color: var(--dk-surface-2); border-color: var(--dk-border); } html[data-theme="dark"] .note-editor .note-editing-area .note-editable{ background-color: var(--dk-input); color: var(--dk-text); } html[data-theme="dark"] .note-editor .note-statusbar{ background-color: var(--dk-surface-2); } html[data-theme="dark"] .note-btn{ background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); }