/* Variables y reseteo */
:root {
    --primary: #1e293b;
    --secondary: #334155;
    --accent: #2563eb;
    --bg-light: #f8fafc;
    --text-dark: #0f172a;
    --sidebar-width: 260px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background-color: var(--bg-light); color: var(--text-dark); }

/* Layout Base */
.layout-container { display: flex; height: 100vh; overflow: hidden; }

/* --- SIDEBAR --- */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--primary);
    color: white;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    z-index: 1000;
}
.sidebar-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; background: #0f172a; }
.close-sidebar-btn { display: none; background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; }

.user-profile { padding: 15px 20px; border-bottom: 1px solid var(--secondary); font-size: 0.9rem; }

.menu-links { flex-grow: 1; padding-top: 10px; display: flex; flex-direction: column; }
.menu-links a { color: #cbd5e1; text-decoration: none; padding: 15px 20px; display: flex; align-items: center; gap: 10px; border-left: 3px solid transparent; }
.menu-links a:hover { background-color: var(--secondary); border-left: 3px solid var(--accent); color: white; }

.btn-logout { background-color: #ef4444; color: white; border: none; padding: 15px; cursor: pointer; text-align: left; display: flex; gap: 10px; }

/* --- MAIN CONTENT --- */
.main-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar { background: white; padding: 15px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 15px; }
.menu-toggle-btn { display: none; background: none; border: none; font-size: 1.5rem; color: var(--primary); cursor: pointer; }

.module-content { padding: 20px; overflow-y: auto; flex-grow: 1; }

/* --- RESPONSIVIDAD (Celulares y Tablets pequeñas) --- */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        height: 100vh;
        transform: translateX(-100%); /* Escondido por defecto */
    }
    .sidebar.active {
        transform: translateX(0); /* Mostrar cuando tiene la clase 'active' */
    }
    .menu-toggle-btn { display: block; /* Mostrar botón hamburguesa */ }
    .close-sidebar-btn { display: block; /* Mostrar X en el menú para cerrar */ }
}