/* static/app/ui_lab/base_layout_responsive.css */

/* =========================================
   BASE LAYOUT · RESPONSIVE
========================================= */


/* =========================================
   1200
========================================= */

@media (max-width:1200px){

    .sidebar{
        width:220px;
    }

    .view-container{

        padding:
        12px
        18px
        28px
        18px;
    }

}


/* =========================================
   992
========================================= */

@media (max-width:992px){

    .sidebar{
        width:200px;
    }

    .topbar{
        padding:0 18px;
    }

}


/* =========================================
   768
   MOBILE
========================================= */

@media (max-width:768px){

    html,
    body{

        min-height:100%;
        overflow-x:hidden;
        overflow-y:auto;
    }

    .app{

        min-height:100dvh;

        overflow:visible;

        flex-direction:column;
    }


    /* MAIN */

    .main{

        display:block;

        height:auto;
        min-height:auto;

        overflow:visible;
    }


    /* SIDEBAR */

    .sidebar{

        position:fixed;

        top:0;
        left:0;
        bottom:0;

        width:240px;

        z-index:3000;

        transform:translateX(-100%);
        transition:transform 0.25s ease;

        box-shadow:
        8px 0 24px rgba(0,0,0,0.18);
    }

    .sidebar.abierto{
        transform:translateX(0);
    }


    /* =====================================
        OVERLAY MENU
    ===================================== */

    .sidebar-overlay{

        position:fixed;

        inset:0;

        background:rgba(0,0,0,0.34);

        opacity:0;
        pointer-events:none;

        transition:opacity 0.2s ease;

        z-index:2500;
    }

    .sidebar-overlay.activo{

        opacity:1;
        pointer-events:auto;
    }

    

    /* VIEW CONTAINER */

    .view-container{

        overflow-x:hidden;
        overflow-y:visible;

        min-height:auto;

        padding:
        14px
        14px
        40px
        14px;

        -webkit-overflow-scrolling:touch;
    }



    /* MODAL */

    .modal-box{

        width:88%;

        padding:
        22px
        18px;

        border-radius:14px;
    }

}


/* =========================================
   576
   MOBILE SMALL
========================================= */

@media (max-width:576px){



    .view-container{

        padding:
        12px
        12px
        24px
        12px;
    }

}


/* =========================================
   CHANGELOG RESPONSIVE
========================================= */

@media (max-width:768px){

    .changelog-modal{

        width:84%;

        padding:
        22px
        18px
        20px
        18px;

        border-radius:16px;
    }

    .changelog-top h2{

        font-size:20px;
    }

    .changelog-item{

        font-size:13.5px;
    }

}