From 67b65260725b5ad9fb59e04ad8af38a8464310dd Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Fri, 20 Feb 2026 16:48:13 +0000
Subject: [PATCH] Actualizar servicios.html

---
 servicios.html | 352 +++++++++++++++++++++++++++++--------------------
 1 file changed, 212 insertions(+), 140 deletions(-)
diff --git a/servicios.html b/servicios.html
index a3f04a2..6077d88 100644
--- a/servicios.html
+++ b/servicios.html
@@ -9,10 +9,33 @@
     <style>
         .fade-in { animation: fadeIn 0.3s ease-in-out; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        .no-scrollbar::-webkit-scrollbar { display: none; }
-        .card-hover:hover { transform: translateY(-2px); transition: all 0.2s; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
         
-        /* ANIMACIÓN DE TEMBLOR (SHAKE) PARA TARJETAS BLOQUEADAS */
+        /* Ocultar barra de scroll pero mantener funcionalidad */
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+        
+        /* 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; }
+        
         .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
         @keyframes shake {
             10%, 90% { transform: translate3d(-2px, 0, 0); }
@@ -20,6 +43,8 @@
             30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
             40%, 60% { transform: translate3d(6px, 0, 0); }
         }
+        .pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
     </style>
 </head>
 <body class="bg-slate-50 text-slate-800 font-sans antialiased text-left">
@@ -30,63 +55,45 @@
         <div class="flex-1 flex flex-col overflow-hidden relative">
             <div id="header-container"></div>
             
-            <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-full mx-auto space-y-6">
-                    
-                    <div class="flex justify-between items-center bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
-                        <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.</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>
+            <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">
-                        <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, 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">
+                <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>
                         </div>
-                    </div>
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-                        
-                        <div class="space-y-4 bg-slate-100/50 p-4 rounded-[2rem] border border-slate-200/60">
-                            <div class="flex items-center gap-2 px-2 pb-2 border-b border-slate-200">
-                                <div class="w-2.5 h-2.5 rounded-full bg-rose-500 shadow-[0_0_10px_rgba(244,63,94,0.5)]"></div>
-                                <h3 class="font-black text-slate-600 uppercase text-[10px] tracking-widest">Sin Asignar / En Pausa</h3>
-                            </div>
-                            <div id="unassigned-list" class="space-y-3"></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>
                         </div>
-
-                        <div class="space-y-4 bg-slate-100/50 p-4 rounded-[2rem] border border-slate-200/60">
-                            <div class="flex items-center gap-2 px-2 pb-2 border-b border-slate-200">
-                                <div class="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]"></div>
-                                <h3 class="font-black text-slate-600 uppercase text-[10px] tracking-widest">Asignados (Falta Fecha)</h3>
-                            </div>
-                            <div id="pending-list" class="space-y-3"></div>
-                        </div>
-
-                        <div class="space-y-4 bg-slate-100/50 p-4 rounded-[2rem] border border-slate-200/60">
-                            <div class="flex items-center gap-2 px-2 pb-2 border-b border-slate-200">
-                                <div class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]"></div>
-                                <h3 class="font-black text-slate-600 uppercase text-[10px] tracking-widest">Citados / En Curso</h3>
-                            </div>
-                            <div id="assigned-list" class="space-y-3"></div>
-                        </div>
-
                     </div>
                 </div>
+
+                <div id="kanbanBoard" class="kanban-board flex-1">
+                    </div>
+
             </main>
         </div>
     </div>
@@ -142,7 +149,6 @@
                         <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>
@@ -164,8 +170,7 @@
                                     <i data-lucide="phone" class="w-3.5 h-3.5"></i> <span id="detPhone"></span>
                                 </a>
                                 <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">
-                                    <i data-lucide="link" class="w-3 h-3"></i>
-                                    Copiar Portal Cliente
+                                    <i data-lucide="link" class="w-3 h-3"></i> Copiar Portal Cliente
                                 </button>
                             </div>
                         </div>
@@ -178,7 +183,6 @@
                             </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>
@@ -207,12 +211,6 @@
                                 <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">
-                                        <option value="sin_asignar">🔴 SIN ASIGNAR / EN PAUSA</option>
-                                        <option value="citado">📅 CITADO (Visita programada)</option>
-                                        <option value="de_camino">🚗 DE CAMINO AL DOMICILIO</option>
-                                        <option value="trabajando">🛠️ TRABAJANDO EN EL LUGAR</option>
-                                        <option value="incidencia">⚠️ CON INCIDENCIA / PAUSADO</option>
-                                        <option value="terminado">✅ TRABAJO TERMINADO</option>
                                     </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>
@@ -264,15 +262,48 @@
     <script src="js/layout.js"></script>
     <script>
         let localData = [];
+        let systemStatuses = []; // Guardará todos los estados de la DB
 
         document.addEventListener("DOMContentLoaded", () => {
             if (!localStorage.getItem("token")) window.location.href = "index.html";
-            refreshPanel();
-            loadGuilds();
-            setInterval(refreshPanel, 20000); 
+            loadInitialData();
+            setInterval(refreshPanelOnly, 20000); 
         });
 
-        async function refreshPanel() {
+        async function loadInitialData() {
+            await loadStatuses();
+            await loadGuilds();
+            await refreshPanelOnly();
+        }
+
+        // NUEVO: Cargar los estados reales desde la DB
+        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;
+                    
+                    // 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
+                    const modalSelect = document.getElementById('detStatusMap');
+                    modalSelect.innerHTML = '';
+                    systemStatuses.forEach(st => {
+                        modalSelect.innerHTML += `<option value="${st.id}">👉 ${st.name}</option>`;
+                    });
+                }
+            } catch (e) { console.error("Error cargando estados:", e); }
+        }
+
+        async function refreshPanelOnly() {
             try {
                 const res = await fetch(`${API_URL}/services/active`, { 
                     headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } 
@@ -281,7 +312,7 @@
                 if (data.ok) { 
                     localData = data.services; 
                     updateOperatorFilter(); 
-                    renderLists(); 
+                    renderBoard(); 
                 }
             } catch (e) { console.error(e); }
         }
@@ -296,63 +327,107 @@
             if (html.includes(`value="${currentValue}"`)) opSelect.value = currentValue;
         }
 
-        function renderLists() {
+        // ==========================================
+        // 🚀 NUEVO RENDERIZADOR DE KANBAN DINÁMICO
+        // ==========================================
+        function renderBoard() {
+            if(systemStatuses.length === 0) return; // Si no hay estados cargados, no hace nada
+            
             const searchTerm = document.getElementById('searchFilter').value.toLowerCase();
             const selectedOp = document.getElementById('opFilter').value;
+            const selectedStatus = document.getElementById('statusFilter').value;
 
+            // Filtro Global
             const filteredData = localData.filter(s => {
                 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 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);
 
-                const matchesSearch = searchTerm === "" || name.includes(searchTerm) || ref.includes(searchTerm) || addr.includes(searchTerm) || pop.includes(searchTerm) || phone.includes(searchTerm);
+                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);
 
-                return matchesSearch && matchesOp;
+                return matchesSearch && matchesOp && matchesStatus;
             });
 
-            const unassigned = filteredData.filter(s => !s.assigned_name || s.raw_data.status_operativo === 'sin_asignar');
-            const pending = filteredData.filter(s => s.assigned_name && (!s.raw_data.scheduled_date || s.raw_data.scheduled_date === "") && s.raw_data.status_operativo !== 'sin_asignar');
-            const assigned = filteredData.filter(s => s.raw_data.scheduled_date && s.raw_data.scheduled_date !== "" && s.raw_data.status_operativo !== 'sin_asignar');
+            const board = document.getElementById('kanbanBoard');
+            board.innerHTML = ""; // Limpiamos el tablero
 
-            document.getElementById('unassigned-list').innerHTML = unassigned.length > 0 
-                ? unassigned.map(s => {
-                    let color = 'rose';
-                    let label = s.assigned_name ? 'Pausado' : 'Sin Asignar';
-                    
-                    // COLORES INTELIGENTES PARA LA BOLSA DE TRABAJO
-                    if (!s.assigned_name) {
-                        if (s.automation_status === 'in_progress') { color = 'amber'; label = 'Buscando (WA)'; }
-                        if (s.automation_status === 'failed') { color = 'orange'; label = 'En Bolsa'; }
-                    }
-                    return cardTemplate(s, color, label);
-                }).join('')
-                : '<p class="text-center py-10 text-slate-300 text-xs font-bold uppercase border-2 border-dashed border-slate-200/50 rounded-[1.5rem]">Vacío</p>';
+            // 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' }
+            };
 
-            document.getElementById('pending-list').innerHTML = pending.length > 0 
-                ? pending.map(s => cardTemplate(s, 'blue', 'Falta Fecha')).join('')
-                : '<p class="text-center py-10 text-slate-300 text-xs font-bold uppercase border-2 border-dashed border-slate-200/50 rounded-[1.5rem]">Vacío</p>';
+            // 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);
+            });
 
-            document.getElementById('assigned-list').innerHTML = assigned.length > 0
-                ? assigned.map(s => {
-                    let color = 'emerald';
-                    let label = 'Citado';
-                    if(s.raw_data.status_operativo === 'de_camino') { color = 'blue'; label = 'De Camino'; }
-                    if(s.raw_data.status_operativo === 'trabajando') { color = 'amber'; label = 'Trabajando'; }
-                    if(s.raw_data.status_operativo === 'incidencia') { color = 'red'; label = 'Incidencia'; }
-                    if(s.raw_data.status_operativo === 'terminado') { color = 'purple'; label = 'Terminado'; }
-                    return cardTemplate(s, color, label);
-                }).join('')
-                : '<p class="text-center py-10 text-slate-300 text-xs font-bold uppercase border-2 border-dashed border-slate-200/50 rounded-[1.5rem]">Vacío</p>';
-            
             lucide.createIcons();
         }
 
-        function cardTemplate(s, color, label) {
+        // ==========================================
+        // RESTO DE FUNCIONES INTACTAS
+        // ==========================================
+
+        function cardTemplate(s, colorName, label) {
             const raw = s.raw_data || {};
             const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado Sin Nombre";
             const addr = raw["Dirección"] || raw["DOMICILIO"] || "---";
@@ -362,11 +437,12 @@
             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');
 
-            let iconEstado = 'calendar';
-            if(raw.status_operativo === 'de_camino') iconEstado = 'car';
-            if(raw.status_operativo === 'trabajando') iconEstado = 'wrench';
-            if(raw.status_operativo === 'incidencia') iconEstado = 'alert-triangle';
-            if(raw.status_operativo === 'terminado') iconEstado = 'check-circle';
+            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';
 
             const colorClasses = {
                 'rose': 'bg-rose-100 text-rose-600',
@@ -375,9 +451,11 @@
                 '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'
+                'purple': 'bg-purple-100 text-purple-600',
+                'indigo': 'bg-indigo-100 text-indigo-600',
+                'gray': 'bg-slate-200 text-slate-600'
             };
-            const badgeClass = colorClasses[color] || 'bg-slate-100 text-slate-600';
+            const badgeClass = colorClasses[colorName] || colorClasses['gray'];
 
             const isBlocked = !s.assigned_name && (s.automation_status === 'in_progress' || s.automation_status === 'failed');
             const clickAction = isBlocked ? `shakeCard(this, '${s.automation_status}'); event.stopPropagation();` : `openDetail(${s.id})`;
@@ -386,14 +464,14 @@
             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">
-                        ${isBlocked ? '<span class="w-1.5 h-1.5 bg-current rounded-full pulse-slow opacity-70"></span>' : ''}
-                        ${label}
+                    <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">#${s.service_ref}</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>
                 <div>
-                    <p class="text-[9px] font-black text-blue-500 uppercase tracking-widest mb-0.5">${companyName}</p>
+                    <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">
@@ -415,7 +493,6 @@
             </div>`;
         }
 
-        // FUNCIÓN QUE HACE TEMBLAR LA TARJETA
         function shakeCard(element, status) {
             element.classList.add('shake');
             setTimeout(() => element.classList.remove('shake'), 400);
@@ -456,7 +533,6 @@
             document.getElementById('detCompany').innerText = companyName;
             document.getElementById('detName').innerText = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado Sin Nombre";
             
-            // --- EXTRACCIÓN INTELIGENTE DE UN SOLO TELÉFONO ---
             const rawPhone = raw["Teléfono"] || raw["TELEFONOS"] || raw["TELEFONO"] || "";
             const matchPhone = rawPhone.toString().match(/[6789]\d{8}/);
             const singlePhone = matchPhone ? matchPhone[0] : "";
@@ -472,19 +548,20 @@
                 document.getElementById('detPhoneLink').classList.remove('text-blue-600');
                 document.getElementById('detPhoneLink').classList.add('text-slate-400', 'pointer-events-none');
             }
-            // --------------------------------------------------
 
             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 && raw.status_operativo !== 'sin_asignar') {
+            if (s.assigned_name && s._calculated_status_id !== 'sin_asignar') {
                 document.getElementById('panelAsignado').classList.remove('hidden');
                 document.getElementById('panelSinAsignar').classList.add('hidden');
                 
                 document.getElementById('detWorker').innerText = s.assigned_name;
                 document.getElementById('dateInput').value = raw.scheduled_date || "";
                 document.getElementById('timeInput').value = raw.scheduled_time || "";
-                document.getElementById('detStatusMap').value = raw.status_operativo || 'citado';
+                
+                // Mapeo del estado calculado al selector
+                document.getElementById('detStatusMap').value = s._calculated_status_id;
             } else {
                 document.getElementById('panelAsignado').classList.add('hidden');
                 document.getElementById('panelSinAsignar').classList.remove('hidden');
@@ -508,8 +585,11 @@
             const time = document.getElementById('timeInput').value;
             const statusMap = document.getElementById('detStatusMap').value;
 
-            if (statusMap !== 'sin_asignar' && !date && statusMap !== 'incidencia' && statusMap !== 'terminado') {
-                if(!confirm("No has asignado Fecha. ¿Deseas continuar?")) return;
+            // 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')) {
+                if(!confirm("No has asignado Fecha para este estado. ¿Deseas continuar?")) return;
             }
 
             const btn = document.getElementById('btnSaveAppt');
@@ -518,25 +598,19 @@
             btn.disabled = true;
 
             try {
-                if(statusMap === 'sin_asignar') {
-                    await fetch(`${API_URL}/providers/scraped/${id}`, {
-                        method: 'PUT',
-                        headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
-                        body: JSON.stringify({ status_operativo: statusMap, assigned_to: null, assigned_to_name: null })
-                    });
-                } else {
-                    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"); refreshPanel(); 
+                // 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(); 
             } catch (e) { alert("Error"); } 
             finally { btn.innerHTML = originalContent; btn.disabled = false; }
         }
 
-       async function sendToAutomate() {
+        async function sendToAutomate() {
             const id = document.getElementById('detId').value;
             const guild_id = document.getElementById('reGremio').value;
             const cp = document.getElementById('detCp').value;
@@ -556,7 +630,7 @@
                     body: JSON.stringify({ guild_id, cp, useDelay })
                 });
                 const data = await res.json();
-                if(data.ok) { closeDetailModal(); showToast("Enviado a la rueda de WhatsApp"); refreshPanel(); }
+                if(data.ok) { closeDetailModal(); showToast("Enviado a la rueda de WhatsApp"); refreshPanelOnly(); }
                 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"); }
         }
@@ -583,7 +657,7 @@
                         status_operativo: 'asignado_operario'
                     })
                 });
-                closeDetailModal(); showToast("Asignado correctamente"); refreshPanel(); 
+                closeDetailModal(); showToast("Asignado correctamente"); refreshPanelOnly(); 
             } catch (e) { alert("Error"); }
         }
 
@@ -600,7 +674,7 @@
                     method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
                     body: JSON.stringify({ ...data, mode: action })
                 });
-                if (res.ok) { closeCreateModal(); refreshPanel(); }
+                if (res.ok) { closeCreateModal(); refreshPanelOnly(); }
             } catch(e) { alert("Error al guardar"); }
         }
 
@@ -626,7 +700,6 @@
             if(data.ok) sel.innerHTML = '<option value="">Seleccionar operario...</option>' + data.operators.map(o => `<option value="${o.id}">${o.full_name}</option>`).join('');
         }
 
-        // ====== AQUÍ ESTÁ LA NUEVA FUNCIÓN CORREGIDA ======
         async function copyClientPortalLink() {
             const phone = document.getElementById('detPhone').innerText;
             const name = document.getElementById('detName').innerText;
@@ -644,7 +717,6 @@
             lucide.createIcons();
 
             try {
-                // Ahora usamos /ensure en lugar de /search, y enviamos los datos por POST
                 const res = await fetch(`${API_URL}/clients/ensure`, {
                     method: 'POST',
                     headers: { 
