/* ===================================================================== ux-moderna-dark.css - Modo Oscuro (overrides de design tokens) Logystix Fulfillment / Velocity Sobrescribe las variables CSS definidas en ux-moderna.css cuando . Toda la UI hereda automaticamente la nueva paleta porque ux-moderna.css usa var(--vel-*) en todas las reglas. Cargar SIEMPRE despues de ux-moderna.css. ===================================================================== */ html[data-theme="dark"] { /* ----- Superficies ----- */ --vel-bg: #0f1419; /* fondo de pagina */ --vel-surface: #1a1f2e; /* cards, sidebar, navbar */ --vel-surface-2: #232938; /* zebras, headers de tabla */ --vel-line: #2d3548; /* bordes */ --vel-line-soft: #242a3a; /* separadores suaves */ /* ----- Neutros (texto) ----- */ --vel-ink-900: #f3f4f6; /* titulos */ --vel-ink-800: #e5e7eb; --vel-ink-700: #d1d5db; /* texto base */ --vel-ink-600: #b3b8c4; --vel-ink-500: #9ca3af; /* secundario */ --vel-ink-400: #6b7280; /* placeholder */ /* ----- Marca: tintes oscuros del naranja Velocity ----- */ --vel-primary-050: #2a1f10; --vel-primary-100: #3a2a15; --vel-primary-200: #4d3a1f; /* --vel-primary se mantiene #f68d1e */ /* ----- Estados semanticos (fondos suaves oscuros) ----- */ --vel-success: #22c55e; --vel-success-bg: #0f2a1a; --vel-danger: #ef4444; --vel-danger-bg: #2a1414; --vel-warning: #f59e0b; --vel-warning-bg: #2a1f0a; --vel-info: #3b82f6; --vel-info-bg: #0f1f3a; /* ----- Sombras mas profundas ----- */ --vel-shadow-xs: 0 1px 2px rgba(0,0,0,.4); --vel-shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3); --vel-shadow: 0 4px 12px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35); --vel-shadow-lg: 0 12px 32px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4); /* ----- Anillo de foco ligeramente mas brillante ----- */ --vel-ring: 0 0 0 3px rgba(246,141,30,.35); color-scheme: dark; } /* --------------------------------------------------------------------- Ajustes especificos para componentes con colores hard-codeados o que necesitan refuerzo en modo oscuro --------------------------------------------------------------------- */ html[data-theme="dark"] body { background-color: var(--vel-bg) !important; color: var(--vel-ink-700); } /* Shell NobleUI */ html[data-theme="dark"] .main-wrapper, html[data-theme="dark"] .page-wrapper, html[data-theme="dark"] .page-content { background-color: var(--vel-bg); color: var(--vel-ink-700); } html[data-theme="dark"] .sidebar, html[data-theme="dark"] .sidebar .sidebar-header, html[data-theme="dark"] .sidebar .sidebar-body, html[data-theme="dark"] .navbar { background: var(--vel-surface) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .sidebar .sidebar-header { border-bottom-color: var(--vel-line) !important; } html[data-theme="dark"] .sidebar .sidebar-header .sidebar-toggler span { background: var(--vel-ink-500) !important; } html[data-theme="dark"] .sidebar .nav-link, html[data-theme="dark"] .navbar .nav-link, html[data-theme="dark"] .sidebar .link-title, html[data-theme="dark"] .sidebar .link-icon { color: var(--vel-ink-700) !important; } html[data-theme="dark"] .sidebar .nav-link:hover, html[data-theme="dark"] .sidebar .nav-link:hover .link-title, html[data-theme="dark"] .sidebar .nav-link:hover .link-icon { background: var(--vel-primary-100) !important; color: var(--vel-primary) !important; } html[data-theme="dark"] .sidebar .nav-link:hover svg, html[data-theme="dark"] .sidebar .nav-link:hover i { color: var(--vel-primary) !important; stroke: var(--vel-primary) !important; } /* Item activo: SUTIL. El sidebar marca VARIOS nav-item como .active a la vez (NobleUI + Yii), por eso evitamos fondo naranja - se "ensucia" el menu. Igual estrategia que ux-moderna.css en modo claro: solo bold + texto blanco. */ html[data-theme="dark"] .sidebar .nav-item.active > .nav-link, html[data-theme="dark"] .sidebar .nav-link.active { background: transparent !important; color: #ffffff !important; font-weight: 600 !important; } html[data-theme="dark"] .sidebar .nav-item.active > .nav-link .link-title, html[data-theme="dark"] .sidebar .nav-link.active .link-title { color: #ffffff !important; font-weight: 600 !important; } html[data-theme="dark"] .sidebar .nav-item.active > .nav-link .link-icon, html[data-theme="dark"] .sidebar .nav-link.active .link-icon, html[data-theme="dark"] .sidebar .nav-item.active > .nav-link svg, html[data-theme="dark"] .sidebar .nav-item.active > .nav-link i { color: var(--vel-ink-700) !important; stroke: var(--vel-ink-700) !important; } html[data-theme="dark"] .sidebar .nav-item.nav-category, html[data-theme="dark"] .sidebar .sidebar-body .nav .nav-item.nav-category { color: #e5e7eb !important; opacity: 0.85; } /* Navbar superior: contenido, search-form y sus add-ons */ html[data-theme="dark"] .navbar .navbar-content, html[data-theme="dark"] .navbar .search-form, html[data-theme="dark"] .navbar .search-form .input-group, html[data-theme="dark"] .navbar .search-form .input-group .form-control, html[data-theme="dark"] .navbar .search-form .input-group .input-group-prepend .input-group-text, html[data-theme="dark"] .navbar .search-form .input-group .input-group-text { background: var(--vel-surface) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .navbar .search-form .input-group .input-group-prepend .input-group-text svg, html[data-theme="dark"] .navbar .search-form .input-group .input-group-prepend .input-group-text { color: var(--vel-ink-500) !important; } html[data-theme="dark"] .navbar .search-form .input-group .form-control::placeholder { color: var(--vel-ink-500) !important; } html[data-theme="dark"] .navbar .sidebar-toggler { border-right-color: var(--vel-line) !important; } html[data-theme="dark"] .navbar .sidebar-toggler svg { color: var(--vel-ink-500) !important; } /* Cards y contenedores */ html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .page-breadcrumb { background-color: var(--vel-surface); color: var(--vel-ink-700); border-color: var(--vel-line); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background-color: var(--vel-surface-2); border-color: var(--vel-line); color: var(--vel-ink-900); } /* Tablas */ html[data-theme="dark"] .table, html[data-theme="dark"] table.table { color: var(--vel-ink-700); background-color: var(--vel-surface); } html[data-theme="dark"] .table thead th, html[data-theme="dark"] table.table thead th { background-color: var(--vel-surface-2); color: var(--vel-ink-900); border-color: var(--vel-line); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th, html[data-theme="dark"] table.table td, html[data-theme="dark"] table.table th { border-color: var(--vel-line); } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--vel-surface-2); } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--vel-line-soft); color: var(--vel-ink-900); } /* Formularios */ html[data-theme="dark"] input.form-control, html[data-theme="dark"] select.form-control, html[data-theme="dark"] textarea.form-control, html[data-theme="dark"] .form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--vel-ink-400); } html[data-theme="dark"] .form-control:focus { background-color: var(--vel-surface) !important; border-color: var(--vel-primary) !important; box-shadow: var(--vel-ring); color: var(--vel-ink-900) !important; } /* Refuerzo: inputs dentro de .input-group (login usa esto), form-control-lg, etc. */ html[data-theme="dark"] body .input-group .form-control, html[data-theme="dark"] body .input-group input, html[data-theme="dark"] body .form-control-lg, html[data-theme="dark"] body input.form-control, html[data-theme="dark"] body input.form-control-lg { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] body .input-group .form-control:focus, html[data-theme="dark"] body .form-control-lg:focus, html[data-theme="dark"] body input.form-control:focus { background-color: var(--vel-surface) !important; color: var(--vel-ink-900) !important; border-color: var(--vel-primary) !important; } /* Autocompletar del navegador (Chrome, Edge): forzar fondo oscuro El browser usa -webkit-autofill con un fondo amarillento/blanco no sobrescribible por background-color, solo por box-shadow inset. */ html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus, html[data-theme="dark"] input:-webkit-autofill:active, html[data-theme="dark"] textarea:-webkit-autofill, html[data-theme="dark"] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--vel-surface-2) inset !important; -webkit-text-fill-color: var(--vel-ink-700) !important; caret-color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; transition: background-color 5000s ease-in-out 0s; } /* Readonly form-control en oscuro */ html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-control:disabled { background-color: var(--vel-line-soft) !important; color: var(--vel-ink-500) !important; opacity: 1; } /* Login: panel izquierdo y texto introductorio */ html[data-theme="dark"] .login-left-panel { background-color: var(--vel-bg) !important; } html[data-theme="dark"] .login-text-intro, html[data-theme="dark"] .login-text-intro strong { color: var(--vel-ink-700) !important; } html[data-theme="dark"] .btn-forgot { color: var(--vel-ink-500) !important; } html[data-theme="dark"] .btn-forgot:hover { color: var(--vel-primary) !important; } html[data-theme="dark"] label, html[data-theme="dark"] .control-label, html[data-theme="dark"] .form-label { color: var(--vel-ink-700); } html[data-theme="dark"] .input-group-text { background-color: var(--vel-surface-2); color: var(--vel-ink-700); border-color: var(--vel-line); } /* Dropdowns (Bootstrap 4) */ html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .dropdown-content { background-color: var(--vel-surface) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; box-shadow: var(--vel-shadow); } html[data-theme="dark"] .dropdown-item { color: var(--vel-ink-700); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--vel-surface-2); color: var(--vel-ink-900); } html[data-theme="dark"] .dropdown-header, html[data-theme="dark"] .dropdown-divider { border-color: var(--vel-line) !important; } /* btn-success unificado con el primario naranja (.btn-orange) tambien en oscuro. Regla explicita para vencer cualquier .btn-success verde de site.css/bootstrap. */ html[data-theme="dark"] .btn-success { background-color: var(--vel-primary) !important; border-color: var(--vel-primary) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(246,141,30,.25); } html[data-theme="dark"] .btn-success:hover { background-color: var(--vel-primary-600) !important; border-color: var(--vel-primary-600) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(246,141,30,.3); } html[data-theme="dark"] .btn-success:focus-visible { box-shadow: var(--vel-ring); } html[data-theme="dark"] .btn-success:active { background-color: var(--vel-primary-700) !important; } /* Botones secundarios / outline / claros */ html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-default { background-color: var(--vel-surface-2); color: var(--vel-ink-700); border-color: var(--vel-line); } html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-default:hover { background-color: var(--vel-line); color: var(--vel-ink-900); } html[data-theme="dark"] .btn-outline-secondary { color: var(--vel-ink-700); border-color: var(--vel-line); } html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--vel-surface-2); color: var(--vel-ink-900); } /* Texto auxiliar Bootstrap */ html[data-theme="dark"] .text-muted { color: var(--vel-ink-500) !important; } html[data-theme="dark"] .text-dark { color: var(--vel-ink-900) !important; } html[data-theme="dark"] .text-secondary { color: var(--vel-ink-500) !important; } html[data-theme="dark"] .text-body { color: var(--vel-ink-700) !important; } /* Alerts */ html[data-theme="dark"] .alert-success { background-color: var(--vel-success-bg); color: var(--vel-success); border-color: var(--vel-success); } html[data-theme="dark"] .alert-danger { background-color: var(--vel-danger-bg); color: var(--vel-danger); border-color: var(--vel-danger); } html[data-theme="dark"] .alert-warning { background-color: var(--vel-warning-bg); color: var(--vel-warning); border-color: var(--vel-warning); } html[data-theme="dark"] .alert-info { background-color: var(--vel-info-bg); color: var(--vel-info); border-color: var(--vel-info); } /* Badges base */ html[data-theme="dark"] .badge-light { background-color: var(--vel-surface-2); color: var(--vel-ink-700); } /* Backgrounds Bootstrap usados como utilities */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--vel-surface) !important; color: var(--vel-ink-700); } /* Borders */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left, html[data-theme="dark"] .border-right { border-color: var(--vel-line) !important; } /* Tabs (Bootstrap nav-tabs) */ html[data-theme="dark"] .nav-tabs { border-color: var(--vel-line); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--vel-ink-500); border-color: transparent; } html[data-theme="dark"] .nav-tabs .nav-link.active, html[data-theme="dark"] .nav-tabs .nav-link:hover { background-color: var(--vel-surface); color: var(--vel-ink-900); border-color: var(--vel-line) var(--vel-line) var(--vel-surface); } /* Breadcrumbs */ html[data-theme="dark"] .page-breadcrumb { background-color: var(--vel-surface); padding: 12px 24px !important; border-radius: var(--vel-radius-sm); margin-bottom: 16px !important; border: 1px solid var(--vel-line); } html[data-theme="dark"] .breadcrumb { background-color: transparent !important; color: var(--vel-ink-700); padding: 0 !important; margin-bottom: 0 !important; } html[data-theme="dark"] .breadcrumb-item.active { color: var(--vel-ink-500); } html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--vel-ink-500); } /* Botones de alertas custom de inventario (override de inline styles main.php) */ html[data-theme="dark"] .minimum-alerts-btn { background: linear-gradient(135deg, var(--vel-surface) 0%, var(--vel-surface-2) 100%) !important; border-color: var(--vel-line) !important; color: var(--vel-primary) !important; box-shadow: 0 2px 8px rgba(0,0,0,.4) !important; } html[data-theme="dark"] .minimum-alerts-btn:hover { background: linear-gradient(135deg, var(--vel-primary) 0%, #ff7c00 100%) !important; color: #fff !important; border-color: var(--vel-primary) !important; } /* Pagination */ html[data-theme="dark"] .pagination .page-link { background-color: var(--vel-surface); color: var(--vel-ink-700); border-color: var(--vel-line); } html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--vel-primary); color: #fff; border-color: var(--vel-primary); } html[data-theme="dark"] .pagination .page-link:hover { background-color: var(--vel-surface-2); color: var(--vel-ink-900); } /* Close button (modales) */ html[data-theme="dark"] .modal-header .close, html[data-theme="dark"] button.close { color: var(--vel-ink-700); text-shadow: none; opacity: .8; } html[data-theme="dark"] button.close:hover { opacity: 1; color: var(--vel-ink-900); } /* Select2 (todos los temas: default, krajee-bs4, bootstrap, krajee) */ html[data-theme="dark"] .select2-container--krajee-bs4 .select2-selection, html[data-theme="dark"] .select2-container--default .select2-selection, html[data-theme="dark"] .select2-container--bootstrap .select2-selection, html[data-theme="dark"] .select2-container--krajee .select2-selection, html[data-theme="dark"] .select2-container .select2-selection { background-color: var(--vel-surface-2) !important; border-color: var(--vel-line) !important; color: var(--vel-ink-700) !important; } html[data-theme="dark"] .select2-container--krajee-bs4 .select2-selection__rendered, html[data-theme="dark"] .select2-container--default .select2-selection__rendered, html[data-theme="dark"] .select2-container--bootstrap .select2-selection__rendered, html[data-theme="dark"] .select2-container--krajee .select2-selection__rendered, html[data-theme="dark"] .select2-container .select2-selection__rendered { color: var(--vel-ink-700) !important; } html[data-theme="dark"] .select2-container .select2-selection .select2-selection__placeholder, html[data-theme="dark"] .select2-container--bootstrap .select2-selection .select2-selection__placeholder, html[data-theme="dark"] .select2-container--default .select2-selection .select2-selection__placeholder { color: var(--vel-ink-500) !important; } html[data-theme="dark"] .select2-dropdown { background-color: var(--vel-surface) !important; border-color: var(--vel-line) !important; color: var(--vel-ink-700) !important; } html[data-theme="dark"] .select2-results__option { background-color: transparent !important; color: var(--vel-ink-700) !important; } html[data-theme="dark"] .select2-results__option--highlighted { background-color: var(--vel-primary) !important; color: #fff !important; } html[data-theme="dark"] .select2-search__field, html[data-theme="dark"] .select2-search--inline .select2-search__field, html[data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } /* Tags / choices seleccionados (multiple) - anula inline #e9ecef de _search.php */ html[data-theme="dark"] .select2-selection__choice, html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--vel-surface) !important; border-color: var(--vel-line) !important; color: var(--vel-ink-900) !important; } html[data-theme="dark"] .select2-selection__choice__remove { color: var(--vel-ink-500) !important; } html[data-theme="dark"] .select2-selection__choice__remove:hover { color: var(--vel-danger) !important; } /* Bordes del contenedor multiple */ html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple, html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--vel-surface-2) !important; border-color: var(--vel-line) !important; } /* Alerts con icono (NobleUI alert-icon-*) */ html[data-theme="dark"] .alert-icon-danger { background-color: var(--vel-danger-bg) !important; color: #fca5a5 !important; border-color: var(--vel-danger) !important; } html[data-theme="dark"] .alert-icon-danger svg, html[data-theme="dark"] .alert-icon-danger .alert-link { color: #fca5a5 !important; } html[data-theme="dark"] .alert-icon-success { background-color: var(--vel-success-bg) !important; color: #86efac !important; border-color: var(--vel-success) !important; } html[data-theme="dark"] .alert-icon-success svg, html[data-theme="dark"] .alert-icon-success .alert-link { color: #86efac !important; } html[data-theme="dark"] .alert-icon-warning { background-color: var(--vel-warning-bg) !important; color: #fcd34d !important; border-color: var(--vel-warning) !important; } html[data-theme="dark"] .alert-icon-warning svg, html[data-theme="dark"] .alert-icon-warning .alert-link { color: #fcd34d !important; } html[data-theme="dark"] .alert-icon-info { background-color: var(--vel-info-bg) !important; color: #93c5fd !important; border-color: var(--vel-info) !important; } html[data-theme="dark"] .alert-icon-info svg, html[data-theme="dark"] .alert-icon-info .alert-link { color: #93c5fd !important; } /* List group (notas de orden, etc.) */ html[data-theme="dark"] .list-group-item { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .list-group-item:hover { background-color: var(--vel-line-soft) !important; } /* Footer */ html[data-theme="dark"] .footer { background-color: var(--vel-surface); color: var(--vel-ink-500); border-top: 1px solid var(--vel-line); } /* Code / pre */ html[data-theme="dark"] code, html[data-theme="dark"] pre { background-color: var(--vel-surface-2); color: var(--vel-ink-900); border: 1px solid var(--vel-line); border-radius: var(--vel-radius-sm); } /* Login layout */ html[data-theme="dark"] .auth-form-light, html[data-theme="dark"] .auth-form-transparent { background-color: var(--vel-surface); color: var(--vel-ink-700); } /* Utilidad: invertir imagenes/iconos PNG que no tengan version oscura */ html[data-theme="dark"] img.theme-invert { filter: invert(1) hue-rotate(180deg) brightness(1.05); } /* --------------------------------------------------------------------- Tipografia: titulos H1-H6 mas claros y legibles --------------------------------------------------------------------- */ html[data-theme="dark"] h1, html[data-theme="dark"] .h1, html[data-theme="dark"] h2, html[data-theme="dark"] .h2, html[data-theme="dark"] h3, html[data-theme="dark"] .h3, html[data-theme="dark"] h4, html[data-theme="dark"] .h4, html[data-theme="dark"] h5, html[data-theme="dark"] .h5, html[data-theme="dark"] h6, html[data-theme="dark"] .h6 { color: #ffffff !important; } html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] div { color: inherit; } /* --------------------------------------------------------------------- Utilidades Tailwind .text-gray-* (usadas en titulos como "Crear nueva orden": text-2xl font-bold text-gray-800) --------------------------------------------------------------------- */ html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700 { color: #f3f4f6 !important; } html[data-theme="dark"] .text-gray-600 { color: #d1d5db !important; } html[data-theme="dark"] .text-gray-500 { color: #9ca3af !important; } html[data-theme="dark"] .text-gray-400 { color: #9ca3af !important; } html[data-theme="dark"] .text-gray-300, html[data-theme="dark"] .text-gray-200, html[data-theme="dark"] .text-gray-100, html[data-theme="dark"] .text-gray-50 { color: #e5e7eb !important; } html[data-theme="dark"] .text-black { color: #f3f4f6 !important; } html[data-theme="dark"] .text-white { color: #ffffff !important; } html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-gray-200 { background-color: var(--vel-surface-2) !important; } html[data-theme="dark"] .bg-gray-700, html[data-theme="dark"] .bg-gray-800, html[data-theme="dark"] .bg-gray-900 { background-color: var(--vel-surface) !important; } /* --------------------------------------------------------------------- Headers de tabla (Kartik GridView + tablas custom) - refuerzo Texto BLANCO PURO para maximo contraste. --------------------------------------------------------------------- */ html[data-theme="dark"] .grid-view table.table thead, html[data-theme="dark"] .grid-view table.table thead tr, html[data-theme="dark"] .grid-view table.table thead th, html[data-theme="dark"] .grid-view table.table thead td, html[data-theme="dark"] table thead, html[data-theme="dark"] table thead tr, html[data-theme="dark"] table thead th, html[data-theme="dark"] table > thead > tr > th, html[data-theme="dark"] .kv-grid-table thead th, html[data-theme="dark"] .kv-grid-table thead tr th a { background-color: var(--vel-surface-2) !important; color: #ffffff !important; border-color: var(--vel-line) !important; } /* Links/sort buttons dentro del header del GridView tambien blancos */ html[data-theme="dark"] table thead th a, html[data-theme="dark"] table thead th a:hover, html[data-theme="dark"] .grid-view table.table thead th a, html[data-theme="dark"] .grid-view table.table thead th a:hover { color: #ffffff !important; } /* Filtros del GridView (fila de inputs/dropdowns dentro de thead) */ html[data-theme="dark"] .table thead tr.filters th, html[data-theme="dark"] .kv-grid-table thead tr.filters th, html[data-theme="dark"] .grid-view table.table thead tr.filters th, html[data-theme="dark"] table thead tr.filters th { background-color: var(--vel-surface) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .table thead tr.filters input, html[data-theme="dark"] .table thead tr.filters select, html[data-theme="dark"] .table thead tr.filters .form-control, html[data-theme="dark"] .table thead tr.filters textarea, html[data-theme="dark"] .kv-grid-table thead tr.filters input, html[data-theme="dark"] .kv-grid-table thead tr.filters select, html[data-theme="dark"] .kv-grid-table thead tr.filters .form-control, html[data-theme="dark"] .grid-view table.table thead .filters input, html[data-theme="dark"] .grid-view table.table thead .filters select, html[data-theme="dark"] .grid-view table.table thead .filters .form-control, html[data-theme="dark"] table thead .filters input, html[data-theme="dark"] table thead .filters select, html[data-theme="dark"] table thead .filters .form-control, html[data-theme="dark"] table thead .filters .input-group .form-control, html[data-theme="dark"] table thead .filters .input-group-text { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } /* Kartik DatePicker / DateRangePicker dentro de filtros y en general */ html[data-theme="dark"] .kv-date-picker, html[data-theme="dark"] .kv-date-picker .form-control, html[data-theme="dark"] .date-picker .form-control, html[data-theme="dark"] .input-daterange .form-control, html[data-theme="dark"] .drp-container, html[data-theme="dark"] .daterangepicker-input, html[data-theme="dark"] .kv-drp-dropdown, html[data-theme="dark"] .kv-drp-dropdown .range-value, html[data-theme="dark"] .daterangepicker.dropdown-menu { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } /* Kartik DateRangePicker calendario emergente */ html[data-theme="dark"] .daterangepicker { background-color: var(--vel-surface) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .daterangepicker .calendar-table { background-color: var(--vel-surface) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .daterangepicker td, html[data-theme="dark"] .daterangepicker th { color: var(--vel-ink-700) !important; background-color: transparent !important; } html[data-theme="dark"] .daterangepicker td.available:hover, html[data-theme="dark"] .daterangepicker th.available:hover { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-900) !important; } html[data-theme="dark"] .daterangepicker td.active, html[data-theme="dark"] .daterangepicker td.active:hover { background-color: var(--vel-primary) !important; color: #fff !important; } html[data-theme="dark"] .daterangepicker td.off, html[data-theme="dark"] .daterangepicker td.off.in-range { color: var(--vel-ink-400) !important; background-color: transparent !important; } /* Filtros de GridView: botones input-group-btn (el "-" junto al select/dropdown) */ html[data-theme="dark"] .table thead tr.filters .input-group-btn .btn, html[data-theme="dark"] .table thead tr.filters .input-group-btn .btn-default, html[data-theme="dark"] .kv-grid-table thead tr.filters .input-group-btn .btn, html[data-theme="dark"] .kv-grid-table thead tr.filters .input-group-btn .btn-default, html[data-theme="dark"] table thead tr.filters .input-group-btn .btn { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-500) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .table thead tr.filters .input-group-btn .btn:hover, html[data-theme="dark"] .kv-grid-table thead tr.filters .input-group-btn .btn:hover, html[data-theme="dark"] table thead tr.filters .input-group-btn .btn:hover { background-color: var(--vel-line) !important; color: var(--vel-ink-900) !important; } /* Select nativo dentro de input-group en filtros */ html[data-theme="dark"] .table thead tr.filters .input-group select, html[data-theme="dark"] .kv-grid-table thead tr.filters .input-group select, html[data-theme="dark"] table thead tr.filters .input-group select { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } /* Fila de detalle expandida del GridView (ExpandRowColumn) */ html[data-theme="dark"] .kv-expand-detail-row, html[data-theme="dark"] .kv-expand-detail-row.table-info, html[data-theme="dark"] tr.kv-expand-detail-row > td { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .kv-expanded-row { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700) !important; } html[data-theme="dark"] .kv-expand-detail-row h4, html[data-theme="dark"] .kv-expand-detail-row h3 { color: var(--vel-primary) !important; } /* Sidebar: mas espacio entre items */ html[data-theme="dark"] .sidebar .nav .nav-item { margin: 6px 0 !important; } html[data-theme="dark"] .sidebar .nav .nav-item .nav-link { border-radius: var(--vel-radius-sm) !important; } /* Celdas de tabla */ html[data-theme="dark"] table.table tbody tr, html[data-theme="dark"] .grid-view table.table tbody tr { background-color: var(--vel-surface); color: var(--vel-ink-700); } html[data-theme="dark"] table.table tbody tr:hover, html[data-theme="dark"] .grid-view table.table tbody tr:hover { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-900); } /* Resumen / pager del GridView */ html[data-theme="dark"] .grid-view .summary, html[data-theme="dark"] .grid-view .empty { color: var(--vel-ink-500); } /* --------------------------------------------------------------------- Logo / brand en sidebar/navbar - invertir SVG/PNG si fondo cambio --------------------------------------------------------------------- */ html[data-theme="dark"] .sidebar .sidebar-header img:not(.logo-fallback-light):not(.logo-fallback-dark), html[data-theme="dark"] .navbar-brand img { filter: brightness(1.1) contrast(1.05); } /* Logo por defecto (business sin logo propio): en modo oscuro se oculta la version oscura (Logo_BC_VelocityGo.svg, ilegible sobre fondo oscuro) y se muestra la version blanca (Logo_BC_VelocityGo-white.png). Un logo propio del business (rama S3Helper::baseUrl() en main.php) no se toca. */ html[data-theme="dark"] .sidebar .sidebar-header .logo-fallback-light { display: none; } html[data-theme="dark"] .sidebar .sidebar-header .logo-fallback-dark { display: inline-block; height: 48px; width: auto; } /* --------------------------------------------------------------------- Pequeños fixes: alertas inventario, popups promo, scrollbars --------------------------------------------------------------------- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--vel-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--vel-line); border-radius: 6px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--vel-ink-500); } /* hr */ html[data-theme="dark"] hr { border-color: var(--vel-line); } /* iconos Feather genericos */ html[data-theme="dark"] [data-feather], html[data-theme="dark"] .feather { color: inherit; stroke: currentColor; } /* --------------------------------------------------------------------- Modales con estilos inline hard-codeados (ej. Acciones Masivas): anular style="background-color:#f8f9fa" / "#ffffff" / color:#261400 --------------------------------------------------------------------- */ html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-content > .modal-body, html[data-theme="dark"] .modal-content > .modal-footer, html[data-theme="dark"] .modal-content > .modal-header, html[data-theme="dark"] .modal-body[style], html[data-theme="dark"] .modal-footer[style], html[data-theme="dark"] .modal-header[style] { background-color: var(--vel-surface) !important; color: var(--vel-ink-700) !important; border-color: var(--vel-line) !important; } /* Titulos de secciones dentro de modales (h6 con color hard-codeado) */ html[data-theme="dark"] .modal h1, html[data-theme="dark"] .modal h2, html[data-theme="dark"] .modal h3, html[data-theme="dark"] .modal h4, html[data-theme="dark"] .modal h5, html[data-theme="dark"] .modal h6, html[data-theme="dark"] .modal h1[style], html[data-theme="dark"] .modal h2[style], html[data-theme="dark"] .modal h3[style], html[data-theme="dark"] .modal h4[style], html[data-theme="dark"] .modal h5[style], html[data-theme="dark"] .modal h6[style] { color: #ffffff !important; } /* Action cards dentro del modal (estilo inline border + cursor) */ html[data-theme="dark"] .modal .action-card, html[data-theme="dark"] .modal .action-card.card { background-color: var(--vel-surface-2) !important; border-color: var(--vel-line) !important; color: var(--vel-ink-700) !important; } html[data-theme="dark"] .modal .action-card:hover { background-color: var(--vel-line-soft) !important; border-color: var(--vel-primary) !important; } html[data-theme="dark"] .modal .action-card .card-body { background-color: transparent !important; } html[data-theme="dark"] .modal .action-card .card-body h6 { color: #ffffff !important; } /* Icon container dentro de action-card (style inline bg #f0f0f0) */ html[data-theme="dark"] .modal .action-card .card-body div[style*="background-color: #f0f0f0"], html[data-theme="dark"] .modal .action-card .card-body div[style*="background-color:#f0f0f0"] { background-color: var(--vel-surface) !important; } /* Close button con style inline color: black */ html[data-theme="dark"] .modal-header .close[style], html[data-theme="dark"] .modal-header button.close[style] { color: var(--vel-ink-700) !important; } html[data-theme="dark"] .modal-header .close[style]:hover { color: #ffffff !important; } /* --------------------------------------------------------------------- Detalle de orden - cajas de reemplazo / componentes de kit (style inline background:#f8f9fa en views/order/view.php) --------------------------------------------------------------------- */ html[data-theme="dark"] [style*="background:#f8f9fa"], html[data-theme="dark"] [style*="background: #f8f9fa"], html[data-theme="dark"] [style*="background-color:#f8f9fa"], html[data-theme="dark"] [style*="background-color: #f8f9fa"] { background-color: var(--vel-surface-2) !important; color: var(--vel-ink-700); border-color: var(--vel-line) !important; } /* --------------------------------------------------------------------- Orden de Recibo - tabla de productos al desplegar (views/purchase-order/purchase_order_products.php: .white-bg, .black-text, tfoot con style inline #E3F7FA) --------------------------------------------------------------------- */ html[data-theme="dark"] .white-bg, html[data-theme="dark"] table.table.white-bg, html[data-theme="dark"] .white-bg th, html[data-theme="dark"] .white-bg td { background-color: var(--vel-surface) !important; border-color: var(--vel-line) !important; } html[data-theme="dark"] .black-text { color: var(--vel-ink-700) !important; } html[data-theme="dark"] .white-bg thead th { color: #ffffff !important; } html[data-theme="dark"] .white-bg .border-bottom { border-bottom-color: var(--vel-line) !important; } /* --------------------------------------------------------------------- Waves - listado (views/wave/index.php): headers con style="color: black !important" inline, imposible de vencer desde CSS. La vista ahora usa var(--wave-th-color, black); aqui solo definimos el valor oscuro de esa variable (el fallback black mantiene el modo claro). */ html[data-theme="dark"] .wave-index { --wave-th-color: #ffffff; } /* --------------------------------------------------------------------- Waves - detalle (views/wave/view.php): la vista trae un