/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-tlucin8hnr] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

main[b-tlucin8hnr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    min-width: 0;
}

.sidebar[b-tlucin8hnr] {
    background-color: #ffffff;
    border-right: 1px solid #dadce0;
    box-shadow: 0 0 10px rgba(0,0,0,0.02);
    z-index: 10;
}

article.content[b-tlucin8hnr] {
    flex: 1;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mobile */
@media (max-width: 640.98px) {
    .sidebar[b-tlucin8hnr] {
        border-right: none;
        border-bottom: 1px solid #dadce0;
    }
}

/* Desktop */
@media (min-width: 641px) {
    .page[b-tlucin8hnr] {
        flex-direction: row;
    }

    .sidebar[b-tlucin8hnr] {
        width: 260px;
        min-width: 260px;
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ==========================================
   BARRA DE NAVEGACIÓN: GOOGLE WORKSPACE STYLE
   ========================================== */

.top-row[b-l6ymnwndp3] {
    min-height: 4.5rem;
    background-color: #ffffff !important;
    border-bottom: none !important; /* Unified sidebar, no header border */
    padding-left: 1.75rem !important;
    padding-top: 1rem !important;
    display: flex;
    align-items: center;
}

.navbar-brand[b-l6ymnwndp3] {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #2e7d32 !important; /* Google Green Primary */
    letter-spacing: -0.04em;
    display: flex;
    align-items: center;
}

.navbar-toggler[b-l6ymnwndp3] {
    border: none !important;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    background-color: #f1f3f4 !important;
}

.navbar-toggler:focus[b-l6ymnwndp3] {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2) !important;
}

.navbar-toggler-icon[b-l6ymnwndp3] {
    filter: invert(30%) sepia(50%) saturate(1000%) hue-rotate(85deg) brightness(85%) contrast(85%);
}

.nav-item[b-l6ymnwndp3]  .bi, .btn-logout .bi[b-l6ymnwndp3] {
    font-size: 1.25rem;
    margin-right: 1rem;
    color: #5f6368;
    transition: all 0.2s ease;
}

.nav-item[b-l6ymnwndp3] {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem !important; /* Generous spacing */
}

.nav-item:first-of-type[b-l6ymnwndp3] {
    padding-top: 1.5rem !important;
}

.nav-item:last-of-type[b-l6ymnwndp3] {
    padding-bottom: 1.5rem !important;
}

.nav-item[b-l6ymnwndp3]  a {
    color: #5f6368 !important; /* Google Gray */
    border-radius: 28px !important; /* Beautiful pill shape */
    height: 3.25rem;
    display: flex;
    align-items: center;
    padding-left: 1.5rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover State */
.nav-item[b-l6ymnwndp3]  a:hover {
    background-color: rgba(32, 33, 36, 0.04) !important;
    color: #202124 !important;
}

.nav-item[b-l6ymnwndp3]  a:hover .bi {
    color: #202124;
}

/* Active State (Google Workspace Active pill) */
.nav-item[b-l6ymnwndp3]  a.active {
    background-color: #e8f5e9 !important; /* Soft Primary Container Green */
    color: #1b5e20 !important; /* Dark Green Text */
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

.nav-item[b-l6ymnwndp3]  a.active .bi {
    color: #1b5e20 !important;
}

@media (min-width: 641px) {
    .navbar-toggler[b-l6ymnwndp3] {
        display: none;
    }

    .collapse[b-l6ymnwndp3] {
        display: block !important;
    }

    .nav-scrollable[b-l6ymnwndp3] {
        height: calc(100vh - 5.5rem);
        overflow-y: auto;
        background-color: #ffffff;
    }
}

/* Botón de Cerrar Sesión y efectos hover */
.btn-logout[b-l6ymnwndp3] {
    color: var(--md-sys-color-error) !important;
    border-radius: 28px !important;
    height: 3.25rem;
    display: flex;
    align-items: center;
    padding-left: 1.5rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
}

.btn-logout:hover[b-l6ymnwndp3] {
    background-color: var(--md-sys-color-error-container) !important;
    color: var(--md-sys-color-on-error-container) !important;
}

.btn-logout .bi[b-l6ymnwndp3] {
    color: var(--md-sys-color-error) !important;
}

.btn-logout:hover .bi[b-l6ymnwndp3] {
    color: var(--md-sys-color-on-error-container) !important;
}