From 7b44ee8767dca0d140e7f3db928349ec24f2f4fc Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 15 Feb 2026 16:53:05 +0000
Subject: [PATCH] Actualizar usuarios.html

---
 usuarios.html | 64 ++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/usuarios.html b/usuarios.html
index 5604e70..0d2dc94 100644
--- a/usuarios.html
+++ b/usuarios.html
@@ -404,25 +404,51 @@
             });
         }
 
-        function renderUsersTable() {
-            const tbody = document.getElementById('usersListBody');
-            tbody.innerHTML = currentUsers.length === 0 ? `<tr><td colspan="5" class="p-8 text-center text-gray-300 font-bold uppercase tracking-widest text-left">Cargando equipo...</td></tr>` : "";
-            currentUsers.forEach(u => {
-                const uGuildNames = (u.guilds || []).map(gid => availableGuilds.find(ag => ag.id === gid)?.name).filter(Boolean).join(", ");
-                const uZonesHtml = (u.zones || []).map(z => `<span class="block text-[10px] font-bold text-blue-600 text-left">📍 ${z.city}: ${z.cps}</span>`).join("");
-                tbody.innerHTML += `
-                    <tr class="bg-white hover:bg-gray-50 transition border-b text-left">
-                        <td class="p-4"><div class="flex flex-col text-left"><span class="font-black text-slate-800 uppercase text-left">${u.full_name}</span><span class="text-[9px] text-gray-400 font-bold tracking-tighter text-left">${u.email}</span></div></td>
-                        <td class="p-4 font-black text-green-600 text-left">${u.phone}</td>
-                        <td class="p-4 text-left"><span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded text-[10px] font-black uppercase text-left">${u.role}</span><p class="text-[9px] text-gray-400 mt-1 uppercase font-bold text-left">${uGuildNames || '-'}</p></td>
-                        <td class="p-4 text-left">${uZonesHtml || '<span class="text-[9px] text-gray-300 italic text-left">Sin zona</span>'}</td>
-                        <td class="p-4 text-right space-x-3 text-left">
-                            <button onclick="editUser(${u.id})" class="text-blue-500 hover:text-blue-700 font-black text-xs uppercase tracking-widest text-left">Editar</button>
-                            <button onclick="deleteUser(${u.id})" class="text-red-400 hover:text-red-700 font-black text-xs uppercase tracking-widest text-left">Baja</button>
-                        </td>
-                    </tr>`;
-            });
-        }
+   function renderUsersTable() {
+    const tbody = document.getElementById('usersListBody');
+    tbody.innerHTML = currentUsers.length === 0 ? `<tr><td colspan="5" class="p-8 text-center text-gray-300 font-bold uppercase tracking-widest text-left">Cargando equipo...</td></tr>` : "";
+    
+    currentUsers.forEach(u => {
+        const uGuildNames = (u.guilds || []).map(gid => availableGuilds.find(ag => ag.id === gid)?.name).filter(Boolean).join(", ");
+        
+        // --- LÓGICA DE AGRUPACIÓN POR MUNICIPIO ---
+        const groupedZones = (u.zones || []).reduce((acc, current) => {
+            if (!acc[current.city]) {
+                acc[current.city] = [];
+            }
+            // Evitamos duplicados de CP en la misma ciudad
+            if (!acc[current.city].includes(current.cps)) {
+                acc[current.city].push(current.cps);
+            }
+            return acc;
+        }, {});
+
+        // Convertimos el objeto agrupado en HTML elegante
+        const uZonesHtml = Object.keys(groupedZones).map(city => {
+            const cps = groupedZones[city].join(", ");
+            return `<div class="mb-1 last:mb-0">
+                        <span class="font-black text-blue-600 text-[10px] uppercase">📍 ${city}</span>
+                        <span class="text-gray-500 text-[9px] font-medium">(${cps})</span>
+                    </div>`;
+        }).join("") || '<span class="text-[9px] text-gray-300 italic text-left">Sin zona</span>';
+
+        tbody.innerHTML += `
+            <tr class="bg-white hover:bg-gray-50 transition border-b text-left">
+                <td class="p-4"><div class="flex flex-col text-left"><span class="font-black text-slate-800 uppercase text-left">${u.full_name}</span><span class="text-[9px] text-gray-400 font-bold tracking-tighter text-left">${u.email}</span></div></td>
+                <td class="p-4 font-black text-green-600 text-left">${u.phone}</td>
+                <td class="p-4 text-left"><span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded text-[10px] font-black uppercase text-left">${u.role}</span><p class="text-[9px] text-gray-400 mt-1 uppercase font-bold text-left">${uGuildNames || '-'}</p></td>
+                <td class="p-4 text-left">
+                    <div class="max-h-24 overflow-y-auto no-scrollbar">
+                        ${uZonesHtml}
+                    </div>
+                </td>
+                <td class="p-4 text-right space-x-3 text-left">
+                    <button onclick="editUser(${u.id})" class="text-blue-500 hover:text-blue-700 font-black text-xs uppercase tracking-widest text-left">Editar</button>
+                    <button onclick="deleteUser(${u.id})" class="text-red-400 hover:text-red-700 font-black text-xs uppercase tracking-widest text-left">Baja</button>
+                </td>
+            </tr>`;
+    });
+}
 
         function showToast(msg, err=false){
              const t=document.getElementById('toast'), m=document.getElementById('toastMsg');