diff --git a/calendario.html b/calendario.html
index 4ac1ca7..3457525 100644
--- a/calendario.html
+++ b/calendario.html
@@ -2,443 +2,942 @@
 <html lang="es">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-    <title>Calendario - IntegraRepara</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Configuración - IntegraRepara</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
     <style>
-        body { background-color: #f8fafc; -webkit-tap-highlight-color: transparent; }
-        .fade-in { animation: fadeIn 0.3s ease-out forwards; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        .no-scrollbar::-webkit-scrollbar { display: none; }
-        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-        
-        .main-content { padding-bottom: 120px; }
-        .day-card { transition: all 0.2s; }
-        .day-active { background-color: #1e3a8a; color: white; border-color: #1e3a8a; transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(30,58,138,0.3); }
-        .day-inactive { background-color: white; color: #64748b; border-color: #e2e8f0; }
-
-        /* Scroll del Modal */
-        #serviceModal { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; background: #f1f5f9; }
-        .modal-scroll-area { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 100px; }
-        
-        /* Caja de descripción sobria */
-        .desc-box { background: white; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 1.25rem; }
+        .fade-in { animation: fadeIn 0.3s ease-in-out; }
+        .scroller::-webkit-scrollbar { width: 6px; }
+        .scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
+        .toggle-checkbox:checked { transform: translateX(100%); border-color: #2563eb; }
+        .toggle-checkbox:checked + .toggle-label { background-color: #2563eb; }
+        .toggle-checkbox { top: 0; left: 0; z-index: 10; transition: all 0.3s ease; border-color: #cbd5e1; }
+        .toggle-label { background-color: #e2e8f0; transition: all 0.3s ease; cursor: pointer; }
+        .keyword-tag { animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+        @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+        .var-btn { @apply px-2 py-1 bg-white border border-gray-200 rounded text-xs font-mono font-medium text-gray-600 hover:border-blue-400 hover:text-blue-600 transition shadow-sm; }
     </style>
 </head>
-<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
+<body class="bg-gray-50 text-gray-800 font-sans h-screen overflow-hidden flex">
 
-    <header class="bg-white px-5 pt-safe mt-6 pb-4 shadow-sm z-20 shrink-0 border-b border-slate-200">
-        <div class="flex items-center gap-3 mb-4">
-            <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>
-            <div class="flex-1 min-w-0">
-                <p class="text-[10px] font-black text-blue-800 uppercase tracking-widest mb-0.5 truncate" id="monthYearDisplay">Cargando...</p>
-                <h1 class="text-xl font-black tracking-tight text-slate-900 leading-none truncate">Mi Agenda</h1>
-            </div>
-            <div class="flex gap-1 shrink-0">
-                <button onclick="changeWeek(-1)" class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:bg-slate-50 shadow-sm"><i data-lucide="chevron-left" class="w-5 h-5"></i></button>
-                <button onclick="changeWeek(1)" class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:bg-slate-50 shadow-sm"><i data-lucide="chevron-right" class="w-5 h-5"></i></button>
-            </div>
-        </div>
-        <div class="overflow-x-auto no-scrollbar py-2 -mx-5 px-5 flex gap-3" id="weekStrip"></div>
-    </header>
+    <div id="sidebar-container" class="h-full shrink-0"></div>
 
-    <main class="flex-1 overflow-y-auto no-scrollbar p-5 main-content relative z-10" id="mainArea">
-        <div id="loader" class="text-center py-10 opacity-50">
-            <i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto text-blue-900 mb-2"></i>
-            <p class="text-xs font-bold uppercase tracking-widest text-slate-400">Consultando Base de Datos...</p>
-        </div>
-        <div id="dayTitle" class="font-black text-slate-400 uppercase tracking-widest text-[10px] mb-4 hidden">Servicios</div>
-        <div id="servicesList" class="space-y-4 hidden fade-in"></div>
-    </main>
+    <div class="flex-1 flex flex-col h-full relative min-w-0">
+        <div id="header-container"></div>
+        
+        <main class="flex-1 flex flex-col overflow-hidden relative">
+            
+            <div class="bg-gray-50 p-6 pb-0 z-20 shrink-0">
+                <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
+                    <i data-lucide="settings" class="text-blue-600"></i> Configuración Avanzada
+                </h2>
 
-    <nav class="bg-white/95 backdrop-blur-md border-t border-slate-200 z-20 absolute bottom-0 left-0 w-full rounded-t-[2rem] shadow-[0_-10px_30px_rgba(0,0,0,0.03)]">
-        <div class="flex justify-around items-center px-3 pt-3 pb-8">
-            <a href="menu.html" class="flex flex-col items-center p-2 text-slate-400 hover:text-blue-900 w-20">
-                <i data-lucide="layout-grid" class="w-6 h-6 mb-1"></i>
-                <span class="text-[9px] font-black uppercase tracking-widest">Inicio</span>
-            </a>
-            <a href="calendario.html" class="flex flex-col items-center p-2 text-blue-900 w-20">
-                <i data-lucide="calendar-days" class="w-6 h-6 mb-1"></i>
-                <span class="text-[9px] font-black uppercase tracking-widest">Agenda</span>
-            </a>
-            <button onclick="logout()" class="flex flex-col items-center p-2 text-slate-400 w-20">
-                <i data-lucide="log-out" class="w-6 h-6 mb-1"></i>
-                <span class="text-[9px] font-bold uppercase tracking-widest">Salir</span>
-            </button>
-        </div>
-    </nav>
-
-    <div id="serviceModal" class="translate-y-full transition-transform duration-300">
-        <div class="pt-safe bg-white border-b border-slate-200 flex justify-between items-center p-4 shrink-0 shadow-sm">
-            <button onclick="closeModal()" class="bg-slate-100 p-2.5 rounded-full text-slate-600 active:scale-90 transition-transform"><i data-lucide="chevron-down" class="w-6 h-6"></i></button>
-            <div class="flex items-center gap-2 bg-slate-900 px-4 py-1.5 rounded-full">
-                <i data-lucide="clock" class="w-4 h-4 text-blue-300"></i>
-                <span class="font-black text-xs text-white uppercase" id="modTime">--:--</span>
-            </div>
-            <div class="w-10"></div>
-        </div>
-
-        <div class="modal-scroll-area p-4 space-y-4 no-scrollbar">
-            <input type="hidden" id="detId">
-            <input type="hidden" id="detPhoneRaw">
-
-            <div id="urgentBanner" class="hidden bg-blue-900 text-white p-4 rounded-3xl flex items-center justify-center gap-3 shadow-lg border-b-4 border-blue-700">
-                <i data-lucide="alert-circle" class="w-6 h-6 text-blue-400"></i>
-                <span class="font-black text-sm uppercase tracking-widest">Prioridad Máxima</span>
-            </div>
-
-            <div class="grid grid-cols-2 gap-3">
-                <button onclick="quickUpdate('camino')" class="bg-white border border-slate-200 text-blue-900 font-black p-5 rounded-3xl flex flex-col items-center gap-2 shadow-sm active:bg-slate-50 transition-all">
-                    <i data-lucide="car" class="w-8 h-8 text-blue-800"></i>
-                    <span class="text-[10px] uppercase tracking-widest">De Camino</span>
-                </button>
-                <button onclick="quickUpdate('trabajando')" class="bg-white border border-slate-200 text-blue-900 font-black p-5 rounded-3xl flex flex-col items-center gap-2 shadow-sm active:bg-slate-50 transition-all">
-                    <i data-lucide="wrench" class="w-8 h-8 text-blue-800"></i>
-                    <span class="text-[10px] uppercase tracking-widest">He Llegado</span>
-                </button>
-            </div>
-
-            <div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-200">
-                <div class="flex justify-between items-start mb-1">
-                    <p class="text-[9px] font-black text-blue-800 uppercase tracking-widest" id="detCompany">Compañía</p>
-                    <span id="detRef" class="text-[9px] font-black text-slate-400 uppercase"></span>
-                </div>
-                <h2 id="detName" class="text-2xl font-black text-slate-900 uppercase leading-none mb-6">Nombre Cliente</h2>
-                
-                <button onclick="callClient()" class="w-full bg-blue-900 text-white font-black py-4 rounded-2xl shadow-xl flex items-center justify-center gap-3 uppercase text-sm tracking-widest active:scale-95 transition-all">
-                    <i data-lucide="phone" class="w-5 h-5 fill-current text-blue-400"></i> Llamar al Cliente
-                </button>
-                <button onclick="openWhatsApp()" class="w-full mt-3 bg-slate-50 text-slate-700 font-black py-3 rounded-2xl border border-slate-200 flex items-center justify-center gap-2 text-xs uppercase tracking-widest active:scale-95">
-                    <i data-lucide="message-circle" class="w-4 h-4 text-emerald-500"></i> WhatsApp
-                </button>
-            </div>
-
-            <div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-200 relative overflow-hidden">
-                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Ubicación</p>
-                <p id="detAddress" class="text-base font-bold text-slate-900 uppercase leading-tight mb-6"></p>
-                
-                <div class="flex items-center justify-between bg-slate-50 p-4 rounded-2xl border border-slate-100">
-                    <div id="gpsLoading" class="text-xs font-bold text-slate-400 flex items-center gap-2"><i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i> GPS...</div>
-                    <div id="gpsResult" class="hidden flex gap-4 text-slate-900">
-                        <div class="text-center"><p class="text-xl font-black leading-none" id="gpsMins">--</p><p class="text-[8px] font-bold text-slate-400 uppercase">min</p></div>
-                        <div class="w-px h-6 bg-slate-200"></div>
-                        <div class="text-center"><p class="text-xl font-black leading-none" id="gpsKm">--</p><p class="text-[8px] font-bold text-slate-400 uppercase">km</p></div>
-                    </div>
-                    <button onclick="openMaps()" class="bg-blue-900 text-white px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md active:scale-90 transition-transform">Ver Mapa</button>
+                <div class="flex border-b border-gray-200 overflow-x-auto no-scrollbar">
+                    <button onclick="showTab('templates')" id="tab-templates" class="tab-btn px-6 py-3 text-sm font-bold text-blue-600 border-b-2 border-blue-600 hover:bg-gray-100 transition whitespace-nowrap">
+                        <i data-lucide="file-text" class="inline w-4 h-4 mr-1"></i> Plantillas
+                    </button>
+                    <button onclick="showTab('whatsapp')" id="tab-whatsapp" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-100 transition whitespace-nowrap">
+                        <i data-lucide="message-circle" class="inline w-4 h-4 mr-1"></i> WhatsApp
+                    </button>
+                    <button onclick="showTab('providers')" id="tab-providers" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-100 transition whitespace-nowrap">
+                        <i data-lucide="truck" class="inline w-4 h-4 mr-1"></i> Proveedores e IA
+                    </button>
+                    <button onclick="showTab('portal')" id="tab-portal" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-100 transition whitespace-nowrap">
+                        <i data-lucide="globe" class="inline w-4 h-4 mr-1"></i> Portal Cliente
+                    </button>
+                    <button onclick="showTab('app-operario')" id="tab-app-operario" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-100 transition whitespace-nowrap">
+                        <i data-lucide="smartphone" class="inline w-4 h-4 mr-1"></i> App Operario
+                    </button>
+                    <button onclick="showTab('others')" id="tab-others" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-100 transition whitespace-nowrap">
+                        <i data-lucide="sliders" class="inline w-4 h-4 mr-1"></i> Otras Configuraciones
+                    </button>
                 </div>
             </div>
 
-            <div class="desc-box">
-                <p class="text-[10px] font-black text-blue-900 uppercase tracking-widest mb-3 flex items-center gap-2"><i data-lucide="file-text" class="w-4 h-4"></i> Descripción Técnica</p>
-                <div id="detDesc" class="text-sm font-bold text-slate-600 leading-relaxed max-h-60 overflow-y-auto no-scrollbar">--</div>
-            </div>
+            <div class="flex-1 overflow-y-auto scroller p-6 bg-gray-50">
 
-            <div class="bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm">
-                <button onclick="document.getElementById('extraDataBox').classList.toggle('hidden')" class="w-full p-4 flex justify-between items-center text-[10px] font-black text-slate-500 uppercase tracking-widest bg-slate-50">
-                    <span>Ficha técnica completa</span>
-                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
-                </button>
-                <div id="extraDataBox" class="hidden p-5 space-y-3 bg-white border-t border-slate-100" id="detExtraInfo">
+                <div id="view-templates" class="tab-content h-full fade-in flex flex-col md:flex-row gap-6">
+                    <div class="w-full md:w-1/3 bg-white rounded-xl shadow border border-gray-100 overflow-hidden flex flex-col">
+                        <div class="p-4 bg-gray-50 border-b border-gray-200 font-bold text-gray-700 text-sm uppercase tracking-wide">Tipos de Mensaje</div>
+                        <div class="flex-1 overflow-y-auto p-2 space-y-1">
+                            <button onclick="selectTemplate('welcome', this)" class="tpl-btn w-full text-left p-3 rounded-lg hover:bg-blue-50 text-sm font-medium text-gray-600 transition-colors flex items-center gap-3 group"><span class="bg-blue-100 text-blue-600 p-1.5 rounded-md group-hover:bg-blue-200 transition"><i data-lucide="hand" class="w-4 h-4"></i></span> Bienvenida / Alta</button>
+                            <button onclick="selectTemplate('assigned', this)" class="tpl-btn w-full text-left p-3 rounded-lg hover:bg-blue-50 text-sm font-medium text-gray-600 transition-colors flex items-center gap-3 group"><span class="bg-orange-100 text-orange-600 p-1.5 rounded-md group-hover:bg-orange-200 transition"><i data-lucide="user-check" class="w-4 h-4"></i></span> Asignado a Operario</button>
+                            <button onclick="selectTemplate('no_contact', this)" class="tpl-btn w-full text-left p-3 rounded-lg hover:bg-blue-50 text-sm font-medium text-gray-600 transition-colors flex items-center gap-3 group"><span class="bg-orange-100 text-orange-600 p-1.5 rounded-md group-hover:bg-orange-200 transition"><i data-lucide="phone-off" class="w-4 h-4"></i></span> Cliente No Localizado</button>
+                            <button onclick="selectTemplate('appointment', this)" class="tpl-btn w-full text-left p-3 rounded-lg hover:bg-blue-50 text-sm font-medium text-gray-600 transition-colors flex items-center gap-3 group"><span class="bg-green-100 text-green-600 p-1.5 rounded-md group-hover:bg-green-200 transition"><i data-lucide="calendar-check" class="w-4 h-4"></i></span> Cita Creada</button>
+                            <button onclick="selectTemplate('update', this)" class="tpl-btn w-full text-left p-3 rounded-lg hover:bg-blue-50 text-sm font-medium text-gray-600 transition-colors flex items-center gap-3 group"><span class="bg-purple-100 text-purple-600 p-1.5 rounded-md group-hover:bg-purple-200 transition"><i data-lucide="refresh-cw" class="w-4 h-4"></i></span> Modificación de Servicio</button>
+                            <button onclick="selectTemplate('on_way', this)" class="tpl-btn w-full text-left p-3 rounded-lg hover:bg-blue-50 text-sm font-medium text-gray-600 transition-colors flex items-center gap-3 group"><span class="bg-teal-100 text-teal-600 p-1.5 rounded-md group-hover:bg-teal-200 transition"><i data-lucide="truck" class="w-4 h-4"></i></span> Técnico de Camino</button>
+                            <button onclick="selectTemplate('survey', this)" class="tpl-btn w-full text-left p-3 rounded-lg hover:bg-blue-50 text-sm font-medium text-gray-600 transition-colors flex items-center gap-3 group"><span class="bg-yellow-100 text-yellow-600 p-1.5 rounded-md group-hover:bg-yellow-200 transition"><i data-lucide="star" class="w-4 h-4"></i></span> Encuesta de Calidad</button>
+                        </div>
                     </div>
-            </div>
+                    <div class="flex-1 bg-white rounded-xl shadow border border-gray-100 flex flex-col overflow-hidden">
+                        <div class="p-4 border-b bg-gray-50 flex justify-between items-center shrink-0">
+                            <div><span class="block font-bold text-gray-800" id="editorTitle">Selecciona una plantilla</span><span class="text-xs text-gray-500">Edita el mensaje que se enviará por WhatsApp/Email</span></div>
+                            <button onclick="saveTemplate()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-lg transition-all transform active:scale-95 flex items-center gap-2"><i data-lucide="save" class="w-4 h-4"></i> Guardar</button>
+                        </div>
+                        <div class="p-3 border-b bg-gray-50/50 flex flex-wrap gap-2 items-center">
+                            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wide mr-1">Variables:</span>
+                            <button onclick="insertVar('{{NOMBRE}}')" class="var-btn">{{NOMBRE}}</button>
+                            <button onclick="insertVar('{{DIRECCION}}')" class="var-btn">{{DIRECCION}}</button>
+                            <button onclick="insertVar('{{FECHA}}')" class="var-btn">{{FECHA}}</button>
+                            <button onclick="insertVar('{{HORA}}')" class="var-btn">{{HORA}}</button>
+                            <button onclick="insertVar('{{COMPANIA}}')" class="var-btn">{{COMPANIA}}</button>
+                            <button onclick="insertVar('{{REFERENCIA}}')" class="var-btn">{{REFERENCIA}}</button>
+                            <button onclick="insertVar('{{ENLACE}}')" class="var-btn text-purple-600 border-purple-200 hover:border-purple-400 bg-purple-50">{{ENLACE}}</button>
+                        </div>
+                        <textarea id="tplContent" class="flex-1 p-6 outline-none resize-none text-sm leading-relaxed text-gray-700 font-sans" placeholder="Selecciona un tipo de mensaje a la izquierda..."></textarea>
+                    </div>
+                </div>
+                
+                <div id="view-whatsapp" class="tab-content hidden h-full fade-in pb-10">
+                    <div class="max-w-5xl mx-auto mt-6">
+                        <div class="mb-8">
+                            <h2 class="text-2xl font-black text-slate-800 tracking-tight flex items-center gap-3">
+                                <span class="bg-green-100 p-2.5 rounded-xl text-green-600 shadow-sm"><i data-lucide="message-circle"></i></span>
+                                Centro de Notificaciones Automáticas
+                            </h2>
+                            <p class="text-sm text-slate-500 mt-2 font-medium">Vincula tu número y decide qué eventos disparan un mensaje al cliente.</p>
+                        </div>
 
-            <div class="pt-4">
-                <button onclick="quickUpdate('finalizado')" class="w-full bg-emerald-600 text-white font-black py-5 rounded-[2rem] shadow-xl flex items-center justify-center gap-3 uppercase text-sm tracking-widest active:scale-95 transition-all">
-                    <i data-lucide="check-circle" class="w-6 h-6"></i> Finalizar Trabajo
-                </button>
-                <p class="text-center text-[9px] font-bold text-slate-400 mt-6 uppercase tracking-widest">IntegraRepara Mobile</p>
+                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                            
+                            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-8 flex flex-col h-fit">
+                                <h3 class="text-lg font-bold text-slate-800 border-b border-slate-100 pb-4 mb-6 flex items-center gap-2">
+                                    <i data-lucide="smartphone" class="w-5 h-5 text-blue-600"></i> Estado del Dispositivo
+                                </h3>
+                                
+                                <div id="waStatusContainer" class="w-full flex flex-col items-center justify-center min-h-[200px] bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 p-6 mb-6">
+                                    <div class="animate-pulse flex flex-col items-center">
+                                        <div class="w-10 h-10 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div>
+                                        <span class="text-sm font-bold text-slate-400">Iniciando instancia...</span>
+                                    </div>
+                                </div>
+                                
+                                <button onclick="checkWhatsappStatus()" class="w-full bg-slate-800 hover:bg-slate-700 text-white font-bold py-3 px-6 rounded-xl transition shadow-md flex items-center justify-center gap-2">
+                                    <i data-lucide="refresh-cw" class="w-4 h-4"></i> Actualizar Estado de Conexión
+                                </button>
+                            </div>
+
+                            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden flex flex-col h-fit">
+                                <div class="p-6 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
+                                    <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2">
+                                        <i data-lucide="zap" class="w-5 h-5 text-amber-500"></i> Reglas de Envío
+                                    </h3>
+                                    <button onclick="saveWaSettings()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold shadow-md transition-all active:scale-95 flex items-center gap-2">
+                                        <i data-lucide="save" class="w-3.5 h-3.5"></i> Guardar Ajustes
+                                    </button>
+                                </div>
+                                
+                                <div class="p-2">
+                                    <div class="p-4 hover:bg-slate-50 transition-colors flex items-center justify-between border-b border-slate-100">
+                                        <div>
+                                            <p class="font-bold text-slate-700 text-sm">Modo "Escribiendo..."</p>
+                                            <p class="text-xs text-slate-400 mt-0.5">Añade un retraso natural antes de enviar.</p>
+                                        </div>
+                                        <div class="relative inline-block w-12 align-middle select-none">
+                                            <input type="checkbox" id="cfg_delay" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                            <label for="cfg_delay" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer"></label>
+                                        </div>
+                                    </div>
+
+                                    <div class="p-4 hover:bg-slate-50 transition-colors flex items-center justify-between border-b border-slate-100">
+                                        <div class="flex items-start gap-3">
+                                            <div class="bg-blue-100 p-2 rounded-lg text-blue-600 mt-0.5"><i data-lucide="user-plus" class="w-4 h-4"></i></div>
+                                            <div>
+                                                <p class="font-bold text-slate-700 text-sm">Mensaje de Bienvenida</p>
+                                                <p class="text-xs text-slate-400 mt-0.5">Al registrar el servicio en el sistema.</p>
+                                            </div>
+                                        </div>
+                                        <div class="relative inline-block w-12 align-middle select-none">
+                                            <input type="checkbox" id="cfg_evt_welcome" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                            <label for="cfg_evt_welcome" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer"></label>
+                                        </div>
+                                    </div>
+
+                                    <div class="p-4 hover:bg-slate-50 transition-colors flex items-center justify-between border-b border-slate-100">
+                                        <div class="flex items-start gap-3">
+                                            <div class="bg-orange-100 p-2 rounded-lg text-orange-600 mt-0.5"><i data-lucide="user-check" class="w-4 h-4"></i></div>
+                                            <div>
+                                                <p class="font-bold text-slate-700 text-sm">Asignado a Operario</p>
+                                                <p class="text-xs text-slate-400 mt-0.5">Se envía cuando asignas un técnico al servicio.</p>
+                                            </div>
+                                        </div>
+                                        <div class="relative inline-block w-12 align-middle select-none">
+                                            <input type="checkbox" id="cfg_evt_assigned" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                            <label for="cfg_evt_assigned" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer"></label>
+                                        </div>
+                                    </div>
+
+                                    <div class="p-4 hover:bg-slate-50 transition-colors flex items-center justify-between border-b border-slate-100">
+                                        <div class="flex items-start gap-3">
+                                            <div class="bg-purple-100 p-2 rounded-lg text-purple-600 mt-0.5"><i data-lucide="calendar-clock" class="w-4 h-4"></i></div>
+                                            <div>
+                                                <p class="font-bold text-slate-700 text-sm">Cambio de Cita</p>
+                                                <p class="text-xs text-slate-400 mt-0.5">Cuando se agenda o modifica la fecha de visita.</p>
+                                            </div>
+                                        </div>
+                                        <div class="relative inline-block w-12 align-middle select-none">
+                                            <input type="checkbox" id="cfg_evt_date" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                            <label for="cfg_evt_date" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer"></label>
+                                        </div>
+                                    </div>
+
+                                    <div class="p-4 hover:bg-slate-50 transition-colors flex items-center justify-between border-b border-slate-100">
+                                        <div class="flex items-start gap-3">
+                                            <div class="bg-amber-100 p-2 rounded-lg text-amber-600 mt-0.5"><i data-lucide="car" class="w-4 h-4"></i></div>
+                                            <div>
+                                                <p class="font-bold text-slate-700 text-sm">Técnico de Camino</p>
+                                                <p class="text-xs text-slate-400 mt-0.5">Avisa al cliente minutos antes de llegar.</p>
+                                            </div>
+                                        </div>
+                                        <div class="relative inline-block w-12 align-middle select-none">
+                                            <input type="checkbox" id="cfg_evt_onway" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                            <label for="cfg_evt_onway" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer"></label>
+                                        </div>
+                                    </div>
+
+                                    <div class="p-4 hover:bg-slate-50 transition-colors flex items-center justify-between border-b border-slate-100">
+                                        <div class="flex items-start gap-3">
+                                            <div class="bg-emerald-100 p-2 rounded-lg text-emerald-600 mt-0.5"><i data-lucide="check-circle" class="w-4 h-4"></i></div>
+                                            <div>
+                                                <p class="font-bold text-slate-700 text-sm">Servicio Finalizado</p>
+                                                <p class="text-xs text-slate-400 mt-0.5">Notifica el cierre de la avería.</p>
+                                            </div>
+                                        </div>
+                                        <div class="relative inline-block w-12 align-middle select-none">
+                                            <input type="checkbox" id="cfg_evt_finished" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                            <label for="cfg_evt_finished" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer"></label>
+                                        </div>
+                                    </div>
+
+                                    <div class="p-4 hover:bg-slate-50 transition-colors flex items-center justify-between">
+                                        <div class="flex items-start gap-3">
+                                            <div class="bg-rose-100 p-2 rounded-lg text-rose-600 mt-0.5"><i data-lucide="star" class="w-4 h-4"></i></div>
+                                            <div>
+                                                <p class="font-bold text-slate-700 text-sm">Encuesta de Calidad</p>
+                                                <p class="text-xs text-slate-400 mt-0.5">Se envía automáticamente tras finalizar.</p>
+                                            </div>
+                                        </div>
+                                        <div class="relative inline-block w-12 align-middle select-none">
+                                            <input type="checkbox" id="cfg_evt_survey" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                            <label for="cfg_evt_survey" class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-200 cursor-pointer"></label>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div id="view-providers" class="tab-content hidden h-full fade-in">
+                    <div class="max-w-6xl mx-auto space-y-12">
+                        
+                        <div>
+                            <div class="mb-6">
+                                <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2"><i data-lucide="key" class="text-blue-600"></i> Accesos Web</h2>
+                                <p class="text-gray-500 text-sm mt-1">Configura tus credenciales para que el robot descargue los servicios automáticamente.</p>
+                            </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>
+                                    </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>
+                                        <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">
+                                            <i data-lucide="save" class="w-4 h-4"></i> Guardar Acceso
+                                        </button>
+                                    </form>
+                                </div>
+
+                                <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>
+                                        <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">
+                                            <i data-lucide="save" class="w-4 h-4"></i> Guardar Acceso
+                                        </button>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="border-t border-gray-200 pt-10">
+                            <div class="mb-6 flex justify-between items-end">
+                                <div>
+                                    <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2"><i data-lucide="brain-circuit" class="text-purple-600"></i> Reglas de Asignación Automática (IA)</h2>
+                                    <p class="text-gray-500 text-sm mt-1">Configura las palabras clave para que el robot asigne el gremio automáticamente al descargar el servicio.</p>
+                                </div>
+                            </div>
+                            
+                            <div class="bg-white rounded-xl shadow border border-gray-200 overflow-hidden">
+                                <div class="p-4 bg-gray-50 border-b border-gray-200 grid grid-cols-12 gap-4 font-bold text-gray-500 text-xs uppercase tracking-wider">
+                                    <div class="col-span-3">Gremio Especialista</div>
+                                    <div class="col-span-8">Palabras Clave (Separadas por comas)</div>
+                                    <div class="col-span-1 text-center">Acción</div>
+                                </div>
+                                <div id="iaRulesList" class="divide-y divide-gray-100">
+                                    <p class="text-center text-sm text-gray-400 py-8">Cargando gremios...</p>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div id="view-portal" class="tab-content hidden h-full fade-in pb-10">
+                    <div class="max-w-6xl mx-auto mt-6">
+                        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100 space-y-6">
+                            <div class="flex items-center gap-4 border-b border-slate-100 pb-4">
+                                <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center shrink-0">
+                                    <i data-lucide="smartphone" class="w-6 h-6"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-xl font-black text-slate-800 tracking-tight">Portal del Cliente</h3>
+                                    <p class="text-sm text-slate-500 font-medium">Personaliza la web que ven tus clientes al recibir el WhatsApp.</p>
+                                </div>
+                            </div>
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                                <div class="space-y-5">
+                                    <div>
+                                        <label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-2">Nombre Visible (Empresa)</label>
+                                        <input type="text" id="confCompanyName" placeholder="Ej: IntegraRepara SL" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-2">Logotipo</label>
+                                        <div class="flex items-center gap-4">
+                                            <div id="logoPreview" class="w-20 h-20 bg-slate-50 border-2 border-dashed border-slate-300 rounded-xl flex items-center justify-center overflow-hidden shrink-0">
+                                                <i data-lucide="image" class="text-slate-300 w-8 h-8"></i>
+                                            </div>
+                                            <div class="flex-1">
+                                                <input type="file" id="confLogoInput" accept="image/png, image/jpeg, image/webp" class="hidden" onchange="encodeLogo(this)">
+                                                <button onclick="document.getElementById('confLogoInput').click()" class="bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 font-bold py-2 px-4 rounded-lg text-sm transition-all shadow-sm">
+                                                    Subir Imagen
+                                                </button>
+                                                <p class="text-[10px] text-slate-400 mt-1">Formatos: PNG, JPG (Máx. 1MB). Recomendado: Cuadrado o Apaisado.</p>
+                                                <input type="hidden" id="confLogoBase64">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="space-y-5 bg-slate-50 p-6 rounded-2xl border border-slate-100">
+                                    <h4 class="text-sm font-black text-slate-800 uppercase tracking-tight flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-blue-500"></i> Horario de Citas (Rutas)</h4>
+                                    <p class="text-xs text-slate-500 mb-4">El portal calculará los huecos cada 30 min dentro de estas franjas.</p>
+
+                                    <div class="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5">Mañanas (Desde - Hasta)</label>
+                                            <div class="flex items-center gap-2">
+                                                <select id="mStart" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
+                                                    <option value="08:00">08:00</option><option value="08:30">08:30</option>
+                                                    <option value="09:00" selected>09:00</option><option value="09:30">09:30</option>
+                                                    <option value="10:00">10:00</option><option value="10:30">10:30</option>
+                                                </select>
+                                                <span class="text-slate-400 font-black">-</span>
+                                                <select id="mEnd" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
+                                                    <option value="13:00">13:00</option><option value="13:30">13:30</option>
+                                                    <option value="14:00" selected>14:00</option><option value="14:30">14:30</option>
+                                                    <option value="15:00">15:00</option>
+                                                </select>
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5">Tardes (Desde - Hasta)</label>
+                                            <div class="flex items-center gap-2">
+                                                <select id="aStart" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
+                                                    <option value="15:00">15:00</option><option value="15:30">15:30</option>
+                                                    <option value="16:00" selected>16:00</option><option value="16:30">16:30</option>
+                                                    <option value="17:00">17:00</option>
+                                                </select>
+                                                <span class="text-slate-400 font-black">-</span>
+                                                <select id="aEnd" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
+                                                    <option value="18:00">18:00</option><option value="18:30">18:30</option>
+                                                    <option value="19:00" selected>19:00</option><option value="19:30">19:30</option>
+                                                    <option value="20:00">20:00</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="pt-4 flex justify-end">
+                                <button onclick="savePortalConfig()" id="btnSavePortal" class="bg-blue-600 hover:bg-blue-700 text-white font-black py-3 px-8 rounded-xl shadow-lg shadow-blue-500/30 transition-all uppercase tracking-widest text-xs flex items-center gap-2">
+                                    <i data-lucide="save" class="w-4 h-4"></i> Guardar Portal
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="view-app-operario" class="tab-content hidden h-full fade-in pb-10">
+                    <div class="max-w-4xl mx-auto mt-6">
+                        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100 space-y-8">
+                            <div class="flex items-center gap-4 border-b border-slate-100 pb-4">
+                                <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center shrink-0">
+                                    <i data-lucide="palette" class="w-6 h-6"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-xl font-black text-slate-800 tracking-tight">Personalización de la App</h3>
+                                    <p class="text-sm text-slate-500 font-medium">Configura los colores corporativos para el menú y las fichas de los operarios.</p>
+                                </div>
+                            </div>
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
+                                <div class="space-y-6">
+                                    <div>
+                                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">Color Principal (Cabeceras y Botones)</label>
+                                        <div class="flex items-center gap-4 bg-slate-50 p-3 rounded-xl border border-slate-200">
+                                            <input type="color" id="color-primary" class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
+                                            <input type="text" id="color-primary-hex" class="flex-1 bg-transparent text-sm font-mono font-bold outline-none uppercase" placeholder="#2563EB">
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">Color Secundario (Acentos y Badges)</label>
+                                        <div class="flex items-center gap-4 bg-slate-50 p-3 rounded-xl border border-slate-200">
+                                            <input type="color" id="color-secondary" class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
+                                            <input type="text" id="color-secondary-hex" class="flex-1 bg-transparent text-sm font-mono font-bold outline-none uppercase" placeholder="#F59E0B">
+                                        </div>
+                                    </div>
+                                    
+                                    <div>
+                                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">Fondo de Pantalla (App)</label>
+                                        <div class="flex items-center gap-4 bg-slate-50 p-3 rounded-xl border border-slate-200">
+                                            <input type="color" id="color-bg" class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
+                                            <input type="text" id="color-bg-hex" class="flex-1 bg-transparent text-sm font-mono font-bold outline-none uppercase" placeholder="#F4F7F9">
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="flex flex-col items-center">
+                                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Vista Previa en Vivo</p>
+                                    <div id="app-preview" class="w-64 h-[400px] border-[6px] border-slate-800 rounded-[2.5rem] shadow-2xl overflow-hidden relative scale-90 origin-top">
+                                        <div id="prev-header" class="h-20 w-full p-4 text-white">
+                                            <div class="w-8 h-2 bg-white/30 rounded mb-2"></div>
+                                            <div class="w-20 h-4 bg-white rounded"></div>
+                                        </div>
+                                        <div class="p-4 grid grid-cols-2 gap-2">
+                                            <div class="h-16 bg-white rounded-xl border border-slate-200 shadow-sm flex items-center justify-center">
+                                                <div id="prev-icon" class="w-6 h-6 rounded-lg"></div>
+                                            </div>
+                                            <div class="h-16 bg-white rounded-xl border border-slate-200 shadow-sm"></div>
+                                        </div>
+                                        <div class="absolute bottom-6 left-4 right-4">
+                                            <div id="prev-btn" class="h-10 w-full rounded-xl shadow-md"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="pt-6 flex justify-end">
+                                <button onclick="saveAppConfig()" id="btnSaveApp" class="bg-blue-600 hover:bg-blue-700 text-white font-black py-4 px-10 rounded-2xl shadow-xl shadow-blue-500/30 transition-all uppercase tracking-widest text-xs flex items-center gap-2 active:scale-95">
+                                    <i data-lucide="save" class="w-5 h-5"></i> Aplicar a todos los dispositivos
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="view-others" class="tab-content hidden h-full fade-in flex flex-col pb-10">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-6xl mx-auto w-full">
+                        <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-[500px]">
+                            <div class="p-4 bg-gray-50 border-b border-gray-200 shrink-0"><h3 class="font-bold text-gray-700 flex items-center gap-2"><i data-lucide="shield" class="w-4 h-4 text-blue-600"></i> Compañías de Seguros</h3></div>
+                            <div class="p-4 border-b border-gray-100 bg-white"><div class="flex gap-2"><input type="text" id="newCompanyInput" placeholder="Nombre..." class="flex-1 border rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500"><button onclick="addCompany()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold transition-colors">Añadir</button></div></div>
+                            <div id="listCompanies" class="flex-1 overflow-y-auto scroller p-2 space-y-1"><p class="text-center text-xs text-gray-400 mt-10">Cargando...</p></div>
+                        </div>
+                        <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-[500px]">
+                            <div class="p-4 bg-gray-50 border-b border-gray-200 shrink-0"><h3 class="font-bold text-gray-700 flex items-center gap-2"><i data-lucide="activity" class="w-4 h-4 text-blue-600"></i> Estados del Servicio</h3></div>
+                            <div class="p-4 border-b border-gray-100 bg-white"><div class="flex gap-2"><input type="text" id="newStatusInput" placeholder="Nuevo estado..." class="flex-1 border rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500"><select id="newStatusColor" class="border rounded-lg px-2 text-sm text-gray-600 outline-none focus:border-blue-500 bg-gray-50"><option value="gray">Gris</option><option value="blue">Azul</option><option value="green">Verde</option><option value="red">Rojo</option><option value="yellow">Amarillo</option><option value="purple">Morado</option></select><button onclick="addStatus()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold transition-colors">Añadir</button></div></div>
+                            <div id="listStatuses" class="flex-1 overflow-y-auto scroller p-2 space-y-1"><p class="text-center text-xs text-gray-400 mt-10">Cargando...</p></div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </main>
+    </div>
+
+    <div id="iaModal" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden z-[100] flex items-center justify-center p-4">
+        <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg overflow-hidden fade-in">
+            <div class="p-5 border-b bg-gray-50 flex justify-between items-center">
+                <h3 class="font-bold text-gray-800 text-lg flex items-center gap-2"><i data-lucide="brain-circuit" class="text-purple-600"></i> Reglas IA para <span id="iaModalGuildName" class="text-blue-600"></span></h3>
+                <button onclick="closeIaModal()" class="text-gray-400 hover:text-red-500"><i data-lucide="x"></i></button>
+            </div>
+            <div class="p-6">
+                <input type="hidden" id="iaModalGuildId">
+                <label class="block text-sm font-bold text-gray-700 mb-2">Palabras Clave</label>
+                <p class="text-xs text-gray-500 mb-3">Escribe palabras clave separadas por comas. Si el robot detecta alguna de ellas en la descripción del servicio, lo asignará a este gremio automáticamente.</p>
+                <textarea id="iaModalKeywords" rows="5" class="w-full border border-gray-300 rounded-xl p-3 text-sm focus:ring-2 focus:ring-purple-500 outline-none" placeholder="Ej: fuga de agua, tubería rota, grifo, desatasco..."></textarea>
+            </div>
+            <div class="p-4 border-t bg-gray-50 flex justify-end gap-3">
+                <button onclick="closeIaModal()" class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-bold text-gray-600 hover:bg-gray-100 transition">Cancelar</button>
+                <button onclick="saveIaRule()" class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-bold shadow transition flex items-center gap-2"><i data-lucide="save" class="w-4 h-4"></i> Guardar Regla</button>
             </div>
         </div>
     </div>
 
-    <div id="toast" class="fixed top-8 left-1/2 -translate-x-1/2 bg-slate-900 text-white px-6 py-3 rounded-full shadow-2xl z-[200] font-bold text-xs uppercase tracking-widest flex items-center gap-2 transition-all duration-300 opacity-0 pointer-events-none transform -translate-y-10">
-        <i data-lucide="check" class="w-4 h-4 text-emerald-400"></i>
-        <span id="toastMsg">Guardado</span>
-    </div>
+    <div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"><span id="toastMsg">Msg</span></div>
 
+    <script src="js/layout.js"></script>
     <script>
-        const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
-            ? 'http://localhost:3000' 
-            : 'https://integrarepara-api.integrarepara.es';
+        let cachedTemplates = {};
+        let currentTemplateType = null;
+        let localGuilds = []; 
 
-        let localServices = [];
-        let systemStatuses = [];
-        let systemGuilds = [];
-        let currentWeekStart = new Date(); 
-        let selectedDateStr = "";          
-
-        function safeLoadIcons() {
-            try { if (typeof lucide !== 'undefined') lucide.createIcons(); } 
-            catch(e) { }
-        }
-
-        function toISODate(dateObj) {
-            try {
-                if (!dateObj || isNaN(dateObj)) return "";
-                const y = dateObj.getFullYear();
-                const m = String(dateObj.getMonth() + 1).padStart(2, '0');
-                const d = String(dateObj.getDate()).padStart(2, '0');
-                return `${y}-${m}-${d}`;
-            } catch(e) { return ""; }
-        }
-
-        function getMonday(d) {
-            const date = new Date(d);
-            const day = date.getDay();
-            const diff = date.getDate() - day + (day === 0 ? -6 : 1); 
-            return new Date(date.setDate(diff));
-        }
-
-        document.addEventListener("DOMContentLoaded", async () => {
-            if (!localStorage.getItem("token") || localStorage.getItem("role") !== 'operario') {
-                window.location.href = "index.html"; return;
-            }
-            safeLoadIcons();
-            const today = new Date();
-            currentWeekStart = getMonday(today);
-            selectedDateStr = toISODate(today);
-            buildWeekCalendar();
-            loadStatuses();
-            await loadGuilds(); 
-            refreshData();
+        document.addEventListener("DOMContentLoaded", () => {
+            if (!localStorage.getItem("token")) window.location.href = "index.html";
+            showTab('templates'); 
+            loadTemplates();
+            loadWaSettings();
         });
 
-        async function loadGuilds() {
-            try {
-                const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-                const data = await res.json();
-                if(data.ok) systemGuilds = data.guilds;
-            } catch(e){}
-        }
-
-        function buildWeekCalendar() {
-            const strip = document.getElementById('weekStrip');
-            strip.innerHTML = '';
-            const monthName = currentWeekStart.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' });
-            document.getElementById('monthYearDisplay').innerText = monthName;
+        function showTab(tabId) {
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            document.getElementById(`view-${tabId}`).classList.remove('hidden');
             
-            for(let i = 0; i < 7; i++) {
-                let d = new Date(currentWeekStart);
-                d.setDate(currentWeekStart.getDate() + i);
-                const isoDate = toISODate(d);
-                const dayName = d.toLocaleDateString('es-ES', { weekday: 'short' }).replace('.', '');
-                const dayNum = d.getDate();
-                const isSelected = isoDate === selectedDateStr;
-                strip.innerHTML += `
-                    <button onclick="selectDate('${isoDate}')" class="day-card ${isSelected ? 'day-active' : 'day-inactive'} border min-w-[4.2rem] rounded-2xl p-4 flex flex-col items-center justify-center shrink-0">
-                        <span class="text-[9px] font-black uppercase opacity-70">${dayName}</span>
-                        <span class="text-xl font-black mt-1">${dayNum}</span>
-                        <div class="mt-2 w-full flex justify-center h-1.5"><span id="badge-${isoDate}" class="bg-blue-400 w-1.5 h-1.5 rounded-full hidden"></span></div>
-                    </button>`;
+            document.querySelectorAll('.tab-btn').forEach(el => {
+                el.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
+                el.classList.add('text-gray-500', 'font-medium');
+            });
+            const btn = document.getElementById(`tab-${tabId}`);
+            btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
+            btn.classList.remove('text-gray-500', 'font-medium');
+
+            if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); }
+            if(tabId === 'whatsapp') { checkWhatsappStatus(); }
+            if(tabId === 'portal') { loadPortalConfig(); }
+            if(tabId === 'app-operario') { loadAppConfig(); }
+            if(tabId === 'providers') { 
+                loadProviderCredentials(); 
+                loadIaRules(); 
             }
-            updateBadges(); 
-            safeLoadIcons();
         }
 
-        function changeWeek(offset) {
-            currentWeekStart.setDate(currentWeekStart.getDate() + (offset * 7));
-            selectedDateStr = toISODate(currentWeekStart);
-            buildWeekCalendar();
-            renderServices();
+        // ==========================================
+        // LÓGICA PORTAL OPERARIO (COLORES)
+        // ==========================================
+        ['primary', 'secondary', 'bg'].forEach(type => {
+            const picker = document.getElementById(`color-${type}`);
+            const text = document.getElementById(`color-${type}-hex`);
+            
+            picker.addEventListener('input', (e) => {
+                text.value = e.target.value.toUpperCase();
+                updateAppPreview();
+            });
+            
+            text.addEventListener('input', (e) => {
+                if(/^#[0-9A-F]{6}$/i.test(e.target.value)) {
+                    picker.value = e.target.value;
+                    updateAppPreview();
+                }
+            });
+        });
+
+        function updateAppPreview() {
+            const p = document.getElementById('color-primary').value;
+            const s = document.getElementById('color-secondary').value;
+            const b = document.getElementById('color-bg').value;
+            
+            document.getElementById('prev-header').style.backgroundColor = p;
+            document.getElementById('prev-icon').style.backgroundColor = s;
+            document.getElementById('prev-btn').style.backgroundColor = p;
+            document.getElementById('app-preview').style.backgroundColor = b;
         }
 
-        function selectDate(isoDate) {
-            selectedDateStr = isoDate;
-            buildWeekCalendar(); 
-            renderServices();    
+        async function loadAppConfig() {
+            try {
+                const res = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                if (data.ok && data.config && data.config.app_settings) {
+                    const s = data.config.app_settings;
+                    document.getElementById('color-primary').value = s.primary || "#2563EB";
+                    document.getElementById('color-primary-hex').value = s.primary || "#2563EB";
+                    document.getElementById('color-secondary').value = s.secondary || "#F59E0B";
+                    document.getElementById('color-secondary-hex').value = s.secondary || "#F59E0B";
+                    document.getElementById('color-bg').value = s.bg || "#F4F7F9";
+                    document.getElementById('color-bg-hex').value = s.bg || "#F4F7F9";
+                    updateAppPreview();
+                }
+            } catch (e) { console.error("Error cargando colores"); }
         }
 
-        async function loadStatuses() {
+        async function saveAppConfig() {
+            const settings = {
+                primary: document.getElementById('color-primary').value,
+                secondary: document.getElementById('color-secondary').value,
+                bg: document.getElementById('color-bg').value
+            };
+
+            try {
+                const res = await fetch(`${API_URL}/config/company`, {
+                    method: 'POST',
+                    headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify({ app_settings: settings })
+                });
+                if (res.ok) {
+                    showToast("✅ Colores de la App actualizados");
+                    localStorage.setItem('app_theme', JSON.stringify(settings));
+                }
+            } catch (e) { showToast("Error al guardar", true); }
+        }
+
+        // ==========================================
+        // LÓGICA DE INTELIGENCIA ARTIFICIAL (GREMIOS)
+        // ==========================================
+        async function loadIaRules() {
+            const list = document.getElementById('iaRulesList');
+            list.innerHTML = '<p class="text-center text-sm text-gray-400 py-8"><i data-lucide="loader-2" class="w-6 h-6 animate-spin mx-auto mb-2"></i> Cargando...</p>';
+            lucide.createIcons();
+
+            try {
+                const resGuilds = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const dataGuilds = await resGuilds.json();
+                
+                if (!dataGuilds.ok || dataGuilds.guilds.length === 0) {
+                    list.innerHTML = '<p class="text-center text-sm text-orange-500 py-8">No tienes gremios creados. Crea gremios en "Otras Configuraciones" primero.</p>';
+                    return;
+                }
+
+                localGuilds = dataGuilds.guilds;
+                list.innerHTML = '';
+
+                localGuilds.forEach(g => {
+                    const keywords = Array.isArray(g.ia_keywords) ? g.ia_keywords : [];
+                    const tagsHtml = keywords.length > 0 
+                        ? keywords.map(kw => `<span class="inline-block bg-purple-100 text-purple-700 text-[10px] font-bold px-2 py-1 rounded-md keyword-tag m-0.5 border border-purple-200">${kw}</span>`).join('')
+                        : '<span class="text-xs text-gray-400 italic">Sin reglas asignadas.</span>';
+
+                    const row = document.createElement('div');
+                    row.className = "p-4 hover:bg-purple-50/30 transition-colors grid grid-cols-12 gap-4 items-center group";
+                    row.innerHTML = `
+                        <div class="col-span-3 font-bold text-gray-800 flex items-center gap-2">
+                            <i data-lucide="hammer" class="w-4 h-4 text-gray-400 group-hover:text-purple-500 transition-colors"></i> ${g.name}
+                        </div>
+                        <div class="col-span-8 flex flex-wrap items-center gap-1">${tagsHtml}</div>
+                        <div class="col-span-1 text-center">
+                            <button onclick="openIaModal(${g.id}, '${g.name.replace(/'/g, "\\'")}')" class="text-gray-400 hover:text-purple-600 bg-white hover:bg-purple-50 border border-gray-200 hover:border-purple-200 p-2 rounded-lg transition-all shadow-sm">
+                                <i data-lucide="edit-2" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    `;
+                    list.appendChild(row);
+                });
+                lucide.createIcons();
+            } catch (e) {
+                console.error("Error cargando reglas IA:", e);
+                list.innerHTML = '<p class="text-center text-sm text-red-500 py-8">Error al cargar las reglas de IA.</p>';
+            }
+        }
+
+        function openIaModal(guildId, guildName) {
+            const guild = localGuilds.find(g => g.id === guildId);
+            const keywords = Array.isArray(guild.ia_keywords) ? guild.ia_keywords : [];
+            document.getElementById('iaModalGuildId').value = guildId;
+            document.getElementById('iaModalGuildName').innerText = guildName;
+            document.getElementById('iaModalKeywords').value = keywords.join(', ');
+            document.getElementById('iaModal').classList.remove('hidden');
+        }
+
+        function closeIaModal() { document.getElementById('iaModal').classList.add('hidden'); }
+
+        async function saveIaRule() {
+            const guildId = document.getElementById('iaModalGuildId').value;
+            const rawKeywords = document.getElementById('iaModalKeywords').value;
+            const keywordsArray = rawKeywords.split(',').map(k => k.trim().toLowerCase()).filter(k => k.length > 0);
+            try {
+                const res = await fetch(`${API_URL}/guilds/${guildId}/ia-rules`, {
+                    method: 'PUT', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify({ keywords: keywordsArray })
+                });
+                if (res.ok) {
+                    showToast("✅ Reglas de IA guardadas correctamente.");
+                    closeIaModal();
+                    loadIaRules(); 
+                } else { showToast("❌ Error al guardar las reglas.", true); }
+            } catch (e) { showToast("❌ Error de conexión.", true); }
+        }
+
+        async function loadWaSettings() {
+            try {
+                const res = await fetch(`${API_URL}/whatsapp/settings`, { 
+                    headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } 
+                });
+                const data = await res.json();
+                const s = data.settings || {};
+                document.getElementById('cfg_delay').checked = s.wa_delay_enabled !== false;
+                document.getElementById('cfg_evt_welcome').checked = s.wa_evt_welcome || false;
+                document.getElementById('cfg_evt_assigned').checked = s.wa_evt_assigned || false;
+                document.getElementById('cfg_evt_date').checked = s.wa_evt_date || false;
+                document.getElementById('cfg_evt_onway').checked = s.wa_evt_onway || false;
+                document.getElementById('cfg_evt_finished').checked = s.wa_evt_finished || false;
+                document.getElementById('cfg_evt_survey').checked = s.wa_evt_survey || false;
+            } catch(e) { console.error("Error cargando ajustes WA"); }
+        }
+
+        async function saveWaSettings() {
+            const settings = {
+                wa_delay_enabled: document.getElementById('cfg_delay').checked,
+                wa_evt_welcome: document.getElementById('cfg_evt_welcome').checked,
+                wa_evt_assigned: document.getElementById('cfg_evt_assigned').checked,
+                wa_evt_date: document.getElementById('cfg_evt_date').checked,
+                wa_evt_onway: document.getElementById('cfg_evt_onway').checked,
+                wa_evt_finished: document.getElementById('cfg_evt_finished').checked,
+                wa_evt_survey: document.getElementById('cfg_evt_survey').checked
+            };
+            try {
+                const res = await fetch(`${API_URL}/whatsapp/settings`, {
+                    method: 'POST',
+                    headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify(settings)
+                });
+                if (res.ok) showToast("✅ Ajustes de WhatsApp guardados");
+                else showToast("❌ Error al guardar", true);
+            } catch(e) { showToast("❌ Error de conexión", true); }
+        }
+
+        async function checkWhatsappStatus() {
+            const container = document.getElementById('waStatusContainer');
+            container.innerHTML = `<div class="flex flex-col items-center animate-pulse"><div class="w-10 h-10 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div><span class="text-sm font-bold text-slate-400">Verificando instancia...</span></div>`;
+            lucide.createIcons();
+            try {
+                const res = await fetch(`${API_URL}/whatsapp/status`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                if (!data.ok) throw new Error(data.error || "Error desconocido");
+                if (data.state === "open") {
+                    container.innerHTML = `<div class="flex flex-col items-center"><div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 shadow-sm border border-green-200"><i data-lucide="check" class="w-8 h-8 text-green-600"></i></div><h4 class="text-xl font-bold text-green-700">Conectado</h4><p class="text-xs text-green-600 mt-1 font-medium bg-green-50 px-2 py-1 rounded">Instancia: ${data.instanceName}</p></div>`;
+                } else if (data.qr) {
+                    container.innerHTML = `<div class="flex flex-col items-center w-full"><div id="qrcode" class="bg-white p-3 border rounded-xl shadow-sm"></div><p class="text-xs text-orange-500 mt-4 font-bold animate-pulse">Esperando escaneo...</p></div>`;
+                    if(data.qr.startsWith('data:image')) { document.getElementById('qrcode').innerHTML = `<img src="${data.qr}" class="w-48 h-48 rounded-lg">`; } 
+                    else { new QRCode(document.getElementById("qrcode"), { text: data.qr, width: 180, height: 180 }); }
+                } else { container.innerHTML = `<p class="text-orange-500 font-bold">Iniciando... intenta de nuevo en unos segundos.</p>`; }
+            } catch(e) {
+                container.innerHTML = `<div class="text-center text-red-500 p-4"><i data-lucide="alert-triangle" class="w-10 h-10 mx-auto mb-2 opacity-80"></i><p class="font-bold">Error de conexión</p><p class="text-xs mt-1 bg-red-50 p-2 rounded">${e.message}</p></div>`;
+            }
+            lucide.createIcons();
+        }
+
+        async function loadTemplates() {
+            try {
+                const res = await fetch(`${API_URL}/templates`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                if(data.ok) {
+                    data.templates.forEach(t => { cachedTemplates[t.type] = t.content; });
+                    if (!currentTemplateType) { const firstBtn = document.querySelector('.tpl-btn'); if(firstBtn) firstBtn.click(); }
+                }
+            } catch(e) { console.error("Error templates"); }
+        }
+
+        function selectTemplate(type, btn) {
+            currentTemplateType = type;
+            document.querySelectorAll('.tpl-btn').forEach(b => {
+                b.classList.remove('bg-blue-50', 'ring-1', 'ring-blue-200');
+                const span = b.querySelector('span');
+                if (span.classList.contains('bg-blue-600')) span.classList.replace('bg-blue-600', 'bg-blue-100'), span.classList.replace('text-white', 'text-blue-600');
+                if (span.classList.contains('bg-orange-600')) span.classList.replace('bg-orange-600', 'bg-orange-100'), span.classList.replace('text-white', 'text-orange-600');
+            });
+            btn.classList.add('bg-blue-50', 'ring-1', 'ring-blue-200');
+            const activeSpan = btn.querySelector('span');
+            if (activeSpan.classList.contains('bg-blue-100')) activeSpan.classList.replace('bg-blue-100', 'bg-blue-600'), activeSpan.classList.replace('text-blue-600', 'text-white');
+            else if (activeSpan.classList.contains('bg-orange-100')) activeSpan.classList.replace('bg-orange-100', 'bg-orange-600'), activeSpan.classList.replace('text-orange-600', 'text-white');
+            document.getElementById('editorTitle').innerText = btn.innerText.trim();
+            document.getElementById('tplContent').value = cachedTemplates[type] || "";
+        }
+
+        function insertVar(text) {
+            const textarea = document.getElementById('tplContent');
+            if (!textarea) return;
+            const start = textarea.selectionStart, end = textarea.selectionEnd, val = textarea.value;
+            textarea.value = val.substring(0, start) + text + val.substring(end);
+            textarea.focus();
+            textarea.selectionStart = textarea.selectionEnd = start + text.length;
+        }
+
+        async function saveTemplate() {
+            if(!currentTemplateType) { showToast("Selecciona plantilla", true); return; }
+            const content = document.getElementById('tplContent').value;
+            try {
+                const res = await fetch(`${API_URL}/templates`, {
+                    method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify({ type: currentTemplateType, content: content })
+                });
+                if(res.ok) { cachedTemplates[currentTemplateType] = content; showToast("Guardado"); } else { showToast("Error", true); }
+            } catch(e) { showToast("Error", true); }
+        }
+
+        async function loadCompanies() {
+            const list = document.getElementById('listCompanies');
+            list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';
+            try {
+                const res = await fetch(`${API_URL}/companies`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                list.innerHTML = "";
+                if(data.companies.length === 0) { list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-4">Sin compañías.</p>'; return; }
+                data.companies.forEach(c => {
+                    const div = document.createElement('div');
+                    div.className = "p-3 border border-gray-100 rounded-lg bg-gray-50 flex justify-between items-center group hover:border-blue-200 transition-colors";
+                    div.innerHTML = `<span class="font-bold text-gray-700 text-sm">${c.name}</span><button onclick="deleteCompany(${c.id})" class="text-gray-300 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>`;
+                    list.appendChild(div);
+                });
+                lucide.createIcons();
+            } catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error</p>'; }
+        }
+
+        async function addCompany() {
+            const input = document.getElementById('newCompanyInput'), name = input.value.trim();
+            if(!name) return;
+            try {
+                const res = await fetch(`${API_URL}/companies`, { method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` }, body: JSON.stringify({ name: name }) });
+                if(res.ok) { showToast("Añadido"); input.value = ""; loadCompanies(); }
+            } catch(e) { showToast("Error", true); }
+        }
+
+        async function deleteCompany(id) {
+            if(!confirm("¿Borrar?")) return;
+            await fetch(`${API_URL}/companies/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            loadCompanies();
+        }
+
+        async function loadStatusesConfig() {
+            const list = document.getElementById('listStatuses');
+            list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';
             try {
                 const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
                 const data = await res.json();
-                if (data.ok) systemStatuses = data.statuses;
-            } catch (e) {}
-        }
-
-        async function refreshData() {
-            document.getElementById('servicesList').classList.add('hidden');
-            document.getElementById('loader').classList.remove('hidden');
-            try {
-                const res = await fetch(`${API_URL}/services/active`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-                const data = await res.json();
-                if (data.ok) {
-                    localServices = data.services.filter(s => {
-                        const raw = s.raw_data || {};
-                        return String(raw.scheduled_date || "").trim() !== ""; 
-                    });
-                    buildWeekCalendar(); 
-                    renderServices();
-                }
-            } catch (e) {
-            } finally {
-                document.getElementById('loader').classList.add('hidden');
-                document.getElementById('dayTitle').classList.remove('hidden');
-                document.getElementById('servicesList').classList.remove('hidden');
-            }
-        }
-
-        function updateBadges() {
-            document.querySelectorAll('[id^="badge-"]').forEach(el => el.classList.add('hidden'));
-            const counts = {};
-            localServices.forEach(s => {
-                const date = String(s.raw_data.scheduled_date || "").trim();
-                if(date) counts[date] = (counts[date] || 0) + 1;
-            });
-            for (const [date, qty] of Object.entries(counts)) {
-                const badge = document.getElementById(`badge-${date}`);
-                if (badge) badge.classList.remove('hidden');
-            }
-        }
-
-        function renderServices() {
-            const container = document.getElementById('servicesList');
-            const displayDate = selectedDateStr.split('-').reverse().join('/');
-            document.getElementById('dayTitle').innerText = `DÍA ${displayDate}`;
-
-            const dayServices = localServices.filter(s => String(s.raw_data.scheduled_date || "").trim() === selectedDateStr);
-            dayServices.sort((a, b) => String(a.raw_data.scheduled_time || "23:59").localeCompare(String(b.raw_data.scheduled_time || "23:59")));
-
-            if (dayServices.length === 0) {
-                container.innerHTML = `<div class="text-center py-20 bg-white rounded-[3rem] border border-slate-100 shadow-sm mt-4"><i data-lucide="coffee" class="w-12 h-12 text-slate-200 mx-auto mb-3"></i><h3 class="font-black text-slate-800">Día de Descanso</h3><p class="text-xs text-slate-400 font-medium">No tienes servicios para este día.</p></div>`;
-                safeLoadIcons(); return;
-            }
-
-            container.innerHTML = dayServices.map(s => {
-                const raw = s.raw_data || {};
-                const time = raw.scheduled_time || "--:--";
-                if (s.provider === 'SYSTEM_BLOCK') {
-                    return `<div class="bg-blue-50/50 p-5 rounded-3xl border border-slate-200 flex gap-4"><div class="flex flex-col items-center justify-center border-r border-slate-200 pr-4 shrink-0"><i data-lucide="lock" class="w-5 h-5 text-blue-900"></i><span class="font-black text-blue-900 text-sm mt-1">${time}</span></div><div class="min-w-0 flex-1"><h3 class="font-black text-blue-900 text-sm uppercase">BLOQUEADO</h3><p class="text-[10px] font-bold text-slate-400 mt-1 uppercase">${raw["Descripción"] || ""}</p></div></div>`;
-                }
-
-                const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado";
-                const addr = raw["Dirección"] || "---";
-                let compShort = (raw["Compañía"] || "Particular").split('-')[0].trim().substring(0, 15);
-                const guildObj = systemGuilds.find(g => String(g.id) === String(s.guild_id || raw.guild_id));
-
-                return `
-                <div onclick="openService(${s.id})" class="bg-white p-6 rounded-[2.5rem] border border-slate-200 shadow-sm active:scale-95 transition-transform flex gap-4 relative overflow-hidden">
-                    ${s.is_urgent ? '<div class="absolute top-0 right-0 bg-blue-900 text-white text-[8px] font-black px-3 py-1.5 rounded-bl-xl uppercase tracking-widest z-10">Urgente</div>' : ''}
-                    <div class="flex flex-col items-center justify-center border-r border-slate-100 pr-4 shrink-0 min-w-[70px]">
-                        <i data-lucide="clock" class="w-6 h-6 text-blue-900 mb-1"></i>
-                        <span class="font-black text-slate-900 text-base">${time}</span>
-                    </div>
-                    <div class="min-w-0 flex-1">
-                        <div class="flex flex-wrap gap-1.5 mb-2">
-                            <span class="text-[8px] font-black bg-blue-50 text-blue-900 px-2 py-0.5 rounded uppercase border border-blue-100">${compShort}</span>
-                            <span class="text-[8px] font-black bg-slate-100 text-slate-500 px-2 py-0.5 rounded uppercase border border-slate-200">${guildObj ? guildObj.name : 'Reparación'}</span>
-                        </div>
-                        <h3 class="font-black text-slate-800 text-sm uppercase leading-tight truncate">${name}</h3>
-                        <p class="text-[10px] font-bold text-slate-400 mt-1 truncate uppercase flex items-center gap-1.5"><i data-lucide="map-pin" class="w-3 h-3 shrink-0"></i> ${addr}</p>
-                    </div>
-                </div>`;
-            }).join('');
-            safeLoadIcons();
-        }
-
-        let currentServiceId = null;
-
-        function openService(id) {
-            const s = localServices.find(x => x.id === id);
-            if (!s || s.provider === 'SYSTEM_BLOCK') return;
-            const raw = s.raw_data;
-            currentServiceId = id;
-
-            document.getElementById('detId').value = s.id;
-            document.getElementById('modTime').innerText = raw.scheduled_time || "--:--";
-            document.getElementById('detRef').innerText = `#${s.service_ref || "---"}`;
-            document.getElementById('detCompany').innerText = raw["Compañía"] || "Particular";
-            document.getElementById('detName').innerText = raw["Nombre Cliente"] || "Asegurado";
-            const fullAddress = `${raw["Dirección"] || ""}, ${raw["Código Postal"] || ""} ${raw["Población"] || ""}`;
-            document.getElementById('detAddress').innerText = fullAddress;
-
-            const rawPhone = raw["Teléfono"] || raw["TELEFONOS"] || raw["TELEFONO"] || "";
-            const matchPhone = String(rawPhone).match(/[6789]\d{8}/);
-            document.getElementById('detPhoneRaw').value = matchPhone ? matchPhone[0] : "";
-
-            const banner = document.getElementById('urgentBanner');
-            if (s.is_urgent) banner.classList.remove('hidden');
-            else banner.classList.add('hidden');
-
-            document.getElementById('detDesc').innerHTML = (raw["Descripción"] || raw["DESCRIPCION"] || "Sin notas.").replace(/\n/g, '<br>');
-
-            const extraContainer = document.getElementById('extraDataBox');
-            let detailsHtml = '';
-            const skipKeys = ["Nombre Cliente", "CLIENTE", "Dirección", "DOMICILIO", "Población", "POBLACION-PROVINCIA", "scheduled_date", "scheduled_time", "status_operativo", "assigned_to", "guild_id", "Código Postal", "assigned_to_name", "Descripción", "DESCRIPCION", "Compañía", "COMPAÑIA"];
-            
-            for(let key in raw) {
-                if(skipKeys.includes(key)) continue;
-                let valStr = String(raw[key] || "");
-                if(valStr.trim() === "") continue;
-                detailsHtml += `<div class="border-b border-slate-100 pb-2 mb-2 last:border-0 flex flex-col gap-0.5"><span class="text-[8px] font-black text-slate-400 uppercase tracking-widest">${key}</span><span class="text-[11px] font-bold text-slate-700 break-words">${valStr}</span></div>`;
-            }
-            extraContainer.innerHTML = detailsHtml || '<p class="text-xs text-slate-400">Sin datos adicionales.</p>';
-
-            const modal = document.getElementById('serviceModal');
-            modal.style.display = 'flex';
-            setTimeout(() => modal.classList.remove('translate-y-full'), 10);
-            calculateDistance(fullAddress);
-        }
-
-        function closeModal() {
-            const modal = document.getElementById('serviceModal');
-            modal.classList.add('translate-y-full');
-            setTimeout(() => modal.style.display = 'none', 300);
-        }
-
-        function callClient() { const p = document.getElementById('detPhoneRaw').value; if (p) window.location.href = `tel:+34${p}`; else alert("Sin teléfono"); }
-        function openWhatsApp() { const p = document.getElementById('detPhoneRaw').value; if (p) window.open(`https://wa.me/34${p}`, '_blank'); else alert("Sin teléfono"); }
-        function openMaps() { const a = document.getElementById('detAddress').innerText; if (a) window.open(`maps://?q=${encodeURIComponent(a)}`, '_blank'); }
-
-        async function calculateDistance(dest) {
-            if(!navigator.geolocation) return;
-            navigator.geolocation.getCurrentPosition(async (pos) => {
-                const lat = pos.coords.latitude; const lon = pos.coords.longitude;
-                try {
-                    const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(dest + ', España')}`);
-                    const data = await res.json();
-                    if (data && data[0]) {
-                        const R = 6371; const dLat = (data[0].lat - lat) * Math.PI / 180; const dLon = (data[0].lon - lon) * Math.PI / 180;
-                        const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat * Math.PI / 180) * Math.cos(data[0].lat * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2);
-                        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
-                        const km = R * c;
-                        document.getElementById('gpsLoading').classList.add('hidden');
-                        document.getElementById('gpsResult').classList.remove('hidden');
-                        document.getElementById('gpsKm').innerText = km.toFixed(1);
-                        document.getElementById('gpsMins').innerText = Math.round((km/35)*60)+5;
-                    }
-                } catch(e) { }
-            });
-        }
-
-        async function quickUpdate(action) {
-            if(!currentServiceId) return;
-            let word = ""; let msg = "";
-            if(action === 'camino') { word = "camino"; msg = "¿Enviar 'De Camino'?"; }
-            if(action === 'trabajando') { word = "trabaja"; msg = "¿Iniciar trabajo?"; }
-            if(action === 'finalizado') { word = "finaliza"; msg = "¿Finalizar expediente?"; }
-            if(action === 'encuesta') { word = "finaliza"; msg = "¿Enviar encuesta?"; }
-
-            if(!confirm(msg)) return;
-            const st = systemStatuses.find(s => s.name.toLowerCase().includes(word));
-            if(!st) return alert("Estado no encontrado");
-
-            try {
-                const res = await fetch(`${API_URL}/providers/scraped/${currentServiceId}`, {
-                    method: 'PUT', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
-                    body: JSON.stringify({ status_operativo: st.id })
+                list.innerHTML = "";
+                data.statuses.forEach(s => {
+                    const div = document.createElement('div');
+                    div.className = "p-3 border border-gray-100 rounded-lg bg-gray-50 flex justify-between items-center group hover:border-blue-200 transition-colors";
+                    const actionBtn = s.is_system ? `<i data-lucide="lock" class="w-4 h-4 text-slate-300" title="Estado del sistema"></i>` : `<button onclick="deleteStatus(${s.id})" class="text-gray-300 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>`;
+                    div.innerHTML = `<div class="flex items-center gap-3"><div class="w-3 h-3 rounded-full bg-${s.color}-500"></div><span class="font-bold text-gray-700 text-sm">${s.name}</span></div>${actionBtn}`;
+                    list.appendChild(div);
                 });
-                if(res.ok) { showToast("¡Actualizado!"); closeModal(); refreshData(); }
-            } catch (e) { alert("Error"); }
+                lucide.createIcons();
+            } catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error</p>'; }
         }
 
-        function showToast(m) {
-            const t = document.getElementById('toast'); document.getElementById('toastMsg').innerText = m;
-            t.classList.remove('opacity-0', '-translate-y-10'); t.classList.add('translate-y-0');
-            setTimeout(() => { t.classList.add('opacity-0', '-translate-y-10'); t.classList.remove('translate-y-0'); }, 2000);
+        async function addStatus() {
+            const input = document.getElementById('newStatusInput'), color = document.getElementById('newStatusColor').value, name = input.value.trim();
+            if(!name) return;
+            try {
+                const res = await fetch(`${API_URL}/statuses`, { method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` }, body: JSON.stringify({ name: name, color: color }) });
+                if(res.ok) { showToast("Añadido"); input.value = ""; loadStatusesConfig(); }
+            } catch(e) { showToast("Error", true); }
+        }
+
+        async function deleteStatus(id) {
+            if(!confirm("¿Borrar estado?")) return;
+            try {
+                const res = await fetch(`${API_URL}/statuses/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                if(res.ok) { showToast("Estado eliminado"); loadStatusesConfig(); }
+                else { const j = await res.json(); showToast(j.error || "Error", true); }
+            } catch(e) { showToast("Error de conexión", true); }
+        }
+
+        async function loadProviderCredentials() {
+            try {
+                const res = await fetch(`${API_URL}/providers/credentials`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                if(data.ok) {
+                    data.credentials.forEach(c => {
+                        const userInp = document.getElementById(`user_${c.provider.toLowerCase()}`);
+                        if(userInp) userInp.value = c.username;
+                    });
+                }
+            } catch(e) { console.error("Error creds"); }
+        }
+
+        async function loadPortalConfig() {
+            try {
+                const res = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                if (data.ok && data.config) {
+                    document.getElementById('confCompanyName').value = data.config.full_name || "";
+                    if (data.config.company_logo) {
+                        document.getElementById('confLogoBase64').value = data.config.company_logo;
+                        document.getElementById('logoPreview').innerHTML = `<img src="${data.config.company_logo}" class="w-full h-full object-contain">`;
+                    }
+                    if (data.config.portal_settings) {
+                        const s = data.config.portal_settings;
+                        if(s.m_start) document.getElementById('mStart').value = s.m_start;
+                        if(s.m_end) document.getElementById('mEnd').value = s.m_end;
+                        if(s.a_start) document.getElementById('aStart').value = s.a_start;
+                        if(s.a_end) document.getElementById('aEnd').value = s.a_end;
+                    }
+                }
+            } catch (e) { console.error("Error portal"); }
+        }
+
+        function encodeLogo(input) {
+            const file = input.files[0];
+            if (!file || file.size > 1024 * 1024) { alert("Máximo 1MB"); return; }
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                document.getElementById('confLogoBase64').value = e.target.result;
+                document.getElementById('logoPreview').innerHTML = `<img src="${e.target.result}" class="w-full h-full object-contain">`;
+            };
+            reader.readAsDataURL(file);
+        }
+
+        async function savePortalConfig() {
+            const btn = document.getElementById('btnSavePortal'), original = btn.innerHTML;
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
+            lucide.createIcons();
+            const payload = {
+                company_name: document.getElementById('confCompanyName').value,
+                company_logo: document.getElementById('confLogoBase64').value,
+                portal_settings: {
+                    m_start: document.getElementById('mStart').value, m_end: document.getElementById('mEnd').value,
+                    a_start: document.getElementById('aStart').value, a_end: document.getElementById('aEnd').value
+                }
+            };
+            try {
+                const res = await fetch(`${API_URL}/config/company`, {
+                    method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify(payload)
+                });
+                if (res.ok) showToast("Configuración del Portal guardada");
+            } catch (e) { showToast("Error conexión", true); }
+            finally { btn.innerHTML = original; lucide.createIcons(); }
+        }
+
+        function showToast(msg, isError = false) {
+            const t = document.getElementById('toast'), m = document.getElementById('toastMsg');
+            t.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-xl transition-all duration-300 z-50 flex items-center gap-3 ${isError ? 'bg-red-600' : 'bg-slate-800'} text-white font-medium`;
+            m.innerText = msg; t.classList.remove('translate-y-20', 'opacity-0');
+            setTimeout(() => t.classList.add('translate-y-20', 'opacity-0'), 3000);
         }
 
         function logout() { localStorage.clear(); window.location.href = "index.html"; }
