/* ============================================================ Dark mode global del sistema planilla. Se activa con .dm-dark + data-bs-theme="dark" en . Bootstrap 5.3 hace ~70% del trabajo nativamente con data-bs-theme="dark"; este CSS cubre el resto (backgrounds custom, tablas no-Bootstrap, inputs con estilo propio, etc.). ============================================================ */ html.dm-dark { color-scheme: dark; --dm-bg: #0f1419; --dm-bg-2: #1a2027; --dm-bg-3: #232a32; --dm-border: #2d353e; --dm-text: #e4e6eb; --dm-text-2: #9ca3af; --dm-text-3: #6b7280; --dm-link: #60a5fa; --dm-link-hover: #93c5fd; --dm-accent: #3b82f6; --dm-success: #10b981; --dm-warning: #f59e0b; --dm-danger: #ef4444; } html.dm-dark body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } /* ---------- Texto general ---------- */ html.dm-dark h1, html.dm-dark h2, html.dm-dark h3, html.dm-dark h4, html.dm-dark h5, html.dm-dark h6 { color: var(--dm-text); } html.dm-dark p, html.dm-dark label, html.dm-dark span:not([class*="badge"]) { color: inherit; } html.dm-dark small, html.dm-dark .text-muted { color: var(--dm-text-2) !important; } /* ---------- Links ---------- */ html.dm-dark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) { color: var(--dm-link); } html.dm-dark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):hover { color: var(--dm-link-hover); } /* ---------- Cards (Bootstrap + custom) ---------- */ html.dm-dark .card, html.dm-dark .card-body, html.dm-dark .card-header, html.dm-dark .card-footer { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text); } html.dm-dark .card-header { background-color: var(--dm-bg-3) !important; } /* ---------- Containers custom ---------- */ html.dm-dark .container, html.dm-dark .container-fluid, html.dm-dark .container-x { color: var(--dm-text); } /* ---------- Tables ---------- */ html.dm-dark .table { --bs-table-bg: var(--dm-bg-2); --bs-table-color: var(--dm-text); --bs-table-border-color: var(--dm-border); --bs-table-striped-bg: var(--dm-bg-3); --bs-table-striped-color: var(--dm-text); --bs-table-hover-bg: rgba(59,130,246,.08); --bs-table-hover-color: var(--dm-text); color: var(--dm-text); border-color: var(--dm-border); } html.dm-dark .table thead { background-color: var(--dm-bg-3); color: var(--dm-text); } html.dm-dark .table thead th { border-color: var(--dm-border) !important; } html.dm-dark .table tbody tr { border-color: var(--dm-border); } /* Tablas sin clase .table (HTML plano) */ html.dm-dark table:not(.table) { background-color: var(--dm-bg-2); color: var(--dm-text); border-color: var(--dm-border); } html.dm-dark table:not(.table) th, html.dm-dark table:not(.table) td { border-color: var(--dm-border); } html.dm-dark table:not(.table) thead, html.dm-dark table:not(.table) tr:nth-child(even) { background-color: var(--dm-bg-3); } /* ---------- Inputs / form-control / form-select ---------- */ html.dm-dark .form-control, html.dm-dark .form-select, html.dm-dark input[type="text"]:not(.dm-noinvert), html.dm-dark input[type="number"]:not(.dm-noinvert), html.dm-dark input[type="date"]:not(.dm-noinvert), html.dm-dark input[type="time"]:not(.dm-noinvert), html.dm-dark input[type="month"]:not(.dm-noinvert), html.dm-dark input[type="password"]:not(.dm-noinvert), html.dm-dark input[type="email"]:not(.dm-noinvert), html.dm-dark input[type="search"]:not(.dm-noinvert), html.dm-dark input[type="tel"]:not(.dm-noinvert), html.dm-dark input[type="url"]:not(.dm-noinvert), html.dm-dark select:not(.dm-noinvert), html.dm-dark textarea:not(.dm-noinvert) { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dm-dark .form-control:focus, html.dm-dark .form-select:focus, html.dm-dark input:focus, html.dm-dark select:focus, html.dm-dark textarea:focus { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-accent) !important; box-shadow: 0 0 0 0.2rem rgba(59,130,246,.25) !important; } html.dm-dark input::placeholder, html.dm-dark textarea::placeholder { color: var(--dm-text-3) !important; } html.dm-dark input[type="date"]::-webkit-calendar-picker-indicator, html.dm-dark input[type="time"]::-webkit-calendar-picker-indicator, html.dm-dark input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(0.9); } /* ---------- Modals ---------- */ html.dm-dark .modal-content { background-color: var(--dm-bg-2) !important; color: var(--dm-text); border-color: var(--dm-border); } html.dm-dark .modal-header, html.dm-dark .modal-footer { border-color: var(--dm-border); } html.dm-dark .btn-close { filter: invert(1) grayscale(100%); } /* ---------- Navbars / nav-pills / nav-tabs ---------- */ html.dm-dark .navbar { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border); } html.dm-dark .nav-tabs { border-color: var(--dm-border); } html.dm-dark .nav-tabs .nav-link { color: var(--dm-text-2); border-color: transparent; } html.dm-dark .nav-tabs .nav-link.active { background-color: var(--dm-bg-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-bg-2); } html.dm-dark .nav-pills .nav-link { color: var(--dm-text-2); } html.dm-dark .nav-pills .nav-link.active { background-color: var(--dm-accent); color: white; } /* ---------- Dropdowns ---------- */ html.dm-dark .dropdown-menu { background-color: var(--dm-bg-2); border-color: var(--dm-border); color: var(--dm-text); } html.dm-dark .dropdown-item { color: var(--dm-text); } html.dm-dark .dropdown-item:hover { background-color: var(--dm-bg-3); color: var(--dm-text); } /* ---------- Alerts (suavizadas) ---------- */ html.dm-dark .alert-info { background-color: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93c5fd; } html.dm-dark .alert-success { background-color: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #6ee7b7; } html.dm-dark .alert-warning { background-color: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fcd34d; } html.dm-dark .alert-danger { background-color: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #fca5a5; } html.dm-dark .alert-secondary, html.dm-dark .alert-light { background-color: var(--dm-bg-3); border-color: var(--dm-border); color: var(--dm-text); } /* ---------- Buttons (Bootstrap outline) ---------- */ html.dm-dark .btn-outline-secondary { color: var(--dm-text-2); border-color: var(--dm-border); } html.dm-dark .btn-outline-secondary:hover { background-color: var(--dm-bg-3); color: var(--dm-text); } html.dm-dark .btn-light { background-color: var(--dm-bg-3); color: var(--dm-text); border-color: var(--dm-border); } /* ---------- Listas ---------- */ html.dm-dark .list-group-item { background-color: var(--dm-bg-2); color: var(--dm-text); border-color: var(--dm-border); } html.dm-dark .list-group-item:hover { background-color: var(--dm-bg-3); } /* ---------- Backgrounds bg-* utility ---------- */ html.dm-dark .bg-white, html.dm-dark .bg-light { background-color: var(--dm-bg-2) !important; color: var(--dm-text); } html.dm-dark .text-dark { color: var(--dm-text) !important; } html.dm-dark .text-black { color: var(--dm-text) !important; } /* ---------- Borders ---------- */ html.dm-dark .border, html.dm-dark .border-top, html.dm-dark .border-bottom, html.dm-dark .border-start, html.dm-dark .border-end { border-color: var(--dm-border) !important; } /* ---------- Code / pre ---------- */ html.dm-dark code, html.dm-dark pre, html.dm-dark kbd, html.dm-dark samp { background-color: var(--dm-bg-3) !important; color: #fcd34d !important; border-color: var(--dm-border) !important; } /* ---------- Hr ---------- */ html.dm-dark hr { border-color: var(--dm-border); opacity: 0.8; } /* ---------- Botón flotante toggle ---------- */ #dm-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 9998; width: 44px; height: 44px; border-radius: 50%; border: none; background: #1a2027; color: #fcd34d; font-size: 22px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.4); transition: all 0.2s; display: flex; align-items: center; justify-content: center; } #dm-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.5); } html:not(.dm-dark) #dm-toggle { background: #fff; color: #4a5568; border: 1px solid #e2e8f0; } #dm-toggle .icon-sun { display: none; } #dm-toggle .icon-moon { display: inline; } html.dm-dark #dm-toggle .icon-sun { display: inline; } html.dm-dark #dm-toggle .icon-moon { display: none; } /* Print: forzar modo claro al imprimir */ @media print { html.dm-dark, html.dm-dark body { background: #fff !important; color: #000 !important; } html.dm-dark * { background-color: transparent !important; color: #000 !important; border-color: #999 !important; } #dm-toggle { display: none !important; } } /* Anti-flash: aplicar inmediato si el theme está en localStorage */ html.dm-dark { background-color: #0f1419; } /* Excepciones: paneles que YA tienen su propio dark (flujo_caja v2) */ html.dm-dark .dm-skip { background: initial; color: initial; }