/* ========================================================= Orion Admin - Dark mode "azul espacial" Se activa con data-bs-theme="dark" en (script pre-paint en index.html + ThemeService) Tokens base: --page-bg #0e1420 / --card-bg #182130 Cargado despues de bootstrap.min.css y mobile.css ========================================================= */ html[data-bs-theme=dark] { color-scheme: dark; /* ---- Paleta base ---- */ --page-bg: #0e1420; --card-bg: #182130; --surface-soft: #1f2a3d; --input-bg: #101a2b; --line: #26344a; --text-main: #d7e1f0; --text-muted: #93a5c4; --accent: #5b84c9; --accent-soft: #8fb3e8; /* ---- Variables core de Bootstrap (reemplaza la paleta gray del tema SB en dark) ---- */ --bs-body-bg: var(--page-bg); --bs-body-color: var(--text-main); --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-tertiary-bg: #131c2b; --bs-tertiary-bg-rgb: 19, 28, 43; --bs-tertiary-color: rgba(215, 225, 240, 0.55); --bs-tertiary-color-rgb: 215, 225, 240; --bs-secondary-color: var(--text-muted); --bs-secondary-color-rgb: 147, 165, 196; --bs-border-color: var(--line); --bs-border-color-translucent: rgba(255, 255, 255, 0.15); --bs-link-color: var(--accent-soft); --bs-link-color-rgb: 143, 179, 232; --bs-link-hover-color: #b3cdef; --bs-link-hover-color-rgb: 179, 205, 239; /* ---- Marca: acento aclarado para contraste sobre fondo oscuro ---- */ --bs-primary: var(--accent); --bs-primary-rgb: 91, 132, 201; --bs-primary-border-subtle: #24385e; --bs-primary-text-emphasis: #dbe4f7; --bs-primary-bg-subtle: #1d3557; --bs-secondary: #3a5f9e; --bs-secondary-rgb: 58, 95, 158; --bs-secondary-border-subtle: #1f3355; --bs-secondary-text-emphasis: #dbe4f7; --bs-secondary-bg-subtle: #1a2a45; --bs-light: #1f2a3d; --bs-light-rgb: 31, 42, 61; --bs-light-text-emphasis: var(--text-main); --bs-light-bg-subtle: var(--surface-soft); --bs-light-border-subtle: var(--line); --bs-dark: #0b111c; --bs-dark-rgb: 11, 17, 28; /* ---- PrimeNG (tema lara: variables --surface-*) ---- */ --surface-a: var(--card-bg); --surface-b: var(--page-bg); --surface-c: var(--surface-soft); --surface-d: var(--line); --surface-e: var(--card-bg); --surface-f: var(--card-bg); --text-color: var(--text-main); --text-color-secondary: var(--text-muted); --surface-0: #0b111c; --surface-50: var(--input-bg); --surface-100: #131c2b; --surface-200: var(--card-bg); --surface-300: var(--surface-soft); --surface-400: var(--line); --surface-500: #2f415f; --surface-600: #3a4f73; --surface-700: #4a648f; --surface-800: var(--accent); --surface-900: var(--accent-soft); --surface-ground: var(--page-bg); --surface-section: var(--card-bg); --surface-card: var(--card-bg); --surface-overlay: var(--card-bg); --surface-border: var(--line); --surface-hover: #24385e; --highlight-bg: #1d3557; --highlight-text-color: var(--accent-soft); --maskbg: rgba(4, 8, 16, 0.7); /* ---- SweetAlert2 (variables propias de S2 v11) ---- */ --swal2-background: var(--card-bg); --swal2-color: var(--text-main); --swal2-input-background: var(--input-bg); --swal2-confirmation-button-background-color: var(--accent); --swal2-confirmation-button-border-color: transparent; /* ---- Ambiente: scrollbar nativo (Firefox) ---- */ scrollbar-width: thin; scrollbar-color: var(--line) var(--page-bg); } /* Ambiente dark: seleccion de texto y scrollbar WebKit */ html[data-bs-theme=dark] ::selection { background-color: rgba(91, 132, 201, 0.45); color: #fff; } html[data-bs-theme=dark] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-bs-theme=dark] ::-webkit-scrollbar-track { background: var(--page-bg); } html[data-bs-theme=dark] ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--page-bg); } html[data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover { background: #3a4f73; } /* ===================================================== Botones (los .btn-* de bs-theme-overrides.css hardcodean colores claros) ===================================================== */ html[data-bs-theme=dark] .btn-light { --bs-btn-color: var(--text-main); --bs-btn-bg: var(--surface-soft); --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--text-main); --bs-btn-hover-bg: #2c3b58; --bs-btn-hover-border-color: var(--line); --bs-btn-active-color: var(--text-main); --bs-btn-active-bg: #2c3b58; --bs-btn-active-border-color: var(--line); } html[data-bs-theme=dark] .btn-primary { --bs-btn-color: #0e1420; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: #0e1420; --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent-soft); --bs-btn-focus-shadow-rgb: 143, 179, 232; --bs-btn-active-color: #0e1420; --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--accent-soft); --bs-btn-disabled-color: #0e1420; --bs-btn-disabled-bg: #3d5a8f; --bs-btn-disabled-border-color: #3d5a8f; } html[data-bs-theme=dark] .btn-outline-primary { --bs-btn-color: var(--accent-soft); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-color: #0e1420; --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent); --bs-btn-active-color: #0e1420; --bs-btn-active-border-color: var(--accent); } /* ===================================================== Layout: fondo de pagina (la capa SB hardcodea #f8f9fc) ===================================================== */ html[data-bs-theme=dark] #wrapper #content-wrapper, html[data-bs-theme=dark] #wrapper #content-wrapper #content { background-color: var(--page-bg); } /* Utilidades bg-gray de SB: escala invertida hacia azul */ html[data-bs-theme=dark] .bg-gray-100 { background-color: #131c2b !important; } html[data-bs-theme=dark] .bg-gray-200 { background-color: var(--card-bg) !important; } html[data-bs-theme=dark] .bg-gray-300 { background-color: var(--surface-soft) !important; } html[data-bs-theme=dark] .bg-gray-400 { background-color: var(--line) !important; } html[data-bs-theme=dark] .bg-gray-500 { background-color: #2f415f !important; } html[data-bs-theme=dark] .bg-gray-600 { background-color: #3a4f73 !important; } html[data-bs-theme=dark] .bg-gray-700 { background-color: #4a648f !important; } html[data-bs-theme=dark] .bg-gray-800 { background-color: var(--accent) !important; } html[data-bs-theme=dark] .bg-gray-900 { background-color: var(--accent-soft) !important; } /* Textos gray de SB */ html[data-bs-theme=dark] .text-gray-100 { color: #c7d5ec !important; } html[data-bs-theme=dark] .text-gray-200 { color: #a9bcdd !important; } html[data-bs-theme=dark] .text-gray-300 { color: var(--text-muted) !important; } html[data-bs-theme=dark] .text-gray-400 { color: #8597b8 !important; } html[data-bs-theme=dark] .text-gray-500 { color: #7588a8 !important; } html[data-bs-theme=dark] .text-gray-600 { color: #64779a !important; } html[data-bs-theme=dark] .text-gray-700 { color: #55688c !important; } html[data-bs-theme=dark] .text-gray-800 { color: #46587c !important; } html[data-bs-theme=dark] .text-gray-900 { color: #3a4a6e !important; } /* Estados de error del tema (bullets .error) */ html[data-bs-theme=dark] .error:before, html[data-bs-theme=dark] .error:after { background-color: var(--surface-soft); } /* ===================================================== Topbar y footer ===================================================== */ html[data-bs-theme=dark] .topbar { background-color: var(--card-bg); border-bottom: 1px solid var(--line); } html[data-bs-theme=dark] .topbar .nav-link { color: #b7c5dc; } html[data-bs-theme=dark] .topbar .nav-link:hover { color: var(--text-main); } html[data-bs-theme=dark] .topbar .nav-link:active { color: var(--accent); } html[data-bs-theme=dark] .topbar #sidebarToggleTop:hover, html[data-bs-theme=dark] .topbar #sidebarToggleTop:active { background-color: var(--surface-soft); } html[data-bs-theme=dark] .topbar .topbar-divider { border-right-color: var(--line); } /* bg-white generico (topbar, footer, burbujas de chat, etc.) */ html[data-bs-theme=dark] .bg-white { background-color: var(--card-bg) !important; } html[data-bs-theme=dark] footer.sticky-footer { background-color: var(--card-bg); border-top: 1px solid var(--line); } /* ===================================================== Cards ===================================================== */ html[data-bs-theme=dark] .card { background-color: var(--card-bg); border-color: var(--line); /* bootstrap.min.css (capa SB) hardcodea --bs-card-cap-bg: #f8f9fc sobre .card; sin esto card-footer/card-header-cap se ve casi blanca en dark */ --bs-card-cap-bg: var(--card-bg); } html[data-bs-theme=dark] .card-header { background-color: var(--bs-primary-border-subtle); border-color: var(--line); } html[data-bs-theme=dark] .card .card-header[data-bs-toggle=collapse]::after { color: var(--text-muted); } /* Custom cards (regional/dashboard, regional/user_summary) */ html[data-bs-theme=dark] .custom-card { background-color: var(--card-bg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); } html[data-bs-theme=dark] .card-label { color: var(--text-muted); } html[data-bs-theme=dark] .card-value { color: var(--text-main); } /* ===================================================== Sidebar y login: gradiente de marca mas oscuro en dark ===================================================== */ /* La utilidad BS .bg-gradient aplica background-image: var(--bs-gradient) !important, por eso se redefine la variable (el background-image directo no puede ganarle) */ html[data-bs-theme=dark] .bg-gradient { background-color: #1e3a66; --bs-gradient: linear-gradient(180deg, #1e3a66 10%, #0e2247 100%); } /* Login: cielo galáctico profundo (solo dark) */ html[data-bs-theme=dark] .login-bg { background-color: #0a1140; --bs-gradient: linear-gradient(180deg, #0d1745 0%, #050814 45%, #02030f 100%); } /* Login: la card de vidrio se eleva para despegarse del fondo medianoche */ html[data-bs-theme=dark] .login-bg .card { box-shadow: 0 1.5rem 4rem -0.5rem rgba(2, 4, 16, 0.7); } html[data-bs-theme=dark] .login-card { background-color: rgba(9, 17, 40, 0.72); border: 1px solid rgba(148, 178, 232, 0.18); } /* Constelación y toggle de contraseña claros en dark */ html[data-bs-theme=dark] .login-constellation { color: rgba(255, 255, 255, 0.75); } html[data-bs-theme=dark] .login-password-toggle { color: #c7d5ec; } html[data-bs-theme=dark] .login-password-toggle:hover { color: #ffffff; } /* Halo sutil del logo del panel de marca */ html[data-bs-theme=dark] .login-brand-logo { filter: drop-shadow(0 0 12px rgba(143, 179, 232, 0.35)); } html[data-bs-theme=dark] .sidebar .nav-item .collapse .collapse-inner .collapse-item, html[data-bs-theme=dark] .sidebar .nav-item .collapsing .collapse-inner .collapse-item { color: #c7d5ec; } html[data-bs-theme=dark] .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, html[data-bs-theme=dark] .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover { background-color: rgba(255, 255, 255, 0.1); } html[data-bs-theme=dark] .sidebar .nav-item .collapse .collapse-inner .collapse-item.active, html[data-bs-theme=dark] .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active { color: #fff; background-color: rgba(255, 255, 255, 0.15); } /* ===================================================== Dropdowns y tooltips ===================================================== */ html[data-bs-theme=dark] .dropdown-menu { background-color: var(--card-bg); border-color: var(--line); color: var(--text-main); } html[data-bs-theme=dark] .dropdown-item { color: var(--text-main); } html[data-bs-theme=dark] .dropdown-item:hover, html[data-bs-theme=dark] .dropdown-item:focus { background-color: var(--surface-soft); color: var(--text-main); } html[data-bs-theme=dark] .dropdown-item:active { background-color: #24385e; color: #fff; } html[data-bs-theme=dark] .dropdown-divider { border-color: var(--line); } html[data-bs-theme=dark] .dropdown .dropdown-list .dropdown-item { border-left-color: var(--line); } html[data-bs-theme=dark] .tooltip-inner { background-color: var(--surface-soft); color: var(--text-main); } html[data-bs-theme=dark] .tooltip.bs-tooltip-auto .arrow::before, html[data-bs-theme=dark] .tooltip.bs-tooltip-top .arrow::before, html[data-bs-theme=dark] .tooltip.bs-tooltip-bottom .arrow::before { border-top-color: var(--surface-soft); border-bottom-color: var(--surface-soft); } /* ===================================================== Modales ===================================================== */ html[data-bs-theme=dark] .modal-content { background-color: var(--card-bg); border-color: var(--line); color: var(--text-main); } html[data-bs-theme=dark] .modal-header, html[data-bs-theme=dark] .modal-footer { border-color: var(--line); } /* ===================================================== Formularios ===================================================== */ html[data-bs-theme=dark] .form-control, html[data-bs-theme=dark] .form-select { background-color: var(--input-bg); border-color: var(--line); color: var(--text-main); } html[data-bs-theme=dark] .form-control:focus, html[data-bs-theme=dark] .form-select:focus { background-color: var(--input-bg); border-color: var(--accent); color: var(--text-main); box-shadow: 0 0 0 0.25rem rgba(91, 132, 201, 0.25); } html[data-bs-theme=dark] .form-control::placeholder { color: #5f7396; } html[data-bs-theme=dark] .form-control:disabled, html[data-bs-theme=dark] .form-select:disabled { background-color: #131c2b; color: #7588a8; } html[data-bs-theme=dark] .input-group-text { background-color: var(--surface-soft); border-color: var(--line); color: var(--text-muted); } html[data-bs-theme=dark] label.form-label { color: var(--text-main); } /* ===================================================== Tablas ===================================================== */ html[data-bs-theme=dark] .table { color: var(--text-main); } html[data-bs-theme=dark] .table > :not(caption) > tr > * { border-color: var(--line); } /* Paginacion custom de los componentes de tabla (#285c7d no contrasta) */ html[data-bs-theme=dark] .page-number.current { background-color: var(--accent); border-color: var(--accent); color: #fff; } html[data-bs-theme=dark] .page-number.current:hover { background-color: var(--accent); border-color: var(--accent); } html[data-bs-theme=dark] .pagination-previous, html[data-bs-theme=dark] .pagination-next { color: var(--accent-soft); } /* Paginacion de Bootstrap (ngx-pagination) */ html[data-bs-theme=dark] .pagination .page-link { color: var(--text-muted); border-color: var(--line); } html[data-bs-theme=dark] .pagination .page-link:hover { color: var(--text-main); background-color: var(--surface-soft); border-color: var(--line); } html[data-bs-theme=dark] .pagination .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); color: #fff; } /* ===================================================== ng-select (blancos hardcodeados en src/styles.scss) ===================================================== */ html[data-bs-theme=dark] .ng-select .ng-select-container { background-color: var(--input-bg); border: 1px solid var(--line); color: var(--text-main); } html[data-bs-theme=dark] .ng-select .ng-select-container:hover { border-color: var(--accent); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } html[data-bs-theme=dark] .ng-select.ng-select-opened>.ng-select-container { background-color: var(--input-bg); border-color: var(--accent) var(--line) var(--line); } html[data-bs-theme=dark] .ng-select.ng-select-opened>.ng-select-container:hover { box-shadow: none; } html[data-bs-theme=dark] .ng-select.ng-select-opened>.ng-select-container .ng-arrow { border-color: transparent transparent var(--text-muted); } html[data-bs-theme=dark] .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover { border-color: transparent transparent var(--text-main); } html[data-bs-theme=dark] .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container { border-color: var(--accent); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(91, 132, 201, 0.15); } html[data-bs-theme=dark] .ng-select.ng-select-disabled>.ng-select-container { background-color: #131c2b; } html[data-bs-theme=dark] .ng-select .ng-select-container .ng-value-container .ng-value { background-color: #24385e; color: var(--text-main); } html[data-bs-theme=dark] .ng-select .ng-select-container .ng-value-container .ng-value:hover { background-color: #24385e; } html[data-bs-theme=dark] .ng-select .ng-select-container .ng-value-container .ng-value:hover .ng-value-label { background-color: var(--accent); color: #fff; } html[data-bs-theme=dark] .ng-select .ng-select-container .ng-value-container .ng-placeholder { color: #5f7396; } html[data-bs-theme=dark] .ng-select .ng-select-container .ng-value-container .ng-input>input { color: var(--text-main); } html[data-bs-theme=dark] .ng-select .ng-arrow-wrapper .ng-arrow { border-color: var(--text-muted) transparent transparent; } html[data-bs-theme=dark] .ng-select .ng-clear { color: var(--text-muted); } html[data-bs-theme=dark] .ng-dropdown-panel { background-color: var(--card-bg); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } html[data-bs-theme=dark] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option { background-color: transparent; color: var(--text-main); } html[data-bs-theme=dark] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected, html[data-bs-theme=dark] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked { color: var(--accent-soft); background-color: #1d3557; } html[data-bs-theme=dark] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked { background-color: #24385e; color: var(--text-main); } html[data-bs-theme=dark] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled { color: #44557a; } html[data-bs-theme=dark] .ng-dropdown-panel .ng-dropdown-header, html[data-bs-theme=dark] .ng-dropdown-panel .ng-dropdown-footer { background-color: var(--surface-soft); color: var(--text-muted); } /* ===================================================== SweetAlert2 (refuerzo sobre las variables) ===================================================== */ html[data-bs-theme=dark] .swal2-popup { background-color: var(--card-bg); color: var(--text-main); } html[data-bs-theme=dark] .swal2-styled { background-color: var(--accent); border-color: transparent; } /* ===================================================== Badges y nav-tabs ===================================================== */ html[data-bs-theme=dark] .badge.bg-light { background-color: #2f415f !important; color: var(--text-main); } html[data-bs-theme=dark] .nav-tabs { border-color: var(--line); } html[data-bs-theme=dark] .nav-tabs .nav-link { background-color: var(--card-bg) !important; color: var(--text-muted) !important; border-color: var(--line); } html[data-bs-theme=dark] .nav-tabs .nav-link:hover { border-color: var(--line); } html[data-bs-theme=dark] .nav-tabs .nav-link.active { background-color: var(--input-bg) !important; color: var(--text-main) !important; border-color: var(--line) var(--line) var(--input-bg); } /* ===================================================== Quill (editor de texto) ===================================================== */ html[data-bs-theme=dark] .ql-toolbar.ql-snow { background: var(--surface-soft); border-color: var(--line); } html[data-bs-theme=dark] .ql-container.ql-snow { background: var(--input-bg); border-color: var(--line); } html[data-bs-theme=dark] .ql-editor { color: var(--text-main); } html[data-bs-theme=dark] .ql-snow .ql-stroke { stroke: var(--text-main); } html[data-bs-theme=dark] .ql-snow .ql-fill { fill: var(--text-main); } html[data-bs-theme=dark] .ql-snow .ql-picker-label { color: var(--text-main); } html[data-bs-theme=dark] .ql-snow .ql-picker-label.ql-active, html[data-bs-theme=dark] .ql-snow .ql-picker-item:hover { color: #fff; } /* ===================================================== Visor de documentos: la UI se oscurece, las hojas del PDF se conservan blancas (.page-container) ===================================================== */ html[data-bs-theme=dark] .document-toolbar { background: linear-gradient(180deg, var(--surface-soft) 0%, var(--card-bg) 100%); border-color: var(--line); } html[data-bs-theme=dark] .document-toolbar .btn-icon { background-color: var(--surface-soft); color: var(--text-main); } html[data-bs-theme=dark] .document-toolbar .btn-icon:hover { background-color: #24385e; } html[data-bs-theme=dark] .document-toolbar .zoom-percent { background-color: var(--surface-soft); color: var(--text-main); } html[data-bs-theme=dark] .identification-container { background-color: var(--input-bg); border-color: var(--line); color: var(--text-main); } /* ===================================================== Utilidades de texto: .text-dark legible sobre oscuro ===================================================== */ html[data-bs-theme=dark] .text-dark { color: var(--text-main) !important; } /* ===================================================== Tabla: celdas de estado (semáforo) en dark ===================================================== */ html[data-bs-theme=dark] td.red, html[data-bs-theme=dark] td.green { color: #fff; font-weight: 600; } html[data-bs-theme=dark] td.red { background-color: rgba(220, 53, 69, 0.2); } html[data-bs-theme=dark] td.green { background-color: rgba(25, 135, 84, 0.22); } /* ===================================================== Chat (marketing): burbujas, nota y editor en dark ===================================================== */ html[data-bs-theme=dark] .chat-app .chat { border-left-color: var(--line); } html[data-bs-theme=dark] .people-list .chat-list li:hover, html[data-bs-theme=dark] .people-list .chat-list li.active { background-color: var(--surface-soft); } html[data-bs-theme=dark] .chat .chat-header { border-bottom-color: var(--line); } html[data-bs-theme=dark] .chat .chat-history { border-bottom-color: var(--card-bg); } html[data-bs-theme=dark] .chat .chat-history .message-data-time { color: var(--text-muted); } html[data-bs-theme=dark] .chat .chat-history .message { color: var(--text-main); } html[data-bs-theme=dark] .chat .chat-history .my-message, html[data-bs-theme=dark] .chat .chat-history .my-message:after { background-color: var(--surface-soft); border-bottom-color: var(--surface-soft); color: var(--text-main); } html[data-bs-theme=dark] .chat .chat-history .other-message, html[data-bs-theme=dark] .chat .chat-history .other-message:after { background-color: rgba(91, 132, 201, 0.22); border-bottom-color: rgba(91, 132, 201, 0.22); color: var(--text-main); } html[data-bs-theme=dark] .note { background-color: rgba(255, 193, 92, 0.14); color: #ffd98c; } html[data-bs-theme=dark] .event { background-color: rgba(148, 178, 232, 0.12); color: var(--text-main); } html[data-bs-theme=dark] .my-quill-editor { background-color: var(--input-bg); color: var(--text-main); } @media (max-width: 767.98px) { html[data-bs-theme=dark] .chat-app .people-list { background-color: var(--card-bg); } } /* ===================================================== Calendario en dark ===================================================== */ html[data-bs-theme=dark] .calendar .day-names, html[data-bs-theme=dark] .calendar .days li { border-bottom-color: var(--line); } html[data-bs-theme=dark] .calendar .days .today { background-color: rgba(91, 132, 201, 0.3); } html[data-bs-theme=dark] .calendar .days li:hover { background-color: rgba(148, 178, 232, 0.14); } html[data-bs-theme=dark] .calendar .days li.outside .date { color: var(--text-muted); } /* ===================================================== Modales que forzaban fondo blanco (.modal-dialog) ===================================================== */ html[data-bs-theme=dark] .modal-dialog, html[data-bs-theme=dark] .modal-dialog table { background-color: transparent; } /* ===================================================== Timeline de estado (single loan) en dark ===================================================== */ html[data-bs-theme=dark] .status-graph .line { background-color: var(--line); } html[data-bs-theme=dark] .status-graph .circle { background-color: rgba(148, 178, 232, 0.5); } /* ===================================================== Botones semánticos / outline en dark ===================================================== */ html[data-bs-theme=dark] .btn-outline-danger { --bs-btn-color: #ff8f8f; --bs-btn-border-color: #a9404f; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(146, 42, 55, 0.85); --bs-btn-hover-border-color: #c25663; --bs-btn-active-color: #fff; --bs-btn-active-bg: #7c2330; --bs-btn-active-border-color: #a9404f; --bs-btn-focus-shadow-rgb: 176, 61, 71; } html[data-bs-theme=dark] .btn-outline-success { --bs-btn-color: #7ee2a8; --bs-btn-border-color: #1f8a52; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(22, 107, 64, 0.85); --bs-btn-hover-border-color: #31a26a; --bs-btn-active-color: #fff; --bs-btn-active-bg: #166b40; --bs-btn-active-border-color: #1f8a52; --bs-btn-focus-shadow-rgb: 45, 148, 92; } html[data-bs-theme=dark] .btn-outline-warning { --bs-btn-color: #ffce6b; --bs-btn-border-color: #99701a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(153, 112, 26, 0.85); --bs-btn-hover-border-color: #b3852a; --bs-btn-active-color: #fff; --bs-btn-active-bg: #7c5c15; --bs-btn-active-border-color: #99701a; --bs-btn-focus-shadow-rgb: 211, 159, 58; } html[data-bs-theme=dark] .btn-outline-info { --bs-btn-color: #7ecbdd; --bs-btn-border-color: #147083; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(20, 112, 131, 0.85); --bs-btn-hover-border-color: #2e93a9; --bs-btn-active-color: #fff; --bs-btn-active-bg: #105b6a; --bs-btn-active-border-color: #147083; --bs-btn-focus-shadow-rgb: 33, 132, 153; } html[data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--text-main); --bs-btn-hover-bg: var(--surface-soft); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-color: var(--text-main); --bs-btn-active-bg: #24385e; --bs-btn-active-border-color: var(--accent); --bs-btn-focus-shadow-rgb: 91, 132, 201; } /* ===================================================== Accesibilidad: anillo de foco visible en dark ===================================================== */ html[data-bs-theme=dark] a:focus-visible, html[data-bs-theme=dark] .btn:focus-visible, html[data-bs-theme=dark] .form-control:focus-visible, html[data-bs-theme=dark] .form-select:focus-visible, html[data-bs-theme=dark] .form-check-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ===================================================== Exclusiones: los PDF de impresion/export conservan su blanco (usan background-color:white inline, ya blindados); no se agregan reglas aqui a proposito. ===================================================== */