From e1af474ba7deab7ca0b51809796f967585ef376b Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Tue, 24 Feb 2026 21:03:55 +0000
Subject: [PATCH] Actualizar index.html

---
 index.html | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 4bd7137..3c2d6ef 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
     <style>
         body { 
             background-color: #f4f7f9; 
+            /* Patrón de fondo muy sutil */
             background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
             background-size: 24px 24px;
         }
@@ -145,18 +146,17 @@
             let text = rawText.replace(/\n/g, ' ');
 
             // 2. Cortamos el texto justo antes de donde empieza la basura habitual de los seguros
-            // (fechas entre paréntesis, "M.O.", "MATERIAL", "ASEGURADO INFORMADO", "URGENTE", etc)
             const regexCorte = /(\(|\bM\.O\b|\bMATERIAL\b|\bASEGURADO\b|\bTELEFONO\b|\bURGENTE\b)/i;
             let cutPos = text.search(regexCorte);
             
-            if (cutPos > 5) { // Si encuentra la palabra clave y no es al inicio
+            if (cutPos > 5) { 
                 text = text.substring(0, cutPos);
             }
 
             // 3. Limpiamos espacios extra
             text = text.trim();
 
-            // 4. Lo pasamos a formato "Capitalizado" (Primera en mayúscula, resto minúsculas)
+            // 4. Lo pasamos a formato "Capitalizado"
             text = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
 
             // 5. Cogemos solo las primeras 8-10 palabras para que quede bonito
@@ -165,7 +165,6 @@
                 return words.slice(0, 10).join(" ") + "...";
             }
             
-            // Si quedó muy vacío, devolvemos genérico
             if (text.length < 5) return "Reparación general solicitada.";
 
             return text.endsWith('.') ? text : text + ".";
@@ -229,25 +228,28 @@
                         </div>
                     `;
                 } else if (isPendingWorker) {
-                    // MODO 1: AÚN NO HAY TÉCNICO (Botón de agendar bloqueado)
+                    // MODO 1: AÚN NO HAY TÉCNICO - AHORA CON DISEÑO AZUL Y BONITO
                     statusHtml = `
-                        <div class="bg-slate-100 border border-slate-200 p-6 rounded-2xl 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="search" class="w-6 h-6 animate-pulse"></i>
+                        <div class="bg-blue-50/50 border border-blue-100 p-6 rounded-2xl text-center">
+                            <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3 relative">
+                                <span class="absolute inset-0 bg-blue-200 rounded-full animate-ping opacity-50"></span>
+                                <i data-lucide="search" class="w-6 h-6 relative z-10"></i>
                             </div>
-                            <h4 class="font-black text-slate-700 uppercase text-sm mb-1 tracking-tight">Buscando Técnico</h4>
-                            <p class="text-[10px] text-slate-500 font-bold leading-tight px-4">Estamos asignando al técnico más cercano a tu domicilio. <br><br>En cuanto esté asignado, se habilitará la opción de agendar la visita aquí mismo.</p>
+                            <h4 class="font-black text-slate-800 uppercase text-base leading-tight tracking-tight">Buscando Técnico</h4>
+                            <p class="text-[10px] text-slate-500 font-medium mt-2 mb-2 px-2">Estamos asignando al técnico más cercano a tu domicilio para esta reparación.</p>
+                            <p class="text-[10px] text-blue-600 font-bold leading-tight px-4 mt-2">En cuanto esté asignado, se habilitará la opción de agendar la visita aquí mismo.</p>
                         </div>
                     `;
                 } else if (srv.appointment_status === 'pending') {
                     // MODO 2: PENDIENTE DE ACEPTACIÓN POR LA OFICINA
                     statusHtml = `
                         <div class="bg-amber-50 border border-amber-200 p-5 rounded-2xl text-center shadow-inner">
-                            <div class="w-10 h-10 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mx-auto mb-3">
-                                <i data-lucide="clock" class="w-5 h-5 animate-pulse"></i>
+                            <div class="w-10 h-10 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mx-auto mb-3 relative">
+                                <span class="absolute inset-0 bg-amber-200 rounded-full animate-ping opacity-50"></span>
+                                <i data-lucide="clock" class="w-5 h-5 relative z-10"></i>
                             </div>
                             <h4 class="font-black text-amber-800 uppercase text-sm mb-1 tracking-tight">Pendiente de Confirmación</h4>
-                            <p class="text-[10px] text-amber-700 font-bold leading-tight">Tu solicitud de fecha ha sido enviada. El técnico debe confirmarla en breve.</p>
+                            <p class="text-[10px] text-amber-700 font-bold leading-tight px-2 mt-2">Tu solicitud de fecha ha sido enviada. El técnico debe confirmarla en breve.</p>
                         </div>
                     `;
                 } else if (srv.status_name === 'Visita Agendada' || (srv.scheduled_date && srv.scheduled_time)) {
@@ -275,13 +277,13 @@
                                 </div>
                                 <div>
                                     <h4 class="font-black text-indigo-800 uppercase text-sm tracking-tight">¡Técnico en camino!</h4>
-                                    <p class="text-[10px] text-indigo-600 font-bold">Llegando en breves momentos a tu domicilio.</p>
+                                    <p class="text-[10px] text-indigo-600 font-bold mt-1">Llegando en breves momentos a tu domicilio.</p>
                                 </div>
                             </div>
                             <div class="w-full h-24 bg-indigo-100 rounded-xl border border-indigo-200 border-dashed flex items-center justify-center text-indigo-300 relative z-10">
                                 <div class="text-center">
                                     <i data-lucide="map" class="w-6 h-6 mx-auto mb-1 opacity-50"></i>
-                                    <p class="text-[8px] font-black uppercase tracking-widest">Señal GPS Próximamente</p>
+                                    <p class="text-[8px] font-black uppercase tracking-widest mt-1">Señal GPS Próximamente</p>
                                 </div>
                             </div>
                         </div>
@@ -295,7 +297,7 @@
                             </div>
                             <div>
                                 <h4 class="font-black text-orange-800 uppercase text-sm tracking-tight">En Reparación</h4>
-                                <p class="text-[10px] text-orange-600 font-bold">El técnico está trabajando en tu domicilio ahora mismo.</p>
+                                <p class="text-[10px] text-orange-600 font-bold mt-1">El técnico está trabajando en tu domicilio ahora mismo.</p>
                             </div>
                         </div>
                     `;
@@ -308,7 +310,7 @@
                             </div>
                             <div>
                                 <h4 class="font-black text-red-800 uppercase text-sm tracking-tight">Incidencia / Pausado</h4>
-                                <p class="text-[10px] text-red-600 font-bold">El servicio está pausado (ej: esperando pieza). Te avisaremos pronto.</p>
+                                <p class="text-[10px] text-red-600 font-bold mt-1">El servicio está pausado (ej: esperando pieza). Te avisaremos pronto.</p>
                             </div>
                         </div>
                     `;