<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Punto de Venta - Tacos Nava</title>
    <style>
        /* Mismos estilos previos */
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .logo {
            text-align: center;
            margin-bottom: 20px;
        }

        .logo img {
            width: 150px;
        }

        .table-info {
            background-color: #e9ecef;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 1.1em;
            color: #333;
        }

        .section {
            margin-bottom: 20px;
        }

        .section h2 {
            font-size: 1.2em;
            margin-bottom: 10px;
            color: #555;
        }

        .button-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
        }

        .button {
            padding: 15px;
    background-color: #FF6600; /* Naranja */
    color: white;
    border: none;
    border-radius: 6px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
        }

        .button:hover {
            background-color: #E65C00; /* Naranja más oscuro para el hover */
        }

        .actions {
            text-align: center;
            margin-top: 20px;
        }

        button.submit {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
        }

        button.submit:hover {
            background-color: #0056b3;
        }

        .summary {
            margin-top: 20px;
            padding: 15px;
            background-color: #f4f4f4;
            border-radius: 6px;
        }

         /* Estilos para el footer */
         .footer {
            text-align: center;
            font-size: 0.9em;
            padding: 15px;
            background-color: #343a40; /* Gris oscuro */
            color: white;
            margin-top: auto; /* Para que se quede abajo */
        }

        /* Login Styles */
        #loginScreen {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4; /* Color de fondo original */
        }

        .header-banner { /* Nuevo estilo para la franja azul */
            background-color: #007bff; /* Azul */
            color: white;
            padding: 15px;
            text-align: center;
            font-family: 'Montserrat', sans-serif; /* Fuente Montserrat */
            margin-bottom: 20px; /* Espacio entre la franja y el login */
            width: 100%; /* Ocupar todo el ancho */
            position: absolute;  /* Posición absoluta */
            top: 0;             /* Arriba de todo */
            left: 0;
        }

        .login-box {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            position: relative; /* Para posicionar la franja correctamente */
            z-index: 1;         /* Asegurarse de que el login esté encima del fondo*/

        }

        .login-box input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        .login-box button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1em;
        }

        .login-box button:hover {
            background-color: #0056b3;
        }

        /* Estilos para el modal de cantidad */
#quantityModal { /* ... (estilos del modal de bebidas) ... */ }
#quantityModal .modal-content { /* ... (estilos del contenido del modal de bebidas) ... */ }
#quantityModal .quantity-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 botones por fila */
    gap: 10px;
}

#quantityModal .quantity-buttons button {
    padding: 10px;
    font-size: 1.2em;
    background-color: #FF6600; /* Naranja */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
}

#quantityModal .quantity-buttons button:hover {
    background-color: #E65C00;
}



    </style>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>


    <!-- Login Screen -->
    <div id="loginScreen" class="login-container">

        <div class="header-banner"> <!-- Franja azul -->
            INOVAT TECH GROUP POINT SALE
        </div>

        <div class="login-box">
            <h2>Bienvenido</h2>
            <input type="text" id="waiterName" placeholder="Ingrese su nombre" />
            <button onclick="startOrder()">Iniciar Pedido</button>
        </div>

    </div>

    <!-- Point of Sale (Initially hidden) -->
    <div id="pointOfSaleScreen" class="container" style="display: none;">
        <div class="logo">
            <img src="https://i.postimg.cc/zGDsZjt8/Photoroom-20250116-003411.png" alt="Tacos Nava Logo">
        </div>
        <h1>Punto de Venta - Tacos Nava</h1>

        <!-- Table Information -->
        <div class="table-info" id="tableInfo">

            &nbsp;   Mesero: <span id="waiterDisplay"></span> &nbsp; | &nbsp; &nbsp; 
            &nbsp;   Fecha: <span id="currentDate"></span> &nbsp; | &nbsp; &nbsp; 
            &nbsp;  Hora: <span id="currentTime"></span> &nbsp; | &nbsp; &nbsp;  

            &nbsp; &nbsp; &nbsp;Pedido : <input type="text" id="tableNumber" placeholder="Ingrese número de mesa" style="width: 50px; text-align: center;" /> 
            
        </div>



        <div id="quantityModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeQuantityModal()">&times;</span>
                <h2>Selecciona la cantidad</h2>
                <div class="quantity-buttons">
                    <button onclick="setQuantity(1)">1</button>
                    <button onclick="setQuantity(2)">2</button>
                    <button onclick="setQuantity(3)">3</button>
                    <button onclick="setQuantity(4)">4</button>
                    <button onclick="setQuantity(5)">5</button>
                    <button onclick="openMoreQuantities()">...</button>
        
                </div>
                 <div id="moreQuantities" class="quantity-buttons" style="display: none;">
                         <button onclick="setQuantity(6)">6</button>
                        <button onclick="setQuantity(7)">7</button>
                        <button onclick="setQuantity(8)">8</button>
                        <button onclick="setQuantity(9)">9</button>
                    </div>
            </div>
        </div>
        
        

       <!-- Tacos Section -->
       <div class="section">
        <h2>Tacos</h2>
        <div class="button-grid">
            <button class="button" onclick="openQuantityModal('Tacos Dorados de Papa', 5)">Dorados de Papa</button>
            <button class="button" onclick="openQuantityModal('Tacos Dorados de Sesos', 5)">Dorados de Sesos</button>
            <button class="button" onclick="openQuantityModal('Tacos Surtida', 22)">Surtida</button>
            <button class="button" onclick="openQuantityModal('Tacos Maciza', 22)">Maciza</button>
            <button class="button" onclick="openQuantityModal('Tacos Trompa', 22)">Trompa</button>
            <button class="button" onclick="openQuantityModal('Tacos Ojo', 22)">Ojo</button>
            <button class="button" onclick="openQuantityModal('Tacos Lengua', 25)">Lengua</button>
            <button class="button" onclick="openQuantityModal('Tacos Pecho', 22)">Pecho</button>
            <button class="button" onclick="openQuantityModal('Tacos Maciza Nava', 27)">Nava Maciza</button>
            <button class="button" onclick="openQuantityModal('Tacos Trompa Nava', 27)">Nava Trompa</button>
            <button class="button" onclick="openQuantityModal('Tacos Lengua Nava', 30)">Nava Lengua</button>
        </div>
    </div>


<!-- Bebidas Section -->
<div class="section">
    <h2>Bebidas</h2>
    <div class="button-grid">
        <button class="button" onclick="openQuantityModal('Aguas Frescas - Jamaica', 25, 'Aguas Frescas', 'Jamaica')">Agua Jamaica</button>
        <button class="button" onclick="openQuantityModal('Aguas Frescas - Tamarindo', 25, 'Aguas Frescas', 'Tamarindo')">Agua Tamarindo</button>
        <button class="button" onclick="openQuantityModal('Aguas Frescas - Limón', 25, 'Aguas Frescas', 'Limón')">Agua Limón</button>
        <button class="button" onclick="openQuantityModal('Refrescos - Coca-Cola', 25, 'Refrescos', 'Coca-Cola')">Coca-Cola</button>
        <button class="button" onclick="openQuantityModal('Refrescos - Yoli', 25, 'Refrescos', 'Yoli')">Yoli</button>
        <button class="button" onclick="openQuantityModal('Refrescos - Fanta', 25, 'Refrescos', 'Fanta')">Fanta</button>
        <button class="button" onclick="openQuantityModal('Refrescos - Sprite', 25, 'Refrescos', 'Sprite')">Sprite</button>
        <button class="button" onclick="openAddBeverageModal()">...</button>
    </div>
</div>

<!-- Modal for Adding New Beverages (Buttons to add to order) -->
<div id="addBeverageModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeAddBeverageModal()">&times;</span>
        <h2>Bebidas Adicionales</h2>
        <div class="button-grid">
            <button class="button" onclick="addBeverage('Licuados', 'Licuado de Fresa', 30)">Licuado de Fresa - $30</button>
            <button class="button" onclick="addBeverage('Licuados', 'Licuado de Mango', 30)">Licuado de Mango - $30</button>
            <button class="button" onclick="addBeverage('Café', 'Café Frío', 35)">Café Frío - $35</button>
            <button class="button" onclick="addBeverage('Café', 'Café Caliente', 35)">Café Caliente - $35</button>
            <button class="button" onclick="addBeverage('Aguas', 'Agua de Horchata', 25)">Agua de Horchata - $25</button>
            <button class="button" onclick="addBeverage('Aguas', 'Agua de Limonada', 25)">Agua de Limonada - $25</button>
        </div>
    </div>
</div>

<!-- Modal Styles -->
<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 300px;
        border-radius: 8px;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .button-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        margin-top: 10px;
    }

    .button {
        padding: 10px;
        font-size: 16px;
        background-color: #FF6600;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .button:hover {
        background-color: #E65C00;
    }
</style>

<script>
    // Function to open the modal for adding new beverages (buttons to add to order)
    function openAddBeverageModal() {
        document.getElementById('addBeverageModal').style.display = 'block';
    }

    // Function to close the modal
    function closeAddBeverageModal() {
        document.getElementById('addBeverageModal').style.display = 'none';
    }

    // Function to add the beverage to the order (or to a plate)
    function addBeverage(category, name, price) {
        // Add beverage to the order, you can customize this function to handle the order logic.
        console.log(`Agregado: ${name} - $${price}`);
        alert(`Bebida agregada: ${name} - $${price}`);
    }
    
    
    let currentOrderForTicket = []; // Variable para guardar el pedido actual

function generateSummary() {
    // ... (resto del código)

    if (plates.length > 0) {

// ... (resto del código)


let storedOrders = JSON.parse(localStorage.getItem('orders')) || [];

// Agregar el array 'plates' al array 'storedOrders':
const platesCopy = JSON.parse(JSON.stringify(plates));
storedOrders.push(platesCopy);


localStorage.setItem('orders', JSON.stringify(storedOrders));

// Disparar un evento personalizado
const newOrderEvent = new Event('newOrder');
window.dispatchEvent(newOrderEvent);

// ... (resto del código)

} else {
// ...
}
} 


    //Impresion de Ticket
    function printTicket() {
    // Usar la variable currentOrderForTicket, que almacena el pedido antes de que se borre plates.
    const orderToPrint = currentOrderForTicket;


    if (orderToPrint.length === 0) {  // Verificar si la copia del pedido está vacía
        alert("No hay artículos en el pedido.");
        return;
    }


    const tableNumber = document.getElementById('tableNumber').value || 'Sin asignar';
    const currentDate = new Date();
    const formattedDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;
    const formattedTime = `${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`;
    let totalAmount = 0;
    let ticketContent = `<h3>Tacos Nava - Ticket de Compra</h3>
                         <p>Mesero: ${waiterName}</p>
                         <p>Mesa: ${tableNumber}</p>
                         <p>Fecha: ${formattedDate}</p>
                         <p>Hora: ${formattedTime}</p>
                         <hr>
                         <table>
                         <tr><th>Artículo</th><th>Cantidad</th><th>Precio</th><th>Subtotal</th></tr>
                         `;


                         orderToPrint.forEach(plate => { // Usar orderToPrint aquí
        Object.entries(plate.items).forEach(([item, details]) => {
           const subtotal = details.quantity * details.price;
            ticketContent += `<tr><td>${item}</td><td>${details.quantity}</td><td>$${details.price}</td><td>$${subtotal}</td></tr>`;
            totalAmount += subtotal;

        });

    });

    ticketContent += `</table>
                      <hr>
                      <p><strong>Total: $${totalAmount}</strong></p>`;

    // Abrir una nueva ventana para el ticket
    const printWindow = window.open('', '_blank');
    printWindow.document.write('<html><head><title>Ticket</title></head><body>' + ticketContent + '</body></html>');
    printWindow.document.close();
    printWindow.print();


}




</script>


        <!-- Actions -->
        <div class="actions">
            <button class="submit" onclick="addDish()">Agregar Plato</button>
            <button class="submit" onclick="generateSummary()">Realizar Pedido</button>
            <button class="submit" onclick="window.location.href='cocina.html'">Ver Pedidos en Cocina</button>
            <button class="submit" onclick="printTicket()">Imprimir Ticket</button>

        </div>

        <!-- Order Summary -->
        <div id="orderSummary" class="summary" style="display: none;"></div>
        <!-- Platos -->
        <div id="dishList" class="summary" style="display: none;">
            <h3>Platos Agregados</h3>
            <ul id="plates"></ul>
        </div>
    </div>

    <div class="footer">
        <p>INOVAT TECH GROUP - Software Alx, Versión 1.0</p>
    </div>

    <script>
        let order = {};
        let waiterName = '';
        let plates = [];
        const prices = {
            'Tacos Suaves de Barbacoa': 22,
            'Tacos Dorados de Papa': 5,
            'Tacos Dorados de Sesos': 5,
            'Taco Nava (Combinación)': 22,
            'Aguas Frescas - Jamaica': 25,
            'Aguas Frescas - Tamarindo': 25,
            'Aguas Frescas - Limón': 25,
            'Refrescos - Coca-Cola': 25,
            'Refrescos - Yoli': 25,
            'Refrescos - Fanta': 25,
            'Refrescos - Sprite': 25

            
        };

        let selectedItem = '';  // Variable global para guardar el artículo seleccionado
let selectedPrice = 0; // Variable global para guardar el precio del artículo seleccionado
let selectedCategory = "";
let selectedType = "";


function openQuantityModal(item, price, category="", type="") {
    selectedItem = item;
    selectedPrice = price;
    selectedCategory = category;
    selectedType = type;

    document.getElementById('quantityModal').style.display = 'block';
}

function closeQuantityModal() {

    document.getElementById('quantityModal').style.display = 'none';
     document.getElementById('moreQuantities').style.display = 'none'; // Ocultar las cantidades adicionales

}



function openMoreQuantities()
{
    document.getElementById('moreQuantities').style.display = 'grid';


}




function setQuantity(quantity) {
 if(selectedCategory)
    {
            addBeverage(selectedCategory, selectedType, selectedPrice, quantity);

    }else{
        addItem(selectedItem, selectedPrice, quantity);

    }
    closeQuantityModal();
}



function addItem(item, price, quantity = 1) {
    let currentPlate = plates.length > 0 ? plates[plates.length - 1] : null;
    if (!currentPlate) {
        plates.push({
            dishNumber: plates.length + 1,
            mesa: document.getElementById('tableNumber').value || 'Sin asignar',
            items: {}
        });
        currentPlate = plates[plates.length - 1];
    }

    if (!currentPlate.items[item]) {
        currentPlate.items[item] = { quantity: 0, price: price };
    }
    currentPlate.items[item].quantity += quantity;
    displayPlates(); // Actualizar la vista de los platos
    selectedCategory = ""; // Limpiar la categoría seleccionada después de agregar un artículo
    selectedType = "";     // Limpiar el tipo seleccionado después de agregar un artículo

}

function addBeverage(category, type, price, quantity = 1) {
    const item = `${category} - ${type}`;
    let currentPlate = plates.length > 0 ? plates[plates.length - 1] : null;
    if (!currentPlate) {
        plates.push({
            dishNumber: plates.length + 1,
            mesa: document.getElementById('tableNumber').value || 'Sin asignar',
            items: {}
        });
        currentPlate = plates[plates.length - 1];
    }

    if (!currentPlate.items[item]) {
        currentPlate.items[item] = { quantity: 0, price: price };
    }
    currentPlate.items[item].quantity += quantity;
    displayPlates();  // Actualizar la vista de los platos
    selectedCategory = ""; // Limpiar la categoría seleccionada después de agregar una bebida
    selectedType = "";     // Limpiar el tipo seleccionado después de agregar una bebida
}








// ... (resto del código)






function startOrder() {
    console.log("startOrder se ha ejecutado")
    waiterName = document.getElementById('waiterName').value;
    if (waiterName) {
        document.getElementById('loginScreen').style.display = 'none';
        document.getElementById('pointOfSaleScreen').style.display = 'block';
        document.getElementById('waiterDisplay').textContent = waiterName;
        updateDateTime();

        //ELIMINAR ESTA LÍNEA: let plates = [];  <-- Eliminar esta línea.  Ya está declarada globalmente.
        plates.push({ dishNumber: 1, mesa: document.getElementById('tableNumber').value || 'Sin asignar', items: {} }); // Crear el primer plato al iniciar el pedido
                    displayPlates(); // Mostrar la vista de los platos

        alert(`Bienvenido, ${waiterName}`);
    } else {
        alert('Por favor, ingrese su nombre.');
    }
}

        function updateDateTime() {
            const currentDate = new Date();
            const formattedDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;
            const formattedTime = `${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`;
            document.getElementById('currentDate').textContent = formattedDate;
            document.getElementById('currentTime').textContent = formattedTime;
        }



        function addItem(item, price, quantity = 1) {
    let currentPlate = plates.length > 0 ? plates[plates.length - 1] : null;

    // Si no hay un plato actual, crea uno nuevo
    if (!currentPlate) {
        plates.push({ dishNumber: plates.length + 1, mesa: document.getElementById('tableNumber').value || 'Sin asignar', items: {} });
        currentPlate = plates[plates.length - 1];
    }

    // Agregar el artículo al plato actual
    if (!currentPlate.items[item]) {
        currentPlate.items[item] = { quantity: 0, price: price };
    }
    currentPlate.items[item].quantity += quantity;

    displayPlates(); // Actualiza la vista de los platos
    selectedCategory = ""; // Limpiar para evitar comportamiento inesperado
    selectedType = "";

}








function addBeverage(category, type, price, quantity = 1) {
    const item = `${category} - ${type}`;
    let currentPlate = plates.length > 0 ? plates[plates.length - 1] : null;

    // Si no hay un plato actual, crea uno nuevo
    if (!currentPlate) {
        plates.push({ dishNumber: plates.length + 1, mesa: document.getElementById('tableNumber').value || 'Sin asignar', items: {} });
        currentPlate = plates[plates.length - 1];
    }


    if (!currentPlate.items[item]) {
        currentPlate.items[item] = { quantity: 0, price: price };
    }
    currentPlate.items[item].quantity += quantity;
    displayPlates();
    selectedCategory = ""; // Limpiar para evitar comportamiento inesperado
    selectedType = "";

}
        function addDish() {
    let currentPlate = plates.length > 0 ? plates[plates.length - 1] : null;

    // Verificar si hay un plato actual Y si tiene artículos
    if (currentPlate && Object.keys(currentPlate.items).length > 0) {
        displayPlates();
        // Agregar un nuevo plato vacío para el siguiente conjunto de artículos
        plates.push({ dishNumber: plates.length + 1, mesa: document.getElementById('tableNumber').value || 'Sin asignar', items: {} });
    } else {
        alert("No se han añadido productos al plato actual.");
    }
}



        function resetOrder() {
            order = {};
        }





        function displayPlates() {
            const plateList = document.getElementById('plates');
            plateList.innerHTML = '';

        if (plates.length > 0)
        {
            plates.forEach(plate => {
                let plateInfo = `<li>Plato ${plate.dishNumber}: <ul>`;
                Object.entries(plate.items).forEach(([item, details]) => {
                    plateInfo += `<li>${item}: ${details.quantity} x $${details.price} = $${details.quantity * details.price}</li>`;
                });
                plateInfo += `</ul></li>`;
                plateList.innerHTML += plateInfo;
            });

             document.getElementById('dishList').style.display = 'block';

        }else{
            plateList.innerHTML = 'No hay platos agregados';


        }

        }

       // For index.html (inside the <script> tag)

function generateSummary() {
    console.log("Platos antes de guardar:", plates);
    const summary = document.getElementById('orderSummary');
    const tableNumber = document.getElementById('tableNumber').value || 'Sin asignar';
    const currentDate = new Date();
    const formattedDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;
    const formattedTime = `${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`;
    let totalAmount = 0;
    let orderDetails = '';


    if (plates.length > 0) {
        summary.style.display = 'block';

       // 1. Retrieve existing orders or initialize an empty array
       let storedOrders = JSON.parse(localStorage.getItem('orders')) || [];

// Asegúrate de que 'plates' se guarde como un array, incluso si solo hay un plato:
let platesCopy = JSON.parse(JSON.stringify(plates)); // Copia profunda
        storedOrders.push(platesCopy);  // Agregar la copia al array de pedidos


// 4. Save the updated orders array back to localStorage
localStorage.setItem('orders', JSON.stringify(storedOrders));

        summary.innerHTML = `<h3>Pedido en Curso</h3>
            <p>Mesero: ${waiterName}</p>
            <p>Fecha: ${formattedDate}</p>
            <p>Hora: ${formattedTime}</p>
            <p>Mesa: ${tableNumber}</p>
            <ul>`;

        plates.forEach(plate => {
            summary.innerHTML += `<li>Plato ${plate.dishNumber}: <ul>`;
            Object.entries(plate.items).forEach(([item, details]) => {
                summary.innerHTML += `<li>${item}: ${details.quantity} x $${details.price} = $${details.quantity * details.price}</li>`;
                orderDetails += `${item}: ${details.quantity} x $${details.price} = $${details.quantity * details.price}<br>`;
                totalAmount += details.quantity * details.price;
            });
            summary.innerHTML += `</ul></li>`;
        });

        summary.innerHTML += `</ul><p><strong>Total: $${totalAmount}</strong></p>`; // Show the order summary as before
        plates = []; // Clear plates after submitting

    } else {
        summary.innerHTML = 'No se ha añadido ningún producto.';
    }
}


// For cocina.html (no changes needed, but providing for completeness)

// ... (Your existing cocina.html code) ...

    </script>
</body>
</html>