/* ============================================================ GESCOM Web 2025 - Sistema de temas (Claro / Oscuro) El tema se controla con el atributo y la preferencia se guarda en localStorage['gescom_tema']. ============================================================ */ /* ---------- TEMA CLARO (valores por defecto) ---------- */ :root { --co-fondo-body: #ffffff; --co-fondo-suave: #f8f9fa; --co-fondo-superficie: #ffffff; --co-texto-base: #212529; --co-texto-suave: #495057; --co-borde: #ced4da; --co-borde-tabla: #e8e9eb; --co-tabla-cabecera: #0f2147; --co-tabla-texto-cabecera: #c7bfbf; --co-tabla-fila-alt: #fdfafa; --co-tabla-fila-hover: #f8e6b5; --co-tabla-borde-fila: #dddddd; --co-tabla-borde-pie: #010525; --co-tabla-span-fondo: rgb(86, 119, 228); --co-tabla-span-texto: rgb(243, 242, 245); --co-input-fondo: #ffffff; --co-input-texto: #212529; --co-input-sololectura: #e9ecef; --co-input-sololectura-borde: #ced4da; --co-barra-titulo: #042953; --co-barra-titulo-texto: #f2f5f8; --co-barra-titulo-icono: rgb(247, 231, 19); --co-barra-titulo-acento: rgb(255, 230, 0); --co-fondo-titulo-form: rgb(14, 5, 48); --co-fondo-titulo-mant: rgb(1, 26, 46); --co-fondo-separador: rgb(9, 7, 70); --co-texto-separador: rgb(219, 203, 181); --co-fondo-info: rgb(23, 22, 65); --co-fondo-resultado: rgb(48, 7, 4); --co-texto-resultado: rgb(231, 247, 7); --co-scroll-pagina-hover: #042953; --co-scroll-pagina-texto: antiquewhite; --co-boton-scroll-fondo: rgb(124, 124, 252); --co-boton-scroll-texto: cornsilk; --co-btn-pulsado-fondo: #042953; --co-btn-pulsado-texto: antiquewhite; --co-btn-nopulsado-fondo: rgb(248, 248, 252); --co-modal-cabecera: rgb(15, 12, 48); --co-modal-texto: #fdfdfd; --co-modal-cerrar-fondo: #99a6b3; --co-modal-cerrar-texto: #f2f5f8; --co-modal-cerrar-hover: aliceblue; --co-modal-footer-btn: aqua; --co-menu-flotante-fondo: rgb(76, 112, 141); --co-menu-flotante-texto: #fcfcfd; --co-menu-flotante-hover-fondo: rgb(40, 53, 77); --co-menu-flotante-hover-texto: #ecebab; --co-menu-flotante-disabled-fondo: rgb(241, 242, 243); --co-menu-flotante-disabled-texto: #2d2d30; --co-menu-flotante-ul-fondo: rgb(40, 53, 77); --co-menu-flotante-icono: #ebe783; --co-menu-flotante-link: #ececf3; --co-menu-flotante-hover-link-fondo: #cecec6; --co-menu-flotante-hover-link-texto: #131314; --co-boton-nuevo: rgb(43, 39, 51); --co-boton-nuevo-hover-fondo: rgb(6, 1, 80); --co-boton-nuevo-hover-texto: aliceblue; --co-boton-agregar: rgb(130, 125, 175); --co-boton-agregar-hover-fondo: rgb(6, 1, 80); --co-boton-agregar-hover-texto: aliceblue; --co-boton-imprimir: rgb(43, 39, 51); --co-boton-imprimir-hover-fondo: rgb(47, 190, 247); --co-boton-imprimir-hover-texto: aliceblue; --co-boton-guardar: rgb(87, 82, 97); --co-boton-guardar-hover-fondo: rgb(13, 30, 77); --co-boton-guardar-hover-texto: aliceblue; --co-boton-generar: rgb(87, 82, 97); --co-boton-generar-hover-fondo: rgb(37, 80, 199); --co-boton-generar-hover-texto: aliceblue; --co-kardex-entrada: rgb(105, 141, 220); --co-kardex-salida: rgb(196, 62, 62); --co-kardex-salida-texto: azure; --co-kardex-saldo: bisque; --co-link-collapse: #0d1553; --co-link-collapse-hover: rgb(8, 8, 56); --co-informacion-producto-borde: rgb(139, 181, 243); --co-informacion-producto-texto: blue; --co-informacion-producto-activo: rgb(9, 67, 71); --co-main-fondo: rgb(134, 130, 130); } /* ---------- TEMA OSCURO ---------- */ html[data-tema="oscuro"] { --co-fondo-body: #1b1e24; --co-fondo-suave: #22262d; --co-fondo-superficie: #262b33; --co-texto-base: #dfe4e8; --co-texto-suave: #9aa3ad; --co-borde: #3a4149; --co-borde-tabla: #363d45; --co-tabla-cabecera: #16233f; --co-tabla-texto-cabecera: #c7bfbf; --co-tabla-fila-alt: #232830; --co-tabla-fila-hover: #303a46; --co-tabla-borde-fila: #363d45; --co-tabla-borde-pie: #2a3e48; --co-tabla-span-fondo: #3b5bd6; --co-tabla-span-texto: #f2f3f6; --co-input-fondo: #262b33; --co-input-texto: #dfe4e8; --co-input-sololectura: #2b313a; --co-input-sololectura-borde: #3a4149; --co-barra-titulo: #0b2f5e; --co-barra-titulo-texto: #f2f5f8; --co-barra-titulo-icono: #ffd83d; --co-barra-titulo-acento: #ffd83d; --co-fondo-titulo-form: #0d1630; --co-fondo-titulo-mant: #072033; --co-fondo-separador: #131a30; --co-texto-separador: #d8c9a3; --co-fondo-info: #161d33; --co-fondo-resultado: #3a1410; --co-texto-resultado: #eef04a; --co-scroll-pagina-hover: #2b4c9e; --co-scroll-pagina-texto: antiquewhite; --co-boton-scroll-fondo: #4f4f9e; --co-boton-scroll-texto: cornsilk; --co-btn-pulsado-fondo: #2b4c9e; --co-btn-pulsado-texto: antiquewhite; --co-btn-nopulsado-fondo: #2b3038; --co-modal-cabecera: #141a26; --co-modal-texto: #f0f2f5; --co-modal-cerrar-fondo: #3f4651; --co-modal-cerrar-texto: #e8ebee; --co-modal-cerrar-hover: #4d5560; --co-modal-footer-btn: #1c7d6d; --co-menu-flotante-fondo: #2b3642; --co-menu-flotante-texto: #f0f2f5; --co-menu-flotante-hover-fondo: #1f2a36; --co-menu-flotante-hover-texto: #ecebab; --co-menu-flotante-disabled-fondo: #2a2f38; --co-menu-flotante-disabled-texto: #8d9298; --co-menu-flotante-ul-fondo: #1f2a36; --co-menu-flotante-icono: #e6df7d; --co-menu-flotante-link: #e6e9ee; --co-menu-flotante-hover-link-fondo: #3f4752; --co-menu-flotante-hover-link-texto: #eef1f4; --co-boton-nuevo: #cfd4da; --co-boton-nuevo-hover-fondo: #2b4c9e; --co-boton-nuevo-hover-texto: #ffffff; --co-boton-agregar: #aab4c0; --co-boton-agregar-hover-fondo: #2b4c9e; --co-boton-agregar-hover-texto: #ffffff; --co-boton-imprimir: #cfd4da; --co-boton-imprimir-hover-fondo: #1f7fa8; --co-boton-imprimir-hover-texto: #ffffff; --co-boton-guardar: #cfd4da; --co-boton-guardar-hover-fondo: #1f6d8f; --co-boton-guardar-hover-texto: #ffffff; --co-boton-generar: #cfd4da; --co-boton-generar-hover-fondo: #3f5fb0; --co-boton-generar-hover-texto: #ffffff; --co-kardex-entrada: #3a5fa0; --co-kardex-salida: #7a3a3a; --co-kardex-salida-texto: #f0f2f5; --co-kardex-saldo: #4a4033; --co-link-collapse: #9fb2e8; --co-link-collapse-hover: #c4cff0; --co-informacion-producto-borde: #3f6bbf; --co-informacion-producto-texto: #7ea6ff; --co-informacion-producto-activo: #7fd1c9; --co-main-fondo: #171a1f; --bs-body-bg: #1b1e24; --bs-body-color: #dfe4e8; --bs-body-color-rgb: 223, 228, 232; --bs-border-color: #3a4149; --bs-border-color-translucent: rgba(255, 255, 255, 0.08); --bs-secondary-color: #9aa3ad; --bs-secondary-color-rgb: 154, 163, 173; --bs-tertiary-bg: #22262d; --bs-secondary-bg: #262b33; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-card-bg: #262b33; --bs-card-border-color: #3a4149; --bs-card-cap-bg: #2a3038; --bs-modal-bg: #262b33; --bs-modal-border-color: #3a4149; --bs-modal-header-border-color: #3a4149; --bs-modal-footer-border-color: #3a4149; --bs-dropdown-bg: #262b33; --bs-dropdown-border-color: #3a4149; --bs-dropdown-color: #dfe4e8; --bs-dropdown-link-color: #dfe4e8; --bs-dropdown-link-hover-bg: #2f3742; --bs-dropdown-link-hover-color: #ffffff; --bs-dropdown-link-active-bg: #2b4c9e; --bs-dropdown-link-active-color: #ffffff; --bs-table-color: #dfe4e8; --bs-table-bg: transparent; --bs-table-border-color: #363d45; --bs-table-striped-bg: #22262d; --bs-table-striped-color: #dfe4e8; --bs-table-hover-bg: #2f3742; --bs-table-hover-color: #ffffff; --bs-table-active-bg: #2f3742; --bs-table-active-color: #ffffff; --bs-link-color: #7ea6ff; --bs-link-hover-color: #a8c2ff; --bs-list-group-bg: #262b33; --bs-list-group-color: #dfe4e8; --bs-list-group-border-color: #3a4149; --bs-list-group-action-color: #dfe4e8; --bs-list-group-action-hover-bg: #2f3742; --bs-list-group-action-hover-color: #ffffff; --bs-accordion-bg: #262b33; --bs-accordion-color: #dfe4e8; --bs-accordion-border-color: #3a4149; --bs-accordion-btn-color: #dfe4e8; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: #16233f; --bs-accordion-active-color: #ffffff; } html[data-tema="oscuro"] body { background-color: var(--co-fondo-body); color: var(--co-texto-base); transition: background-color 0.25s ease, color 0.25s ease; } html[data-tema="oscuro"] body .form-control, html[data-tema="oscuro"] body .form-select, html[data-tema="oscuro"] body input[type="text"], html[data-tema="oscuro"] body input[type="number"], html[data-tema="oscuro"] body input[type="date"], html[data-tema="oscuro"] body input[type="time"], html[data-tema="oscuro"] body input[type="password"], html[data-tema="oscuro"] body input[type="email"], html[data-tema="oscuro"] body select, html[data-tema="oscuro"] body textarea { background-color: var(--co-input-fondo); color: var(--co-input-texto); border-color: var(--co-borde); } html[data-tema="oscuro"] body .form-control:focus, html[data-tema="oscuro"] body .form-select:focus { background-color: var(--co-input-fondo); color: var(--co-input-texto); border-color: var(--co-boton-generar-hover-fondo); } html[data-tema="oscuro"] body input[readonly], html[data-tema="oscuro"] body input:disabled, html[data-tema="oscuro"] body select:disabled { background-color: var(--co-input-sololectura); border-color: var(--co-input-sololectura-borde); } html[data-tema="oscuro"] body .modal-content, html[data-tema="oscuro"] body .card, html[data-tema="oscuro"] body .dropdown-menu { background-color: var(--co-fondo-superficie); color: var(--co-texto-base); } html[data-tema="oscuro"] body .modal-content .modal-body, html[data-tema="oscuro"] body .modal-content .modal-footer { color: var(--co-texto-base); } html[data-tema="oscuro"] body .table { color: var(--co-texto-base); } html[data-tema="oscuro"] body .accordion-button { color: var(--co-texto-base); } #btnTema { line-height: 1; color: rgba(255, 255, 255, 0.75); } #btnTema:hover { color: #ffc107; } html[data-tema="oscuro"] #btnTema { color: #ffc107; } html[data-tema="oscuro"] #btnTema:hover { color: #ffe69c; } /* ============================================================ TEMA OSCURO - Ajustes de contraste Utilidades de Bootstrap y clases propias con colores fijos que en modo claro usan texto oscuro/fondo claro y en oscuro quedan ilegibles (fondo claro + texto claro, o viceversa). ============================================================ */ /* Fondo claro fijo -> superficie oscura */ html[data-tema="oscuro"] .bg-white, html[data-tema="oscuro"] .bg-light, html[data-tema="oscuro"] .bg-body { background-color: var(--co-fondo-superficie) !important; color: var(--co-texto-base); } /* Texto oscuro fijo -> texto claro */ html[data-tema="oscuro"] .text-dark, html[data-tema="oscuro"] .text-body, html[data-tema="oscuro"] .text-black, html[data-tema="oscuro"] .text-black-50, html[data-tema="oscuro"] .text-reset { color: var(--co-texto-base) !important; } /* Texto secundario / avisos -> gris claro legible */ html[data-tema="oscuro"] .text-muted, html[data-tema="oscuro"] .text-secondary, html[data-tema="oscuro"] .text-body-secondary, html[data-tema="oscuro"] .form-text, html[data-tema="oscuro"] .form-label { color: var(--co-texto-suave) !important; } /* Placeholders y opciones de selects */ html[data-tema="oscuro"] ::placeholder { color: var(--co-texto-suave) !important; opacity: 1; } html[data-tema="oscuro"] select option { background-color: var(--co-input-fondo); color: var(--co-input-texto); } /* Dropdowns (reforzar, por si la app no usa las variables --bs-*) */ html[data-tema="oscuro"] .dropdown-menu { background-color: var(--co-fondo-superficie) !important; border-color: var(--co-borde) !important; } html[data-tema="oscuro"] .dropdown-item { color: var(--co-texto-base) !important; } html[data-tema="oscuro"] .dropdown-item:hover, html[data-tema="oscuro"] .dropdown-item:focus { color: #ffffff !important; background-color: var(--co-menu-flotante-hover-fondo) !important; } html[data-tema="oscuro"] .dropdown-divider { border-color: var(--co-borde) !important; } html[data-tema="oscuro"] .dropdown-header { color: var(--co-texto-suave) !important; } /* Botones con borde oscuro/señalados (outline) */ html[data-tema="oscuro"] .btn-outline-dark, html[data-tema="oscuro"] .btn-outline-secondary { color: var(--co-texto-base) !important; border-color: var(--co-borde) !important; } html[data-tema="oscuro"] .btn-outline-dark:hover, html[data-tema="oscuro"] .btn-outline-secondary:hover { color: #ffffff !important; background-color: var(--co-btn-pulsado-fondo) !important; border-color: var(--co-btn-pulsado-fondo) !important; } /* Tablas Bootstrap genéricas: cabecera y filas legibles */ html[data-tema="oscuro"] .table thead th { color: var(--co-tabla-texto-cabecera); background-color: var(--co-tabla-cabecera) !important; } html[data-tema="oscuro"] .table tbody td { color: var(--co-texto-base); } html[data-tema="oscuro"] .table-light, html[data-tema="oscuro"] .table-light > th, html[data-tema="oscuro"] .table-light > td { background-color: var(--co-fondo-suave) !important; color: var(--co-texto-base) !important; } /* Listado emergente del punto de venta (fondo amarillo claro fijo) */ html[data-tema="oscuro"] .table-list-venta { background: var(--co-fondo-superficie) !important; color: var(--co-texto-base); } /* Subtítulo de tablas anidadas (texto rojo oscuro fijo) */ html[data-tema="oscuro"] .content-table .subtable table thead { color: var(--co-texto-base); }