// ============================================================ // DARK MODE (modo oscuro) // Se activa con el atributo data-theme="dark" en . // Enfoque: overrides explícitos de las superficies principales // (fondo, texto, header, sidebar, cards, tablas, forms, dropdowns, // modales) para tapar el CSS legacy del template admin + Bootstrap. // Baseline: cubre la app; los módulos con estilos muy propios se // pueden ir refinando después. // ============================================================ // ─── Switch del toggle (se ve en AMBOS temas) ─── .dm-toggle-link { display: flex !important; align-items: center; gap: 8px; } .dm-toggle-link .dm-label { flex: 1 1 auto; text-align: left; } .dm-switch { flex: 0 0 auto; width: 34px; height: 18px; border-radius: 9px; background: #cbd5e1; position: relative; transition: background .2s ease; } .dm-switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .2s ease; } .dm-toggle-link.dm-on .dm-switch { background: var(--primary, #2563eb); } .dm-toggle-link.dm-on .dm-switch-knob { left: 18px; } @keyframes dm-spin { to { transform: rotate(360deg); } } // Splash oscuro: pulso suave de opacidad del logo mientras carga. // Va en el ::after (que lleva el logo), no en el contenedor, para que el fondo // oscuro nunca se transparente y no se vea la app a medio montar detrás. @keyframes dm-splash-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } // ─── El tema oscuro aplica SOLO en pantalla: al imprimir sale siempre el claro ─── // (sin re-indentar el contenido para no ensuciar el git blame) @media screen { // ─── Tokens del tema oscuro ─── :root[data-theme="dark"] { color-scheme: dark; --dm-bg: #14171c; --dm-surface: #1e232b; --dm-surface-2: #262c36; --dm-border: #333b47; --dm-text: #e5e9f0; --dm-muted: #9aa4b2; // Chips/badges de filtro con color inline en estado NO seleccionado // (WhatsApp conversaciones). En claro caen al fallback #e2e8f0/#475569. --chip-bg: #2a3942; --chip-fg: #cbd5e1; background-color: var(--dm-bg); } :root[data-theme="dark"] { // Base / fondos generales body, .wrapper, .container_full, .content_wrapper, .content-wrapper, main { background-color: var(--dm-bg) !important; color: var(--dm-text); } body, p, span, div, li, td, th, dd, dt { color: var(--dm-text); } h1, h2, h3, h4, h5, h6, label, legend { color: var(--dm-text); } .text-muted, small.text-muted { color: var(--dm-muted) !important; } .text-dark, .text-body, .text-black { color: var(--dm-text) !important; } a { color: #6ea8fe; } a:hover { color: #8fbcff; } hr { border-color: var(--dm-border); } // Header / topbar (incluye la barra interna .container_header) .main-header, header.main-header, .container_header, .container_header.improved, .navbar, .navbar-laravel { background-color: var(--dm-surface) !important; color: var(--dm-text); border-color: var(--dm-border) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); } // Sección derecha del header (iconos + usuario) .right_detail { background-color: var(--dm-surface) !important; color: var(--dm-text); } // Quitar la banda diagonal animada "shine" del header (rgba blanco que en dark // se ve como una línea que cruza la pantalla constantemente). .container_header.improved::before { display: none !important; animation: none !important; content: none !important; } // Sidebar .side_bar, .sidebar-menu, .sidebar-menu > li, .sidebar-menu > li > a, .sidebar-menu .treeview-menu { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } .sidebar-menu > li > a:hover, .sidebar-menu > li.active > a, .sidebar-menu .treeview-menu > li > a:hover { background-color: var(--dm-surface-2) !important; color: #fff !important; } // Submenús flotantes del sidebar (down_menu) — venían en blanco .down_menu { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .5) !important; } .down_menu li > a, .down_menu a { color: var(--dm-text) !important; } .down_menu li > a:hover, .down_menu a:hover { background-color: var(--dm-surface-2) !important; color: #fff !important; } // Superficies: cards / boxes / paneles / modales / listas / dropdowns .card, .box, .panel, .panel-body, .panel-default, .modal-content, .list-group-item, .dropdown-menu, .custom-dropdown-menu, .well { background-color: var(--dm-surface) !important; color: var(--dm-text); border-color: var(--dm-border) !important; } .card-header, .card-footer, .modal-header, .modal-footer, .panel-heading, .box-header { background-color: var(--dm-surface-2) !important; color: var(--dm-text); border-color: var(--dm-border) !important; } // new_css_2025 pinta `.card-title` con `color:var(--gray-800)!important` (gris // oscuro FIJO, no es un token de tema). Sobre el fondo oscuro de `.card` queda // gris-sobre-gris casi invisible (ej: los valores $ de las tarjetas card-stats // en los dashboards de PSP Recaudadora/Home Banking). Mismo criterio que el // resto de textos: pasa a --dm-text. .card-title { color: var(--dm-text) !important; } // Utilidades de fondo claro → superficie oscura .bg-white, .bg-light, .bg-body { background-color: var(--dm-surface) !important; color: var(--dm-text); } // Fondos grises claros puestos INLINE (style="background:#f8f9fa" / #e9ecef). // El !important le gana al estilo inline; cubre cajas sueltas de varios módulos // (ej: listas de docs/media/menú en whatsapp/configuracion/bots.vue). Va ACÁ // arriba para que cualquier regla específica posterior (ej: .ws-conv-list) gane el empate. [style*="background:#f8f9fa"], [style*="background: #f8f9fa"], [style*="background-color:#f8f9fa"], [style*="background-color: #f8f9fa"], [style*="background:#e9ecef"], [style*="background: #e9ecef"], [style*="background-color:#e9ecef"], [style*="background-color: #e9ecef"], // Tints claros inline de las cards de adjunto/preview en WhatsApp conversaciones // (PDF #fef2f2, doc azul #eff6ff, ok verde #f0fdf4, nota interna #fef3c7) — el // ícono/acento de color se conserva; solo se oscurece el fondo. [style*="background:#fef2f2"], [style*="background: #fef2f2"], [style*="background:#eff6ff"], [style*="background: #eff6ff"], [style*="background:#f0fdf4"], [style*="background: #f0fdf4"] { background-color: var(--dm-surface-2) !important; } // Contenedores/paneles con fondo claro PROPIO (inline o de componente). // .container-fluid suele ser un wrapper de layout: transparente para mostrar el fondo oscuro. .container-fluid { background-color: transparent !important; } // Home / dashboard (componente con gradientes claros) .dashboard-home-hero { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } .dashboard-home-hero .shape { opacity: .10 !important; } .feature-item { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } .feature-item * { color: var(--dm-text) !important; } // Amplio: matar gradientes claros en headers (modales/cards con gradiente propio) .card-header, .modal-header { background-image: none !important; } // Selector de empresa (modal usado en TODO el sistema) .search-container { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } .company-item { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } .company-item:hover { background-color: var(--dm-surface) !important; } .company-item, .company-item * { color: var(--dm-text) !important; } .company-item small, .company-item .text-muted { color: var(--dm-muted) !important; } // Tablas .table { background-color: transparent !important; color: var(--dm-text); border-color: var(--dm-border); } .table thead th, .thead-light th, .table th { background-color: var(--dm-surface-2) !important; // new_css_2025 pinta `.table th` con un linear-gradient claro (gray-100→50); // es un background-image que se dibuja ENCIMA del background-color, por eso // hay que anularlo o el header queda claro igual. background-image: none !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } .table td, .table th { border-color: var(--dm-border) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); } .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .06); color: var(--dm-text); } .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--dm-border) !important; } // new_css_2025 aplica striping de filas PARES y HOVER a TODAS las .table (no // solo .table-striped): even → rgba(248,250,252,.5) y :hover → gray-50, ambos // CLAROS. Con el texto claro del dark quedaban claro-sobre-claro (ilegible en // reposo y al pasar el mouse). Los llevamos a superficies oscuras. .table tbody tr:nth-child(even), .table tbody tr:nth-child(even) > td, .table tbody tr:nth-child(even) > th { background-color: var(--dm-surface-2) !important; } .table tbody tr:hover, .table tbody tr:hover > td, .table tbody tr:hover > th, .table tbody tr:nth-child(even):hover, .table tbody tr:nth-child(even):hover > td, .table tbody tr:nth-child(even):hover > th { background-color: #2b3340 !important; transform: none !important; } // Variantes contextuales de Bootstrap (fondos pastel claros) → tints oscuros. // Misma especificidad que el striping de arriba y DESPUÉS en el archivo: // una fila par con variante conserva su color de estado. .table tbody tr.table-primary, .table tbody tr.table-primary > td, .table tbody tr.table-primary > th, .table tbody td.table-primary { background-color: rgba(37, 99, 235, .18) !important; color: var(--dm-text) !important; } .table tbody tr.table-success, .table tbody tr.table-success > td, .table tbody tr.table-success > th, .table tbody td.table-success { background-color: rgba(16, 185, 129, .15) !important; color: var(--dm-text) !important; } .table tbody tr.table-warning, .table tbody tr.table-warning > td, .table tbody tr.table-warning > th, .table tbody td.table-warning { background-color: rgba(245, 158, 11, .15) !important; color: var(--dm-text) !important; } .table tbody tr.table-danger, .table tbody tr.table-danger > td, .table tbody tr.table-danger > th, .table tbody td.table-danger { background-color: rgba(239, 68, 68, .15) !important; color: var(--dm-text) !important; } .table tbody tr.table-info, .table tbody tr.table-info > td, .table tbody tr.table-info > th, .table tbody td.table-info { background-color: rgba(6, 182, 212, .15) !important; color: var(--dm-text) !important; } .table tbody tr.table-secondary, .table tbody tr.table-secondary > td, .table tbody tr.table-secondary > th, .table tbody tr.table-light, .table tbody tr.table-light > td, .table tbody tr.table-light > th, .table tbody tr.table-active, .table tbody tr.table-active > td, .table tbody tr.table-active > th { background-color: rgba(255, 255, 255, .06) !important; color: var(--dm-text) !important; } // Formularios .form-control, .custom-select, select, textarea, input, .input-group-text { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } .form-control::placeholder { color: var(--dm-muted); } .form-control:focus { border-color: var(--primary, #2563eb) !important; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .35) !important; } // Checkboxes / radios (BootstrapVue custom-control). El texto va crisp claro y // la CAJITA (::before) —que Bootstrap pinta #fff— pasa a superficie oscura, que // es lo que "lavaba" listas como la de empresas del bot. Marcado = azul primary // (Bootstrap ya lo pinta). Deshabilitado = muted visible (no #6c757d apagado). .custom-control-label { color: var(--dm-text) !important; } .custom-control-label::before, .custom-checkbox .custom-control-label::before, .custom-radio .custom-control-label::before { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } .custom-control-input:disabled ~ .custom-control-label, .custom-control-input[disabled] ~ .custom-control-label { color: var(--dm-muted) !important; } .custom-control-input:disabled ~ .custom-control-label::before, .custom-control-input[disabled] ~ .custom-control-label::before { background-color: var(--dm-surface) !important; } // Cajas de lista con scroll (`.border.rounded` + overflow) que quedaban con // fondo claro y, sobre el texto ya claro del dark, se volvían ilegibles. // Ej.: lista de empresas del bot en whatsapp/configuracion/funciones.vue. .dm-scroll-list { background-color: var(--dm-surface-2) !important; } // Checkboxes / radios / switches custom de Bootstrap (b-form-checkbox, etc.): // la cajita/el track es el ::before del label y es BLANCO de fábrica (el input // real está oculto, así que ni color-scheme ni la regla de `input` lo afectan). .custom-control-label::before { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary, #2563eb) !important; border-color: var(--primary, #2563eb) !important; } .custom-control-input:disabled ~ .custom-control-label::before { background-color: #171b21 !important; } .custom-switch .custom-control-label::after { background-color: var(--dm-muted) !important; } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff !important; } // Autofill de Chrome/Edge: pinta el input claro con texto oscuro; se tapa // con un box-shadow interno del color de superficie (técnica estándar). input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--dm-surface-2) inset !important; -webkit-text-fill-color: var(--dm-text) !important; caret-color: var(--dm-text); } // Pistas claras de fábrica: sliders y barras de progreso .custom-range::-webkit-slider-runnable-track { background-color: var(--dm-border) !important; } .custom-range::-moz-range-track { background-color: var(--dm-border) !important; } .progress { background: var(--dm-surface-2) !important; } // Hovers/fondos claros de Bootstrap que faltaban .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } .page-link:hover { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: #fff; } .breadcrumb { background: var(--dm-surface-2) !important; } .breadcrumb-item, .breadcrumb-item a { color: var(--dm-muted); } .breadcrumb-item.active { color: var(--dm-text); } // Readonly/disabled — espejo de new_css_2025.css L9333 (le gana con el prefijo del tema). // background-image:none mata las stripes claras del original. .form-control:disabled, .form-control[readonly], .form-control-readonly, .taxes-form-input[readonly], input[readonly], textarea[readonly], .b-form-input[readonly] { background-color: #171b21 !important; background-image: none !important; color: var(--dm-muted) !important; border-color: var(--dm-border) !important; } // ── Selects modernos de new_css_2025.css (L11888+) — sus reglas con !important // le ganaban al override genérico. Espejo exacto + flecha SVG clara // (la original usa stroke #343a40, invisible sobre fondo oscuro). ── .form-control.custom-select, .b-form-select, select.form-control, .modern-select { background-color: var(--dm-surface-2) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa4b2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } .form-control.custom-select:focus, .b-form-select:focus, select.form-control:focus, .modern-select:focus { background-color: var(--dm-surface-2) !important; } .form-control.custom-select:hover:not(:focus), .b-form-select:hover:not(:focus), select.form-control:hover:not(:focus), .modern-select:hover:not(:focus) { border-color: var(--dm-border) !important; } .form-control.custom-select:disabled, .b-form-select:disabled, select.form-control:disabled, .modern-select:disabled, .custom-select:disabled, select:disabled, .b-form-select[readonly], select[readonly] { background-color: #171b21 !important; color: var(--dm-muted) !important; border-color: var(--dm-border) !important; } // Options (el original las fuerza a white !important) select option, select[multiple] option, .form-control.custom-select option, .b-form-select option, .modern-select option { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; } .b-form-select[multiple], .custom-select[multiple], select[multiple].form-control, select[multiple] { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } // ── File inputs (b-form-file) — sin cobertura previa; el "Browse" con // gradiente azul se conserva. ── .b-form-file label { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } .b-form-file label .form-file-text { color: var(--dm-muted) !important; } .b-form-file .custom-file-label, .custom-file-label { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } // Select2 .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-dropdown, .select2-search__field { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dm-text) !important; } .select2-results__option { color: var(--dm-text); background-color: var(--dm-surface); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary, #2563eb) !important; color: #fff !important; } // Dropdowns (bootstrap + custom del header) .dropdown-item, .custom-dropdown-menu li a, .custom-dropdown-menu li button { color: var(--dm-text); } .dropdown-item:hover, .dropdown-item:focus, .custom-dropdown-menu li a:hover { background-color: var(--dm-surface-2); color: #fff; } .dropdown-divider { border-color: var(--dm-border); } // ── Botones: variantes CLARAS/NEUTRAS → dark. Las de color (primary/success/ // danger/warning/info) mantienen su color; el texto blanco ya contrasta. ── .btn-default, .btn-light, .btn-white, .btn-outline-light, .btn-secondary.btn-white, .btn.bg-white, .btn.bg-light { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } .btn-default:hover, .btn-light:hover, .btn-white:hover, .btn-outline-light:hover { background-color: var(--dm-border) !important; color: #fff !important; } // Botones outline neutros: texto claro + borde oscuro + fondo transparente .btn-outline-secondary, .btn-outline-dark, .btn-outline-primary { background-color: transparent !important; border-color: var(--dm-border) !important; } .btn-outline-secondary, .btn-outline-dark { color: var(--dm-text) !important; } .btn-outline-secondary:hover, .btn-outline-dark:hover { background-color: var(--dm-surface-2) !important; color: #fff !important; } .btn-link { color: #6ea8fe !important; } // Botones deshabilitados. Antes: opacity .45 → los variants de COLOR (ej. // "Agregar menú" .btn-info) quedaban como fantasmas lavados e ilegibles. Ahora // los variants SÓLIDOS pasan a un chip oscuro neutro (claramente "no disponible") // y el resto (outline/link) solo baja un poco de opacidad, sin desaparecer. .btn:disabled, .btn.disabled { opacity: .6 !important; } .btn-primary:disabled, .btn-info:disabled, .btn-success:disabled, .btn-danger:disabled, .btn-warning:disabled, .btn-secondary:disabled, .btn-primary.disabled, .btn-info.disabled, .btn-success.disabled, .btn-danger.disabled, .btn-warning.disabled, .btn-secondary.disabled { opacity: 1 !important; background-color: var(--dm-surface-2) !important; background-image: none !important; border-color: var(--dm-border) !important; color: var(--dm-muted) !important; } // Botones de grupo/toggle activos .btn-group-toggle .btn.active, .btn-group > .btn.active { background-color: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } .close { color: var(--dm-text); text-shadow: none; opacity: .8; } .close:hover { color: #fff; } // Bordes utilitarios .border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--dm-border) !important; } // Tabs / pills .nav-tabs { border-color: var(--dm-border); } .nav-tabs .nav-link { color: var(--dm-muted); } .nav-tabs .nav-link.active { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-surface) !important; } // Code / pre pre, code, kbd { background-color: var(--dm-surface-2) !important; color: #e5e9f0; border-color: var(--dm-border); } // ── DataTables (jQuery / dt-bootstrap4) ── .dataTables_wrapper, .dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_paginate { color: var(--dm-text) !important; } .dataTables_paginate .paginate_button { color: var(--dm-text) !important; } .dataTables_paginate .paginate_button.current { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: #fff !important; } // La tabla y su header table.dataTable { background-color: transparent !important; } table.dataTable thead th, table.dataTable thead td { background-color: var(--dm-surface-2) !important; background-image: none !important; // mata el gradient claro de new_css `.table th` color: var(--dm-text) !important; border-color: var(--dm-border) !important; } // Fila de totales (tfoot). El gradiente claro lo fija cada componente en su //