:root {
        --primary-color_menu: #3498db;
        --secondary-color_menu: #2c3e50;
        --box-shadow_menu: 0 5px 15px rgba(0,0,0,0.08);
    }
/* navbar-styles.css - Estilos específicos para la barra de navegación */
body { 
    background:#f8f9fa; 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
}

/* NAVBAR ESTILOS */
.navbar-custom { 
    background: var(--secondary-color_menu); 
    box-shadow: var(--box-shadow_menu); 
    padding: .55rem 0; 
}

.navbar-brand { 
    color: #fff; 
    font-size: 1.05rem; 
    text-decoration: none; 
    display:flex; 
    align-items:center; 
    gap:.4rem; 
}

.nav-left { 
    display:flex; 
    gap:8px; 
    align-items:center; 
}

.nav-left .nav-link { 
    color: rgba(255,255,255,0.95); 
    padding:.45rem .6rem; 
    border-radius:6px; 
    transition: .12s ease; 
    display:inline-flex; 
    align-items:center; 
    gap:.45rem; 
}

.nav-left .nav-link:hover,
.nav-left .nav-link:focus { 
    background: rgba(255,255,255,0.06); 
    color:#fff; 
    transform: translateY(-1px); 
    box-shadow: 0 6px 14px rgba(0,0,0,0.06); 
    text-decoration:none; 
    cursor:pointer; 
}

.brand-wrap { 
    display:flex; 
    align-items:center; 
    gap:.6rem; 
    margin-left: 0.8rem; 
}

.nav-right { 
    display:flex; 
    align-items:center; 
    gap:.6rem; 
    margin-left:auto; 
}

.user-avatar { 
    width:38px; 
    height:38px; 
    border-radius:50%; 
    background:var(--primary-color_menu); 
    color:#fff; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-weight:700; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
}

.offcanvas.offcanvas-start { 
    width: 260px; 
}

/* Media queries para navbar */
@media (max-width: 991px) {
    .nav-left { 
        display:none; 
    }
    
    .brand-wrap { 
        margin-left: .3rem; 
    }
}