/*========================================================================== MODO NOCTURNO — app/views/css/tema-oscuro.css ------------------------------------------------------------------------ Todo está bajo [data-theme="dark"] (lo pone index.php en según usuario.usuario_tema / $_SESSION['tema']). En modo claro esta hoja es inerte. NO se toca --brand-primary ni sus derivadas (--brand-primary-dark/-light/ -contrast): el color de marca por sucursal se ve IGUAL que en claro (navbar, botones is-info/is-link, menú activo, paginación, foco de inputs). Esta hoja solo reescribe SUPERFICIES, TEXTO y BORDES. Los style="..." en línea (muy repetidos en las vistas) se cubren con selectores de atributo al final del archivo. ==========================================================================*/ :root[data-theme="dark"]{ --bg: #0f1420; --surface: #1a2130; --surface-2: #212a3b; --surface-3: #2a3446; --border: #313d52; --border-soft: #283142; --text: #e5e9f0; --text-muted: #9aa5b8; --text-dim: #6b7688; --shadow: rgba(0,0,0,.45); /* tint de marca en oscuro (para variantes is-light) — respaldo rgba + color-mix */ --brand-tint: rgba(63,81,181,.18); --brand-tint: color-mix(in srgb, var(--brand-primary) 20%, var(--surface)); color-scheme: dark; } /*========================= SHELL =========================*/ [data-theme="dark"] body, [data-theme="dark"] html{ background-color: var(--bg); color: var(--text); } [data-theme="dark"] .navLateral-body, [data-theme="dark"] .pageContent{ background-color: var(--bg); color: var(--text); } [data-theme="dark"] .navLateral{ border-right-color: var(--border) !important; } [data-theme="dark"] .navLateral-body-tittle-menu, [data-theme="dark"] .sub-menu-options, [data-theme="dark"] .btn-subMenu-show + .sub-menu-options{ background-color: var(--surface-2); } [data-theme="dark"] .btn-subMenu-show{ background-color: rgba(255,255,255,.05); } [data-theme="dark"] .menu-principal li a{ color: var(--text); } [data-theme="dark"] .divider-menu-h{ border-top-color: var(--border); } /* .navBar y .navLateral-body-logo se quedan con --brand-primary (a propósito): son FONDO con texto blanco fijo, se leen igual sin importar qué tan oscuro sea el color de marca. Los de abajo sí usan --brand-primary como TEXTO/ acento sobre el fondo oscuro del menú lateral (etiqueta de sección, ítem con submenú abierto, hover) — ahí, si la sucursal eligió un color muy oscuro, el texto se vuelve ilegible (oscuro sobre oscuro). Se usa la variante --brand-primary-on-dark (colorLegibleSobreOscuro(), mainModel.php) que aclara el color solo lo necesario para que se siga leyendo; si el color ya es claro, es idéntica a --brand-primary. 2026-09-18. */ [data-theme="dark"] .navLateral-section-label{ color: var(--brand-primary-on-dark) !important; } [data-theme="dark"] .navLateral-section-label::before{ background: var(--brand-primary-on-dark) !important; } [data-theme="dark"] .menu-principal li a:hover{ color: var(--brand-primary-on-dark) !important; } [data-theme="dark"] .btn-subMenu-show .navLateral-body-cl, [data-theme="dark"] .btn-subMenu-show .navLateral-body-cr{ color: var(--brand-primary-on-dark) !important; } [data-theme="dark"] .sub-menu-options li a:hover{ border-left-color: var(--brand-primary-on-dark) !important; } /* Scrollbars */ [data-theme="dark"] .scroll::-webkit-scrollbar-thumb{ background: var(--surface-3); } [data-theme="dark"] .scroll::-webkit-scrollbar-track{ background: var(--bg); } [data-theme="dark"] ::-webkit-scrollbar{ width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track{ background: var(--surface); } /*===================== BULMA — CONTENEDORES =====================*/ [data-theme="dark"] .box{ background-color: var(--surface); color: var(--text); box-shadow: 0 2px 10px var(--shadow), 0 0 0 1px var(--border-soft); } [data-theme="dark"] .card, [data-theme="dark"] .card-content, [data-theme="dark"] .panel, [data-theme="dark"] .panel-block, [data-theme="dark"] .dropdown-content, [data-theme="dark"] .modal-card-body, [data-theme="dark"] .modal-card-foot, [data-theme="dark"] .menu-list a{ background-color: var(--surface); color: var(--text); } [data-theme="dark"] .card{ box-shadow: 0 2px 10px var(--shadow); } [data-theme="dark"] .modal-card-head{ background-color: var(--surface-2); border-bottom-color: var(--border); } [data-theme="dark"] .modal-card-foot{ border-top-color: var(--border); } [data-theme="dark"] .card-header{ box-shadow: 0 1px 2px var(--shadow); } [data-theme="dark"] .card-header-title{ color: var(--text); } [data-theme="dark"] .panel-heading{ background-color: var(--surface-2); color: var(--text); } [data-theme="dark"] .menu-list a:hover{ background-color: var(--surface-2); color: var(--text); } [data-theme="dark"] .dropdown-item{ color: var(--text); } [data-theme="dark"] .dropdown-item:hover{ background-color: var(--surface-2); } [data-theme="dark"] .modal-background{ background-color: rgba(0,0,0,.75); } /*===================== BULMA — TIPOGRAFÍA =====================*/ [data-theme="dark"] .title, [data-theme="dark"] .subtitle strong, [data-theme="dark"] .label, [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3, [data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6, [data-theme="dark"] strong, [data-theme="dark"] .content, [data-theme="dark"] .content strong{ color: var(--text); } [data-theme="dark"] .subtitle, [data-theme="dark"] .has-text-grey, [data-theme="dark"] .has-text-grey-dark, [data-theme="dark"] .has-text-grey-light{ color: var(--text-muted) !important; } [data-theme="dark"] .help, [data-theme="dark"] .has-text-grey-lighter{ color: var(--text-dim) !important; } [data-theme="dark"] .has-text-black, [data-theme="dark"] .has-text-dark{ color: var(--text) !important; } [data-theme="dark"] a{ color: #7ea8ff; } [data-theme="dark"] hr{ background-color: var(--border); } [data-theme="dark"] code, [data-theme="dark"] pre{ background-color: var(--surface-2); color: #e0c6a0; } [data-theme="dark"] .tag:not(.is-info):not(.is-link):not(.is-primary):not(.is-success):not(.is-warning):not(.is-danger):not(.is-dark){ background-color: var(--surface-3); color: var(--text); } /*===================== BULMA — FORMULARIOS =====================*/ [data-theme="dark"] .input, [data-theme="dark"] .textarea, [data-theme="dark"] .select select{ background-color: var(--surface-3); border-color: var(--border); color: var(--text); } [data-theme="dark"] .input::placeholder, [data-theme="dark"] .textarea::placeholder{ color: var(--text-dim); } [data-theme="dark"] .input[readonly], [data-theme="dark"] .textarea[readonly], [data-theme="dark"] .input[disabled], [data-theme="dark"] .select select[disabled]{ background-color: var(--surface-2); color: var(--text-muted); } [data-theme="dark"] .select:not(.is-multiple):not(.is-loading)::after{ border-color: var(--text-muted); } [data-theme="dark"] .select select option{ background: var(--surface); color: var(--text); } [data-theme="dark"] .checkbox:hover, [data-theme="dark"] .radio:hover{ color: var(--text); } [data-theme="dark"] .file-cta{ background-color: var(--surface-2); border-color: var(--border); color: var(--text); } [data-theme="dark"] .file-name{ background-color: var(--surface-3); border-color: var(--border); color: var(--text); } /* botón "gris" neutro de Bulma (sin color) */ [data-theme="dark"] .button:not(.is-info):not(.is-link):not(.is-primary):not(.is-success):not(.is-warning):not(.is-danger):not(.is-text):not(.is-white){ background-color: var(--surface-3); border-color: var(--border); color: var(--text); } [data-theme="dark"] .button:not(.is-info):not(.is-link):not(.is-primary):not(.is-success):not(.is-warning):not(.is-danger):not(.is-text):not(.is-white):hover{ background-color: var(--surface-2); border-color: var(--text-dim); color: var(--text); } [data-theme="dark"] .button.is-light:not(.is-info):not(.is-link):not(.is-success):not(.is-warning):not(.is-danger){ background-color: var(--surface-3); color: var(--text); } [data-theme="dark"] .button[disabled]{ background-color: var(--surface-2); border-color: var(--border-soft); color: var(--text-dim); } /* variantes is-light DE MARCA: el tinte claro se ve mal en oscuro -> tinte oscuro del mismo tono */ [data-theme="dark"] .button.is-info.is-light, [data-theme="dark"] .button.is-link.is-light, [data-theme="dark"] .tag.is-info.is-light, [data-theme="dark"] .tag.is-link.is-light, [data-theme="dark"] .notification.is-info.is-light, [data-theme="dark"] .notification.is-link.is-light, [data-theme="dark"] .message.is-info, [data-theme="dark"] .message.is-link{ background-color: var(--brand-tint) !important; color: var(--text) !important; } [data-theme="dark"] .message.is-info .message-body, [data-theme="dark"] .message.is-link .message-body{ background-color: var(--brand-tint) !important; color: var(--text) !important; border-color: var(--brand-primary) !important; } /*===================== TABLAS + CEBRA ===================== Mismos selectores que estilos.css (L392-447) pero prefijados con [data-theme="dark"] para ganar por especificidad. */ [data-theme="dark"] .table{ background-color: transparent; color: var(--text); } [data-theme="dark"] .table th, [data-theme="dark"] .table td{ border-color: var(--border-soft); color: var(--text); } [data-theme="dark"] .table thead th, [data-theme="dark"] .table tfoot th{ color: var(--text-muted); border-color: var(--border); } [data-theme="dark"] .table thead td{ color: var(--text-muted); } [data-theme="dark"] .table tbody tr:nth-child(odd):not(.is-selected):not(.row-selected), [data-theme="dark"] .tabla-excel tbody tr:nth-child(odd):not(.is-selected):not(.row-selected), [data-theme="dark"] .tg-table tbody tr:nth-child(odd):not(.is-selected):not(.row-selected), [data-theme="dark"] .denominaciones tbody tr:nth-child(odd):not(.is-selected):not(.row-selected), [data-theme="dark"] .list-row-item:nth-child(odd):not(.is-selected):not(.row-selected){ background-color: var(--surface); } [data-theme="dark"] .table tbody tr:nth-child(even):not(.is-selected):not(.row-selected), [data-theme="dark"] .table.is-striped tbody tr:nth-child(even):not(.is-selected):not(.row-selected), [data-theme="dark"] .tabla-excel tbody tr:nth-child(even):not(.is-selected):not(.row-selected), [data-theme="dark"] .tg-table tbody tr:nth-child(even):not(.is-selected):not(.row-selected), [data-theme="dark"] .denominaciones tbody tr:nth-child(even):not(.is-selected):not(.row-selected), [data-theme="dark"] .list-row-item:nth-child(even):not(.is-selected):not(.row-selected){ background-color: var(--surface-2); } /* hover: tinte de marca sobre superficie oscura (respaldo rgba + color-mix) */ [data-theme="dark"] .table tbody tr:hover:not(.is-selected):not(.row-selected), [data-theme="dark"] .tabla-excel tbody tr:hover:not(.is-selected):not(.row-selected), [data-theme="dark"] .tg-table tbody tr:hover:not(.is-selected):not(.row-selected), [data-theme="dark"] .denominaciones tbody tr:hover:not(.is-selected):not(.row-selected), [data-theme="dark"] .list-row-item:hover:not(.is-selected):not(.row-selected){ background-color: rgba(63,81,181,.28) !important; background-color: color-mix(in srgb, var(--brand-primary) 30%, var(--surface)) !important; } [data-theme="dark"] .table tbody tr.row-selected, [data-theme="dark"] .tabla-excel tbody tr.row-selected, [data-theme="dark"] .tg-table tbody tr.row-selected, [data-theme="dark"] .denominaciones tbody tr.row-selected, [data-theme="dark"] .list-row-item.row-selected{ background-color: var(--surface-3) !important; } [data-theme="dark"] .table tbody tr.row-selected:hover, [data-theme="dark"] .tabla-excel tbody tr.row-selected:hover, [data-theme="dark"] .tg-table tbody tr.row-selected:hover, [data-theme="dark"] .denominaciones tbody tr.row-selected:hover, [data-theme="dark"] .list-row-item.row-selected:hover{ background-color: #37425a !important; } [data-theme="dark"] .table tbody tr.is-selected{ background-color: var(--brand-primary); color: var(--brand-primary-contrast); } /* Helpers has-background-*-light de Bulma (fondo casi blanco con !important): sobre el texto claro del tema quedan ilegibles ("todo blanco"). Caso típico: la última fila agregada al carrito del punto de venta (saleNew), que lleva has-background-info-light. Se cambian a un tinte oscuro del mismo tono. */ [data-theme="dark"] .has-background-info-light, [data-theme="dark"] .has-background-link-light, [data-theme="dark"] .has-background-primary-light, [data-theme="dark"] tr.has-background-info-light td, [data-theme="dark"] tr.has-background-link-light td, [data-theme="dark"] tr.has-background-primary-light td{ background-color: var(--brand-tint) !important; color: var(--text) !important; } [data-theme="dark"] .has-background-warning-light, [data-theme="dark"] tr.has-background-warning-light td{ background-color: rgba(160,107,53,.18) !important; color: #f0d9b6 !important; } [data-theme="dark"] .has-background-danger-light, [data-theme="dark"] tr.has-background-danger-light td{ background-color: rgba(177,72,63,.18) !important; color: #f2c3bd !important; } [data-theme="dark"] .has-background-success-light, [data-theme="dark"] tr.has-background-success-light td{ background-color: rgba(47,125,82,.18) !important; color: #b8e6cc !important; } [data-theme="dark"] .has-background-light, [data-theme="dark"] .has-background-white, [data-theme="dark"] .has-background-white-bis, [data-theme="dark"] .has-background-white-ter{ background-color: var(--surface-2) !important; color: var(--text) !important; } /*============ NOTIFICATION / MESSAGE (no de marca) ============*/ [data-theme="dark"] .notification:not(.is-info):not(.is-link):not(.is-primary):not(.is-success):not(.is-warning):not(.is-danger){ background-color: var(--surface-2); color: var(--text); } [data-theme="dark"] .message:not(.is-info):not(.is-link) .message-body{ background-color: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] .message.is-warning .message-body{ background-color: rgba(160,107,53,.14); } [data-theme="dark"] .message.is-danger .message-body{ background-color: rgba(177,72,63,.14); } [data-theme="dark"] .message.is-success .message-body{ background-color: rgba(47,125,82,.14); } /* variantes is-light de estado */ [data-theme="dark"] .notification.is-warning.is-light{ background-color: rgba(160,107,53,.16); color: #f0d9b6; } [data-theme="dark"] .notification.is-danger.is-light{ background-color: rgba(177,72,63,.16); color: #f2c3bd; } [data-theme="dark"] .notification.is-success.is-light{ background-color: rgba(47,125,82,.16); color: #b8e6cc; } /* tabs / breadcrumb */ [data-theme="dark"] .tabs a{ color: var(--text-muted); border-bottom-color: var(--border); } [data-theme="dark"] .tabs li.is-active a{ color: var(--brand-primary); border-bottom-color: var(--brand-primary); } [data-theme="dark"] .tabs ul{ border-bottom-color: var(--border); } /* progress / hr / loader overlay */ [data-theme="dark"] progress{ background-color: var(--surface-3); } /*===================== SWEETALERT2 =====================*/ [data-theme="dark"] .swal-tema.swal2-popup{ background: var(--surface); } [data-theme="dark"] .swal-tema .swal2-title{ color: var(--text); } [data-theme="dark"] .swal-tema .swal2-html-container{ color: var(--text-muted); } [data-theme="dark"] .swal-tema .swal2-html-container strong{ color: var(--text); } [data-theme="dark"] .swal-tema-btn--cancelar.swal2-styled{ background-color: var(--surface-3) !important; color: var(--text) !important; } [data-theme="dark"] .swal-tema-btn--cancelar.swal2-styled:hover{ background-color: var(--surface-2) !important; } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea, [data-theme="dark"] .swal2-select{ background: var(--surface-3) !important; color: var(--text) !important; border-color: var(--border) !important; box-shadow: none !important; } [data-theme="dark"] .swal2-input::placeholder, [data-theme="dark"] .swal2-textarea::placeholder{ color: var(--text-dim); } [data-theme="dark"] .swal2-input-label, [data-theme="dark"] .swal2-validation-message{ color: var(--text-muted); } [data-theme="dark"] .swal2-validation-message{ background: var(--surface-2); } [data-theme="dark"] .swal-tema .swal2-html-container [style*="border-bottom:1px solid #f0f2f5"]{ border-bottom-color: var(--border) !important; } /*===================== BUSCADOR GLOBAL (navbar) =====================*/ [data-theme="dark"] .gs-box{ background: var(--surface-3); } [data-theme="dark"] .gs-box:focus-within{ border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(63,81,181,.30); } [data-theme="dark"] .gs-input{ color: var(--text); } [data-theme="dark"] .gs-input::placeholder, [data-theme="dark"] .gs-icon{ color: var(--text-dim); } [data-theme="dark"] .gs-clear{ color: var(--text-dim); } [data-theme="dark"] .gs-clear:hover{ background: var(--surface-2); color: var(--text); } [data-theme="dark"] .gs-filters-track{ background: var(--surface-2); box-shadow: 0 6px 16px var(--shadow); } [data-theme="dark"] .gs-filter-slider{ background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.4); } [data-theme="dark"] .gs-filter-pill{ color: var(--text-muted); } [data-theme="dark"] .gs-filter-pill.is-active{ color: var(--text); } [data-theme="dark"] .gs-results{ background: var(--surface); box-shadow: 0 14px 32px var(--shadow), 0 0 0 1px var(--border); } [data-theme="dark"] .gs-group + .gs-group{ border-top-color: var(--border-soft); } [data-theme="dark"] .gs-group-title{ color: var(--text-dim); } [data-theme="dark"] .gs-item:hover, [data-theme="dark"] .gs-item.is-active{ background: var(--surface-2); } [data-theme="dark"] .gs-item-title{ color: var(--text); } [data-theme="dark"] .gs-item-subtitle{ color: var(--text-dim); } [data-theme="dark"] .gs-item-lab{ color: var(--text-dim); } [data-theme="dark"] .gs-chip{ background: var(--surface-3); color: var(--text-muted); } [data-theme="dark"] .gs-chip--stock{ background: rgba(63,81,181,.22); color: #cdd8ff; } [data-theme="dark"] .gs-item-icon{ background: var(--surface-3); } [data-theme="dark"] .gs-empty{ color: var(--text-dim); } /* selector de sucursal del navbar (dropdown nativo) */ [data-theme="dark"] .navBar-sucursal-select select option{ color: var(--text); background: var(--surface); } /* campana de notificaciones */ [data-theme="dark"] .nt-bell{ background: rgba(255,255,255,.12); } [data-theme="dark"] .nt-bell:hover{ background: rgba(255,255,255,.20); } [data-theme="dark"] .nt-badge{ box-shadow: 0 0 0 2px var(--surface); } [data-theme="dark"] .nt-panel{ background: var(--surface); color: var(--text); box-shadow: 0 14px 32px var(--shadow), 0 0 0 1px var(--border); } [data-theme="dark"] .nt-panel-head{ border-bottom-color: var(--border-soft); } [data-theme="dark"] .nt-item{ border-bottom-color: var(--border-soft); } [data-theme="dark"] .nt-item:hover{ background: var(--surface-2); } [data-theme="dark"] .nt-item.nt-nuevo{ background: rgba(63,81,181,.20); } [data-theme="dark"] .nt-item-ic{ background: rgba(63,81,181,.24); color: #cdd8ff; } [data-theme="dark"] .nt-item-s, [data-theme="dark"] .nt-empty{ color: var(--text-dim); } /* Contrarresta el re-fijado de color del navbar (especificidad alta) también en oscuro */ [data-theme="dark"] .navBar-notif-li .nt-panel, [data-theme="dark"] .navBar-notif-li .nt-panel a, [data-theme="dark"] .navBar-notif-li .nt-item, [data-theme="dark"] .navBar-notif-li .nt-item .nt-item-t, [data-theme="dark"] .navBar-notif-li .nt-panel-head{ color: var(--text); } [data-theme="dark"] .navBar-notif-li .nt-item .nt-item-s{ color: var(--text-dim); } [data-theme="dark"] .nt-perm{ background: var(--surface-2); color: var(--text-muted); border-top-color: var(--border-soft); } [data-theme="dark"] .nt-toast{ background: var(--surface); color: var(--text); box-shadow: 0 10px 30px var(--shadow); } [data-theme="dark"] .nt-toast-s{ color: var(--text-dim); } /*===================== DASHBOARD ===================== Solo se redefinen sus tokens de superficie/texto; los gradientes de KPI (--dash-blue-1 …) se dejan vívidos. */ [data-theme="dark"] .dash-wrap{ --dash-ink: var(--text); --dash-muted: var(--text-muted); --dash-border: var(--border); --dash-bg-panel: var(--surface); } [data-theme="dark"] .dash-wrap{ color: var(--text); } /*===================== KARDEX ===================== Tints pálidos por tipo de movimiento -> tint oscuro del mismo tono. */ [data-theme="dark"] .kardex-tabla .kx-entrada{ color:#7fd8a6; } [data-theme="dark"] .kardex-tabla .kx-salida{ color:#eb9c94; } [data-theme="dark"] .kardex-tabla .kx-total-costo{ color:#e0b878; } [data-theme="dark"] .kardex-tabla .kx-total-venta{ color:#8fb6e6; } [data-theme="dark"] .kardex-tabla .kx-saldo{ color:#b7a6e0; } [data-theme="dark"] .kardex-tabla tbody tr:nth-child(odd) .kx-entrada, [data-theme="dark"] .kardex-tabla tbody tr:nth-child(even) .kx-entrada{ background: rgba(47,125,82,.20); } [data-theme="dark"] .kardex-tabla tbody tr:nth-child(odd) .kx-salida, [data-theme="dark"] .kardex-tabla tbody tr:nth-child(even) .kx-salida{ background: rgba(177,72,63,.20); } [data-theme="dark"] .kardex-tabla tbody tr:nth-child(odd) .kx-total-costo, [data-theme="dark"] .kardex-tabla tbody tr:nth-child(even) .kx-total-costo{ background: rgba(160,107,53,.20); } [data-theme="dark"] .kardex-tabla tbody tr:nth-child(odd) .kx-total-venta, [data-theme="dark"] .kardex-tabla tbody tr:nth-child(even) .kx-total-venta{ background: rgba(63,110,168,.20); } [data-theme="dark"] .kardex-tabla tbody tr:nth-child(odd) .kx-saldo, [data-theme="dark"] .kardex-tabla tbody tr:nth-child(even) .kx-saldo{ background: rgba(107,84,152,.22); } [data-theme="dark"] .kardex-tabla thead .kx-entrada{ background: rgba(47,125,82,.30); color:#9fe0ba; } [data-theme="dark"] .kardex-tabla thead .kx-salida{ background: rgba(177,72,63,.30); color:#f0b3ab; } [data-theme="dark"] .kardex-tabla thead .kx-total-costo{ background: rgba(160,107,53,.30); color:#e8c99b; } [data-theme="dark"] .kardex-tabla thead .kx-total-venta{ background: rgba(63,110,168,.30); color:#a9c8ec; } [data-theme="dark"] .kardex-tabla thead .kx-saldo{ background: rgba(107,84,152,.32); color:#c7b7e6; } /*=================================================================== ESTILOS EN LÍNEA (style="...") — patrones repetidos en las vistas. El orden importa: primero fondos/bordes neutros, luego los tints de color, y #fff / #ffffff al FINAL para no pisar los tints. ===================================================================*/ /* fondos gris claro -> superficie 2 */ [data-theme="dark"] [style*="#fafafa"], [data-theme="dark"] [style*="#f5f5f5"], [data-theme="dark"] [style*="#f8fafc"], [data-theme="dark"] [style*="#f1f5f9"], [data-theme="dark"] [style*="#f0f2f5"], [data-theme="dark"] [style*="#f0f2f4"], [data-theme="dark"] [style*="#eef1f4"], [data-theme="dark"] [style*="#eef1f5"], [data-theme="dark"] [style*="#f7f9fc"], [data-theme="dark"] [style*="#fbfbfb"]{ background-color: var(--surface-2) !important; } /* bordes gris claro -> --border */ [data-theme="dark"] [style*="#ededed"], [data-theme="dark"] [style*="#dbdbdb"], [data-theme="dark"] [style*="#e2e8f0"], [data-theme="dark"] [style*="#e1e1e1"], [data-theme="dark"] [style*="#eeeeee"], [data-theme="dark"] [style*="1px solid #eee"], [data-theme="dark"] [style*="1px solid #ddd"], [data-theme="dark"] [style*="#e5e7eb"], [data-theme="dark"] [style*="#e8e8e8"]{ border-color: var(--border) !important; } /* tints pálidos de color -> tint oscuro del mismo tono */ [data-theme="dark"] [style*="#fff5f5"], [data-theme="dark"] [style*="#fbf1f0"], [data-theme="dark"] [style*="#fef2f2"], [data-theme="dark"] [style*="#fee2e2"]{ background-color: rgba(177,72,63,.16) !important; } [data-theme="dark"] [style*="#fffbeb"], [data-theme="dark"] [style*="#fffdf5"], [data-theme="dark"] [style*="#fef9e7"], [data-theme="dark"] [style*="#fdf6e3"], [data-theme="dark"] [style*="#fff8e1"]{ background-color: rgba(160,107,53,.16) !important; } [data-theme="dark"] [style*="#eff6ff"], [data-theme="dark"] [style*="#f0f4ff"], [data-theme="dark"] [style*="#eaf1fb"], [data-theme="dark"] [style*="#eaf6ff"], [data-theme="dark"] [style*="#eef2ff"], [data-theme="dark"] [style*="#e7edf6"]{ background-color: rgba(63,110,168,.16) !important; } [data-theme="dark"] [style*="#f2faf5"], [data-theme="dark"] [style*="#e6efe9"], [data-theme="dark"] [style*="#ecfdf5"], [data-theme="dark"] [style*="#f0fdf4"]{ background-color: rgba(47,125,82,.16) !important; } [data-theme="dark"] [style*="#faf5ff"]{ background-color: rgba(124,58,237,.16) !important; } /* cajas que ya eran de color fuerte (header de modal del kardex, #1f4e79) */ [data-theme="dark"] [style*="background:#1f4e79"], [data-theme="dark"] [style*="background: #1f4e79"]{ background-color: var(--surface-2) !important; } /* blanco -> superficie (AL FINAL) */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background: #ffffff"], [data-theme="dark"] [style*="background-color:#ffffff"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background-color:white"]{ background-color: var(--surface) !important; } /* textos gris oscuro en línea */ [data-theme="dark"] [style*="color:#4a4a4a"], [data-theme="dark"] [style*="color: #4a4a4a"], [data-theme="dark"] [style*="color:#363636"], [data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color: #333"], [data-theme="dark"] [style*="color:#1f2733"], [data-theme="dark"] [style*="color:#5b6572"], [data-theme="dark"] [style*="color:#7a7a7a"]{ color: var(--text) !important; } /*===================== BUSCADOR DE PRODUCTOS / FARMACIAS (bsq-*) ===================== Filas de resultado que arma main.js / las vistas — antes con colores en línea (#1f2937, #94a3b8…) que quedaban invisibles en oscuro. */ [data-theme="dark"] .bsq-row{ background: var(--surface); border-bottom-color: var(--border-soft); } [data-theme="dark"] .bsq-row:hover{ background: var(--surface-2); } [data-theme="dark"] .bsq-lab{ color: var(--text-muted); } [data-theme="dark"] .bsq-name{ color: var(--text); } [data-theme="dark"] .bsq-meta{ color: var(--text-dim); } [data-theme="dark"] .bsq-price{ color: #46d17f; } [data-theme="dark"] .bsq-price-lbl{ color: var(--text-dim); } /* contenedores donde se inyectan esas filas (ids *-resultados-busqueda / *-resultados / *-farmacia-resultados) — que no queden transparentes */ [data-theme="dark"] [id$="-resultados-busqueda"], [data-theme="dark"] [id$="-farmacia-resultados"], [data-theme="dark"] [id$="-cliente-resultados"], [data-theme="dark"] #rfm-farmacia-resultados, [data-theme="dark"] #ep-resultados-busqueda, [data-theme="dark"] #epf-resultados-busqueda, [data-theme="dark"] #ec-resultados-busqueda{ background: var(--surface) !important; border-color: var(--border) !important; } /* fila de producto sin stock (marcarFaltaStock -> clase .tr-sin-stock) */ [data-theme="dark"] .tr-sin-stock{ background: rgba(177,72,63,.22) !important; box-shadow: inset 3px 0 0 #e06a5f; } [data-theme="dark"] .tr-sin-stock td{ color: #f2c3bd !important; } /* fila de producto de REGALO (precio 0) en Recepción de Pedidos Preventista */ [data-theme="dark"] .tr-regalo-recep{ background: rgba(224,138,0,.20) !important; box-shadow: inset 3px 0 0 #e0a83b; } [data-theme="dark"] .tr-regalo-recep td{ color: #f2d9ad !important; } /* fila con posible confusión "cajas" vs "unidades" (marcarPosibleErrorCaja -> .tr-obs-cantidad) */ [data-theme="dark"] .tr-obs-cantidad{ background: rgba(142,68,173,.22) !important; box-shadow: inset 3px 0 0 #b07cd1; } [data-theme="dark"] .tr-obs-cantidad td{ color: #ddc2ee !important; } [data-theme="dark"] .obs-cantidad-caja{ text-decoration-color:#b07cd1 !important; } /*===================== SAFETY-NET: hexes en línea repetidos (v2) ===================== Colores que aparecen en style="..." en varias vistas y no estaban cubiertos. Los de TEXTO necesitan !important (el inline gana por especificidad). */ /* fondos claros extra -> superficie */ [data-theme="dark"] [style*="#f9fafb"], [data-theme="dark"] [style*="#f6f7f9"], [data-theme="dark"] [style*="#f4f6f8"], [data-theme="dark"] [style*="#f3f4f6"], [data-theme="dark"] [style*="#eef2f7"], [data-theme="dark"] [style*="#f0f9ff"], [data-theme="dark"] [style*="#eef3fd"], [data-theme="dark"] [style*="#f7f9fb"]{ background-color: var(--surface-2) !important; } /* bordes claros extra */ [data-theme="dark"] [style*="#f1f5f9"], [data-theme="dark"] [style*="#eef2f7"], [data-theme="dark"] [style*="#dfe3ea"], [data-theme="dark"] [style*="#d7dce3"], [data-theme="dark"] [style*="#cbd5e1"]{ border-color: var(--border) !important; } [data-theme="dark"] [style*="#c4b5fd"]{ border-color: #7c3aed !important; } /* tints azul claro extra */ [data-theme="dark"] [style*="#dbeafe"], [data-theme="dark"] [style*="#bfdbfe"], [data-theme="dark"] [style*="#e0f2fe"], [data-theme="dark"] [style*="#f0f4ff"]{ background-color: rgba(63,110,168,.18) !important; } /* tints verde claro extra */ [data-theme="dark"] [style*="#d1fae5"], [data-theme="dark"] [style*="#dcfce7"], [data-theme="dark"] [style*="#e4efe4"]{ background-color: rgba(47,125,82,.18) !important; } /* TEXTO: grises/oscuros en línea que no estaban -> visibles */ [data-theme="dark"] [style*="color:#1f2937"],[data-theme="dark"] [style*="color: #1f2937"], [data-theme="dark"] [style*="color:#111827"],[data-theme="dark"] [style*="color: #111827"], [data-theme="dark"] [style*="color:#1f2a44"],[data-theme="dark"] [style*="color: #1f2a44"], [data-theme="dark"] [style*="color:#0f172a"],[data-theme="dark"] [style*="color: #0f172a"], [data-theme="dark"] [style*="color:#212121"],[data-theme="dark"] [style*="color: #212121"], [data-theme="dark"] [style*="color:#2d3748"],[data-theme="dark"] [style*="color: #2d3748"], [data-theme="dark"] [style*="color:#374151"],[data-theme="dark"] [style*="color: #374151"]{ color: var(--text) !important; } [data-theme="dark"] [style*="color:#94a3b8"],[data-theme="dark"] [style*="color: #94a3b8"], [data-theme="dark"] [style*="color:#64748b"],[data-theme="dark"] [style*="color: #64748b"], [data-theme="dark"] [style*="color:#6b7280"],[data-theme="dark"] [style*="color: #6b7280"], [data-theme="dark"] [style*="color:#9ca3af"],[data-theme="dark"] [style*="color: #9ca3af"], [data-theme="dark"] [style*="color:#748094"],[data-theme="dark"] [style*="color: #748094"]{ color: var(--text-muted) !important; } /* azules oscuros usados como TEXTO (headers de sección, "check", placeholders) */ [data-theme="dark"] [style*="color:#2563eb"],[data-theme="dark"] [style*="color: #2563eb"], [data-theme="dark"] [style*="color:#1e40af"],[data-theme="dark"] [style*="color: #1e40af"], [data-theme="dark"] [style*="color:#1d4ed8"],[data-theme="dark"] [style*="color: #1d4ed8"], [data-theme="dark"] [style*="color:#1e3a8a"],[data-theme="dark"] [style*="color: #1e3a8a"]{ color: #7ea8ff !important; } /* violeta usado como texto (checkbox "compra mixta") */ [data-theme="dark"] [style*="color:#5b21b6"],[data-theme="dark"] [style*="color: #5b21b6"]{ color: #c4b5fd !important; } /*===================== BLOQUES