diff --git a/configuracion.html b/configuracion.html
index f283fdd..7ee4883 100644
--- a/configuracion.html
+++ b/configuracion.html
@@ -6,6 +6,7 @@
     <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>
         .fade-in { animation: fadeIn 0.3s ease-in-out; }
         .scroller::-webkit-scrollbar { width: 6px; }
@@ -48,35 +49,28 @@
             <div class="flex-1 overflow-hidden p-6 bg-gray-50">
 
                 <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
+                                <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('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
+                                <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
+                                <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
+                                <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
+                                <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
+                                <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>
@@ -91,26 +85,64 @@
                                 <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">Insertar Variable:</span>
-                            <button onclick="insertVar('{{NOMBRE}}')" class="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" title="Nombre del cliente">{{NOMBRE}}</button>
-                            <button onclick="insertVar('{{DIRECCION}}')" class="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" title="Dirección del servicio">{{DIRECCION}}</button>
-                            <button onclick="insertVar('{{FECHA}}')" class="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" title="Fecha de la cita">{{FECHA}}</button>
-                            <button onclick="insertVar('{{HORA}}')" class="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" title="Hora de la cita">{{HORA}}</button>
-                            <button onclick="insertVar('{{COMPANIA}}')" class="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" title="Nombre de la aseguradora">{{COMPANIA}}</button>
-                            <button onclick="insertVar('{{REFERENCIA}}')" class="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" title="Nº Expediente">{{REFERENCIA}}</button>
+                            <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>
                         </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 para empezar a editar..."></textarea>
+                        <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..."></textarea>
                     </div>
                 </div>
                 
                 <div id="view-whatsapp" class="tab-content hidden h-full fade-in">
-                    <div class="bg-white rounded-xl shadow p-10 text-center border border-gray-100">
-                        <i data-lucide="message-circle" class="w-16 h-16 text-green-100 mx-auto mb-4 text-green-500"></i>
-                        <h3 class="text-xl font-bold text-gray-700">Conexión WhatsApp</h3>
-                        <p class="text-gray-500 mt-2">Próximamente</p>
+                    <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
+                        
+                        <div class="bg-white rounded-xl shadow border border-gray-100 p-6">
+                            <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+                                <i data-lucide="activity" class="text-blue-600"></i> Estado de Conexión
+                            </h3>
+                            
+                            <div id="waStatusContainer" class="flex flex-col items-center justify-center p-6 bg-gray-50 rounded-lg border border-gray-200 min-h-[200px]">
+                                <div class="animate-pulse flex flex-col items-center">
+                                    <div class="w-12 h-12 bg-gray-200 rounded-full mb-3"></div>
+                                    <span class="text-gray-400 text-sm">Comprobando estado...</span>
+                                </div>
+                            </div>
+
+                            <button onclick="checkWhatsappStatus()" class="mt-4 w-full bg-white border border-gray-300 text-gray-700 font-bold py-2 rounded-lg hover:bg-gray-50 transition shadow-sm flex items-center justify-center gap-2">
+                                <i data-lucide="refresh-cw" class="w-4 h-4"></i> Actualizar Estado
+                            </button>
+                        </div>
+
+                        <div class="bg-white rounded-xl shadow border border-gray-100 p-6">
+                            <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
+                                <i data-lucide="settings-2" class="text-gray-600"></i> Configuración API
+                            </h3>
+                            <p class="text-xs text-gray-500 mb-4">Introduce los datos de tu instancia de Evolution API.</p>
+                            
+                            <div class="space-y-4">
+                                <div>
+                                    <label class="block text-xs font-bold text-gray-600 mb-1">URL Base (Evolution API)</label>
+                                    <input type="url" id="waUrl" class="w-full border rounded-lg px-3 py-2 text-sm focus:border-blue-500 outline-none" placeholder="https://api.midominio.com">
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-bold text-gray-600 mb-1">API Key (Global)</label>
+                                    <input type="password" id="waKey" class="w-full border rounded-lg px-3 py-2 text-sm focus:border-blue-500 outline-none" placeholder="sk-...">
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-bold text-gray-600 mb-1">Nombre de Instancia</label>
+                                    <input type="text" id="waInstance" class="w-full border rounded-lg px-3 py-2 text-sm focus:border-blue-500 outline-none" placeholder="IntegraRepara">
+                                </div>
+                                <button onclick="saveWhatsappConfig()" class="w-full bg-slate-800 text-white font-bold py-2 rounded-lg hover:bg-slate-700 transition">
+                                    Guardar Configuración
+                                </button>
+                            </div>
+                        </div>
+
                     </div>
                 </div>
 
@@ -133,45 +165,14 @@
                 <div id="view-others" class="tab-content hidden h-full fade-in flex flex-col">
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <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 de la compañía..." 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 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 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>
@@ -183,15 +184,16 @@
     <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>
+    <style>.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>
     <script>
-        // Variables globales
         let cachedTemplates = {};
         let currentTemplateType = null;
 
         document.addEventListener("DOMContentLoaded", () => {
             if (!localStorage.getItem("token")) window.location.href = "index.html";
             showTab('templates'); 
-            loadTemplates(); // Cargar plantillas al inicio
+            loadTemplates();
+            loadWhatsappConfig(); // Cargar config si existe
         });
 
         function showTab(tabId) {
@@ -206,90 +208,155 @@
             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 === 'others') { loadCompanies(); loadStatusesConfig(); }
+            if(tabId === 'whatsapp') { checkWhatsappStatus(); }
         }
 
-        // ==========================================
-        // 📄 LÓGICA DE PLANTILLAS
-        // ==========================================
+        // --- WHATSAPP CONFIG & STATUS ---
+        function loadWhatsappConfig() {
+            // Por ahora usamos localStorage, idealmente vendría del backend
+            const conf = JSON.parse(localStorage.getItem('wa_config') || '{}');
+            if(conf.url) document.getElementById('waUrl').value = conf.url;
+            if(conf.key) document.getElementById('waKey').value = conf.key;
+            if(conf.instance) document.getElementById('waInstance').value = conf.instance;
+        }
+
+        function saveWhatsappConfig() {
+            const url = document.getElementById('waUrl').value.replace(/\/$/, ""); // Quitar slash final
+            const key = document.getElementById('waKey').value;
+            const instance = document.getElementById('waInstance').value;
+            
+            if(!url || !key || !instance) { showToast("Rellena todos los campos", true); return; }
+            
+            localStorage.setItem('wa_config', JSON.stringify({ url, key, instance }));
+            showToast("Configuración guardada");
+            checkWhatsappStatus();
+        }
+
+        async function checkWhatsappStatus() {
+            const conf = JSON.parse(localStorage.getItem('wa_config') || '{}');
+            const container = document.getElementById('waStatusContainer');
+            
+            if(!conf.url || !conf.key || !conf.instance) {
+                container.innerHTML = `
+                    <div class="text-center text-gray-400">
+                        <i data-lucide="settings" class="w-10 h-10 mx-auto mb-2 text-gray-300"></i>
+                        <p class="text-sm">Configura la API primero</p>
+                    </div>`;
+                lucide.createIcons();
+                return;
+            }
+
+            container.innerHTML = `
+                <div class="flex flex-col items-center animate-pulse">
+                    <i data-lucide="loader-2" class="w-8 h-8 text-blue-500 animate-spin mb-2"></i>
+                    <span class="text-sm text-blue-600 font-medium">Conectando con Evolution API...</span>
+                </div>`;
+            lucide.createIcons();
+
+            try {
+                // 1. Verificar estado de la instancia
+                const res = await fetch(`${conf.url}/instance/connectionState/${conf.instance}`, {
+                    headers: { "apikey": conf.key }
+                });
+                
+                if(!res.ok) throw new Error("Error al conectar");
+                
+                const data = await res.json();
+                const state = data.instance?.state || "close";
+
+                if (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-3">
+                                <i data-lucide="check" class="w-8 h-8 text-green-600"></i>
+                            </div>
+                            <h4 class="text-lg font-bold text-green-700">Conectado</h4>
+                            <p class="text-xs text-green-600 mt-1">Listo para enviar mensajes</p>
+                        </div>`;
+                } else {
+                    // Si no está conectado, intentamos obtener el QR
+                    // Nota: En Evolution v2 el endpoint de QR puede variar, aquí asumo el estándar
+                    container.innerHTML = `
+                        <div class="flex flex-col items-center text-center">
+                            <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-3">
+                                <i data-lucide="qr-code" class="w-8 h-8 text-orange-600"></i>
+                            </div>
+                            <h4 class="text-lg font-bold text-orange-700">Desconectado</h4>
+                            <p class="text-xs text-orange-600 mt-1 mb-3">Escanea el QR para vincular</p>
+                            <div id="qrcode" class="bg-white p-2 border rounded"></div>
+                        </div>`;
+                        
+                    // Fetch QR (esto depende de la versión exacta de Evolution API)
+                    const resQr = await fetch(`${conf.url}/instance/connect/${conf.instance}`, { headers: { "apikey": conf.key } });
+                    const dataQr = await resQr.json();
+                    if(dataQr.code || dataQr.base64) {
+                        // Si recibimos base64, lo mostramos como imagen
+                        // Si recibimos string, usamos qrcode.js (si está cargado)
+                        const qrCode = dataQr.code || dataQr.base64;
+                        if(qrCode.startsWith('data:image')) {
+                            document.getElementById('qrcode').innerHTML = `<img src="${qrCode}" class="w-40 h-40">`;
+                        }
+                    }
+                }
+            } catch(e) {
+                container.innerHTML = `
+                    <div class="text-center text-red-500">
+                        <i data-lucide="alert-triangle" class="w-10 h-10 mx-auto mb-2"></i>
+                        <p class="text-sm font-bold">Error de conexión</p>
+                        <p class="text-xs mt-1 opacity-75">Revisa la URL y la API Key</p>
+                    </div>`;
+            }
+            lucide.createIcons();
+        }
+
+        // --- GESTIÓN DE PLANTILLAS (IGUAL QUE ANTES) ---
         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;
-                    });
-                    // Simular clic en la primera plantilla para cargar el editor
-                    if (!currentTemplateType) {
-                        const firstBtn = document.querySelector('.tpl-btn');
-                        if(firstBtn) firstBtn.click();
-                    }
+                    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 cargando plantillas"); }
+            } catch(e) { console.error("Error templates"); }
         }
-
         function selectTemplate(type, btn) {
             currentTemplateType = type;
-            // Estilos visuales
             document.querySelectorAll('.tpl-btn').forEach(b => {
                 b.classList.remove('bg-blue-50', 'ring-1', 'ring-blue-200');
-                b.querySelector('span').classList.replace('bg-blue-600', 'bg-blue-100'); // Reset iconos si fuera necesario
+                b.querySelector('span').classList.replace('bg-blue-600', 'bg-blue-100');
                 b.querySelector('span').classList.replace('text-white', 'text-blue-600');
             });
-            
             btn.classList.add('bg-blue-50', 'ring-1', 'ring-blue-200');
-            
-            // Actualizar título y contenido del editor
+            btn.querySelector('span').classList.replace('bg-blue-100', 'bg-blue-600');
+            btn.querySelector('span').classList.replace('text-blue-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;
             const end = textarea.selectionEnd;
             const val = textarea.value;
-            
-            // Insertar texto en la posición del cursor
             textarea.value = val.substring(0, start) + text + val.substring(end);
-            
-            // Reposicionar cursor después de la variable y enfocar
             textarea.focus();
             textarea.selectionStart = textarea.selectionEnd = start + text.length;
         }
-
         async function saveTemplate() {
-            if(!currentTemplateType) {
-                showToast("Selecciona un tipo de mensaje primero", true);
-                return;
-            }
+            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")}` },
+                    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; // Actualizar cache local
-                    showToast("✅ Plantilla guardada correctamente");
-                } else {
-                    showToast("Error al guardar plantilla", true);
-                }
-            } catch(e) { showToast("Error de conexión", true); }
+                if(res.ok) { cachedTemplates[currentTemplateType] = content; showToast("Guardado"); } else { showToast("Error", true); }
+            } catch(e) { showToast("Error", true); }
         }
 
-        // ==========================================
-        // 🏢 LÓGICA DE COMPAÑÍAS Y ESTADOS
-        // ==========================================
+        // --- GESTIÓN DE COMPAÑÍAS Y ESTADOS (MANTENIDO) ---
         async function loadCompanies() {
             const list = document.getElementById('listCompanies');
             list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';
@@ -307,26 +374,20 @@
                 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');
             const 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("Compañía añadida"); input.value = ""; loadCompanies(); }
+                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 compañía?")) return;
+            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>';
@@ -337,41 +398,29 @@
                 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";
-                    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>
-                        <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><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>`;
                     list.appendChild(div);
                 });
                 lucide.createIcons();
             } catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error</p>'; }
         }
-
         async function addStatus() {
             const input = document.getElementById('newStatusInput');
             const color = document.getElementById('newStatusColor').value;
             const 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("Estado añadido"); input.value = ""; loadStatusesConfig(); }
+                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;
+            if(!confirm("¿Borrar?")) return;
             try {
                 const res = await fetch(`${API_URL}/statuses/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
                 const json = await res.json();
-                if(res.ok) { showToast("Estado eliminado"); loadStatusesConfig(); }
-                else { showToast(json.error || "No se pudo borrar", true); }
-            } catch(e) { showToast("Error conexión", true); }
+                if(res.ok) { showToast("Eliminado"); loadStatusesConfig(); } else { showToast(json.error || "Error", true); }
+            } catch(e) { showToast("Error", true); }
         }
 
         function showToast(msg, isError = false) {