/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-3pbeara8zb] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-3pbeara8zb] {
    flex: 1;
}

.sidebar[b-3pbeara8zb] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-3pbeara8zb] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-3pbeara8zb]  a, .top-row[b-3pbeara8zb]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-3pbeara8zb]  a:hover, .top-row[b-3pbeara8zb]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-3pbeara8zb]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-3pbeara8zb] {
        justify-content: space-between;
    }

    .top-row[b-3pbeara8zb]  a, .top-row[b-3pbeara8zb]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-3pbeara8zb] {
        flex-direction: row;
    }

    .sidebar[b-3pbeara8zb] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-3pbeara8zb] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-3pbeara8zb]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-3pbeara8zb], article[b-3pbeara8zb] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Pedido explícito de Vladi (2026-09-22, reportado con captura real del ticket de Pedidos de
   mesa): al imprimir se imprimía TODO el panel -- el menú lateral y la barra de arriba incluidos
   -- porque esos los pinta MainLayout, no la página en sí; el ".no-imprimir" que ya usa
   PedidosDeRestaurante.razor (ver ese archivo) solo puede ocultar SU propio contenido, nunca el
   del layout que lo envuelve. Se oculta acá, una sola vez, para cualquier página que imprima algo
   en el futuro -- no hace falta repetirlo por página. */
@media print {
    .sidebar[b-3pbeara8zb], .top-row[b-3pbeara8zb] {
        display: none !important;
    }
}

#blazor-error-ui[b-3pbeara8zb] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-3pbeara8zb] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-lgqy41ar61] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-lgqy41ar61] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-lgqy41ar61] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

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

/* Las reglas de .nav-item/.menu-card viven en wwwroot/app.css (globales, sin ámbito) a propósito
   -- MenuCardLink.razor es un componente hijo separado y el aislamiento de CSS de Blazor no deja
   que un selector de acá (aunque use ::deep) le llegue, porque el primer tramo del selector
   (.nav-item) lo renderiza ese componente hijo, no este. Ver el comentario completo en app.css. */

/* Pedido explícito de Vladi (2026-09-09): grupos plegables dentro del menú ("Configuraciones" y
   "Mi cuenta") -- mismo mecanismo de casilla+CSS que el menú entero (checkbox invisible + label
   que lo activa + contenido que aparece solo si está marcada), pero anidado, así no hace falta
   nada de JavaScript nuevo. Estos elementos los renderiza NavMenu.razor mismo (no MenuCardLink),
   así que el aislamiento de CSS de Blazor no es un problema acá -- a diferencia de .nav-item/
   .menu-card de arriba. */
.menu-group-toggle[b-lgqy41ar61] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.menu-group-header[b-lgqy41ar61] {
    display: block;
    cursor: pointer;
    padding: 0.6rem 1rem;
    margin: 0 0.75rem 0.25rem;
    border-radius: 0.5rem;
    background-color: #cfcbe3;
    border: 1px solid #b7b1d6;
    color: #211d3d;
    font-weight: 500;
}

.menu-group-header[b-lgqy41ar61]::after {
    content: "▸";
    float: right;
}

.menu-group-toggle:checked ~ .menu-group-header[b-lgqy41ar61]::after {
    content: "▾";
}

.menu-group-content[b-lgqy41ar61] {
    display: none;
}

.menu-group-toggle:checked ~ .menu-group-content[b-lgqy41ar61] {
    display: block;
}

/* El grupo "Mi cuenta" (correo + cerrar sesión) queda al final de todo, con menos peso visual
   que el resto del menú -- "que queden ocultos no a simple vista", pedido explícito de Vladi. */
.account-group[b-lgqy41ar61] {
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.5rem;
}

.account-group .menu-group-header[b-lgqy41ar61] {
    background-color: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: normal;
}

.nav-scrollable[b-lgqy41ar61] {
    display: none;
}

/* Pedido explícito de Vladi (2026-09-09): "quiero que en esa parte de abajo no aparezca nada...
   no se pueda deslizar más abajo de donde dice cerrar sesión, esa sea el final de la interfaz" --
   en celular el menú abierto no tenía techo de alto: al llegar a "Cerrar sesión" el scroll seguía
   de largo hacia el contenido de la página de atrás (Productos, etc., que en celular está
   apilado justo debajo). height+overflow-y ya lo arreglaba a medias, pero seguía "encadenando" el
   scroll hacia afuera al llegar al final -- comportamiento por defecto del navegador (scroll
   chaining): cuando un contenedor con scroll interno llega a su límite, el MISMO gesto de deslizar
   sigue empujando al contenedor de más afuera. overscroll-behavior-y: contain corta esa cadena a
   propósito -- llegar a "Cerrar sesión" ahora es un límite real, no solo visual. */
.navbar-toggler:checked ~ .nav-scrollable[b-lgqy41ar61] {
    display: block;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* Pedido explícito de Vladi (2026-09-09): "quiero que todos los botones se puedan ocultar y
   cuando se oculte aparezca el logo completo de la empresa zolvex" -- es el espejo EXACTO de las
   reglas de .nav-scrollable de arriba/abajo: se ve cuando el menú está oculto, se esconde cuando
   el menú está visible, en cualquier ancho de pantalla. */
.brand-logo-panel[b-lgqy41ar61] {
    display: none;
    padding: 3rem 1.5rem;
    text-align: center;
}

.brand-logo-panel img[b-lgqy41ar61] {
    max-width: 240px;
    width: 100%;
    height: auto;
}

.navbar-toggler:not(:checked) ~ .brand-logo-panel[b-lgqy41ar61] {
    display: block;
}

/* Pedido explícito de Vladi (2026-09-09): "quiero que se pueda ocultar todo el menú" -- antes,
   en pantallas anchas, el menú quedaba SIEMPRE visible sin ninguna forma de ocultarlo (el botón
   de arriba se escondía a propósito con display:none). Ahora la MISMA casilla sigue controlando
   la visibilidad en cualquier ancho, solo que invierte el sentido: en celular el checkbox arranca
   destildado (por default del navegador) y la regla de arriba lo mantiene oculto hasta tocar el
   botón; en pantalla ancha esta regla lo fuerza visible de entrada (display:block acá abajo) y
   recién si se marca el checkbox se oculta -- nunca se usó el atributo "checked" del checkbox
   para lograr esto, a propósito (ver el comentario en NavMenu.razor: eso rompía el celular). */
@media (min-width: 641px) {
    .nav-scrollable[b-lgqy41ar61] {
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-lgqy41ar61] {
        display: none;
    }

    /* Mismo espejo que arriba, para el logo -- en pantalla ancha el menú está visible por
       defecto, así que el logo arranca oculto; recién aparece cuando se marca el checkbox
       (menú oculto). */
    .navbar-toggler:not(:checked) ~ .brand-logo-panel[b-lgqy41ar61] {
        display: none;
    }

    .navbar-toggler:checked ~ .brand-logo-panel[b-lgqy41ar61] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 3.5rem);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bxge3r1fd1],
.components-reconnect-repeated-attempt-visible[b-bxge3r1fd1],
.components-reconnect-failed-visible[b-bxge3r1fd1],
.components-pause-visible[b-bxge3r1fd1],
.components-resume-failed-visible[b-bxge3r1fd1],
.components-rejoining-animation[b-bxge3r1fd1] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bxge3r1fd1],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-bxge3r1fd1],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bxge3r1fd1],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bxge3r1fd1],
#components-reconnect-modal.components-reconnect-retrying[b-bxge3r1fd1],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bxge3r1fd1],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-bxge3r1fd1],
#components-reconnect-modal.components-reconnect-failed[b-bxge3r1fd1],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bxge3r1fd1] {
    display: block;
}


#components-reconnect-modal[b-bxge3r1fd1] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bxge3r1fd1 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bxge3r1fd1 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bxge3r1fd1 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bxge3r1fd1]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-bxge3r1fd1 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bxge3r1fd1 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bxge3r1fd1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bxge3r1fd1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bxge3r1fd1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bxge3r1fd1] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bxge3r1fd1] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-bxge3r1fd1] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-bxge3r1fd1] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-bxge3r1fd1] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bxge3r1fd1] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bxge3r1fd1 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bxge3r1fd1] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bxge3r1fd1 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}