/*
|--------------------------------------------------------------------------
| ELX Page Layout
|--------------------------------------------------------------------------
|
| Estructura base para páginas de aplicación.
|
| Utilizado por:
| - Dashboard
| - Productos
| - Inventario
| - Compras
| - Ventas
| - Reportes
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

.elx-page
{

    width:100%;

    max-width:1440px;

    margin:0 auto;

    padding:24px;

}



/*
|--------------------------------------------------------------------------
| Page Header
|--------------------------------------------------------------------------
*/

.elx-page-header
{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:24px;

    margin-bottom:24px;

}



.elx-page-heading
{

    display:flex;

    flex-direction:column;

    gap:6px;

}



.elx-page-title
{

    margin:0;

    font-size:32px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-0.02em;

    color:var(--elx-text);

}



.elx-page-description
{

    margin:0;

    color:var(--elx-muted);

    font-size:15px;

    line-height:1.5;

}



/*
|--------------------------------------------------------------------------
| Page Actions
|--------------------------------------------------------------------------
*/

.elx-page-actions
{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    flex-wrap:wrap;

}



/*
|--------------------------------------------------------------------------
| Page Toolbar
|--------------------------------------------------------------------------
*/

.elx-page-toolbar
{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-bottom:24px;

}



.elx-page-toolbar-left,
.elx-page-toolbar-right
{

    display:flex;

    align-items:center;

    gap:12px;

}



/*
|--------------------------------------------------------------------------
| Page Content
|--------------------------------------------------------------------------
*/

.elx-page-content
{

    width:100%;

}



/*
|--------------------------------------------------------------------------
| Page Grid
|--------------------------------------------------------------------------
*/

.elx-page-grid
{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                320px,
                1fr
            )
        );

    gap:24px;

}



/*
|--------------------------------------------------------------------------
| Page Section
|--------------------------------------------------------------------------
*/

.elx-page-section
{

    margin-bottom:32px;

}



.elx-page-section-header
{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:16px;

}



.elx-page-section-title
{

    margin:0;

    font-size:20px;

    font-weight:600;

    color:var(--elx-text);

}



/*
|--------------------------------------------------------------------------
| Empty Page
|--------------------------------------------------------------------------
*/

.elx-page-empty
{

    min-height:320px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:12px;

}



/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:768px)
{

    .elx-page
    {

        padding:16px;

    }


    .elx-page-header
    {

        flex-direction:column;

        gap:16px;

    }


    .elx-page-title
    {

        font-size:26px;

    }


    .elx-page-actions
    {

        width:100%;

        justify-content:flex-start;

    }


    .elx-page-toolbar
    {

        flex-direction:column;

        align-items:stretch;

    }


    .elx-page-toolbar-left,
    .elx-page-toolbar-right
    {

        width:100%;

    }


    .elx-page-grid
    {

        grid-template-columns:
            1fr;

    }

}