From a67d96f12a33af3dcd52e580b6d4e3e8b4ea8c02 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sat, 14 Mar 2026 19:08:02 +0000
Subject: [PATCH] Actualizar configuracion.html

---
 configuracion.html | 136 ++++++++++++++++++++++++---------------------
 1 file changed, 72 insertions(+), 64 deletions(-)

diff --git a/configuracion.html b/configuracion.html
index c8e76d9..1de1cde 100644
--- a/configuracion.html
+++ b/configuracion.html
@@ -268,73 +268,81 @@
                             </div>
 
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                                <div class="bg-white rounded-xl shadow border border-gray-200 p-6 relative overflow-hidden group hover:border-blue-300 transition-colors">
-                                    <div class="flex items-center gap-3 mb-6">
-                                        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-blue-700 font-bold text-xl shadow-sm">M</div>
-                                        <div>
-                                            <h3 class="font-bold text-gray-800 text-lg">Multiasistencia</h3>
-                                            <p class="text-xs text-gray-500">Conexión Web</p>
+                                
+                                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:border-blue-300 transition-all flex flex-col justify-between">
+                                    <div>
+                                        <div class="flex items-center gap-3 mb-6">
+                                            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-blue-700 font-bold text-xl shadow-sm">M</div>
+                                            <div>
+                                                <h3 class="font-bold text-gray-800 text-lg">Multiasistencia</h3>
+                                                <p class="text-xs text-gray-500 font-medium">Conexión Web</p>
+                                            </div>
                                         </div>
+                                        <form onsubmit="saveProviderCreds(event, 'multiasistencia')" class="space-y-4">
+                                            <div>
+                                                <label class="block text-xs font-bold text-gray-600 mb-1 uppercase tracking-tight">Usuario / Código</label>
+                                                <input type="text" id="user_multiasistencia" class="w-full bg-gray-50 border border-gray-300 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 outline-none transition-all" placeholder="Ej: 123456">
+                                            </div>
+                                            <div>
+                                                <label class="block text-xs font-bold text-gray-600 mb-1 uppercase tracking-tight">Contraseña</label>
+                                                <input type="password" id="pass_multiasistencia" class="w-full bg-gray-50 border border-gray-300 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 outline-none transition-all" placeholder="••••••••">
+                                            </div>
+
+                                            <div class="flex items-center justify-between bg-blue-50/50 p-4 rounded-xl border border-blue-100 my-4">
+                                                <div class="flex flex-col">
+                                                    <span class="text-sm font-bold text-blue-900 italic">Auto-Asignar Urgencias</span>
+                                                    <span class="text-[10px] text-blue-500 font-bold uppercase tracking-tight">Envío directo a operarios</span>
+                                                </div>
+                                                <div class="relative inline-block w-12 h-6 align-middle select-none transition duration-200 ease-in">
+                                                    <input type="checkbox" id="auto_multiasistencia" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-transform duration-300 ease-in-out"/>
+                                                    <label for="auto_multiasistencia" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer transition-colors duration-300 ease-in-out"></label>
+                                                </div>
+                                            </div>
+
+                                            <button type="submit" class="w-full bg-blue-600 text-white font-black py-3.5 rounded-xl hover:bg-blue-700 transition shadow-lg shadow-blue-500/20 flex justify-center gap-2 active:scale-95">
+                                                <i data-lucide="save" class="w-5 h-5"></i> Guardar Acceso
+                                            </button>
+                                        </form>
                                     </div>
-                                    <form onsubmit="saveProviderCreds(event, 'multiasistencia')" class="space-y-4 relative z-10">
-                                        <div>
-                                            <label class="block text-xs font-bold text-gray-600 mb-1">Usuario / Código</label>
-                                            <input type="text" id="user_multiasistencia" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" placeholder="Ej: 123456">
-                                        </div>
-                                        <div>
-    <label class="block text-xs font-bold text-gray-600 mb-1">Contraseña</label>
-    <input type="password" id="pass_multiasistencia" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" placeholder="••••••••">
-</div>
-
-<div class="mt-4 flex items-center justify-between bg-blue-50/50 p-4 rounded-xl border border-blue-100">
-    <div class="flex flex-col">
-        <span class="text-sm font-bold text-blue-900 italic">Auto-Asignar Urgencias</span>
-        <span class="text-[10px] text-blue-500 font-bold uppercase tracking-tight">Envío directo a operarios</span>
-    </div>
-    <div class="relative inline-block w-12 align-middle select-none">
-        <input type="checkbox" id="auto_multiasistencia" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300"/>
-        <label for="auto_multiasistencia" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer transition-all duration-300"></label>
-    </div>
-</div>
-
-<button type="submit" class="w-full bg-blue-600 text-white font-bold py-2 rounded-lg hover:bg-blue-700 transition shadow-md flex justify-center gap-2 mt-4">
-    <i data-lucide="save" class="w-4 h-4"></i> Guardar Acceso
-</button>
-
-                                <div class="bg-white rounded-xl shadow border border-gray-200 p-6 relative overflow-hidden group hover:border-red-300 transition-colors">
-                                    <div class="flex items-center gap-3 mb-6">
-                                        <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center text-red-700 font-bold text-xl shadow-sm">H</div>
-                                        <div>
-                                            <h3 class="font-bold text-gray-800 text-lg">HomeServe</h3>
-                                            <p class="text-xs text-gray-500">Conexión Web</p>
-                                        </div>
-                                    </div>
-                                    <form onsubmit="saveProviderCreds(event, 'homeserve')" class="space-y-4 relative z-10">
-                                        <div>
-                                            <label class="block text-xs font-bold text-gray-600 mb-1">Código Proveedor</label>
-                                            <input type="text" id="user_homeserve" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 outline-none" placeholder="Ej: P-9999">
-                                        </div>
-                                        <div>
-    <label class="block text-xs font-bold text-gray-600 mb-1">Contraseña</label>
-    <input type="password" id="pass_homeserve" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 outline-none" placeholder="••••••••">
-</div>
-
-<div class="mt-4 flex items-center justify-between bg-red-50/50 p-4 rounded-xl border border-red-100">
-    <div class="flex flex-col">
-        <span class="text-sm font-bold text-red-900 italic">Auto-Asignar Urgencias</span>
-        <span class="text-[10px] text-red-500 font-bold uppercase tracking-tight">Envío directo a operarios</span>
-    </div>
-    <div class="relative inline-block w-12 align-middle select-none">
-        <input type="checkbox" id="auto_homeserve" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300"/>
-        <label for="auto_homeserve" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer transition-all duration-300"></label>
-    </div>
-</div>
-
-<button type="submit" class="w-full bg-red-600 text-white font-bold py-2 rounded-lg hover:bg-red-700 transition shadow-md flex justify-center gap-2 mt-4">
-    <i data-lucide="save" class="w-4 h-4"></i> Guardar Acceso
-</button>
-                                    </form>
                                 </div>
+
+                                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:border-red-300 transition-all flex flex-col justify-between">
+                                    <div>
+                                        <div class="flex items-center gap-3 mb-6">
+                                            <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center text-red-700 font-bold text-xl shadow-sm">H</div>
+                                            <div>
+                                                <h3 class="font-bold text-gray-800 text-lg">HomeServe</h3>
+                                                <p class="text-xs text-gray-500 font-medium">Conexión Web</p>
+                                            </div>
+                                        </div>
+                                        <form onsubmit="saveProviderCreds(event, 'homeserve')" class="space-y-4">
+                                            <div>
+                                                <label class="block text-xs font-bold text-gray-600 mb-1 uppercase tracking-tight">Código Proveedor</label>
+                                                <input type="text" id="user_homeserve" class="w-full bg-gray-50 border border-gray-300 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-red-500 outline-none transition-all" placeholder="Ej: P-9999">
+                                            </div>
+                                            <div>
+                                                <label class="block text-xs font-bold text-gray-600 mb-1 uppercase tracking-tight">Contraseña</label>
+                                                <input type="password" id="pass_homeserve" class="w-full bg-gray-50 border border-gray-300 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-red-500 outline-none transition-all" placeholder="••••••••">
+                                            </div>
+
+                                            <div class="flex items-center justify-between bg-red-50/50 p-4 rounded-xl border border-red-100 my-4">
+                                                <div class="flex flex-col">
+                                                    <span class="text-sm font-bold text-red-900 italic">Auto-Asignar Urgencias</span>
+                                                    <span class="text-[10px] text-red-500 font-bold uppercase tracking-tight">Envío directo a operarios</span>
+                                                </div>
+                                                <div class="relative inline-block w-12 h-6 align-middle select-none transition duration-200 ease-in">
+                                                    <input type="checkbox" id="auto_homeserve" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-transform duration-300 ease-in-out"/>
+                                                    <label for="auto_homeserve" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer transition-colors duration-300 ease-in-out"></label>
+                                                </div>
+                                            </div>
+
+                                            <button type="submit" class="w-full bg-red-600 text-white font-black py-3.5 rounded-xl hover:bg-red-700 transition shadow-lg shadow-red-500/20 flex justify-center gap-2 active:scale-95">
+                                                <i data-lucide="save" class="w-5 h-5"></i> Guardar Acceso
+                                            </button>
+                                        </form>
+                                    </div>
+                                </div>
+
                             </div>
                         </div>