Añade selector de teléfonos (móvil/fijo) en la ficha de servicio, priorizando móviles

servicios.html

@@ -329,18 +329,20 @@
                             </button>
                         </div>
                         
-                        <div class="flex items-center gap-4 mb-4">
+                        <div class="flex items-center gap-4 mb-2">
                             <div class="flex items-center gap-1.5">
                                 <i data-lucide="phone" class="w-3.5 h-3.5 text-blue-600"></i>
                                 <input type="tel" id="editPhone" class="input-readonly text-sm text-blue-600 font-black w-32" readonly>
                                 <a id="btnCallPhone" href="#" class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 hidden" title="Llamar"><i data-lucide="phone-call" class="w-3.5 h-3.5"></i></a>
                             </div>
                             <div class="flex items-center gap-1.5 flex-1">
-                                <i data-lucide="map-pin" class="w-3.5 h-3.5 text-slate-400 shrink-0"></i> 
+                                <i data-lucide="map-pin" class="w-3.5 h-3.5 text-slate-400 shrink-0"></i>
                                 <textarea id="editAddr" rows="1" class="input-readonly w-full text-[11px] font-bold text-slate-600 resize-none uppercase" readonly></textarea>
                             </div>
                         </div>
 
+                        <div id="phoneChips" class="flex flex-wrap gap-1.5 mb-4"></div>
+
                         <hr class="border-slate-200 mb-4">
                         
                         <div class="grid grid-cols-2 gap-4 mb-4">
@@ -901,6 +903,44 @@
             setTimeout(() => { toast.classList.add('hidden'); }, 3500);
         }
 
+        // 📞 Pinta un chip por cada teléfono detectado (móviles primero), con botón de llamar,
+        // botón de WhatsApp, y un botón para usarlo como el teléfono "oficial" del expediente
+        // (rellena editPhone, que es el que se guarda en la base de datos al Guardar).
+        function renderPhoneChips(phones, activePhone) {
+            const cont = document.getElementById('phoneChips');
+            if (!cont) return;
+            if (!phones || phones.length === 0) { cont.innerHTML = ''; return; }
+            if (phones.length === 1 && phones[0].number === activePhone) { cont.innerHTML = ''; return; }
+
+            cont.innerHTML = phones.map(p => {
+                const isActive = p.number === activePhone;
+                const label = p.isMobile ? 'Móvil' : 'Fijo';
+                const icon = p.isMobile ? 'smartphone' : 'phone';
+                const extra = [p.contacto, p.horario].filter(Boolean).join(' · ');
+                return `
+                    <div class="flex items-center gap-1 rounded-lg border px-2 py-1 text-[10px] font-bold ${isActive ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-slate-200 bg-white text-slate-600'}" title="${extra}">
+                        <i data-lucide="${icon}" class="w-3 h-3"></i>
+                        <button type="button" onclick="usePhoneAsOfficial('${p.number}')" class="hover:underline">${p.number}</button>
+                        <span class="text-[8px] uppercase text-slate-400">${label}</span>
+                        <a href="tel:+34${p.number}" class="p-0.5 text-blue-600 hover:text-blue-800" title="Llamar a ${p.number}"><i data-lucide="phone-call" class="w-3 h-3"></i></a>
+                        <a href="https://wa.me/34${p.number}" target="_blank" class="p-0.5 text-green-600 hover:text-green-800" title="WhatsApp a ${p.number}"><i data-lucide="message-circle" class="w-3 h-3"></i></a>
+                    </div>`;
+            }).join('');
+            lucide.createIcons();
+        }
+
+        // Marca un teléfono concreto (elegido entre los detectados) como el oficial del
+        // expediente: actualiza el campo editable y el botón de llamada principal.
+        function usePhoneAsOfficial(number) {
+            const input = document.getElementById('editPhone');
+            if (input) input.value = number;
+            const callBtn = document.getElementById('btnCallPhone');
+            if (callBtn) { callBtn.href = `tel:+34${number}`; callBtn.classList.remove('hidden'); }
+            const s = localData.find(x => x.id === Number(document.getElementById('detId').value));
+            const allPhones = (s && Array.isArray(s.phones) && s.phones.length > 0) ? s.phones : [];
+            renderPhoneChips(allPhones, number);
+        }
+
         function openDetail(id, startInEditMode = false) {
             const s = localData.find(x => x.id === id);
             if (!s) return;
@@ -923,17 +963,30 @@
             const clientName = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado Sin Nombre";
             if(document.getElementById('editName')) document.getElementById('editName').value = clientName;
             
+            // 📞 Todos los teléfonos detectados para este servicio (móviles primero, ya vienen
+            // así ordenados desde la API). Si por lo que sea la API aún no los envía (caché vieja),
+            // recurrimos al match simple de siempre como red de seguridad.
             const rawPhone = raw["Teléfono"] || raw["TELEFONOS"] || raw["TELEFONO"] || "";
             const matchPhone = rawPhone.toString().match(/[6789]\d{8}/);
             const singlePhone = matchPhone ? matchPhone[0] : "";
-            if(document.getElementById('editPhone')) document.getElementById('editPhone').value = singlePhone;
+            const allPhones = Array.isArray(s.phones) && s.phones.length > 0
+                ? s.phones
+                : (singlePhone ? [{ number: singlePhone, isMobile: /^[67]/.test(singlePhone), horario: '', contacto: '' }] : []);
+
+            // El campo "editPhone" sigue siendo el teléfono "oficial" del expediente (editable
+            // manualmente y el que se guarda al pulsar Guardar); lo rellenamos con el mejor
+            // candidato (móvil si lo hay) pero el admin puede elegir otro con los chips de abajo.
+            const bestPhone = allPhones[0]?.number || singlePhone || "";
+            if(document.getElementById('editPhone')) document.getElementById('editPhone').value = bestPhone;
 
             const callBtn = document.getElementById('btnCallPhone');
             if (callBtn) {
-                if (singlePhone) { callBtn.href = `tel:+34${singlePhone}`; callBtn.classList.remove('hidden'); } 
+                if (bestPhone) { callBtn.href = `tel:+34${bestPhone}`; callBtn.classList.remove('hidden'); }
                 else { callBtn.classList.add('hidden'); }
             }
 
+            renderPhoneChips(allPhones, bestPhone);
+
             const fullAddr = `${raw["Dirección"] || ""} ${raw["Población"] || ""}`.trim();
             if(document.getElementById('editAddr')) document.getElementById('editAddr').value = fullAddr;