/* ================================================= */
/* 3. Estilos del Contenido Principal y Header */
/* ================================================= */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100dvw;
    max-width: 100dvw;
    min-width: 0;
}

.main-content:not(#security) {
    padding: 80px 15px 15px;
}

/* --- Responsividad del Contenido --- */

/* Desplazamiento del contenido cuando el Sidebar está abierto/colapsado (solo en escritorio) */
@media (min-width: 641px) {
    .main-content-shifted {
        margin-left: var(--sidebar-width-expanded);
        width: calc(100dvw - var(--sidebar-width-expanded));
        max-width: calc(100dvw - var(--sidebar-width-expanded));
    }
    .main-content-not-shifted {
        margin-left: var(--sidebar-width-collapsed);
    }

    /* Ocultamos el botón de toggle móvil */
    .app-header .mobile-toggle-button {
        display: none;
    }
}

/* ================================================= */
/* Placeholder / scaffolding (home) */
/* ================================================= */
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }