/**
 * 🎨 DISEÑO ULTRA-LLAMATIVO CON COLORES VIBRANTES
 * Amarillo + Morado = Energía y Elegancia
 */

/* ===================================
   VARIABLES Y CONFIGURACIÓN BASE
   =================================== */

:root {
    --primary-purple: #667eea;
    --primary-purple-dark: #5a67d8;
    --primary-purple-light: #818cf8;
    --accent-yellow: #FFC107;
    --accent-yellow-bright: #FFD93D;
    --accent-yellow-dark: #FF9800;
    --text-dark: #1a202c;
    --text-light: #718096;
    --bg-white: #ffffff;
    --bg-gray: #f7fafc;
    --shadow-yellow: 0 10px 40px rgba(255, 193, 7, 0.3);
    --shadow-purple: 0 10px 40px rgba(102, 126, 234, 0.3);
    --shadow-mixed: 0 20px 60px rgba(102, 126, 234, 0.2), 0 10px 30px rgba(255, 193, 7, 0.15);
}

/* ===================================
   MONEDERO - GLASSMORPHISM MORADO
   =================================== */

@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }

    60% {
        transform: translateX(-10px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes floatDynamic {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-8px) rotate(1deg);
    }

    75% {
        transform: translateY(-4px) rotate(-1deg);
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4),
            0 0 40px rgba(139, 92, 246, 0.3),
            inset 0 0 20px rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 12px 48px rgba(102, 126, 234, 0.6),
            0 0 60px rgba(139, 92, 246, 0.5),
            inset 0 0 30px rgba(255, 255, 255, 0.7);
    }
}

@keyframes shimmerGradient {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}


@keyframes floatSubtle {

    0%,
    100% {
        transform: translateY(-50%) translateX(0) scale(1);
    }

    50% {
        transform: translateY(calc(-50% - 5px)) translateX(0) scale(1);
    }
}

.coin-icon {
    font-size: 24px !important;
    display: inline-block !important;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.6)) !important;
    animation: pulseSubtle 2s ease-in-out infinite !important;
}

@keyframes pulseSubtle {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

.saldo-amount {
    font-size: 48px !important;
    font-weight: 800 !important;
    color: white !important;
    margin: 20px 0 !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(255, 255, 255, 0.5) !important;
    position: relative !important;
    z-index: 1 !important;
}

#monedero-status {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-top: 12px !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 1 !important;
}

#monedero-indicator {
    width: 12px !important;
    height: 12px !important;
    background: #34d399 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.3),
        0 0 20px rgba(52, 211, 153, 0.6) !important;
    animation: pulseGlow 2s ease-in-out infinite !important;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.3),
            0 0 20px rgba(52, 211, 153, 0.6);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.2),
            0 0 30px rgba(52, 211, 153, 0.8);
    }
}

/* Botón test del monedero */
#btn-test-agregar-dinero {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 14px 24px !important;
    margin-top: 20px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#btn-test-agregar-dinero:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* NOTA: Estilos del monedero desactivados - ahora se usan en modern-clean-theme.css */
/*
#monedero-display:hover {
    transform: translateY(calc(-50% - 3px)) translateX(0) scale(1.02) !important;
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6),
        0 0 50px rgba(139, 92, 246, 0.4) !important;
}
*/

.monedero-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
    pointer-events: none;
}

.coin-icon {
    display: inline-block;
    animation: monederoPulse 2s ease-in-out infinite;
}

.saldo-amount {
    font-size: 36px !important;
    font-weight: 900 !important;
    margin: 10px 0;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
}

#monedero-indicator {
    width: 8px;
    height: 8px;
    background: #90EE90;
    border-radius: 50%;
    box-shadow: 0 0 10px #90EE90;
    transition: all 0.3s ease;
}

#monedero-indicator.active {
    animation: monederoPulse 2s ease-in-out infinite;
}

#monedero-status {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

/* ===================================
   MONEDERO - POSICIONAMIENTO RESPONSIVE
   =================================== *

/* ===================================
   CARDS DE PRODUCTOS - VIBRANTES Y ATRACTIVAS
   =================================== */

@keyframes cardFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes cardGlow {

    0%,
    100% {
        box-shadow: 0 8px 32px rgba(255, 193, 7, 0.2),
            0 4px 16px rgba(102, 126, 234, 0.15);
    }

    50% {
        box-shadow: 0 12px 48px rgba(255, 193, 7, 0.35),
            0 8px 32px rgba(102, 126, 234, 0.25);
    }
}

.single-product,
.product-item {
    background: linear-gradient(135deg, #ffffff 0%, #fefcf3 100%) !important;
    border-radius: 24px !important;
    padding: 28px !important;
    margin-bottom: 28px !important;
    border: 2px solid rgba(255, 193, 7, 0.2) !important;
    box-shadow: 0 8px 32px rgba(255, 193, 7, 0.2),
        0 4px 16px rgba(102, 126, 234, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.single-product::before,
.product-item::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.08) 0%, transparent 70%);
    transition: all 0.6s ease;
    z-index: 0;
}

.single-product::after,
.product-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(102, 126, 234, 0.03) 0%,
            rgba(255, 193, 7, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    border-radius: 22px;
}

.single-product:hover,
.product-item:hover {
    transform: translateY(-12px) scale(1.02) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    animation: cardGlow 2s ease-in-out infinite !important;
}

.single-product:hover::before,
.product-item:hover::before {
    top: -50%;
    left: -50%;
}

.single-product:hover::after,
.product-item:hover::after {
    opacity: 1;
}

.single-product>*,
.product-item>* {
    position: relative;
    z-index: 1;
}

/* Imagen del producto con efecto wow */
.single-product .product-img,
.product-item .product-img,
.single-product img,
.product-item img {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-radius: 20px !important;
    object-fit: cover !important;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1)) !important;
}

.single-product:hover .product-img,
.product-item:hover .product-img,
.single-product:hover img,
.product-item:hover img {
    transform: scale(1.15) rotate(3deg) !important;
    filter: drop-shadow(0 12px 24px rgba(255, 193, 7, 0.3)) !important;
}

/* Título del producto */
.single-product .product-title,
.product-item .product-title,
.single-product h4,
.product-item h4 {
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    font-size: 18px !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    letter-spacing: -0.02em !important;
}

.single-product:hover .product-title,
.product-item:hover .product-title,
.single-product:hover h4,
.product-item:hover h4 {
    color: var(--primary-purple) !important;
    text-shadow: 0 0 20px rgba(102, 126, 234, 0.3) !important;
    transform: translateX(4px) !important;
}

/* Precio con efecto brillante */
.product-price,
.price-tag,
.single-product .price,
.product-item .price {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--text-dark) !important;
    margin: 12px 0 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 2px 8px rgba(255, 193, 7, 0.2) !important;
    transition: all 0.3s ease !important;
}

.single-product:hover .product-price,
.product-item:hover .price-tag {
    color: var(--accent-yellow-dark) !important;
    text-shadow: 0 4px 16px rgba(255, 193, 7, 0.5) !important;
    transform: scale(1.1) !important;
}

/* Badge de descuento - ESTILO ELEGANTE */
.discount-percentage,
.sale-badge,
.discount-badge,
[class*="badge"] {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: linear-gradient(135deg, #D4AF37 0%, #B8941F 100%) !important;
    color: #2C3E50 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    z-index: 10 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    letter-spacing: 0.5px !important;
    transform: rotate(-3deg) !important;
    animation: badgePulse 3s ease-in-out infinite !important;
    text-transform: uppercase !important;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: rotate(-3deg) scale(1);
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    50% {
        transform: rotate(-3deg) scale(1.05);
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

.shopping-item ul li {
    padding: 12px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.shopping-item ul li:last-child {
    border-bottom: none !important;
}

.shopping-item ul li img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.shopping-item .total {
    background: linear-gradient(135deg, #f5f5dc 0%, #faf8f0 100%) !important;
    color: #2c3e50 !important;
    padding: 15px !important;
    border-radius: 12px !important;
    margin-top: 15px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border: 2px solid #e8e6d9 !important;
}

.shopping-item .button {
    margin-top: 15px !important;
    display: flex !important;
    gap: 10px !important;
}

.shopping-item .btn {
    flex: 1 !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    text-align: center !important;
}

.shopping-item .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ===================================
   BADGES DE PRODUCTOS (#1, #2, #3)
   =================================== */

.single-product .sale-badge,
.product-item .discount-badge,


button[onclick*="addToCart"],
.add-to-cart,
.btn-add-cart,
.single-product .btn,
.product-item .btn {
    background: linear-gradient(135deg, #D4AF37 0%, #B8941F 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #2C3E50 !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

button[onclick*="addToCart"]::before,
.add-to-cart::before,
.btn-add-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: left 0.5s;
}

button[onclick*="addToCart"]:hover,
.add-to-cart:hover,
.btn-add-cart:hover {
    background: linear-gradient(135deg, #E8D7A0 0%, #C9A948 100%) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 4px rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(0, 0, 0, 0.9) !important;
}

button[onclick*="addToCart"]:hover::before,
.add-to-cart:hover::before,
.btn-add-cart:hover::before {
    left: 100%;
}

button[onclick*="addToCart"]:active,
.add-to-cart:active,
.btn-add-cart:active {
    transform: translateY(-3px) scale(1.02) !important;
    animation: buttonBounce 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(255, 152, 0, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2rtant);
    
}
.single-product:nth-child(2),
.product-item:nth-child(2) {
    animation-delay: 0.1s !important;
}

.single-product:nth-child(3),
.product-item:nth-child(3) {
    animation-delay: 0.15s !important;
}

.single-product:nth-child(4),
.product-item:nth-child(4) {
    animation-delay: 0.2s !important;
}

.single-product:nth-child(5),
.product-item:nth-child(5) {
    animation-delay: 0.25s !important;
}

.single-product:nth-child(6),
.product-item:nth-child(6) {
    animation-delay: 0.3s !important;
}

/* ===================================
   RESPONSIVE - MOBILE OPTIMIZADO
   =================================== *

/* ===================================
   SCROLLBAR PERSONALIZADO
   =================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ===================================
   SMOOTH TRANSITIONS GLOBALES
   =================================== */

html {
    scroll-behavior: smooth !important;
}

* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}