/* ═══════════════════════════════════════════════════════════════ ZOE POS — DARK MODE Estrategia: CSS variables en :root (fallbacks light) + override en [data-bs-theme="dark"]. Bootstrap 5.3 dark theme se activa con data-bs-theme en . ═══════════════════════════════════════════════════════════════ */ /* ── 1. CSS COLOR TOKENS (light defaults) ── */ :root { --clr-surface: #f6f6f8; --clr-surface-brand: #f5f3fb; --clr-surface-2: #f8f9fa; --clr-surface-warm: #fafaf8; --clr-surface-3: #f3f4f6; --clr-bg-card: #fff; --clr-heading: #1a1a2e; --clr-text: #374151; --clr-muted: #9ca3af; --clr-sub: #6b7280; --clr-brand-text: #352d4e; --clr-brand-mid-text: #5a4d7a; --clr-brand-tint-text:#e8e5f0; --clr-divider: #ebebed; --clr-border: #ebebed; --clr-border-brand: #e8e5f0; --clr-border-light: #dee2e6; --clr-brand-tint-8: rgba(53,45,78,0.08); --clr-brand-tint-12: rgba(53,45,78,0.12); } /* ── 2. DARK PALETTE ── */ [data-bs-theme="dark"] { color-scheme: dark; /* Custom tokens */ --clr-surface: #0f0f1a; --clr-surface-brand: #141225; --clr-surface-2: #181828; --clr-surface-warm: #17152a; --clr-surface-3: #1c1b2e; --clr-bg-card: #1a192e; --clr-heading: #eeedf8; --clr-text: #c4c3d4; --clr-muted: #6c6b82; --clr-sub: #8a8998; --clr-brand-text: #b8a7d8; --clr-brand-mid-text: #9b8bbf; --clr-brand-tint-text:#3d3558; --clr-divider: #2a2938; --clr-border: #2a2938; --clr-border-brand: #342f4e; --clr-border-light: #252435; --clr-brand-tint-8: rgba(158,140,218,0.10); --clr-brand-tint-12: rgba(158,140,218,0.15); /* Bootstrap variable overrides */ --bs-body-bg: #0f0f1a; --bs-body-bg-rgb: 15,15,26; --bs-body-color: #c4c3d4; --bs-body-color-rgb: 196,195,212; --bs-secondary-bg: #181828; --bs-secondary-bg-rgb: 24,24,40; --bs-tertiary-bg: #1c1b2e; --bs-tertiary-bg-rgb: 28,27,46; --bs-secondary-color: rgba(196,195,212,.75); --bs-tertiary-color: rgba(196,195,212,.5); --bs-emphasis-color: #eeedf8; --bs-heading-color: #eeedf8; --bs-border-color: #2a2938; --bs-border-color-translucent: rgba(42,41,56,.2); --bs-link-color: #b8a7d8; --bs-link-hover-color: #cdbee8; --bs-card-bg: #1a192e; --bs-card-cap-bg: rgba(26,25,46,.04); --bs-card-border-color: #2a2938; --bs-modal-bg: #1a192e; --bs-modal-header-border-color: #2a2938; --bs-modal-content-bg: #1a192e; --bs-offcanvas-bg: #1a192e; --bs-dropdown-bg: #1a192e; --bs-dropdown-border-color: #2a2938; --bs-dropdown-link-color: #c4c3d4; --bs-dropdown-link-hover-bg:#242338; --bs-dropdown-link-active-bg:#352d4e; --bs-dropdown-divider-bg: #2a2938; --bs-input-bg: #181828; --bs-input-border-color: #2a2938; --bs-input-color: #c4c3d4; --bs-input-placeholder-color: #6c6b82; --bs-input-disabled-bg: #1c1b2e; --bs-input-disabled-border-color: #2a2938; --bs-form-select-bg: #181828; --bs-table-color: #c4c3d4; --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.04); --bs-table-border-color: #2a2938; --bs-list-group-bg: #1a192e; --bs-list-group-border-color: #2a2938; --bs-list-group-action-hover-bg: #242338; --bs-list-group-active-bg: #352d4e; --bs-nav-tabs-border-color: #2a2938; --bs-nav-tabs-link-hover-border-color: #2a2938; --bs-nav-tabs-link-active-bg: #1a192e; --bs-nav-tabs-link-active-border-color: #2a2938; --bs-nav-link-color: #b8a7d8; --bs-accordion-bg: #1a192e; --bs-accordion-border-color:#2a2938; --bs-accordion-btn-bg: #1a192e; --bs-accordion-btn-color: #c4c3d4; --bs-pagination-bg: #1a192e; --bs-pagination-border-color:#2a2938; --bs-pagination-color: #b8a7d8; --bs-pagination-hover-bg: #242338; --bs-pagination-hover-border-color: #2a2938; --bs-pagination-active-bg: #352d4e; --bs-pagination-active-border-color: #352d4e; --bs-badge-color: #fff; --bs-tooltip-bg: #352d4e; --bs-popover-bg: #1a192e; --bs-popover-border-color: #2a2938; --bs-progress-bg: #242338; --bs-breadcrumb-divider-color: #6c6b82; --bs-code-color: #d4b8e8; --bs-highlight-bg: #3b2f5c; /* Status subtle overrides */ --bs-success-bg-subtle: #0d2e1a; --bs-warning-bg-subtle: #2e2400; --bs-danger-bg-subtle: #2e0d0d; --bs-info-bg-subtle: #0a1e2e; --bs-success-border-subtle: #1a4d2e; --bs-warning-border-subtle: #4d3d00; --bs-danger-border-subtle: #4d1a1a; --bs-info-border-subtle: #1a3a4d; --bs-success-text-emphasis: #7dd4a8; --bs-warning-text-emphasis: #ffd862; --bs-danger-text-emphasis: #f08080; --bs-info-text-emphasis: #62c8e8; } /* ── 3. BODY & LAYOUT ── */ [data-bs-theme="dark"] body { background-color: var(--clr-surface); color: var(--clr-text); } /* bg-light and bg-white should follow dark theme */ [data-bs-theme="dark"] .bg-light { background-color: var(--clr-surface-2) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--clr-bg-card) !important; } [data-bs-theme="dark"] .text-dark { color: var(--clr-text) !important; } [data-bs-theme="dark"] .text-muted { color: var(--clr-sub) !important; } [data-bs-theme="dark"] .border { border-color: var(--clr-border) !important; } [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end { border-color: var(--clr-border) !important; } /* ── 4. NAVBAR ── */ /* La barra superior (#352d4e) permanece - es la identidad de marca */ [data-bs-theme="dark"] nav.navbar { border-bottom: 1px solid rgba(255,255,255,0.06); } /* ── 5. SIDEBAR OFFCANVAS (mobile) ── */ [data-bs-theme="dark"] #menu.offcanvas { background-color: #111122 !important; } [data-bs-theme="dark"] #menu .sb-item { color: var(--clr-text); } [data-bs-theme="dark"] #menu .sb-item:hover { background: rgba(158,140,218,0.08); color: #eeedf8; } [data-bs-theme="dark"] #menu .sb-item i { color: var(--clr-muted); } [data-bs-theme="dark"] #menu .sb-item:hover i, [data-bs-theme="dark"] #menu .sb-item.active i { color: #b8a7d8; } [data-bs-theme="dark"] #menu .sb-item.active { background: rgba(158,140,218,0.10); color: #eeedf8; } [data-bs-theme="dark"] #menu .sb-acc-btn { color: var(--clr-text); } [data-bs-theme="dark"] #menu .sb-acc-btn:hover { background: rgba(158,140,218,0.08); color: #eeedf8; } [data-bs-theme="dark"] #menu .sb-acc-btn i:first-child { color: var(--clr-muted); } [data-bs-theme="dark"] #menu .sb-acc-btn:hover i:first-child, [data-bs-theme="dark"] #menu .sb-acc-btn[aria-expanded="true"] i:first-child { color: #b8a7d8; } [data-bs-theme="dark"] #menu .sb-acc-btn[aria-expanded="true"] { color: #eeedf8; } [data-bs-theme="dark"] #menu .sb-chevron { color: var(--clr-border); } [data-bs-theme="dark"] #menu .sb-acc-body .sb-item { color: var(--clr-sub); } [data-bs-theme="dark"] #menu .sb-acc-body .sb-item:hover { color: #eeedf8; } [data-bs-theme="dark"] #menu .sb-acc-body .sb-item i { color: var(--clr-divider); } [data-bs-theme="dark"] #menu .sb-divider { border-color: var(--clr-border); } [data-bs-theme="dark"] #menu .sb-version { color: var(--clr-divider); } [data-bs-theme="dark"] #menu .sb-brand { background: linear-gradient(135deg, #1e1a38 0%, #352d4e 100%); } [data-bs-theme="dark"] #menu .sb-close { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); } [data-bs-theme="dark"] #menu .sb-close:hover { background: rgba(255,255,255,0.14); } /* ── 6. SIDEBAR DESKTOP ── */ [data-bs-theme="dark"] #sidebar-desktop { background-color: #111122; border-right-color: var(--clr-border); } [data-bs-theme="dark"] #sidebar-desktop .sb-item { color: var(--clr-text); } [data-bs-theme="dark"] #sidebar-desktop .sb-item:hover { background: rgba(158,140,218,0.08); color: #eeedf8; } [data-bs-theme="dark"] #sidebar-desktop .sb-acc-btn { color: var(--clr-text); } [data-bs-theme="dark"] #sidebar-desktop .sb-acc-btn:hover { background: rgba(158,140,218,0.08); color: #eeedf8; } [data-bs-theme="dark"] #sidebar-desktop .sb-acc-btn[aria-expanded="true"] { color: #eeedf8; } [data-bs-theme="dark"] #sidebar-desktop .sb-divider { border-color: var(--clr-border); } [data-bs-theme="dark"] #sidebar-desktop .sb-version { color: var(--clr-divider); } [data-bs-theme="dark"] #sidebar-desktop:not(.sb-expanded) .sb-item i, [data-bs-theme="dark"] #sidebar-desktop:not(.sb-expanded) .sb-acc-btn i:first-child { color: var(--clr-muted); } [data-bs-theme="dark"] #sidebar-desktop:not(.sb-expanded) .sb-item:hover i, [data-bs-theme="dark"] #sidebar-desktop:not(.sb-expanded) .sb-acc-btn:hover i:first-child { color: #b8a7d8; } [data-bs-theme="dark"] #sidebar-desktop:not(.sb-expanded) .sb-item.active { border-left-color: #b8a7d8; } /* ── 7. DROPDOWNS & MODALS ── */ [data-bs-theme="dark"] .dropdown-menu { background-color: var(--clr-bg-card); border-color: var(--clr-border); box-shadow: 0 8px 32px rgba(0,0,0,0.4); } [data-bs-theme="dark"] .dropdown-item { color: var(--clr-text); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--clr-surface-3); color: var(--clr-heading); } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--clr-border); } [data-bs-theme="dark"] .modal-content { background-color: var(--clr-bg-card); border-color: var(--clr-border); } [data-bs-theme="dark"] .modal-header { border-bottom-color: var(--clr-border); } [data-bs-theme="dark"] .modal-footer { border-top-color: var(--clr-border); } [data-bs-theme="dark"] .offcanvas { background-color: var(--clr-bg-card); } /* ── 8. FORMS & INPUTS ── */ /* !important necesario: home.css (framework) se cargaba primero con valores hardcodeados */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--clr-surface-2) !important; border-color: var(--clr-border) !important; color: var(--clr-text) !important; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--clr-surface-2) !important; border-color: #5a4d7a !important; color: var(--clr-heading) !important; box-shadow: 0 0 0 0.2rem rgba(90,77,122,0.25) !important; } [data-bs-theme="dark"] .form-control::placeholder { color: var(--clr-muted) !important; } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled, [data-bs-theme="dark"] .form-control[readonly] { background-color: var(--clr-surface-3) !important; color: var(--clr-muted) !important; border-color: var(--clr-border) !important; } [data-bs-theme="dark"] .input-group-text { background-color: var(--clr-surface-3) !important; border-color: var(--clr-border) !important; color: var(--clr-sub) !important; } [data-bs-theme="dark"] .form-check-input { background-color: var(--clr-surface-2) !important; border-color: var(--clr-border) !important; } [data-bs-theme="dark"] textarea.form-control { background-color: var(--clr-surface-2) !important; color: var(--clr-text) !important; } /* input type=date y time: el picker nativo del browser respeta color-scheme */ [data-bs-theme="dark"] input[type="date"], [data-bs-theme="dark"] input[type="time"], [data-bs-theme="dark"] input[type="datetime-local"] { background-color: var(--clr-surface-2) !important; color: var(--clr-text) !important; color-scheme: dark; } [data-bs-theme="dark"] .form-check-input:checked { background-color: #352d4e; border-color: #352d4e; } [data-bs-theme="dark"] .form-switch .form-check-input:checked { background-color: #5a4d7a; } [data-bs-theme="dark"] label, [data-bs-theme="dark"] .form-label { color: var(--clr-sub); } /* ── 9. CARDS & PANELS ── */ [data-bs-theme="dark"] .card { background-color: var(--clr-bg-card); border-color: var(--clr-border); } [data-bs-theme="dark"] .card-header { background-color: rgba(255,255,255,0.03); border-bottom-color: var(--clr-border); } [data-bs-theme="dark"] .card-footer { background-color: rgba(255,255,255,0.02); border-top-color: var(--clr-border); } [data-bs-theme="dark"] .list-group-item { background-color: var(--clr-bg-card); border-color: var(--clr-border); color: var(--clr-text); } /* ── 10. TABLES ── */ [data-bs-theme="dark"] .table { color: var(--clr-text); border-color: var(--clr-border); } [data-bs-theme="dark"] .table thead th { border-bottom-color: var(--clr-border); color: var(--clr-sub); } [data-bs-theme="dark"] .table td, [data-bs-theme="dark"] .table th { border-color: var(--clr-border); } [data-bs-theme="dark"] .table-light { background-color: var(--clr-surface-2) !important; } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.025); } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.04); } /* ── 11. DATATABLES ── */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_info { color: var(--clr-sub); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { background-color: var(--clr-surface-2); border-color: var(--clr-border); color: var(--clr-text); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--clr-sub) !important; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #352d4e !important; border-color: #352d4e !important; color: #fff !important; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--clr-surface-3) !important; border-color: var(--clr-border) !important; color: var(--clr-heading) !important; } [data-bs-theme="dark"] table.dataTable thead > tr > th.sorting::before, [data-bs-theme="dark"] table.dataTable thead > tr > th.sorting::after, [data-bs-theme="dark"] table.dataTable thead > tr > th.sorting_asc::before, [data-bs-theme="dark"] table.dataTable thead > tr > th.sorting_desc::after { opacity: 0.3; } /* ── 12. BUTTONS ── */ [data-bs-theme="dark"] .btn-outline-secondary { border-color: var(--clr-border); color: var(--clr-sub); } [data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: var(--clr-surface-3); border-color: var(--clr-border); color: var(--clr-text); } [data-bs-theme="dark"] .btn-light { background-color: var(--clr-surface-3); border-color: var(--clr-border); color: var(--clr-text); } [data-bs-theme="dark"] .btn-light:hover { background-color: var(--clr-surface-2); color: var(--clr-heading); } /* ── 13. BADGES ── */ [data-bs-theme="dark"] .badge.bg-light { background-color: var(--clr-surface-3) !important; color: var(--clr-text) !important; } [data-bs-theme="dark"] .badge.bg-secondary { background-color: #342f4e !important; color: #b8a7d8 !important; } /* ── 14. ALERTS ── */ [data-bs-theme="dark"] .alert { border-color: var(--clr-border); } [data-bs-theme="dark"] .alert-light { background-color: var(--clr-surface-3); color: var(--clr-text); } /* ── 15. HR / DIVIDERS ── */ [data-bs-theme="dark"] hr { border-color: var(--clr-border); opacity: 1; } /* ── 16. SWEETALERT2 ── */ [data-bs-theme="dark"] .swal2-popup { background: var(--clr-bg-card) !important; color: var(--clr-text) !important; } [data-bs-theme="dark"] .swal2-title { color: var(--clr-heading) !important; } [data-bs-theme="dark"] .swal2-html-container { color: var(--clr-text) !important; } [data-bs-theme="dark"] .swal2-input, [data-bs-theme="dark"] .swal2-textarea { background: var(--clr-surface-2) !important; border-color: var(--clr-border) !important; color: var(--clr-text) !important; } [data-bs-theme="dark"] .swal2-backdrop-show { background: rgba(0,0,0,0.7) !important; } [data-bs-theme="dark"] .swal2-icon { border-color: var(--clr-border) !important; } /* ── 17. DATERANGE PICKER ── */ [data-bs-theme="dark"] .daterangepicker { background-color: var(--clr-bg-card); border-color: var(--clr-border); color: var(--clr-text); } [data-bs-theme="dark"] .daterangepicker .calendar-table { background-color: var(--clr-bg-card); border-color: var(--clr-border); } [data-bs-theme="dark"] .daterangepicker td.available:hover, [data-bs-theme="dark"] .daterangepicker th.available:hover { background-color: var(--clr-surface-3); } [data-bs-theme="dark"] .daterangepicker td.in-range { background-color: rgba(90,77,122,0.2); } [data-bs-theme="dark"] .daterangepicker td.active, [data-bs-theme="dark"] .daterangepicker td.active:hover { background-color: #352d4e; } [data-bs-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--clr-border); } [data-bs-theme="dark"] .daterangepicker select.monthselect, [data-bs-theme="dark"] .daterangepicker select.yearselect { background-color: var(--clr-surface-2); border-color: var(--clr-border); color: var(--clr-text); } [data-bs-theme="dark"] .daterangepicker::before { border-bottom-color: var(--clr-border); } [data-bs-theme="dark"] .daterangepicker::after { border-bottom-color: var(--clr-bg-card); } /* ── 18. SELECTIZE ── */ [data-bs-theme="dark"] .selectize-control .selectize-input { background: var(--clr-surface-2) !important; border-color: var(--clr-border) !important; color: var(--clr-text) !important; box-shadow: none !important; } [data-bs-theme="dark"] .selectize-control .selectize-input.focus { border-color: #5a4d7a !important; } [data-bs-theme="dark"] .selectize-dropdown { background: var(--clr-bg-card) !important; border-color: var(--clr-border) !important; } [data-bs-theme="dark"] .selectize-dropdown .option { color: var(--clr-text) !important; } [data-bs-theme="dark"] .selectize-dropdown .option:hover, [data-bs-theme="dark"] .selectize-dropdown .active { background: var(--clr-surface-3) !important; } [data-bs-theme="dark"] .selectize-control .selectize-input .item { background: rgba(90,77,122,0.3) !important; color: #b8a7d8 !important; border-color: #342f4e !important; } /* ── 19. TIPPY DARK (overrides de tooltips del sidebar) ── */ [data-bs-theme="dark"] .tippy-box[data-theme~='translucent'] { background: rgba(26,25,46,0.95); border: 1px solid var(--clr-border); color: var(--clr-heading); } /* ── 20. PAGE TRANSITIONS ── */ [data-bs-theme="dark"] #page-loader { background: var(--clr-surface); } /* ── 23. STYLES.CSS OVERRIDES CON !important ── */ /* Pagination activa hardcodeada en styles.css */ [data-bs-theme="dark"] .page-item.active .page-link { background-color: #352d4e !important; border-color: #5a4d7a !important; color: #fff !important; } [data-bs-theme="dark"] .page-link { background-color: var(--clr-surface-2) !important; border-color: var(--clr-border) !important; color: var(--clr-text) !important; } [data-bs-theme="dark"] .page-link:hover { background-color: var(--clr-surface-3) !important; color: var(--clr-heading) !important; } /* Accordion/collapse activo hardcodeado en styles.css */ [data-bs-theme="dark"] :not(.collapsed).active { background-color: var(--clr-surface-3) !important; color: var(--clr-text) !important; box-shadow: none !important; } /* DataTables filter input (border hardcodeado) */ [data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_filter input { border-color: var(--clr-border) !important; background-color: var(--clr-surface-2) !important; color: var(--clr-text) !important; } /* text-dark override en styles.css */ [data-bs-theme="dark"] .text-dark { color: var(--clr-text) !important; } /* ── 24. MODAL CUERPOS Y FOOTERS ── */ [data-bs-theme="dark"] .modal-body { background-color: var(--clr-bg-card) !important; } [data-bs-theme="dark"] .modal-footer.bg-white, [data-bs-theme="dark"] .modal-footer.border-0 { background-color: var(--clr-bg-card) !important; } /* Tabla de productos responsive en mobile (general-modals) */ [data-bs-theme="dark"] .credit-note-product-table tbody tr, [data-bs-theme="dark"] .proforma-product-table tbody tr { background-color: var(--clr-surface-2) !important; } /* ── 25. THEAD LIGHT ── */ [data-bs-theme="dark"] thead { background-color: var(--clr-surface-2) !important; color: var(--clr-sub) !important; } [data-bs-theme="dark"] thead th { color: var(--clr-sub) !important; } /* ── 26. PROCESADOR SRI DROP ZONE ── */ [data-bs-theme="dark"] #dropZone { background-color: var(--clr-surface-brand) !important; } /* ── 27. WHATSAPP / REPORTES style blocks ── */ [data-bs-theme="dark"] .chart-container, [data-bs-theme="dark"] .report-section { background-color: var(--clr-bg-card) !important; } /* ── 21. SCROLLBAR (webkit) ── */ [data-bs-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--clr-surface); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 3px; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #352d4e; } /* ── 22. DARK MODE TOGGLE SWITCH ANIMATION ── */ .dark-mode-toggle-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0; } .dark-mode-toggle-wrap .dm-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } .dark-mode-toggle-wrap .form-check-input { cursor: pointer; width: 2rem; height: 1.1rem; }