/* =====================================================
   PASALAVENTA
   MENÚ INFERIOR MOBILE GLOBAL
===================================================== */


/* =====================================================
   DESKTOP
===================================================== */

.mobile-bottom-nav {
    display: none;
}


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

@media (max-width: 650px) {

    /* =================================================
       CONTENEDOR PRINCIPAL
    ================================================= */

    .mobile-bottom-nav {

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 66px;

        display: flex;
        align-items: stretch;

        background: #ffffff;

        border-top: 1px solid #e5e5e5;

        box-shadow:
            0 -4px 18px rgba(
                0,
                0,
                0,
                0.10
            );

        z-index: 9990;

        padding-bottom:
            env(safe-area-inset-bottom);

        box-sizing: border-box;

        overflow: hidden;
    }


    /* =================================================
       ITEMS
       POR DEFECTO: 4 BOTONES
       25% CADA UNO
    ================================================= */

    .mobile-bottom-nav .mobile-nav-item {

        position: relative;

        flex: 1 1 25%;

        width: 25%;
        max-width: 25%;
        min-width: 0;

        display: flex;

        flex-direction: column;

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

        gap: 3px;

        text-decoration: none;

        color: #777777;

        background: transparent;

        box-sizing: border-box;

        transition:
            color 0.2s ease,
            background 0.2s ease;

        -webkit-tap-highlight-color:
            transparent;
    }


    /* =================================================
       CUANDO EXISTE ADMIN
       
       5 BOTONES
       20% CADA UNO
       
       El quinto elemento es el botón Admin.
    ================================================= */

    .mobile-bottom-nav
    .mobile-nav-item:nth-child(5) {

        flex: 1 1 20%;

        width: 20%;
        max-width: 20%;
    }


    /*
       Cuando existe el quinto botón,
       también reducimos los primeros cuatro
       al 20%.
    */

    .mobile-bottom-nav:has(.mobile-nav-item:nth-child(5))
    .mobile-nav-item {

        flex: 1 1 20%;

        width: 20%;
        max-width: 20%;
    }


    /* =================================================
       ICONO
    ================================================= */

    .mobile-nav-icon {

        position: relative;

        display: flex;

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

        width: 27px;
        height: 27px;

        font-size: 20px;

        line-height: 1;

        flex-shrink: 0;
    }


    /* =================================================
       TEXTO
    ================================================= */

    .mobile-nav-text {

        font-size: 10px;

        font-weight: 600;

        line-height: 1.1;

        white-space: nowrap;

        text-align: center;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* =================================================
       ITEM ACTIVO
    ================================================= */

    .mobile-nav-item.active {

        color: #d60000;
    }


    .mobile-nav-item.active
    .mobile-nav-icon {

        transform:
            translateY(-1px);
    }


    /* =================================================
       INDICADOR ACTIVO
    ================================================= */

    .mobile-nav-item.active::before {

        content: "";

        position: absolute;

        top: 0;
        left: 50%;

        width: 32px;
        height: 3px;

        border-radius:
            0 0 4px 4px;

        background:
            #d60000;

        transform:
            translateX(-50%);
    }


    /* =================================================
       CARRITO
    ================================================= */

    .mobile-cart-icon {

        position: relative;
    }


    .mobile-cart-count {

        position: absolute;

        top: -7px;
        right: -9px;

        min-width: 16px;
        height: 16px;

        padding: 0 4px;

        display: flex;

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

        border-radius: 999px;

        background: #d60000;

        color: #ffffff;

        font-size: 9px;

        font-weight: 700;

        line-height: 1;

        border: 2px solid #ffffff;

        box-sizing: border-box;
    }


    /* =================================================
       ESPACIO PARA EL MENÚ
    ================================================= */

    body {

        padding-bottom:
            calc(
                66px +
                env(safe-area-inset-bottom)
            );
    }


    /* =================================================
       CHAT FLOTANTE
    ================================================= */

    .chat-floating-btn {

        bottom:
            calc(
                82px +
                env(safe-area-inset-bottom)
            );

        right: 16px;

        z-index: 9980;
    }


    /* =================================================
       CHAT ABIERTO
    ================================================= */

    .chat-box {

        bottom:
            calc(
                82px +
                env(safe-area-inset-bottom)
            );

        z-index: 9985;
    }
}


/* =====================================================
   MOBILE PEQUEÑO
===================================================== */

@media (max-width: 420px) {

    /* =================================================
       MENÚ
    ================================================= */

    .mobile-bottom-nav {

        height: 64px;
    }


    /* =================================================
       BODY
    ================================================= */

    body {

        padding-bottom:
            calc(
                64px +
                env(safe-area-inset-bottom)
            );
    }


    /* =================================================
       ICONOS
    ================================================= */

    .mobile-nav-icon {

        width: 25px;
        height: 25px;

        font-size: 19px;
    }


    /* =================================================
       TEXTOS
    ================================================= */

    .mobile-nav-text {

        font-size: 9px;
    }


    /* =================================================
       CHAT FLOTANTE
    ================================================= */

    .chat-floating-btn {

        bottom:
            calc(
                80px +
                env(safe-area-inset-bottom)
            );

        right: 14px;
    }


    /* =================================================
       CHAT ABIERTO
    ================================================= */

    .chat-box {

        bottom:
            calc(
                80px +
                env(safe-area-inset-bottom)
            );
    }
}