/* /assets/style.css */

/* =========================================
   Variables Globales y Reset
   ========================================= */
:root {
    --primary-color: #0d6efd; /* Azul de Bootstrap */
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
    --bg-color: #f4f6f9; /* Fondo gris claro para el dashboard */
}

body {
    background-color: var(--bg-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

/* =========================================
   Estructura del Sidebar (Menú Lateral)
   ========================================= */
#sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    min-height: 100vh;
    transition: all 0.3s ease-in-out;
    background-color: #343a40; /* Gris oscuro */
    color: #fff;
    position: fixed;
    z-index: 1000;
}

/* Estado del sidebar cuando se colapsa */
#sidebar.collapsed {
    min-width: var(--sidebar-collapsed-width);
    max-width: var(--sidebar-collapsed-width);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #212529;
    text-align: center;
}

#sidebar.collapsed .sidebar-header strong {
    display: none; /* Ocultamos el texto del logo si se colapsa */
}

/* =========================================
   Contenedor Principal
   ========================================= */
#main-content {
    margin-left: var(--sidebar-width);
    transition: all 0.3s ease-in-out;
    padding: 20px;
    min-height: 100vh;
}

/* Ajuste del contenido cuando el sidebar se colapsa */
#main-content.expanded {
    margin-left: var(--sidebar-collapsed-width);
}

/* =========================================
   Ajustes para el Login
   ========================================= */
.login-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
}