/* ============================================
   FEEDBACK TÁCTIL BOTTOM-NAV
   ============================================ */

.nav-item {
    /* Asegurar que las transiciones estén definidas */
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Estado activo (pulsado) */
.nav-item:active {
    transform: scale(0.88);
    background: rgba(255, 107, 74, 0.12);
}

/* Icono dentro del botón */
.nav-item i {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease;
    transform-origin: center;
}

.nav-item:active i {
    transform: scale(0.82);
}

/* Efecto ripple opcional (onda expansiva) */
.nav-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 107, 74, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.nav-item:active::after {
    width: 120%;
    height: 200%;
    opacity: 1;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.15s ease;
}

/* Badge del carrito no debe escalar */
.nav-item .badge-count {
    transition: none;
    transform: none !important;
}

.nav-item:active .badge-count {
    transform: none !important;
}