/* ============================================================ * Fondo del login (Fase 49) * Cubre la pantalla cuando no hay sesión. Detrás del modal de * Bootstrap (z-index 1055) pero encima del navbar (1030). El * modal-backdrop nativo (1050) queda encima dándole contraste al * modal sobre el fondo. * ============================================================ */ #loginBackdrop { position: fixed; inset: 0; z-index: 1040; /* Gradient default usando --bs-primary del tema del comercio (Fase 48). Si hay imagen, el ::before la sobreescribe. */ background: linear-gradient(135deg, var(--bs-primary, #0d6efd) 0%, color-mix(in srgb, var(--bs-primary, #0d6efd) 60%, #fff 40%) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } #loginBackdrop.has-image::before { content: ''; position: absolute; inset: 0; background-image: var(--login-bg-url); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } #loginBackdrop.has-image::after { /* Overlay oscuro para legibilidad del branding sobre la imagen. */ content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; } .login-backdrop-content { position: relative; z-index: 2; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); padding: 1rem; } .login-backdrop-logo { max-width: 180px; max-height: 180px; margin-bottom: 1.25rem; /* Sombra suave para que el logo se vea sobre cualquier fondo. */ filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); } .login-backdrop-title { font-size: 2.75rem; font-weight: 600; margin-bottom: 0.25rem; } .login-backdrop-subtitle { font-size: 1.1rem; opacity: 0.85; margin-bottom: 0; } @media (max-width: 576px) { .login-backdrop-title { font-size: 2rem; } .login-backdrop-subtitle { font-size: 1rem; } .login-backdrop-logo { max-width: 120px; max-height: 120px; } } /* ============================================================ * Loading overlay (Fase 50) * Cubre toda la pantalla mientras se valida login y se monta el * shell de la app. Va por encima del loginBackdrop (z-index 1040) * y del modal-backdrop de Bootstrap (1050), así tapa cualquier * parpadeo durante la transición. * ============================================================ */ #loadingOverlay { position: fixed; inset: 0; z-index: 1080; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: loadingOverlayFadeIn 250ms ease-out; } .loading-overlay-content { padding: 2rem 3rem; } #loadingFase { min-height: 1.5em; /* Transición suave entre fases */ transition: opacity 150ms ease-in-out; } @keyframes loadingOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ * Bordes redondeados configurables por comercio (personalización UI) * El frontend pone data-gpm-radius en ; cada radio base se * multiplica por --gpm-radius-scale. REDONDEADO (default) = 1 → look * histórico; MEDIO = 0.5; CUADRADO = 0 (sin redondeo). * ============================================================ */ :root { --gpm-radius-scale: 1; } :root[data-gpm-radius="medio"] { --gpm-radius-scale: 0.5; } :root[data-gpm-radius="cuadrado"] { --gpm-radius-scale: 0; } /* ============================================================ * Estilos generales (independientes del tema de color) * ============================================================ */ .card { border: none; border-radius: calc(1rem * var(--gpm-radius-scale)); } .table { font-size: 0.92rem; vertical-align: middle; } .table th { font-weight: 600; } .btn { border-radius: calc(0.7rem * var(--gpm-radius-scale)); } .btn-sm { border-radius: calc(0.5rem * var(--gpm-radius-scale)); } .modal-content { border-radius: calc(1rem * var(--gpm-radius-scale)); overflow: hidden; } .alert { border-radius: calc(0.8rem * var(--gpm-radius-scale)); } .badge { font-weight: 500; letter-spacing: 0.3px; } .form-control, .form-select { border-radius: calc(0.6rem * var(--gpm-radius-scale)); } #cajaIndicador { font-size: 0.95rem; padding: 0.4rem 0.7rem; } .pagination .page-link { border-radius: calc(0.5rem * var(--gpm-radius-scale)); margin: 0 2px; } /* ============================================================ * Densidad COMPACTA (personalización UI) * El frontend pone data-gpm-density="compacto" en . Reduce * paddings de tablas, cards, botones y formularios para mostrar más * contenido a la vista. COMODO (default) no agrega nada → look histórico. * ============================================================ */ :root[data-gpm-density="compacto"] .table > :not(caption) > * > * { padding-top: 0.3rem; padding-bottom: 0.3rem; } :root[data-gpm-density="compacto"] .card > .card-body { padding: 0.65rem 0.85rem; } :root[data-gpm-density="compacto"] .btn:not(.btn-sm):not(.btn-lg) { padding-top: 0.28rem; padding-bottom: 0.28rem; } :root[data-gpm-density="compacto"] .form-control:not(.form-control-sm):not(.form-control-color), :root[data-gpm-density="compacto"] .form-select:not(.form-select-sm) { padding-top: 0.28rem; padding-bottom: 0.28rem; min-height: calc(1.5em + 0.56rem + 2px); } :root[data-gpm-density="compacto"] .nav-pills .nav-link { padding-top: 0.3rem; padding-bottom: 0.3rem; } :root[data-gpm-density="compacto"] .form-label { margin-bottom: 0.2rem; } /* ============================================================ * Paleta del comercio → componentes Bootstrap (personalización UI) * Bootstrap 5.3 COMPILA los colores de .btn-* y de los links con HEX fijos * (no usan var(--bs-primary)). Por eso, al overridear --bs-primary/-success/ * etc. (tema del comercio), el navbar/badges (que usan --bs-*-rgb) sí cambian, * pero los BOTONES y LINKS quedaban con el azul de Bootstrap. Acá re-apuntamos * las variables de esos componentes a la paleta del tema, así siguen el color * configurado en AMBOS: login y app. styles.css carga después de bootstrap.min.css * → estas reglas ganan sin !important. * ============================================================ */ /* Links: (usa --bs-link-color-rgb) y .btn-link (usa --bs-link-color), * ej. "¿Olvidaste tu contraseña?" y los links a los portales del login. */ :root { --bs-link-color: var(--bs-primary); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, #000); --bs-link-hover-color-rgb: var(--bs-primary-rgb); } /* Botones sólidos: bg + bordes + estados. El color de TEXTO lo deja Bootstrap * (blanco en primary/success/danger, negro en warning/info); el chequeo de * contraste del editor avisa si una paleta lo deja ilegible. */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, #000); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 75%, #000); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); } .btn-danger { --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 75%, #000); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); } .btn-warning { --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 75%, #000); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); } .btn-info { --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 75%, #000); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); } /* Botones outline. */ .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-disabled-color: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); } .btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-disabled-color: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); } .btn-outline-warning { --bs-btn-color: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); --bs-btn-disabled-color: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); } .btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-disabled-color: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); } /* Estados "seleccionado / activo / marcado" que Bootstrap también hardcodea * en azul: ítem activo del dropdown (ej. el tab seleccionado en el navbar), * item activo de list-group, página activa de la paginación, checkbox/radio/ * switch marcado y el focus ring de inputs. Todos pasan a seguir la paleta. */ .dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); --bs-dropdown-link-active-color: #fff; } .list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); } .pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); } .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .form-check-input:focus, .form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--bs-primary) 50%, #fff); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } /* ============================================================ * Submenús desplegables dentro de un dropdown del navbar * (Operación → Compras / Ventas). Bootstrap 5 no trae submenús * anidados, así que el patrón es manual: se abren al pasar el * mouse (desktop) o al hacer click (clase .show vía app.js, que * cubre touch/teclado). styles.css carga DESPUÉS de bootstrap * → gana sin !important. * ============================================================ */ .dropdown-submenu { position: relative; } .dropdown-submenu > .submenu-toggle { display: flex; align-items: center; justify-content: space-between; } .dropdown-submenu > .submenu-toggle .submenu-caret { margin-left: 1rem; font-size: .72rem; opacity: .6; transition: transform .15s ease; } .dropdown-submenu.show > .submenu-toggle .submenu-caret { transform: rotate(90deg); } /* El submenú flota a la derecha del item padre. */ .dropdown-submenu > .dropdown-menu { display: none; top: 0; left: 100%; margin-top: -.35rem; margin-left: .125rem; } .dropdown-submenu:hover > .dropdown-menu, .dropdown-submenu.show > .dropdown-menu { display: block; } /* Pantallas chicas (navbar colapsado): el submenú se apila debajo * del item y se abre sólo por click (sin hover). */ @media (max-width: 991.98px) { .dropdown-submenu > .dropdown-menu { position: static; left: auto; margin: 0 0 .25rem 1rem; border: 0; box-shadow: none; } .dropdown-submenu:hover > .dropdown-menu { display: none; } .dropdown-submenu.show > .dropdown-menu { display: block; } } /* ============================================================ * Tema claro (LIGHT) * Selector activo cuando . * AUTO con OS en light resuelve a este también (lo decide el JS). * ============================================================ */ /* Fondo + superficies derivados del color primary del comercio (antes * estaban hardcodeados en azul). Con --bs-primary default (#0d6efd) se ven * casi igual que antes; con otra paleta, el sitio entero la sigue. */ [data-bs-theme="light"] body { background: color-mix(in srgb, var(--bs-primary) 4%, #f3f6fb); } [data-bs-theme="light"] .nav-pills .nav-link { border: 1px solid color-mix(in srgb, var(--bs-primary) 16%, #d9e0ee); color: #23355b; background: #ffffff; } [data-bs-theme="light"] .nav-pills .nav-link.active { background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 82%, #000) 0%, var(--bs-primary) 100%); color: #fff; border-color: transparent; } [data-bs-theme="light"] .table th { color: #3a4a66; background: color-mix(in srgb, var(--bs-primary) 7%, #ffffff); } [data-bs-theme="light"] .table-warning td { background-color: #fff7d6 !important; } [data-bs-theme="light"] .pagination .page-link { color: #23355b; } /* ============================================================ * Tema oscuro (DARK) * Bootstrap 5.3 ya provee tokens de color base via data-bs-theme="dark". * Acá sobreescribimos sólo lo que el sitio tenía hardcodeado. * ============================================================ */ [data-bs-theme="dark"] body { background: color-mix(in srgb, var(--bs-primary) 6%, #161b22); } [data-bs-theme="dark"] .nav-pills .nav-link { border: 1px solid color-mix(in srgb, var(--bs-primary) 20%, #30363d); color: #c9d1d9; background: #21262d; } [data-bs-theme="dark"] .nav-pills .nav-link.active { background: linear-gradient(90deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 72%, #fff) 100%); color: #fff; border-color: transparent; } [data-bs-theme="dark"] .table th { color: #c9d1d9; background: color-mix(in srgb, var(--bs-primary) 14%, #1f242b); } [data-bs-theme="dark"] .table-warning td { background-color: #4a3d12 !important; color: #f5e9b9; } [data-bs-theme="dark"] .pagination .page-link { color: #c9d1d9; } /* Card y modal heredan el background de Bootstrap, pero el shadow-sm * default es muy sutil en dark: lo reforzamos un poco. */ [data-bs-theme="dark"] .card.shadow-sm, [data-bs-theme="dark"] .modal-content { box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5) !important; } /* `bg-light` es un color hardcoded de Bootstrap (gris claro) que no * responde a data-bs-theme. Lo usamos en KPIs de Dashboard y Reportes, * así que lo redefinimos para dark con un fondo gris medio + borde 1px * más claro (mismo look que las filas de tabla en dark). */ [data-bs-theme="dark"] .card.bg-light, [data-bs-theme="dark"] .bg-light { background-color: #2d333b !important; color: #e6edf3 !important; border: 1px solid #454d57 !important; } /* Los KPIs usan `text-muted` para los labels y `text-primary` / * `text-warning` para los valores. En dark esos colores quedan más * legibles tirando hacia variantes pastel. */ [data-bs-theme="dark"] .card.bg-light .text-muted { color: #adbac7 !important; } /* ============================================================ * Autocomplete de cliente / producto / proveedor (2026-06-06) * Reemplaza los queda oculto * como almacén del value (compat con $('id').value existente). * ============================================================ */ .ac-wrap { position: relative; } .ac-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1056; /* sobre el form, bajo modales 1060+ */ max-height: 320px; overflow-y: auto; margin-top: 2px; display: none; /* JS lo muestra al haber resultados */ } .ac-menu .list-group-item { cursor: pointer; padding-top: .35rem; padding-bottom: .35rem; white-space: normal; /* labels largos hacen wrap, no se cortan */ } /* Resaltado por teclado (flechas) o hover. Reusa el estilo .active * de Bootstrap list-group pero lo forzamos para que el dark theme * también lo respete. */ .ac-menu .list-group-item.active { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .ac-menu .ac-empty { color: var(--bs-secondary-color, #6c757d); font-style: italic; cursor: default; } /* ============================================================ * Logo del comercio en el navbar (personalización UI 2026-06-16) * Antes el navbar mostraba sólo texto. Si el comercio subió un logo, * app.js muestra el ; sino queda el ícono + texto. El logo se * acota en alto para no romper la barra. * ============================================================ */ #navbarLogo { max-height: 34px; max-width: 160px; width: auto; object-fit: contain; /* Sombra suave para que logos oscuros se vean sobre el navbar primary. */ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } /* Swatch de color del editor de tema (chequeo de contraste). */ .tema-swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 0.25rem; border: 1px solid rgba(0, 0, 0, 0.2); vertical-align: -0.2rem; margin-right: 0.35rem; } .tema-preset-btn.active { outline: 3px solid var(--bs-primary); outline-offset: 1px; }