/* * FacturaPoint — Modo Oscuro * Se activa agregando la clase .dark-mode al * Preferencia guardada en localStorage: "fp_dark_mode" = "1" */ /* ── Variables base (dark mode internos) ─────────────────────────────────── */ body.dark-mode { --dm-bg: #1a1d23; --dm-bg2: #22262e; --dm-bg3: #2a2f3a; --dm-bg4: #313745; --dm-border: #3a3f4e; --dm-text: #d0d4de; --dm-text-muted: #7c8499; --dm-text-strong: #eaedf3; --dm-primary: #3a7bd5; --dm-link: #6ea8fe; --dm-input-bg: #2a2f3a; --dm-input-border:#3a3f4e; /* ── Override variables de corporate-blue-theme.css ─────────────────── */ /* Al redefinirlas aquí, TODOS los elementos que usen var(--X) dentro de */ /* body.dark-mode heredan automáticamente los colores oscuros. */ /* Superficies / fondos */ --bg: #1a1d23; --surf: #22262e; --surf2: #22262e; --surf3: #2a2f3a; /* Texto */ --t1: #eaedf3; --t2: #d0d4de; --t3: #9ea6b8; --t4: #7c8499; /* Bordes */ --bdr: #3a3f4e; --bdr2: #3a3f4e; /* Sidebar */ --sb-bg: #141720; --sb-surf: #1e2330; --sb-hover: #1e2330; --sb-act: #1e2535; --sb-t: #a0a8be; --sb-thi: #F77F00; --sb-bdr: #2a2f3a; --sb-shadow: 2px 0 20px rgba(0,0,0,.5); /* Estados contextuales — fondos */ --ok-bg: rgba(22,163,74,0.15); --ok-t: #4ade80; --warn-bg: rgba(217,119,6,0.15); --warn-t: #fbbf24; --err-bg: rgba(220,38,38,0.15); --err-t: #f87171; --info-bg: rgba(26,107,193,0.18); --info-t: #93c5fd; /* o050 — fondo hover naranja muy suave en listas */ --o050: rgba(232,93,4,0.12); } /* ── Body y contenedor principal ────────────────────────────────────────── */ body.dark-mode, body.dark-mode .container.body, body.dark-mode .right_col { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } /* .main_container uses sidebar color for "faux column" full-height effect */ /* (see detailed comment in the sidebar fix section below) */ body.dark-mode .main_container { color: var(--dm-text) !important; } /* Ensure full height coverage — Gentelella uses 100% heights throughout */ body.dark-mode .container.body { min-height: 100vh !important; } /* ── Sidebar ────────────────────────────────────────────────────────────── */ body.dark-mode .nav-sm .left_col, body.dark-mode .left_col, body.dark-mode .left_col .nav-md, body.dark-mode .left_col .scroll-view, body.dark-mode .left_col .side-menu-container { background: #141720 !important; } /* Sidebar must fill full viewport height regardless of content */ body.dark-mode .left_col { min-height: 100vh !important; } body.dark-mode .left_col .scroll-view { min-height: 100vh !important; } /* Todos los contenedores internos del scroll (mCustomScrollbar plugin) */ body.dark-mode .left_col .mCustomScrollBox, body.dark-mode .left_col .mCSB_container, body.dark-mode .left_col .mCSB_inside, body.dark-mode .left_col .mCSB_inside > .mCSB_container { background: #141720 !important; min-height: 100vh !important; } body.dark-mode .nav_title, body.dark-mode .nav_title a { background: #0f1117 !important; border-bottom: 1px solid #2a2f3a !important; } body.dark-mode .nav.side-menu > li > a, body.dark-mode .nav.child_menu > li > a { color: #a0a8be !important; } body.dark-mode .nav.side-menu > li.active > a, body.dark-mode .nav.side-menu > li.active-sm > a, body.dark-mode .nav.side-menu > li > a:hover, body.dark-mode .nav.child_menu > li.active > a, body.dark-mode .nav.child_menu > li > a:hover { background: #1e2330 !important; color: #ffffff !important; } body.dark-mode .nav.side-menu > li.active, body.dark-mode .nav.side-menu > li.active-sm { border-right: 3px solid var(--dm-primary) !important; } body.dark-mode .nav.child_menu { background: #161921 !important; } body.dark-mode .menu_section h3 { color: var(--dm-text-muted) !important; border-bottom-color: var(--dm-border) !important; } /* ── Top nav ────────────────────────────────────────────────────────────── */ body.dark-mode .top_nav, body.dark-mode .nav_menu { background: #1d2130 !important; border-bottom: 1px solid var(--dm-border) !important; } body.dark-mode .top_nav .nav > li > a, body.dark-mode .top_nav .navbar-nav > li > a { color: var(--dm-text) !important; } body.dark-mode .top_nav .nav > li > a:hover { background: var(--dm-bg3) !important; color: var(--dm-text-strong) !important; } body.dark-mode .top_nav .dropdown-menu { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; } body.dark-mode .top_nav .dropdown-menu > li > a { color: var(--dm-text) !important; } body.dark-mode .top_nav .dropdown-menu > li > a:hover, body.dark-mode .top_nav .dropdown-menu > li > a:focus { background: var(--dm-bg3) !important; color: var(--dm-text-strong) !important; } body.dark-mode .top_nav .dropdown-menu .divider { background-color: var(--dm-border) !important; } /* ── Paneles (x_panel) ──────────────────────────────────────────────────── */ body.dark-mode .x_panel { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; } body.dark-mode .x_title { background: var(--dm-bg2) !important; border-bottom-color: var(--dm-border) !important; } body.dark-mode .x_title h2, body.dark-mode .x_title h2 small { color: var(--dm-text-strong) !important; } body.dark-mode .x_content { background: var(--dm-bg2) !important; } /* ── Tablas ─────────────────────────────────────────────────────────────── */ body.dark-mode .table { color: var(--dm-text) !important; } body.dark-mode .table > thead > tr > th, body.dark-mode .table > tbody > tr > td, body.dark-mode .table > tfoot > tr > td { border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .table > thead > tr > th { background: var(--dm-bg3) !important; color: var(--dm-text-strong) !important; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.03) !important; } body.dark-mode .table-hover > tbody > tr:hover { background-color: rgba(255,255,255,0.06) !important; } body.dark-mode .table-hover > tbody > tr:hover > td, body.dark-mode .table-hover > tbody > tr:hover > th { background-color: inherit !important; } body.dark-mode .table-bordered { border-color: var(--dm-border) !important; } /* ── Bootstrap contextual table rows (.active, .warning, .success, etc.) ── */ /* Por defecto Bootstrap pone fondos claros — sobreescribir en dark mode */ body.dark-mode .table > tbody > tr.active > td, body.dark-mode .table > tbody > tr.active > th, body.dark-mode .table > tbody > tr > td.active, body.dark-mode .table > tbody > tr > th.active { background-color: rgba(255,255,255,0.10) !important; color: var(--dm-text) !important; } body.dark-mode .table > tbody > tr.warning > td, body.dark-mode .table > tbody > tr.warning > th, body.dark-mode .table > tbody > tr > td.warning, body.dark-mode .table > tbody > tr > th.warning { background-color: rgba(217,119,6,0.18) !important; color: #fcd34d !important; } body.dark-mode .table > tbody > tr.success > td, body.dark-mode .table > tbody > tr.success > th, body.dark-mode .table > tbody > tr > td.success, body.dark-mode .table > tbody > tr > th.success { background-color: rgba(22,163,74,0.15) !important; color: #4ade80 !important; } body.dark-mode .table > tbody > tr.danger > td, body.dark-mode .table > tbody > tr.danger > th, body.dark-mode .table > tbody > tr > td.danger, body.dark-mode .table > tbody > tr > th.danger { background-color: rgba(220,38,38,0.15) !important; color: #f87171 !important; } body.dark-mode .table > tbody > tr.info > td, body.dark-mode .table > tbody > tr.info > th, body.dark-mode .table > tbody > tr > td.info, body.dark-mode .table > tbody > tr > th.info { background-color: rgba(26,107,193,0.18) !important; color: #93c5fd !important; } /* ── Fila seleccionada personalizada (corporate-blue-theme.css) ──────────── */ /* .row_selected usa rgba(232,93,4,.07) con !important — necesita override */ body.dark-mode tr.row_selected > td, body.dark-mode tr.row_selected > th { background: rgba(232,93,4,0.22) !important; color: var(--dm-text) !important; } /* ── Bootstrap .table > tbody > tr con background inline blanco ─────────── */ /* Filas con inline style background blanco/claro — captura genérica */ body.dark-mode .table > tbody > tr[style*="background:#fff"], body.dark-mode .table > tbody > tr[style*="background: #fff"], body.dark-mode .table > tbody > tr[style*="background:white"], body.dark-mode .table > tbody > tr[style*="background:#FFF"], body.dark-mode .table > tbody > tr[style*="background:#ffffff"], body.dark-mode .table > tbody > tr[style*="background:#FFFFFF"] { background-color: var(--dm-bg2) !important; } body.dark-mode .table > tbody > tr[style*="background:#fff"] > td, body.dark-mode .table > tbody > tr[style*="background: #fff"] > td, body.dark-mode .table > tbody > tr[style*="background:white"] > td, body.dark-mode .table > tbody > tr[style*="background:#ffffff"] > td, body.dark-mode .table > tbody > tr[style*="background:#FFFFFF"] > td { background-color: var(--dm-bg2) !important; color: var(--dm-text) !important; } /* Encabezado azul de folios/cargos Cloudbeds */ body.dark-mode table thead tr.bg-primary, body.dark-mode table thead tr[style*="background:#2c4a7c"], body.dark-mode table thead tr[style*="background: #2c4a7c"] { background: #1e3456 !important; } /* ── Formularios ────────────────────────────────────────────────────────── */ body.dark-mode .form-control, body.dark-mode .input-group-addon, body.dark-mode select.form-control { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } body.dark-mode .form-control:focus { background-color: var(--dm-bg3) !important; border-color: var(--dm-primary) !important; color: var(--dm-text-strong) !important; box-shadow: 0 0 0 2px rgba(58,123,213,0.25) !important; } body.dark-mode .form-control::placeholder { color: var(--dm-text-muted) !important; } body.dark-mode .input-group-btn .btn-default, body.dark-mode .input-group-addon { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode label, body.dark-mode .control-label { color: var(--dm-text) !important; } body.dark-mode .help-block { color: var(--dm-text-muted) !important; } body.dark-mode .ln_solid { border-top-color: var(--dm-border) !important; } /* ── Botones ────────────────────────────────────────────────────────────── */ body.dark-mode .btn-default { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .btn-default:hover, body.dark-mode .btn-default:focus { background: var(--dm-bg4) !important; color: var(--dm-text-strong) !important; } /* ── Select2 ────────────────────────────────────────────────────────────── */ body.dark-mode .select2-container--bootstrap .select2-selection { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } body.dark-mode .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { color: var(--dm-text) !important; } body.dark-mode .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { color: var(--dm-text-muted) !important; } body.dark-mode .select2-container--bootstrap .select2-dropdown { background-color: var(--dm-bg2) !important; border-color: var(--dm-border) !important; } body.dark-mode .select2-container--bootstrap .select2-results__option { color: var(--dm-text) !important; } body.dark-mode .select2-container--bootstrap .select2-results__option--highlighted { background-color: var(--dm-primary) !important; color: #fff !important; } body.dark-mode .select2-container--bootstrap .select2-search--dropdown .select2-search__field { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ── Alertas / Flash messages ───────────────────────────────────────────── */ body.dark-mode .alert-success { background-color: #1a3a2a !important; border-color: #2d6a4f !important; color: #74c69d !important; } body.dark-mode .alert-danger, body.dark-mode .alert-error { background-color: #3a1a1a !important; border-color: #6a2d2d !important; color: #e07070 !important; } body.dark-mode .alert-warning { background-color: #3a2e10 !important; border-color: #6a5010 !important; color: #d4a843 !important; } body.dark-mode .alert-info { background-color: #0f2a3a !important; border-color: #1a4a6a !important; color: #6ea8d4 !important; } /* ── Footer ─────────────────────────────────────────────────────────────── */ body.dark-mode .footer_fixed, body.dark-mode .footer, body.dark-mode footer { background: var(--dm-bg2) !important; border-top: 1px solid var(--dm-border) !important; color: var(--dm-text-muted) !important; } body.dark-mode footer p, body.dark-mode footer span, body.dark-mode footer .footer-app { color: var(--dm-text-muted) !important; } /* Gentelella wraps footer inside .right_col — ensure the container is also dark */ body.dark-mode .right_col > footer { background: var(--dm-bg2) !important; } /* ── Page title ─────────────────────────────────────────────────────────── */ body.dark-mode .page-title { background: var(--dm-bg) !important; border-bottom-color: var(--dm-border) !important; } body.dark-mode .page-title h3 { color: var(--dm-text-strong) !important; } /* ── Tabs ───────────────────────────────────────────────────────────────── */ body.dark-mode .nav-tabs { border-bottom-color: var(--dm-border) !important; } body.dark-mode .nav-tabs > li > a { color: var(--dm-text) !important; background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; } body.dark-mode .nav-tabs > li.active > a, body.dark-mode .nav-tabs > li.active > a:hover, body.dark-mode .nav-tabs > li.active > a:focus { background: var(--dm-bg2) !important; border-bottom-color: var(--dm-bg2) !important; color: var(--dm-text-strong) !important; } body.dark-mode .tab-content { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; } /* ── Modales ────────────────────────────────────────────────────────────── */ body.dark-mode .modal-content { background-color: var(--dm-bg2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .modal-header { background-color: var(--dm-bg3) !important; border-bottom-color: var(--dm-border) !important; } body.dark-mode .modal-header h4, body.dark-mode .modal-title { color: var(--dm-text-strong) !important; } body.dark-mode .modal-footer { background-color: var(--dm-bg3) !important; border-top-color: var(--dm-border) !important; } body.dark-mode .close { color: var(--dm-text) !important; text-shadow: none !important; opacity: 0.7; } /* ── Paginación ─────────────────────────────────────────────────────────── */ body.dark-mode .pagination > li > a, body.dark-mode .pagination > li > span { background-color: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .pagination > li > a:hover { background-color: var(--dm-bg4) !important; color: var(--dm-text-strong) !important; } body.dark-mode .pagination > .active > a, body.dark-mode .pagination > .active > span { background-color: var(--dm-primary) !important; border-color: var(--dm-primary) !important; color: #fff !important; } /* ── Breadcrumb ─────────────────────────────────────────────────────────── */ body.dark-mode .breadcrumb { background-color: var(--dm-bg3) !important; color: var(--dm-text-muted) !important; } body.dark-mode .breadcrumb > li + li::before { color: var(--dm-text-muted) !important; } /* ── Dropdown genérico ──────────────────────────────────────────────────── */ body.dark-mode .dropdown-menu { background-color: var(--dm-bg2) !important; border-color: var(--dm-border) !important; } body.dark-mode .dropdown-menu > li > a { color: var(--dm-text) !important; } body.dark-mode .dropdown-menu > li > a:hover, body.dark-mode .dropdown-menu > li > a:focus { background-color: var(--dm-bg3) !important; color: var(--dm-text-strong) !important; } body.dark-mode .dropdown-menu .divider { background-color: var(--dm-border) !important; } /* ── DataTables ─────────────────────────────────────────────────────────── */ body.dark-mode .dataTables_wrapper .dataTables_length, body.dark-mode .dataTables_wrapper .dataTables_filter, body.dark-mode .dataTables_wrapper .dataTables_info, body.dark-mode .dataTables_wrapper .dataTables_processing, body.dark-mode .dataTables_wrapper .dataTables_paginate { color: var(--dm-text) !important; } body.dark-mode .dataTables_wrapper .dataTables_filter input { background: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ── Links ──────────────────────────────────────────────────────────────── */ body.dark-mode a:not(.btn):not(.nav-link) { color: var(--dm-link) !important; } body.dark-mode a:not(.btn):not(.nav-link):hover { color: #9ec5fe !important; } /* ── Textos de color ────────────────────────────────────────────────────── */ body.dark-mode .text-muted { color: var(--dm-text-muted) !important; } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--dm-text-strong) !important; } /* ── Scrollbar ──────────────────────────────────────────────────────────── */ body.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg2); } body.dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-bg4); border-radius: 4px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #4a5268; } /* ── Toggle button ──────────────────────────────────────────────────────── */ .btn-dark-mode-toggle { display: inline-flex; align-items: center; gap: 6px; } .btn-dark-mode-toggle .dm-icon { font-size: 13px; } /* Transición suave al cambiar de modo */ body { transition: background-color 0.25s ease, color 0.2s ease; } body.dark-mode .x_panel, body.dark-mode .top_nav, body.dark-mode .left_col, body.dark-mode .form-control { transition: background-color 0.25s ease, border-color 0.2s ease, color 0.2s ease; } /* ═══════════════════════════════════════════════════════════════════════════ CORRECCIONES ESPECÍFICAS — elementos no cubiertos por clases genéricas ═══════════════════════════════════════════════════════════════════════════ */ /* ── Dashboard KPI cards (.fp-stat-card) ─────────────────────────────────── */ body.dark-mode .fp-stat-card { background: var(--dm-bg2) !important; border-color: var(--dm-border) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } body.dark-mode .fp-stat-val { color: var(--dm-text-strong) !important; } body.dark-mode .fp-stat-lbl, body.dark-mode .fp-stat-sub, body.dark-mode .prog-meta { color: var(--dm-text-muted) !important; } /* Iconos de color en las cards — suavizar el fondo luminoso */ body.dark-mode .fp-ico-orange { background: rgba(232,93,4,0.20) !important; } body.dark-mode .fp-ico-green { background: rgba(22,163,74,0.20) !important; } body.dark-mode .fp-ico-red { background: rgba(220,38,38,0.20) !important; } body.dark-mode .fp-ico-warn { background: rgba(217,119,6,0.20) !important; } body.dark-mode .fp-ico-blue { background: rgba(26,107,193,0.20) !important; } body.dark-mode .fp-ico-purple { background: rgba(124,58,237,0.20) !important; } /* Badges de vigencia */ body.dark-mode .fp-badge-ok { background: rgba(22,163,74,0.15) !important; color: #4ade80 !important; } body.dark-mode .fp-badge-warn { background: rgba(217,119,6,0.15) !important; color: #fbbf24 !important; } body.dark-mode .fp-badge-err { background: rgba(220,38,38,0.15) !important; color: #f87171 !important; } /* Progress bar track */ body.dark-mode .progress { background-color: var(--dm-bg4) !important; } /* ── Encabezados de tabla (thead) — mayor especificidad ─────────────────── */ body.dark-mode table thead tr th, body.dark-mode table thead tr td, body.dark-mode .table thead tr th, body.dark-mode .table thead tr td { background-color: var(--dm-bg3) !important; color: var(--dm-text-strong) !important; border-color: var(--dm-border) !important; } /* Links en encabezados sortables */ body.dark-mode .table thead th a, body.dark-mode .table thead th a:hover { color: var(--dm-text-strong) !important; } /* ── Analytics KPI labels/values ────────────────────────────────────────── */ body.dark-mode .kpi-label { color: var(--dm-text-muted) !important; } body.dark-mode .kpi-value { color: var(--dm-text-strong) !important; } /* ── Filter-data bar ────────────────────────────────────────────────────── */ body.dark-mode .filter-data { background: var(--dm-bg2) !important; } body.dark-mode .filter-data .form-inline, body.dark-mode .filter-data .row { color: var(--dm-text) !important; } /* ── jambo_table (tabla de facturas/listados con encabezado azul) ──────────── */ /* corporate-blue-theme usa table.jambo_table con alta especificidad + !important */ body.dark-mode table.jambo_table { border-color: var(--dm-border) !important; background: var(--dm-bg2) !important; } body.dark-mode table.jambo_table thead { background: linear-gradient(135deg, #1a2845 0%, #1e3a6e 100%) !important; } body.dark-mode table.jambo_table thead th { color: rgba(255,255,255,.80) !important; background: transparent !important; border-color: transparent !important; } body.dark-mode table.jambo_table tbody td { background: var(--dm-bg2) !important; color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; } body.dark-mode table.jambo_table tbody tr:hover td { background: var(--dm-bg3) !important; color: var(--dm-text-strong) !important; } body.dark-mode table.jambo_table tbody tr.selected td { background: rgba(232,93,4,0.15) !important; } /* Inputs / Select2 dentro de jambo_table.table-items (líneas de factura) */ body.dark-mode table.jambo_table.table-items .form-control, body.dark-mode table.jambo_table.table-items input, body.dark-mode table.jambo_table.table-items select, body.dark-mode table.jambo_table.table-items textarea { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } body.dark-mode table.jambo_table.table-items .checkbox label { color: var(--dm-text) !important; } /* ── Área de totales debajo de la tabla de factura ─────────────────────── */ body.dark-mode .totals-section, body.dark-mode .invoice-totals, body.dark-mode .subtotal-area { background: var(--dm-bg2) !important; color: var(--dm-text) !important; } /* ── Tab content / Tab pane (formularios de factura) ────────────────────── */ body.dark-mode .tab-content, body.dark-mode .tab-pane { background-color: var(--dm-bg2) !important; } body.dark-mode .tab-content .table-responsive { background: var(--dm-bg2) !important; } /* ── bar_tabs (nav-tabs dentro de formularios) ──────────────────────────── */ body.dark-mode .bar_tabs { border-bottom-color: var(--dm-border) !important; background: transparent !important; } /* ── Panel toolbox buttons (Todos / Ninguno) ─────────────────────────────── */ body.dark-mode .panel_toolbox a, body.dark-mode .panel_toolbox .btn { color: var(--dm-text) !important; } /* ── Código / pre ───────────────────────────────────────────────────────── */ body.dark-mode pre, body.dark-mode code { background: var(--dm-bg3) !important; color: #a8d0f0 !important; border-color: var(--dm-border) !important; } /* ── Well ────────────────────────────────────────────────────────────────── */ body.dark-mode .well { background-color: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ── List group ──────────────────────────────────────────────────────────── */ body.dark-mode .list-group-item { background-color: var(--dm-bg2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .list-group-item:hover { background-color: var(--dm-bg3) !important; } /* ── Badges / Labels ─────────────────────────────────────────────────────── */ body.dark-mode .label-default { background-color: var(--dm-bg4) !important; color: var(--dm-text) !important; } /* ── Switchery (toggles js-switch) ──────────────────────────────────────── */ body.dark-mode .switchery { border-color: var(--dm-border) !important; } /* ── Daterangepicker ─────────────────────────────────────────────────────── */ body.dark-mode .daterangepicker { background-color: var(--dm-bg2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; box-shadow: 0 6px 24px rgba(0,0,0,.5) !important; } /* Flecha del dropdown */ body.dark-mode .daterangepicker:before { border-bottom-color: var(--dm-border) !important; } body.dark-mode .daterangepicker:after { border-bottom-color: var(--dm-bg2) !important; } /* ── Ranges list (Hoy, Ayer, Últimos 7 días, etc.) ── */ body.dark-mode .daterangepicker .ranges { background-color: var(--dm-bg2) !important; } body.dark-mode .daterangepicker .ranges ul { background-color: var(--dm-bg2) !important; padding: 4px 0 !important; } body.dark-mode .daterangepicker .ranges li { background-color: var(--dm-bg3) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; margin: 3px 6px !important; border-radius: 4px !important; } body.dark-mode .daterangepicker .ranges li:hover { background-color: var(--dm-bg4) !important; color: var(--dm-text-strong) !important; border-color: var(--dm-primary) !important; } body.dark-mode .daterangepicker .ranges li.active { background-color: #F77F00 !important; /* naranja de marca */ border-color: #F77F00 !important; color: #ffffff !important; font-weight: 600 !important; } /* ── Calendario ── */ body.dark-mode .daterangepicker td.available:hover, body.dark-mode .daterangepicker th.available:hover { background-color: var(--dm-bg3) !important; color: var(--dm-text-strong) !important; } body.dark-mode .daterangepicker td.active, body.dark-mode .daterangepicker td.active:hover { background-color: var(--dm-primary) !important; color: #fff !important; } body.dark-mode .daterangepicker td.in-range { background-color: rgba(58,123,213,0.18) !important; color: var(--dm-text) !important; } body.dark-mode .daterangepicker td.off, body.dark-mode .daterangepicker td.off.in-range, body.dark-mode .daterangepicker td.off.start-date, body.dark-mode .daterangepicker td.off.end-date { color: var(--dm-text-muted) !important; background: transparent !important; } body.dark-mode .daterangepicker td.disabled, body.dark-mode .daterangepicker option.disabled { color: var(--dm-text-muted) !important; opacity: 0.4 !important; } body.dark-mode .daterangepicker .drp-calendar, body.dark-mode .daterangepicker .calendar-table { background-color: var(--dm-bg2) !important; border-color: var(--dm-border) !important; } body.dark-mode .daterangepicker .calendar-table th, body.dark-mode .daterangepicker .calendar-table td { color: var(--dm-text) !important; } body.dark-mode .daterangepicker .calendar-table thead th { color: var(--dm-text-muted) !important; font-weight: 600 !important; } /* Botones Aplicar / Cancelar */ body.dark-mode .daterangepicker .drp-buttons { background-color: var(--dm-bg3) !important; border-top-color: var(--dm-border) !important; } body.dark-mode .daterangepicker .drp-buttons .btn-default { background: var(--dm-bg4) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .daterangepicker select.monthselect, body.dark-mode .daterangepicker select.yearselect { background: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Separador entre calendarios */ body.dark-mode .daterangepicker .drp-calendar.left { border-right-color: var(--dm-border) !important; } /* ── Env banner (development/demo) ──────────────────────────────────────── */ body.dark-mode .env-local, body.dark-mode .env-demo { opacity: 0.85; } /* ── CFDI Quick-access panel (sidebar) ──────────────────────────────────── */ body.dark-mode .cfdi-quick-menu { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; box-shadow: 0 6px 20px rgba(0,0,0,.35) !important; } body.dark-mode .cfdi-quick-item { border-bottom-color: var(--dm-border) !important; } body.dark-mode .cfdi-quick-item:hover { background: var(--dm-bg4) !important; } body.dark-mode .cfdi-quick-item-info strong { color: var(--dm-text-strong) !important; } body.dark-mode .cfdi-quick-item-info small { color: var(--dm-text-muted) !important; } /* Suavizar iconos de colores vivos del panel CFDI en dark mode */ body.dark-mode .cfdi-quick-item-ico { opacity: 0.85; } /* ── Sidebar user info / profile section ────────────────────────────────── */ body.dark-mode .profile, body.dark-mode .profile_pic, body.dark-mode .profile_info { background: #141720 !important; border-bottom-color: var(--dm-border) !important; } body.dark-mode .profile_info h2, body.dark-mode .profile_info h2 span, body.dark-mode .profile_info p { color: var(--dm-text) !important; } /* ── Gentelella sidebar full-height fix ("faux column" technique) ───────── */ /* * Gentelella JS resizes .left_col dynamically, but in dark mode the sidebar * background (#141720) may stop before the viewport bottom. * * Fix: set .main_container background to sidebar color — it spans the full * height automatically. .right_col then paints over it with content bg. */ body.dark-mode .main_container { background-color: #141720 !important; /* = sidebar dark color */ min-height: 100vh !important; } body.dark-mode .right_col { background-color: var(--dm-bg) !important; min-height: 100vh !important; } /* ── Dashboard: botones de selector de fecha (#report_range) ────────────── */ /* Estos divs tienen style="background:#fff" inline en home.blade.php */ body.dark-mode #report_range, body.dark-mode #report_range_sys_sales_orders { background: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode #report_range *, body.dark-mode #report_range_sys_sales_orders * { color: var(--dm-text) !important; } /* Override genérico: cualquier div con background:#fff inline en dark mode */ body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background:#fff"], body.dark-mode [style*="background: white"], body.dark-mode [style*="background:white"] { background: var(--dm-bg2) !important; } /* Override genérico: color de texto oscuro forzado inline */ body.dark-mode [style*="color: #1a1d23"], body.dark-mode [style*="color:#1a1d23"], body.dark-mode [style*="color: #333"], body.dark-mode [style*="color:#333"], body.dark-mode [style*="color: #000"], body.dark-mode [style*="color:#000"], body.dark-mode [style*="color: black"], body.dark-mode [style*="color:black"] { color: var(--dm-text) !important; } /* ── AI Insights panel (home.blade.php) ─────────────────────────────────── */ body.dark-mode [style*="background:#faf5ff"], body.dark-mode [style*="background: #faf5ff"] { background: rgba(124,58,237,0.12) !important; border-left-color: #a78bfa !important; } /* ── Cloudbeds preview: tarjeta "Total Seleccionado" y paneles de división */ body.dark-mode [style*="background:#f5f5f5"], body.dark-mode [style*="background: #f5f5f5"] { background: var(--dm-bg3) !important; } /* Filas de totales en folio (verde muy claro) */ body.dark-mode [style*="background:#f9fff9"], body.dark-mode [style*="background: #f9fff9"], body.dark-mode [style*="background:#e8f5e9"], body.dark-mode [style*="background: #e8f5e9"] { background: rgba(22,163,74,0.10) !important; } /* Panel "División igual" (azul claro) */ body.dark-mode [style*="background:#f4faff"], body.dark-mode [style*="background: #f4faff"] { background: rgba(26,107,193,0.12) !important; border-color: rgba(26,107,193,0.30) !important; } /* Panel "Por noche" (amarillo claro) */ body.dark-mode [style*="background:#fffdf0"], body.dark-mode [style*="background: #fffdf0"] { background: rgba(217,119,6,0.10) !important; border-color: rgba(217,119,6,0.30) !important; } /* Panel "Parcial" (verde claro) */ body.dark-mode [style*="background:#f5fff5"], body.dark-mode [style*="background: #f5fff5"] { background: rgba(22,163,74,0.08) !important; border-color: rgba(22,163,74,0.25) !important; } /* Textos de color oscuro inline en el panel de Cloudbeds */ body.dark-mode [style*="color:#999"], body.dark-mode [style*="color: #999"], body.dark-mode [style*="color:#aaa"], body.dark-mode [style*="color: #aaa"], body.dark-mode [style*="color:#888"], body.dark-mode [style*="color: #888"] { color: var(--dm-text-muted) !important; } /* "Ya facturado" row — fondo verde con texto, mantener legible */ body.dark-mode tr[style*="background:#e8f5e9"] td, body.dark-mode tr[style*="background: #e8f5e9"] td { background: rgba(22,163,74,0.12) !important; color: #4ade80 !important; } /* ── Spinner / loading overlay ──────────────────────────────────────────── */ body.dark-mode .loader_bg, body.dark-mode #loader { background: var(--dm-bg2) !important; } /* ── Input groups ───────────────────────────────────────────────────────── */ body.dark-mode .input-group-addon { background-color: var(--dm-bg3) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } /* ── Checkbox & radio ───────────────────────────────────────────────────── */ body.dark-mode .checkbox label, body.dark-mode .radio label { color: var(--dm-text) !important; } /* ── Small and strong text ──────────────────────────────────────────────── */ body.dark-mode small { color: var(--dm-text-muted) !important; } body.dark-mode strong { color: var(--dm-text-strong) !important; } /* ── Panel title color in x_title ───────────────────────────────────────── */ body.dark-mode .x_title h2 i, body.dark-mode .x_title h2 small { color: var(--dm-text-muted) !important; }