/* =========================================================
   AppShellLayout - FIX overflow + ancho correcto
   Evita que el contenido se "salga" hacia la derecha
========================================================= */

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* ? elimina scroll horizontal global */
}

.app-shell {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: #f4f6ff;
    display: flex;
}

.app-shell__sidebar {
    flex: 0 0 auto;
}

.app-shell__content {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0; /* ? CRÍTICO */
    overflow-x: hidden;
}

.app-shell__main {
    width: 100%;
    min-width: 0; /* ? CRÍTICO */
    overflow-x: hidden;
    padding-right: 16px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

    /* evita que algún elemento "empuje" */
    .app-shell__main * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .app-shell__main input,
    .app-shell__main select,
    .app-shell__main textarea {
        max-width: 100%;
    }

@media (min-width: 1200px) {
    .app-shell__main {
        padding-right: 24px;
    }
}

/* Fuerza alineación horizontal de icono + texto en el menú lateral */
.app-shell__nav-item,
.app-shell__collapse-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.app-shell__nav-icon,
.app-shell__nav-text {
    display: inline-flex;
    align-items: center;
}