/* ========================================================= Modo oscuro BANK0 CRM / AppMecanico Se activa con data-theme="dark" en (persistido en localStorage) ========================================================= */ :root { --bank0-dark-bg: #111318; --bank0-dark-card: #1b1e26; --bank0-dark-sidebar: #161920; --bank0-dark-border: #2a2e3a; --bank0-dark-text: #e6e6ee; --bank0-dark-heading: #f8fafc; --bank0-dark-muted: #9aa0af; --bank0-dark-input: #232733; } html[data-theme="dark"] body { background-color: var(--bank0-dark-bg) !important; color: var(--bank0-dark-text); } /* Encabezados y títulos */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3, html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6 { color: var(--bank0-dark-heading) !important; } /* Tipografía y textos oscuros a claros */ html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-body, html[data-theme="dark"] strong, html[data-theme="dark"] b, html[data-theme="dark"] dt, html[data-theme="dark"] .fw-bold, html[data-theme="dark"] .fw-bolder, html[data-theme="dark"] .font-weight-bold, html[data-theme="dark"] .font-weight-bolder { color: var(--bank0-dark-heading) !important; } html[data-theme="dark"] .text-secondary, html[data-theme="dark"] .text-muted { color: var(--bank0-dark-muted) !important; } /* Enlaces que no sean botones ni badges */ html[data-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item) { color: #60a5fa !important; } html[data-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):hover { color: #93c5fd !important; } /* Fondos y contenedores */ html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-gray-200, html[data-theme="dark"] .bg-light { background-color: var(--bank0-dark-input) !important; border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .bg-white { background-color: var(--bank0-dark-card) !important; } html[data-theme="dark"] .main-content { background-color: var(--bank0-dark-bg) !important; } html[data-theme="dark"] .card, html[data-theme="dark"] .card-plain { background-color: var(--bank0-dark-card) !important; border-color: var(--bank0-dark-border) !important; box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background-color: transparent !important; border-color: var(--bank0-dark-border) !important; } /* Sidenav */ html[data-theme="dark"] .sidenav { background-color: var(--bank0-dark-sidebar) !important; } html[data-theme="dark"] .sidenav .navbar-nav .nav-link, html[data-theme="dark"] .sidenav .sidenav-normal { color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .sidenav .navbar-nav > .nav-item > .nav-link.active { color: #ffffff !important; background-color: var(--primary-color, #2b2d42) !important; background-image: linear-gradient(310deg, var(--primary-color, #2b2d42), var(--order-color, var(--primary-color, #2b2d42))) !important; } html[data-theme="dark"] .sidenav .collapse .nav-item .nav-link.active { background-color: var(--primary-color, #2b2d42) !important; background-image: linear-gradient(310deg, var(--primary-color, #2b2d42), var(--order-color, var(--primary-color, #2b2d42))) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important; border-radius: 0.5rem !important; } html[data-theme="dark"] .sidenav .collapse .nav-item .nav-link.active .sidenav-icon i, html[data-theme="dark"] .sidenav .collapse .nav-item .nav-link.active .sidenav-normal { color: #ffffff !important; opacity: 1 !important; } html[data-theme="dark"] .sidenav .icon-shape { background-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .sidenav .icon-shape i, html[data-theme="dark"] .sidenav .icon-shape i.text-dark, html[data-theme="dark"] .sidenav .icon-shape i.text-body { color: #f8fafc !important; opacity: 1 !important; } html[data-theme="dark"] .sidenav .nav-link i.ni-bold-down, html[data-theme="dark"] .sidenav .nav-link:not(.active) i, html[data-theme="dark"] .sidenav .nav-link:not(.active) .sidenav-icon i { color: var(--bank0-dark-text) !important; opacity: 0.95 !important; } /* SVGs en sidenav y en icon-shapes */ html[data-theme="dark"] .sidenav svg, html[data-theme="dark"] .sidenav svg .color-background, html[data-theme="dark"] .sidenav svg .color-foreground, html[data-theme="dark"] .icon-shape svg .color-background, html[data-theme="dark"] .icon-shape svg .color-foreground, html[data-theme="dark"] svg.text-dark .color-background, html[data-theme="dark"] svg.text-dark .color-foreground { fill: #f8fafc !important; } /* Iconos globales oscuros a claros */ html[data-theme="dark"] i.text-dark, html[data-theme="dark"] i.text-black, html[data-theme="dark"] i.text-body, html[data-theme="dark"] .text-dark > i, html[data-theme="dark"] .text-black > i, html[data-theme="dark"] .text-body > i, html[data-theme="dark"] .btn-link.text-dark, html[data-theme="dark"] .btn-link.text-dark i, html[data-theme="dark"] .btn-link.text-body i { color: var(--bank0-dark-heading) !important; } html[data-theme="dark"] .icon-shape.bg-white { background-color: var(--bank0-dark-input) !important; border: 1px solid var(--bank0-dark-border) !important; } html[data-theme="dark"] .icon-shape i.text-dark, html[data-theme="dark"] .icon-shape i.text-black, html[data-theme="dark"] .icon-shape i.text-body, html[data-theme="dark"] .icon-shape.text-dark i, html[data-theme="dark"] .icon-shape.bg-white i:not(.text-primary):not(.text-success):not(.text-info):not(.text-warning):not(.text-danger) { color: var(--bank0-dark-heading) !important; } /* Líneas del menú hamburguesa */ html[data-theme="dark"] .sidenav-toggler-line, html[data-theme="dark"] .navbar .sidenav-toggler-inner .sidenav-toggler-line { background: #f8fafc !important; } /* Atenuación de opacidad para que no desaparezcan iconos */ html[data-theme="dark"] i.opacity-4, html[data-theme="dark"] i.opacity-5, html[data-theme="dark"] i.opacity-6, html[data-theme="dark"] i.opacity-7, html[data-theme="dark"] i.opacity-8, html[data-theme="dark"] .sidenav i.opacity-6, html[data-theme="dark"] .sidenav i.opacity-8 { opacity: 0.95 !important; } html[data-theme="dark"] #sidenav-collapse-main ul.nav > .nav-item > .nav-link, html[data-theme="dark"] .sidenav .collapse .nav .nav-link { color: var(--bank0-dark-muted) !important; } /* Navbar superior */ html[data-theme="dark"] .navbar-main { background-color: var(--bank0-dark-card) !important; box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.4) !important; -webkit-transition: none !important; transition: none !important; } html[data-theme="dark"] .navbar-main .text-dark, html[data-theme="dark"] .navbar-main .text-body, html[data-theme="dark"] .navbar-main .nav-link, html[data-theme="dark"] .navbar-main .nav-link i, html[data-theme="dark"] .navbar-main .btn, html[data-theme="dark"] .navbar-main .btn i, html[data-theme="dark"] .navbar-main [data-theme-toggle] i, html[data-theme="dark"] .navbar-main .breadcrumb-item, html[data-theme="dark"] .navbar-main .breadcrumb-item a, html[data-theme="dark"] .navbar-main h6 { color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .navbar-main .badge.bg-light { background-color: var(--bank0-dark-input) !important; border-color: var(--bank0-dark-border) !important; color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .navbar-main .badge.bg-light .text-dark, html[data-theme="dark"] .navbar-main .badge.bg-light .text-secondary { color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .navbar-main .sidenav-toggler-line { background: #f8fafc !important; } html[data-theme="dark"] hr.horizontal, html[data-theme="dark"] .hr.horizontal { background-color: var(--bank0-dark-border) !important; opacity: 1 !important; } /* Tablas */ html[data-theme="dark"] .table, html[data-theme="dark"] .table > :not(caption) > * > * { color: var(--bank0-dark-text) !important; border-color: var(--bank0-dark-border) !important; background-color: transparent !important; } html[data-theme="dark"] .table thead th { color: #cbd5e1 !important; border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .table td a { color: #93c5fd !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.02) !important; } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.04) !important; } /* Formularios e inputs */ html[data-theme="dark"] .dataTables_wrapper .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] textarea.form-control { background-color: var(--bank0-dark-input) !important; border-color: var(--bank0-dark-border) !important; color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .input-group-text { background-color: var(--bank0-dark-input) !important; border-color: var(--bank0-dark-border) !important; color: #cbd5e1 !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--bank0-dark-muted) !important; } html[data-theme="dark"] .form-check-label, html[data-theme="dark"] label.form-label, html[data-theme="dark"] .form-label, html[data-theme="dark"] label, html[data-theme="dark"] .col-form-label { color: #e2e8f0 !important; } /* ========================================================= Interruptores (Switches) y Checkboxes en Modo Oscuro Pista y botón siempre visibles con alto contraste ========================================================= */ /* Pista del switch inactivo (desmarcado) */ html[data-theme="dark"] .form-switch .form-check-input, html[data-theme="dark"] .form-switch .form-check-input:not(:checked) { background-color: #334155 !important; border: 1px solid #475569 !important; background-image: none !important; opacity: 1 !important; } /* Manija del switch inactivo */ html[data-theme="dark"] .form-switch .form-check-input:after, html[data-theme="dark"] .form-switch .form-check-input:not(:checked):after { background-color: #cbd5e1 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important; } /* Pista del switch activo (marcado / toggled) */ html[data-theme="dark"] .form-switch .form-check-input:checked { background-color: var(--primary-color, #10b981) !important; border-color: var(--primary-color, #10b981) !important; background-image: none !important; opacity: 1 !important; } /* Manija del switch activo */ html[data-theme="dark"] .form-switch .form-check-input:checked:after { background-color: #ffffff !important; transform: translateX(21px) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important; } /* Switch en focus */ html[data-theme="dark"] .form-switch .form-check-input:focus { border-color: var(--primary-color, #10b981) !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important; background-image: none !important; } /* Checkbox regular (no switch) */ html[data-theme="dark"] .form-check:not(.form-switch) .form-check-input { background-color: var(--bank0-dark-input) !important; border: 1px solid var(--bank0-dark-border) !important; opacity: 1 !important; } html[data-theme="dark"] .form-check:not(.form-switch) .form-check-input:checked { background-color: var(--primary-color, #10b981) !important; border-color: var(--primary-color, #10b981) !important; background-image: none !important; } html[data-theme="dark"] .form-check:not(.form-switch) .form-check-input:checked:after { color: #ffffff !important; opacity: 1 !important; } /* Bordes */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end, html[data-theme="dark"] .border-1, html[data-theme="dark"] [class*="border-"] { border-color: var(--bank0-dark-border) !important; } /* Dropdowns */ html[data-theme="dark"] .dropdown-menu { background-color: var(--bank0-dark-card) !important; border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .dropdown-menu .dropdown-item { color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .dropdown-menu .dropdown-item:hover, html[data-theme="dark"] .dropdown-menu .dropdown-item:focus { background-color: var(--bank0-dark-input) !important; color: #ffffff !important; } /* Modales */ html[data-theme="dark"] .modal-content { background-color: var(--bank0-dark-card) !important; border-color: var(--bank0-dark-border) !important; color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .modal-title { color: var(--bank0-dark-heading) !important; } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Alertas y Cajas Informativas */ html[data-theme="dark"] .alert { border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .alert-light { background-color: var(--bank0-dark-input) !important; border-color: var(--bank0-dark-border) !important; color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .alert-light strong, html[data-theme="dark"] .alert-light b { color: var(--bank0-dark-heading) !important; } html[data-theme="dark"] .alert-light .text-secondary, html[data-theme="dark"] .alert-light .text-muted { color: #cbd5e1 !important; } /* Banner Informativo Binance */ html[data-theme="dark"] .binance-info-box { background-color: var(--bank0-dark-input) !important; border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .binance-info-box strong, html[data-theme="dark"] .binance-info-box .text-dark { color: var(--bank0-dark-heading) !important; } html[data-theme="dark"] .binance-info-box .text-secondary, html[data-theme="dark"] .binance-info-box .text-muted { color: #cbd5e1 !important; } html[data-theme="dark"] code { background-color: rgba(255, 255, 255, 0.08) !important; color: #fbbf24 !important; border: 1px solid var(--bank0-dark-border) !important; padding: 0.12rem 0.35rem !important; border-radius: 0.25rem !important; } /* Paginación */ html[data-theme="dark"] .pagination .page-item .page-link { background-color: var(--bank0-dark-input) !important; border-color: var(--bank0-dark-border) !important; color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .pagination .page-item.disabled .page-link { background-color: var(--bank0-dark-card) !important; color: var(--bank0-dark-muted) !important; } html[data-theme="dark"] .pagination .page-item.active .page-link, html[data-theme="dark"] .page-item.active .page-link, html[data-theme="dark"] .dt-paging .dt-paging-button.current { background: #000000 !important; background-color: #000000 !important; background-image: none !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } html[data-theme="dark"] .list-group-item { background-color: var(--bank0-dark-card) !important; border-color: var(--bank0-dark-border) !important; color: var(--bank0-dark-text) !important; } html[data-theme="dark"] select.form-select option { background-color: var(--bank0-dark-input); color: var(--bank0-dark-text); } /* Badges: Texto nítido y legible */ html[data-theme="dark"] .badge { color: #ffffff !important; } html[data-theme="dark"] .badge.badge-light, html[data-theme="dark"] .badge.bg-gradient-light, html[data-theme="dark"] .badge.bg-light, html[data-theme="dark"] .badge.bg-white, html[data-theme="dark"] .badge.bg-gray-50, html[data-theme="dark"] .badge.bg-gray-100, html[data-theme="dark"] .badge.bg-gray-200 { background-image: none !important; background-color: var(--bank0-dark-input) !important; color: #f8fafc !important; border: 1px solid var(--bank0-dark-border) !important; } html[data-theme="dark"] .badge.badge-light *, html[data-theme="dark"] .badge.bg-gradient-light *, html[data-theme="dark"] .badge.bg-light *, html[data-theme="dark"] .badge.bg-white *, html[data-theme="dark"] .badge.bg-gray-50 *, html[data-theme="dark"] .badge.bg-gray-100 *, html[data-theme="dark"] .badge.bg-gray-200 * { color: #f8fafc !important; } html[data-theme="dark"] .badge.bg-secondary, html[data-theme="dark"] .badge.bg-gradient-secondary { background-color: #475569 !important; color: #f8fafc !important; border-color: #64748b !important; } /* Badges suaves / Soft Badges en Modo Oscuro */ html[data-theme="dark"] .bg-success-soft { background-color: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; } html[data-theme="dark"] .bg-primary-soft { background-color: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; border: 1px solid rgba(59, 130, 246, 0.35) !important; } html[data-theme="dark"] .bg-info-soft { background-color: rgba(6, 182, 212, 0.2) !important; color: #38bdf8 !important; border: 1px solid rgba(6, 182, 212, 0.35) !important; } html[data-theme="dark"] .bg-warning-soft { background-color: rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; } html[data-theme="dark"] .bg-danger-soft { background-color: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.35) !important; } /* Definición global de soft badges para Modo Claro */ .bg-success-soft { background-color: rgba(23, 173, 55, 0.15) !important; color: #17ad37 !important; } .bg-primary-soft { background-color: rgba(33, 82, 255, 0.12) !important; color: #2152ff !important; } .bg-info-soft { background-color: rgba(33, 212, 253, 0.15) !important; color: #0f86a8 !important; } .bg-warning-soft { background-color: rgba(245, 57, 57, 0.15) !important; color: #c92a2a !important; } .bg-danger-soft { background-color: rgba(214, 8, 8, 0.15) !important; color: #d60808 !important; } /* Botones outline en modo oscuro */ html[data-theme="dark"] .btn-outline-dark { color: #e2e8f0 !important; border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--bank0-dark-input) !important; color: #ffffff !important; border-color: #64748b !important; } html[data-theme="dark"] .btn-outline-secondary { color: #94a3b8 !important; border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--bank0-dark-input) !important; color: #ffffff !important; } /* ========================================================= Pestañas (Nav Tabs y Nav Pills) en Modo Oscuro Fondo oscuro integrado, sin fondos blancos ni texto invisible ========================================================= */ /* Nav Tabs */ html[data-theme="dark"] .nav-tabs { border-bottom: 1px solid var(--bank0-dark-border) !important; } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--bank0-dark-muted) !important; border: 1px solid transparent !important; background-color: transparent !important; } html[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--bank0-dark-heading) !important; border-color: var(--bank0-dark-border) var(--bank0-dark-border) transparent !important; background-color: rgba(255, 255, 255, 0.03) !important; } html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link, html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--bank0-dark-card) !important; border-color: var(--bank0-dark-border) var(--bank0-dark-border) var(--bank0-dark-card) !important; color: #ffffff !important; border-top: 2px solid var(--primary-color, #10b981) !important; } html[data-theme="dark"] .nav-tabs-primary .nav-link.active { border-bottom: 3px solid var(--primary-color, #10b981) !important; background-color: var(--bank0-dark-card) !important; color: #ffffff !important; } /* Nav Pills */ html[data-theme="dark"] .nav-pills { background-color: var(--bank0-dark-input) !important; border: 1px solid var(--bank0-dark-border) !important; border-radius: 0.75rem; } html[data-theme="dark"] .nav-pills.bg-transparent { background-color: transparent !important; border: none !important; } html[data-theme="dark"] .nav-pills.bg-white, html[data-theme="dark"] .nav-pills.bg-gray-100, html[data-theme="dark"] .nav-pills.bg-gray-200 { background-color: var(--bank0-dark-input) !important; border: 1px solid var(--bank0-dark-border) !important; } html[data-theme="dark"] .nav-pills .nav-link { color: var(--bank0-dark-muted) !important; background-color: transparent !important; } html[data-theme="dark"] .nav-pills .nav-link:hover:not(.active) { color: var(--bank0-dark-heading) !important; background-color: rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] .nav-pills .nav-link.active, html[data-theme="dark"] .nav-pills .show > .nav-link { background-color: var(--bank0-dark-card) !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; border: 1px solid var(--bank0-dark-border) !important; } html[data-theme="dark"] .nav-pills .nav-link.active.bg-gradient-primary { background-color: var(--primary-color, #10b981) !important; background-image: none !important; color: #ffffff !important; border-color: var(--primary-color, #10b981) !important; } /* Moving Tab de Soft UI desactivado */ .moving-tab, html[data-theme="dark"] .moving-tab { display: none !important; } html[data-theme="dark"] #integrationTabs, html[data-theme="dark"] #settingsTabs { background-color: var(--bank0-dark-input, #232733) !important; border: 1px solid var(--bank0-dark-border, #2a2e3a) !important; padding: 0.35rem !important; border-radius: 0.75rem !important; } html[data-theme="dark"] #integrationTabs .nav-link, html[data-theme="dark"] #settingsTabs .nav-link { color: #94a3b8 !important; border-bottom: 3px solid transparent !important; } html[data-theme="dark"] #integrationTabs .nav-link:hover:not(.active), html[data-theme="dark"] #settingsTabs .nav-link:hover:not(.active) { color: #f8fafc !important; background-color: rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] #integrationTabs .nav-link.active, html[data-theme="dark"] #settingsTabs .nav-link.active { background-color: var(--bank0-dark-card, #1b1e26) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important; border: 1px solid var(--bank0-dark-border, #374151) !important; border-bottom: 3px solid var(--primary-color, #10b981) !important; } /* ========================================================= Iconos de Tablas (Módulos y Catálogos) en Modo Oscuro ========================================================= */ html[data-theme="dark"] .table .icon-shape, html[data-theme="dark"] .table .icon-shape.bg-white, html[data-theme="dark"] #tabla-modulos .icon-shape { background-color: var(--bank0-dark-input) !important; border: 1px solid var(--bank0-dark-border) !important; box-shadow: none !important; } html[data-theme="dark"] .table .icon-shape i, html[data-theme="dark"] .table td i.text-dark, html[data-theme="dark"] .table td a i.text-dark, html[data-theme="dark"] .table td a.text-secondary i, html[data-theme="dark"] #tabla-modulos .icon-shape i, html[data-theme="dark"] #tabla-modulos i { color: #f8fafc !important; opacity: 1 !important; } /* DataTables */ html[data-theme="dark"] .dataTables_wrapper .dataTables_info, html[data-theme="dark"] .dataTables_wrapper .dataTables_length label, html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label { color: var(--bank0-dark-muted) !important; } /* SweetAlert2 en modo oscuro */ html[data-theme="dark"] .swal2-popup { background-color: var(--bank0-dark-card) !important; color: var(--bank0-dark-text) !important; border: 1px solid var(--bank0-dark-border) !important; } html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container { color: var(--bank0-dark-heading) !important; } /* Logos */ html[data-theme="dark"] .logo-light { display: none !important; } html[data-theme="dark"] .logo-dark { display: inline-block !important; } /* Cafetín / POS selector & componentes en modo oscuro */ html[data-theme="dark"] .comprobante-selector-box { background-color: var(--bank0-dark-input) !important; border-color: var(--bank0-dark-border) !important; } html[data-theme="dark"] .doc-type-btn, html[data-theme="dark"] .doc-type-card { background-color: var(--bank0-dark-card) !important; border-color: var(--bank0-dark-border) !important; color: var(--bank0-dark-text) !important; } html[data-theme="dark"] .doc-type-btn .doc-name, html[data-theme="dark"] .doc-type-btn .doc-title, html[data-theme="dark"] .doc-type-card .doc-title { color: var(--bank0-dark-heading) !important; } html[data-theme="dark"] .doc-type-btn .doc-caption, html[data-theme="dark"] .doc-type-btn .doc-sub, html[data-theme="dark"] .doc-type-card .doc-sub { color: var(--bank0-dark-muted) !important; } html[data-theme="dark"] .doc-type-btn .doc-icon, html[data-theme="dark"] .doc-type-card .doc-icon { color: #e83e8c !important; } html[data-theme="dark"] .doc-type-input:not(:checked) + .doc-type-btn:hover, html[data-theme="dark"] .doc-type-radio:not(:checked) + .doc-type-card:hover { background-color: #2b3040 !important; border-color: #475569 !important; } html[data-theme="dark"] .doc-type-input:checked + .doc-type-btn, html[data-theme="dark"] .doc-type-radio:checked + .doc-type-card { background: linear-gradient(310deg, #7928ca, #cb0c9f) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(203, 12, 159, 0.45) !important; } html[data-theme="dark"] .doc-type-input:checked + .doc-type-btn .doc-icon, html[data-theme="dark"] .doc-type-input:checked + .doc-type-btn .doc-name, html[data-theme="dark"] .doc-type-input:checked + .doc-type-btn .doc-caption, html[data-theme="dark"] .doc-type-radio:checked + .doc-type-card * { color: #ffffff !important; } /* Modo Oscuro: Botones secundarios/generales blancos con letras negras (los botones primarios usan el color de marca) */ html[data-theme="dark"] .btn:not(.btn-link):not(.btn-close):not([data-theme-toggle]):not(.btn-primary):not(.bg-gradient-primary):not(.btn-outline-primary) { background-color: #ffffff !important; background-image: none !important; border-color: #ffffff !important; color: #000000 !important; box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.15), 0 2px 4px -1px rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .btn:not(.btn-link):not(.btn-close):not([data-theme-toggle]):not(.btn-primary):not(.bg-gradient-primary):not(.btn-outline-primary) i, html[data-theme="dark"] .btn:not(.btn-link):not(.btn-close):not([data-theme-toggle]):not(.btn-primary):not(.bg-gradient-primary):not(.btn-outline-primary) span, html[data-theme="dark"] .btn:not(.btn-link):not(.btn-close):not([data-theme-toggle]):not(.btn-primary):not(.bg-gradient-primary):not(.btn-outline-primary) strong { color: #000000 !important; } html[data-theme="dark"] .btn:not(.btn-link):not(.btn-close):not([data-theme-toggle]):not(.btn-primary):not(.bg-gradient-primary):not(.btn-outline-primary):hover, html[data-theme="dark"] .btn:not(.btn-link):not(.btn-close):not([data-theme-toggle]):not(.btn-primary):not(.bg-gradient-primary):not(.btn-outline-primary):focus, html[data-theme="dark"] .btn:not(.btn-link):not(.btn-close):not([data-theme-toggle]):not(.btn-primary):not(.bg-gradient-primary):not(.btn-outline-primary):active { background-color: #e2e8f0 !important; border-color: #e2e8f0 !important; color: #000000 !important; }