diff --git a/configuracion.html b/configuracion.html
index a6df91a..ce3f017 100644
--- a/configuracion.html
+++ b/configuracion.html
@@ -7,18 +7,15 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
-        :root {
-            --primary: #2563eb;
-            --app-bg: #f4f7f9;
-        }
+        :root { --primary: #2563eb; --app-bg: #f4f7f9; }
         body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
         .fade-in { animation: fadeIn 0.4s ease-out forwards; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
         
-        /* Estilo para el Toggle Switch */
-        .dot { transition: all 0.3s ease-in-out; }
-        input:checked ~ .dot { transform: translateX(100%); background-color: #ffffff; }
-        input:checked ~ .block { background-color: #10b981; }
+        /* Estilo Toggle Pro */
+        .toggle-dot { transition: all 0.3s ease-in-out; }
+        input:checked ~ .toggle-bg { background-color: #10b981; }
+        input:checked ~ .toggle-dot { transform: translateX(1.5rem); }
     </style>
 </head>
 <body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative text-left">
@@ -28,85 +25,52 @@
             <a href="menu.html" class="w-10 h-10 shrink-0 bg-slate-50 rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:scale-95 transition-transform">
                 <i data-lucide="arrow-left" class="w-5 h-5"></i>
             </a>
-            <h1 class="text-xl font-black tracking-tight text-slate-900 leading-none truncate">Configuración</h1>
+            <h1 class="text-xl font-black tracking-tight text-slate-900">Configuración</h1>
         </div>
     </header>
 
     <main class="flex-1 overflow-y-auto p-5 fade-in">
-        
         <div class="space-y-6">
-            <div class="bg-white rounded-[2rem] p-6 shadow-sm border border-slate-100">
+            <div class="bg-white rounded-[2.5rem] p-6 shadow-sm border border-slate-100">
                 <div class="flex items-center gap-3 mb-6">
-                    <div class="bg-blue-100 p-2 rounded-xl text-blue-600">
-                        <i data-lucide="bot" class="w-5 h-5"></i>
-                    </div>
-                    <h3 class="font-black text-slate-800 uppercase text-xs tracking-widest">Automatismos Externos</h3>
+                    <div class="bg-blue-100 p-2 rounded-xl text-blue-600"><i data-lucide="refresh-cw" class="w-5 h-5"></i></div>
+                    <h3 class="font-black text-slate-800 uppercase text-xs tracking-widest">Sincronización HS</h3>
                 </div>
 
                 <div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                     <div class="flex-1 pr-4">
-                        <p class="font-black text-sm text-slate-800 leading-tight">Robot HomeServe / Multi</p>
-                        <p class="text-[10px] font-medium text-slate-400 mt-1 uppercase tracking-tighter">Sincronizar estados automáticamente al finalizar</p>
+                        <p class="font-black text-sm text-slate-800 leading-tight">Envío Automático</p>
+                        <p class="text-[10px] font-medium text-slate-400 mt-1 uppercase">Notificar cambios de estado a HomeServe</p>
                     </div>
                     
-                    <label for="toggleHS" class="flex items-center cursor-pointer">
+                    <label class="flex items-center cursor-pointer">
                         <div class="relative">
                             <input type="checkbox" id="toggleHS" class="sr-only" onchange="saveConfig()">
-                            <div class="block bg-slate-300 w-14 h-8 rounded-full transition-colors"></div>
-                            <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full shadow-md"></div>
+                            <div class="toggle-bg block bg-slate-300 w-12 h-6 rounded-full transition-colors"></div>
+                            <div class="toggle-dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full shadow transition-transform"></div>
                         </div>
                     </label>
                 </div>
                 
-                <p class="text-[9px] text-slate-400 mt-4 px-2 italic">
-                    * Si está activado, el robot actualizará la web de la aseguradora por ti al cambiar estados en esta App.
-                </p>
-            </div>
-
-            <div class="bg-white rounded-[2rem] p-6 shadow-sm border border-slate-100">
-                <div class="flex items-center gap-3 mb-4">
-                    <div class="bg-slate-100 p-2 rounded-xl text-slate-500">
-                        <i data-lucide="info" class="w-5 h-5"></i>
-                    </div>
-                    <h3 class="font-black text-slate-800 uppercase text-xs tracking-widest">Información</h3>
-                </div>
-                <div class="space-y-3">
-                    <div class="flex justify-between text-xs font-bold text-slate-400 px-1 uppercase">
-                        <span>Versión App</span>
-                        <span class="text-slate-600">2.1.0-PRO</span>
-                    </div>
-                    <div class="flex justify-between text-xs font-bold text-slate-400 px-1 uppercase">
-                        <span>ID Operario</span>
-                        <span id="displayId" class="text-slate-600">---</span>
-                    </div>
+                <div class="mt-4 space-y-2 px-2">
+                    <div class="flex items-center gap-2 text-[9px] font-bold text-slate-400 uppercase"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Citas agendadas</div>
+                    <div class="flex items-center gap-2 text-[9px] font-bold text-slate-400 uppercase"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> En camino / Llegada</div>
+                    <div class="flex items-center gap-2 text-[9px] font-bold text-slate-400 uppercase"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Finalización de servicios</div>
                 </div>
             </div>
         </div>
-
     </main>
 
     <script>
         document.addEventListener("DOMContentLoaded", () => {
             lucide.createIcons();
-            loadConfig();
-            
-            // Mostrar ID del usuario
-            const userId = localStorage.getItem("userId") || "N/A";
-            document.getElementById('displayId').innerText = userId;
+            const isAuto = localStorage.getItem("auto_homeserve") === "true";
+            document.getElementById('toggleHS').checked = isAuto;
         });
 
-        function loadConfig() {
-            // Buscamos si ya existe la configuración en el teléfono
-            const isAutoHS = localStorage.getItem("auto_homeserve") === "true";
-            document.getElementById('toggleHS').checked = isAutoHS;
-        }
-
         function saveConfig() {
             const isChecked = document.getElementById('toggleHS').checked;
             localStorage.setItem("auto_homeserve", isChecked);
-            
-            // Opcional: Feedback visual rápido
-            console.log("Configuración guardada: " + isChecked);
         }
     </script>
 </body>
