<?php
// Conectar a la base de datos
include 'conexion.php';

// Obtener todos los productos activos
$sql = "SELECT * FROM productos ORDER BY nombre_producto ASC";
$resultado = $conexion->query($sql);
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panadería Kiarilu | Chota - Cajamarca</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        pan: {
                            marron: '#8B4513',
                            claro: '#D2B48C',
                            crema: '#FFF8E1',
                            oscuro: '#5C2E0E'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            }
            .border-dorado {
                border: 3px solid #D2B48C;
            }
        }
    </style>
    <link rel="stylesheet" href="estilos.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body class="bg-pan-crema font-sans text-pan-oscuro fondo-patron">

    <!-- ✅ MENÚ -->
    <header class="bg-gradient-to-r from-pan-marron to-pan-oscuro text-white py-6 px-4 md:px-8 shadow-lg sticky top-0 z-50">
        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center mb-4 md:mb-0">
                <div class="w-20 h-20 rounded-full bg-white flex items-center justify-center mr-4 border-dorado overflow-hidden">
                    <img src="kiarilu.png" alt="Kiarilu" class="w-full h-full object-contain">
                </div>
                <div>
                    <h1 class="text-[clamp(1.8rem,4vw,3rem)] font-serif font-bold text-shadow">Panadería Kiarilu</h1>
                    <p class="text-pan-claro italic">Hecho con amor y tradición • Chota - Cajamarca</p>
                </div>
            </div>
            <nav>
                <ul class="flex space-x-6 text-lg">
                    <li><a href="#" onclick="mostrarSeccion('inicio')" id="menu_inicio" class="hover:text-pan-claro transition-colors font-bold">Inicio</a></li>
                    <li><a href="#" onclick="mostrarSeccion('productos')" id="menu_productos" class="hover:text-pan-claro transition-colors">Productos</a></li>
                    <li><a href="#" onclick="mostrarSeccion('nosotros')" id="menu_nosotros" class="hover:text-pan-claro transition-colors">Nosotros</a></li>
                    <li><a href="#" onclick="mostrarSeccion('pedido')" id="menu_pedido" class="hover:text-pan-claro transition-colors">Pedido</a></li>
                    <li><a href="#" onclick="mostrarSeccion('sugerencias')" id="menu_sugerencias" class="hover:text-pan-claro transition-colors">Sugerencias</a></li>
                    <li><a href="login.php" class="text-yellow-300 hover:text-yellow-100 transition-colors font-bold">🔑 Admin</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- ✅ SECCIÓN DE INICIO -->
    <section id="seccion_inicio" class="py-16 px-4 bg-[url('https://images.unsplash.com/photo-1585477369594-6276c9432e4f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80')] bg-cover bg-center bg-no-repeat relative min-h-[85vh] flex items-center">
        <div class="absolute inset-0 bg-black/40"></div>
        <div class="container mx-auto text-center relative z-10 text-white">
            <h2 class="text-[clamp(2.5rem,6vw,5rem)] font-serif font-extrabold mb-2 text-shadow text-pan-claro">Bienvenidos</h2>
            <h3 class="text-[clamp(2rem,5vw,4rem)] font-serif font-bold mb-4 text-shadow">El sabor de nuestra tierra</h3>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">Pan fresco, dulces tradicionales y recetas que pasan de generación en generación, directo desde Chota hasta tu mesa.</p>
        </div>
    </section>

    <!-- ✅ SECCIÓN DE PRODUCTOS (AHORA SE CARGA DE LA BASE DE DATOS) -->
    <section id="seccion_productos" class="py-16 px-4" style="display: none;">
        <div class="container mx-auto">
            <h2 class="text-[clamp(2.2rem,5vw,3.5rem)] font-serif font-extrabold text-center text-pan-marron mb-6 leading-tight tracking-wide">
                Nuestros Productos
            </h2>

            <!-- 💡 ACLARACIÓN IMPORTANTE -->
            <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-10 rounded-lg max-w-3xl mx-auto">
                <p class="font-bold text-yellow-80 text-center text-lg">⚠️ ¿Cómo pedir?</p>
                <p class="text-yellow-800 text-center">- Productos normales: Pones cuántas <strong>UNIDADES</strong> quieres.</p>
                <p class="text-yellow-800 text-center">- <span class="font-bold text-red-600">Turcas, Panecitos y similares</span>: Pones cuántos <strong>SOLES</strong> quieres (Ej: 2 soles = 6 unidades)</p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8"> 

                <?php
                // RECORREMOS TODOS LOS PRODUCTOS QUE HAY EN LA BASE
                while ($producto = $resultado->fetch_assoc()):
                    // Si es tipo SOLES, ponemos el fondo amarillo como tenías
                    $clase_especial = ($producto['tipo_cantidad'] == 'soles') ? 'bg-yellow-50/80 border-2 border-yellow-400' : 'bg-white/95';
                ?>

                <!-- TARJETA DEL PRODUCTO -->
                <div class="<?= $clase_especial ?> rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
                    <img src="<?= $producto['imagen'] ?>" class="w-full h-48 object-cover" alt="<?= $producto['nombre_producto'] ?>">
                    <div class="p-4">
                        <h3 class="font-serif font-black text-lg mb-2 text-pan-marron">
                            <?= $producto['nombre_producto'] ?>
                            <?php if($producto['tipo_cantidad'] == 'soles'): ?>
                                <span class="text-red-600 text-sm font-normal">(3x1)</span>
                            <?php endif; ?>
                        </h3>
                        <p class="text-gray-700 mb-3 text-sm leading-snug"><?= $producto['descripcion'] ?></p>
                        <span class="font-bold text-pan-marron text-lg">
                            S/ <?= number_format($producto['precio_unitario'], 2) ?>
                            <span class="text-sm font-normal">
                                (<?= $producto['tipo_cantidad'] == 'soles' ? '3 unidades' : 'Unidad' ?>)
                            </span>
                        </span>
                        
                        <div class="mt-4 flex items-center gap-2">
                            <input type="number" min="1" value="1" id="prod_<?= $producto['id_producto'] ?>" class="w-16 text-center border rounded p-2 <?= $producto['tipo_cantidad'] == 'soles' ? 'border-yellow-500' : '' ?>">
                            <button onclick="agregarAlCarrito('<?= addslashes($producto['nombre_producto']) ?>', <?= $producto['precio_unitario'] ?>, '<?= $producto['tipo_cantidad'] ?>', 'prod_<?= $producto['id_producto'] ?>')" class="bg-pan-marron hover:bg-pan-oscuro text-white text-sm px-3 py-2 rounded flex-1 transition-colors">
                                <i class="fa fa-cart-plus mr-1"></i> Agregar
                            </button>
                        </div>
                    </div>
                </div>

                <?php endwhile; ?>

            </div>

            <!-- 🛒 RESUMEN DEL CARRITO -->
            <div id="carrito_resumen" class="mt-16 bg-white/90 p-6 rounded-xl shadow-lg max-w-3xl mx-auto hidden">
                <h3 class="text-2xl font-serif font-bold text-pan-marron mb-4 flex items-center"><i class="fa fa-shopping-cart mr-2"></i> Tu Pedido</h3>
                <div id="lista_carrito" class="space-y-2 mb-4"></div>
                <div class="text-xl font-bold text-right text-pan-marron">
                    Total: S/ <span id="total_pedido">0.00</span>
                </div>
                <div class="text-center mt-6">
                    <button onclick="irAPedido()" class="bg-green-700 hover:bg-green-800 text-white font-semibold py-3 px-8 rounded-full transition-all transform hover:scale-105 shadow-md">
                        Ir a enviar pedido
                    </button>
                </div>
            </div>

        </div>
    </section>

    <!-- ✅ SECCIÓN NOSOTROS -->
    <section id="seccion_nosotros" class="py-16 px-4" style="display: none;">
        <div class="container mx-auto flex flex-col md:flex-row items-center gap-10 bg-white/80 p-8 rounded-2xl shadow-lg">
            <div class="md:w-1/2">
                <img src="logo-kiarilu.png" alt="Nuestra panadería" class="rounded-xl shadow-lg w-full h-auto">
            </div>
            <div class="md:w-1/2">
                <h2 class="text-[clamp(1.8rem,3vw,2.8rem)] font-serif font-bold text-pan-marron mb-4">Sobre Nosotros</h2>
                <p class="text-lg mb-4">En <strong>Panadería Kiarilu</strong>, ubicada en el corazón de Chota, Cajamarca, llevamos más de 30 años deleitando a nuestra gente con el sabor auténtico de nuestra tierra. Nuestra historia comenzó hace décadas, gracias al esfuerzo, la dedicación y el saber hacer de nuestros padres, quienes nos enseñaron que el pan se hace con las manos, pero se amasa con el corazón.</p>
                <p class="text-lg mb-4">Hoy,<strong>Nely Cuzma</strong>, continúa con orgullo este hermoso legado, manteniendo viva cada receta, cada técnica y cada secreto transmitido de generación en generación. Para nosotros, el pan no es solo alimento: es parte de nuestra identidad, de nuestra cultura y del centro de todas las reuniones familiares y momentos especiales.</p>
                <ul class="space-y-2 mt-6">
                    <li class="flex items-center"><i class="fa fa-check-circle text-pan-marron mr-2"></i> Ingredientes 100% naturales</li>
                    <li class="flex items-center"><i class="fa fa-check-circle text-pan-marron mr-2"></i> Horneado diario</li>
                    <li class="flex items-center"><i class="fa fa-check-circle text-pan-marron mr-2"></i> Recetas heredadas</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- ✅ SECCIÓN PEDIDO -->
    <section id="seccion_pedido" class="py-16 px-4" style="display: none;">
        <div class="container mx-auto max-w-4xl">
            <h2 class="text-[clamp(1.8rem,3vw,2.8rem)] font-serif font-bold text-center text-pan-marron mb-12">Finalizar Pedido</h2>
            
            <form id="formularioPedido" class="bg-white/90 p-8 rounded-xl shadow-lg">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <!-- Nombre -->
                    <div>
                        <label for="nombre" class="block font-medium mb-2">Nombre completo *</label>
                        <input type="text" id="nombre" name="nombre" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="Tu nombre y apellido">
                        <span class="error text-red-600 text-sm mt-1 hidden" id="errorNombre"></span>
                    </div>
                    <!-- Teléfono -->
                    <div>
                        <label for="telefono" class="block font-medium mb-2">Teléfono / Celular *</label>
                        <input type="tel" id="telefono" name="telefono" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="987654321">
                        <span class="error text-red-600 text-sm mt-1 hidden" id="errorTelefono"></span>
                    </div>
                    <!-- Correo -->
                    <div>
                        <label for="email" class="block font-medium mb-2">Correo electrónico</label>
                        <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="tucorreo@ejemplo.com">
                        <span class="error text-red-600 text-sm mt-1 hidden" id="errorEmail"></span>
                    </div>
                </div>

                <!-- 📋 RESUMEN DE LO QUE ELIGIÓ -->
                <div class="mb-8 p-4 bg-pan-crema/50 rounded-lg border border-pan-marron/20">
                    <h3 class="font-bold text-lg text-pan-marron mb-3">Tu lista de pedido:</h3>
                    <div id="resumen_pedido_texto" class="space-y-1 text-gray-800"></div>
                </div>

                <!-- Mensaje / Detalle -->
                <div class="mb-6">
                    <label for="mensaje" class="block font-medium mb-2">Referencia o indicaciones adicionales</label>
                    <textarea id="mensaje" name="mensaje" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="Ej: Dirección de entrega, si es para llevar, o algún comentario..."></textarea>
                </div>
                
                <!-- Aceptación -->
                <div class="mb-6">
                    <label class="flex items-center gap-2">
                        <input type="checkbox" id="terminos" name="terminos" class="w-4 h-4 text-pan-marron">
                        <span>Acepto ser contactado para confirmar mi pedido *</span>
                    </label>
                    <span class="error text-red-600 text-sm mt-1 hidden" id="errorTerminos"></span>
                </div>
                
                <!-- Botón -->
                <div class="text-center">
                    <button type="submit" class="bg-pan-marron hover:bg-pan-oscuro text-white font-semibold py-3 px-10 rounded-full transition-all transform hover:scale-105 shadow-md">Enviar Pedido</button>
                </div>
            </form>
        </div>
    </section>

    <!-- ✅ SECCIÓN SUGERENCIAS -->
    <section id="seccion_sugerencias" class="py-16 px-4" style="display: none;">
        <div class="container mx-auto max-w-2xl">
            <h2 class="text-[clamp(1.8rem,3vw,2.8rem)] font-serif font-bold text-center text-pan-marron mb-6">Tus Sugerencias</h2>
            <p class="text-center text-lg mb-8">Queremos mejorar cada día. Cuéntanos qué te parece nuestros productos y servicio.</p>
            
            <form class="bg-white/90 p-8 rounded-xl shadow-lg">
                <!-- Nombre -->
                <div class="mb-4">
                    <label for="sug_nombre" class="block font-medium mb-2">Nombre completo</label>
                    <input type="text" id="sug_nombre" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="Tu nombre aquí">
                </div>
                <!-- Correo -->
                <div class="mb-4">
                    <label for="sug_correo" class="block font-medium mb-2">Correo electrónico</label>
                    <input type="email" id="sug_correo" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="tucorreo@ejemplo.com">
                </div>
                <!-- Mensaje -->
                <div class="mb-6">
                    <label for="sug_mensaje" class="block font-medium mb-2">Tu mensaje / Sugerencia</label>
                    <textarea id="sug_mensaje" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="Escribe aquí tus comentarios, sugerencias o lo que quieras decirnos..."></textarea>
                </div>
                <!-- Botón Enviar -->
                <div class="text-center">
                    <button type="submit" class="bg-pan-marron hover:bg-pan-oscuro text-white font-semibold py-3 px-10 rounded-full transition-all transform hover:scale-105 shadow-md">Enviar</button>
                </div>
            </form>
        </div>
    </section>

    <!-- ✅ PIE DE PÁGINA -->
    <footer class="bg-pan-oscuro/95 text-white py-10 px-4 relative z-10">
        <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
                <div class="flex items-center mb-3">
                    <img src="kiarilu.png" alt="Logo" class="w-25 h-20 mr-8 rounded-full bg-white p-1">
                    <h3 class="font-serif font-bold text-xl">Panadería Kiarilu</h3>
                </div>
                <p class="text-pan-claro">Hecho con amor y tradición desde Chota, Cajamarca.</p>
            </div>
            <div>
                <h4 class="font-semibold text-lg mb-3">Contacto</h4>
                <ul class="space-y-2 text-pan-claro">
                    <li><i class="fa fa-map-marker mr-2"></i> Chota, Cajamarca - Perú</li>
                    <li><i class="fa fa-phone mr-2"></i> +51 968 261 727 </li>
                    <li><i class="fa fa-envelope mr-2"></i> contacto@kiarilu.pe</li>
                </ul>
            </div>
            <div>
                <h4 class="font-semibold text-lg mb-3">Horario de Atención</h4>
                <ul class="space-y-2 text-pan-claro">
                    <li><i class="fa fa-clock-o mr-2"></i> Lunes a Sábado: 7:00 AM - 6:00 PM</li>
                    <li><i class="fa fa-clock-o mr-2"></i> Domingo: 7:00 AM - 7:00 PM</li>
                </ul>
            </div>
        </div>
        <div class="container mx-auto text-center pt-8 mt-8 border-t border-pan-marron/50 text-pan-claro text-sm">
            <p>© 2026 Panadería Kiarilu - Todos los derechos reservados</p>
        </div>
    </footer>
         <!-- ✅ JAVASCRIPT DEL CARRITO CON FLOTANTE Y VALIDACIÓN DE DATOS -->
    <script>
        let carrito = [];

        function mostrarSeccion(seccionId) {
            // Ocultar todas las secciones
            document.querySelectorAll('section').forEach(sec => sec.style.display = 'none');
            // Quitar clase activa del menú
            document.querySelectorAll('nav a').forEach(link => link.classList.remove('font-bold', 'text-pan-claro'));
            
            // Mostrar la sección actual
            document.getElementById('seccion_' + seccionId).style.display = 'block';
            // Marcar menú activo
            document.getElementById('menu_' + seccionId).classList.add('font-bold', 'text-pan-claro');

            // Si es sección productos, mostrar resumen si hay cosas
            if(seccionId === 'productos') {
                actualizarCarritoVista();
            }
        }

        function agregarAlCarrito(nombre, precio, tipo, inputId) {
            const cantidad = parseInt(document.getElementById(inputId).value);
            
            if(cantidad <= 0) return;

            // Verificar si ya existe
            const existe = carrito.find(item => item.nombre === nombre);
            if(existe){
                existe.cantidad += cantidad;
            } else {
                carrito.push({ nombre, precio, cantidad, tipo });
            }

            actualizarCarritoVista();
            
            // Mensaje de confirmación
            const Toast = document.createElement('div');
            Toast.className = "fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-lg z-50 transition-all";
            Toast.innerHTML = `<i class="fa fa-check-circle mr-2"></i> ${cantidad} ${tipo == 'soles' ? 'sol(es) de' : 'unid. de'} ${nombre} agregado`;
            document.body.appendChild(Toast);
            setTimeout(() => Toast.remove(), 3000);
        }

        function actualizarCarritoVista() {
            const lista = document.getElementById('lista_carrito');
            const resumenTexto = document.getElementById('resumen_pedido_texto');
            const totalEl = document.getElementById('total_pedido');
            const carritoEl = document.getElementById('carrito_resumen');
            const contadorFlotante = document.getElementById('contador_flotante');
            const carritoFlotante = document.getElementById('carrito_flotante');
            
            lista.innerHTML = '';
            resumenTexto.innerHTML = '';
            let total = 0;
            let totalArticulos = 0;

            if(carrito.length > 0) {
                carritoEl.classList.remove('hidden');
                carritoFlotante.classList.remove('hidden');
                
                carrito.forEach((item, index) => {
                    const subtotal = item.precio * item.cantidad;
                    total += subtotal;
                    totalArticulos += item.cantidad;

                    // Vista en productos
                    const li = document.createElement('div');
                    li.className = "flex justify-between items-center border-b border-pan-claro/30 py-2";
                    li.innerHTML = `
                        <div>
                            <span class="font-semibold">${item.nombre}</span>
                            <span class="text-sm text-gray-600 ml-2">(${item.cantidad} ${item.tipo == 'soles' ? 'sol(es)' : 'unid.'})</span>
                            ${item.tipo == 'soles' ? `<span class="text-xs text-red-600"> → ${item.cantidad * 3} unidades</span>` : ''}
                        </div>
                        <div class="flex items-center gap-3">
                            <span>S/ ${subtotal.toFixed(2)}</span>
                            <button onclick="quitarDelCarrito(${index})" class="text-red-500 hover:text-red-700"><i class="fa fa-trash"></i></button>
                        </div>
                    `;
                    lista.appendChild(li);

                    // Vista en formulario de pedido
                    const p = document.createElement('p');
                    p.innerHTML = `<strong>- ${item.nombre}:</strong> ${item.cantidad} ${item.tipo == 'soles' ? 'sol(es) <span class="text-red-600">(equivale a '+ (item.cantidad*3) +' unid.)</span>' : 'unidades'} <span class="float-right">S/ ${subtotal.toFixed(2)}</span>`;
                    resumenTexto.appendChild(p);
                });

                contadorFlotante.innerText = totalArticulos;
                totalEl.innerText = total.toFixed(2);
                
                // Agregar total al resumen
                const totalP = document.createElement('p');
                totalP.className = "font-bold text-lg mt-2 pt-2 border-t border-pan-marron/20";
                totalP.innerHTML = `Total a pagar: <span class="float-right">S/ ${total.toFixed(2)}</span>`;
                resumenTexto.appendChild(totalP);

            } else {
                carritoEl.classList.add('hidden');
                carritoFlotante.classList.add('hidden');
                contadorFlotante.innerText = '0';
            }
        }

        function quitarDelCarrito(index) {
            carrito.splice(index, 1);
            actualizarCarritoVista();
        }

        function irAPedido() {
            mostrarSeccion('pedido');
        }

        // ✅ VALIDACIÓN DE FORMULARIO
        document.getElementById('formularioPedido').addEventListener('submit', function(e) {
            e.preventDefault();
            let esValido = true;
            document.querySelectorAll('.error').forEach(el => el.classList.add('hidden'));

            const nombre = document.getElementById('nombre').value.trim();
            if(nombre === '') {
                document.getElementById('errorNombre').textContent = 'El nombre es obligatorio.';
                document.getElementById('errorNombre').classList.remove('hidden');
                esValido = false;
            } else if(nombre.length < 3) {
                document.getElementById('errorNombre').textContent = 'El nombre debe tener al menos 3 caracteres.';
                document.getElementById('errorNombre').classList.remove('hidden');
                esValido = false;
            }

            const telefono = document.getElementById('telefono').value.trim();
            const regexTel = /^[0-9]{9}$/;
            if(telefono === '') {
                document.getElementById('errorTelefono').textContent = 'El teléfono es obligatorio.';
                document.getElementById('errorTelefono').classList.remove('hidden');
                esValido = false;
            } else if(!regexTel.test(telefono)) {
                document.getElementById('errorTelefono').textContent = 'Ingresa un número válido de 9 dígitos.';
                document.getElementById('errorTelefono').classList.remove('hidden');
                esValido = false;
            }

            const email = document.getElementById('email').value.trim();
            const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if(email !== '' && !regexEmail.test(email)) {
                document.getElementById('errorEmail').textContent = 'El correo electrónico no es válido.';
                document.getElementById('errorEmail').classList.remove('hidden');
                esValido = false;
            }

            const mensaje = document.getElementById('mensaje').value.trim();
            if(mensaje === '') {
                document.getElementById('errorMensaje').textContent = 'Escribe un mensaje o detalle de tu pedido.';
                document.getElementById('errorMensaje').classList.remove('hidden');
                esValido = false;
            }

            const terminos = document.getElementById('terminos').checked;
            if(!terminos) {
                document.getElementById('errorTerminos').textContent = 'Debes aceptar ser contactado.';
                document.getElementById('errorTerminos').classList.remove('hidden');
                esValido = false;
            }

            if(esValido) {
                alert('✅ ¡Formulario enviado correctamente! Gracias por elegir Panadería Kiarilu. Nos pondremos en contacto contigo pronto.');
                this.reset();
                carrito = [];
                actualizarCarritoVista();
                mostrarSeccion('inicio');
            }
        });
    </script>

    <!-- ✅ CÓDIGO DEL BOTÓN FLOTANTE -->
    <div id="carrito_flotante" class="fixed bottom-6 right-6 z-50 hidden">
        <button onclick="irAPedido()" class="relative bg-pan-marron hover:bg-pan-oscuro text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all transform hover:scale-110">
            <i class="fa fa-shopping-cart text-2xl"></i>
            <span id="contador_flotante" class="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center">0</span>
        </button>
    </div>

</body>
</html>