From 3f130ce7d5a5e99e5a7167b44f9560834c3aa1e5 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 22 Feb 2026 16:13:25 +0000
Subject: [PATCH] Actualizar servicios.html

---
 servicios.html | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/servicios.html b/servicios.html
index f1415b1..24314be 100644
--- a/servicios.html
+++ b/servicios.html
@@ -354,24 +354,29 @@
         }
 
         // 2. RENDERIZAR BOTONERA DE ESTADOS (CHIPS)
-        function renderStatusPills() {
+       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'}">
+                <button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-black tracking-widest transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-900 text-white border-slate-900 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}">
                     TODOS
                 </button>
             `;
             
             systemStatuses.forEach(st => {
                 const isActive = activeStatusFilter === String(st.id);
-                const colorData = colorDict[st.color] || colorDict['gray'];
+                // Usamos tu diccionario directamente para evitar fallos de Tailwind
+                const c = 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`;
+                // Extraemos el nombre del color base (ej: de 'bg-blue-100' sacamos 'blue')
+                const colorBase = c.bg.split('-')[1]; 
+                
+                // Clases seguras
+                const activeClasses = `bg-white border-${colorBase}-400 text-${colorBase}-700 shadow-md ring-2 ring-${colorBase}-100`;
                 const inactiveClasses = `bg-white border-slate-200 text-slate-500 hover:bg-slate-50`;
 
                 html += `
                     <button onclick="setStatusFilter('${st.id}')" class="px-4 py-2 rounded-xl text-xs font-bold border transition-all flex items-center gap-2 ${isActive ? activeClasses : inactiveClasses}">
-                        <div class="w-2 h-2 rounded-full ${colorData.dot}"></div>
+                        <div class="w-2 h-2 rounded-full ${c.dot}"></div>
                         ${st.name}
                     </button>
                 `;