/* Dark mode — Woker. Se activa con [data-theme="dark"] en . */ html[data-theme="dark"] { /* Neutros del chrome (sidebar/nav/footer) */ --woker-ink: #e7e9ef; --woker-muted: #9aa1ae; --woker-subtle: #6f7684; /* Ver la nota del token en modern-ui-new.css. En oscuro --woker-subtle da 3,96:1 sobre el fondo de página y 3,57:1 sobre una card; este da 5,85 / 5,27 y 4,58 sobre surface-2. */ --woker-subtle-texto: #8b93a1; --woker-icon: #868d9b; --woker-border: #2e333f; /* Neutros propios del nav (ver sidebar-moderna.css) */ --woker-nav-ink: #e7e9ef; --woker-nav-text: #9aa1ae; --woker-nav-hover: #262b34; /* El borde de reposo de los controles. En claro va un paso por encima del borde de card (#e0e0e6) porque sobre papel blanco el campo se perdía; acá no hace falta ese escalón —sobre superficie oscura el mismo gris ya se lee— y sin esta línea el gris claro se filtraría a los selectores que dark-mode no repisa (input file, pill del checkbox, dropdown de select2) y prendería un borde casi blanco. */ --woker-border-control: var(--woker-border); /* El borde de hover de los controles: en claro es #d1d5db y no estaba redefinido acá, así que sobre superficie oscura pasar el mouse por un input, un .btn-flat o un input file prendía un borde casi blanco. Un paso por encima de --woker-border alcanza. */ --woker-border-fuerte: #454b5a; /* Marca translúcida sobre fondo oscuro (opacidades más altas que en claro) */ --woker-violet-soft: rgba(var(--woker-violet-rgb), .32); --woker-violet-soft-border: rgba(var(--woker-violet-rgb), .50); --woker-violet-tint: rgba(var(--woker-violet-rgb), .20); /* Tokens de los componentes modernos */ --modern-text-primary: #e7e9ef; --modern-text-secondary: #9aa1ae; --modern-text-muted: #9aa1ae; --modern-bg-white: #1d2027; --modern-bg-light: #272b34; --modern-border-color: #2e333f; --modern-shadow: 0 2px 12px rgba(0, 0, 0, .5); --modern-shadow-hover: 0 6px 22px rgba(0, 0, 0, .6); /* Superficies propias del dark */ --woker-page-bg: #14161b; --woker-surface: #1d2027; --woker-surface-2: #272b34; /* Roles semánticos: warn/info van sólidos claros en claro (fef6d9/e6edff) — en oscuro se reasignan a tint translúcido + fg más claro para que los tags (.estado-tag, .tipo-*, .detalle-accion-warning) queden legibles. */ --woker-warn: #fbbf24; --woker-warn-bg: rgba(251, 191, 36, .15); --woker-info: #a5b4fc; --woker-info-bg: rgba(165, 180, 252, .15); /* Mismo criterio para el rojo: el #dc2626 de claro casi no se despega del fondo oscuro. Los rellenos sólidos con texto blanco se pinan aparte más abajo. */ --woker-danger: #f0788a; --woker-danger-bg: rgba(240, 120, 138, .14); --woker-danger-rgb: 240, 120, 138; /* Y para el gris: el #f1f1f4 de claro es un bloque casi blanco sobre la superficie oscura, y su fg #52525b queda ilegible encima. */ --woker-neutral: #b6bcc8; --woker-neutral-bg: rgba(182, 188, 200, .13); /* Que los controles nativos (scrollbars, date pickers) usen tema oscuro */ color-scheme: dark; } /* ---- Selección de texto: blanco translúcido en vez del accent del SO ---- */ html[data-theme="dark"] ::selection { background: rgba(255, 255, 255, .22); color: #fff; } html[data-theme="dark"] ::-moz-selection { background: rgba(255, 255, 255, .22); color: #fff; } /* ---- Fondo de página ---- El fondo va en el ELEMENTO RAÍZ, no en el body ni en .content-wrapper. Motivo: el sidebar de AdminLTE es position:absolute y su alto lo define su contenido, así que cuando el nav es más alto que la pantalla el documento crece más que el body — y esa franja de abajo quedaba con el page-bg pelado, sin el degradé, leyéndose como una banda negra al costado del nav. El fondo del root es el único cuya área de pintado es TODO el canvas (el del body se recorta a su caja, aun propagándose), así que pintándolo acá la franja queda del mismo color que el resto. De paso desaparece el corte a la altura del navbar, que es hermano de .content-wrapper. background-attachment:fixed ancla el degradé al viewport: nunca se ve una repetición. */ html[data-theme="dark"] { background: linear-gradient(135deg, rgba(var(--woker-violet-rgb), .045) 0%, rgba(var(--woker-violet-rgb), .015) 100%), var(--woker-page-bg); background-attachment: fixed; } html[data-theme="dark"] body { background: transparent !important; color: var(--woker-ink); } html[data-theme="dark"] .content-wrapper { background: transparent !important; } /* ---- Sidebar ---- */ html[data-theme="dark"] .main-sidebar { background-color: var(--woker-surface) !important; border-right-color: var(--woker-border); } html[data-theme="dark"] .main-sidebar .brand-link { background-color: var(--woker-surface) !important; border-bottom-color: var(--woker-border); } html[data-theme="dark"] .main-sidebar .brand-link .brand-logo-icon { background-color: var(--woker-surface-2); border-color: var(--woker-border); } html[data-theme="dark"] .main-sidebar .sidebar { scrollbar-color: #3a3f4b transparent; } html[data-theme="dark"] .main-sidebar .sidebar::-webkit-scrollbar-thumb { background-color: #3a3f4b; } html[data-theme="dark"] .main-sidebar .sidebar::-webkit-scrollbar-thumb:hover { background-color: #474d5b; } /* ---- Hover de ítems del sidebar: pill violeta (fondo solo en .nav-link, no en el

) ---- */ html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:hover { background-color: var(--woker-violet-tint) !important; } html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:hover, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:hover p { color: var(--woker-ink) !important; } html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:hover .nav-icon { color: var(--woker-violet) !important; } /* ---- Activo: mismo pill sutil que el hover (el soft al 32% quedaba demasiado saturado sobre la superficie oscura). El texto y el ícono siguen en violeta. ---- */ html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active, html[data-theme="dark"] .main-sidebar .nav-sidebar > .nav-item > .nav-link.active, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-treeview .nav-link.active, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.has-treeview:not(.menu-open):not(.menu-is-opening):has(.nav-treeview .nav-link.active) > .nav-link { background-color: var(--woker-violet-tint) !important; } /* Texto en blanco y sólo el ícono en violeta, igual que el hover. */ html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active p, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active .right, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.has-treeview:not(.menu-open):not(.menu-is-opening):has(.nav-treeview .nav-link.active) > .nav-link, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.has-treeview:not(.menu-open):not(.menu-is-opening):has(.nav-treeview .nav-link.active) > .nav-link p { color: var(--woker-ink) !important; } html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active .nav-icon, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.has-treeview:not(.menu-open):not(.menu-is-opening):has(.nav-treeview .nav-link.active) > .nav-link .nav-icon { color: var(--woker-violet) !important; } /* ---- Jerarquía de ítems del sidebar: opciones en gris tenue, sección abierta en blanco ---- */ html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link p { color: var(--woker-muted); } /* Misma historia que en sidebar-moderna.css: el foco pegado del que abre un submenú dejaba el ítem en el #343a40 de AdminLTE, un gris distinto al del resto. */ html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:focus:not(:focus-visible):not(:hover) { color: var(--woker-muted); } html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.menu-open > .nav-link:not(.active), html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.menu-open > .nav-link:not(.active) p { color: #fff !important; } /* ---- Ítem activo: en claro el pill va violeta claro con texto violeta, pero en oscuro ese violeta sobre el pill translúcido casi no se lee. El texto pasa a blanco y el ícono se queda en violeta (el pill ya marca el estado). ---- */ html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active, html[data-theme="dark"] .main-sidebar .nav-sidebar > .nav-item > .nav-link.active, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active p, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active .right { color: #fff !important; } html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active .nav-icon { color: var(--woker-violet) !important; } /* Mismo criterio para el padre con submenú cerrado que contiene la pantalla abierta: también se pinta con pill violeta + texto violeta. */ html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.has-treeview:not(.menu-open):not(.menu-is-opening):has(.nav-treeview .nav-link.active) > .nav-link, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.has-treeview:not(.menu-open):not(.menu-is-opening):has(.nav-treeview .nav-link.active) > .nav-link p, html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.has-treeview:not(.menu-open):not(.menu-is-opening):has(.nav-treeview .nav-link.active) > .nav-link .right { color: #fff !important; } html[data-theme="dark"] .main-sidebar .nav-sidebar .nav-item.has-treeview:not(.menu-open):not(.menu-is-opening):has(.nav-treeview .nav-link.active) > .nav-link .nav-icon { color: var(--woker-violet) !important; } /* ---- Hover de ítems de dropdown (Bootstrap fuerza color casi negro en :hover) ---- */ html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--woker-violet-tint); color: var(--woker-ink); } html[data-theme="dark"] .user-chip-menu-logout:hover, html[data-theme="dark"] .user-chip-menu-logout:focus { color: #f87171; background-color: rgba(220, 53, 69, .15); } /* ---- Navbar superior ---- */ html[data-theme="dark"] .main-header.navbar { background-color: var(--woker-surface) !important; border-bottom-color: var(--woker-border); } html[data-theme="dark"] .navbar-search-woker input.form-control { background-color: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .navbar-search-woker input.form-control:focus { background-color: var(--woker-surface-2); } html[data-theme="dark"] .navbar-search-woker input.form-control::placeholder { color: #7d8493; } /* ---- Dropdowns (incluye user-chip-menu) ---- */ html[data-theme="dark"] .dropdown-menu { background-color: var(--woker-surface); border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .dropdown-item { color: var(--woker-ink); } html[data-theme="dark"] .dropdown-divider { border-top-color: var(--woker-border); } /* ---- Cards / page-header / contenedores modernos ---- */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background-color: var(--woker-surface); border-color: var(--woker-border); color: var(--woker-ink); } /* ---- Tablas (modernas y bootstrap) ---- */ html[data-theme="dark"] .table-modern, html[data-theme="dark"] .table { color: var(--woker-ink); background-color: transparent; } html[data-theme="dark"] .table-modern thead th, html[data-theme="dark"] .table thead th { color: var(--woker-muted); border-color: var(--woker-border); } html[data-theme="dark"] .table-modern tbody td, html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--woker-border); } html[data-theme="dark"] .table-modern tbody tr:hover, html[data-theme="dark"] .table-hover tbody tr:hover { background-color: #23262f; } /* ---- Forms ---- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] select.form-control, html[data-theme="dark"] textarea.form-control { background-color: var(--woker-surface-2) !important; border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .form-control::placeholder { color: #7d8493; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] select.form-control:focus { background-color: var(--woker-surface-2) !important; border-color: var(--woker-violet); box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .25); } /* Desplegable NATIVO del que pasaron a select2 no dependen de esto (su desplegable es un div). */ html[data-theme="dark"] select.form-control option, html[data-theme="dark"] select.form-control optgroup, html[data-theme="dark"] select.custom-select option, html[data-theme="dark"] select.custom-select optgroup { background-color: var(--woker-surface-2); color: var(--woker-ink); } html[data-theme="dark"] label, html[data-theme="dark"] .form-label, html[data-theme="dark"] .col-form-label { color: var(--woker-muted); } html[data-theme="dark"] .input-group-text { background-color: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-muted); } /* El resaltado de foco del input-group (modern-ui-new.css) va al alfa del tema oscuro, y el input sigue cediendo el suyo: acá hace falta repetirlo porque la regla clara pierde contra el `html[data-theme="dark"] .form-control:focus` de arriba y quedarían dos halos. */ html[data-theme="dark"] .input-group:focus-within { box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb), .25); } html[data-theme="dark"] .input-group:focus-within .form-control:focus, html[data-theme="dark"] .input-group:focus-within select.form-control:focus { box-shadow: none; } /* El input file (.custom-file) no necesita regla acá: modern-ui-new.css lo define con los mismos tokens que .form-control, así que acompaña el tema solo. */ /* Switches y checks custom: apagados, Bootstrap los pinta blancos con la perilla gris y encandilan sobre la superficie oscura. Riel a superficie-2 y perilla al gris de íconos. */ html[data-theme="dark"] .custom-control-input:not(:checked) ~ .custom-control-label::before { background-color: var(--woker-surface-2); border-color: #3a3f4b; } /* El switch tiene riel, no casilla: apagado va al borde (como el toggle de Modo oscuro y los de monitoreo), no a superficie-2, que sobre la card se pierde. */ html[data-theme="dark"] .custom-switch .custom-control-input:not(:checked) ~ .custom-control-label::before { background-color: var(--woker-border); } html[data-theme="dark"] .custom-switch .custom-control-input:not(:checked) ~ .custom-control-label::after { background-color: var(--woker-icon); } html[data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label::before { background-color: #23262f; } /* Filtros estilo "renglón" (listado.css): overrides dark que igualan su especificidad */ html[data-theme="dark"] .filters-card .form-control, html[data-theme="dark"] .filters-card select.form-control { background-color: transparent !important; border-bottom-color: var(--woker-border) !important; } html[data-theme="dark"] .filters-card .form-control:hover:not(:focus), html[data-theme="dark"] .filters-card select.form-control:hover:not(:focus) { border-bottom-color: #3a3f4b !important; } html[data-theme="dark"] .filters-card .select2-container--default .select2-selection--single, html[data-theme="dark"] .filters-card .select2-container--default .select2-selection--multiple { background-color: transparent !important; border-bottom-color: var(--woker-border) !important; } /* Chips del select2 múltiple: el violeta puro de listado.css no llega a 3:1 sobre superficie oscura */ html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--woker-violet-tint) !important; border-color: var(--woker-violet-soft-border) !important; color: color-mix(in srgb, var(--woker-violet) 45%, #fff) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: color-mix(in srgb, var(--woker-violet) 45%, #fff) !important; } /* ---- Select2 ---- */ html[data-theme="dark"] .select2-container--default .select2-selection { background-color: var(--woker-surface-2) !important; border-color: var(--woker-border) !important; } html[data-theme="dark"] .select2-container--default .select2-selection__rendered { color: var(--woker-ink) !important; } html[data-theme="dark"] .select2-container--default .select2-selection__placeholder { color: #7d8493; } html[data-theme="dark"] .select2-dropdown { background-color: var(--woker-surface); border-color: var(--woker-border); } /* Opciones del select2: aclaradas para no quedar negro sobre negro */ html[data-theme="dark"] .select2-results__option { color: var(--woker-ink) !important; } /* Buscador del select2 (dropdown): superficie oscura también en :focus */ html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field, html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus { background: var(--woker-surface-2) !important; color: var(--woker-ink) !important; border-color: var(--woker-border) !important; box-shadow: none !important; } /* Buscador inline del múltiple: transparente entre chips */ html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field { background: transparent !important; color: var(--woker-ink) !important; border: none !important; } /* Highlight/selected de las opciones: superficie oscura en vez de barra blanca */ html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--woker-surface-2) !important; color: var(--woker-ink) !important; } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #30343f !important; color: var(--woker-ink) !important; } /* ---- Modales ---- */ html[data-theme="dark"] .modal-content { background-color: var(--woker-surface); color: var(--woker-ink); border-color: var(--woker-border); } /* header/footer traen un fondo claro fijo con !important en modern-modals.css: hay que pisarlo */ html[data-theme="dark"] .modal-header { background: var(--woker-surface-2) !important; border-bottom-color: var(--woker-border) !important; } html[data-theme="dark"] .modal-footer { background: var(--woker-surface-2) !important; border-top-color: var(--woker-border) !important; } html[data-theme="dark"] .modal-body { background: var(--woker-surface) !important; } /* Los .modal-woker van sin divisores y con una sola superficie: hay que anular la franja surface-2 que las dos reglas de arriba le ponen al header y al footer. */ html[data-theme="dark"] .modal-woker .modal-header, html[data-theme="dark"] .modal-woker .modal-footer { background: transparent !important; border-color: transparent !important; } /* Salvo los de importar, que sí llevan divisores (ver "Patrón: modal de importación" en modern-ui-new.css): la superficie sigue siendo única, pero las líneas vuelven. */ html[data-theme="dark"] .modal-importacion .modal-header { border-bottom-color: var(--woker-border) !important; } html[data-theme="dark"] .modal-importacion .modal-footer { border-top-color: var(--woker-border) !important; } /* Las filas de opción booleana del cuerpo (modern-ui-new.css) comparten la caja de los campos, así que también comparten su superficie: en oscuro los `.form-control` van a surface-2. */ html[data-theme="dark"] .modal-woker .modal-body .form-check:not(.opciones-check *), html[data-theme="dark"] .campo-check { background-color: var(--woker-surface-2); } html[data-theme="dark"] .modal-woker .modal-body .form-check:not(.opciones-check *):has(.form-check-input:disabled), html[data-theme="dark"] .campo-check:has(input:disabled) { background-color: var(--woker-surface); } /* La etiqueta del booleano es el nombre de la opción, no un apoyo, así que va en la tinta principal como en claro. Hay que repetirlo acá porque el `html[data-theme="dark"] label` genérico de más arriba le gana por especificidad a la regla de modern-ui-new.css. */ html[data-theme="dark"] .campo-check > label { color: var(--woker-ink); } html[data-theme="dark"] .close { color: var(--woker-ink); text-shadow: none; } /* Modal de confirmación de eliminación (modals/confirmarEliminarModal.html): modern-modals.css le fija las tres secciones en #ffffff y las tintas en gris oscuro, así que en oscuro quedaba ilegible. Superficie y textos a tokens; la línea roja del borde izquierdo se mantiene. */ html[data-theme="dark"] .modal-delete-clean, html[data-theme="dark"] .modal-delete-clean .modal-header, html[data-theme="dark"] .modal-delete-clean .modal-body, html[data-theme="dark"] .modal-delete-clean .modal-footer { background: var(--woker-surface) !important; } /* modern-modals.css fija .modal-title en #212529 con !important: sin !important acá no gana, por más específico que sea el selector. */ html[data-theme="dark"] .modal-delete-clean .modal-title, html[data-theme="dark"] .confirmation-message, html[data-theme="dark"] .confirmation-message strong { color: var(--woker-ink) !important; } html[data-theme="dark"] .confirmation-warning { color: var(--woker-muted) !important; } html[data-theme="dark"] .modal-header .close, html[data-theme="dark"] .modal-header .close span { color: var(--woker-ink) !important; } /* El aro del botón de cierre viene de #dee2e6: casi blanco sobre la superficie oscura. */ html[data-theme="dark"] .modal-header .close { border-color: var(--woker-border) !important; } /* El asterisco de campo obligatorio usa .text-danger: el #dc3545 de Bootstrap queda en 3,6:1 sobre la superficie oscura. Va al danger del tema, que sí llega a AA. */ html[data-theme="dark"] .text-danger { color: var(--woker-danger) !important; } /* Los errores de formulario (avisos.css) salen de --woker-danger, que ya está reasignado arriba: sólo hay que pisar el relleno sólido, que con la tinta clara deja el texto blanco ilegible. */ html[data-theme="dark"] .btn-minimal.btn-danger { background-color: #c0394b; border-color: #c0394b; color: #fff; } /* Las tintas de texto sobre tinte se invierten: en oscuro hay que ACLARARLAS. El verde va a los mismos valores que gestor.css ya eligió para .status-finalizada. Ojo: se reasignan los -fg y no --woker-ok/--woker-danger, porque esos dos también son relleno sólido con texto blanco (.btn-minimal.btn-success/-danger) y aclararlos ahí dejaría el botón ilegible. */ html[data-theme="dark"] { --woker-ok-fg: #34d399; --woker-danger-fg: var(--woker-danger); } /* El tinte verde de fondo sí se sube: el rgba(22,163,74,.1) de claro casi no se despega de la superficie oscura. */ html[data-theme="dark"] .alert-success { background: rgba(26, 166, 114, .15); } /* El × del alert tiene que seguir el color del rol: la regla global de .close de más arriba (línea de --woker-ink) le gana al `color: inherit` de la base por especificidad. */ html[data-theme="dark"] .alert .close { color: inherit; } /* `.alert-light` no lo tokeniza modern-ui-new (queda blanco Bootstrap) y el `.border` utility le suma un borde #dee2e6 casi blanco; el `!important` gana al `!important` de `.border`. */ html[data-theme="dark"] .alert-light { background: var(--woker-surface-2); border-color: var(--woker-border) !important; color: var(--woker-ink); } /* ---- Paginador custom ---- */ html[data-theme="dark"] .custom-pagination .page-btn:not(.active) { background: var(--woker-surface); border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .custom-pagination .page-btn:hover:not(.disabled):not(.active) { background: var(--woker-surface-2); } /* El activo conserva el pill violeta de marca para que se distinga la página actual. */ html[data-theme="dark"] .custom-pagination .page-btn.active { background: var(--woker-violet); border-color: var(--woker-violet); color: #fff; } /* ---- Texto general / 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 { color: var(--woker-ink); } html[data-theme="dark"] hr { border-top-color: var(--woker-border); } html[data-theme="dark"] .text-muted { color: var(--woker-muted) !important; } /* ---- Botones flat / minimal ---- */ html[data-theme="dark"] .btn-flat { background: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .btn-flat:hover { background: #30343f; border-color: #3a3f4b; color: var(--woker-ink); } html[data-theme="dark"] .btn-flat .ico { color: var(--woker-ink); } html[data-theme="dark"] .btn-minimal.btn-outline { background: var(--woker-surface-2); color: var(--woker-muted); border-color: var(--woker-border); } html[data-theme="dark"] .btn-minimal.btn-outline:hover { background: #30343f; color: var(--woker-ink); border-color: #3a3f4b; } /* ---- Cards "soft" ---- */ html[data-theme="dark"] .card-soft { background: var(--woker-surface); border-color: var(--woker-border); } /* ---- Tabla moderna (.tabla-moderna es la clase real del listado) ---- */ html[data-theme="dark"] .tabla-moderna thead th { background: var(--woker-surface-2); color: var(--woker-muted); border-bottom-color: var(--woker-border); } html[data-theme="dark"] .tabla-moderna tbody td { color: var(--woker-ink); border-bottom-color: var(--woker-border); } html[data-theme="dark"] .tabla-moderna tbody tr:hover { background: #23262f; } /* Compat .table-modern (gestor.css): en claro comparte color con .tabla-moderna, pero su `color` propio en el td pisaba el ink que hereda del . Se iguala al de la tabla del sistema. */ html[data-theme="dark"] .table-modern tbody td { color: var(--woker-ink); } /* Link al detalle: el violeta pleno queda oscuro sobre la superficie oscura — se aclara igual que el resto del texto de marca en oscuro (.btn-collapse de filtros). */ html[data-theme="dark"] .link-detalle { color: color-mix(in srgb, var(--woker-violet) 55%, #fff); } html[data-theme="dark"] .link-detalle:hover { color: color-mix(in srgb, var(--woker-violet) 40%, #fff); } /* Ídem para el link de texto corrido sin clase (la regla `.main-content a:not([class])` de la base): el violeta pleno da 3,15:1 sobre la superficie oscura. */ html[data-theme="dark"] .main-content a:not([class]) { color: color-mix(in srgb, var(--woker-violet) 55%, #fff); } html[data-theme="dark"] .main-content a:not([class]):hover { color: color-mix(in srgb, var(--woker-violet) 40%, #fff); } /* ---- Chips de tipo / pills de estado ---- */ html[data-theme="dark"] .tipo-chip { background: transparent; color: #b9c0cc; border-color: var(--woker-border, #3a4150); } /* El teal de claro es un bloque casi blanco sobre la superficie oscura: va tinte translúcido + tinta clara. Refacturación sale de --woker-info/-bg, que ya se reasignan arriba, pero igual necesita entrada propia: la regla genérica de .tipo-chip de acá arriba le gana en especificidad a los modificadores y le apagaría el fondo. */ html[data-theme="dark"] .tipo-chip.tipo-chip-renovacion { color: #5eead4; background: rgba(45, 212, 191, .15); border-color: transparent; } html[data-theme="dark"] .tipo-chip.tipo-chip-refacturacion { color: var(--woker-info); background: var(--woker-info-bg); border-color: transparent; } html[data-theme="dark"] .estado-alta { color: #34d399; background: rgba(26, 166, 114, .15); } html[data-theme="dark"] .estado-baja { color: #f87171; background: rgba(214, 69, 91, .15); } html[data-theme="dark"] .estado-visualizacion { color: #e3b341; background: rgba(184, 134, 11, .15); } /* ---- Filtros: línea de card y banda del header bajadas a superficie oscura ---- */ html[data-theme="dark"] .filters-card { border-color: var(--woker-border); } html[data-theme="dark"] .filters-header { background: var(--woker-surface-2); } html[data-theme="dark"] .filters-title { color: var(--woker-ink); } /* El violeta de marca puro es muy oscuro como texto sobre superficie dark: se aclara con blanco */ html[data-theme="dark"] .filters-header .btn-collapse { color: color-mix(in srgb, var(--woker-violet) 55%, #fff); } html[data-theme="dark"] .filters-header .btn-collapse:hover { color: color-mix(in srgb, var(--woker-violet) 40%, #fff); } html[data-theme="dark"] .filters-card:has(#filters-container:not([style*="display: none"])) .filters-header { border-bottom-color: var(--woker-border); } html[data-theme="dark"] .custom-pagination .page-btn:hover:not(.disabled):not(.active) { background: var(--woker-surface-2); } /* Separador arriba del paginador: bajado al borde oscuro sutil */ html[data-theme="dark"] .tabla-footer .custom-pagination-wrapper, html[data-theme="dark"] .custom-pagination-wrapper { border-top-color: var(--woker-border); } /* ---- Modal de importación: títulos y hint reasignados a las tintas del tema ---- */ html[data-theme="dark"] .import-step-title { color: var(--woker-ink); } html[data-theme="dark"] .import-step-desc { color: var(--woker-muted); } html[data-theme="dark"] .import-upload-hint { color: #7d8493; } /* Botón de archivo: neutro del tema, violeta al hover/seleccionado */ html[data-theme="dark"] .import-file-btn { background: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .import-file-btn:hover, html[data-theme="dark"] .import-file-btn--selected { background: var(--woker-violet-soft); border-color: var(--woker-violet); color: var(--woker-violet); } /* ---- Loader de descarga (loader_descarga.html) ---- */ /* El modal es blanco fijo; en dark mode resulta un bloque blanco que encandila. */ html[data-theme="dark"] .loader-modal { background: var(--woker-surface); box-shadow: 0 20px 40px rgba(0, 0, 0, .55); } html[data-theme="dark"] .loader-title, html[data-theme="dark"] .loader-title-error { color: var(--woker-ink); } html[data-theme="dark"] .loader-message { color: var(--woker-muted); } html[data-theme="dark"] .loader-message-error { color: var(--woker-muted); } html[data-theme="dark"] .loader-icon .spinner { border-color: var(--woker-border); border-top-color: #28a745; } html[data-theme="dark"] .loader-close-btn { background: var(--woker-surface-2) !important; border-color: var(--woker-border) !important; color: var(--woker-ink) !important; } html[data-theme="dark"] .loader-close-btn:hover { background: #30343f !important; border-color: #3a3f4b !important; color: var(--woker-ink) !important; } /* ---- Toggle del sidebar y botones de ícono del navbar: subidos a ink ---- */ html[data-theme="dark"] .main-header .nav-icon-btn, html[data-theme="dark"] .main-header .nav-icon-btn i { color: var(--woker-ink); } html[data-theme="dark"] .main-header .nav-icon-btn:hover, html[data-theme="dark"] .main-header .nav-icon-btn:hover i { color: var(--woker-violet); } /* ---- Chip del ícono del header en el modal de importación ---- */ /* El violeta va SOLO cuando el chip no tiene variante de rol: este selector pesa más que el `.modal-title-icon.is-*` de la base, así que sin el :not() le pisaba el fondo a warn/info/ok y quedaba el ícono ámbar o verde sobre un relleno violeta. */ html[data-theme="dark"] .modal-title-icon:not(.is-danger):not(.is-warn):not(.is-info):not(.is-ok) { background: var(--woker-violet-soft); border-color: rgba(var(--woker-violet-rgb), .45); } /* Variante destructiva: rojo aclarado para que contraste sobre la superficie oscura. Las otras tres salen de sus tokens, que dark-mode ya reasigna (warn e info) o que se leen bien tal cual. */ html[data-theme="dark"] .modal-title-icon.is-danger { background: rgba(248, 113, 113, .18); border-color: rgba(248, 113, 113, .45); color: #f87171; } /* --woker-ok no se reasigna en oscuro (es relleno sólido con texto blanco en los botones), así que como tinta sobre superficie oscura queda corto: acá se aclara igual que el rojo. */ html[data-theme="dark"] .modal-title-icon.is-ok { background: rgba(74, 222, 128, .18); color: #4ade80; } /* ---- Listado de tickets: celdas propias de esa pantalla ---- */ html[data-theme="dark"] .ticket-row:hover { background: #23262f; } html[data-theme="dark"] .ticket-titulo { color: var(--woker-ink); } html[data-theme="dark"] .ticket-fecha { color: var(--woker-muted) !important; } /* Autor de la fila: en claro va #52525b (gris oscuro), ilegible sobre el card oscuro. */ html[data-theme="dark"] .td-autor .autor-nombre { color: var(--woker-ink); } /* Tiles de archivos adjuntos ya subidos: superficies del tema + nombre aclarado */ html[data-theme="dark"] .cuadrante-archivo { background-color: var(--woker-surface-2); box-shadow: 0 1px 2px rgba(0,0,0,.5); } html[data-theme="dark"] .nombre-archivo { background-color: rgba(29,32,39,.85); } html[data-theme="dark"] .texto-nombre-archivo { color: var(--woker-ink); } /* Tabs de estado: superficie y hover oscuros, activo sobre el violeta de marca. */ html[data-theme="dark"] .estado-tab { color: var(--woker-muted); } html[data-theme="dark"] .estado-tab:hover { background: #23262f; color: var(--woker-ink); } html[data-theme="dark"] .estado-tab.is-active { background: rgba(var(--woker-violet-rgb), .22); color: #c4b5fd; } /* Chips de estado: subo el alpha del fondo y aclaro el texto para contraste. */ html[data-theme="dark"] .estado-pendiente { background: rgba(180,83,9,.25); color: #fbbf24; } html[data-theme="dark"] .estado-espera { background: rgba(67,56,202,.3); color: #a5b4fc; } html[data-theme="dark"] .estado-finalizada { background: rgba(185,28,28,.25); color: #fca5a5; } html[data-theme="dark"] .estado-cerrado { background: rgba(185,28,28,.25); color: #fca5a5; } html[data-theme="dark"] .estado-cerrado-temporal { background: rgba(185,28,28,.25); color: #fca5a5; } /* Días sin movimiento: mismo tratamiento pastel/oscuro que los chips. */ html[data-theme="dark"] .dias-verde { background: rgba(21,128,61,.25); color: #6ee7b7; } html[data-theme="dark"] .dias-amarillo { background: rgba(180,83,9,.25); color: #fbbf24; } html[data-theme="dark"] .dias-rojo { background: rgba(185,28,28,.25); color: #fca5a5; } /* ---- Toggle del nav (icono sol/luna) ---- */ .theme-toggle-sun { display: none; } html[data-theme="dark"] .theme-toggle-sun { display: inline; } html[data-theme="dark"] .theme-toggle-moon { display: none; } /* ---- Form card ---- */ html[data-theme="dark"] .form-card { box-shadow: none; } html[data-theme="dark"] .form-card-icon, html[data-theme="dark"] .form-card-dropzone-icon { background: rgba(var(--woker-violet-rgb), .18); } /* Selector de modo, opción elegida: en claro el violeta puro va sobre el tint casi blanco, pero en oscuro el tint es el MISMO violeta al 20% sobre superficie oscura, así que texto y fondo quedan a ~2.6:1 y el título de la opción elegida desaparece. Se aclara la tinta igual que los chips del select2 múltiple (~7:1) preservando el color de marca. */ html[data-theme="dark"] .opcion-modo input:checked ~ .opcion-modo-caja .opcion-modo-titulo { color: color-mix(in srgb, var(--woker-violet) 45%, #fff); } /* Hilo de conversación / historial .ce-* (componente de sistema, ver modern-ui-new.css) */ html[data-theme="dark"] .ver-conversacion::before { background: var(--woker-border); } html[data-theme="dark"] .ce-who { color: var(--woker-ink); } html[data-theme="dark"] .ce-system .ce-who, html[data-theme="dark"] .ce-time { color: var(--woker-muted); } html[data-theme="dark"] .ce-author .ce-avatar { background: rgba(var(--woker-violet-rgb), .2); color: var(--woker-violet); } html[data-theme="dark"] .ce-team .ce-avatar { background: var(--woker-surface-2); color: var(--woker-muted); } /* Evento de sistema: el fill surface-2 casi no contrasta con el panel; anillo definido para que el círculo se vea */ html[data-theme="dark"] .ce-system .ce-avatar { background: var(--woker-surface-2); box-shadow: inset 0 0 0 1px #454b57; color: #b9c0cc; } html[data-theme="dark"] .ce-bubble { background: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } /* Color por rol también en oscuro: PAS violeta tenue, organizador gris neutro */ html[data-theme="dark"] .ce-author .ce-bubble { background: rgba(var(--woker-violet-rgb), .2); border-color: transparent; } html[data-theme="dark"] .ce-team .ce-bubble { background: var(--woker-surface-2); border-color: var(--woker-border); } /* ---- Ver Cotización ---- */ /* El violeta de marca puro no llega a 4.5:1 como texto sobre la superficie oscura del tile */ html[data-theme="dark"] .vc-emitir-link { color: color-mix(in srgb, var(--woker-violet) 45%, #fff); } /* ---- Date picker (bootstrap-daterangepicker) — genérico, reutilizable en toda pantalla ---- */ html[data-theme="dark"] .daterangepicker { background-color: var(--woker-surface); border-color: var(--woker-border); color: var(--woker-ink); box-shadow: var(--modern-shadow); } /* Triángulo que apunta al input */ html[data-theme="dark"] .daterangepicker:before { border-bottom-color: var(--woker-border); } html[data-theme="dark"] .daterangepicker:after { border-bottom-color: var(--woker-surface); } html[data-theme="dark"] .daterangepicker.drop-up:before { border-top-color: var(--woker-border); } html[data-theme="dark"] .daterangepicker.drop-up:after { border-top-color: var(--woker-surface); } /* Tabla del calendario */ html[data-theme="dark"] .daterangepicker .calendar-table { background-color: var(--woker-surface); border-color: var(--woker-surface); } html[data-theme="dark"] .daterangepicker .calendar-table th, html[data-theme="dark"] .daterangepicker .calendar-table td { color: var(--woker-ink); } html[data-theme="dark"] .daterangepicker th.month { color: var(--woker-muted); } /* Flechas prev/next (se dibujan con borde) */ html[data-theme="dark"] .daterangepicker .calendar-table .next span, html[data-theme="dark"] .daterangepicker .calendar-table .prev span { border-color: var(--woker-ink); } /* Hover de días disponibles */ html[data-theme="dark"] .daterangepicker td.available:hover, html[data-theme="dark"] .daterangepicker th.available:hover { background-color: var(--woker-surface-2); } /* Días fuera de mes / deshabilitados */ html[data-theme="dark"] .daterangepicker td.off, html[data-theme="dark"] .daterangepicker td.off.in-range, html[data-theme="dark"] .daterangepicker td.off.start-date, html[data-theme="dark"] .daterangepicker td.off.end-date { background-color: var(--woker-surface); color: var(--woker-subtle); } html[data-theme="dark"] .daterangepicker td.disabled { color: var(--woker-subtle); } /* Días en rango y seleccionados */ html[data-theme="dark"] .daterangepicker td.in-range { background-color: var(--woker-violet-tint); color: var(--woker-ink); } html[data-theme="dark"] .daterangepicker td.active, html[data-theme="dark"] .daterangepicker td.active:hover { background-color: var(--woker-violet); color: #fff; } /* Selects de mes/año/hora */ html[data-theme="dark"] .daterangepicker select.monthselect, html[data-theme="dark"] .daterangepicker select.yearselect, html[data-theme="dark"] .daterangepicker select.hourselect, html[data-theme="dark"] .daterangepicker select.minuteselect, html[data-theme="dark"] .daterangepicker select.secondselect, html[data-theme="dark"] .daterangepicker select.ampmselect { background-color: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } /* Panel de rangos (Hoy, Última semana, ...) */ html[data-theme="dark"] .daterangepicker .ranges li { color: var(--woker-ink); } html[data-theme="dark"] .daterangepicker .ranges li:hover { background-color: var(--woker-surface-2); } html[data-theme="dark"] .daterangepicker .ranges li.active { background-color: var(--woker-violet); color: #fff; } /* Pie: separador, texto y botón cancelar */ html[data-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--woker-border); } html[data-theme="dark"] .daterangepicker .drp-selected { color: var(--woker-muted); } html[data-theme="dark"] .daterangepicker .drp-buttons .btn.cancelBtn { background-color: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } /* ===== Logos de compañías (verCotizacion) ===== */ /* Los logos con texto navy/negro que desaparece sobre la card oscura tienen una variante `_dark.png` (recolor: aclara el texto, mantiene el color del ícono). El partial logoCompania.html sirve una para claro y otra para oscuro; ver LOGOS_CON_VARIANTE_DARK. Los demás logos se ven bien tal cual. El tamaño del logo (.img-compania) NO está acá: va en cotizar.css, y en pdf.css para el PDF. Si se toca una de las tres, revisar las otras. */ .img-compania-dark { display: none; } html[data-theme="dark"] .img-compania-light { display: none; } html[data-theme="dark"] .img-compania-dark { display: inline-block; } /* ===== SweetAlert2 en oscuro ===== */ /* El theme `sweetalert2-theme-bootstrap-4` trae `background:#fff` y grises de texto fijos en el popup. Sin filtrar queda blanco encandilando, y el título ilegible: el texto SÍ se aclara (lo agarran las reglas dark genéricas) pero el fondo no, así que queda claro sobre claro. Va acá y no en el CSS de cada pantalla porque el popup lo crea el JS en runtime — lo comparten las 20 pantallas que linkean el theme, y ningún driver del pipeline lo ve (escanean con el popup cerrado). La geometría y los colores del diálogo salen de `avisos.css`, ya por token, así que acá sólo quedan los dos casos en que oscuro quiere otro token que claro: la X de cierre (que va al muted, más claro que el subtle) y los campos de los prompts (que suben a surface-2 para despegarse de la superficie del popup). El resto de este bloque repite los mismos valores y se deja como red de seguridad. */ html[data-theme="dark"] .swal2-popup { background: var(--woker-surface); border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .swal2-title { color: var(--woker-ink); } html[data-theme="dark"] .swal2-html-container { color: var(--woker-muted); } html[data-theme="dark"] .swal2-close { color: var(--woker-muted); } html[data-theme="dark"] .swal2-footer { border-top-color: var(--woker-border); color: var(--woker-muted); } html[data-theme="dark"] .swal2-input, html[data-theme="dark"] .swal2-select, html[data-theme="dark"] .swal2-textarea { background: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } /* El chip del ícono de éxito es el único de los cinco que no se resuelve solo por token: `--woker-ok` no se reasigna en oscuro (es relleno sólido de `.btn-minimal.btn-success`, y aclararlo dejaría ese botón ilegible), así que el tinte al 10% casi no se despega de la superficie oscura. Mismos valores que eligió `.alert-success` más arriba. */ html[data-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success { background: rgba(26, 166, 114, .15); color: var(--woker-ok-fg, #34d399); } /* bootstrap-duallistbox (selector de permisos de los modales de grupo). Los botones >> / << y las dos listas se quedaban en los grises de Bootstrap: sobre la superficie oscura los botones daban 3,48:1. Va acá y no en el CSS de la pantalla porque el componente lo usa cualquier form con un campo de doble lista. */ html[data-theme="dark"] .bootstrap-duallistbox-container .btn { background: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .bootstrap-duallistbox-container .btn:hover { background: var(--woker-violet); border-color: var(--woker-violet); color: #fff; } html[data-theme="dark"] .bootstrap-duallistbox-container select, html[data-theme="dark"] .bootstrap-duallistbox-container .filter { background: var(--woker-surface-2); border-color: var(--woker-border); color: var(--woker-ink); } html[data-theme="dark"] .bootstrap-duallistbox-container .info, html[data-theme="dark"] .bootstrap-duallistbox-container label { color: var(--woker-muted); } /* El damero de transparencia de Cropper es una imagen clara. */ html[data-theme="dark"] .cropper-bg { background-image: none; background-color: var(--woker-surface-2); }