diff --git a/proteccion.html b/proteccion.html
index 73fd7e2..c66b768 100644
--- a/proteccion.html
+++ b/proteccion.html
@@ -3,116 +3,118 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gestión de Protección - IntegraRepara</title>
+    <title>Planes de Protección - IntegraRepara</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
-        body { font-family: 'Inter', sans-serif; }
+        .fade-in { animation: fadeIn 0.2s ease-in-out; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
         .no-scrollbar::-webkit-scrollbar { display: none; }
+        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
         
-        /* Estilos de pestañas */
-        .tab-btn { transition: all 0.3s ease; }
-        .tab-btn.active {
-            background-color: white;
-            color: #2563eb;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-        }
+        /* Estilos de pestañas estilo IntegraRepara */
+        .tab-btn { transition: all 0.3s ease; border-bottom: 2px solid transparent; }
+        .tab-btn.active { color: #2563eb; border-color: #2563eb; background-color: #eff6ff; }
     </style>
 </head>
-<body class="bg-slate-50 flex h-screen overflow-hidden text-slate-800">
+<body class="bg-gray-100 text-gray-800 font-sans h-screen overflow-hidden flex">
 
     <div id="sidebar-container" class="h-full shrink-0"></div>
 
-    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
+    <div class="flex-1 flex flex-col h-full min-w-0">
         
         <div id="header-container"></div>
-
-        <main class="flex-1 overflow-y-auto p-6 space-y-6">
-
-            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100">
+        
+        <main class="flex-1 flex flex-col overflow-hidden relative p-6 space-y-6">
+            
+            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-2xl shadow-sm border border-gray-200 shrink-0">
                 <div class="flex items-center gap-4">
-                    <div class="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-blue-200">
+                    <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
                         <i data-lucide="shield-check" class="w-7 h-7"></i>
                     </div>
                     <div>
-                        <h1 class="text-xl font-black tracking-tight">Planes de Protección</h1>
-                        <p class="text-slate-400 text-xs font-bold uppercase tracking-widest">Control de Suscriptores y Tarifas</p>
+                        <h1 class="text-xl font-black text-gray-800 tracking-tight">Servicio de Protección Eléctrica</h1>
+                        <p class="text-gray-400 text-xs font-bold uppercase tracking-widest">Gestión de Seguros y Mantenimiento</p>
                     </div>
                 </div>
 
-                <div class="flex bg-slate-100 p-1.5 rounded-2xl">
-                    <button onclick="switchTab('clients')" id="btn-tab-clients" class="tab-btn active px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest">
-                        Suscriptores
+                <div class="flex bg-gray-100 p-1 rounded-xl">
+                    <button onclick="switchTab('clients')" id="btn-tab-clients" class="tab-btn active px-6 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
+                        <i data-lucide="users" class="w-3 h-3"></i> Suscriptores
                     </button>
-                    <button onclick="switchTab('config')" id="btn-tab-config" class="tab-btn px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest">
-                        Configuración
+                    <button onclick="switchTab('config')" id="btn-tab-config" class="tab-btn px-6 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
+                        <i data-lucide="settings" class="w-3 h-3"></i> Configuración
                     </button>
                 </div>
             </div>
 
-            <div id="tab-clients" class="tab-content space-y-6">
-                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                    <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm">
-                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Asegurados</p>
-                        <p class="text-2xl font-black text-slate-800">1.240</p>
+            <div id="tab-clients" class="tab-content flex-1 flex flex-col min-h-0 fade-in">
+                
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6 shrink-0">
+                    <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
+                        <p class="text-[9px] font-black text-gray-400 uppercase mb-1">Total Asegurados</p>
+                        <p class="text-xl font-black text-gray-800">124</p>
                     </div>
-                    <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm border-l-4 border-l-blue-600">
-                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Ingreso Recurrente</p>
-                        <p class="text-2xl font-black text-blue-600">8.556€<span class="text-xs text-slate-400">/mes</span></p>
+                    <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
+                        <p class="text-[9px] font-black text-gray-400 uppercase mb-1">Ingresos MRR</p>
+                        <p class="text-xl font-black text-blue-600">855,60€</p>
                     </div>
-                    <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm border-l-4 border-l-amber-500">
-                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Bricos Pendientes</p>
-                        <p class="text-2xl font-black text-amber-500">42</p>
+                    <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
+                        <p class="text-[9px] font-black text-gray-400 uppercase mb-1">Urgencias/Bricos Mes</p>
+                        <p class="text-xl font-black text-amber-500">8 / 14</p>
                     </div>
-                    <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm border-l-4 border-l-rose-500">
-                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Impagos</p>
-                        <p class="text-2xl font-black text-rose-500">12</p>
+                    <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
+                        <p class="text-[9px] font-black text-gray-400 uppercase mb-1">Pagos Fallidos</p>
+                        <p class="text-xl font-black text-rose-500">2</p>
                     </div>
                 </div>
 
-                <div class="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
-                    <div class="p-6 border-b border-slate-50">
-                        <div class="relative max-w-md">
-                            <i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
-                            <input type="text" placeholder="Buscar por nombre, DNI o teléfono..." class="w-full pl-11 pr-4 py-3 bg-slate-50 rounded-xl text-sm font-bold outline-none border-none ring-1 ring-slate-100 focus:ring-2 focus:ring-blue-600">
+                <div class="flex-1 bg-white rounded-2xl shadow-sm border border-gray-200 flex flex-col overflow-hidden">
+                    <div class="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+                        <div class="relative w-72">
+                            <i data-lucide="search" class="w-4 h-4 absolute left-3 top-2.5 text-gray-400"></i>
+                            <input type="text" placeholder="Buscar asegurado..." class="w-full pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-lg text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
                         </div>
                     </div>
-                    <div class="overflow-x-auto">
+                    
+                    <div class="flex-1 overflow-y-auto no-scrollbar">
                         <table class="w-full text-left">
-                            <thead class="bg-slate-50/50 text-[10px] font-black text-slate-400 uppercase tracking-widest">
+                            <thead class="sticky top-0 bg-white shadow-sm text-[10px] font-black text-gray-400 uppercase tracking-widest">
                                 <tr>
-                                    <th class="px-6 py-4">Cliente</th>
-                                    <th class="px-6 py-4 text-center">Plan</th>
-                                    <th class="px-6 py-4 text-center">Consumo (Bricos/Urg)</th>
+                                    <th class="px-6 py-4">Socio / Datos</th>
+                                    <th class="px-6 py-4">Plan / Cuota</th>
+                                    <th class="px-6 py-4 text-center">Uso (Bricos/Urg)</th>
                                     <th class="px-6 py-4">Estado Pago</th>
                                     <th class="px-6 py-4 text-right">Contrato</th>
                                 </tr>
                             </thead>
-                            <tbody class="text-sm font-bold text-slate-600 divide-y divide-slate-50">
-                                <tr class="hover:bg-slate-50/80 transition-colors">
+                            <tbody class="text-sm font-bold text-gray-600 divide-y divide-gray-50">
+                                <tr class="hover:bg-blue-50/50 transition-colors">
                                     <td class="px-6 py-4">
-                                        <div class="flex flex-col">
-                                            <span class="text-slate-800">García López, Manuel</span>
-                                            <span class="text-[10px] font-medium text-slate-400">DNI: 12345678X • Tel: 600000000</span>
+                                        <div class="flex items-center gap-3">
+                                            <div class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xs">JP</div>
+                                            <div class="flex flex-col">
+                                                <span>Juan Pérez García</span>
+                                                <span class="text-[9px] font-medium text-gray-400">DNI: 12345678X • 600112233</span>
+                                            </div>
                                         </div>
                                     </td>
-                                    <td class="px-6 py-4 text-center">
-                                        <span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-lg text-[10px] border border-blue-100">ANUAL</span>
+                                    <td class="px-6 py-4 text-xs">
+                                        <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded-md">ANUAL (59,95€)</span>
                                     </td>
-                                    <td class="px-6 py-4 text-center">
+                                    <td class="px-6 py-4">
                                         <div class="flex flex-col items-center gap-1">
-                                            <span class="text-[10px] font-black"><i data-lucide="hammer" class="w-3 h-3 inline"></i> 0/1 | <i data-lucide="zap" class="w-3 h-3 inline"></i> 1/2</span>
-                                            <div class="w-20 h-1 bg-slate-100 rounded-full overflow-hidden">
-                                                <div class="w-1/2 h-full bg-blue-500"></div>
+                                            <span class="text-[10px] text-gray-400">Bricos: 0/1 | Urg: 1/2</span>
+                                            <div class="w-24 h-1.5 bg-gray-100 rounded-full overflow-hidden">
+                                                <div class="w-1/3 h-full bg-blue-500"></div>
                                             </div>
                                         </div>
                                     </td>
                                     <td class="px-6 py-4">
-                                        <span class="text-emerald-500 flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> AL DÍA</span>
+                                        <span class="text-emerald-600 flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div> PAGADO</span>
                                     </td>
                                     <td class="px-6 py-4 text-right">
-                                        <button class="w-9 h-9 bg-slate-100 text-slate-500 rounded-xl hover:bg-blue-600 hover:text-white transition-all"><i data-lucide="download" class="w-4 h-4 mx-auto"></i></button>
+                                        <button class="p-2 text-gray-400 hover:text-blue-600 transition-colors"><i data-lucide="file-down" class="w-4 h-4"></i></button>
                                     </td>
                                 </tr>
                             </tbody>
@@ -121,73 +123,70 @@
                 </div>
             </div>
 
-            <div id="tab-config" class="tab-content hidden space-y-6">
+            <div id="tab-config" class="tab-content hidden flex-1 min-h-0 fade-in overflow-y-auto no-scrollbar pb-10">
                 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                     
                     <div class="lg:col-span-1 space-y-6">
-                        <div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100">
-                            <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
-                                <i data-lucide="banknote" class="w-4 h-4 text-blue-600"></i> Precios 1º Año
+                        <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
+                            <h3 class="text-xs font-black text-gray-800 uppercase tracking-widest mb-4 flex items-center gap-2 border-b pb-3">
+                                <i data-lucide="tag" class="w-4 h-4 text-blue-600"></i> Precios 1º Año (Oferta)
                             </h3>
                             <div class="space-y-4">
                                 <div>
-                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Mensual (€/Mes)</label>
-                                    <input type="number" value="6.90" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
+                                    <label class="text-[10px] font-black text-gray-400 uppercase">Cuota Mensual (€)</label>
+                                    <input type="number" step="0.01" value="6.90" class="w-full px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
                                 </div>
                                 <div>
-                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Anual (€/Año)</label>
-                                    <input type="number" value="59.95" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
+                                    <label class="text-[10px] font-black text-gray-400 uppercase">Cuota Anual (€)</label>
+                                    <input type="number" step="0.01" value="59.95" class="w-full px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
                                 </div>
                             </div>
                         </div>
 
-                        <div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100">
-                            <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
-                                <i data-lucide="refresh-cw" class="w-4 h-4 text-blue-600"></i> Renovaciones (Posterior 1º año)
+                        <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
+                            <h3 class="text-xs font-black text-gray-800 uppercase tracking-widest mb-4 flex items-center gap-2 border-b pb-3 text-amber-600">
+                                <i data-lucide="refresh-cw" class="w-4 h-4"></i> Renovaciones (PVP Real)
                             </h3>
                             <div class="space-y-4">
                                 <div>
-                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Mensual (€/Mes)</label>
-                                    <input type="number" value="8.90" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
+                                    <label class="text-[10px] font-black text-gray-400 uppercase">Mensual tras 12 meses (€)</label>
+                                    <input type="number" step="0.01" value="8.90" class="w-full px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm text-amber-700">
                                 </div>
                                 <div>
-                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Anual (€/Año)</label>
-                                    <input type="number" value="89.00" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
+                                    <label class="text-[10px] font-black text-gray-400 uppercase">Anual tras 12 meses (€)</label>
+                                    <input type="number" step="0.01" value="89.00" class="w-full px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm text-amber-700">
                                 </div>
                             </div>
                         </div>
 
-                        <div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100">
-                            <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
-                                <i data-lucide="percent" class="w-4 h-4 text-blue-600"></i> Descuentos Especiales
+                        <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
+                            <h3 class="text-xs font-black text-gray-800 uppercase tracking-widest mb-4 flex items-center gap-2 border-b pb-3 text-blue-600">
+                                <i data-lucide="gift" class="w-4 h-4"></i> Fidelización
                             </h3>
-                            <div class="space-y-4">
-                                <div>
-                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Descuento Clientes Actuales (%)</label>
-                                    <input type="number" value="10" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
-                                </div>
+                            <div>
+                                <label class="text-[10px] font-black text-gray-400 uppercase">Dto. Clientes de Cartera (%)</label>
+                                <input type="number" value="10" class="w-full px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
                             </div>
                         </div>
                     </div>
 
                     <div class="lg:col-span-2">
-                        <div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100 h-full flex flex-col">
-                            <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center justify-between">
-                                <span class="flex items-center gap-2"><i data-lucide="file-text" class="w-4 h-4 text-blue-600"></i> Texto Legal del Contrato</span>
-                                <span class="text-[10px] text-slate-400 font-medium">Actualizable para nuevos firmantes</span>
-                            </h3>
-                            <textarea id="cfg-contract-text" class="flex-1 w-full p-6 bg-slate-50 border border-slate-100 rounded-[2rem] text-sm text-slate-600 leading-relaxed focus:ring-2 focus:ring-blue-600 outline-none min-h-[500px]">
-1. OBJETO DEL CONTRATO: IntegraRepara prestará servicios de asistencia técnica...
-2. COBERTURA DE URGENCIAS: 2 intervenciones al año, 3h de mano de obra...
-3. BRICOLAJE ELÉCTRICO: 1 servicio de 2h anual...
-4. MATERIALES: Por cuenta del cliente...
-... (puedes editar todo el contrato aquí)
-                            </textarea>
-                            <div class="mt-6 flex justify-end">
-                                <button onclick="saveConfig()" class="bg-blue-600 text-white px-8 py-4 rounded-2xl font-black uppercase tracking-widest text-xs shadow-lg hover:bg-blue-700 active:scale-95 transition-all flex items-center gap-2">
-                                    <i data-lucide="save" class="w-4 h-4"></i> Guardar Todo
+                        <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm h-full flex flex-col">
+                            <div class="flex justify-between items-center mb-4 border-b pb-3">
+                                <h3 class="text-xs font-black text-gray-800 uppercase tracking-widest flex items-center gap-2">
+                                    <i data-lucide="file-signature" class="w-4 h-4 text-blue-600"></i> Clausulado del Contrato
+                                </h3>
+                                <button onclick="saveProtectionConfig()" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest shadow-md hover:bg-blue-700 transition-all flex items-center gap-2">
+                                    <i data-lucide="save" class="w-3.5 h-3.5"></i> Guardar Cambios
                                 </button>
                             </div>
+                            <textarea class="flex-1 w-full p-6 bg-gray-50 border rounded-2xl text-xs font-medium leading-relaxed text-gray-500 focus:ring-2 focus:ring-blue-500 outline-none min-h-[400px]">
+1. OBJETO: Prestación de servicios de urgencia y manitas...
+2. COBERTURAS: Máximo 2 urgencias al año...
+3. BRICOLAJE: Un servicio de 2 horas anual incluido...
+4. CARENCIA: 15 días naturales desde firma...
+... (puedes modificar este texto y se aplicará a los nuevos contratos)
+                            </textarea>
                         </div>
                     </div>
                 </div>
@@ -196,26 +195,27 @@
         </main>
     </div>
 
-    <script src="js/main.js"></script>
+    <script src="js/layout.js"></script>
     <script>
-        lucide.createIcons();
-
+        // Lógica de pestañas
         function switchTab(tab) {
-            // Ocultar todos los contenidos
             document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
             document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
-
-            // Mostrar el seleccionado
+            
             document.getElementById('tab-' + tab).classList.remove('hidden');
             document.getElementById('btn-tab-' + tab).classList.add('active');
             
-            lucide.createIcons(); // Refrescar iconos
+            if (window.lucide) lucide.createIcons();
         }
 
-        async function saveConfig() {
-            // Aquí iría el fetch a tu API
-            alert("✅ Configuración de Planes de Protección actualizada con éxito.");
+        async function saveProtectionConfig() {
+            alert("✅ Configuración de Protección guardada correctamente.");
         }
+
+        // Inicializar iconos
+        document.addEventListener("DOMContentLoaded", () => {
+            if (window.lucide) lucide.createIcons();
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
