diff --git a/servicios.html b/servicios.html
index 8e10a93..1686b2e 100644
--- a/servicios.html
+++ b/servicios.html
@@ -63,28 +63,28 @@
                     </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 id="kpiCard-unassigned" onclick="toggleKpiFilter('unassigned')" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md transition-all">
                             <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 id="kpiCard-scheduled" onclick="toggleKpiFilter('scheduled')" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md transition-all">
                             <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 id="kpiCard-waiting" onclick="toggleKpiFilter('waiting')" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md transition-all">
                             <div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-amber-500 shrink-0"><i data-lucide="clock" class="w-6 h-6"></i></div>
                             <div>
                                 <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Espera Cliente</p>
                                 <h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-waiting">0</h3>
                             </div>
                         </div>
-                        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
+                        <div id="kpiCard-incident" onclick="toggleKpiFilter('incident')" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4 cursor-pointer hover:shadow-md transition-all">
                             <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">Incidencia</p>
@@ -442,6 +442,29 @@
         let localData = [];
         let systemStatuses = []; 
         let activeStatusFilter = 'ALL';
+        let activeKpiFilter = 'ALL';
+
+        function toggleKpiFilter(kpiType) {
+            if (activeKpiFilter === kpiType) {
+                activeKpiFilter = 'ALL';
+            } else {
+                activeKpiFilter = kpiType;
+            }
+            
+            const cards = ['pte_operario', 'pte_cita', 'trabajando', 'finalizados'];
+            cards.forEach(c => {
+                const el = document.getElementById(`kpiCard-${c}`);
+                if (activeKpiFilter === c) {
+                    el.classList.add('ring-2', 'ring-blue-500', 'border-blue-500', 'shadow-md');
+                    el.classList.remove('border-slate-100');
+                } else {
+                    el.classList.remove('ring-2', 'ring-blue-500', 'border-blue-500', 'shadow-md');
+                    el.classList.add('border-slate-100');
+                }
+            });
+            
+            renderLists();
+        }
 
         const colorDict = {
             'gray': { bg: 'bg-slate-100', text: 'text-slate-600', dot: 'bg-slate-500', border: 'border-slate-200' },
@@ -599,10 +622,10 @@
             const weekValue = document.getElementById('weekFilter').value; 
 
             // Inicializamos contadores reales
-            let kpiUnassigned = 0;
-            let kpiScheduled = 0;
-            let kpiWaiting = 0;
-            let kpiIncident = 0;
+            let kpiPteOperario = 0;
+            let kpiPteCita = 0;
+            let kpiTrabajando = 0;
+            let kpiFinalizados = 0;
 
             const filteredData = localData.filter(s => {
                 const raw = s.raw_data || {};
@@ -611,18 +634,17 @@
 
                 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++;
-                }
+                // CONDICIONES CLARAS PARA CADA BLOQUE KPI
+                const isPteOperario = !s.assigned_name || stateInfo.id === 'bolsa' || stName.includes('asignar');
+                const isFinalizado = stateInfo.is_final || stName.includes('finalizado') || stName.includes('terminado') || stName.includes('anulado');
+                const isTrabajando = stName.includes('trabajando');
+                const isPteCita = s.assigned_name && !isFinalizado && !isTrabajando && (!raw.scheduled_date || raw.scheduled_date === "");
+
+                // Contamos
+                if (isPteOperario) kpiPteOperario++;
+                else if (isFinalizado) kpiFinalizados++;
+                else if (isTrabajando) kpiTrabajando++;
+                else if (isPteCita) kpiPteCita++;
 
                 const name = (raw["Nombre Cliente"] || raw["CLIENTE"] || "").toLowerCase();
                 const ref = (s.service_ref || "").toLowerCase();
@@ -631,7 +653,6 @@
                 const phone = (raw["Teléfono"] || raw["TELEFONO"] || raw["TELEFONOS"] || "").toLowerCase();
                 const comp = (raw["Compañía"] || raw["COMPAÑIA"] || raw["Procedencia"] || "").toLowerCase();
 
-                // Ahora sí busca en absolutamente todos los campos
                 const matchesSearch = searchTerm === "" || 
                     name.includes(searchTerm) || 
                     ref.includes(searchTerm) || 
@@ -650,13 +671,20 @@
                 
                 let matchesStatus = (activeStatusFilter === "ALL") ? true : String(stateInfo.id) === activeStatusFilter;
 
-                return matchesSearch && matchesOp && matchesWeek && matchesStatus;
+                // APLICAR FILTRO DEL KPI DE ARRIBA (EL BOTÓN DE CLIC)
+                let matchesKpi = true;
+                if (activeKpiFilter === 'pte_operario') matchesKpi = isPteOperario;
+                else if (activeKpiFilter === 'pte_cita') matchesKpi = isPteCita;
+                else if (activeKpiFilter === 'trabajando') matchesKpi = isTrabajando;
+                else if (activeKpiFilter === 'finalizados') matchesKpi = isFinalizado;
+
+                return matchesSearch && matchesOp && matchesWeek && matchesStatus && matchesKpi;
             });
 
-            document.getElementById('kpi-unassigned').innerText = kpiUnassigned;
-            document.getElementById('kpi-scheduled').innerText = kpiScheduled;
-            document.getElementById('kpi-waiting').innerText = kpiWaiting;
-            document.getElementById('kpi-incident').innerText = kpiIncident;
+            document.getElementById('kpi-pte-operario').innerText = kpiPteOperario;
+            document.getElementById('kpi-pte-cita').innerText = kpiPteCita;
+            document.getElementById('kpi-trabajando').innerText = kpiTrabajando;
+            document.getElementById('kpi-finalizados').innerText = kpiFinalizados;
 
             const grid = document.getElementById('servicesGrid');
             grid.innerHTML = filteredData.length > 0