@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Estructura ──
   `dvh` con `vh` de respaldo: en el móvil, `100vh` cuenta también el alto que ocupa la barra de
   direcciones, así que la página queda más alta que lo que se ve y aparece un desplazamiento
   vertical que no lleva a ninguna parte. `dvh` mide el espacio realmente visible. */
.main-layout-shell[b-1mop0ox8p0] {
    min-height: 100vh;
    min-height: 100dvh;
}

.main-layout-body[b-1mop0ox8p0] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Barra lateral ──
   Ancho en `rem`: con píxeles fijos, ampliar el tamaño de letra del navegador estrecha el menú en
   proporción y los títulos se cortan. El `min()` es para pantallas estrechas de verdad: en un móvil
   de 320px, 16,25rem tapa el 81 % de la pantalla y no se ve lo que hay detrás para cerrarlo. */
.main-layout-sidebar[b-1mop0ox8p0] {
    width: min(16.25rem, 85vw);

    /* **El `!important` hace falta, no es pereza.** A partir de `lg`, Bootstrap aplica
       `.offcanvas-lg { background-color: transparent !important }` —línea 6526 de bootstrap.css—
       porque a ese tamaño el panel deja de ser deslizante. La clase `bg-dark` que había antes
       ganaba porque las utilidades de Bootstrap también son `!important` y van después en la hoja;
       al sustituirla por un `background` normal, el panel se quedaba TRANSPARENTE en escritorio:
       texto claro sobre fondo claro. Eso era el sidebar «roto». */
    background-color: var(--color-sidebar) !important;
    border-right: 1px solid var(--color-sidebar-border);

    /* **Esto es lo que estaba roto.** El marcado llevaba `d-flex flex-column h-100` en el cuerpo del
       panel y lo retiré al limpiar las clases de Bootstrap, sin reponerlo aquí. Sin contenedor
       flexible, el cuerpo no se estira, `.navmenu-shell { height: 100% }` se resuelve contra una
       altura automática, y el área de usuario deja de anclarse abajo. */
    display: flex;
    flex-direction: column;
}

.main-layout-sidebar .offcanvas-header[b-1mop0ox8p0] {
    border-bottom: 1px solid var(--color-sidebar-border);
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}

.main-layout-sidebar .offcanvas-body[b-1mop0ox8p0] {
    /* A partir de `lg` Bootstrap le pone `flex-grow: 0`, que impide al cuerpo ocupar el alto del
       panel. Aquí se le devuelve el crecimiento. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

    /* `min-height: 0` es imprescindible, no decorativo: un hijo de flex tiene `min-height: auto`
       por defecto y **se niega a encoger por debajo de su contenido**, así que la lista de módulos
       desborda el panel en lugar de desplazarse. */
    min-height: 0;

    /* El desplazamiento lo lleva `.navmenu-nav`, para que la marca y el área de usuario se queden
       fijas. Si también desplazara aquí, saldrían dos barras. */
    overflow: hidden;
}

/* En escritorio el panel queda fijo y el contenido se aparta. */
@media (min-width: 992px) {
    .main-layout-sidebar.offcanvas-lg[b-1mop0ox8p0] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1040;
        width: 16.25rem;
        visibility: visible !important;
        transform: none !important;
    }
    .main-layout-main[b-1mop0ox8p0] {
        margin-left: 16.25rem;
    }
}

/* ── Main content area ── */
.main-layout-main[b-1mop0ox8p0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
    background: var(--color-bg);
}

.main-layout-article[b-1mop0ox8p0] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-layout-content[b-1mop0ox8p0] {
    flex: 1;
    padding: 1.5rem;
}

/* ── Footer ── */
.main-layout-footer[b-1mop0ox8p0] {
    background: var(--color-surface);
    border-color: var(--color-border) !important;
    font-size: 0.8125rem;
}

/* ── Botón de menú en móvil ── */
.app-menu-toggle[b-1mop0ox8p0] {
    position: fixed;
    /* `safe-area-inset` para los móviles con barra de gestos: sin esto el botón queda debajo de la
       franja del sistema y hay que estirarse para darle. */
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
    z-index: 1050;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    /* 3rem = 48px al tamaño de letra normal, y crece si el usuario lo amplía. Es además el mínimo
       recomendado para un objetivo táctil. */
    width: 3rem;
    height: 3rem;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform var(--transition), background var(--transition);
}
.app-menu-toggle:hover[b-1mop0ox8p0] { background: var(--color-primary-hover); }
.app-menu-toggle:active[b-1mop0ox8p0] { transform: scale(0.94); }
.app-menu-toggle:focus-visible[b-1mop0ox8p0] {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .app-menu-toggle[b-1mop0ox8p0] { transition: none; }
    .app-menu-toggle:active[b-1mop0ox8p0] { transform: none; }
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .main-layout-main[b-1mop0ox8p0] {
        margin-left: 0;
    }
    .app-menu-toggle[b-1mop0ox8p0] {
        display: flex;
    }
    .main-layout-content[b-1mop0ox8p0] {
        padding: 1rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Barra lateral

   Todos los colores salen de los tokens de `app.css`. Antes estaban escritos a
   mano —#cbd5e1, #64748b, #94a3b8, #334155— junto a unos tokens `--color-sidebar-*`
   que existían y no usaba nadie: el tema decía un color y la pantalla enseñaba otro.
   ═══════════════════════════════════════════════════════════ */

.navmenu-shell[b-yux9s6fj47] {
    display: flex;
    flex-direction: column;
    background: var(--color-sidebar);
    color: var(--color-sidebar-text);

    /* `flex: 1` en lugar de `height: 100%`: el contenedor es flexible, y un porcentaje sobre un
       padre de altura automática no resuelve a nada. `min-height: 0` deja que la lista de módulos
       encoja y se desplace en vez de desbordar el panel. */
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Marca ── */
.navmenu-brand[b-yux9s6fj47] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--color-sidebar-border);
    flex-shrink: 0;
}
.navmenu-brand a[b-yux9s6fj47] {
    display: inline-flex;
    border-radius: var(--radius-sm);
    opacity: 0.95;
    transition: opacity var(--transition);
}
.navmenu-brand a:hover[b-yux9s6fj47] { opacity: 1; }
.navmenu-brand a:focus-visible[b-yux9s6fj47] {
    outline: 2px solid var(--color-sidebar-active);
    outline-offset: 4px;
    opacity: 1;
}

/* ── Navegación ── */
.navmenu-nav[b-yux9s6fj47] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0.625rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-sidebar-raised) transparent;
}
/* La barra de desplazamiento por defecto es clara sobre el panel oscuro y canta mucho */
.navmenu-nav[b-yux9s6fj47]::-webkit-scrollbar { width: 0.375rem; }
.navmenu-nav[b-yux9s6fj47]::-webkit-scrollbar-track { background: transparent; }
.navmenu-nav[b-yux9s6fj47]::-webkit-scrollbar-thumb {
    background: var(--color-sidebar-raised);
    border-radius: 1rem;
}
.navmenu-nav[b-yux9s6fj47]::-webkit-scrollbar-thumb:hover { background: var(--color-sidebar-muted); }

.navmenu-nav .nav-item + .nav-item[b-yux9s6fj47] { margin-top: 0.125rem; }

/* ── Enlaces ── */
.navmenu-link[b-yux9s6fj47] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--radius);
    padding: 0.5625rem 0.75rem !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-sidebar-text) !important;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.navmenu-link:hover[b-yux9s6fj47] {
    background: var(--color-sidebar-hover);
    color: #fff !important;
}

/* Navegación por teclado: sin esto no se ve dónde está el foco sobre el fondo oscuro */
.navmenu-link:focus-visible[b-yux9s6fj47] {
    outline: 2px solid var(--color-sidebar-active);
    outline-offset: -2px;
    background: var(--color-sidebar-hover);
    color: #fff !important;
}

/* Módulo actual.
   Fondo tenue + barra de acento a la izquierda, en lugar de un bloque índigo macizo: con seis u
   ocho entradas visibles, un rectángulo de color saturado se come la atención de toda la columna.
   La barra marca la posición con la misma claridad y deja leer el resto. */
.navmenu-link.active[b-yux9s6fj47] {
    background: rgba(79, 70, 229, 0.16);
    color: #fff !important;
    font-weight: 600;
}
.navmenu-link.active[b-yux9s6fj47]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 0.1875rem;
    border-radius: 0 0.1875rem 0.1875rem 0;
    background: var(--color-sidebar-active);
}
.navmenu-link.active .navmenu-icon[b-yux9s6fj47] { color: var(--color-sidebar-accent); }

.navmenu-icon[b-yux9s6fj47] {
    font-size: 1.0625rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--color-sidebar-muted);
    transition: color var(--transition);
}
.navmenu-link:hover .navmenu-icon[b-yux9s6fj47] { color: #fff; }

/* ── Rótulos de sección ── */
.navmenu-section[b-yux9s6fj47] { margin-top: 1.375rem; }
.navmenu-section:first-of-type[b-yux9s6fj47] { margin-top: 0.625rem; }

.navmenu-label[b-yux9s6fj47] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-sidebar-muted);
    padding: 0 0.75rem 0.375rem;
}

.navmenu-empty[b-yux9s6fj47] {
    padding: 0.75rem;
    margin: 0.5rem 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-sidebar-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-sidebar-border);
    border-radius: var(--radius);
}

/* ── Área de usuario ── */
.navmenu-footer[b-yux9s6fj47] {
    flex-shrink: 0;
    padding: 0.625rem;
    border-top: 1px solid var(--color-sidebar-border);
}

.navuser-btn[b-yux9s6fj47] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--color-sidebar-text);
    text-align: left;
    transition: background var(--transition);
}
.navuser-btn:hover[b-yux9s6fj47] { background: var(--color-sidebar-hover); }
.navuser-btn.show[b-yux9s6fj47]  { background: var(--color-sidebar-hover); }
.navuser-btn:focus-visible[b-yux9s6fj47] {
    outline: 2px solid var(--color-sidebar-active);
    outline-offset: -2px;
    background: var(--color-sidebar-hover);
}

/* En `rem`, no en píxeles: en píxeles el avatar no crece si el usuario amplía el tamaño de letra
   del navegador, y las iniciales se salen del círculo. */
.navuser-avatar[b-yux9s6fj47] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-sidebar-active);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.navuser-info[b-yux9s6fj47] {
    display: block;
    flex: 1;
    min-width: 0;
}
.navuser-name[b-yux9s6fj47],
.navuser-roles[b-yux9s6fj47] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navuser-name[b-yux9s6fj47] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
}
/* Sube de 0.65rem: por debajo de 0.75rem el texto deja de leerse de un vistazo, y aquí va el rol,
   que es lo que el operador comprueba cuando algo no le deja entrar. */
.navuser-roles[b-yux9s6fj47] {
    font-size: 0.75rem;
    color: var(--color-sidebar-muted);
    margin-top: 0.0625rem;
}
.navuser-chevron[b-yux9s6fj47] {
    font-size: 0.75rem;
    color: var(--color-sidebar-muted);
    flex-shrink: 0;
    transition: transform var(--transition);
}
.navuser-btn.show .navuser-chevron[b-yux9s6fj47] { transform: rotate(180deg); }

/* ── Menú desplegable del usuario ── */
.dropdown-menu-dark[b-yux9s6fj47] {
    background: var(--color-sidebar-raised);
    border: 1px solid var(--color-sidebar-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.375rem;
    min-width: 12.5rem;
}
.dropdown-menu-dark .dropdown-item[b-yux9s6fj47] {
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-sidebar-text);
    transition: background var(--transition), color var(--transition);
}
.dropdown-menu-dark .dropdown-item:hover[b-yux9s6fj47],
.dropdown-menu-dark .dropdown-item:focus[b-yux9s6fj47] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.dropdown-menu-dark .dropdown-divider[b-yux9s6fj47] {
    border-color: var(--color-sidebar-border);
    margin: 0.375rem 0;
}

/* ── Movimiento reducido ──
   Quien lo activa en su sistema suele hacerlo por mareo o migraña. */
@media (prefers-reduced-motion: reduce) {
    .navmenu-link[b-yux9s6fj47],
    .navmenu-icon[b-yux9s6fj47],
    .navuser-btn[b-yux9s6fj47],
    .navuser-chevron[b-yux9s6fj47],
    .navmenu-brand a[b-yux9s6fj47],
    .dropdown-menu-dark .dropdown-item[b-yux9s6fj47] {
        transition: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vupnu6x6av],
.components-reconnect-repeated-attempt-visible[b-vupnu6x6av],
.components-reconnect-failed-visible[b-vupnu6x6av],
.components-pause-visible[b-vupnu6x6av],
.components-resume-failed-visible[b-vupnu6x6av],
.components-rejoining-animation[b-vupnu6x6av] {
    display: none;
}

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


#components-reconnect-modal[b-vupnu6x6av] {
    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-vupnu6x6av 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-vupnu6x6av {
    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;
    }
}