diff --git a/cita.html b/cita.html
new file mode 100644
index 0000000..99ea6f0
--- /dev/null
+++ b/cita.html
@@ -0,0 +1,216 @@
+<!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>Agendar Cita - IntegraRepara</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        body { background-color: #f8fafc; }
+        .fade-in { animation: fadeIn 0.4s ease-out forwards; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+        .slot-btn.selected { background-color: #2563eb; color: white; border-color: #2563eb; }
+    </style>
+</head>
+<body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center">
+
+    <div id="loader" class="fixed inset-0 bg-slate-50 z-50 flex flex-col items-center justify-center">
+        <div class="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div>
+        <p class="text-sm font-bold text-slate-500 animate-pulse">Buscando rutas de tu técnico...</p>
+    </div>
+
+    <main id="mainContent" class="hidden w-full max-w-md mx-auto min-h-screen flex flex-col relative pb-10">
+        
+        <header class="bg-white p-6 pt-10 border-b border-slate-200 sticky top-0 z-10 shrink-0">
+            <button onclick="window.history.back()" class="text-slate-400 hover:text-slate-800 mb-4 transition-colors">
+                <i data-lucide="arrow-left" class="w-6 h-6"></i>
+            </button>
+            <h1 class="text-2xl font-black tracking-tight leading-none text-slate-800">¿Cuándo te viene mejor?</h1>
+            <p class="text-sm text-slate-500 font-medium mt-2">Selecciona tu preferencia y te mostraremos los horarios en los que el técnico estará por tu zona.</p>
+        </header>
+
+        <div class="p-6 flex-1 flex flex-col gap-6 fade-in">
+            
+            <div id="step1">
+                <div class="grid grid-cols-2 gap-4">
+                    <button onclick="selectPreference('morning')" id="btnMorning" class="bg-white border-2 border-slate-200 p-6 rounded-3xl flex flex-col items-center gap-3 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-600">
+                        <i data-lucide="sun" class="w-10 h-10 text-amber-500"></i>
+                        <span class="font-black uppercase text-sm">Mañanas</span>
+                    </button>
+                    <button onclick="selectPreference('afternoon')" id="btnAfternoon" class="bg-white border-2 border-slate-200 p-6 rounded-3xl flex flex-col items-center gap-3 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-600">
+                        <i data-lucide="sunset" class="w-10 h-10 text-orange-500"></i>
+                        <span class="font-black uppercase text-sm">Tardes</span>
+                    </button>
+                </div>
+            </div>
+
+            <div id="step2" class="hidden space-y-6 fade-in">
+                <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs">1. Elige un día disponible</h3>
+                <select id="daySelect" onchange="renderSlots()" class="w-full bg-white border-2 border-slate-200 p-4 rounded-2xl font-bold text-slate-700 outline-none focus:border-blue-500">
+                    <option value="">Selecciona un día...</option>
+                </select>
+
+                <div id="hoursContainer" class="hidden space-y-4 fade-in">
+                    <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs">2. Elige la hora aproximada</h3>
+                    <div id="slotsGrid" class="grid grid-cols-3 gap-3">
+                        </div>
+                </div>
+            </div>
+
+            <div class="mt-auto pt-6">
+                <button id="btnConfirm" onclick="confirmBooking()" class="w-full bg-blue-600 text-white font-black py-4 rounded-2xl shadow-lg opacity-50 pointer-events-none transition-all flex justify-center items-center gap-2 uppercase tracking-widest text-xs">
+                    Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>
+                </button>
+            </div>
+
+        </div>
+    </main>
+
+    <div id="successScreen" class="hidden w-full max-w-md mx-auto p-6 flex flex-col items-center justify-center min-h-screen text-center fade-in bg-emerald-500 text-white">
+        <div class="w-24 h-24 bg-white text-emerald-500 rounded-full flex items-center justify-center mb-6 shadow-2xl">
+            <i data-lucide="check" class="w-12 h-12"></i>
+        </div>
+        <h2 class="text-3xl font-black mb-2">¡Cita Confirmada!</h2>
+        <p class="font-medium opacity-90 mb-8">El técnico ha sido notificado y se pasará por tu domicilio el día y hora acordados.</p>
+        <button onclick="window.history.back()" class="bg-slate-900 text-white font-black py-3 px-8 rounded-xl shadow-lg uppercase text-xs tracking-widest">
+            Volver al Resumen
+        </button>
+    </div>
+
+    <script>
+        const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
+            ? 'http://localhost:3000' : 'https://integrarepara-api.integrarepara.es';
+
+        let agendaData = [];
+        let currentPreference = null;
+        let selectedDate = null;
+        let selectedTime = null;
+
+        document.addEventListener("DOMContentLoaded", async () => {
+            lucide.createIcons();
+            const urlParams = new URLSearchParams(window.location.search);
+            const token = urlParams.get('token');
+            const serviceId = urlParams.get('service');
+
+            if (!token || !serviceId) {
+                alert("Enlace inválido"); return;
+            }
+
+            try {
+                // Pedir la disponibilidad inteligente al servidor
+                const res = await fetch(`${API_URL}/public/portal/${token}/slots?serviceId=${serviceId}`);
+                const data = await res.json();
+                
+                if (data.ok) {
+                    agendaData = data.days;
+                    document.getElementById('loader').classList.add('hidden');
+                    document.getElementById('mainContent').classList.remove('hidden');
+                } else {
+                    alert(data.error || "No se han podido cargar los horarios");
+                }
+            } catch (e) { alert("Error de conexión"); }
+        });
+
+        function selectPreference(pref) {
+            currentPreference = pref;
+            selectedTime = null;
+            updateConfirmButton();
+
+            // UI feedback
+            document.getElementById('btnMorning').classList.remove('border-blue-500', 'bg-blue-50');
+            document.getElementById('btnAfternoon').classList.remove('border-blue-500', 'bg-blue-50');
+            
+            if (pref === 'morning') document.getElementById('btnMorning').classList.add('border-blue-500', 'bg-blue-50');
+            if (pref === 'afternoon') document.getElementById('btnAfternoon').classList.add('border-blue-500', 'bg-blue-50');
+
+            document.getElementById('step2').classList.remove('hidden');
+            
+            // Llenar el selector de días solo con los días que tengan huecos en esa preferencia
+            const select = document.getElementById('daySelect');
+            select.innerHTML = '<option value="">Selecciona un día...</option>';
+            
+            agendaData.forEach(day => {
+                const hasSlots = pref === 'morning' ? day.morning.length > 0 : day.afternoon.length > 0;
+                if (hasSlots) {
+                    select.innerHTML += `<option value="${day.date}" class="uppercase">${day.displayDate}</option>`;
+                }
+            });
+
+            document.getElementById('hoursContainer').classList.add('hidden');
+        }
+
+        function renderSlots() {
+            selectedDate = document.getElementById('daySelect').value;
+            selectedTime = null;
+            updateConfirmButton();
+
+            if (!selectedDate) {
+                document.getElementById('hoursContainer').classList.add('hidden');
+                return;
+            }
+
+            const dayObj = agendaData.find(d => d.date === selectedDate);
+            const slots = currentPreference === 'morning' ? dayObj.morning : dayObj.afternoon;
+
+            const grid = document.getElementById('slotsGrid');
+            grid.innerHTML = slots.map(time => `
+                <button onclick="selectTime('${time}', this)" class="slot-btn bg-white border border-slate-200 py-3 rounded-xl font-black text-slate-600 shadow-sm transition-all hover:bg-slate-50">
+                    ${time}
+                </button>
+            `).join('');
+
+            document.getElementById('hoursContainer').classList.remove('hidden');
+        }
+
+        function selectTime(time, btnEl) {
+            selectedTime = time;
+            document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('selected'));
+            btnEl.classList.add('selected');
+            updateConfirmButton();
+        }
+
+        function updateConfirmButton() {
+            const btn = document.getElementById('btnConfirm');
+            if (selectedDate && selectedTime) {
+                btn.classList.remove('opacity-50', 'pointer-events-none');
+            } else {
+                btn.classList.add('opacity-50', 'pointer-events-none');
+            }
+        }
+
+        async function confirmBooking() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const token = urlParams.get('token');
+            const serviceId = urlParams.get('service');
+
+            const btn = document.getElementById('btnConfirm');
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
+            lucide.createIcons();
+
+            try {
+                const res = await fetch(`${API_URL}/public/portal/${token}/book`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ serviceId, date: selectedDate, time: selectedTime })
+                });
+                
+                const data = await res.json();
+                if (data.ok) {
+                    document.getElementById('mainContent').classList.add('hidden');
+                    document.getElementById('successScreen').classList.remove('hidden');
+                    document.getElementById('successScreen').classList.add('flex');
+                } else {
+                    alert("Error al confirmar la cita. Es posible que el hueco ya se haya ocupado.");
+                    btn.innerHTML = 'Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>';
+                    lucide.createIcons();
+                }
+            } catch(e) {
+                alert("Error de conexión");
+                btn.innerHTML = 'Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>';
+                lucide.createIcons();
+            }
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
