/* ==========================================================
   NAVEGACIÓN MÓVIL COMPARTIDA
   Cinco botones en una sola línea:
   Inicio | Arreglos | Carrito | Rastrear | WhatsApp
========================================================== */

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

@media (max-width: 767px) {

    body {
        padding-bottom: 94px;
    }

    .mobile-app-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 3000;

        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        gap: 3px;

        width: auto;
        min-width: 0;
        padding: 8px;

        border: 1px solid rgba(17, 17, 17, 0.10);
        border-radius: 25px;

        background: rgba(255, 255, 255, 0.97);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        box-shadow:
            0 18px 50px rgba(17, 17, 17, 0.15);

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

    .mobile-app-nav a,
    .mobile-app-nav button {
        width: 100%;
        min-width: 0;
        min-height: 52px;

        margin: 0;
        padding: 5px 1px;

        border: 0;
        outline: none;
        border-radius: 17px;

        appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;

        background: transparent !important;
        background-image: none !important;

        color: #707070 !important;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 3px;

        font-family: inherit;
        font-size: 0.57rem;
        font-weight: 750;
        line-height: 1;
        text-align: center;
        text-decoration: none;

        overflow: hidden;

        box-shadow: none;
        transform: none;

        transition:
            background-color 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease;
    }

    .mobile-app-nav i {
        display: block;

        margin: 0;

        color: inherit !important;

        font-size: 1.12rem;
        line-height: 1;
    }

    .mobile-app-nav span {
        display: block;

        width: 100%;
        max-width: 100%;

        overflow: hidden;

        color: inherit !important;

        font-size: inherit;
        line-height: 1.1;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ======================================================
       ESTADO NORMAL
       Ningún botón no activo debe cambiar de color al tocarlo
    ====================================================== */

    .mobile-app-nav a:not(.active),
    .mobile-app-nav button:not(.active),
    .mobile-app-nav a:not(.active):link,
    .mobile-app-nav a:not(.active):visited {
        background: transparent !important;
        background-image: none !important;
        color: #707070 !important;

        box-shadow: none !important;
        outline: none !important;
        transform: none !important;
    }

    /* ======================================================
       CLICK / TOUCH / FOCUS
       Evita flashes, verdes o estados pegados en móvil
    ====================================================== */

    .mobile-app-nav a:not(.active):active,
    .mobile-app-nav button:not(.active):active,
    .mobile-app-nav a:not(.active):focus,
    .mobile-app-nav button:not(.active):focus,
    .mobile-app-nav a:not(.active):focus-visible,
    .mobile-app-nav button:not(.active):focus-visible {
        background: transparent !important;
        background-image: none !important;

        color: #707070 !important;

        box-shadow: none !important;
        outline: none !important;

        transform: none !important;

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

    .mobile-app-nav a:not(.active):active i,
    .mobile-app-nav button:not(.active):active i,
    .mobile-app-nav a:not(.active):focus i,
    .mobile-app-nav button:not(.active):focus i,
    .mobile-app-nav a:not(.active):focus-visible i,
    .mobile-app-nav button:not(.active):focus-visible i,
    .mobile-app-nav a:not(.active):active span,
    .mobile-app-nav button:not(.active):active span,
    .mobile-app-nav a:not(.active):focus span,
    .mobile-app-nav button:not(.active):focus span,
    .mobile-app-nav a:not(.active):focus-visible span,
    .mobile-app-nav button:not(.active):focus-visible span {
        color: #707070 !important;
    }

    /* ======================================================
       BOTÓN ACTIVO
       Solo la página actual debe verse rosa
    ====================================================== */

    .mobile-app-nav a.active,
    .mobile-app-nav button.active,
    .mobile-app-nav a.active:link,
    .mobile-app-nav a.active:visited,
    .mobile-app-nav a.active:hover,
    .mobile-app-nav button.active:hover,
    .mobile-app-nav a.active:active,
    .mobile-app-nav button.active:active,
    .mobile-app-nav a.active:focus,
    .mobile-app-nav button.active:focus,
    .mobile-app-nav a.active:focus-visible,
    .mobile-app-nav button.active:focus-visible {
        background: #fbe7e8 !important;
        background-image: none !important;

        color: #111111 !important;

        font-weight: 800;

        box-shadow: none !important;
        outline: none !important;
        transform: none !important;
    }

    .mobile-app-nav a.active i,
    .mobile-app-nav button.active i,
    .mobile-app-nav a.active span,
    .mobile-app-nav button.active span {
        color: #111111 !important;
    }

    /* ======================================================
       WHATSAPP
       Mismo color que todos los demás botones
    ====================================================== */

    .mobile-app-nav .mobile-nav-whatsapp,
    .mobile-app-nav .mobile-nav-whatsapp:link,
    .mobile-app-nav .mobile-nav-whatsapp:visited {
        background: transparent !important;
        background-image: none !important;

        color: #707070 !important;
    }

    /* WhatsApp: solamente el icono conserva su verde oficial */
    .mobile-app-nav .mobile-nav-whatsapp i {
        color: #25D366 !important;
    }

    .mobile-app-nav .mobile-nav-whatsapp span {
        color: #707070 !important;
    }

    .mobile-app-nav .mobile-nav-whatsapp:not(.active):hover,
    .mobile-app-nav .mobile-nav-whatsapp:not(.active):active,
    .mobile-app-nav .mobile-nav-whatsapp:not(.active):focus,
    .mobile-app-nav .mobile-nav-whatsapp:not(.active):focus-visible {
        background: transparent !important;
        background-image: none !important;

        color: #707070 !important;

        box-shadow: none !important;
        outline: none !important;
        transform: none !important;
    }

    .mobile-app-nav .mobile-nav-whatsapp:not(.active):hover i,
    .mobile-app-nav .mobile-nav-whatsapp:not(.active):active i,
    .mobile-app-nav .mobile-nav-whatsapp:not(.active):focus i,
    .mobile-app-nav .mobile-nav-whatsapp:not(.active):focus-visible i {
        color: #25D366 !important;
    }
}


/* ==========================================================
   HOVER SOLO PARA COMPUTADORAS / MOUSE REAL

   No se aplica en pantallas táctiles.
========================================================== */

@media (max-width: 767px) and (hover: hover) and (pointer: fine) {

    .mobile-app-nav a:not(.active):hover,
    .mobile-app-nav button:not(.active):hover {
        background: #fff4f4 !important;
        background-image: none !important;

        color: #111111 !important;

        transform: translateY(-1px) !important;
    }

    .mobile-app-nav a:not(.active):hover i,
    .mobile-app-nav button:not(.active):hover i,
    .mobile-app-nav a:not(.active):hover span,
    .mobile-app-nav button:not(.active):hover span {
        color: #111111 !important;
    }

    /*
     * WhatsApp tampoco usa verde con mouse.
     */
    .mobile-app-nav .mobile-nav-whatsapp:not(.active):hover {
        background: #fff4f4 !important;
        color: #111111 !important;
    }

    .mobile-app-nav .mobile-nav-whatsapp:not(.active):hover i,
    .mobile-app-nav .mobile-nav-whatsapp:not(.active):hover span {
        color: #111111 !important;
    }
}


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

@media (max-width: 360px) {

    .mobile-app-nav {
        left: 6px;
        right: 6px;
        bottom: 7px;

        gap: 1px;
        padding: 6px;

        border-radius: 22px;
    }

    .mobile-app-nav a,
    .mobile-app-nav button {
        min-height: 49px;

        padding: 4px 0;

        border-radius: 15px;

        font-size: 0.52rem;
    }

    .mobile-app-nav i {
        font-size: 1.04rem;
    }
}


/* ==========================================================
   CORRECCIÓN FINAL:
   5 ELEMENTOS EN UNA SOLA FILA
========================================================== */

@media (max-width: 767px) {

    body #mobile-nav-container .mobile-app-nav {
        position: fixed !important;

        left: 8px !important;
        right: 8px !important;

        top: auto !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;

        z-index: 9999 !important;

        display: grid !important;

        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;

        align-items: stretch !important;
        justify-items: stretch !important;

        gap: 2px !important;

        padding: 7px !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;

        overflow: hidden !important;
    }

    body #mobile-nav-container .mobile-app-nav>a,
    body #mobile-nav-container .mobile-app-nav>button {
        width: 100% !important;

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

        min-height: 52px !important;
        height: 52px !important;

        margin: 0 !important;
        padding: 4px 0 !important;

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

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

        gap: 3px !important;

        overflow: hidden !important;

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

    body #mobile-nav-container .mobile-app-nav>a i,
    body #mobile-nav-container .mobile-app-nav>button i {
        flex: 0 0 auto !important;

        margin: 0 !important;

        font-size: 1.08rem !important;
        line-height: 1 !important;

        color: inherit !important;
    }

    body #mobile-nav-container .mobile-app-nav>a span,
    body #mobile-nav-container .mobile-app-nav>button span {
        display: block !important;

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

        margin: 0 !important;

        overflow: hidden !important;

        white-space: nowrap !important;
        text-overflow: ellipsis !important;

        font-size: 0.54rem !important;
        line-height: 1 !important;
        text-align: center !important;

        color: inherit !important;
    }

    /* ======================================================
       OVERRIDE FINAL
       Evita que style.css o Bootstrap pinten los botones
       al hacer click, focus o hover táctil.
    ====================================================== */

    body #mobile-nav-container .mobile-app-nav>a:not(.active),
    body #mobile-nav-container .mobile-app-nav>button:not(.active),
    body #mobile-nav-container .mobile-app-nav>a:not(.active):link,
    body #mobile-nav-container .mobile-app-nav>a:not(.active):visited,
    body #mobile-nav-container .mobile-app-nav>a:not(.active):active,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):active,
    body #mobile-nav-container .mobile-app-nav>a:not(.active):focus,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):focus,
    body #mobile-nav-container .mobile-app-nav>a:not(.active):focus-visible,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):focus-visible {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        color: #707070 !important;

        border-color: transparent !important;

        outline: none !important;
        box-shadow: none !important;

        transform: none !important;

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

    body #mobile-nav-container .mobile-app-nav>a:not(.active) i,
    body #mobile-nav-container .mobile-app-nav>button:not(.active) i,
    body #mobile-nav-container .mobile-app-nav>a:not(.active) span,
    body #mobile-nav-container .mobile-app-nav>button:not(.active) span {
        color: #707070 !important;
    }

    /* Página actual */
    body #mobile-nav-container .mobile-app-nav>a.active,
    body #mobile-nav-container .mobile-app-nav>button.active,
    body #mobile-nav-container .mobile-app-nav>a.active:hover,
    body #mobile-nav-container .mobile-app-nav>button.active:hover,
    body #mobile-nav-container .mobile-app-nav>a.active:active,
    body #mobile-nav-container .mobile-app-nav>button.active:active,
    body #mobile-nav-container .mobile-app-nav>a.active:focus,
    body #mobile-nav-container .mobile-app-nav>button.active:focus,
    body #mobile-nav-container .mobile-app-nav>a.active:focus-visible,
    body #mobile-nav-container .mobile-app-nav>button.active:focus-visible {
        background: #fbe7e8 !important;
        background-color: #fbe7e8 !important;
        background-image: none !important;

        color: #111111 !important;

        outline: none !important;
        box-shadow: none !important;

        transform: none !important;
    }

    body #mobile-nav-container .mobile-app-nav>a.active i,
    body #mobile-nav-container .mobile-app-nav>button.active i,
    body #mobile-nav-container .mobile-app-nav>a.active span,
    body #mobile-nav-container .mobile-app-nav>button.active span {
        color: #111111 !important;
    }

    /* WhatsApp jamás verde */
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active),
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):link,
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):visited,
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):hover,
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):active,
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):focus,
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):focus-visible {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        color: #707070 !important;

        outline: none !important;
        box-shadow: none !important;

        transform: none !important;
    }

    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active) i {
        color: #25D366 !important;
    }

    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active) span {
        color: #707070 !important;
    }
}


/* ==========================================================
   HOVER FINAL SOLO PARA MOUSE REAL
========================================================== */

@media (max-width: 767px) and (hover: hover) and (pointer: fine) {

    body #mobile-nav-container .mobile-app-nav>a:not(.active):hover,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):hover {
        background: #fff4f4 !important;
        background-color: #fff4f4 !important;

        color: #111111 !important;

        transform: translateY(-1px) !important;
    }

    body #mobile-nav-container .mobile-app-nav>a:not(.active):hover i,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):hover i,
    body #mobile-nav-container .mobile-app-nav>a:not(.active):hover span,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):hover span {
        color: #111111 !important;
    }
}

/* ==========================================================
   FEEDBACK TÁCTIL FINAL
   Al mantener presionado:
   rosa empolvado acorde a la identidad visual
========================================================== */

@media (max-width: 767px) {

    html,
    body,
    #mobile-nav-container,
    .mobile-app-nav,
    .mobile-app-nav * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }

    /* ======================================================
       ESTADO NORMAL
    ====================================================== */

    body #mobile-nav-container .mobile-app-nav>a:not(.active),
    body #mobile-nav-container .mobile-app-nav>button:not(.active) {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        color: #707070 !important;

        outline: none !important;
        box-shadow: none !important;

        transform: none !important;
        filter: none !important;
    }


    /* ======================================================
       FOCUS
       No cambia de color solo por recibir focus
    ====================================================== */

    body #mobile-nav-container .mobile-app-nav>a:not(.active):focus,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):focus,
    body #mobile-nav-container .mobile-app-nav>a:not(.active):focus-visible,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):focus-visible {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        color: #707070 !important;

        border-color: transparent !important;

        outline: none !important;
        box-shadow: none !important;

        transform: none !important;
        filter: none !important;
    }


    /* ======================================================
       PRESIONADO
       Este reemplaza el antiguo verde
    ====================================================== */

    body #mobile-nav-container .mobile-app-nav>a:not(.active):active,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):active,
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):active {

        background: #E7B8C0 !important;
        background-color: #E7B8C0 !important;
        background-image: none !important;

        color: #111111 !important;

        border-color: transparent !important;

        outline: none !important;

        box-shadow:
            inset 0 0 0 1px rgba(17, 17, 17, 0.04),
            0 4px 12px rgba(39, 21, 27, 0.08) !important;

        transform: scale(0.96) !important;

        filter: none !important;

        transition:
            background-color 0.08s ease,
            color 0.08s ease,
            transform 0.08s ease !important;
    }


    /* Icono y texto mientras se presiona */
    body #mobile-nav-container .mobile-app-nav>a:not(.active):active i,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):active i,
    body #mobile-nav-container .mobile-app-nav>a:not(.active):active span,
    body #mobile-nav-container .mobile-app-nav>button:not(.active):active span,
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):active i,
    body #mobile-nav-container .mobile-app-nav>.mobile-nav-whatsapp:not(.active):active span {

        color: #111111 !important;
    }


    /* ======================================================
       PÁGINA ACTUAL
       Permanece rosa claro
    ====================================================== */

    body #mobile-nav-container .mobile-app-nav>a.active,
    body #mobile-nav-container .mobile-app-nav>button.active,
    body #mobile-nav-container .mobile-app-nav>a.active:hover,
    body #mobile-nav-container .mobile-app-nav>button.active:hover,
    body #mobile-nav-container .mobile-app-nav>a.active:active,
    body #mobile-nav-container .mobile-app-nav>button.active:active,
    body #mobile-nav-container .mobile-app-nav>a.active:focus,
    body #mobile-nav-container .mobile-app-nav>button.active:focus,
    body #mobile-nav-container .mobile-app-nav>a.active:focus-visible,
    body #mobile-nav-container .mobile-app-nav>button.active:focus-visible {

        background: #FBE7E8 !important;
        background-color: #FBE7E8 !important;
        background-image: none !important;

        color: #111111 !important;

        outline: none !important;
        box-shadow: none !important;

        filter: none !important;
        transform: none !important;
    }

    body #mobile-nav-container .mobile-app-nav>a.active i,
    body #mobile-nav-container .mobile-app-nav>button.active i,
    body #mobile-nav-container .mobile-app-nav>a.active span,
    body #mobile-nav-container .mobile-app-nav>button.active span {

        color: #111111 !important;
    }
}

/* ==========================================================
   WHATSAPP — SOLO ICONO VERDE
   OVERRIDE DE MÁXIMA ESPECIFICIDAD
========================================================== */

@media (max-width: 767px) {

    body #mobile-nav-container .mobile-app-nav>a.mobile-nav-whatsapp:not(.active)>i.bi.bi-whatsapp {
        color: #25D366 !important;
        -webkit-text-fill-color: #25D366 !important;
        opacity: 1 !important;
        filter: none !important;
    }

    body #mobile-nav-container .mobile-app-nav>a.mobile-nav-whatsapp:not(.active)>span {
        color: #707070 !important;
        -webkit-text-fill-color: #707070 !important;
    }


    /* También verde durante hover/focus */
    body #mobile-nav-container .mobile-app-nav>a.mobile-nav-whatsapp:not(.active):hover>i.bi.bi-whatsapp,

    body #mobile-nav-container .mobile-app-nav>a.mobile-nav-whatsapp:not(.active):focus>i.bi.bi-whatsapp,

    body #mobile-nav-container .mobile-app-nav>a.mobile-nav-whatsapp:not(.active):focus-visible>i.bi.bi-whatsapp {
        color: #25D366 !important;
        -webkit-text-fill-color: #25D366 !important;
    }


    /* También verde mientras mantienes presionado */
    body #mobile-nav-container .mobile-app-nav>a.mobile-nav-whatsapp:not(.active):active>i.bi.bi-whatsapp {
        color: #25D366 !important;
        -webkit-text-fill-color: #25D366 !important;
    }
}