/* ====================================================================== 1. VARIABLES CSS — TEMA CLARO (valores por defecto) ====================================================================== */ :root { /* Fondos */ --bg-body: #f6f7fa; --bg-surface: #ffffff; --bg-surface-hover: #f1f2f6; --bg-surface-active: #eef0ff; /* Bordes */ --border-color: rgba(15, 23, 42, 0.08); --border-color-strong: rgba(15, 23, 42, 0.14); /* Texto */ --text-primary: #111827; --text-secondary: #667085; --text-tertiary: #98a2b3; --text-on-accent: #ffffff; /* Acento (degradado de marca) */ --accent-1: #4f46e5; --accent-2: #7c3aed; --accent-gradient: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%); --accent-soft: rgba(79, 70, 229, 0.10); /* Sombras */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.08); --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.14); /* Radios */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* Layout */ --navbar-height: 58px; --sidebar-width: 272px; /* Movimiento */ --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Tipografía */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ====================================================================== 2. VARIABLES CSS — TEMA OSCURO Se activa automáticamente cuando ====================================================================== */ [data-bs-theme="dark"] { --bg-body: #0d0f14; --bg-surface: #15171f; --bg-surface-hover: #1d2029; --bg-surface-active: #20223a; --border-color: rgba(255, 255, 255, 0.08); --border-color-strong: rgba(255, 255, 255, 0.14); --text-primary: #f0f1f5; --text-secondary: #9aa1b1; --text-tertiary: #6b7280; --accent-1: #6366f1; --accent-2: #a78bfa; --accent-soft: rgba(99, 102, 241, 0.16); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); } /* ====================================================================== 3. RESET / BASE ====================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background-color: var(--bg-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; transition: background-color var(--transition-base), color var(--transition-base); } /* Evita el scroll del fondo cuando el sidebar está abierto en móvil */ body.sidebar-open { overflow: hidden; } a { text-decoration: none; color: inherit; } button { font-family: inherit; } /* Foco visible accesible, sin el contorno azul por defecto del navegador */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; border-radius: var(--radius-sm); } /* Scrollbar discreto (Webkit) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: var(--border-color-strong); border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; } /* ====================================================================== 4. NAVBAR SUPERIOR ====================================================================== */ .app-navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-height); background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-xs); display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; z-index: 1000; transition: background-color var(--transition-base), border-color var(--transition-base); } .navbar-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; /* permite truncar el título en pantallas pequeñas */ } /* Botón hamburguesa */ .btn-hamburger { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background-color: transparent; border: none; border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: background-color var(--transition-base), color var(--transition-base), transform 0.15s ease; } .btn-hamburger i { font-size: 1.2rem; line-height: 1; } .btn-hamburger:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); } .btn-hamburger:active { transform: scale(0.94); } /* Título dinámico de la página (cambia según la vista actual) */ .page-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbar-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } /* Ancla de posicionamiento para cada botón con menú desplegable del lado derecho (accesos rápidos y usuario) */ .navbar-action-group { position: relative; } /* Botón de "Accesos rápidos": mismo tamaño y comportamiento visual que el botón hamburguesa, ubicado antes del avatar */ .btn-quick-access { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background-color: transparent; border: none; border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: background-color var(--transition-base), color var(--transition-base); } .btn-quick-access i { font-size: 1.15rem; line-height: 1; } .btn-quick-access:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); } /* Resalta el botón mientras su menú está abierto */ .btn-quick-access[aria-expanded="true"] { background-color: var(--bg-surface-active); color: var(--accent-1); } /* Menú desplegable de accesos rápidos */ .quick-access-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 220px; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0.5rem; opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); z-index: 1001; } .quick-access-dropdown.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .quick-access-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; margin-bottom: 0.1rem; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: background-color var(--transition-base), color var(--transition-base); } .quick-access-item:last-child { margin-bottom: 0; } .quick-access-item:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); } .quick-access-item i { font-size: 1.05rem; width: 18px; text-align: center; flex-shrink: 0; color: var(--text-tertiary); transition: color var(--transition-base); } .quick-access-item:hover i { color: var(--accent-1); } /* Avatar circular con inicial del usuario */ .user-avatar { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-gradient); color: var(--text-on-accent); font-weight: 600; font-size: 15px; border: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); } .user-avatar:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .user-avatar:active { transform: translateY(0); } /* Menú desplegable del usuario */ .user-dropdown-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 240px; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0.5rem; opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); z-index: 1001; } .user-dropdown-menu.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .user-dropdown-header { padding: 0.65rem 0.75rem 0.5rem; } .user-dropdown-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .user-dropdown-email { font-size: 12.5px; color: var(--text-tertiary); } .user-dropdown-divider { height: 1px; background-color: var(--border-color); margin: 0.4rem 0; } .user-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-secondary); background: none; border: none; cursor: pointer; transition: background-color var(--transition-base), color var(--transition-base); } .user-dropdown-item:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); } .user-dropdown-item .item-label { display: flex; align-items: center; gap: 0.55rem; } .user-dropdown-item i { font-size: 1rem; color: var(--text-tertiary); } .user-dropdown-item.danger:hover { background-color: rgba(220, 38, 38, 0.08); color: #dc2626; } .user-dropdown-item.danger:hover i { color: #dc2626; } /* Switch de tema (claro / oscuro) dentro del dropdown */ .theme-switch { width: 38px; height: 22px; margin: 0; cursor: pointer; background-color: var(--border-color-strong); border-color: transparent; } .theme-switch:checked { background-color: var(--accent-1); border-color: var(--accent-1); } .theme-switch:focus { box-shadow: none; } /* ====================================================================== 5. OVERLAY (fondo oscuro al abrir el sidebar) ====================================================================== */ .sidebar-overlay { position: fixed; inset: 0; background-color: rgba(10, 10, 15, 0); pointer-events: none; transition: background-color var(--transition-base); z-index: 1010; } .sidebar-overlay.show { background-color: rgba(10, 10, 15, 0.45); pointer-events: auto; } /* ====================================================================== 6. SIDEBAR LATERAL ====================================================================== */ .app-sidebar { position: fixed; top: 0; left: calc(var(--sidebar-width) * -1); width: var(--sidebar-width); max-width: 86vw; height: 100vh; background-color: var(--bg-surface); border-right: 1px solid var(--border-color); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 1020; transition: left var(--transition-base); } .app-sidebar.show { left: 0; } /* Cabecera del sidebar: marca / logo */ .sidebar-header { display: flex; align-items: center; gap: 0.65rem; height: var(--navbar-height); padding: 0 1.25rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .sidebar-logo-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-gradient); color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; } .sidebar-brand-name { font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; } /* Navegación */ .sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0.75rem; } .nav-group { margin-bottom: 1.5rem; } .nav-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 0.6rem; margin-bottom: 0.4rem; } .nav-link-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem; margin-bottom: 0.15rem; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 500; color: var(--text-secondary); transition: background-color var(--transition-base), color var(--transition-base); } .nav-link-item i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; color: var(--text-tertiary); transition: color var(--transition-base); } .nav-link-item:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); } .nav-link-item:hover i { color: var(--text-secondary); } .nav-link-item.active { background-color: var(--bg-surface-active); color: var(--accent-1); font-weight: 600; } .nav-link-item.active i { color: var(--accent-1); } /* Pie del sidebar */ .sidebar-footer { padding: 0.85rem 1.25rem; border-top: 1px solid var(--border-color); font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; } /* ====================================================================== 7. CONTENIDO PRINCIPAL ====================================================================== */ .app-main { margin-top: var(--navbar-height); min-height: calc(100vh - var(--navbar-height)); padding: 1.75rem 1rem; background-color: var(--bg-body); transition: background-color var(--transition-base); } /* Contenedor "tarjeta" reutilizable para futuras pantallas */ .surface-card { background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; transition: background-color var(--transition-base), border-color var(--transition-base); } /* ====================================================================== 8. RESPONSIVE ====================================================================== */ @media (max-width: 576px) { .app-navbar { padding: 0 0.85rem; } .page-title { font-size: 16px; } .app-main { padding: 1.25rem 1rem; } .user-dropdown-menu { right: -0.5rem; } } /* Respeta la preferencia de "menos movimiento" del sistema */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }