/* ================================================================ */
/* ESTILOS GLOBALES DE LAYOUT */
/* ================================================================ */

body {
    font-family: 'Arial', sans-serif;
    background-color: #fffdfd; /* Fondo neutro para el área de contenido */
}

/* ✅ CLASE PARA CUANDO EL SIDEBAR ESTÁ OCULTO, HACIENDO EL LAYOUT FLUIDO */
#content.sidebar-inactive {
    margin-left: 0; /* El contenido ocupa todo el ancho */
}


/* ================================================================ */
/* ESTILOS DE LA BARRA DE NAVEGACIÓN SUPERIOR (NAVBAR) */
/* ================================================================ */

.navbar {
    background-color: #1a1a1d;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* Encima del sidebar */
}
.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    color: white;
}
#sidebarCollapse {
    margin-right: 20px;
}
.navbar-toggler-icon {
    color: white;
}


/* ================================================================ */
/* RESPONSIVE DEL LAYOUT PRINCIPAL */
/* ================================================================ */

@media (max-width: 768px) {
    /* En móvil, el contenido siempre tiene margen 0 y el sidebar está oculto */
    #content {
        margin-left: 0 !important;
    }
}