/*
 * SGD Layout — estilos globales del template principal
 *
 * Define la estructura flex que rodea cada vista autenticada:
 *   main-wrapper (column)
 *     └─ row-wrapper (row, flex-grow:1)
 *         ├─ sidebar (fixed)
 *         └─ main-content-wrapper (column, flex-grow:1)
 *             ├─ header
 *             ├─ content-area (flex column, flex:1 — empuja footer al fondo)
 *             │   └─ dashboard-container / main-page-wrapper (flex:1)
 *             └─ footer
 *
 * El sidebar es fijo de 250px (igualado a research-web, sin media queries).
 * El content-area es flex-column para que el primer hijo
 * (.dashboard-container) crezca y rellene el viewport cuando el contenido
 * es corto, garantizando que el footer siempre quede pegado al fondo.
 *
 * Aplica solo a páginas con sesión activa. En login se usa otro layout
 * (gradient + flex centered) inyectado dinámicamente desde template.php.
 */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.row-wrapper {
    display: flex;
    flex-grow: 1;
}

.main-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1001;
}

/* Desktop: el sidebar es fijo (250px), el contenido se desplaza para no quedar debajo. */
@media (min-width: 992px) {
    .main-content-wrapper {
        margin-left: 250px;
    }
}

/* Mobile/tablet (<992px): el sidebar es offcanvas (oculto por defecto),
   el contenido ocupa el viewport completo. */
@media (max-width: 991.98px) {
    .main-content-wrapper {
        margin-left: 0;
        width: 100%;
    }
}

.content-area {
    flex: 1 1 auto;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
}

/* Cuando el contenido interno es corto (alerts, "Sin permisos", mensajes vacíos),
   el primer hijo crece para llenar el viewport y empujar el footer al fondo. */
.content-area > .dashboard-container,
.content-area > .main-page-wrapper {
    flex: 1 1 auto;
}