/** * SISTEMA DE DISEÑO UNIFICADO - Mágico Hogar POS * Paleta de colores personalizable + Componentes reutilizables * Autor: Sistema POS * Fecha: 2026-04-10 */ /* ========================================== 1. VARIABLES CSS - PALETA DE COLORES ========================================== */ :root { /* PALETA AZUL — refinada a partir del azul de marca (#0a3e69), con más profundidad y un acento teal para romper la monotonía "plana" */ --color-primary-darkest: #082B4A; --color-primary: #0F3D68; --color-primary-medium: #1D6FB8; --color-primary-light: #E7F0FA; --color-primary-lighter: #F4F8FC; /* ACENTO — para resaltar sin depender solo del azul principal */ --color-accent: #0D9488; --color-accent-light: #E1F5F2; /* ACENTOS EXTRA — para íconos de módulo (tarjetas de Dashboard/Inventario) que necesitan diferenciarse entre sí más allá de la paleta semántica */ --color-accent-purple: #9b59b6; --color-accent-purple-light: rgba(155, 89, 182, 0.1); --color-accent-blue: #3498db; --color-accent-blue-light: rgba(52, 152, 219, 0.1); --color-accent-orange: #ff9800; --color-accent-orange-light: rgba(255, 152, 0, 0.1); --color-accent-slate: #34495e; --color-accent-slate-light: rgba(52, 73, 94, 0.1); /* COLORES SEMÁNTICOS — versión más profesional/menos "clip-art" */ --color-success: #16A34A; --color-success-light: #DCFCE7; --color-secondary: #64748B; --color-danger: #DC2626; --color-danger-light: #FEE2E2; --color-warning: #D97706; --color-warning-light: #FEF3C7; --color-info: #0891B2; --color-info-light: #CFFAFE; /* NEUTROS */ --color-white: #ffffff; /* Blanco literal: texto sobre color, nunca cambia con el tema */ --color-surface: #ffffff; /* Superficie de tarjetas/tablas/modales: SÍ cambia en modo oscuro */ --color-surface-alt: #F8FAFC; /* Superficie secundaria (encabezados de tabla sutiles, hover) */ --color-light: #F1F5F9; --color-gray-light: #E2E8F0; --color-border: #E4E9F0; --color-border-strong: #D3DAE6; --color-gray: #64748B; --color-gray-dark: #334155; --color-dark: #1E293B; --color-background: #EEF1F6; /* TIPOGRAFÍA */ --font-family-base: 'Poppins', sans-serif; --font-size-base: 14px; --font-size-sm: 12px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 20px; --font-size-3xl: 26px; --line-height-base: 1.5; --letter-spacing: 0.5px; /* ESPACIADO COMPACTO */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; /* BORDER RADIUS */ --border-radius-sm: 6px; --border-radius-md: 10px; --border-radius-lg: 14px; /* SOMBRAS — profundidad en capas para que las superficies "floten" */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06); --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.16), 0 6px 14px rgba(15, 23, 42, 0.08); --shadow-card: 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06); --shadow-btn: 0 1px 2px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18); /* Degradado del navbar/encabezados de tabla: separado de --color-primary-* porque en modo oscuro esos tonos se vuelven brillantes (para servir de acento/enlace) y no quedan bien como panel grande de navbar. */ --gradient-chrome-start: var(--color-primary-medium); --gradient-chrome-end: var(--color-primary-darkest); /* TRANSICIONES */ --transition: all 0.2s ease; } /* ========================================== 1.1 TEMA OSCURO Se activa con [data-theme="dark"] en (alternado por el botón de tema en el navbar, persistido en localStorage — ver header.php). Redefine los MISMOS nombres de variable, así que ningún componente necesita reglas duplicadas para el modo oscuro. ========================================== */ :root[data-theme="dark"] { --color-primary-darkest: #061B2E; --color-primary: #3B82F6; --color-primary-medium: #60A5FA; --color-primary-light: rgba(59, 130, 246, 0.16); --color-primary-lighter: rgba(59, 130, 246, 0.08); --color-accent: #2DD4BF; --color-accent-light: rgba(45, 212, 191, 0.16); --color-accent-purple: #C084FC; --color-accent-purple-light: rgba(192, 132, 252, 0.16); --color-accent-blue: #60A5FA; --color-accent-blue-light: rgba(96, 165, 250, 0.16); --color-accent-orange: #FB923C; --color-accent-orange-light: rgba(251, 146, 60, 0.16); --color-accent-slate: #94A3B8; --color-accent-slate-light: rgba(148, 163, 184, 0.16); --color-success: #22C55E; --color-success-light: rgba(34, 197, 94, 0.16); --color-secondary: #94A3B8; --color-danger: #F87171; --color-danger-light: rgba(248, 113, 113, 0.16); --color-warning: #FBBF24; --color-warning-light: rgba(251, 191, 36, 0.16); --color-info: #22D3EE; --color-info-light: rgba(34, 211, 238, 0.16); --color-white: #ffffff; --color-surface: #1E293B; --color-surface-alt: #263449; --color-light: #263449; --color-gray-light: #334155; --color-border: #334155; --color-gray: #94A3B8; --color-gray-dark: #CBD5E1; --color-dark: #F1F5F9; --color-background: #0F172A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35); /* Panel de navbar/thead: azul apagado y profundo, no el azul brillante que en oscuro se usa como acento/enlace */ --gradient-chrome-start: #1E3A5F; --gradient-chrome-end: #0B1729; } /* ========================================== 2. RESET Y ESTILOS BASE ========================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* ========================================== 2.1 ACCESIBILIDAD GLOBAL ========================================== */ /* Salto de foco visible para navegación por teclado en toda la app */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-info); outline-offset: 2px; } /* Enlace "saltar al contenido" (oculto hasta recibir foco) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--color-primary); color: var(--color-white); padding: var(--spacing-sm) var(--spacing-lg); border-radius: 0 0 var(--border-radius-sm) 0; } .skip-link:focus { left: 0; } /* Tamaño mínimo de toque accesible para elementos interactivos */ button, .btn, input[type="checkbox"], input[type="radio"] { min-height: 38px; } input[type="checkbox"], input[type="radio"] { min-width: 18px; min-height: 18px; } /* Texto visible solo para lectores de pantalla */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { background-color: var(--color-background); font-family: var(--font-family-base); font-size: var(--font-size-base); color: var(--color-dark); line-height: var(--line-height-base); letter-spacing: var(--letter-spacing); } /* ========================================== 3. TIPOGRAFÍA ========================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-base); font-weight: 600; letter-spacing: var(--letter-spacing); margin-bottom: var(--spacing-md); } h1 { font-size: var(--font-size-3xl); color: var(--color-white); } h2 { font-size: var(--font-size-2xl); color: var(--color-dark); } h3 { font-size: var(--font-size-xl); color: var(--color-dark); } h4 { font-size: var(--font-size-lg); color: var(--color-dark); } h5 { font-size: var(--font-size-base); color: var(--color-dark); } h6 { font-size: var(--font-size-2xl); color: var(--color-danger); } /* Encabezados sobre bandas de color de marca: SIEMPRE legibles (texto claro). Los `h1..h6` de arriba fijan un color oscuro que gana por especificidad sobre la herencia, así que cualquier contenedor pintado con color de marca —lleve por su clase o por un `style="color:#fff"` inline— tiene que forzar el blanco en sus títulos. Cubre modales con cabecera de color, cintas de rol, hero, etc. */ .on-brand, .on-brand h1, .on-brand h2, .on-brand h3, .on-brand h4, .on-brand h5, .on-brand h6, .on-brand p, .rol-header h1, .rol-header h2, .rol-header h3, .rol-header p, [style*="color: white"] > h1, [style*="color: white"] > h2, [style*="color: white"] > h3, [style*="color: white"] > h4, [style*="color: white"] > div > h2, [style*="color: white"] > div > h3, [style*="color:#fff"] > h1, [style*="color:#fff"] > h2, [style*="color:#fff"] > h3, [style*="color: #fff"] > h1, [style*="color: #fff"] > h2, [style*="color: #fff"] > h3, [style*="color:white"] > h2, [style*="color:white"] > h3 { color: #fff; } p { margin-bottom: var(--spacing-md); line-height: var(--line-height-base); } a { color: var(--color-primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--color-primary-medium); } strong { font-weight: 600; } /* ========================================== 4. BOTONES - SISTEMA UNIFICADO ========================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); min-height: 38px; border: none; border-radius: var(--border-radius-sm); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: 500; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background-color 0.15s ease; /* Neutro por defecto: superficie con relieve, no un gris muerto */ background-color: var(--color-surface); color: var(--color-gray-dark); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-btn); text-decoration: none; white-space: nowrap; box-sizing: border-box; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.18); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Variantes de Botón — degradado sutil en vez de color plano sólido, con hover vía filter (funciona igual en claro y oscuro, sin hex fijos) */ .btn-primary { background-image: linear-gradient(155deg, var(--color-primary-medium), var(--color-primary)); color: var(--color-white); border-color: transparent; box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); } .btn-success { background-image: linear-gradient(155deg, color-mix(in srgb, var(--color-success) 85%, white), var(--color-success)); color: var(--color-white); } .btn-success:hover:not(:disabled) { filter: brightness(1.08); } .btn-secondary { background-image: linear-gradient(155deg, color-mix(in srgb, var(--color-secondary) 82%, white), var(--color-secondary)); color: var(--color-white); border-color: transparent; } .btn-secondary:hover:not(:disabled) { filter: brightness(1.12); } .btn-danger { background-image: linear-gradient(155deg, color-mix(in srgb, var(--color-danger) 85%, white), var(--color-danger)); color: var(--color-white); } .btn-danger:hover:not(:disabled) { filter: brightness(1.08); } .btn-warning { background-color: var(--color-warning); color: var(--color-white); } .btn-warning:hover:not(:disabled) { filter: brightness(1.1); } .btn-info { background-color: var(--color-info); color: var(--color-white); } .btn-info:hover:not(:disabled) { filter: brightness(1.1); } .btn-outline { background-color: var(--color-surface); color: var(--color-primary); border: 2px solid var(--color-primary); } .btn-outline:hover:not(:disabled) { background-color: var(--color-primary); color: var(--color-white); } .btn-accent { background-image: linear-gradient(155deg, color-mix(in srgb, var(--color-accent) 85%, white), var(--color-accent)); color: var(--color-white); } .btn-accent:hover:not(:disabled) { filter: brightness(1.08); } /* Todas las variantes de color pierden el borde neutro del .btn base. */ .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-accent { border-color: transparent; } .btn-warning, .btn-info { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22); } /* Tamaños de Botón */ .btn-sm { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-sm); } .btn-lg { padding: var(--spacing-md) var(--spacing-xl); font-size: var(--font-size-lg); } .btn-block { width: 100%; } /* ========================================== 5. TABLAS - SISTEMA UNIFICADO ========================================== */ table { width: 100%; border-collapse: collapse; background-color: var(--color-surface); border-radius: var(--border-radius-md); box-shadow: var(--shadow-card); margin: var(--spacing-lg) 0; overflow: hidden; } thead { background-image: linear-gradient(155deg, var(--gradient-chrome-start), var(--gradient-chrome-end)) !important; color: var(--color-white) !important; } thead th { background: transparent !important; color: var(--color-white) !important; padding: 13px 14px; text-align: center; font-weight: 700; border: none; border-right: 1px solid rgba(255, 255, 255, 0.14); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; } thead th:last-child { border-right: none; } tbody tr { border-bottom: 1px solid var(--color-border); transition: background-color 0.12s ease; } /* Cebra sutil + hover marcado: la tabla deja de parecer una hoja de cálculo. */ tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)); } /* Solo para dispositivos con mouse real. En pantallas táctiles, algunos navegadores activan :hover con el simple toque/arrastre — en una tabla con scroll horizontal eso se ve como un destello de color que "viaja" fila por fila mientras arrastras el dedo. */ @media (hover: hover) { tbody tr:hover { background-color: var(--color-primary-lighter); } } tbody td { padding: 12px 14px; font-size: var(--font-size-base); } tbody tr:last-child { border-bottom: none; } tfoot { background-color: var(--color-light); border-top: 2px solid var(--color-gray-light); } tfoot td { padding: var(--spacing-md) var(--spacing-sm); font-weight: 600; color: var(--color-dark); } /* ========================================== 6. MODALES Y CARDS ========================================== */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); animation: fadeIn 0.3s ease; } /* .show es la convención estándar; .active y .abierto son alias usados por algunos módulos (arqueo de inventario, pedidos de tienda, cuenta). */ .modal.show, .modal.active, .modal.abierto { display: flex; align-items: center; justify-content: center; } .modal-content { background-color: var(--color-surface); padding: var(--spacing-xl); border-radius: var(--border-radius-md); width: 90%; max-width: 600px; box-shadow: var(--shadow-lg); animation: slideUp 0.3s ease; max-height: 90vh; overflow-y: auto; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-primary-light); } .modal-header h2 { margin: 0; display: flex; align-items: center; gap: var(--spacing-md); } .modal-content.modal-medium { max-width: 700px; } .modal-content.modal-large { max-width: 1000px; width: 95%; } .modal-close { font-size: 28px; font-weight: bold; color: var(--color-gray); cursor: pointer; background: none; border: none; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-sm); transition: var(--transition); } .modal-close:hover { background-color: var(--color-gray-light); color: var(--color-dark); } .card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-card); margin-bottom: var(--spacing-lg); transition: box-shadow 0.2s ease, transform 0.2s ease; } .card:hover { box-shadow: var(--shadow-md); } .card-header { border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-lg); } .card-body { padding: 0; } /* ========================================== 7. FORMULARIOS ========================================== */ .form-group { margin-bottom: var(--spacing-lg); } label { display: block; margin-bottom: var(--spacing-sm); font-weight: 500; color: var(--color-dark); font-size: var(--font-size-base); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], textarea, select { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-gray-light); border-radius: var(--border-radius-sm); font-family: var(--font-family-base); font-size: var(--font-size-base); transition: var(--transition); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10, 62, 105, 0.1); } textarea { resize: vertical; min-height: 100px; } /* ========================================== 8. ALERTAS Y MENSAJES ========================================== */ .alert { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-lg); display: flex; gap: var(--spacing-md); align-items: flex-start; border-left: 4px solid transparent; } .alert-success { background-color: var(--color-success-light); color: var(--color-success); border-left-color: var(--color-success); } .alert-danger { background-color: var(--color-danger-light); color: var(--color-danger); border-left-color: var(--color-danger); } .alert-warning { background-color: var(--color-warning-light); color: var(--color-warning); border-left-color: var(--color-warning); } .alert-info { background-color: var(--color-info-light); color: var(--color-info); border-left-color: var(--color-info); } /* Pantalla de "Acceso Denegado" (403) — antes copiada con estilos inline en cada módulo. Ahora: (función en config/config.php). */ .access-denied { max-width: 600px; margin: 60px auto; padding: 40px; text-align: center; } .access-denied-box { background: var(--color-warning-light); border-left: 4px solid var(--color-warning); border-radius: var(--border-radius-sm); padding: 30px; } .access-denied-box i.fa-lock { font-size: 48px; color: var(--color-warning); margin-bottom: 20px; } .access-denied-box h2 { color: var(--color-warning); margin: 20px 0; } .access-denied-box p { color: var(--color-gray); font-size: 15px; margin: 15px 0; } /* ========================================== 9. FORMULARIOS ADICIONALES ========================================== */ .form-control, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], select, textarea { width: 100%; min-height: 40px; padding: 9px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-md); font-size: var(--font-size-base); font-family: var(--font-family-base); color: var(--color-dark); background-color: var(--color-surface-alt); box-sizing: border-box; line-height: 1.5; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } textarea { min-height: 80px; resize: vertical; } .form-control:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); background-color: var(--color-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); } .form-control:disabled, input:disabled, select:disabled, textarea:disabled { background-color: var(--color-light); cursor: not-allowed; opacity: 0.7; } label { display: block; margin-bottom: var(--spacing-xs); font-weight: 500; font-size: var(--font-size-sm); color: var(--color-dark); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); } /* Utilidad genérica de grillas de 2/3 columnas para filtros y formularios (reemplaza los grid-template-columns inline repetidos por las páginas) */ .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); align-items: end; } .grid-3col { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--spacing-md); align-items: end; } /* Los hijos de un grid/flex traen min-width:auto, o sea que se niegan a encogerse por debajo del ancho de su contenido. Cuando adentro hay una tabla ancha, el hijo estira la grilla y desborda la página aunque la tabla ya esté dentro de un .table-responsive con scroll propio. */ .grid-2col > *, .grid-3col > *, .stat-grid > *, .dashboard-grid > * { min-width: 0; } @media (max-width: 768px) { .grid-3col { grid-template-columns: 1fr; } } .form-hint { font-size: var(--font-size-sm); color: var(--color-gray); font-weight: normal; display: inline; } .form-help { color: var(--color-gray); margin-top: var(--spacing-xs); display: block; font-size: var(--font-size-sm); } .form-actions { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-xl); justify-content: flex-end; } /* ========================================== 10. COMPONENTES DE PÁGINA ========================================== */ .page-header { display: flex; justify-content: space-between; align-items: center; /* Sin wrap, el título + los botones de acción no caben en móvil y estiran el contenedor. */ flex-wrap: wrap; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); gap: var(--spacing-lg); } .page-title { display: flex; align-items: center; gap: var(--spacing-md); } /* Ícono del título dentro de un "chip" con color de marca — da presencia. */ .page-title > i { font-size: 20px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: var(--color-primary); background: linear-gradient(150deg, var(--color-primary-light), color-mix(in srgb, var(--color-accent) 14%, var(--color-primary-lighter))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent); flex-shrink: 0; } .page-title h1 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.2px; color: var(--color-dark); line-height: 1.15; } .card-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-gray-light); } .input-search { flex: 1 1 200px; width: auto; min-width: 200px; padding: 9px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-md); font-size: var(--font-size-base); font-family: var(--font-family-base); background-color: var(--color-surface-alt); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .input-search:focus { outline: none; border-color: var(--color-primary); background-color: var(--color-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); } .input-filter { flex: 0 1 200px; width: auto; min-width: 160px; padding: 9px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-md); font-size: var(--font-size-base); background-color: var(--color-surface-alt); } /* Cualquier input/select que sea hijo directo de una fila flex de filtros nunca debe heredar el width:100% genérico: su tamaño lo da flex/gap. */ .card-filters > input, .card-filters > select, .filters-row > input, .filters-row > select, .filters-buttons > input, .filters-buttons > select { width: auto; } .table-responsive { width: 100%; overflow-x: auto; } .table { width: 100%; border-collapse: collapse; background-color: var(--color-surface); margin: 0; } .table-users tbody td { padding: var(--spacing-md) var(--spacing-sm); } .spinner { border: 4px solid var(--color-gray-light); border-top: 4px solid var(--color-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto var(--spacing-md); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); } .status-activo { background-color: var(--color-success-light); color: var(--color-success); } .status-inactivo { background-color: var(--color-danger-light); color: var(--color-danger); } .status-bloqueado { background-color: var(--color-warning-light); color: var(--color-warning); } /* Familia .badge-* — mismo estilo visual que .status-badge, usada en varios módulos (Inventario, Clientes, Proveedores, Caja) con esta otra convención de nombre. Se definen aparte para no romper el nombre que cada módulo ya usa en su HTML/JS. */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); } .badge-success { background-color: var(--color-success-light); color: var(--color-success); } .badge-danger { background-color: var(--color-danger-light); color: var(--color-danger); } .badge-warning { background-color: var(--color-warning-light); color: var(--color-warning); } .badge-info { background-color: var(--color-info-light); color: var(--color-info); } .badge-secondary { background-color: var(--color-gray-light); color: var(--color-gray); } /* ========================================== TARJETAS DE ACCESO RÁPIDO (Dashboard, Hub de Inventario, y cualquier otro "hub" de módulo) — antes duplicadas letra por letra en cada página con colores en hexadecimal sueltos; ahora centralizadas y tokenizadas para que el modo oscuro también las cubra. ========================================== */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-lg); } .dashboard-card { display: flex; padding: var(--spacing-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; cursor: pointer; gap: var(--spacing-lg); } .dashboard-card:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); box-shadow: var(--shadow-lg); transform: translateY(-3px); } .card-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 15px; font-size: 24px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05); } .card-icon.usuarios, .card-icon.almacen { background-color: var(--color-primary-light); color: var(--color-primary); } .card-icon.productos { background-color: var(--color-success-light); color: var(--color-success); } .card-icon.clientes { background-color: var(--color-danger-light); color: var(--color-danger); } .card-icon.cartera { background-color: var(--color-warning-light); color: var(--color-warning); } .card-icon.ventas, .card-icon.categorias, .card-icon.lista-precios { background-color: var(--color-accent-purple-light); color: var(--color-accent-purple); } .card-icon.compras, .card-icon.traslados { background-color: var(--color-accent-blue-light); color: var(--color-accent-blue); } .card-icon.reportes, .card-icon.separados { background-color: var(--color-accent-orange-light); color: var(--color-accent-orange); } .card-icon.bodegas { background-color: var(--color-accent-slate-light); color: var(--color-accent-slate); } .card-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .card-content h3 { font-size: 18px; font-weight: 600; margin: 0 0 var(--spacing-sm) 0; color: var(--color-dark); } .card-content p { font-size: 13px; color: var(--color-gray); margin: 0; } .card-action { font-size: 12px; font-weight: 600; color: var(--color-primary); margin-top: var(--spacing-md); display: inline-block; } .dashboard-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-card); } .dashboard-summary h2 { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 18px; font-weight: 600; margin: 0 0 var(--spacing-lg) 0; color: var(--color-dark); } .btn-action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: var(--font-size-sm); border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-edit { background-color: var(--color-info); color: var(--color-white); } .btn-edit:hover { background-color: #0da5c7; } .btn-delete { background-color: var(--color-danger); color: var(--color-white); } .btn-delete:hover { background-color: #c82333; } .modal-small { max-width: 400px; } .modal-mensaje { margin: var(--spacing-lg) 0; } .modal-usuario { font-weight: bold; color: var(--color-danger); margin: var(--spacing-md) 0; } .modal-usuario { font-weight: bold; color: var(--color-danger); margin: var(--spacing-md) 0; } /* ========================================== MENÚ DE ACCIONES (3 PUNTOS) ========================================== */ .action-menu { position: relative; display: inline-block; } .btn-action-menu { background: none; border: none; color: var(--color-gray); font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); } .btn-action-menu:hover, .btn-action-menu:focus-visible { color: var(--color-primary); background-color: var(--color-primary-light); } .action-dropdown { position: absolute; right: 0; top: 100%; background-color: var(--color-surface); border: 1px solid var(--color-gray-light); border-radius: var(--border-radius-sm); box-shadow: var(--shadow-md); min-width: 150px; max-height: 60vh; overflow-y: auto; z-index: 1000; margin-top: 4px; } .action-dropdown a { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); color: var(--color-dark); text-decoration: none; transition: var(--transition); border-bottom: 1px solid var(--color-gray-light); font-size: var(--font-size-sm); } .action-dropdown a:last-child { border-bottom: none; } .action-dropdown a:hover { background-color: var(--color-primary-light); color: var(--color-primary); } .action-dropdown a i { width: 16px; text-align: center; } /* Alias para dropdown-acciones (usado en categorías, bodegas, etc) */ .dropdown-acciones { position: relative; display: inline-block; } .btn-acciones { background: none; border: none; color: var(--color-gray); font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); } .btn-acciones:hover, .btn-acciones:focus-visible { color: var(--color-primary); background-color: var(--color-primary-light); } .dropdown-menu-acciones { position: absolute; right: 0; top: 100%; background-color: var(--color-surface); border: 1px solid var(--color-gray-light); border-radius: var(--border-radius-sm); box-shadow: var(--shadow-md); min-width: 150px; max-height: 60vh; overflow-y: auto; z-index: 1000; margin-top: 4px; } .dropdown-menu-acciones a { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); color: var(--color-dark); text-decoration: none; transition: var(--transition); border-bottom: 1px solid var(--color-gray-light); font-size: var(--font-size-sm); } .dropdown-menu-acciones a:last-child { border-bottom: none; } .dropdown-menu-acciones a:hover { background-color: var(--color-primary-light); color: var(--color-primary); } .dropdown-menu-acciones a i { width: 16px; text-align: center; } /* ========================================== 11. UTILIDADES ========================================== */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } .p-sm { padding: var(--spacing-sm); } .p-md { padding: var(--spacing-md); } .p-lg { padding: var(--spacing-lg); } .flex { display: flex; gap: var(--spacing-md); } .flex-center { display: flex; justify-content: center; align-items: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-wrap { flex-wrap: wrap; } .w-full { width: 100%; } .hidden { display: none; } .visible { display: block; } /* ========================================== 10. ANIMACIONES ========================================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ========================================== 11. RESPONSIVE DESIGN ========================================== */ @media (max-width: 768px) { :root { --font-size-base: 13px; --spacing-lg: 12px; } .modal-content { width: 95%; max-width: none; padding: var(--spacing-lg); } table { font-size: var(--font-size-sm); } thead th { padding: var(--spacing-sm) var(--spacing-xs); } tbody td { padding: var(--spacing-sm) var(--spacing-xs); } .btn { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-sm); } .flex { flex-direction: column; } .flex-between { flex-direction: column; gap: var(--spacing-md); } .form-row, .grid-2col, .grid-3col { grid-template-columns: 1fr !important; } .dropdown-menu, .action-dropdown, .dropdown-menu-acciones { right: 0; left: auto; max-width: calc(100vw - 2 * var(--spacing-lg)); } /* Los filtros dejan de competir por el ancho: cada campo ocupa la fila completa. Sin esto, el min-width de 200px/160px los obliga a convivir apretados en pantallas angostas. */ .card-filters, .filters-row { flex-direction: column; align-items: stretch; } .input-search, .input-filter, .card-filters > input, .card-filters > select, .card-filters > .btn, .filters-row > input, .filters-row > select { width: 100%; min-width: 0; flex: none; } /* Los botones de acción del encabezado ocupan el ancho disponible en vez de quedar apretados contra el borde. */ .page-header > div { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } } @media (max-width: 480px) { :root { --font-size-base: 12px; --spacing-lg: 8px; } /* OJO: nunca poner display:block en el . Eso saca a la tabla de su contexto de formato y las columnas del thead dejan de alinearse con las del tbody. El scroll horizontal ya lo da .table-responsive, que envuelve todas las tablas del sistema. */ table { font-size: 11px; white-space: nowrap; } thead th { padding: 4px 2px; } tbody td { padding: 4px 2px; } .modal-content { padding: var(--spacing-md); } } /* ========================================== 20. LAYOUT DE PÁGINA COMPARTIDO (contenedor, cabecera, stats, filtros — reemplaza los