/*
 * ============================================================
 * PANEL MOBILE V1
 * ============================================================
 */


/* Desktop: controles móviles ocultos */

.app-mobile-menu-v1,
.app-mobile-overlay-v1{
    display:none;
}


/* ============================================================
   CELULAR / TABLET
   ============================================================ */

@media (max-width:850px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }


    body.panel-mobile-open-v1{
        overflow:hidden !important;
    }


    .app{
        display:block !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        min-height:100vh;
    }


    /*
     * MAIN
     */

    .app > main{
        display:block !important;

        width:100% !important;
        max-width:none !important;
        min-width:0 !important;

        margin:0 !important;

        padding:
            68px
            0
            30px !important;

        box-sizing:border-box !important;
    }


    /*
     * BOTÓN MENU
     */

    .app-mobile-menu-v1{
        position:fixed;

        display:flex;

        align-items:center;
        justify-content:center;

        top:
            max(
                12px,
                env(safe-area-inset-top)
            );

        left:12px;

        width:46px;
        height:46px;

        padding:0;

        border:1px solid #dce3eb;
        border-radius:14px;

        background:#ffffff;

        color:#172337;

        font-size:25px;
        line-height:1;

        box-shadow:
            0 8px 25px
            rgba(17,24,39,.13);

        cursor:pointer;

        z-index:5005;
    }


    body.panel-mobile-open-v1
    .app-mobile-menu-v1{
        background:#172337;
        color:#fff;
        border-color:#172337;
    }


    /*
     * SIDEBAR OFF-CANVAS
     */

    .app > aside#app-mobile-sidebar-v1{
        position:fixed !important;

        display:flex !important;
        flex-direction:column !important;

        top:0 !important;
        left:0 !important;
        bottom:0 !important;

        width:min(82vw,310px) !important;
        height:100dvh !important;

        margin:0 !important;

        transform:
            translateX(-105%);

        transition:
            transform
            .22s
            ease;

        z-index:5004 !important;

        overflow-y:auto !important;

        box-shadow:
            20px 0 55px
            rgba(0,0,0,.25);
    }


    body.panel-mobile-open-v1
    .app > aside#app-mobile-sidebar-v1{
        transform:
            translateX(0);
    }


    /*
     * OVERLAY
     */

    .app-mobile-overlay-v1{
        position:fixed;

        display:block;

        inset:0;

        background:
            rgba(5,10,18,.52);

        backdrop-filter:
            blur(2px);

        opacity:0;
        visibility:hidden;

        pointer-events:none;

        transition:
            opacity
            .2s
            ease;

        z-index:5003;
    }


    body.panel-mobile-open-v1
    .app-mobile-overlay-v1{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }


    /*
     * MENÚ MÁS CÓMODO PARA DEDO
     */

    #app-mobile-sidebar-v1 nav a,
    #app-mobile-sidebar-v1 nav span{
        min-height:46px;

        box-sizing:border-box;
    }


    #app-mobile-sidebar-v1 .account{
        margin-top:auto;
    }


    /*
     * ALERTAS
     */

    .app > main > .alert{
        margin:
            0
            12px
            12px !important;
    }
}


/* ============================================================
   TELÉFONOS MUY PEQUEÑOS
   ============================================================ */

@media (max-width:390px){

    .app-mobile-menu-v1{
        width:43px;
        height:43px;

        border-radius:13px;
    }

}