From 66132520674812d341567b901a349155cd983ff9 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Tue, 24 Feb 2026 08:14:58 +0000
Subject: [PATCH] Actualizar cita.html

---
 cita.html | 90 ++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 59 insertions(+), 31 deletions(-)
diff --git a/cita.html b/cita.html
index a54f4f1..73f6ee6 100644
--- a/cita.html
+++ b/cita.html
@@ -10,7 +10,8 @@
         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; }
+        .slot-btn { transition: all 0.2s; }
+        .slot-btn.selected { background-color: #2563eb; color: white; border-color: #2563eb; transform: scale(1.02); box-shadow: 0 4px 12px rgba(37,99,235,0.2); }
     </style>
 </head>
 <body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center">
@@ -22,12 +23,12 @@
 
     <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>
+        <header class="bg-white p-6 pt-10 border-b border-slate-200 sticky top-0 z-10 shrink-0 shadow-sm">
+            <button onclick="window.history.back()" class="w-10 h-10 bg-slate-50 rounded-full flex items-center justify-center text-slate-500 hover:text-slate-800 mb-4 transition-colors">
+                <i data-lucide="arrow-left" class="w-5 h-5"></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>
+            <p class="text-sm text-slate-500 font-medium mt-2">Te mostraremos franjas de <strong class="text-slate-700">1 hora de margen de llegada</strong> en las que el técnico estará por tu zona.</p>
         </header>
 
         <div class="p-6 flex-1 flex flex-col gap-6 fade-in">
@@ -36,45 +37,48 @@
                 <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>
+                        <span class="font-black uppercase text-sm tracking-widest">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>
+                        <span class="font-black uppercase text-sm tracking-widest">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>
+                    <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs mb-2">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 shadow-sm cursor-pointer">
+                        <option value="">Selecciona un día...</option>
+                    </select>
+                </div>
 
                 <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">
+                    <h3 class="font-black text-slate-800 uppercase tracking-widest text-xs mb-1">2. Ventana de llegada aproximada</h3>
+                    <div id="slotsGrid" class="grid grid-cols-2 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 id="btnConfirm" onclick="confirmBooking()" class="w-full bg-blue-600 text-white font-black py-4 rounded-2xl shadow-lg shadow-blue-500/30 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-5 h-5"></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-blue-600 text-white">
-        <div class="w-24 h-24 bg-white text-blue-600 rounded-full flex items-center justify-center mb-6 shadow-2xl">
-            <i data-lucide="clock" class="w-12 h-12"></i>
+   <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-blue-600 text-white relative overflow-hidden">
+        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvc3ZnPg==')] opacity-50"></div>
+        <div class="w-24 h-24 bg-white text-blue-600 rounded-full flex items-center justify-center mb-6 shadow-2xl relative z-10">
+            <i data-lucide="calendar-check" class="w-12 h-12"></i>
         </div>
-        <h2 class="text-3xl font-black mb-2">Solicitud Enviada</h2>
-        <p class="font-medium opacity-90 mb-8">Estamos revisando la ruta de tu técnico. Recibirás un mensaje en breve confirmando tu cita.</p>
-        <button onclick="window.location.href = window.location.href.replace('cita.html', 'portal.html')" class="bg-slate-900 text-white font-black py-3 px-8 rounded-xl shadow-lg uppercase text-xs tracking-widest">
-            Volver al Resumen
+        <h2 class="text-3xl font-black mb-2 relative z-10">Solicitud Enviada</h2>
+        <p class="font-medium opacity-90 mb-8 relative z-10">El técnico ha sido avisado de tu preferencia. Recibirás un WhatsApp de confirmación en breve.</p>
+        <button onclick="window.location.href = window.location.href.replace('cita.html', 'portal.html')" class="bg-slate-900 text-white font-black py-4 px-8 rounded-2xl shadow-lg uppercase text-xs tracking-widest relative z-10 active:scale-95 transition-transform">
+            Volver a mi Ficha
         </button>
     </div>
 
@@ -140,6 +144,15 @@
             document.getElementById('hoursContainer').classList.add('hidden');
         }
 
+        // --- FUNCIÓN HELPER PARA SUMAR 1 HORA ---
+        function addOneHour(timeStr) {
+            let [h, m] = timeStr.split(':').map(Number);
+            let totalMins = h * 60 + m + 60; // Sumamos 60 mins
+            let newH = Math.floor(totalMins / 60);
+            let newM = totalMins % 60;
+            return `${String(newH).padStart(2,'0')}:${String(newM).padStart(2,'0')}`;
+        }
+
         function renderSlots() {
             selectedDate = document.getElementById('daySelect').value;
             selectedTime = null;
@@ -154,19 +167,31 @@
             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}
+            
+            // Aquí calculamos el tramo y lo pintamos
+            grid.innerHTML = slots.map(time => {
+                const endTime = addOneHour(time);
+                return `
+                <button onclick="selectTime('${time}', this)" class="slot-btn bg-white border-2 border-slate-200 py-4 px-2 rounded-2xl font-black text-slate-600 shadow-sm hover:border-blue-300 hover:bg-blue-50 flex flex-col items-center justify-center gap-1">
+                    <span class="text-[10px] uppercase tracking-widest opacity-60 font-bold leading-none">Llegada entre</span>
+                    <span class="text-sm">${time} - ${endTime}</span>
                 </button>
-            `).join('');
+                `;
+            }).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');
+            document.querySelectorAll('.slot-btn').forEach(b => {
+                b.classList.remove('selected', 'border-blue-500');
+                b.classList.add('border-slate-200', 'text-slate-600');
+            });
+            
+            btnEl.classList.remove('border-slate-200', 'text-slate-600', 'hover:border-blue-300', 'hover:bg-blue-50');
+            btnEl.classList.add('selected', 'border-blue-500');
+            
             updateConfirmButton();
         }
 
@@ -174,8 +199,10 @@
             const btn = document.getElementById('btnConfirm');
             if (selectedDate && selectedTime) {
                 btn.classList.remove('opacity-50', 'pointer-events-none');
+                btn.classList.add('active:scale-95');
             } else {
                 btn.classList.add('opacity-50', 'pointer-events-none');
+                btn.classList.remove('active:scale-95');
             }
         }
 
@@ -185,7 +212,8 @@
             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...';
+            const originalHtml = btn.innerHTML;
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Solicitando...';
             lucide.createIcons();
 
             try {
@@ -202,12 +230,12 @@
                     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>';
+                    btn.innerHTML = originalHtml;
                     lucide.createIcons();
                 }
             } catch(e) {
                 alert("Error de conexión");
-                btn.innerHTML = 'Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>';
+                btn.innerHTML = originalHtml;
                 lucide.createIcons();
             }
         }
