Actualizar servicios.html

2026-03-04 08:08:43 +00:00
parent 2cae9117de
commit ec69963ed7
1 changed files with 208 additions and 85 deletions
--- a/servicios.html
+++ b/servicios.html
@@ -11,8 +11,9 @@
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-        .card-hover:hover { transform: translateY(-3px); transition: all 0.2s; box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1); border-color: #93c5fd; }
+        .card-hover:hover { transform: translateY(-3px); transition: all 0.2s; box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1); border-color: #3b82f6; }
        
+        /* ANIMACIÓN DE TEMBLOR (SHAKE) PARA TARJETAS BLOQUEADAS */
        .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
        @keyframes shake {
            10%, 90% { transform: translate3d(-2px, 0, 0); }
@@ -23,11 +24,11 @@
        .pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
        
-        .input-modern { width: 100%; background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600; color: #334155; outline: none; transition: all 0.2s; }
-        .input-modern:focus { border-color: #3b82f6; background-color: #ffffff; box-shadow: 0 0 0 4px #dbeafe; }
-        .label-modern { display: block; text-transform: uppercase; font-size: 10px; font-weight: 900; color: #64748b; letter-spacing: 0.05em; margin-bottom: 0.375rem; margin-left: 0.25rem; }
+        /* Estilos base para formularios mejorados */
+        .input-modern { @apply w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-semibold text-slate-700 outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100; }
+        .label-modern { @apply block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1; }
        
-        /* Clases para el modo edición */
+        /* Estilos para el Modo Edición del Modal */
        .input-editable { border-bottom: 2px solid #3b82f6 !important; background: #eff6ff !important; border-radius: 0.5rem !important; padding: 4px 8px !important; pointer-events: auto !important; }
        .input-readonly { border: none !important; background: transparent !important; pointer-events: none; outline: none; }
    </style>
@@ -132,11 +133,11 @@
            </div>
            
            <form onsubmit="saveNewService(event)" class="flex-1 overflow-y-auto no-scrollbar p-6 bg-slate-50/50">
-                <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
+                <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
                    
-                    <div class="md:col-span-7 space-y-4">
+                    <div class="md:col-span-7 space-y-6">
                        <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
-                            <h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3">
+                            <h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3 mb-4">
                                <i data-lucide="user" class="w-4 h-4 text-blue-500"></i> Datos del Cliente
                            </h4>
                            
@@ -153,7 +154,7 @@
                            <div>
                                <label class="label-modern">Dirección Completa</label>
                                <input type="text" id="nAddr" placeholder="Calle, número, piso, población..." class="input-modern" required>
-                                <div id="addrSuggestions" class="hidden mt-2 p-2 bg-amber-50 border border-amber-200 rounded-lg text-[10px] font-bold text-amber-700">⚠️ Cliente con direcciones registradas.</div>
+                                <div id="addrSuggestions" class="hidden mt-2 p-2 bg-amber-50 border border-amber-200 rounded-lg text-[10px] font-bold text-amber-700">⚠️ Cliente con otras direcciones registradas.</div>
                            </div>
                            <div class="pt-2">
                                <label class="flex items-center gap-3 cursor-pointer mb-2">
@@ -169,15 +170,18 @@
                        </div>

                        <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
-                            <label class="label-modern">Descripción de la Avería</label>
+                            <h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3 mb-4">
+                                <i data-lucide="align-left" class="w-4 h-4 text-amber-500"></i> Detalles de la Avería
+                            </h4>
+                            <label class="label-modern">Descripción</label>
                            <textarea id="nDesc" placeholder="Describe el problema a reparar..." rows="6" class="input-modern resize-none"></textarea>
                        </div>
                    </div>

-                    <div class="md:col-span-5 space-y-4">
+                    <div class="md:col-span-5 space-y-6">
                        <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
-                            <h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3">
-                                <i data-lucide="settings" class="w-4 h-4 text-purple-500"></i> Asignación y Tiempo
+                            <h4 class="font-black text-slate-800 uppercase text-xs flex items-center gap-2 border-b border-slate-100 pb-3 mb-4">
+                                <i data-lucide="hammer" class="w-4 h-4 text-purple-500"></i> Asignación y Tiempo
                            </h4>
                            
                            <div>
@@ -190,6 +194,7 @@
                                </div>
                            </div>

+                            <div class="grid grid-cols-1 gap-4">
                                <div>
                                    <label class="label-modern">Operario</label>
                                    <div class="relative">
@@ -199,25 +204,41 @@
                                        <i data-lucide="chevron-down" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
                                    </div>
                                </div>
-                            
                                <div>
                                    <label class="label-modern">Duración Estimada</label>
                                    <div class="relative">
                                        <select id="nDuration" class="input-modern font-black text-blue-600 uppercase appearance-none cursor-pointer pr-8">
-                                        <option value="15">15 min</option><option value="30">30 min</option><option value="60" selected>1 hora</option>
-                                        <option value="90">1.5 horas</option><option value="120">2 horas</option><option value="180">3 horas</option><option value="240">4 horas (Max)</option>
+                                            <option value="15">15 min</option>
+                                            <option value="30">30 min</option>
+                                            <option value="45">45 min</option>
+                                            <option value="60" selected>1 hora</option>
+                                            <option value="90">1.5 horas</option>
+                                            <option value="120">2 horas</option>
+                                            <option value="180">3 horas</option>
+                                            <option value="240">4 horas (Max)</option>
                                        </select>
                                        <i data-lucide="clock" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
                                    </div>
                                </div>
                            </div>
+                        </div>

                        <div class="space-y-3">
                            <button type="submit" name="action" value="manual" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-black py-4 rounded-xl text-sm uppercase tracking-widest shadow-[0_8px_20px_-6px_rgba(5,150,105,0.5)] transition-all active:scale-95 flex items-center justify-center gap-2">
                                <i data-lucide="check-circle" class="w-5 h-5"></i> Crear y Guardar
                            </button>
-                            <button type="submit" name="action" value="auto" class="w-full bg-slate-900 hover:bg-slate-800 text-white font-black py-4 rounded-xl text-xs uppercase tracking-widest shadow-md transition-all active:scale-95 flex items-center justify-center gap-2">
-                                <i data-lucide="zap" class="w-4 h-4 text-amber-400"></i> Mandar a la Cola
+                            
+                            <div class="relative flex items-center justify-center py-2">
+                                <span class="border-t border-slate-200 w-full absolute"></span>
+                                <span class="bg-slate-50 px-3 text-[9px] font-black text-slate-400 uppercase tracking-widest relative z-10">Opciones Automáticas</span>
+                            </div>
+
+                            <button type="submit" name="action" value="auto" class="w-full bg-slate-800 hover:bg-slate-700 text-white font-black py-3 rounded-xl text-xs uppercase tracking-widest shadow-md transition-all active:scale-95 flex items-center justify-between px-5 border border-slate-600">
+                                <div class="text-left">
+                                    <span class="block">Mandar a la Cola</span>
+                                    <span class="block text-[9px] text-slate-400 font-medium normal-case mt-0.5">Busca operario vía WhatsApp</span>
+                                </div>
+                                <i data-lucide="zap" class="w-5 h-5 text-amber-400"></i>
                            </button>
                        </div>
                    </div>
@@ -228,7 +249,8 @@

    <div id="detailModal" class="fixed inset-0 bg-slate-900/90 hidden z-[120] flex items-center justify-center backdrop-blur-sm p-4 text-left">
        <div class="bg-white rounded-[2rem] shadow-2xl w-full max-w-4xl overflow-hidden flex flex-col fade-in relative">
-            <button onclick="closeDetailModal()" class="absolute top-6 right-6 text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 p-2.5 rounded-full transition-all z-20"><i data-lucide="x" class="w-5 h-5"></i></button>
+            
+            <button onclick="closeDetailModal()" class="absolute top-6 right-6 text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 p-2.5 rounded-full transition-all hover:bg-red-50 hover:border-red-100 z-20"><i data-lucide="x" class="w-5 h-5"></i></button>

            <div class="p-6 border-b border-slate-100 bg-slate-50/50 pr-24 flex justify-between items-center">
                <div class="flex items-center gap-3">
@@ -238,13 +260,14 @@
                        <h3 class="font-black text-slate-800 text-xl tracking-tight leading-none">#<span id="detRef"></span></h3>
                    </div>
                </div>
-                <div class="text-right">
+                
+                <div class="flex flex-col items-end text-right">
                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Compañía Aseguradora</p>
-                    <span id="detCompany" class="bg-white border border-slate-200 px-3 py-1 rounded-lg text-xs font-black text-slate-700 mt-1 uppercase shadow-sm"></span>
+                    <span id="detCompany" class="bg-white border border-slate-200 px-3 py-1 rounded-lg text-xs font-black text-slate-700 mt-1 uppercase shadow-sm truncate max-w-[250px]"></span>
                </div>
            </div>
            
-            <div class="p-6 grid grid-cols-1 md:grid-cols-5 gap-6 bg-white overflow-y-auto max-h-[70vh] no-scrollbar">
+            <div class="p-6 grid grid-cols-1 md:grid-cols-5 gap-6 bg-white overflow-y-auto max-h-[80vh] no-scrollbar">
                <input type="hidden" id="detId">
                <input type="hidden" id="detCp">
                
@@ -258,6 +281,7 @@
                                <div class="flex items-center gap-1.5 flex-1">
                                    <i data-lucide="phone" class="w-3.5 h-3.5 text-blue-600"></i>
                                    <input type="tel" id="editPhone" class="input-readonly text-sm text-blue-600 font-black w-full" readonly>
+                                    <a id="btnCallPhone" href="#" class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 hidden" title="Llamar"><i data-lucide="phone-call" class="w-3.5 h-3.5"></i></a>
                                </div>
                                <button onclick="copyClientPortalLink()" id="btnPortalLink" class="text-[10px] font-black bg-blue-50 border border-blue-100 hover:bg-blue-600 hover:text-white text-blue-600 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-all shadow-sm active:scale-95 shrink-0">
                                    <i data-lucide="link" class="w-3 h-3"></i> Copiar Portal
@@ -267,17 +291,21 @@
                        <hr class="border-slate-200">
                        <div>
                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Ubicación y Dirección</p>
-                            <textarea id="editAddr" rows="2" class="input-readonly w-full text-sm font-bold text-slate-600 mt-1 resize-none uppercase" readonly></textarea>
+                            <div class="flex items-start gap-1.5 mt-1">
+                                <i data-lucide="map-pin" class="w-4 h-4 mt-0.5 text-slate-400 shrink-0"></i> 
+                                <textarea id="editAddr" rows="2" class="input-readonly w-full text-sm font-bold text-slate-600 resize-none uppercase" readonly></textarea>
+                            </div>
                        </div>
                    </div>

                    <div>
-                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-2 block">Descripción de la Avería</p>
+                        <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-2">Descripción de la Avería</p>
                        <textarea id="editDesc" rows="6" class="w-full bg-amber-50/60 border border-amber-100 p-5 rounded-[1.5rem] text-sm font-medium text-slate-700 shadow-inner leading-relaxed outline-none" readonly></textarea>
                    </div>
                </div>

                <div class="md:col-span-2 flex flex-col gap-4">
+                    
                    <div id="panelAsignado" class="bg-blue-50/40 p-6 rounded-[1.5rem] border border-blue-100 flex flex-col justify-between shadow-sm h-full hidden">
                        <div class="space-y-6">
                            <div>
@@ -290,19 +318,22 @@
                            <div class="space-y-3">
                                <p class="text-[10px] font-black text-blue-600 uppercase tracking-widest flex items-center gap-1.5 border-b border-blue-100 pb-2"><i data-lucide="calendar-clock" class="w-4 h-4"></i> Agendar Cita</p>
                                <div class="grid grid-cols-2 gap-2">
-                                    <input type="date" id="dateInput" class="w-full bg-white border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 outline-none">
-                                    <input type="time" id="timeInput" class="w-full bg-white border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 outline-none">
+                                    <input type="date" id="dateInput" class="w-full bg-white border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all">
+                                    <input type="time" id="timeInput" class="w-full bg-white border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all">
                                </div>
                            </div>
                            <div class="space-y-2 pt-2">
                                <p class="text-[10px] font-black text-slate-800 uppercase ml-1 flex items-center gap-1.5"><i data-lucide="arrow-right-left" class="w-4 h-4 text-blue-500"></i> Cambio de Estado</p>
                                <div class="relative">
-                                    <select id="detStatusMap" class="w-full bg-slate-800 text-white border-none p-4 rounded-xl text-xs font-bold shadow-lg outline-none cursor-pointer appearance-none pr-10"></select>
+                                    <select id="detStatusMap" class="w-full bg-slate-800 text-white border-none p-4 rounded-xl text-xs font-bold shadow-lg outline-none cursor-pointer appearance-none pr-10">
+                                        </select>
                                    <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none"></i>
                                </div>
                            </div>
                        </div>
-                        <button id="btnSaveAppt" onclick="saveAppointment()" class="w-full mt-8 bg-blue-600 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest shadow-lg hover:bg-blue-700 transition-all active:scale-95">Guardar Cambios</button>
+                        <button id="btnSaveAppt" onclick="saveAppointment()" class="w-full mt-8 bg-blue-600 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest shadow-[0_8px_20px_-6px_rgba(37,99,235,0.5)] hover:bg-blue-700 hover:shadow-blue-600/30 transition-all active:scale-95 flex items-center justify-center gap-2 border border-blue-500">
+                            <i data-lucide="save" class="w-4 h-4"></i> Guardar Cambios
+                        </button>
                    </div>

                    <div id="panelSinAsignar" class="bg-rose-50/40 p-6 rounded-[1.5rem] border border-rose-100 flex flex-col shadow-sm h-full hidden">
@@ -310,25 +341,46 @@
                            <div class="w-2.5 h-2.5 rounded-full bg-rose-500 animate-pulse"></div>
                            <p class="text-[10px] font-black text-rose-600 uppercase tracking-widest">Opciones de Asignación</p>
                        </div>
+                        
                        <div class="space-y-5 flex-1">
                            <select id="reGremio" class="w-full bg-white border border-rose-200 p-4 rounded-2xl text-xs font-bold text-slate-700 outline-none" onchange="loadOps(this.value, 'reOperario')">
                                <option value="">Seleccionar Gremio...</option>
                            </select>
+                            
                            <div class="bg-slate-900 p-5 rounded-2xl text-white space-y-4">
                                <button onclick="sendToAutomate()" id="btnAuto" class="w-full bg-blue-600 hover:bg-blue-500 p-3 rounded-xl flex items-center justify-between text-left transition-all active:scale-95">
-                                    <div><p class="font-black uppercase text-xs">Mandar a la Cola</p><p class="text-[9px] text-blue-200">Rueda automática</p></div>
+                                    <div><p class="font-black uppercase text-xs">Mandar a la Cola</p><p class="text-[9px] text-blue-200">Rueda automática (WA)</p></div>
                                    <i data-lucide="zap" class="w-5 h-5"></i>
                                </button>
+                                
                                <div class="bg-slate-800 p-4 rounded-xl space-y-3">
                                    <p class="font-black uppercase text-[9px] text-slate-400 text-center">O Asignar a Mano:</p>
                                    <select id="reOperario" class="w-full bg-slate-700 border-none text-white px-3 py-2.5 rounded-lg text-xs font-bold outline-none">
-                                        <option value="">-- Elija gremio --</option>
+                                        <option value="">-- Elija gremio primero --</option>
                                    </select>
-                                    <button onclick="assignManualFromPanel()" class="w-full bg-white text-slate-900 font-black py-2.5 rounded-lg text-[10px] uppercase hover:bg-emerald-400">Confirmar Directo</button>
+                                    <button onclick="assignManualFromPanel()" class="w-full bg-white text-slate-900 font-black py-2.5 rounded-lg text-[10px] uppercase hover:bg-emerald-400 transition-colors">Confirmar Directo</button>
                                </div>
                            </div>
                        </div>
                    </div>
+
+                    <div id="panelEnBolsa" class="bg-amber-50/40 p-6 rounded-[1.5rem] border border-amber-200 flex flex-col justify-center items-center shadow-sm h-full hidden text-center space-y-4">
+                        <div class="w-16 h-16 bg-amber-100 text-amber-500 rounded-full flex items-center justify-center animate-pulse shadow-inner">
+                            <i data-lucide="bot" class="w-8 h-8"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-black text-slate-800 text-lg uppercase tracking-tight">Servicio en Bolsa</h4>
+                            <p class="text-xs text-slate-500 mt-2 font-medium">El robot está buscando operario automáticamente. Por favor, no interfieras a menos que sea urgente.</p>
+                        </div>
+                        <div class="w-full space-y-3 mt-6">
+                            <button onclick="stopAutomation()" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-black py-3.5 rounded-xl text-xs uppercase transition-colors shadow-md flex justify-center items-center gap-2">
+                                <i data-lucide="octagon" class="w-4 h-4"></i> Detener y Asignar Manual
+                            </button>
+                            <button onclick="closeDetailModal()" class="w-full bg-white border border-slate-200 text-slate-600 font-bold py-3.5 rounded-xl text-xs uppercase hover:bg-slate-50 transition-colors">
+                                Dejar que el Robot siga
+                            </button>
+                        </div>
+                    </div>
                </div>
            </div>
            
@@ -401,6 +453,7 @@
                if (data.ok) {
                    systemStatuses = data.statuses;
                    renderStatusPills();
+                    
                    const modalSelect = document.getElementById('detStatusMap');
                    modalSelect.innerHTML = '';
                    systemStatuses.forEach(st => {
@@ -412,26 +465,41 @@

       function renderStatusPills() {
            const container = document.getElementById('statusPills');
-            let html = `<button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-black tracking-widest transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-900 text-white border-slate-900 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}">TODOS</button>`;
+            let html = `
+                <button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-black tracking-widest transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-900 text-white border-slate-900 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}">
+                    TODOS
+                </button>
+            `;
            
            systemStatuses.forEach(st => {
                const isActive = activeStatusFilter === String(st.id);
                const c = colorDict[st.color] || colorDict['gray'];
                const colorBase = c.bg.split('-')[1]; 
+                
                const activeClasses = `bg-white border-${colorBase}-400 text-${colorBase}-700 shadow-md ring-2 ring-${colorBase}-100`;
                const inactiveClasses = `bg-white border-slate-200 text-slate-500 hover:bg-slate-50`;

-                html += `<button onclick="setStatusFilter('${st.id}')" class="px-4 py-2 rounded-xl text-xs font-bold border transition-all flex items-center gap-2 ${isActive ? activeClasses : inactiveClasses}">
-                    <div class="w-2 h-2 rounded-full ${c.dot}"></div>${st.name}</button>`;
+                html += `
+                    <button onclick="setStatusFilter('${st.id}')" class="px-4 py-2 rounded-xl text-xs font-bold border transition-all flex items-center gap-2 ${isActive ? activeClasses : inactiveClasses}">
+                        <div class="w-2 h-2 rounded-full ${c.dot}"></div>
+                        ${st.name}
+                    </button>
+                `;
            });
            container.innerHTML = html;
        }

-        function setStatusFilter(id) { activeStatusFilter = id; renderStatusPills(); renderLists(); }
+        function setStatusFilter(id) {
+            activeStatusFilter = id;
+            renderStatusPills();
+            renderLists();
+        }

        async function refreshPanel() {
            try {
-                const res = await fetch(`${API_URL}/services/active`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const res = await fetch(`${API_URL}/services/active`, { 
+                    headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } 
+                });
                const data = await res.json();
                if (data.ok) { 
                    localData = data.services.filter(s => s.provider !== 'SYSTEM_BLOCK');
@@ -458,16 +526,19 @@
            if (!s.assigned_name && (s.automation_status === 'in_progress' || s.automation_status === 'failed')) {
                return { id: 'bolsa', name: s.automation_status === 'in_progress' ? 'Buscando Operario' : 'Fallo en Bolsa', color: s.automation_status === 'in_progress' ? 'amber' : 'red', isBlocked: false, is_final: false };
            }
+
            if (!s.assigned_name && (!dbStat || dbStat === 'sin_asignar')) {
                const found = systemStatuses.find(st => st.name.toLowerCase().includes('pendiente de asignar')) || systemStatuses[0];
                return { ...found, isBlocked: false };
            }
+
            const foundById = systemStatuses.find(st => String(st.id) === String(dbStat));
            if (foundById) return { ...foundById, isBlocked: false };

            if (s.assigned_name && (!raw.scheduled_date || raw.scheduled_date === "")) {
                const asignado = systemStatuses.find(st => st.name.toLowerCase() === 'asignado');
                const esperando = systemStatuses.find(st => st.name.toLowerCase().includes('esperando'));
+
                if (dbStat === 'esperando_cliente' && esperando) return { ...esperando, isBlocked: false };
                if ((dbStat === 'asignado_operario' || !dbStat) && asignado) return { ...asignado, isBlocked: false };
                if (asignado) return { ...asignado, isBlocked: false };
@@ -489,22 +560,36 @@

        function renderLists() {
            if(systemStatuses.length === 0) return;
+
            const searchTerm = document.getElementById('searchFilter').value.toLowerCase();
            const selectedOp = document.getElementById('opFilter').value;
            const weekValue = document.getElementById('weekFilter').value; 

-            let kpiUnassigned = 0, kpiScheduled = 0, kpiWaiting = 0, kpiIncident = 0;
+            // Inicializamos contadores reales
+            let kpiUnassigned = 0;
+            let kpiScheduled = 0;
+            let kpiWaiting = 0;
+            let kpiIncident = 0;

            const filteredData = localData.filter(s => {
                const raw = s.raw_data || {};
                const stateInfo = getServiceStateInfo(s);
                s._stateInfo = stateInfo; 
+
                const stName = stateInfo.name.toLowerCase();
                
-                if (!s.assigned_name || stateInfo.id === 'bolsa' || stName.includes('asignar')) kpiUnassigned++;
-                else if (stName.includes('incidencia') || stName.includes('pausa')) kpiIncident++;
-                else if (raw.scheduled_date && raw.scheduled_date !== "" && !stateInfo.is_final) kpiScheduled++;
-                else if (!stateInfo.is_final && !raw.scheduled_date) kpiWaiting++;
+                if (!s.assigned_name || stateInfo.id === 'bolsa' || stName.includes('asignar')) {
+                    kpiUnassigned++;
+                } 
+                else if (stName.includes('incidencia') || stName.includes('pausa')) {
+                    kpiIncident++;
+                } 
+                else if (raw.scheduled_date && raw.scheduled_date !== "" && !stateInfo.is_final) {
+                    kpiScheduled++;
+                } 
+                else if (!stateInfo.is_final && !raw.scheduled_date) {
+                    kpiWaiting++;
+                }

                const name = (raw["Nombre Cliente"] || raw["CLIENTE"] || "").toLowerCase();
                const ref = (s.service_ref || "").toLowerCase();
@@ -519,6 +604,7 @@
                }
                
                let matchesStatus = (activeStatusFilter === "ALL") ? true : String(stateInfo.id) === activeStatusFilter;
+
                return matchesSearch && matchesOp && matchesWeek && matchesStatus;
            });

@@ -528,7 +614,13 @@
            document.getElementById('kpi-incident').innerText = kpiIncident;

            const grid = document.getElementById('servicesGrid');
-            grid.innerHTML = filteredData.length > 0 ? filteredData.map(s => buildGridCard(s)).join('') : `<div class="col-span-full py-20 text-center bg-white rounded-[2rem] border-2 border-dashed border-slate-200"><i data-lucide="layout-grid" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i><p class="text-slate-400 font-bold uppercase tracking-widest text-sm">No hay servicios que coincidan</p></div>`;
+            grid.innerHTML = filteredData.length > 0 
+                ? filteredData.map(s => buildGridCard(s)).join('')
+                : `<div class="col-span-full py-20 text-center bg-white rounded-[2rem] border-2 border-dashed border-slate-200">
+                        <i data-lucide="layout-grid" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>
+                        <p class="text-slate-400 font-bold uppercase tracking-widest text-sm">No hay servicios que coincidan</p>
+                   </div>`;
+
            lucide.createIcons();
        }

@@ -540,6 +632,7 @@
            const fullAddr = `${addr} ${pop}`.trim();
            const cita = raw.scheduled_date ? `${raw.scheduled_date.split('-').reverse().slice(0,2).join('/')} | ${raw.scheduled_time}` : 'Pte. Cita';
            const companyName = raw['Compañía'] || raw['COMPAÑIA'] || raw['Procedencia'] || (s.provider === 'MANUAL' ? 'PARTICULAR' : 'ASEGURADORA');
+            
            const isUrgent = s.is_urgent === true || (raw['Urgente'] && raw['Urgente'].toLowerCase() === 'sí') || (raw['URGENTE'] && raw['URGENTE'].toLowerCase() === 'si');

            const stateInfo = s._stateInfo;
@@ -564,10 +657,12 @@
                        </span>
                        ${isUrgent ? `<span class="bg-red-500 text-white px-2 py-1 rounded-lg text-[9px] font-black uppercase shadow-sm animate-pulse shrink-0">🔥 URGENTE</span>` : `<span class="text-[10px] text-slate-400 font-bold uppercase bg-slate-50 border border-slate-100 px-2.5 py-1 rounded-lg shrink-0">#${s.service_ref}</span>`}
                    </div>
+                    
                    <div>
                        <p class="text-[9px] font-black text-blue-500 uppercase tracking-widest mb-0.5 truncate">${companyName}</p>
                        <h4 class="font-black text-slate-800 uppercase text-base leading-tight line-clamp-2" title="${name}">${name}</h4>
                    </div>
+                    
                    <div class="bg-slate-50/50 p-3 rounded-xl border border-slate-100">
                        <p class="text-[10px] text-slate-600 font-medium uppercase line-clamp-2 flex items-start gap-1.5" title="${fullAddr}">
                            <i data-lucide="map-pin" class="w-3.5 h-3.5 mt-0.5 text-slate-400 shrink-0"></i> ${fullAddr}
@@ -622,19 +717,20 @@
            setTimeout(() => { toast.classList.add('hidden'); }, 3500);
        }

+        // LA FUNCIÓN CORREGIDA
        function openDetail(id, startInEditMode = false) {
            const s = localData.find(x => x.id === id);
            if (!s) return;
-            const raw = s.raw_data;
+            const raw = s.raw_data || {}; // Seguridad anti-crashes
            
            document.getElementById('detId').value = s.id;
-            document.getElementById('detRef').innerText = s.service_ref;
-            document.getElementById('detCp').value = raw["Código Postal"] || "00000";
+            document.getElementById('detRef').innerText = s.service_ref || "";
+            if (document.getElementById('detCp')) document.getElementById('detCp').value = raw["Código Postal"] || "00000";
            
            const companyName = raw['Compañía'] || raw['COMPAÑIA'] || raw['Procedencia'] || "Particular";
-            document.getElementById('detCompany').innerText = companyName;
+            if (document.getElementById('detCompany')) document.getElementById('detCompany').innerText = companyName;
            
-            // Rellenar campos del editor
+            // RELLENADO DE CAMPOS PARA EL EDITOR Y VISTA (Inputs)
            const clientName = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado Sin Nombre";
            if(document.getElementById('editName')) document.getElementById('editName').value = clientName;
            
@@ -643,13 +739,24 @@
            const singlePhone = matchPhone ? matchPhone[0] : "";
            if(document.getElementById('editPhone')) document.getElementById('editPhone').value = singlePhone;

+            // Lógica del botón de llamada dinámico
+            const callBtn = document.getElementById('btnCallPhone');
+            if (callBtn) {
+                if (singlePhone) {
+                    callBtn.href = `tel:+34${singlePhone}`;
+                    callBtn.classList.remove('hidden');
+                } else {
+                    callBtn.classList.add('hidden');
+                }
+            }
+
            const fullAddr = `${raw["Dirección"] || ""} ${raw["Población"] || ""}`.trim();
            if(document.getElementById('editAddr')) document.getElementById('editAddr').value = fullAddr;

            const descContent = raw["Descripción"] || raw["DESCRIPCION"] || "Sin notas.";
            if(document.getElementById('editDesc')) document.getElementById('editDesc').value = descContent;

-            const stateInfo = s._stateInfo;
+            const stateInfo = s._stateInfo || getServiceStateInfo(s);

            if (s.automation_status === 'in_progress') {
                document.getElementById('panelEnBolsa').classList.remove('hidden');
@@ -682,7 +789,6 @@

            document.getElementById('detailModal').classList.remove('hidden');
            
-            // Activar modo edición si se ha pulsado el lápiz
            if (startInEditMode) {
                enableEditing();
            } else {
@@ -695,6 +801,7 @@
        async function stopAutomation() {
            const id = document.getElementById('detId').value;
            if(!confirm("¿Deseas cancelar la búsqueda del robot para asignar este servicio manualmente?")) return;
+            
            try {
                await fetch(`${API_URL}/providers/scraped/${id}`, {
                    method: 'PUT',
@@ -704,7 +811,9 @@
                showToast("Bolsa detenida. Ya puedes asignar el servicio.");
                closeDetailModal();
                refreshPanel();
-            } catch (e) { alert("Error al detener el automatismo."); }
+            } catch (e) { 
+                alert("Error al detener el automatismo."); 
+            }
        }

        async function saveAppointment() {
@@ -714,6 +823,7 @@
            const statusMap = document.getElementById('detStatusMap').value;

            const selectedSt = systemStatuses.find(st => String(st.id) === String(statusMap));
+            
            if (selectedSt && !selectedSt.is_final && !date && !selectedSt.name.toLowerCase().includes('pausa') && !selectedSt.name.toLowerCase().includes('asignar')) {
                if(!confirm("No has asignado Fecha para este estado. ¿Deseas continuar?")) return;
            }
@@ -729,6 +839,7 @@
                    headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
                    body: JSON.stringify({ date, time, status_operativo: statusMap })
                });
+                
                closeDetailModal(); showToast("Estado actualizado"); refreshPanel(); 
            } catch (e) { alert("Error"); } 
            finally { btn.innerHTML = originalContent; btn.disabled = false; }
@@ -740,6 +851,7 @@
            const cp = document.getElementById('detCp').value;
            
            if(!guild_id) return alert("Selecciona un gremio primero.");
+            
            const btn = document.getElementById('btnAuto');
            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin mx-auto"></i>';

@@ -787,8 +899,12 @@
                    })
                });

-                closeDetailModal(); showToast("Asignado y notificado correctamente"); refreshPanel(); 
-            } catch (e) { alert("Error en la asignación manual"); }
+                closeDetailModal(); 
+                showToast("Asignado y notificado correctamente"); 
+                refreshPanel(); 
+            } catch (e) { 
+                alert("Error en la asignación manual"); 
+            }
        }

        async function saveNewService(e) {
@@ -820,20 +936,23 @@
        }

        function closeDetailModal() { document.getElementById('detailModal').classList.add('hidden'); }
-        function openCreateModal() {
+        
+        async function openCreateModal() {
            document.getElementById('createModal').classList.remove('hidden');
            document.getElementById('isCompanyCheck').checked = false;
            toggleCompanyFields(false);
            
-            fetch(`${API_URL}/companies`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } })
-                .then(r => r.json())
-                .then(data => {
+            try {
+                const res = await fetch(`${API_URL}/companies`, {
+                    headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
+                });
+                const data = await res.json();
                const sel = document.getElementById('nCompanySelect');
                sel.innerHTML = '<option value="">Seleccionar compañía...</option>';
-                    if(data.companies) {
-                        data.companies.forEach(c => sel.innerHTML += `<option value="${c.name}">${c.name.toUpperCase()}</option>`);
-                    }
-                }).catch(e=>{});
+                data.companies.forEach(c => {
+                    sel.innerHTML += `<option value="${c.name}">${c.name.toUpperCase()}</option>`;
+                });
+            } catch(e) {}
            lucide.createIcons();
        }

@@ -848,15 +967,19 @@

        async function checkDuplicateRef(ref) {
            if(!ref) return;
-            const res = await fetch(`${API_URL}/services/check-ref?ref=${ref}`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const res = await fetch(`${API_URL}/services/check-ref?ref=${ref}`, {
+                headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
+            });
            const data = await res.json();
            const alertEl = document.getElementById('refAlert');
            const inputEl = document.getElementById('nExpRef');
            
            if(data.exists) {
-                alertEl.classList.remove('hidden'); inputEl.classList.add('border-red-500', 'bg-red-50');
+                alertEl.classList.remove('hidden');
+                inputEl.classList.add('border-red-500', 'bg-red-50');
            } else {
-                alertEl.classList.add('hidden'); inputEl.classList.remove('border-red-500', 'bg-red-50');
+                alertEl.classList.add('hidden');
+                inputEl.classList.remove('border-red-500', 'bg-red-50');
            }
        }