/* =================================================================== 1. VARIABLES Y TEMA (CLARO / OSCURO) =================================================================== */ :root { /* Dimensiones Layout */ --sidebar-width: 260px; --sidebar-gap: 24px; --sidebar-total: calc(var(--sidebar-width) + var(--sidebar-gap)); --header-height: 70px; --radius: 14px; /* Colores Sidebar (Azul Glass) */ --glass-bg: linear-gradient(180deg, rgba(29,78,216,0.95), rgba(15,23,42,0.98)); --glass-border: rgba(147,197,253,0.2); --link-color: #dbeafe; /* Azul muy claro */ --link-hover-bg: rgba(255, 255, 255, 0.15); --link-active-bg: #2563eb; /* Azul vibrante */ /* TEMA CLARO (Default) */ --theme-bg: #f4f7fc; --theme-card-bg: #ffffff; --theme-text: #212529; --theme-text-muted: #5a6a85; --theme-border: #e9eef5; --theme-primary: #0d6efd; --theme-shadow-sm: 0 2px 12px rgba(0,0,0,0.04); --theme-shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1); } /* Modo Oscuro (Se activa con data-bs-theme="dark" en ) */ [data-bs-theme="dark"] { --theme-bg: #0f172a; /* Slate 900 */ --theme-card-bg: #1e293b; /* Slate 800 */ --theme-text: #f1f5f9; /* Slate 100 */ --theme-text-muted: #94a3b8; /* Slate 400 */ --theme-border: #334155; /* Slate 700 */ --theme-shadow-sm: 0 2px 12px rgba(0,0,0,0.3); --theme-shadow-lg: 0 10px 30px -5px rgba(0,0,0,0.5); /* Overrides de Bootstrap */ --bs-body-bg: var(--theme-bg); --bs-body-color: var(--theme-text); --bs-card-bg: var(--theme-card-bg); --bs-card-border-color: var(--theme-border); --bs-table-bg: var(--theme-card-bg); --bs-table-color: var(--theme-text); --bs-table-hover-bg: #334155; --bs-border-color: var(--theme-border); /* Ajuste de inputs en modo oscuro */ --bs-form-control-bg: #0f172a; --bs-form-control-border-color: #334155; --bs-form-select-bg: #0f172a; } /* =================================================================== 2. RESET Y BASE =================================================================== */ body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--theme-bg); color: var(--theme-text); overflow-x: hidden; /* Evitar scroll horizontal */ transition: background-color 0.3s ease, color 0.3s ease; } body.no-scroll { overflow: hidden; } /* Scrollbar personalizado (Webkit) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; } /* =================================================================== 3. SIDEBAR (MENÚ LATERAL FLOTANTE) =================================================================== */ .glass-sidebar { position: fixed; background: var(--glass-bg); color: #fff; border: 1px solid var(--glass-border); backdrop-filter: blur(20px); box-shadow: 0 15px 35px rgba(0,0,0,0.2); display: flex; flex-direction: column; z-index: 1040; /* Alto z-index para móvil */ transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; } /* Header del Sidebar */ .sidebar-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; /* Para separar logo y botón cerrar */ padding: 0 1.5rem; border-bottom: none !important; } /* Links */ #sidebar-nav .nav-link { color: var(--link-color); padding: 0.85rem 1rem; margin-bottom: 4px; border-radius: 10px; display: flex; align-items: center; transition: all 0.2s ease; font-weight: 500; } #sidebar-nav .nav-link:hover { background: var(--link-hover-bg); color: #fff; transform: translateX(3px); } #sidebar-nav .nav-link.active { background: var(--link-active-bg); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } #sidebar-nav .nav-link i { width: 24px; text-align: center; margin-right: 10px; font-size: 1.1rem; transition: color 0.2s; } /* Submenú */ .submenu-link { color: rgba(219, 234, 254, 0.8) !important; padding-left: 3.2rem !important; font-size: 0.95rem; border-radius: 8px; } .submenu-link:hover { background: rgba(255,255,255,0.1); color: #fff !important; } /* Transiciones suaves para collapse */ #sidebar-nav .collapse { transition: height 0.3s ease !important; } /* =================================================================== 4. NAVBAR SUPERIOR Y CONTENIDO PRINCIPAL =================================================================== */ /* Navbar Superior (Blanco/Oscuro Flotante) */ .top-navbar { height: var(--header-height); background-color: var(--theme-card-bg); border-radius: 16px; /* Igual que el sidebar */ margin: 0px 5px 5px 15px; /* Alineado con el sidebar */ padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--theme-shadow-sm); position: sticky; top: 3px; z-index: 1020; transition: background-color 0.3s ease, border-color 0.3s ease; border: 1px solid var(--theme-border); } /* Contenedor Principal */ #page-content-wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.3s ease; } /* =================================================================== 5. RESPONSIVIDAD (MÓVIL Y TABLET) - ¡CORREGIDO! =================================================================== */ /* PANTALLA GRANDE (PC) > 992px */ @media (min-width: 992px) { /* Sidebar Flotante */ .glass-sidebar { top: 4px; left: 24px; width: var(--sidebar-width); height: calc(100vh - 48px); border-radius: var(--radius); transform: none !important; /* Siempre visible */ } /* Contenido empujado */ #page-content-wrapper { margin-left: var(--sidebar-total); width: calc(100% - var(--sidebar-total)); } /* Ocultar botón menú móvil */ #sidebarToggleMobile { display: none !important; } } /* PANTALLA PEQUEÑA (Móvil/Tablet) < 992px */ @media (max-width: 991.98px) { /* Sidebar Oculto (Offcanvas) */ .glass-sidebar { top: 0; left: 0; height: 100vh; width: 280px; /* Ancho cómodo para dedos */ border-radius: 0; border: none; transform: translateX(-100%); /* Oculto por defecto */ box-shadow: 5px 0 25px rgba(0,0,0,0.5); } /* Clase para mostrar el menú (agregada por JS) */ .glass-sidebar.open { transform: translateX(0); } /* Navbar ocupa todo el ancho */ .top-navbar { margin: 10px 10px 0 10px; border-radius: 12px; padding-left: 0.5rem; /* Espacio para el botón */ } /* Contenido ocupa todo el ancho */ #page-content-wrapper { margin-left: 0 !important; width: 100%; } /* Botón hamburguesa visible */ #sidebarToggleMobile { display: inline-block !important; border: none; background: transparent; font-size: 1.5rem; color: var(--theme-text); padding: 0.5rem; margin-right: 0.5rem; cursor: pointer; } } /* Overlay oscuro para móvil */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1035; /* Debajo del sidebar, encima del resto */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease; backdrop-filter: blur(2px); } .sidebar-overlay.show { opacity: 1; visibility: visible; } /* =================================================================== 6. COMPONENTES DE UI (CARDS, TABLAS, ETC) =================================================================== */ /* Cards con Efecto 3D Sutil */ .card { background-color: var(--theme-card-bg); border: 1px solid var(--theme-border); border-radius: 18px !important; box-shadow: var(--theme-shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; overflow: hidden; } .card:hover { transform: translateY(-4px); box-shadow: var(--theme-shadow-lg); } .card-header { background-color: var(--bs-light-bg-subtle) !important; border-bottom: 1px solid var(--theme-border) !important; padding: 1rem 1.25rem; font-weight: 600; } /* Inputs Modernos */ .form-control, .form-select { background-color: var(--theme-bg); border-color: var(--theme-border); color: var(--theme-text); border-radius: 8px; padding: 0.6rem 1rem; } .form-control:focus, .form-select:focus { border-color: var(--theme-primary); background-color: var(--theme-surface); box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15); } /* Tablas Limpias */ .table-hover tbody tr:hover td { background-color: var(--bs-table-hover-bg); color: var(--theme-text); } /* =================================================================== 7. UTILIDADES E ICONOS =================================================================== */ .metric-icon-box { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .icon-dashboard { color: #38bdf8; } .icon-ventas { color: #f472b6; } .icon-inventario { color: #a78bfa; } .icon-arqueo { color: #34d399; } .icon-empleados { color: #fbbf24; } .icon-client { color: #60a5fa; } .icon-reportes { color: #f87171; } .icon-entradas { color: #c084fc; } #sidebar-nav .nav-link.active i { color: #fff !important; } /* =================================================================== 8. NOTIFICACIONES TOAST (RESPONSIVO) =================================================================== */ #toast-notification-container { position: fixed; z-index: 2050; /* Encima de todo */ /* PC: Arriba derecha */ top: 20px; right: 20px; width: auto; max-width: 350px; } /* Móvil: Arriba centro */ @media (max-width: 767.98px) { #toast-notification-container { left: 50%; right: auto; transform: translateX(-50%); top: 15px; width: 92%; max-width: 400px; } #toast-notification-container .toast { width: 100%; font-size: 0.9rem; } } .toast { background-color: rgba(255,255,255,0.98); border: none; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); overflow: hidden; } /* Colores alertas */ .text-bg-warning { background-color: #ffc107 !important; color: #000 !important; } .text-bg-danger { background-color: #dc3545 !important; color: #fff !important; } .text-bg-success { background-color: #198754 !important; color: #fff !important; }