From e1a1383958c7570a9e6f3c762b452c0d604b42ed Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Fri, 20 Feb 2026 17:18:11 +0000
Subject: [PATCH] Actualizar servicios.html

---
 servicios.html | 479 +++++++++++++++++++++++++++----------------------
 1 file changed, 262 insertions(+), 217 deletions(-)

diff --git a/servicios.html b/servicios.html
index 6077d88..e25bd5f 100644
--- a/servicios.html
+++ b/servicios.html
@@ -9,33 +9,11 @@
     <style>
         .fade-in { animation: fadeIn 0.3s ease-in-out; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        
-        /* Ocultar barra de scroll pero mantener funcionalidad */
         .no-scrollbar::-webkit-scrollbar { display: none; }
         .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+        .card-hover:hover { transform: translateY(-2px); transition: all 0.2s; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
         
-        /* Scroll horizontal bonito para el Kanban */
-        .kanban-board {
-            display: flex;
-            overflow-x: auto;
-            scroll-snap-type: x mandatory;
-            gap: 1.5rem;
-            padding-bottom: 1rem;
-        }
-        .kanban-board::-webkit-scrollbar { height: 8px; }
-        .kanban-board::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
-        .kanban-board::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
-        .kanban-board::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
-        
-        .kanban-column {
-            min-width: 320px;
-            max-width: 320px;
-            scroll-snap-align: start;
-        }
-
-        .card-hover { transition: all 0.2s ease; cursor: pointer; }
-        .card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1); border-color: #93c5fd; }
-        
+        /* 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); }
@@ -55,45 +33,76 @@
         <div class="flex-1 flex flex-col overflow-hidden relative">
             <div id="header-container"></div>
             
-            <main class="flex-1 overflow-hidden flex flex-col bg-slate-50 p-6 relative">
-                
-                <div class="flex justify-between items-center bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 shrink-0 mb-6">
-                    <div>
-                        <h2 class="text-2xl font-black text-slate-800 tracking-tight flex items-center gap-3">
-                            <span class="bg-blue-600 p-2.5 rounded-xl text-white shadow-lg shadow-blue-200"><i data-lucide="kanban"></i></span>
-                            PANEL OPERATIVO
-                        </h2>
-                        <p class="text-sm text-slate-500 mt-1 font-medium">Tablero Kanban de gestión de expedientes activos.</p>
-                    </div>
-                    <button onclick="openCreateModal()" class="bg-slate-900 hover:bg-blue-600 text-white px-6 py-3.5 rounded-2xl shadow-xl flex items-center gap-3 font-black text-xs uppercase tracking-widest transition-all active:scale-95">
-                        <i data-lucide="plus-circle" class="w-5 h-5"></i> Nuevo Servicio
-                    </button>
-                </div>
-
-                <div class="flex flex-wrap gap-4 items-center bg-white p-4 rounded-[1.5rem] shadow-sm border border-slate-100 mb-6 shrink-0">
-                    <div class="relative flex-1 min-w-[250px]">
-                        <i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
-                        <input type="text" id="searchFilter" oninput="renderBoard()" placeholder="Buscar por cliente, REF, población, teléfono, compañía..." class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-blue-500 outline-none transition-all">
-                    </div>
-                    <div class="flex gap-3 w-full md:w-auto">
-                        <div class="relative min-w-[200px]">
-                            <select id="opFilter" onchange="renderBoard()" class="w-full bg-slate-50 border border-slate-200 text-xs font-black px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 uppercase tracking-widest text-slate-600 appearance-none pr-10 cursor-pointer">
-                                <option value="ALL">TODOS LOS OPERARIOS</option>
-                            </select>
-                            <i data-lucide="chevron-down" class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
+            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-slate-50 p-6 no-scrollbar text-left relative">
+                <div class="fade-in max-w-[1400px] mx-auto space-y-6">
+                    
+                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 gap-4">
+                        <div>
+                            <h2 class="text-2xl font-black text-slate-800 tracking-tight flex items-center gap-3">
+                                <span class="bg-blue-600 p-2.5 rounded-xl text-white shadow-lg shadow-blue-200"><i data-lucide="layout-grid"></i></span>
+                                PANEL OPERATIVO
+                            </h2>
+                            <p class="text-sm text-slate-500 mt-1 font-medium">Gestión inteligente de expedientes activos.</p>
                         </div>
-                        <div class="relative min-w-[200px]">
-                            <select id="statusFilter" onchange="renderBoard()" class="w-full bg-slate-50 border border-slate-200 text-xs font-black px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 uppercase tracking-widest text-slate-600 appearance-none pr-10 cursor-pointer">
-                                <option value="ALL">TODOS LOS ESTADOS</option>
-                            </select>
-                            <i data-lucide="chevron-down" class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
+                        <button onclick="openCreateModal()" class="bg-slate-900 hover:bg-blue-600 text-white px-6 py-3.5 rounded-2xl shadow-xl flex items-center gap-3 font-black text-xs uppercase tracking-widest transition-all active:scale-95 shrink-0">
+                            <i data-lucide="plus-circle" class="w-5 h-5"></i> Nuevo Servicio
+                        </button>
+                    </div>
+
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-full bg-rose-50 flex items-center justify-center text-rose-500 shrink-0"><i data-lucide="inbox" class="w-6 h-6"></i></div>
+                            <div>
+                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Sin Asignar</p>
+                                <h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-unassigned">0</h3>
+                            </div>
+                        </div>
+                        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-500 shrink-0"><i data-lucide="calendar-check" class="w-6 h-6"></i></div>
+                            <div>
+                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Agendados</p>
+                                <h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-scheduled">0</h3>
+                            </div>
+                        </div>
+                        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-amber-500 shrink-0"><i data-lucide="wrench" class="w-6 h-6"></i></div>
+                            <div>
+                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">En Curso</p>
+                                <h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-active">0</h3>
+                            </div>
+                        </div>
+                        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
+                            <div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-red-500 shrink-0"><i data-lucide="alert-triangle" class="w-6 h-6"></i></div>
+                            <div>
+                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Incidencias</p>
+                                <h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-issues">0</h3>
+                            </div>
                         </div>
                     </div>
-                </div>
 
-                <div id="kanbanBoard" class="kanban-board flex-1">
+                    <div class="bg-white p-4 rounded-[1.5rem] shadow-sm border border-slate-100 space-y-4 sticky top-0 z-10">
+                        <div class="flex flex-wrap gap-4 items-center">
+                            <div class="relative flex-1 min-w-[250px]">
+                                <i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
+                                <input type="text" id="searchFilter" oninput="renderLists()" placeholder="Buscar por cliente, REF, población, compañía, teléfono..." class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-blue-500 outline-none transition-all">
+                            </div>
+                            <div class="relative w-full md:w-64">
+                                <select id="opFilter" onchange="renderLists()" class="w-full bg-slate-50 border border-slate-200 text-xs font-black px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 uppercase tracking-widest text-slate-600 appearance-none pr-10 cursor-pointer">
+                                    <option value="ALL">TODOS LOS OPERARIOS</option>
+                                </select>
+                                <i data-lucide="chevron-down" class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
+                            </div>
+                        </div>
+                        
+                        <div class="flex flex-wrap gap-2 items-center border-t border-slate-100 pt-3" id="statusPills">
+                            <span class="text-[10px] font-black text-slate-400 uppercase mr-2"><i data-lucide="loader-2" class="w-3 h-3 animate-spin inline"></i> Cargando estados...</span>
+                        </div>
                     </div>
 
+                    <div id="servicesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-12">
+                        </div>
+
+                </div>
             </main>
         </div>
     </div>
@@ -149,6 +158,7 @@
                         <h3 class="font-black text-slate-800 text-xl leading-none tracking-tight">#<span id="detRef"></span></h3>
                     </div>
                 </div>
+                
                 <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 truncate max-w-[250px]"></span>
@@ -183,6 +193,7 @@
                             </p>
                         </div>
                     </div>
+
                     <div>
                         <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-2">Descripción de la Avería</p>
                         <div class="bg-amber-50/60 border border-amber-100 p-5 rounded-[1.5rem] text-sm font-medium text-slate-700 min-h-[120px] max-h-48 overflow-y-auto no-scrollbar shadow-inner leading-relaxed" id="detDesc"></div>
@@ -211,7 +222,7 @@
                                 <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>
                                     <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>
@@ -262,48 +273,84 @@
     <script src="js/layout.js"></script>
     <script>
         let localData = [];
-        let systemStatuses = []; // Guardará todos los estados de la DB
+        let systemStatuses = []; 
+        let activeStatusFilter = 'ALL';
 
-        document.addEventListener("DOMContentLoaded", () => {
+        const colorDict = {
+            'gray': { bg: 'bg-slate-100', text: 'text-slate-600', dot: 'bg-slate-500', border: 'border-slate-200' },
+            'blue': { bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500', border: 'border-blue-200' },
+            'emerald': { bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500', border: 'border-emerald-200' },
+            'amber': { bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500', border: 'border-amber-200' },
+            'orange': { bg: 'bg-orange-100', text: 'text-orange-700', dot: 'bg-orange-500', border: 'border-orange-200' },
+            'red': { bg: 'bg-red-100', text: 'text-red-700', dot: 'bg-red-500', border: 'border-red-200' },
+            'purple': { bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500', border: 'border-purple-200' },
+            'indigo': { bg: 'bg-indigo-100', text: 'text-indigo-700', dot: 'bg-indigo-500', border: 'border-indigo-200' },
+            'rose': { bg: 'bg-rose-100', text: 'text-rose-700', dot: 'bg-rose-500', border: 'border-rose-200' }
+        };
+
+        document.addEventListener("DOMContentLoaded", async () => {
             if (!localStorage.getItem("token")) window.location.href = "index.html";
-            loadInitialData();
-            setInterval(refreshPanelOnly, 20000); 
+            await loadStatuses();
+            refreshPanel();
+            loadGuilds();
+            setInterval(refreshPanel, 20000); 
         });
 
-        async function loadInitialData() {
-            await loadStatuses();
-            await loadGuilds();
-            await refreshPanelOnly();
-        }
-
-        // NUEVO: Cargar los estados reales desde la DB
+        // 1. CARGAMOS LOS ESTADOS DEL SISTEMA
         async function loadStatuses() {
             try {
                 const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
                 const data = await res.json();
                 if (data.ok) {
                     systemStatuses = data.statuses;
+                    renderStatusPills();
                     
-                    // Rellenar filtro superior
-                    const filterSelect = document.getElementById('statusFilter');
-                    filterSelect.innerHTML = '<option value="ALL">TODOS LOS ESTADOS</option>';
-                    systemStatuses.forEach(st => {
-                        // Omitimos los finales (Terminado/Anulado) por defecto en el panel operativo para no saturarlo, 
-                        // pero los dejamos en el filtro para que se puedan buscar
-                        filterSelect.innerHTML += `<option value="${st.id}">${st.name}</option>`;
-                    });
-
-                    // Rellenar selector del modal de detalles
+                    // Llenar el selector del Modal
                     const modalSelect = document.getElementById('detStatusMap');
                     modalSelect.innerHTML = '';
                     systemStatuses.forEach(st => {
-                        modalSelect.innerHTML += `<option value="${st.id}">👉 ${st.name}</option>`;
+                        modalSelect.innerHTML += `<option value="${st.id}">👉 ${st.name.toUpperCase()}</option>`;
                     });
                 }
             } catch (e) { console.error("Error cargando estados:", e); }
         }
 
-        async function refreshPanelOnly() {
+        // 2. RENDERIZAR BOTONERA DE ESTADOS (CHIPS)
+        function renderStatusPills() {
+            const container = document.getElementById('statusPills');
+            let html = `
+                <button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-bold transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-800 text-white border-slate-800 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}">
+                    TODOS
+                </button>
+            `;
+            
+            systemStatuses.forEach(st => {
+                // Por defecto no mostramos los finales en la botonera principal para no saturar, salvo que haya muchos.
+                if(st.is_final) return; 
+
+                const isActive = activeStatusFilter === String(st.id);
+                const colorData = colorDict[st.color] || colorDict['gray'];
+                
+                const activeClasses = `bg-white border-${st.color}-400 text-${st.color}-700 shadow-md ring-2 ring-${st.color}-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 ${colorData.dot}"></div>
+                        ${st.name}
+                    </button>
+                `;
+            });
+            container.innerHTML = html;
+        }
+
+        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")}` } 
@@ -312,7 +359,7 @@
                 if (data.ok) { 
                     localData = data.services; 
                     updateOperatorFilter(); 
-                    renderBoard(); 
+                    renderLists(); 
                 }
             } catch (e) { console.error(e); }
         }
@@ -328,180 +375,176 @@
         }
 
         // ==========================================
-        // 🚀 NUEVO RENDERIZADOR DE KANBAN DINÁMICO
+        // 🚀 CÁLCULO DE ESTADOS Y RENDERIZADO GRID
         // ==========================================
-        function renderBoard() {
-            if(systemStatuses.length === 0) return; // Si no hay estados cargados, no hace nada
+        function getServiceStateInfo(s) {
+            const raw = s.raw_data || {};
+            const dbStat = raw.status_operativo;
             
+            // 1. Si está en la bolsa buscando (Prioridad máxima visual)
+            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: true };
+            }
+
+            // 2. Fallbacks históricos para compatibilidad
+            if (!s.assigned_name || dbStat === 'sin_asignar') {
+                const found = systemStatuses.find(st => st.name.toLowerCase().includes('pendiente de asignar')) || systemStatuses[0];
+                return { id: found?.id, name: found?.name || 'Sin Asignar', color: found?.color || 'gray', isBlocked: false };
+            }
+            if (dbStat === 'asignado_operario') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('asignado')) || systemStatuses[1], isBlocked: false };
+            if (dbStat === 'citado') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('citado')) || systemStatuses[3], isBlocked: false };
+            if (dbStat === 'de_camino') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('camino')) || systemStatuses[4], isBlocked: false };
+            if (dbStat === 'trabajando') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('trabajando')) || systemStatuses[5], isBlocked: false };
+            if (dbStat === 'incidencia') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('incidencia')) || systemStatuses[6], isBlocked: false };
+            if (dbStat === 'terminado') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('terminado')) || systemStatuses[7], isBlocked: false };
+
+            // 3. Match directo por ID Numérico (El nuevo estándar)
+            const foundObj = systemStatuses.find(st => String(st.id) === String(dbStat));
+            if (foundObj) return { ...foundObj, isBlocked: false };
+
+            // 4. Último recurso inferido
+            if (s.assigned_name && (!raw.scheduled_date || raw.scheduled_date === "")) {
+                const f = systemStatuses.find(st => st.name.toLowerCase().includes('pendiente de cita') || st.name.toLowerCase().includes('falta fecha')) || systemStatuses[2];
+                return { ...f, isBlocked: false };
+            }
+            if (s.assigned_name && raw.scheduled_date) {
+                const f = systemStatuses.find(st => st.name.toLowerCase().includes('citado')) || systemStatuses[3];
+                return { ...f, isBlocked: false };
+            }
+            
+            return { id: 'unknown', name: 'Desconocido', color: 'gray', isBlocked: false };
+        }
+
+        function renderLists() {
+            if(systemStatuses.length === 0) return;
+
             const searchTerm = document.getElementById('searchFilter').value.toLowerCase();
             const selectedOp = document.getElementById('opFilter').value;
-            const selectedStatus = document.getElementById('statusFilter').value;
 
-            // Filtro Global
+            // KPIs
+            let kpiUnassigned = 0;
+            let kpiScheduled = 0;
+            let kpiActive = 0;
+            let kpiIssues = 0;
+
             const filteredData = localData.filter(s => {
-                const raw = s.raw_data;
+                const raw = s.raw_data || {};
                 const name = (raw["Nombre Cliente"] || raw["CLIENTE"] || "").toLowerCase();
                 const addr = (raw["Dirección"] || raw["DOMICILIO"] || "").toLowerCase();
-                const comp = (raw["Compañía"] || raw["COMPAÑIA"] || raw["Procedencia"] || "").toLowerCase();
                 const pop = (raw["Población"] || raw["POBLACION-PROVINCIA"] || "").toLowerCase();
                 const phone = (raw["Teléfono"] || raw["TELEFONO"] || "").toLowerCase();
+                const comp = (raw["Compañía"] || raw["COMPAÑIA"] || raw["Procedencia"] || "").toLowerCase();
                 const ref = (s.service_ref || "").toLowerCase();
                 const assigned = s.assigned_name || "";
-                
-                // Mapeo inverso: El backend antiguo de "scraped" guarda textos como 'citado'.
-                // Ahora debemos casarlos con los IDs reales de systemStatuses.
-                // Para no romper la DB existente, buscamos por ID o por coincidencia de nombre.
-                let currentStatusId = "ALL";
-                const dbStatusText = s.raw_data.status_operativo;
-                
-                if (!s.assigned_name || dbStatusText === 'sin_asignar') {
-                    currentStatusId = systemStatuses.find(st => st.name.toLowerCase().includes('pendiente'))?.id || "ALL";
-                } else if (dbStatusText === 'asignado_operario') {
-                    currentStatusId = systemStatuses.find(st => st.name.toLowerCase() === 'asignado')?.id || "ALL";
-                } else if (dbStatusText === 'citado' || (!dbStatusText && s.raw_data.scheduled_date)) {
-                    currentStatusId = systemStatuses.find(st => st.name.toLowerCase().includes('citado'))?.id || "ALL";
-                } else {
-                    // Si el status_operativo de la DB ya es un ID numérico (del nuevo selector)
-                    const foundStatus = systemStatuses.find(st => String(st.id) === String(dbStatusText));
-                    if (foundStatus) currentStatusId = foundStatus.id;
-                }
-                
-                // Guardamos el ID calculado en el objeto para poder agruparlo luego fácilmente
-                s._calculated_status_id = String(currentStatusId);
+
+                // Calculamos el estado real
+                const stateInfo = getServiceStateInfo(s);
+                s._stateInfo = stateInfo; // Lo guardamos para pintar la tarjeta
+
+                // Lógica de KPIs
+                const stName = stateInfo.name.toLowerCase();
+                if (stName.includes('asignar') || stateInfo.isBlocked) kpiUnassigned++;
+                else if (stName.includes('citado')) kpiScheduled++;
+                else if (stName.includes('camino') || stName.includes('trabajando')) kpiActive++;
+                else if (stName.includes('incidencia') || stName.includes('pausa')) kpiIssues++;
 
                 const matchesSearch = searchTerm === "" || name.includes(searchTerm) || ref.includes(searchTerm) || addr.includes(searchTerm) || pop.includes(searchTerm) || phone.includes(searchTerm) || comp.includes(searchTerm);
                 const matchesOp = selectedOp === "ALL" || assigned === selectedOp;
-                const matchesStatus = selectedStatus === "ALL" || String(currentStatusId) === String(selectedStatus);
+                
+                // Filtro por la botonera de chips
+                const matchesStatus = activeStatusFilter === "ALL" || String(stateInfo.id) === activeStatusFilter;
 
                 return matchesSearch && matchesOp && matchesStatus;
             });
 
-            const board = document.getElementById('kanbanBoard');
-            board.innerHTML = ""; // Limpiamos el tablero
+            // Actualizamos Dashboards Superiores
+            document.getElementById('kpi-unassigned').innerText = kpiUnassigned;
+            document.getElementById('kpi-scheduled').innerText = kpiScheduled;
+            document.getElementById('kpi-active').innerText = kpiActive;
+            document.getElementById('kpi-issues').innerText = kpiIssues;
 
-            // Mapeo de colores de Tailwind para los estados dinámicos
-            const colorMap = {
-                'gray': { bg: 'bg-slate-100/50', border: 'border-slate-200/60', dot: 'bg-slate-500', shadow: 'shadow-slate-500/50' },
-                'blue': { bg: 'bg-blue-50/50', border: 'border-blue-200/60', dot: 'bg-blue-500', shadow: 'shadow-blue-500/50' },
-                'emerald': { bg: 'bg-emerald-50/50', border: 'border-emerald-200/60', dot: 'bg-emerald-500', shadow: 'shadow-emerald-500/50' },
-                'rose': { bg: 'bg-rose-50/50', border: 'border-rose-200/60', dot: 'bg-rose-500', shadow: 'shadow-rose-500/50' },
-                'amber': { bg: 'bg-amber-50/50', border: 'border-amber-200/60', dot: 'bg-amber-500', shadow: 'shadow-amber-500/50' },
-                'indigo': { bg: 'bg-indigo-50/50', border: 'border-indigo-200/60', dot: 'bg-indigo-500', shadow: 'shadow-indigo-500/50' },
-                'purple': { bg: 'bg-purple-50/50', border: 'border-purple-200/60', dot: 'bg-purple-500', shadow: 'shadow-purple-500/50' },
-                'red': { bg: 'bg-red-50/50', border: 'border-red-200/60', dot: 'bg-red-500', shadow: 'shadow-red-500/50' }
-            };
-
-            // Creamos una columna para cada estado (Ocultamos los finales a menos que se filtren explícitamente)
-            systemStatuses.forEach(st => {
-                if (st.is_final && selectedStatus !== String(st.id) && searchTerm === "") return; // No pintar Finalizados en vista general salvo que se busque
-
-                const servicesInThisStatus = filteredData.filter(s => s._calculated_status_id === String(st.id));
-                const colors = colorMap[st.color] || colorMap['gray'];
-
-                const column = document.createElement('div');
-                column.className = `kanban-column space-y-4 p-4 rounded-[2rem] border ${colors.bg} ${colors.border}`;
-                
-                let cardsHtml = servicesInThisStatus.length > 0 
-                    ? servicesInThisStatus.map(s => cardTemplate(s, st.color, st.name)).join('')
-                    : '<p class="text-center py-10 text-slate-400 text-xs font-bold uppercase border-2 border-dashed border-slate-200/50 rounded-[1.5rem] bg-white/30">Vacío</p>';
-
-                column.innerHTML = `
-                    <div class="flex items-center justify-between px-2 pb-2 border-b ${colors.border}">
-                        <div class="flex items-center gap-2">
-                            <div class="w-2.5 h-2.5 rounded-full ${colors.dot} shadow-[0_0_10px_currentColor]"></div>
-                            <h3 class="font-black text-slate-700 uppercase text-[10px] tracking-widest">${st.name}</h3>
-                        </div>
-                        <span class="text-[10px] font-black text-slate-400 bg-white px-2 py-0.5 rounded-lg shadow-sm">${servicesInThisStatus.length}</span>
-                    </div>
-                    <div class="space-y-3 overflow-y-auto max-h-[calc(100vh-280px)] no-scrollbar pb-10">
-                        ${cardsHtml}
-                    </div>
-                `;
-                board.appendChild(column);
-            });
+            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="inbox" 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 con los filtros</p>
+                   </div>`;
 
             lucide.createIcons();
         }
 
-        // ==========================================
-        // RESTO DE FUNCIONES INTACTAS
-        // ==========================================
-
-        function cardTemplate(s, colorName, label) {
+        function buildGridCard(s) {
             const raw = s.raw_data || {};
             const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado Sin Nombre";
             const addr = raw["Dirección"] || raw["DOMICILIO"] || "---";
             const pop = raw["Población"] || raw["POBLACION-PROVINCIA"] || "";
             const fullAddr = `${addr} ${pop}`.trim();
-            
             const cita = raw.scheduled_date ? `${raw.scheduled_date} | ${raw.scheduled_time}` : 'Pendiente 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;
+            const colorData = colorDict[stateInfo.color] || colorDict['gray'];
+            
             let iconEstado = 'tag';
             if(raw.scheduled_date) iconEstado = 'calendar';
-            if(label.toLowerCase().includes('camino')) iconEstado = 'car';
-            if(label.toLowerCase().includes('reparaci') || label.toLowerCase().includes('trabaja')) iconEstado = 'wrench';
-            if(label.toLowerCase().includes('incidencia')) iconEstado = 'alert-triangle';
-            if(label.toLowerCase().includes('terminad') || label.toLowerCase().includes('finaliz')) iconEstado = 'check-circle';
+            if(stateInfo.name.toLowerCase().includes('camino')) iconEstado = 'car';
+            if(stateInfo.name.toLowerCase().includes('reparaci') || stateInfo.name.toLowerCase().includes('trabaja')) iconEstado = 'wrench';
+            if(stateInfo.name.toLowerCase().includes('incidencia')) iconEstado = 'alert-triangle';
 
-            const colorClasses = {
-                'rose': 'bg-rose-100 text-rose-600',
-                'blue': 'bg-blue-100 text-blue-600',
-                'emerald': 'bg-emerald-100 text-emerald-600',
-                'amber': 'bg-amber-100 text-amber-600',
-                'orange': 'bg-orange-100 text-orange-600',
-                'red': 'bg-red-100 text-red-600',
-                'purple': 'bg-purple-100 text-purple-600',
-                'indigo': 'bg-indigo-100 text-indigo-600',
-                'gray': 'bg-slate-200 text-slate-600'
-            };
-            const badgeClass = colorClasses[colorName] || colorClasses['gray'];
-
-            const isBlocked = !s.assigned_name && (s.automation_status === 'in_progress' || s.automation_status === 'failed');
+            const isBlocked = stateInfo.isBlocked;
             const clickAction = isBlocked ? `shakeCard(this, '${s.automation_status}'); event.stopPropagation();` : `openDetail(${s.id})`;
             const cursorStyle = isBlocked ? 'cursor-not-allowed' : 'cursor-pointer';
 
             return `
-            <div class="bg-white p-4 rounded-3xl border border-slate-200 shadow-sm card-hover text-left flex flex-col gap-3 relative ${cursorStyle}" onclick="${clickAction}">
-                <div class="flex items-center justify-between w-full">
-                    <span class="text-[9px] font-black ${badgeClass} px-2.5 py-1 rounded-lg uppercase tracking-wider shadow-sm flex items-center gap-1.5 truncate max-w-[60%]">
-                        ${isBlocked ? '<span class="w-1.5 h-1.5 bg-current rounded-full pulse-slow opacity-70 shrink-0"></span>' : ''}
-                        <span class="truncate">${label}</span>
-                    </span>
-                    <span class="text-[9px] text-slate-400 font-bold uppercase bg-slate-50 border border-slate-100 px-2 py-1 rounded-lg shrink-0">#${s.service_ref}</span>
+            <div class="bg-white p-5 rounded-3xl border border-slate-200 shadow-sm card-hover text-left flex flex-col justify-between relative ${cursorStyle}" onclick="${clickAction}">
+                
+                <div class="space-y-3">
+                    <div class="flex items-start justify-between w-full gap-2">
+                        <span class="text-[9px] font-black ${colorData.bg} ${colorData.text} px-2.5 py-1.5 rounded-lg uppercase tracking-wider flex items-center gap-1.5 truncate border ${colorData.border}">
+                            ${isBlocked ? `<span class="w-1.5 h-1.5 bg-current rounded-full pulse-slow opacity-70 shrink-0"></span>` : `<div class="w-2 h-2 rounded-full ${colorData.dot}"></div>`}
+                            <span class="truncate">${stateInfo.name}</span>
+                        </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}
+                        </p>
+                    </div>
                 </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-sm leading-tight line-clamp-1" title="${name}">${name}</h4>
-                </div>
-                <div class="bg-slate-50/50 p-2.5 rounded-xl border border-slate-100">
-                    <p class="text-[10px] text-slate-600 font-medium uppercase line-clamp-1 flex items-center gap-1.5" title="${fullAddr}">
-                        <i data-lucide="map-pin" class="w-3 h-3 text-slate-400 shrink-0"></i> ${fullAddr}
-                    </p>
-                </div>
-                <div class="flex items-center justify-between mt-1 pt-3 border-t border-slate-100">
-                    <div class="flex items-center gap-1.5 min-w-0">
-                        <div class="bg-slate-100 p-1 rounded-md text-slate-500 shrink-0"><i data-lucide="hard-hat" class="w-3 h-3"></i></div>
-                        <span class="text-[9px] font-black text-slate-600 uppercase truncate" title="${s.assigned_name || 'Sin asignar'}">${s.assigned_name || 'Sin asignar'}</span>
+
+                <div class="flex items-center justify-between mt-4 pt-4 border-t border-slate-100">
+                    <div class="flex items-center gap-2 min-w-0">
+                        <div class="bg-slate-100 p-1.5 rounded-lg text-slate-500 shrink-0"><i data-lucide="hard-hat" class="w-3.5 h-3.5"></i></div>
+                        <span class="text-[10px] font-black text-slate-600 uppercase truncate" title="${s.assigned_name || 'Sin asignar'}">${s.assigned_name || 'Sin asignar'}</span>
                     </div>
                     ${raw.scheduled_date && !isBlocked ? `
-                    <div class="flex items-center gap-1.5 text-blue-600 shrink-0 ml-2">
-                        <i data-lucide="${iconEstado}" class="w-3 h-3"></i>
+                    <div class="flex items-center gap-1.5 text-blue-600 shrink-0 ml-2 bg-blue-50 px-2 py-1 rounded-md border border-blue-100">
+                        <i data-lucide="${iconEstado}" class="w-3.5 h-3.5"></i>
                         <span class="text-[9px] font-black uppercase">${cita}</span>
                     </div>` : ''}
                 </div>
             </div>`;
         }
 
+        // ==========================================
+        // FUNCIONES DE MODALES Y ACCIONES
+        // ==========================================
+
         function shakeCard(element, status) {
             element.classList.add('shake');
             setTimeout(() => element.classList.remove('shake'), 400);
-            
-            if (status === 'in_progress') {
-                showToast("⏳ El robot está asignando este servicio por WhatsApp...", "warning");
-            } else {
-                showToast("📍 Este servicio está en la bolsa esperando a que un operario lo coja.", "warning");
-            }
+            if (status === 'in_progress') { showToast("⏳ El robot está asignando este servicio por WhatsApp...", "warning"); } 
+            else { showToast("📍 Este servicio está en la bolsa esperando a que un operario lo coja.", "warning"); }
         }
 
         function showToast(msg, type = 'success') {
@@ -552,7 +595,9 @@
             document.getElementById('detAddrText').innerText = `${raw["Dirección"] || "Dirección no especificada"} ${raw["Población"] || ""}`;
             document.getElementById('detDesc').innerHTML = (raw["Descripción"] || raw["DESCRIPCION"] || "Sin notas.").replace(/\n/g, '<br>');
 
-            if (s.assigned_name && s._calculated_status_id !== 'sin_asignar') {
+            const stateInfo = s._stateInfo;
+
+            if (s.assigned_name && stateInfo.id !== 'bolsa' && !stateInfo.name.toLowerCase().includes('asignar')) {
                 document.getElementById('panelAsignado').classList.remove('hidden');
                 document.getElementById('panelSinAsignar').classList.add('hidden');
                 
@@ -561,14 +606,15 @@
                 document.getElementById('timeInput').value = raw.scheduled_time || "";
                 
                 // Mapeo del estado calculado al selector
-                document.getElementById('detStatusMap').value = s._calculated_status_id;
+                document.getElementById('detStatusMap').value = stateInfo.id;
             } else {
                 document.getElementById('panelAsignado').classList.add('hidden');
                 document.getElementById('panelSinAsignar').classList.remove('hidden');
                 
-                if(raw.guild_id) {
-                    document.getElementById('reGremio').value = raw.guild_id;
-                    loadOps(raw.guild_id, 'reOperario');
+                const rawGuildId = s.guild_id || raw['guild_id'] || raw.guild_id;
+                if(rawGuildId) {
+                    document.getElementById('reGremio').value = String(rawGuildId);
+                    loadOps(rawGuildId, 'reOperario');
                 } else {
                     document.getElementById('reGremio').value = "";
                     document.getElementById('reOperario').innerHTML = '<option value="">-- Elija gremio primero --</option>';
@@ -585,7 +631,6 @@
             const time = document.getElementById('timeInput').value;
             const statusMap = document.getElementById('detStatusMap').value;
 
-            // Busca el estado seleccionado en el array real de la base de datos
             const selectedSt = systemStatuses.find(st => String(st.id) === String(statusMap));
             
             if (selectedSt && !selectedSt.is_final && !date && !selectedSt.name.toLowerCase().includes('pausa')) {
@@ -598,14 +643,13 @@
             btn.disabled = true;
 
             try {
-                // Guarda directamente el ID del estado en status_operativo
                 await fetch(`${API_URL}/services/set-appointment/${id}`, {
                     method: 'PUT',
                     headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
                     body: JSON.stringify({ date, time, status_operativo: statusMap })
                 });
                 
-                closeDetailModal(); showToast("Estado actualizado"); refreshPanelOnly(); 
+                closeDetailModal(); showToast("Estado actualizado"); refreshPanel(); 
             } catch (e) { alert("Error"); } 
             finally { btn.innerHTML = originalContent; btn.disabled = false; }
         }
@@ -630,7 +674,7 @@
                     body: JSON.stringify({ guild_id, cp, useDelay })
                 });
                 const data = await res.json();
-                if(data.ok) { closeDetailModal(); showToast("Enviado a la rueda de WhatsApp"); refreshPanelOnly(); }
+                if(data.ok) { closeDetailModal(); showToast("Enviado a la rueda de WhatsApp"); refreshPanel(); }
                 else { alert(data.error || "No hay operarios en esa zona para ese gremio"); btn.innerHTML = '<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>'; lucide.createIcons(); }
             } catch (e) { alert("Error"); }
         }
@@ -645,6 +689,7 @@
             try {
                 const select = document.getElementById('reOperario');
                 const name = select.options[select.selectedIndex].text;
+                const estadoAsignado = systemStatuses.find(st => st.name.toLowerCase() === 'asignado') || systemStatuses[1];
 
                 await fetch(`${API_URL}/providers/scraped/${id}`, {
                     method: 'PUT',
@@ -654,10 +699,10 @@
                         assigned_to: assigned_to, 
                         assigned_name: name,
                         guild_id: guild_id,
-                        status_operativo: 'asignado_operario'
+                        status_operativo: estadoAsignado ? String(estadoAsignado.id) : 'asignado_operario'
                     })
                 });
-                closeDetailModal(); showToast("Asignado correctamente"); refreshPanelOnly(); 
+                closeDetailModal(); showToast("Asignado correctamente"); refreshPanel(); 
             } catch (e) { alert("Error"); }
         }
 
@@ -674,7 +719,7 @@
                     method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
                     body: JSON.stringify({ ...data, mode: action })
                 });
-                if (res.ok) { closeCreateModal(); refreshPanelOnly(); }
+                if (res.ok) { closeCreateModal(); refreshPanel(); }
             } catch(e) { alert("Error al guardar"); }
         }