/* Sólo estructura de navegación; no altera las tablas ni formularios de las páginas. */
.app-shell { --app-sidebar-width: 16.5rem; margin-bottom: 0; }
.app-page { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.app-main { flex: 1; min-width: 0; }
.app-header { background: #fff; }
.app-header .navbar-brand { word-break: normal; text-align: left; }
.app-account { min-width: 0; }
.app-account .navbar-nav { flex-direction: row; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.app-account .nav-link { overflow-wrap: anywhere; }
.app-sidebar { --bs-offcanvas-width: min(19rem, 90vw); background: #f8f9fa !important; }
.app-sidebar-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6c757d; padding: .5rem .75rem 1rem; }
.app-menu-section { border-top: 1px solid #e5e7eb; padding: .25rem 0; }
.app-menu-area-title { margin: 0; padding: .7rem .75rem; font-size: 1rem; font-weight: 600; color: #263747; overflow-wrap: anywhere; }
.app-menu-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; border: 0; border-radius: .375rem; background: transparent; color: #263747; font-weight: 600; text-align: left; padding: .7rem .75rem; }
.app-menu-toggle:hover, .app-menu-link:hover { background: #e9eef3; color: #123d65; }
.app-menu-toggle.app-section-current { color: #084d91; }
.app-menu-toggle:focus-visible, .app-menu-link:focus-visible { outline: 2px solid #0d6efd; outline-offset: -2px; }
.app-menu-chevron { transition: transform .2s; }
.app-menu-toggle:not(.collapsed) .app-menu-chevron { transform: rotate(180deg); }
.app-submenu { margin: 0 0 .5rem .75rem; border-left: 2px solid #dfe5eb; padding-left: .4rem; }
.app-menu-link { color: #33465a; padding: .5rem .7rem; border-radius: .375rem; font-size: .94rem; overflow-wrap: anywhere; }
.app-menu-link.active { background: #dcecff; color: #084d91; font-weight: 600; }
.app-menu-link:disabled { color: #747d87; cursor: default; opacity: .65; background: transparent; }
.app-footer { padding: 1rem; margin-top: 1.5rem; color: #6c757d; }
@media (min-width: 992px) {
    .app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--app-sidebar-width); border-right: 1px solid #dee2e6; z-index: 1030; }
    .app-sidebar .offcanvas-body { display: block; height: 100%; padding: 1rem; overflow-y: auto; }
    .app-page { margin-left: var(--app-sidebar-width); }
    /* Fuera del flujo: abrir el panel no mueve las secciones del menú principal. */
    .app-submenu-panel.collapse, .app-submenu-panel.collapsing {
        display: none; position: fixed; left: var(--app-sidebar-width); top: 1rem;
        width: min(19rem, calc(100vw - var(--app-sidebar-width) - 1rem));
        height: auto !important; max-height: calc(100dvh - 1rem); overflow-y: auto;
        background: #fff; border: 1px solid #dee2e6; border-left: 3px solid #0d6efd;
        border-radius: 0 .5rem .5rem 0; padding: .65rem;
        box-shadow: .35rem .35rem 1rem rgba(25, 45, 65, .16); z-index: 1031;
        transition: none;
    }
    .app-submenu-panel.is-open { display: block; }
    .app-submenu-title { padding: .3rem .7rem .6rem; font-weight: 600; color: #263747; border-bottom: 1px solid #e5e7eb; margin-bottom: .4rem; }
    .app-submenu { margin: 0; padding: 0; border: 0; }
    .app-menu-toggle[aria-expanded="true"] { background: #dcecff; color: #084d91; box-shadow: inset 3px 0 #0d6efd; }
    .app-menu-toggle .app-menu-chevron, .app-menu-toggle:not(.collapsed) .app-menu-chevron { transform: rotate(-90deg); }
}
@media (max-width: 575.98px) {
    .app-account { width: 100%; }
    .app-account .navbar-nav { justify-content: space-between; }
}
@media print {
    .app-sidebar, .app-header, .app-footer { display: none !important; }
    .app-page { margin-left: 0; min-height: auto; }
}