From 5e5a6bef67f707ce737bd17139198129610b2815 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sat, 28 Feb 2026 14:58:33 +0000
Subject: [PATCH] Actualizar index.html

---
 index.html | 63 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 7a93e74..ec0ab6b 100644
--- a/index.html
+++ b/index.html
@@ -159,16 +159,19 @@
                 const isFinalized = srv.is_final; 
                 const raw = srv.raw_data || {};
                 const descLimpia = summarizeDescription(srv.description);
+                
+                const stName = (srv.status_name || '').toLowerCase();
+                const hasDate = !!(srv.scheduled_date && srv.scheduled_time);
                 let statusHtml = '';
 
-                // ESTRUCTURA PRINCIPAL DE ESTADOS
+                // ESTRUCTURA INTELIGENTE DE ESTADOS
                 if (isFinalized) {
                     statusHtml = `
                         <div class="bg-slate-50 border border-slate-200 p-4 rounded-2xl flex items-center justify-between opacity-70 grayscale">
                             <span class="text-[10px] font-black text-slate-500 uppercase flex items-center gap-1.5"><i data-lucide="archive" class="w-3.5 h-3.5"></i> ${srv.status_name}</span>
                         </div>`;
                 } 
-                else if (srv.status_name === 'Técnico de Camino') {
+                else if (stName.includes('camino')) {
                     const fullAddr = `${raw["Dirección"] || ""}, ${raw["Código Postal"] || ""} ${raw["Población"] || ""}`;
                     etasToInit.push({ id: srv.id, address: fullAddr });
 
@@ -188,7 +191,7 @@
                         </div>
                     `;
                 } 
-                else if (srv.status_name === 'En Reparación') {
+                else if (stName.includes('reparación') || stName.includes('trabajando')) {
                     statusHtml = `
                         <div class="bg-orange-50 border border-orange-200 p-6 rounded-3xl flex items-center gap-5 shadow-inner">
                             <div class="w-14 h-14 bg-orange-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0"><i data-lucide="hammer" class="w-7 h-7"></i></div>
@@ -198,7 +201,7 @@
                             </div>
                         </div>`;
                 } 
-                else if (srv.status_name === 'En Incidencia' || (srv.status_name || '').toLowerCase().includes('incidencia')) {
+                else if (stName.includes('incidencia')) {
                     statusHtml = `
                         <div class="bg-rose-50 border border-rose-200 p-6 rounded-3xl flex items-center gap-5 shadow-inner">
                             <div class="w-14 h-14 bg-rose-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0 animate-pulse">
@@ -210,28 +213,20 @@
                             </div>
                         </div>`;
                 }
-                else if (srv.status_name === 'Visita Agendada' || (srv.scheduled_date && srv.scheduled_time)) {
+                else if (hasDate && !stName.includes('anulado') && !stName.includes('desasignado')) {
+                    // ESTÁ AGENDADO (COMPROBAMOS SI LLEGA TARDE)
                     const endT = addOneHour(srv.scheduled_time);
-                    
-                    // --- DETECCIÓN DE RETRASO ---
                     const now = new Date();
-                    const schedParts = srv.scheduled_date.split('-'); // Formato esperado YYYY-MM-DD
-                    const endTimeParts = endT.split(':'); // Formato esperado HH:MM
+                    const schedParts = srv.scheduled_date.split('-'); 
+                    const endTimeParts = endT.split(':'); 
                     
                     let isLate = false;
-                    
                     if (schedParts.length === 3 && endTimeParts.length === 2) {
-                        // Construimos la fecha límite (la hora final del tramo de la cita)
                         const limitDate = new Date(schedParts[0], schedParts[1] - 1, schedParts[2], endTimeParts[0], endTimeParts[1], 0);
-                        
-                        // Si la fecha y hora actuales son mayores a la fecha límite, ¡Llega tarde!
-                        if (now > limitDate) {
-                            isLate = true;
-                        }
+                        if (now > limitDate) isLate = true;
                     }
 
                     if (isLate) {
-                        // ESTADO: RETRASADO (Tono naranja/ámbar para pedir disculpas suavemente)
                         statusHtml = `
                             <div class="bg-amber-50 border border-amber-200 p-6 rounded-3xl relative overflow-hidden shadow-inner">
                                 <div class="flex items-center gap-4 relative z-10">
@@ -251,7 +246,6 @@
                                 </div>
                             </div>`;
                     } else {
-                        // ESTADO NORMAL: VISITA CONFIRMADA EN TIEMPO (Verde)
                         statusHtml = `
                             <div class="bg-gradient-to-br from-emerald-400 to-emerald-600 p-6 rounded-3xl text-white shadow-lg shadow-emerald-500/30 relative overflow-hidden">
                                 <div class="flex items-center gap-5 mb-4">
@@ -264,29 +258,50 @@
                                         <p class="text-sm font-bold text-emerald-50 flex items-center gap-1.5"><i data-lucide="clock" class="w-4 h-4"></i> ${srv.scheduled_time} - ${endT}</p>
                                     </div>
                                 </div>
-                                
                                 <a href="cita.html?token=${urlToken}&service=${srv.id}" class="w-full bg-white/20 hover:bg-white/30 text-white border border-white/30 backdrop-blur-md font-black py-3 rounded-xl flex items-center justify-center gap-2 transition-colors text-[10px] uppercase tracking-widest relative z-10">
                                     <i data-lucide="calendar-clock" class="w-4 h-4"></i> Modificar Cita
                                 </a>
                             </div>`;
                     }
+                } 
+                else if (stName.includes('esperando') || stName.includes('pendiente de cita') || (srv.assigned_worker && srv.assigned_worker !== 'Pendiente' && !hasDate)) {
+                    // ESTÁ ASIGNADO PERO FALTA LA CITA
+                    statusHtml = `
+                        <div class="bg-blue-50 border border-blue-200 p-6 rounded-3xl relative overflow-hidden shadow-inner">
+                            <div class="flex items-center gap-4 relative z-10">
+                                <div class="w-14 h-14 bg-blue-500 text-white rounded-2xl flex items-center justify-center shadow-md shrink-0">
+                                    <i data-lucide="calendar-plus" class="w-7 h-7"></i>
+                                </div>
+                                <div class="flex-1 min-w-0">
+                                    <p class="text-[9px] font-black uppercase tracking-widest text-blue-500 mb-0.5">Acción Requerida</p>
+                                    <h4 class="font-black text-blue-900 uppercase text-lg leading-none mb-1.5 tracking-tight">Elige tu cita</h4>
+                                    <p class="text-[10px] font-bold text-blue-700 leading-tight">Tu técnico ya está asignado. Por favor, selecciona cuándo quieres que vayamos a tu domicilio.</p>
+                                </div>
+                            </div>
+                            <div class="mt-4 pt-4 border-t border-blue-200/60 relative z-10">
+                                <a href="cita.html?token=${urlToken}&service=${srv.id}" class="w-full bg-blue-600 text-white hover:bg-blue-700 font-black py-3 rounded-xl flex items-center justify-center gap-2 transition-colors text-[10px] uppercase tracking-widest shadow-md">
+                                    <i data-lucide="calendar" class="w-4 h-4"></i> Agendar Cita Ahora
+                                </a>
+                            </div>
+                        </div>`;
                 }
                 else {
+                    // ESTADO GENÉRICO CON EL NOMBRE REAL
                     statusHtml = `
                         <div class="bg-slate-100 border border-slate-200 p-6 rounded-3xl text-center">
-                            <div class="w-12 h-12 bg-slate-200 text-slate-500 rounded-full flex items-center justify-center mx-auto mb-3"><i data-lucide="clock" class="w-6 h-6"></i></div>
-                            <h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">En Gestión</h4>
+                            <div class="w-12 h-12 bg-slate-200 text-slate-500 rounded-full flex items-center justify-center mx-auto mb-3"><i data-lucide="info" class="w-6 h-6"></i></div>
+                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Estado actual</p>
+                            <h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">${srv.status_name || 'En Gestión'}</h4>
                         </div>`;
                 }
 
                 // =====================================
-                // NUEVO: BLOQUE DE BOTONES DE CONTACTO
+                // BLOQUE DE BOTONES DE CONTACTO
                 // =====================================
                 let contactHtml = '';
                 const hasWorker = srv.assigned_worker && srv.assigned_worker !== 'Pendiente';
                 
                 if (hasWorker && !isFinalized) {
-                    // Extraemos el teléfono del trabajador (si la BD lo manda) o usamos uno temporal para que funcione el enlace
                     const workerPhone = srv.worker_phone ? srv.worker_phone.replace('+', '') : "34000000000"; 
                     
                     contactHtml = `
@@ -302,7 +317,7 @@
                 }
 
                 // =====================================
-                // NUEVO: DATOS DEL ASEGURADO (CAJA LIMPIA)
+                // DATOS DEL ASEGURADO
                 // =====================================
                 const clientDataHtml = `
                     <div class="bg-slate-50/50 rounded-2xl p-4 mt-5 border border-slate-100 text-left">