<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Máquina de Donación ADRA</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        /* Variables y estilos base */
        :root {
            --adra-red: #D50032;
            --adra-deep-red: #992A31;
            --adra-cream: #F8F0E4;
            --adra-gold: #C1A01E;
            --adra-pale-blue: #E6F5FA;
            --adra-white: #FFFFFF;
            --text-dark: #333333;
            --text-medium: #666666;
            --text-light: #999999;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: fixed;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: linear-gradient(180deg, var(--adra-deep-red) 0%, var(--adra-red) 50%, var(--adra-cream) 100%);
            color: var(--text-dark);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: auto;
            -webkit-text-size-adjust: 100%;
        }

        .vending-container {
            width: 100%;
            max-width: 420px;
            height: 100vh;
            max-height: 800px;
            background: var(--adra-red);
            padding: 15px;
            display: flex;
            flex-direction: column;
            position: relative;
            margin: 0 auto;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            overflow: hidden;
        }

        .machine-header {
            background: linear-gradient(135deg, var(--adra-deep-red) 0%, var(--adra-red) 50%, var(--adra-gold) 100%);
            border-radius: 12px 12px 0 0;
            padding: 12px 15px;
            margin-bottom: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            border: 3px solid var(--adra-deep-red);
            border-bottom: none;
            position: relative;
            z-index: 10;
        }

        .header-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: var(--adra-white);
        }

        .header-subtitle {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 8px;
            opacity: 0.9;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
        }

        .header-icon {
            font-size: 2rem;
            margin-bottom: 8px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .items-display {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 0 0 12px 12px;
            padding: 12px;
            box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.6);
            width: 100%;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            margin-bottom: 12px;
            overflow: hidden;
        }

        .items-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 8px;
            height: 100%;
            width: 100%;
        }

        .item-card {
            background: var(--adra-white);
            border-radius: 8px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
        }

        .item-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
            z-index: 10;
            border-color: var(--adra-red);
        }

        .item-card.active {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(213, 0, 50, 0.4), 0 0 0 2px var(--adra-red), 0 6px 12px rgba(0, 0, 0, 0.2);
            z-index: 20;
            border-color: var(--adra-red);
        }

        .item-image {
            width: 100%;
            height: 100px;
            background: linear-gradient(135deg, var(--adra-cream), var(--adra-pale-blue));
            border-radius: 6px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            border: 2px solid var(--adra-gold);
        }

        .item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .item-image i {
            font-size: 2rem;
            color: var(--adra-red);
        }

        .item-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .item-name {
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--text-dark);
            text-align: center;
            line-height: 1.2;
            margin-bottom: 2px;
            min-height: 1.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item-price {
            font-size: 0.7rem;
            font-weight: 700;
            text-align: center;
            background: rgba(213, 0, 50, 0.1);
            color: var(--adra-red);
            padding: 3px 6px;
            border-radius: 4px;
            margin-top: auto;
            border: 1px solid var(--adra-gold);
        }

        /* ========================================== */
        /* DISPENSADOR SIMPLIFICADO - PERSIANA COMPLETA */
        /* ========================================== */
        .dispenser-area {
            height: 120px;
            background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
            border-radius: 8px 8px 0 0;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.9), 0 -5px 15px rgba(0, 0, 0, 0.5);
            border: 3px solid #333;
            border-bottom: none;
        }

        /* Luz indicadora */
        .dispenser-light {
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 10px;
            background: var(--adra-red);
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(213, 0, 50, 0.8);
            opacity: 0.3;
            z-index: 4;
            animation: lightPulse 2s infinite;
        }

        @keyframes lightPulse {
            0%, 100% { opacity: 0.3; box-shadow: 0 0 20px rgba(213, 0, 50, 0.8); }
            50% { opacity: 1; box-shadow: 0 0 30px rgba(213, 0, 50, 1); }
        }

        .dispenser-light.active {
            animation: lightActive 0.5s 3;
        }

        @keyframes lightActive {
            0%, 100% { opacity: 0.3; box-shadow: 0 0 20px rgba(213, 0, 50, 0.8); }
            50% { opacity: 1; box-shadow: 0 0 40px rgba(213, 0, 50, 1); }
        }

        /* Cortina metálica que baja - OCUPA TODO EL DISPENSADOR */
        .shutter {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(135deg, 
                    #888 0%, 
                    #ccc 15%, 
                    #aaa 30%, 
                    #ddd 45%, 
                    #999 60%, 
                    #bbb 75%, 
                    #888 90%, 
                    #aaa 100%);
            border-radius: 8px 8px 0 0;
            border: 3px solid #666;
            border-bottom: 3px solid #444;
            z-index: 2;
            overflow: hidden;
            transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 
                0 0 15px rgba(255, 255, 255, 0.3),
                inset 0 5px 20px rgba(255, 255, 255, 0.2),
                inset 0 -5px 20px rgba(0, 0, 0, 0.4);
        }

        /* Textura metálica de la cortina */
        .shutter::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 15px,
                    rgba(255, 255, 255, 0.15) 15px,
                    rgba(255, 255, 255, 0.15) 16px
                ),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 8px,
                    rgba(0, 0, 0, 0.15) 8px,
                    rgba(0, 0, 0, 0.15) 9px
                );
            border-radius: 5px 5px 0 0;
        }

        /* Efecto de borde metálico superior */
        .shutter::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, 
                rgba(255,255,255,0.8) 0%,
                rgba(255,255,255,0.4) 50%,
                rgba(255,255,255,0.8) 100%);
            z-index: 3;
        }

        /* Cuando baja la cortina */
        .shutter.open {
            height: 0;
            border-bottom: none;
            transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Contenedor donde aparece la tarjeta (DENTRO de la máquina) */
        .dispenser-internal {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.5s ease 0.4s;
            background: #000000;
            border-radius: 5px 5px 0 0;
        }

        /* Cuando baja la cortina, se muestra el interior negro */
        .shutter.open ~ .dispenser-internal {
            opacity: 1;
        }

        /* ========================================== */
        /* ANIMACIÓN DE CAÍDA MEJORADA - PARA TODAS LAS FILAS */
        /* ========================================== */
        @keyframes fallToDispenser {
            0% { 
                transform: translate(0, 0) scale(1); 
                opacity: 1; 
            }
            100% { 
                transform: translate(var(--end-x), var(--end-y)) scale(0.5); 
                opacity: 0;
            }
        }

        .falling-item {
            position: fixed;
            z-index: 1000;
            pointer-events: none;
            animation: fallToDispenser 0.8s ease-in forwards;
        }

        /* ========================================== */
        /* TARJETA DISPENSADA ENCIMA DE LA MÁQUINA */
        /* ========================================== */
        .dispensed-card-container {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 130px;
            height: 170px;
            z-index: 100;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .dispensed-card {
            width: 100%;
            height: 100%;
            background: var(--adra-white);
            border-radius: 10px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
            border: 3px solid var(--adra-red);
            transform: scale(0);
            opacity: 0;
            animation: cardAppear 0.8s ease-out 0.5s forwards;
        }

        @keyframes cardAppear {
            0% { transform: scale(0); opacity: 0; }
            70% { transform: scale(1.05); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        .dispensed-card .item-image {
            height: 90px;
            margin-bottom: 8px;
        }

        .dispensed-card .item-name {
            font-size: 0.75rem;
            min-height: 1.4rem;
        }

        .dispensed-card .item-price {
            font-size: 0.7rem;
            padding: 4px 8px;
            background: rgba(213, 0, 50, 0.15);
        }

        /* ========================================== */
        /* MODAL DE CONFIRMACIÓN */
        /* ========================================== */
        .confirmation-modal .modal-content {
            background: var(--adra-white);
            border-radius: 12px;
            border: 2px solid var(--adra-red);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            color: var(--adra-red);
        }

        .confirmation-modal .modal-header {
            border-bottom: 2px solid var(--adra-red);
            background: var(--adra-white);
        }

        .confirmation-modal .modal-header .modal-title {
            color: var(--adra-red);
            font-weight: 700;
            width: 100%;
            text-align: center;
        }

        .confirmation-modal .modal-body {
            padding: 1.5rem;
            text-align: center;
            background: var(--adra-white);
        }

        .confirmation-modal .modal-footer {
            border-top: 2px solid var(--adra-red);
            background: var(--adra-white);
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .confirmation-image-container {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .confirmation-image {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--adra-cream), var(--adra-pale-blue));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid var(--adra-red);
        }

        .confirmation-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .confirmation-image i {
            font-size: 2.5rem;
            color: var(--adra-red);
        }

        .confirmation-item-name {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--adra-red);
            margin-bottom: 0.5rem;
        }

        .confirmation-item-desc {
            font-size: 1rem;
            color: var(--text-medium);
            line-height: 1.4;
            margin-bottom: 0;
        }

        .confirmation-cancel-btn {
            background: #6c757d;
            border-color: #6c757d;
            color: var(--adra-white);
            font-weight: 600;
            padding: 0.4rem 1.2rem;
        }

        .confirmation-donate-btn {
            background: var(--adra-red);
            border-color: var(--adra-red);
            color: var(--adra-white);
            font-weight: 600;
            padding: 0.4rem 1.2rem;
        }

        .confirmation-cancel-btn:hover {
            background: #5a6268;
            border-color: #545b62;
        }

        .confirmation-donate-btn:hover {
            background: var(--adra-deep-red);
            border-color: var(--adra-deep-red);
        }

        /* ========================================== */
        /* RESPONSIVE */
        /* ========================================== */
        @media (max-width: 575px) {
            .vending-container {
                max-width: 100%;
                height: 100vh;
                max-height: none;
                border-radius: 0;
                padding: 8px;
            }
            
            .machine-header {
                padding: 6px 8px;
                margin-bottom: 6px;
                border-radius: 8px 8px 0 0;
            }
            
            .items-grid {
                gap: 4px;
            }
            
            .item-card {
                padding: 4px;
            }
            
            .item-image {
                height: 65px;
                margin-bottom: 3px;
            }
            
            .item-name {
                font-size: 0.6rem;
                min-height: 1rem;
            }
            
            .item-price {
                font-size: 0.6rem;
                padding: 2px 4px;
            }
            
            .dispenser-area {
                height: 100px;
            }
            
            .dispensed-card-container {
                width: 110px;
                height: 140px;
                top: 10px;
                right: 10px;
            }
            
            .dispensed-card .item-image {
                height: 70px;
            }
        }

        @media (max-height: 600px) and (orientation: landscape) {
            .vending-container {
                max-height: 100vh;
                padding: 6px;
            }
            
            .item-image {
                height: 45px;
            }
            
            .dispenser-area {
                height: 90px;
            }
        }
    </style>
</head>
<body>
    <div class="vending-container">
        <!-- ENCABEZADO -->
        <div class="machine-header">
            <div class="header-content">
                <i class="bi bi-heart-fill header-icon"></i>
                <h1 class="header-subtitle">Máquina de Donación ADRA</h1>
            </div>
        </div>

        <!-- VITRINA DE ITEMS -->
        <div class="items-display">
            <div class="items-grid" id="itemsGrid">
                <!-- Items generados dinámicamente -->
            </div>
        </div>

        <!-- TARJETA DISPENSADA (se muestra encima de la máquina) -->
        <div class="dispensed-card-container" id="dispensedCardContainer">
            <!-- Tarjeta aparecerá aquí -->
        </div>

        <!-- DISPENSADOR- PERSIANA COMPLETA -->
        <div class="dispenser-area">
            <div class="dispenser-light" id="dispenserLight"></div>
            <div class="shutter" id="shutter"></div>
            <div class="dispenser-internal" id="dispenserInternal">
                <!-- Aquí aparecerá el item dentro del dispensador -->
            </div>
        </div>
    </div>

    <!-- MODAL DE CONFIRMACIÓN -->
    <div class="modal fade confirmation-modal" id="confirmationModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmar Donación</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="confirmation-image-container">
                        <div class="confirmation-image" id="confirmationImage"></div>
                    </div>
                    <h4 id="confirmationItemName" class="confirmation-item-name"></h4>
                    <p class="confirmation-item-desc" id="confirmationItemDesc"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn confirmation-cancel-btn" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn confirmation-donate-btn" id="confirmDonationBtn">Sí, Donar</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const itemsGrid = document.getElementById('itemsGrid');
            const shutter = document.getElementById('shutter');
            const dispenserInternal = document.getElementById('dispenserInternal');
            const dispenserLight = document.getElementById('dispenserLight');
            const dispensedCardContainer = document.getElementById('dispensedCardContainer');
            const confirmationModal = new bootstrap.Modal(document.getElementById('confirmationModal'));
            const confirmationImage = document.getElementById('confirmationImage');
            const confirmationItemName = document.getElementById('confirmationItemName');
            const confirmationItemDesc = document.getElementById('confirmationItemDesc');
            const confirmDonationBtn = document.getElementById('confirmDonationBtn');

            let selectedItemId = null;
            let selectedItemPrecio = null;
            let selectedItemData = null;
            let currentFallingItem = null;

            // Datos de los items
            const items = [
    { id: 1, name: "Frazadas", precio: 10.00, imagen: "img/1.jpg" },
    { id: 2, name: "Libros y juegos", precio: 15.00, imagen: "img/2.jpg" },
    { id: 3, name: "Kit de higiene", precio: 20.00, imagen: "img/3.jpg" },
    { id: 4, name: "Alimentos básicos", precio: 25.00, imagen: "img/4.jpg" },
    { id: 5, name: "Agua potable", precio: 8.00, imagen: "img/5.jpg" },
    { id: 6, name: "Medicamentos", precio: 30.00, imagen: "img/6.jpg" },
    { id: 7, name: "Ropa de abrigo", precio: 18.00, imagen: "img/7.jpg" },
    { id: 8, name: "Material escolar", precio: 12.00, imagen: "img/8.jpg" },
    { id: 9, name: "Cobijas térmicas", precio: 22.00, imagen: "img/9.jpg" },
    { id: 10, name: "Kit de primeros auxilios", precio: 28.00, imagen: "img/10.jpg" },
    { id: 11, name: "Alimentos no perecederos", precio: 16.00, imagen: "img/11.jpg" },
    { id: 12, name: "Utensilios de cocina", precio: 14.00, imagen: "img/12.jpg" },
    { id: 13, name: "Lámparas solares", precio: 35.00, imagen: "img/13.jpg" },
    { id: 14, name: "Filtros de agua", precio: 40.00, imagen: "img/14.jpg" },
    { id: 15, name: "Tiendas de campaña", precio: 50.00, imagen: "img/15.jpg" },
    { id: 16, name: "Sillas de ruedas", precio: 75.00, imagen: "img/16.jpg" }
];

            // Generar los items
            function generateItems() {
                itemsGrid.innerHTML = '';
                for (let i = 0; i < 16; i++) {
                    const item = items[i % items.length];
                    const itemCard = document.createElement('div');
                    itemCard.className = 'item-card';
                    itemCard.dataset.id = item.id;
                    itemCard.dataset.name = item.name;
                    itemCard.dataset.precio = item.precio;
                    itemCard.dataset.imagen = item.imagen;
                    
                    itemCard.innerHTML = `
                        <div class="item-image">
                            <img src="${item.imagen}" alt="${item.name}" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                            <i class="bi bi-gift" style="display:none;"></i>
                        </div>
                        <div class="item-content">
                            <div class="item-name">${item.name}</div>
                            <div class="item-price">S/ ${item.precio.toFixed(2)}</div>
                        </div>
                    `;
                    
                    itemsGrid.appendChild(itemCard);
                }
            }

            generateItems();

            // Click en tarjeta de item
            itemsGrid.addEventListener('click', function(e) {
                const card = e.target.closest('.item-card');
                if (card) {
                    // Desactivar otras tarjetas
                    document.querySelectorAll('.item-card').forEach(c => c.classList.remove('active'));
                    card.classList.add('active');
                    
                    // Guardar datos del item seleccionado
                    selectedItemId = card.dataset.id;
                    selectedItemPrecio = card.dataset.precio;
                    selectedItemData = {
                        name: card.dataset.name,
                        precio: card.dataset.precio,
                        imagen: card.dataset.imagen
                    };
                    
                    // Limpiar animaciones anteriores
                    cleanPreviousAnimations();
                    
                    // Iniciar la secuencia de dispensación
                    startDispensingSequence(card);
                }
            });

            // Confirmar donación
            confirmDonationBtn.addEventListener('click', function() {
                if (selectedItemId && selectedItemPrecio) {
                    // Ocultar la tarjeta dispensada
                    dispensedCardContainer.style.display = 'none';
                    dispensedCardContainer.innerHTML = '';
                    
                    confirmationModal.hide();
                    
                    // Redirección al formulario de donación
                    setTimeout(() => {
                        window.location.href = `formulario_donacion.php?item_id=${selectedItemId}&precio=${selectedItemPrecio}`;
                    }, 300);
                }
            });

            // Limpiar animaciones anteriores
            function cleanPreviousAnimations() {
                // Remover item cayendo
                if (currentFallingItem) {
                    document.body.removeChild(currentFallingItem);
                    currentFallingItem = null;
                }
                
                // Cerrar persiana
                shutter.classList.remove('open');
                
                // Apagar luz
                dispenserLight.classList.remove('active');
                
                // Limpiar contenido del dispensador
                dispenserInternal.innerHTML = '';
            }

            // Iniciar secuencia de dispensación
            function startDispensingSequence(card) {
                console.log("Iniciando secuencia de dispensación...");
                
                // 1. Animación de caída CORREGIDA
                createFallingItem(card);
                
                // 2. Después de que cae, abrir cortina y mostrar tarjeta en dispensador
                setTimeout(() => {
                    console.log("Abriendo cortina y mostrando tarjeta...");
                    
                    // Activar luz
                    dispenserLight.classList.add('active');
                    
                    // Abrir cortina
                    shutter.classList.add('open');
                    
                    // Crear tarjeta GRANDE y COMPLETA en el dispensador
                    createCardInDispenser(card);
                    
                }, 800); // Tiempo de caída
                
                // 3. Después de un momento, cerrar cortina
                setTimeout(() => {
                    console.log("Cerrando cortina...");
                    
                    // Cerrar cortina
                    shutter.classList.remove('open');
                    
                    // Apagar luz
                    dispenserLight.classList.remove('active');
                    
                    // Limpiar dispensador
                    setTimeout(() => {
                        dispenserInternal.innerHTML = '';
                    }, 300);
                    
                }, 2000); // 800 + 1200 (tiempo para ver la tarjeta)
                
                // 4. Mostrar tarjeta encima de la máquina
                setTimeout(() => {
                    console.log("Mostrando tarjeta encima de la máquina...");
                    showDispensedCard(card);
                    
                    // Mostrar modal de confirmación
                    setTimeout(() => {
                        console.log("Mostrando modal de confirmación...");
                        showConfirmationModal(selectedItemData);
                    }, 500);
                    
                }, 2300); // 2000 + 300
            }

            // Crear animación de caída 
            function createFallingItem(card) {
                const rect = card.getBoundingClientRect();
                const dispenserRect = document.querySelector('.dispenser-area').getBoundingClientRect();
                
                // Calcular la posición del centro del dispensador
                const endX = dispenserRect.left + (dispenserRect.width / 2) - (rect.width / 2);
                const endY = dispenserRect.top + (dispenserRect.height / 2) - (rect.height / 2);
                
                const fallingItem = card.cloneNode(true);
                fallingItem.classList.add('falling-item');
                
                // Establecer variables CSS para la animación
                fallingItem.style.setProperty('--end-x', `${endX - rect.left}px`);
                fallingItem.style.setProperty('--end-y', `${endY - rect.top}px`);
                
                fallingItem.style.width = `${rect.width}px`;
                fallingItem.style.height = `${rect.height}px`;
                fallingItem.style.left = `${rect.left}px`;
                fallingItem.style.top = `${rect.top}px`;
                fallingItem.style.position = 'fixed';
                fallingItem.style.zIndex = '1000';
                fallingItem.style.pointerEvents = 'none';
                document.body.appendChild(fallingItem);
                currentFallingItem = fallingItem;
                
                // Eliminar después de la animación
                setTimeout(() => {
                    if (currentFallingItem && currentFallingItem.parentNode) {
                        document.body.removeChild(currentFallingItem);
                        currentFallingItem = null;
                    }
                }, 800);
            }

            // Crear tarjeta dentro del dispensador
            function createCardInDispenser(card) {
                dispenserInternal.innerHTML = '';
                
                const dispenserCard = card.cloneNode(true);
                dispenserCard.style.width = '140px';
                dispenserCard.style.height = '170px';
                dispenserCard.style.opacity = '1';
                dispenserCard.style.transform = 'scale(0.5)';
                dispenserCard.style.boxShadow = '0 0 30px rgba(255, 255, 255, 0.6)';
                dispenserCard.style.border = '2px solid var(--adra-gold)';
                dispenserCard.style.borderRadius = '8px';
                dispenserInternal.appendChild(dispenserCard);
            }

            // Mostrar tarjeta dispensada encima de la máquina
            function showDispensedCard(card) {
                dispensedCardContainer.innerHTML = '';
                
                const dispensedCard = document.createElement('div');
                dispensedCard.className = 'dispensed-card';

            }

            // Mostrar modal de confirmación
            function showConfirmationModal(itemData) {
                const nombre = itemData.name;
                const precio = itemData.precio;
                const imagen = itemData.imagen;
                
                confirmationItemName.textContent = nombre;
                confirmationItemDesc.textContent = `Precio: S/ ${parseFloat(precio).toFixed(2)}`;
                confirmationImage.innerHTML = '';
                
                if (imagen) {
                    const img = document.createElement('img');
                    img.src = imagen;
                    img.alt = nombre;showDispensedCard
                    img.onerror = function() {
                        this.style.display = 'none';
                        const icon = document.createElement('i');
                        icon.className = 'bi bi-gift';
                        confirmationImage.appendChild(icon);
                    };
                    confirmationImage.appendChild(img);
                } else {
                    const icon = document.createElement('i');
                    icon.className = 'bi bi-gift';
                    confirmationImage.appendChild(icon);
                }
                
                confirmationModal.show();
            }
            
            // Cerrar modal limpia los datos
            document.getElementById('confirmationModal').addEventListener('hidden.bs.modal', function() {
                // Limpiar tarjeta dispensada
                dispensedCardContainer.style.display = 'none';
                dispensedCardContainer.innerHTML = '';
                
                // Limpiar datos
                selectedItemId = null;
                selectedItemPrecio = null;
                selectedItemData = null;
                
                // Desactivar todas las tarjetas
                document.querySelectorAll('.item-card').forEach(c => c.classList.remove('active'));
            });
        });
    </script>
</body>
</html>