/* _content/SB.Monitor/Shared/MainLayout.razor.rz.scp.css */
/* MainLayout.css */


/* Media query para pantallas extra-peque�as (m�vil puro) */



/* _content/SB.Monitor/Shared/NavMenu.razor.rz.scp.css */
/* NavMenu.css */

/* El top-row dentro del sidebar (solo visible en m�vil) */
.sidebar .top-row[b-dau0a86hlj] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
    /* Puedes a�adir un z-index si este top-row debe superponerse a algo */
    z-index: 1001; /* M�s alto que el top-row principal si es necesario */
}

.navbar-toggler[b-dau0a86hlj] {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-brand[b-dau0a86hlj] {
    font-size: 1.1rem;
}

.oi[b-dau0a86hlj] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-dau0a86hlj] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-dau0a86hlj] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-dau0a86hlj] {
        padding-bottom: 1rem;
    }

    .nav-item[b-dau0a86hlj]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-dau0a86hlj]  a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .nav-item[b-dau0a86hlj]  a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

/* MEDIA QUERIES PARA EL COMPORTAMIENTO DEL MEN� */

/* Para pantallas medianas y grandes (desktop) */
@media (min-width: 641px) {
    .navbar-toggler[b-dau0a86hlj] {
        display: none;
    }

    /* Cambiamos el selector para que sea m�s preciso con tu estructura */
    .navbar-collapse[b-dau0a86hlj] {
        display: block !important;
    }
}

/* Para pantallas peque�as (m�vil) */
@media (max-width: 640.98px) {
    /* El contenedor del men� (el que tiene @NavMenuCssClass, que es .navbar-collapse) */
    .navbar-collapse.collapse:not(.show)[b-dau0a86hlj] { /* Cuando est� colapsado (no "show") */
        display: none; /* OCULTAR */
    }

    .navbar-collapse.collapse.show[b-dau0a86hlj] { /* Cuando est� expandido ("show") */
        display: block; /* MOSTRAR */
        position: absolute; /* Para que se superponga al contenido principal */
        top: 3.5rem; /* Posicionarlo debajo del top-row del sidebar */
        left: 0;
        width: 100%;
        height: calc(100vh - 3.5rem); /* Ocupa el resto de la altura de la vista */
        background-color: #5a1b30; /* Fondo del men� expandido */
        z-index: 999; /* Asegura que est� por encima del contenido principal */
        overflow-y: auto; /* Para que el men� sea scrollable si los items son muchos */
        padding-bottom: 1rem;
    }
}

/* Estilo para los links dentro del dropdown */
.dropdown-menu[b-dau0a86hlj] {
    background-color: #72203a; /* Un tono ligeramente diferente para distinguir */
    border: none;
}

    .dropdown-item[b-dau0a86hlj], .dropdown-menu .nav-link[b-dau0a86hlj] {
        color: #d7d7d7 !important;
    }

        .dropdown-menu .nav-link:hover[b-dau0a86hlj] {
            background-color: rgba(255,255,255,0.1);
            color: white !important;
        }