/* layout.css - Estructura general del sistema ÉRIKA */

.layout {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-page);
}

/* Panel principal (contenido al lado del sidebar) */
.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

/* Cuando el sidebar está expandido */
.sidebar.expanded+.main-panel {
    margin-left: 5px;
}

/* Cuando el sidebar está colapsado */
.sidebar.collapsed+.main-panel {
    margin-left: 5px;
}

/* Topbar del panel */
.topbar {
    background-color: var(--color-card);
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Contenido principal */
.main-content {
    padding: 30px;
    flex: 1;
    background-color: var(--color-bg);
}

@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }

    .main-panel {
        margin-left: 0 !important;
    }

    .main-content {
        padding: 20px 15px;
    }

    .topbar {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 10px;
    }
}