/**
 * Portal de clientes — micro-interacciones (plantillas Ecomus).
 *
 * Detalles de movimiento sobre el tema: tarjetas de producto, botones, banners con link, carrito.
 * Todo lo que se mueve va dentro de prefers-reduced-motion: no-preference (respeta la configuración
 * de accesibilidad del sistema). El color de acento sale de --portal-primary (tema del portal).
 * Lo usan: interfaz_portal.php (layouts) y el JS de agregar al carrito (clases pe-*).
 */

/* Foco visible para teclado (sin afectar el clic con mouse) */
.card-product a:focus-visible,
.portal-img-link:focus-visible,
.btn-card-agregar:focus-visible,
.quick-add:focus-visible,
.tf-btn:focus-visible,
.nav-icon-item:focus-visible {
    outline: 2px solid var(--portal-primary, #1d1d1d);
    outline-offset: 2px;
}

/* Estado de los botones de agregar mientras se agrega y cuando se agregó */
.pe-cargando {
    opacity: .6;
    pointer-events: none;
    cursor: progress;
}
.btn-card-agregar.pe-agregado,
.quick-add.pe-agregado,
#btn-agregar-carrito.pe-agregado {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}

@media (prefers-reduced-motion: no-preference) {
    /* Tarjetas de producto: sombra al pasar el mouse (el zoom de la imagen ya lo hace el tema) */
    .card-product {
        transition: box-shadow .25s ease;
    }
    @media (hover: hover) {
        .card-product:hover {
            box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
        }
    }

    /* Botones: respuesta al presionar */
    .tf-btn,
    .btn-card-agregar,
    .quick-add,
    .wibi-toast-primary,
    .wibi-toast-secondary,
    .ecomus-page-content .btn,
    #btn-agregar-carrito {
        transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    }
    .tf-btn:active,
    .btn-card-agregar:active,
    .quick-add:active,
    .wibi-toast-primary:active,
    .wibi-toast-secondary:active,
    .ecomus-page-content .btn:active,
    #btn-agregar-carrito:active {
        transform: scale(.96);
    }

    /* Banners y promos con link: zoom suave de la imagen */
    .portal-img-link {
        overflow: hidden;
    }
    .portal-img-link img {
        transition: transform .6s ease;
    }
    @media (hover: hover) {
        .portal-img-link:hover img {
            transform: scale(1.03);
        }
    }

    /* Botón que agregó: marca de confirmación */
    .btn-card-agregar.pe-agregado,
    .quick-add.pe-agregado,
    #btn-agregar-carrito.pe-agregado {
        animation: pe-confirmar .35s ease;
    }

    /* Carrito del encabezado: salto al agregar y contador que aparece */
    .nav-cart .nav-icon-item.pe-cart-bump {
        display: inline-block;
        animation: pe-salto .6s ease;
    }
    #carrito-badge.pe-badge-pop {
        animation: pe-pop .4s ease;
    }

    /* Aviso de producto agregado: entra desde abajo */
    .wibi-toast {
        animation: pe-entrar .3s ease;
    }
}

@keyframes pe-salto {
    0% { transform: scale(1); }
    30% { transform: scale(1.25) rotate(-8deg); }
    60% { transform: scale(.95) rotate(4deg); }
    100% { transform: scale(1); }
}
@keyframes pe-pop {
    0% { transform: scale(.4); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes pe-confirmar {
    0% { transform: scale(.92); }
    100% { transform: scale(1); }
}
@keyframes pe-entrar {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Menú del encabezado configurable (portal/portal_menu.php) */
.box-nav-ul .portal-menu-dropdown .submenu-default {
    left: -20px;
}
.box-nav-ul .item-link .icon-arrow-down {
    font-size: 8px;
    margin-left: 4px;
    vertical-align: middle;
}
.box-nav-ul .portal-menu-mega .menu-heading a {
    color: inherit;
}
.box-nav-ul .portal-menu-mega .mega-menu-item {
    margin-bottom: 20px;
}