diff --git a/proteccion.html b/proteccion.html
index ee949a8..09b7b6c 100644
--- a/proteccion.html
+++ b/proteccion.html
@@ -1,943 +1,711 @@
 <!DOCTYPE html>
 <html lang="es">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Seguros SaaS - IntegraRepara</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/lucide@latest"></script>
-  <style>
-    .fade-in { animation: fadeIn 0.2s ease-in-out; }
-    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
-    .no-scrollbar::-webkit-scrollbar { display: none; }
-    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-    .tab-btn { transition: all 0.25s ease; border-bottom: 2px solid transparent; }
-    .tab-btn.active { color: #2563eb; border-color: #2563eb; background-color: #eff6ff; }
-    .subtab-btn { transition: all 0.2s ease; }
-    .subtab-btn.active { background: #1d4ed8; color: white; box-shadow: 0 8px 24px rgba(37,99,235,.18); }
-    .glass { backdrop-filter: blur(10px); }
-  </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Seguros SaaS - IntegraRepara</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        .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; }
+        .tab-btn { transition: all 0.3s ease; border-bottom: 2px solid transparent; }
+        .tab-btn.active { color: #2563eb; border-color: #2563eb; background-color: #eff6ff; }
+        .modal-backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); }
+    </style>
 </head>
 <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 id="sidebar-container" class="h-full shrink-0"></div>
 
-  <div class="flex-1 flex flex-col h-full min-w-0">
-    <div id="header-container"></div>
+    <div class="flex-1 flex flex-col h-full min-w-0">
+        <div id="header-container"></div>
 
-    <main class="flex-1 flex flex-col overflow-hidden relative p-6 gap-6">
+        <main class="flex-1 flex flex-col overflow-hidden relative p-6 space-y-6">
+            
+            <div class="flex flex-col lg:flex-row lg: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-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 text-gray-800 tracking-tight">Seguros / Planes de Protección</h1>
+                        <p class="text-gray-400 text-xs font-bold uppercase tracking-widest">MÓDULO SAAS PARA ASEGURADORAS Y SUSCRIPCIONES</p>
+                    </div>
+                </div>
 
-      <section class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 shrink-0">
-        <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-5">
-          <div class="flex items-center gap-4 min-w-0">
-            <div class="w-14 h-14 rounded-2xl bg-blue-600 text-white flex items-center justify-center shadow-lg shrink-0">
-              <i data-lucide="shield" class="w-7 h-7"></i>
-            </div>
-            <div class="min-w-0">
-              <div class="flex flex-wrap items-center gap-2 mb-1">
-                <h1 class="text-2xl font-black tracking-tight text-gray-900">Seguros / Planes de Protección</h1>
-                <span class="px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[10px] font-black uppercase tracking-widest">Módulo SaaS</span>
-              </div>
-              <p class="text-gray-500 text-sm font-semibold">Configuración avanzada de aseguradoras, planes, suscriptores, cobros, coberturas y automatizaciones.</p>
-            </div>
-          </div>
-
-          <div class="flex flex-wrap gap-3">
-            <button onclick="openModal('companyModal')" class="px-4 py-2.5 rounded-xl bg-white border border-gray-200 hover:border-blue-300 text-xs font-black uppercase tracking-widest flex items-center gap-2 shadow-sm">
-              <i data-lucide="building-2" class="w-4 h-4"></i> Nueva aseguradora
-            </button>
-            <button onclick="openModal('planModal')" class="px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-xs font-black uppercase tracking-widest flex items-center gap-2 shadow-lg">
-              <i data-lucide="plus" class="w-4 h-4"></i> Nuevo plan
-            </button>
-          </div>
-        </div>
-
-        <div class="mt-5 flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-2xl w-fit">
-          <button onclick="switchTab('dashboard')" id="btn-tab-dashboard" class="tab-btn active px-4 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
-            <i data-lucide="layout-dashboard" class="w-3.5 h-3.5"></i> Resumen
-          </button>
-          <button onclick="switchTab('company')" id="btn-tab-company" class="tab-btn px-4 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
-            <i data-lucide="briefcase-business" class="w-3.5 h-3.5"></i> Aseguradora
-          </button>
-          <button onclick="switchTab('plans')" id="btn-tab-plans" class="tab-btn px-4 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
-            <i data-lucide="badge-euro" class="w-3.5 h-3.5"></i> Planes
-          </button>
-          <button onclick="switchTab('subscribers')" id="btn-tab-subscribers" class="tab-btn px-4 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
-            <i data-lucide="users" class="w-3.5 h-3.5"></i> Suscriptores
-          </button>
-          <button onclick="switchTab('billing')" id="btn-tab-billing" class="tab-btn px-4 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
-            <i data-lucide="credit-card" class="w-3.5 h-3.5"></i> Cobros
-          </button>
-          <button onclick="switchTab('automation')" id="btn-tab-automation" class="tab-btn px-4 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
-            <i data-lucide="bot" class="w-3.5 h-3.5"></i> Automatizaciones
-          </button>
-          <button onclick="switchTab('documents')" id="btn-tab-documents" class="tab-btn px-4 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
-            <i data-lucide="file-signature" class="w-3.5 h-3.5"></i> Contratos
-          </button>
-        </div>
-      </section>
-
-      <section id="tab-dashboard" class="tab-content flex-1 min-h-0 flex flex-col gap-6 fade-in overflow-hidden">
-        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-6 gap-4 shrink-0">
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Asegurados activos</p>
-            <div class="mt-2 flex items-end justify-between">
-              <p class="text-2xl font-black text-gray-900">1.284</p>
-              <span class="text-emerald-600 text-xs font-black">+6.2%</span>
-            </div>
-          </div>
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">MRR</p>
-            <div class="mt-2 flex items-end justify-between">
-              <p class="text-2xl font-black text-blue-600">11.842€</p>
-              <span class="text-blue-600 text-xs font-black">+742€</span>
-            </div>
-          </div>
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Renovaciones 30 días</p>
-            <div class="mt-2 flex items-end justify-between">
-              <p class="text-2xl font-black text-gray-900">96</p>
-              <span class="text-amber-600 text-xs font-black">18 hoy</span>
-            </div>
-          </div>
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Impagos</p>
-            <div class="mt-2 flex items-end justify-between">
-              <p class="text-2xl font-black text-rose-600">14</p>
-              <span class="text-rose-500 text-xs font-black">2 críticos</span>
-            </div>
-          </div>
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Siniestralidad</p>
-            <div class="mt-2 flex items-end justify-between">
-              <p class="text-2xl font-black text-gray-900">23%</p>
-              <span class="text-gray-500 text-xs font-black">mes actual</span>
-            </div>
-          </div>
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Churn</p>
-            <div class="mt-2 flex items-end justify-between">
-              <p class="text-2xl font-black text-gray-900">1.8%</p>
-              <span class="text-emerald-600 text-xs font-black">controlado</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 min-h-0 flex-1">
-          <div class="xl:col-span-2 bg-white rounded-2xl border border-gray-200 shadow-sm flex flex-col overflow-hidden min-h-0">
-            <div class="p-5 border-b border-gray-100 flex items-center justify-between bg-gray-50/70 shrink-0">
-              <div>
-                <h3 class="text-sm font-black tracking-tight text-gray-900">Planes más vendidos</h3>
-                <p class="text-xs text-gray-500 font-semibold">Distribución comercial y rentabilidad estimada.</p>
-              </div>
-              <button class="px-3 py-2 rounded-lg border border-gray-200 text-[10px] uppercase tracking-widest font-black">Exportar</button>
-            </div>
-            <div class="p-5 overflow-y-auto no-scrollbar space-y-4">
-              <div class="p-4 rounded-2xl bg-blue-50 border border-blue-100">
-                <div class="flex items-center justify-between gap-3">
-                  <div>
-                    <p class="text-sm font-black text-blue-900">Plan Hogar Plus</p>
-                    <p class="text-xs font-semibold text-blue-700">Urgencias eléctricas + fontanería + 2 bricos/año</p>
-                  </div>
-                  <span class="px-2.5 py-1 rounded-full bg-white text-blue-700 text-[10px] font-black uppercase tracking-widest">642 activos</span>
+                <div class="flex flex-wrap gap-2">
+                    <button onclick="openPlanModal()" 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="plus" class="w-3.5 h-3.5"></i> Nuevo Plan
+                    </button>
+                    <button onclick="openClientModal()" class="bg-white border border-gray-200 text-gray-700 px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest shadow-sm hover:border-blue-300 transition-all flex items-center gap-2">
+                        <i data-lucide="user-plus" class="w-3.5 h-3.5"></i> Nuevo Suscriptor
+                    </button>
                 </div>
-                <div class="mt-3 w-full h-2 rounded-full bg-white overflow-hidden"><div class="h-full w-[72%] bg-blue-600"></div></div>
-              </div>
-              <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-100">
-                <div class="flex items-center justify-between gap-3">
-                  <div>
-                    <p class="text-sm font-black text-emerald-900">Plan Premium 24/7</p>
-                    <p class="text-xs font-semibold text-emerald-700">Atención prioritaria, urgencias ilimitadas con copago reducido</p>
-                  </div>
-                  <span class="px-2.5 py-1 rounded-full bg-white text-emerald-700 text-[10px] font-black uppercase tracking-widest">318 activos</span>
-                </div>
-                <div class="mt-3 w-full h-2 rounded-full bg-white overflow-hidden"><div class="h-full w-[48%] bg-emerald-600"></div></div>
-              </div>
-              <div class="p-4 rounded-2xl bg-amber-50 border border-amber-100">
-                <div class="flex items-center justify-between gap-3">
-                  <div>
-                    <p class="text-sm font-black text-amber-900">Plan Básico Anual</p>
-                    <p class="text-xs font-semibold text-amber-700">1 urgencia anual + 1 brico + renovación automática</p>
-                  </div>
-                  <span class="px-2.5 py-1 rounded-full bg-white text-amber-700 text-[10px] font-black uppercase tracking-widest">224 activos</span>
-                </div>
-                <div class="mt-3 w-full h-2 rounded-full bg-white overflow-hidden"><div class="h-full w-[31%] bg-amber-500"></div></div>
-              </div>
-            </div>
-          </div>
-
-          <div class="bg-white rounded-2xl border border-gray-200 shadow-sm flex flex-col overflow-hidden min-h-0">
-            <div class="p-5 border-b border-gray-100 bg-gray-50/70 shrink-0">
-              <h3 class="text-sm font-black tracking-tight text-gray-900">Actividad reciente</h3>
-              <p class="text-xs text-gray-500 font-semibold">Movimientos clave del módulo.</p>
-            </div>
-            <div class="p-5 overflow-y-auto no-scrollbar space-y-4 text-sm">
-              <div class="flex gap-3">
-                <div class="w-9 h-9 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center shrink-0"><i data-lucide="file-plus-2" class="w-4 h-4"></i></div>
-                <div>
-                  <p class="font-black text-gray-800">Contrato generado</p>
-                  <p class="text-xs text-gray-500 font-semibold">PRE-HOGAR-00482 · hace 12 min</p>
-                </div>
-              </div>
-              <div class="flex gap-3">
-                <div class="w-9 h-9 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0"><i data-lucide="badge-check" class="w-4 h-4"></i></div>
-                <div>
-                  <p class="font-black text-gray-800">Renovación cobrada</p>
-                  <p class="text-xs text-gray-500 font-semibold">María Ortega · 89,00€</p>
-                </div>
-              </div>
-              <div class="flex gap-3">
-                <div class="w-9 h-9 rounded-xl bg-rose-100 text-rose-700 flex items-center justify-center shrink-0"><i data-lucide="alert-triangle" class="w-4 h-4"></i></div>
-                <div>
-                  <p class="font-black text-gray-800">Impago detectado</p>
-                  <p class="text-xs text-gray-500 font-semibold">Plan Premium · reintento en 48h</p>
-                </div>
-              </div>
-              <div class="flex gap-3">
-                <div class="w-9 h-9 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center shrink-0"><i data-lucide="shield-alert" class="w-4 h-4"></i></div>
-                <div>
-                  <p class="font-black text-gray-800">Cobertura agotada</p>
-                  <p class="text-xs text-gray-500 font-semibold">Cliente 00291 · 2/2 urgencias consumidas</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section id="tab-company" class="tab-content hidden flex-1 min-h-0 fade-in overflow-y-auto no-scrollbar pb-10">
-        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
-          <div class="xl:col-span-1 space-y-6">
-            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-              <div class="flex items-center gap-3 mb-5">
-                <div class="w-11 h-11 rounded-2xl bg-blue-100 text-blue-700 flex items-center justify-center"><i data-lucide="building-2" class="w-5 h-5"></i></div>
-                <div>
-                  <h3 class="text-sm font-black text-gray-900">Identidad</h3>
-                  <p class="text-xs text-gray-500 font-semibold">Marca, logo y estilo visual.</p>
-                </div>
-              </div>
-              <div class="space-y-4">
-                <div>
-                  <label class="text-[10px] font-black text-gray-400 uppercase">Nombre comercial</label>
-                  <input value="Integra Protección Hogar" class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm outline-none focus:ring-2 focus:ring-blue-500" />
-                </div>
-                <div>
-                  <label class="text-[10px] font-black text-gray-400 uppercase">Razón social</label>
-                  <input value="Integra Repara Servicios Integrales SL" class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm outline-none focus:ring-2 focus:ring-blue-500" />
-                </div>
-                <div class="grid grid-cols-2 gap-3">
-                  <div>
-                    <label class="text-[10px] font-black text-gray-400 uppercase">CIF</label>
-                    <input value="B12345678" class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-                  </div>
-                  <div>
-                    <label class="text-[10px] font-black text-gray-400 uppercase">Teléfono</label>
-                    <input value="956 000 111" class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-                  </div>
-                </div>
-                <div>
-                  <label class="text-[10px] font-black text-gray-400 uppercase">Email operativo</label>
-                  <input value="seguros@integrarepara.es" class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-                </div>
-                <div>
-                  <label class="text-[10px] font-black text-gray-400 uppercase">Dirección fiscal</label>
-                  <textarea class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm min-h-[88px]">Av. Principal 24, 11201, Algeciras, Cádiz</textarea>
-                </div>
-              </div>
             </div>
 
-            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-              <h3 class="text-sm font-black text-gray-900 mb-4">Branding rápido</h3>
-              <div class="space-y-4">
-                <div class="grid grid-cols-3 gap-3">
-                  <div>
-                    <label class="text-[10px] font-black text-gray-400 uppercase">Primario</label>
-                    <input type="color" value="#2563eb" class="w-full h-11 rounded-xl border border-gray-200 bg-white p-1 mt-1" />
-                  </div>
-                  <div>
-                    <label class="text-[10px] font-black text-gray-400 uppercase">Secundario</label>
-                    <input type="color" value="#0f172a" class="w-full h-11 rounded-xl border border-gray-200 bg-white p-1 mt-1" />
-                  </div>
-                  <div>
-                    <label class="text-[10px] font-black text-gray-400 uppercase">Éxito</label>
-                    <input type="color" value="#059669" class="w-full h-11 rounded-xl border border-gray-200 bg-white p-1 mt-1" />
-                  </div>
-                </div>
-                <button class="w-full px-4 py-3 rounded-xl border border-dashed border-gray-300 text-xs font-black uppercase tracking-widest text-gray-500 hover:border-blue-300 hover:text-blue-600 flex items-center justify-center gap-2">
-                  <i data-lucide="upload-cloud" class="w-4 h-4"></i> Subir logo / sello / firma
+            <div class="flex bg-gray-100 p-1 rounded-xl shrink-0 w-fit">
+                <button onclick="switchTab('dashboard')" id="btn-tab-dashboard" class="tab-btn active px-5 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
+                    <i data-lucide="layout-dashboard" class="w-3 h-3"></i> Resumen
+                </button>
+                <button onclick="switchTab('clients')" id="btn-tab-clients" class="tab-btn px-5 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('plans')" id="btn-tab-plans" class="tab-btn px-5 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
+                    <i data-lucide="badge-euro" class="w-3 h-3"></i> Planes
+                </button>
+                <button onclick="switchTab('config')" id="btn-tab-config" class="tab-btn px-5 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>
 
-          <div class="xl:col-span-2 space-y-6">
-            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-              <div class="flex items-center justify-between gap-3 mb-5 border-b border-gray-100 pb-4">
-                <div>
-                  <h3 class="text-sm font-black text-gray-900">Configuración legal y fiscal</h3>
-                  <p class="text-xs text-gray-500 font-semibold">Textos públicos, condiciones, pagos y cumplimiento.</p>
+            <div id="tab-dashboard" class="tab-content flex-1 flex flex-col min-h-0 fade-in overflow-hidden">
+                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6 shrink-0" id="statsGrid"></div>
+
+                <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 flex-1 min-h-0">
+                    <div class="xl:col-span-2 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 shrink-0">
+                            <div>
+                                <h3 class="text-sm font-black text-gray-800">Actividad reciente</h3>
+                                <p class="text-[11px] text-gray-400 font-semibold">Altas, cobros, renovaciones y uso de coberturas</p>
+                            </div>
+                            <button onclick="seedDemoData()" class="text-[10px] font-black uppercase tracking-widest bg-white border border-gray-200 px-3 py-2 rounded-lg hover:border-blue-300">Cargar demo</button>
+                        </div>
+                        <div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-3" id="activityList"></div>
+                    </div>
+
+                    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 flex flex-col overflow-hidden">
+                        <div class="p-4 border-b border-gray-100 bg-gray-50/50">
+                            <h3 class="text-sm font-black text-gray-800">Planes más vendidos</h3>
+                            <p class="text-[11px] text-gray-400 font-semibold">Resumen rápido del catálogo</p>
+                        </div>
+                        <div class="flex-1 overflow-y-auto no-scrollbar p-4 space-y-4" id="topPlansList"></div>
+                    </div>
                 </div>
-                <button onclick="fakeSave('Aseguradora guardada')" class="px-4 py-2.5 rounded-xl bg-blue-600 text-white text-[10px] font-black uppercase tracking-widest shadow-lg">Guardar cambios</button>
-              </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            </div>
+
+            <div id="tab-clients" class="tab-content hidden flex-1 flex flex-col min-h-0 fade-in">
+                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 shrink-0">
+                    <div class="relative w-full md:w-80">
+                        <i data-lucide="search" class="w-4 h-4 absolute left-3 top-2.5 text-gray-400"></i>
+                        <input id="searchClientInput" type="text" placeholder="Buscar suscriptor..." 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 class="flex gap-2">
+                        <select id="filterStatus" class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-xs font-bold outline-none">
+                            <option value="all">Todos los estados</option>
+                            <option value="activo">Activos</option>
+                            <option value="impagado">Impagados</option>
+                            <option value="suspendido">Suspendidos</option>
+                        </select>
+                        <button onclick="openClientModal()" 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="plus" class="w-3.5 h-3.5"></i> Nuevo
+                        </button>
+                    </div>
+                </div>
+
+                <div class="flex-1 bg-white rounded-2xl shadow-sm border border-gray-200 flex flex-col overflow-hidden">
+                    <div class="flex-1 overflow-y-auto no-scrollbar">
+                        <table class="w-full text-left">
+                            <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">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">Renovación</th>
+                                    <th class="px-6 py-4 text-right">Acciones</th>
+                                </tr>
+                            </thead>
+                            <tbody id="clientsTableBody" class="text-sm font-bold text-gray-600 divide-y divide-gray-50"></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <div id="tab-plans" class="tab-content hidden flex-1 min-h-0 fade-in overflow-y-auto no-scrollbar pb-10">
+                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6" id="plansGrid"></div>
+            </div>
+
+            <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-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="building-2" class="w-4 h-4 text-blue-600"></i> Datos Empresa
+                            </h3>
+                            <div class="space-y-4">
+                                <div>
+                                    <label class="text-[10px] font-black text-gray-400 uppercase">Nombre Comercial</label>
+                                    <input id="cfg_name" type="text" 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-gray-400 uppercase">Email</label>
+                                    <input id="cfg_email" type="text" 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-gray-400 uppercase">Teléfono</label>
+                                    <input id="cfg_phone" type="text" 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-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
+                            </h3>
+                            <div class="space-y-4">
+                                <div class="flex items-center justify-between bg-gray-50 rounded-xl px-4 py-3">
+                                    <span class="text-xs font-black text-gray-600 uppercase">Automática</span>
+                                    <input id="cfg_auto_renew" type="checkbox" class="w-5 h-5" checked>
+                                </div>
+                                <div class="flex items-center justify-between bg-gray-50 rounded-xl px-4 py-3">
+                                    <span class="text-xs font-black text-gray-600 uppercase">WhatsApp previo</span>
+                                    <input id="cfg_pre_notice" type="checkbox" class="w-5 h-5" checked>
+                                </div>
+                            </div>
+                        </div>
+
+                        <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="credit-card" class="w-4 h-4"></i> Cobro
+                            </h3>
+                            <div>
+                                <label class="text-[10px] font-black text-gray-400 uppercase">Método principal</label>
+                                <select id="cfg_billing_method" class="w-full px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                                    <option value="stripe">Stripe</option>
+                                    <option value="recibo">Recibo</option>
+                                    <option value="transferencia">Transferencia</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="lg:col-span-2">
+                        <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="saveConfig()" 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 id="cfg_contract" 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]"></textarea>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <div id="modalBackdrop" class="hidden fixed inset-0 z-40 modal-backdrop"></div>
+
+    <div id="planModal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="bg-white w-full max-w-2xl rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
+            <div class="p-5 border-b border-gray-100 flex items-center justify-between">
+                <h3 class="text-sm font-black text-gray-800 uppercase tracking-widest">Nuevo Plan</h3>
+                <button onclick="closeModals()" class="text-gray-400 hover:text-gray-700"><i data-lucide="x" class="w-5 h-5"></i></button>
+            </div>
+            <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
-                  <label class="text-[10px] font-black text-gray-400 uppercase">IBAN</label>
-                  <input value="ES12 1234 5678 9012 3456 7890" class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Nombre</label>
+                    <input id="plan_name" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
                 </div>
                 <div>
-                  <label class="text-[10px] font-black text-gray-400 uppercase">Pasarela Stripe</label>
-                  <div class="mt-1 flex items-center justify-between px-4 py-3 rounded-xl bg-emerald-50 border border-emerald-100">
-                    <span class="text-sm font-black text-emerald-700">Conectada</span>
-                    <span class="text-[10px] font-black uppercase tracking-widest text-emerald-600">sk_live_xxx</span>
-                  </div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Tipo</label>
+                    <select id="plan_type" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                        <option value="mensual">Mensual</option>
+                        <option value="anual">Anual</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Precio Oferta (€)</label>
+                    <input id="plan_price" type="number" step="0.01" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Precio Renovación (€)</label>
+                    <input id="plan_renewal" type="number" step="0.01" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Urgencias / año</label>
+                    <input id="plan_urgencies" type="number" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Bricos / año</label>
+                    <input id="plan_bricos" type="number" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
                 </div>
                 <div class="md:col-span-2">
-                  <label class="text-[10px] font-black text-gray-400 uppercase">Cláusula RGPD</label>
-                  <textarea class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-semibold text-sm min-h-[110px]">Autorizo el tratamiento de mis datos con la finalidad de gestionar mi contrato, asistencias, cobros, renovaciones y comunicaciones relacionadas con el servicio.</textarea>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Coberturas (separadas por coma)</label>
+                    <input id="plan_coverages" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm" placeholder="Electricidad, Fontanería, Cerrajería">
                 </div>
-                <div class="md:col-span-2">
-                  <label class="text-[10px] font-black text-gray-400 uppercase">Texto legal de aceptación</label>
-                  <textarea class="w-full mt-1 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-semibold text-sm min-h-[140px]">La contratación implica la aceptación de las condiciones generales y particulares del plan, límites de cobertura, carencias, exclusiones, renovaciones automáticas y política de cancelación.</textarea>
-                </div>
-              </div>
             </div>
-
-            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-              <h3 class="text-sm font-black text-gray-900 mb-5">Canales y reglas de atención</h3>
-              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div class="p-4 rounded-2xl bg-gray-50 border border-gray-200">
-                  <p class="text-[10px] uppercase tracking-widest font-black text-gray-400 mb-2">Horario laboral</p>
-                  <p class="text-lg font-black text-gray-900">09:00 · 14:00 / 16:00 · 19:00</p>
-                </div>
-                <div class="p-4 rounded-2xl bg-gray-50 border border-gray-200">
-                  <p class="text-[10px] uppercase tracking-widest font-black text-gray-400 mb-2">Urgencias</p>
-                  <p class="text-lg font-black text-rose-600">24/7 activas</p>
-                </div>
-                <div class="p-4 rounded-2xl bg-gray-50 border border-gray-200">
-                  <p class="text-[10px] uppercase tracking-widest font-black text-gray-400 mb-2">Ámbito geográfico</p>
-                  <p class="text-lg font-black text-gray-900">Cádiz y Málaga</p>
-                </div>
-              </div>
+            <div class="p-5 border-t border-gray-100 flex justify-end gap-2 bg-gray-50/50">
+                <button onclick="closeModals()" class="px-4 py-2 rounded-lg border border-gray-200 text-[10px] font-black uppercase tracking-widest">Cancelar</button>
+                <button onclick="savePlan()" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-[10px] font-black uppercase tracking-widest shadow-md">Guardar</button>
             </div>
-          </div>
         </div>
-      </section>
+    </div>
 
-      <section id="tab-plans" class="tab-content hidden flex-1 min-h-0 fade-in overflow-y-auto no-scrollbar pb-10">
-        <div class="flex flex-col gap-6">
-          <div class="flex flex-col lg:flex-row justify-between gap-4">
-            <div class="relative w-full lg:w-80">
-              <i data-lucide="search" class="w-4 h-4 absolute left-3 top-3 text-gray-400"></i>
-              <input placeholder="Buscar plan, cobertura o campaña..." class="w-full pl-10 pr-4 py-3 rounded-xl bg-white border border-gray-200 text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500" />
+    <div id="clientModal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="bg-white w-full max-w-3xl rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
+            <div class="p-5 border-b border-gray-100 flex items-center justify-between">
+                <h3 class="text-sm font-black text-gray-800 uppercase tracking-widest">Nuevo Suscriptor</h3>
+                <button onclick="closeModals()" class="text-gray-400 hover:text-gray-700"><i data-lucide="x" class="w-5 h-5"></i></button>
             </div>
-            <div class="flex gap-3">
-              <button class="px-4 py-3 rounded-xl bg-white border border-gray-200 text-xs font-black uppercase tracking-widest">Duplicar plan</button>
-              <button onclick="openModal('planModal')" class="px-4 py-3 rounded-xl bg-blue-600 text-white text-xs font-black uppercase tracking-widest shadow-lg">Crear plan</button>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
-            <article class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
-              <div class="flex items-start justify-between gap-3 mb-4">
+            <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
-                  <div class="flex items-center gap-2 mb-2">
-                    <h3 class="text-lg font-black text-gray-900">Plan Básico</h3>
-                    <span class="px-2 py-1 rounded-full bg-gray-100 text-gray-600 text-[10px] font-black uppercase tracking-widest">Activo</span>
-                  </div>
-                  <p class="text-sm font-semibold text-gray-500">Entrada sencilla para captar cartera.</p>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Nombre completo</label>
+                    <input id="client_name" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
                 </div>
-                <button class="text-gray-400 hover:text-blue-600"><i data-lucide="pencil" class="w-4 h-4"></i></button>
-              </div>
-              <div class="space-y-3 text-sm">
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Promo anual</span><span class="font-black">59,95€</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Renovación</span><span class="font-black text-amber-600">89,00€</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Carencia</span><span class="font-black">15 días</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Urgencias</span><span class="font-black">1/año</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Bricos</span><span class="font-black">1/año</span></div>
-              </div>
-              <div class="mt-5 pt-5 border-t border-gray-100 flex flex-wrap gap-2">
-                <span class="px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 text-[10px] font-black uppercase tracking-widest">Electricidad</span>
-                <span class="px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 text-[10px] font-black uppercase tracking-widest">Fontanería</span>
-              </div>
-            </article>
-
-            <article class="bg-white rounded-2xl border border-blue-200 shadow-sm p-6 ring-2 ring-blue-100">
-              <div class="flex items-start justify-between gap-3 mb-4">
                 <div>
-                  <div class="flex items-center gap-2 mb-2">
-                    <h3 class="text-lg font-black text-gray-900">Plan Hogar Plus</h3>
-                    <span class="px-2 py-1 rounded-full bg-blue-100 text-blue-700 text-[10px] font-black uppercase tracking-widest">Top ventas</span>
-                  </div>
-                  <p class="text-sm font-semibold text-gray-500">El plan más equilibrado para cartera estable.</p>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">DNI</label>
+                    <input id="client_dni" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
                 </div>
-                <button class="text-gray-400 hover:text-blue-600"><i data-lucide="pencil" class="w-4 h-4"></i></button>
-              </div>
-              <div class="space-y-3 text-sm">
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Promo mensual</span><span class="font-black">6,90€</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Promo anual</span><span class="font-black">69,90€</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Renovación</span><span class="font-black text-amber-600">99,00€</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Urgencias</span><span class="font-black">2/año</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Bricos</span><span class="font-black">2/año</span></div>
-              </div>
-              <div class="mt-5 pt-5 border-t border-gray-100 flex flex-wrap gap-2">
-                <span class="px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 text-[10px] font-black uppercase tracking-widest">Electricidad</span>
-                <span class="px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 text-[10px] font-black uppercase tracking-widest">Fontanería</span>
-                <span class="px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 text-[10px] font-black uppercase tracking-widest">Cerrajería</span>
-                <span class="px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 text-[10px] font-black uppercase tracking-widest">Cristalería</span>
-              </div>
-            </article>
-
-            <article class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
-              <div class="flex items-start justify-between gap-3 mb-4">
                 <div>
-                  <div class="flex items-center gap-2 mb-2">
-                    <h3 class="text-lg font-black text-gray-900">Plan Premium 24/7</h3>
-                    <span class="px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 text-[10px] font-black uppercase tracking-widest">VIP</span>
-                  </div>
-                  <p class="text-sm font-semibold text-gray-500">Máxima cobertura con prioridad operativa.</p>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Teléfono</label>
+                    <input id="client_phone" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Plan</label>
+                    <select id="client_plan" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm"></select>
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Estado pago</label>
+                    <select id="client_payment_status" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                        <option value="pagado">Pagado</option>
+                        <option value="impagado">Impagado</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Estado suscripción</label>
+                    <select id="client_status" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                        <option value="activo">Activo</option>
+                        <option value="suspendido">Suspendido</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Renovación</label>
+                    <input id="client_renewal" type="date" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Bricos usados</label>
+                    <input id="client_bricos_used" type="number" value="0" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
+                </div>
+                <div>
+                    <label class="text-[10px] font-black text-gray-400 uppercase">Urgencias usadas</label>
+                    <input id="client_urg_used" type="number" value="0" class="w-full mt-1 px-4 py-2.5 bg-gray-50 border rounded-xl font-bold text-sm">
                 </div>
-                <button class="text-gray-400 hover:text-blue-600"><i data-lucide="pencil" class="w-4 h-4"></i></button>
-              </div>
-              <div class="space-y-3 text-sm">
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Mensual</span><span class="font-black">11,90€</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Anual</span><span class="font-black">129,00€</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Urgencias</span><span class="font-black">Ilimitadas*</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Bricos</span><span class="font-black">4/año</span></div>
-                <div class="flex justify-between"><span class="text-gray-500 font-semibold">Copago</span><span class="font-black text-rose-600">Reducido</span></div>
-              </div>
-              <div class="mt-5 pt-5 border-t border-gray-100 flex flex-wrap gap-2">
-                <span class="px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[10px] font-black uppercase tracking-widest">24/7</span>
-                <span class="px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[10px] font-black uppercase tracking-widest">Prioridad</span>
-                <span class="px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[10px] font-black uppercase tracking-widest">Multivivienda</span>
-              </div>
-            </article>
-          </div>
-
-          <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
-            <div class="flex flex-col lg:flex-row justify-between gap-4 mb-5">
-              <div>
-                <h3 class="text-sm font-black text-gray-900">Matriz de coberturas</h3>
-                <p class="text-xs text-gray-500 font-semibold">Control rápido de lo que incluye cada producto.</p>
-              </div>
-              <div class="flex gap-2 bg-gray-100 p-1 rounded-xl w-fit">
-                <button class="subtab-btn active px-3 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest">Coberturas</button>
-                <button class="subtab-btn px-3 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest">Límites</button>
-                <button class="subtab-btn px-3 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest">Exclusiones</button>
-              </div>
             </div>
-            <div class="overflow-x-auto no-scrollbar">
-              <table class="w-full text-left min-w-[900px]">
-                <thead class="text-[10px] uppercase tracking-widest font-black text-gray-400">
-                  <tr>
-                    <th class="py-3 pr-4">Cobertura</th>
-                    <th class="py-3 px-4">Básico</th>
-                    <th class="py-3 px-4">Hogar Plus</th>
-                    <th class="py-3 px-4">Premium</th>
-                    <th class="py-3 px-4">Copago</th>
-                    <th class="py-3 pl-4">Observaciones</th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-100 text-sm font-bold text-gray-700">
-                  <tr>
-                    <td class="py-4 pr-4">Urgencia eléctrica</td>
-                    <td class="px-4 text-gray-900">1/año</td>
-                    <td class="px-4 text-blue-700">2/año</td>
-                    <td class="px-4 text-emerald-700">Ilimitada*</td>
-                    <td class="px-4">0€ / 0€ / 19€</td>
-                    <td class="pl-4 text-gray-500 font-semibold">Prioridad alta en Premium</td>
-                  </tr>
-                  <tr>
-                    <td class="py-4 pr-4">Fontanería urgente</td>
-                    <td class="px-4">Incluida</td>
-                    <td class="px-4 text-blue-700">Incluida</td>
-                    <td class="px-4 text-emerald-700">Incluida</td>
-                    <td class="px-4">0€</td>
-                    <td class="pl-4 text-gray-500 font-semibold">Solo vivienda habitual salvo Premium</td>
-                  </tr>
-                  <tr>
-                    <td class="py-4 pr-4">Servicio manitas</td>
-                    <td class="px-4">1</td>
-                    <td class="px-4 text-blue-700">2</td>
-                    <td class="px-4 text-emerald-700">4</td>
-                    <td class="px-4">0€</td>
-                    <td class="pl-4 text-gray-500 font-semibold">Máx. 2 horas por visita</td>
-                  </tr>
-                  <tr>
-                    <td class="py-4 pr-4">Cerrajería</td>
-                    <td class="px-4">—</td>
-                    <td class="px-4 text-blue-700">Incluida</td>
-                    <td class="px-4 text-emerald-700">Incluida</td>
-                    <td class="px-4">29€ / 15€</td>
-                    <td class="pl-4 text-gray-500 font-semibold">No incluye cambio de bombín premium especial</td>
-                  </tr>
-                </tbody>
-              </table>
+            <div class="p-5 border-t border-gray-100 flex justify-end gap-2 bg-gray-50/50">
+                <button onclick="closeModals()" class="px-4 py-2 rounded-lg border border-gray-200 text-[10px] font-black uppercase tracking-widest">Cancelar</button>
+                <button onclick="saveClient()" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-[10px] font-black uppercase tracking-widest shadow-md">Guardar</button>
             </div>
-          </div>
         </div>
-      </section>
+    </div>
 
-      <section id="tab-subscribers" class="tab-content hidden flex-1 min-h-0 fade-in flex flex-col gap-6 overflow-hidden">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 shrink-0">
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Altas mes</p>
-            <p class="mt-2 text-2xl font-black text-gray-900">41</p>
-          </div>
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Bajas mes</p>
-            <p class="mt-2 text-2xl font-black text-rose-600">9</p>
-          </div>
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Con renovación auto</p>
-            <p class="mt-2 text-2xl font-black text-blue-600">88%</p>
-          </div>
-          <div class="bg-white p-4 rounded-2xl border border-gray-200 shadow-sm">
-            <p class="text-[10px] font-black uppercase tracking-widest text-gray-400">Cobertura agotada</p>
-            <p class="mt-2 text-2xl font-black text-amber-600">23</p>
-          </div>
-        </div>
+    <script src="js/layout.js"></script>
+    <script>
+        const STORAGE_KEY = 'integra_seguros_saas_demo_v1';
 
-        <div class="flex-1 bg-white rounded-2xl border border-gray-200 shadow-sm flex flex-col overflow-hidden min-h-0">
-          <div class="p-4 border-b border-gray-100 bg-gray-50/70 flex flex-col lg:flex-row justify-between gap-3 shrink-0">
-            <div class="flex flex-col lg:flex-row gap-3 w-full lg:w-auto">
-              <div class="relative w-full lg:w-72">
-                <i data-lucide="search" class="w-4 h-4 absolute left-3 top-3 text-gray-400"></i>
-                <input placeholder="Buscar suscriptor, DNI, móvil..." class="w-full pl-10 pr-4 py-3 rounded-xl bg-white border border-gray-200 text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500" />
-              </div>
-              <select class="px-4 py-3 rounded-xl bg-white border border-gray-200 text-sm font-bold">
-                <option>Todos los estados</option>
-                <option>Activo</option>
-                <option>Impagado</option>
-                <option>Suspendido</option>
-                <option>Baja</option>
-              </select>
-              <select class="px-4 py-3 rounded-xl bg-white border border-gray-200 text-sm font-bold">
-                <option>Todos los planes</option>
-                <option>Plan Básico</option>
-                <option>Hogar Plus</option>
-                <option>Premium</option>
-              </select>
-            </div>
-            <div class="flex gap-3">
-              <button class="px-4 py-3 rounded-xl border border-gray-200 bg-white text-xs font-black uppercase tracking-widest">Importar CSV</button>
-              <button onclick="openModal('subscriberModal')" class="px-4 py-3 rounded-xl bg-blue-600 text-white text-xs font-black uppercase tracking-widest shadow-lg">Alta manual</button>
-            </div>
-          </div>
+        const defaultState = {
+            config: {
+                name: 'Integra Protección Hogar',
+                email: 'seguros@integrarepara.es',
+                phone: '956 000 111',
+                autoRenew: true,
+                preNotice: true,
+                billingMethod: 'stripe',
+                contract: `1. OBJETO: Prestación de servicios de urgencia y manitas.\n2. COBERTURAS: Máximo 2 urgencias al año y servicios de bricolaje según plan.\n3. CARENCIA: 15 días naturales desde firma.\n4. RENOVACIÓN: Automática salvo oposición expresa.\n5. EXCLUSIONES: Daños preexistentes, reformas integrales y servicios fuera de cobertura.`
+            },
+            plans: [
+                { id: cryptoRandom(), name: 'Básico', type: 'anual', price: 59.95, renewal: 89.00, urgencies: 1, bricos: 1, coverages: ['Electricidad', 'Fontanería'] },
+                { id: cryptoRandom(), name: 'Hogar Plus', type: 'mensual', price: 6.90, renewal: 8.90, urgencies: 2, bricos: 2, coverages: ['Electricidad', 'Fontanería', 'Cerrajería'] },
+                { id: cryptoRandom(), name: 'Premium 24/7', type: 'anual', price: 129.00, renewal: 149.00, urgencies: 4, bricos: 4, coverages: ['Electricidad', 'Fontanería', 'Cerrajería', 'Cristalería'] }
+            ],
+            clients: [
+                { id: cryptoRandom(), name: 'Juan Pérez García', dni: '12345678X', phone: '600112233', planId: '', paymentStatus: 'pagado', status: 'activo', renewalDate: '2026-12-15', bricosUsed: 0, urgenciesUsed: 1, createdAt: Date.now() - 1000000 },
+                { id: cryptoRandom(), name: 'María Ortega Ruiz', dni: '44556677P', phone: '600223344', planId: '', paymentStatus: 'impagado', status: 'suspendido', renewalDate: '2026-04-15', bricosUsed: 1, urgenciesUsed: 2, createdAt: Date.now() - 500000 }
+            ],
+            activity: [
+                { id: cryptoRandom(), type: 'alta', text: 'Alta manual creada para Juan Pérez García', createdAt: Date.now() - 120000 },
+                { id: cryptoRandom(), type: 'cobro', text: 'Cobro confirmado de renovación anual', createdAt: Date.now() - 360000 },
+                { id: cryptoRandom(), type: 'alerta', text: 'María Ortega Ruiz ha agotado urgencias del plan', createdAt: Date.now() - 720000 }
+            ]
+        };
 
-          <div class="flex-1 overflow-auto no-scrollbar">
-            <table class="w-full text-left min-w-[1200px]">
-              <thead class="sticky top-0 bg-white text-[10px] uppercase tracking-widest font-black text-gray-400 shadow-sm">
+        function cryptoRandom() {
+            return Math.random().toString(36).slice(2, 10);
+        }
+
+        function loadState() {
+            try {
+                const raw = localStorage.getItem(STORAGE_KEY);
+                if (!raw) {
+                    const first = JSON.parse(JSON.stringify(defaultState));
+                    first.clients[0].planId = first.plans[0].id;
+                    first.clients[1].planId = first.plans[1].id;
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(first));
+                    return first;
+                }
+                return JSON.parse(raw);
+            } catch {
+                return JSON.parse(JSON.stringify(defaultState));
+            }
+        }
+
+        let state = loadState();
+
+        function persist() {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+        }
+
+        function switchTab(tab) {
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
+            document.getElementById('tab-' + tab).classList.remove('hidden');
+            document.getElementById('btn-tab-' + tab).classList.add('active');
+            if (window.lucide) lucide.createIcons();
+        }
+
+        function openModal(id) {
+            document.getElementById('modalBackdrop').classList.remove('hidden');
+            document.getElementById(id).classList.remove('hidden');
+            if (window.lucide) lucide.createIcons();
+        }
+
+        function openPlanModal() {
+            clearPlanModal();
+            openModal('planModal');
+        }
+
+        function openClientModal() {
+            populatePlanSelect();
+            clearClientModal();
+            openModal('clientModal');
+        }
+
+        function closeModals() {
+            document.getElementById('modalBackdrop').classList.add('hidden');
+            document.getElementById('planModal').classList.add('hidden');
+            document.getElementById('clientModal').classList.add('hidden');
+        }
+
+        function clearPlanModal() {
+            ['plan_name','plan_price','plan_renewal','plan_urgencies','plan_bricos','plan_coverages'].forEach(id => document.getElementById(id).value = '');
+            document.getElementById('plan_type').value = 'mensual';
+        }
+
+        function clearClientModal() {
+            ['client_name','client_dni','client_phone','client_renewal'].forEach(id => document.getElementById(id).value = '');
+            document.getElementById('client_payment_status').value = 'pagado';
+            document.getElementById('client_status').value = 'activo';
+            document.getElementById('client_bricos_used').value = 0;
+            document.getElementById('client_urg_used').value = 0;
+        }
+
+        function populatePlanSelect() {
+            const select = document.getElementById('client_plan');
+            select.innerHTML = state.plans.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
+        }
+
+        function savePlan() {
+            const name = document.getElementById('plan_name').value.trim();
+            const type = document.getElementById('plan_type').value;
+            const price = parseFloat(document.getElementById('plan_price').value || '0');
+            const renewal = parseFloat(document.getElementById('plan_renewal').value || '0');
+            const urgencies = parseInt(document.getElementById('plan_urgencies').value || '0', 10);
+            const bricos = parseInt(document.getElementById('plan_bricos').value || '0', 10);
+            const coverages = document.getElementById('plan_coverages').value.split(',').map(s => s.trim()).filter(Boolean);
+
+            if (!name) return toast('Ponle nombre al plan, artista.');
+
+            state.plans.unshift({ id: cryptoRandom(), name, type, price, renewal, urgencies, bricos, coverages });
+            state.activity.unshift({ id: cryptoRandom(), type: 'alta', text: `Nuevo plan creado: ${name}`, createdAt: Date.now() });
+            persist();
+            renderAll();
+            closeModals();
+            toast('Plan guardado correctamente.');
+        }
+
+        function saveClient() {
+            const name = document.getElementById('client_name').value.trim();
+            const dni = document.getElementById('client_dni').value.trim();
+            const phone = document.getElementById('client_phone').value.trim();
+            const planId = document.getElementById('client_plan').value;
+            const paymentStatus = document.getElementById('client_payment_status').value;
+            const status = document.getElementById('client_status').value;
+            const renewalDate = document.getElementById('client_renewal').value;
+            const bricosUsed = parseInt(document.getElementById('client_bricos_used').value || '0', 10);
+            const urgenciesUsed = parseInt(document.getElementById('client_urg_used').value || '0', 10);
+
+            if (!name || !phone || !planId) return toast('Faltan datos del suscriptor.');
+
+            state.clients.unshift({ id: cryptoRandom(), name, dni, phone, planId, paymentStatus, status, renewalDate, bricosUsed, urgenciesUsed, createdAt: Date.now() });
+            state.activity.unshift({ id: cryptoRandom(), type: 'alta', text: `Nuevo suscriptor dado de alta: ${name}`, createdAt: Date.now() });
+            persist();
+            renderAll();
+            closeModals();
+            toast('Suscriptor guardado correctamente.');
+        }
+
+        function saveConfig() {
+            state.config.name = document.getElementById('cfg_name').value.trim();
+            state.config.email = document.getElementById('cfg_email').value.trim();
+            state.config.phone = document.getElementById('cfg_phone').value.trim();
+            state.config.autoRenew = document.getElementById('cfg_auto_renew').checked;
+            state.config.preNotice = document.getElementById('cfg_pre_notice').checked;
+            state.config.billingMethod = document.getElementById('cfg_billing_method').value;
+            state.config.contract = document.getElementById('cfg_contract').value;
+            persist();
+            toast('Configuración guardada correctamente.');
+        }
+
+        function seedDemoData() {
+            localStorage.removeItem(STORAGE_KEY);
+            state = loadState();
+            renderAll();
+            toast('Datos demo recargados.');
+        }
+
+        function deletePlan(id) {
+            const inUse = state.clients.some(c => c.planId === id);
+            if (inUse) return toast('Ese plan está en uso. Primero cambia a los clientes.');
+            state.plans = state.plans.filter(p => p.id !== id);
+            persist();
+            renderAll();
+            toast('Plan eliminado.');
+        }
+
+        function toggleClientPayment(id) {
+            const c = state.clients.find(x => x.id === id);
+            if (!c) return;
+            c.paymentStatus = c.paymentStatus === 'pagado' ? 'impagado' : 'pagado';
+            if (c.paymentStatus === 'impagado') c.status = 'suspendido';
+            state.activity.unshift({ id: cryptoRandom(), type: 'cobro', text: `Estado de pago actualizado para ${c.name}: ${c.paymentStatus}`, createdAt: Date.now() });
+            persist();
+            renderAll();
+        }
+
+        function toggleClientStatus(id) {
+            const c = state.clients.find(x => x.id === id);
+            if (!c) return;
+            c.status = c.status === 'activo' ? 'suspendido' : 'activo';
+            state.activity.unshift({ id: cryptoRandom(), type: 'alerta', text: `Estado de suscripción cambiado para ${c.name}: ${c.status}`, createdAt: Date.now() });
+            persist();
+            renderAll();
+        }
+
+        function planById(id) {
+            return state.plans.find(p => p.id === id) || null;
+        }
+
+        function initials(name) {
+            return name.split(' ').slice(0,2).map(n => n[0] || '').join('').toUpperCase();
+        }
+
+        function money(v) {
+            return `${Number(v || 0).toFixed(2).replace('.', ',')}€`;
+        }
+
+        function relativeTime(ts) {
+            const diff = Math.max(1, Math.floor((Date.now() - ts) / 60000));
+            if (diff < 60) return `hace ${diff} min`;
+            const h = Math.floor(diff / 60);
+            if (h < 24) return `hace ${h} h`;
+            const d = Math.floor(h / 24);
+            return `hace ${d} d`;
+        }
+
+        function getStats() {
+            const total = state.clients.length;
+            const paid = state.clients.filter(c => c.paymentStatus === 'pagado').length;
+            const unpaid = total - paid;
+            const mrr = state.clients.reduce((acc, c) => {
+                const p = planById(c.planId);
+                return acc + (p ? Number(p.price || 0) : 0);
+            }, 0);
+            const urgUsed = state.clients.reduce((acc, c) => acc + Number(c.urgenciesUsed || 0), 0);
+            const briUsed = state.clients.reduce((acc, c) => acc + Number(c.bricosUsed || 0), 0);
+            return { total, paid, unpaid, mrr, urgUsed, briUsed };
+        }
+
+        function renderStats() {
+            const s = getStats();
+            document.getElementById('statsGrid').innerHTML = `
+                <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">${s.total}</p>
+                </div>
+                <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">${money(s.mrr)}</p>
+                </div>
+                <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">${s.urgUsed} / ${s.briUsed}</p>
+                </div>
+                <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">${s.unpaid}</p>
+                </div>
+            `;
+        }
+
+        function renderActivity() {
+            const iconMap = { alta: 'user-plus', cobro: 'credit-card', alerta: 'triangle-alert' };
+            document.getElementById('activityList').innerHTML = state.activity.slice(0, 10).map(a => `
+                <div class="p-4 rounded-xl border border-gray-100 bg-white flex items-start gap-3">
+                    <div class="w-9 h-9 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
+                        <i data-lucide="${iconMap[a.type] || 'circle'}" class="w-4 h-4"></i>
+                    </div>
+                    <div>
+                        <p class="text-sm font-black text-gray-800">${a.text}</p>
+                        <p class="text-[11px] font-semibold text-gray-400">${relativeTime(a.createdAt)}</p>
+                    </div>
+                </div>
+            `).join('') || `<div class="text-sm text-gray-400 font-bold">Sin actividad todavía.</div>`;
+        }
+
+        function renderTopPlans() {
+            const counts = state.plans.map(p => ({ ...p, users: state.clients.filter(c => c.planId === p.id).length }));
+            document.getElementById('topPlansList').innerHTML = counts.map(p => `
+                <div class="p-4 rounded-2xl border border-gray-100 bg-gray-50">
+                    <div class="flex items-center justify-between gap-3">
+                        <div>
+                            <p class="text-sm font-black text-gray-800">${p.name}</p>
+                            <p class="text-[11px] text-gray-400 font-semibold">${p.type.toUpperCase()} · ${money(p.price)}</p>
+                        </div>
+                        <span class="px-2 py-1 rounded-lg bg-white text-blue-700 text-[10px] font-black uppercase tracking-widest">${p.users} socios</span>
+                    </div>
+                </div>
+            `).join('') || `<div class="text-sm text-gray-400 font-bold">No hay planes.</div>`;
+        }
+
+        function renderPlans() {
+            document.getElementById('plansGrid').innerHTML = state.plans.map(p => `
+                <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
+                    <div class="flex justify-between items-start gap-3 mb-4">
+                        <div>
+                            <h3 class="text-lg font-black text-gray-900">${p.name}</h3>
+                            <p class="text-xs font-bold text-gray-400 uppercase tracking-widest">${p.type}</p>
+                        </div>
+                        <button onclick="deletePlan('${p.id}')" class="p-2 text-gray-400 hover:text-rose-600"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
+                    </div>
+                    <div class="space-y-3 text-sm font-bold text-gray-600">
+                        <div class="flex justify-between"><span>Cuota</span><span class="text-blue-600">${money(p.price)}</span></div>
+                        <div class="flex justify-between"><span>Renovación</span><span class="text-amber-600">${money(p.renewal)}</span></div>
+                        <div class="flex justify-between"><span>Urgencias</span><span>${p.urgencies}/año</span></div>
+                        <div class="flex justify-between"><span>Bricos</span><span>${p.bricos}/año</span></div>
+                        <div class="flex justify-between"><span>Socios</span><span>${state.clients.filter(c => c.planId === p.id).length}</span></div>
+                    </div>
+                    <div class="mt-5 pt-4 border-t border-gray-100 flex flex-wrap gap-2">
+                        ${(p.coverages || []).map(c => `<span class="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-[10px] font-black uppercase tracking-widest">${c}</span>`).join('')}
+                    </div>
+                </div>
+            `).join('') || `<div class="text-sm font-bold text-gray-400">No hay planes dados de alta.</div>`;
+        }
+
+        function renderClients() {
+            const search = (document.getElementById('searchClientInput')?.value || '').trim().toLowerCase();
+            const statusFilter = document.getElementById('filterStatus')?.value || 'all';
+
+            const rows = state.clients.filter(c => {
+                const matchesSearch = !search || [c.name, c.dni, c.phone].join(' ').toLowerCase().includes(search);
+                const matchesStatus = statusFilter === 'all' || c.status === statusFilter || (statusFilter === 'impagado' && c.paymentStatus === 'impagado');
+                return matchesSearch && matchesStatus;
+            }).map(c => {
+                const plan = planById(c.planId);
+                const bricosLimit = plan?.bricos || 0;
+                const urgLimit = plan?.urgencies || 0;
+                const progress = urgLimit ? Math.min(100, (Number(c.urgenciesUsed || 0) / urgLimit) * 100) : 0;
+                const paymentHtml = c.paymentStatus === 'pagado'
+                    ? `<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>`
+                    : `<span class="text-rose-600 flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></div> IMPAGADO</span>`;
+
+                return `
+                    <tr class="hover:bg-blue-50/50 transition-colors">
+                        <td class="px-6 py-4">
+                            <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">${initials(c.name)}</div>
+                                <div class="flex flex-col">
+                                    <span>${c.name}</span>
+                                    <span class="text-[9px] font-medium text-gray-400">DNI: ${c.dni || '-'} • ${c.phone || '-'}</span>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 text-xs">
+                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded-md">${plan ? `${plan.name.toUpperCase()} (${money(plan.price)})` : 'SIN PLAN'}</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <div class="flex flex-col items-center gap-1">
+                                <span class="text-[10px] text-gray-400">Bricos: ${c.bricosUsed}/${bricosLimit} | Urg: ${c.urgenciesUsed}/${urgLimit}</span>
+                                <div class="w-24 h-1.5 bg-gray-100 rounded-full overflow-hidden">
+                                    <div class="h-full bg-blue-500" style="width:${progress}%"></div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4">${paymentHtml}</td>
+                        <td class="px-6 py-4 text-xs font-black text-gray-500">${c.renewalDate || '-'}</td>
+                        <td class="px-6 py-4 text-right">
+                            <div class="flex items-center justify-end gap-2">
+                                <button onclick="toggleClientPayment('${c.id}')" class="p-2 text-gray-400 hover:text-blue-600 transition-colors" title="Cambiar pago"><i data-lucide="credit-card" class="w-4 h-4"></i></button>
+                                <button onclick="toggleClientStatus('${c.id}')" class="p-2 text-gray-400 hover:text-amber-600 transition-colors" title="Cambiar estado"><i data-lucide="refresh-cw" class="w-4 h-4"></i></button>
+                            </div>
+                        </td>
+                    </tr>
+                `;
+            }).join('');
+
+            document.getElementById('clientsTableBody').innerHTML = rows || `
                 <tr>
-                  <th class="px-6 py-4">Titular</th>
-                  <th class="px-6 py-4">Plan</th>
-                  <th class="px-6 py-4">Uso cobertura</th>
-                  <th class="px-6 py-4">Pago</th>
-                  <th class="px-6 py-4">Renovación</th>
-                  <th class="px-6 py-4">Estado</th>
-                  <th class="px-6 py-4 text-right">Acciones</th>
+                    <td colspan="6" class="px-6 py-8 text-center text-sm font-bold text-gray-400">No hay suscriptores que coincidan con el filtro.</td>
                 </tr>
-              </thead>
-              <tbody class="divide-y divide-gray-50 text-sm font-bold text-gray-700">
-                <tr class="hover:bg-blue-50/50 transition-colors">
-                  <td class="px-6 py-4">
-                    <div class="flex items-center gap-3">
-                      <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center text-xs font-black">MO</div>
-                      <div>
-                        <p class="font-black text-gray-900">María Ortega Ruiz</p>
-                        <p class="text-[11px] text-gray-500 font-semibold">DNI 44556677P · 600223344 · 2 inmuebles</p>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4"><span class="px-2.5 py-1 rounded-lg bg-blue-50 text-blue-700 text-[10px] font-black uppercase tracking-widest">Hogar Plus</span></td>
-                  <td class="px-6 py-4">
-                    <div class="space-y-1 w-44">
-                      <div class="flex justify-between text-[11px] text-gray-500"><span>Urgencias</span><span class="font-black">1/2</span></div>
-                      <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden"><div class="w-1/2 h-full bg-blue-600"></div></div>
-                      <div class="flex justify-between text-[11px] text-gray-500"><span>Bricos</span><span class="font-black">0/2</span></div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4"><span class="text-emerald-600 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-emerald-500"></span>Al día</span></td>
-                  <td class="px-6 py-4">15/05/2026</td>
-                  <td class="px-6 py-4"><span class="px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[10px] font-black uppercase tracking-widest">Activo</span></td>
-                  <td class="px-6 py-4 text-right">
-                    <div class="flex justify-end gap-2">
-                      <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500"><i data-lucide="file-text" class="w-4 h-4"></i></button>
-                      <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500"><i data-lucide="credit-card" class="w-4 h-4"></i></button>
-                      <button class="p-2 rounded-lg hover:bg-gray-100 text-blue-600"><i data-lucide="eye" class="w-4 h-4"></i></button>
-                    </div>
-                  </td>
-                </tr>
-                <tr class="hover:bg-blue-50/50 transition-colors">
-                  <td class="px-6 py-4">
-                    <div class="flex items-center gap-3">
-                      <div class="w-10 h-10 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center text-xs font-black">JP</div>
-                      <div>
-                        <p class="font-black text-gray-900">Juan Pérez García</p>
-                        <p class="text-[11px] text-gray-500 font-semibold">DNI 12345678X · 600112233 · 1 inmueble</p>
-                      </div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4"><span class="px-2.5 py-1 rounded-lg bg-gray-100 text-gray-700 text-[10px] font-black uppercase tracking-widest">Básico</span></td>
-                  <td class="px-6 py-4">
-                    <div class="space-y-1 w-44">
-                      <div class="flex justify-between text-[11px] text-gray-500"><span>Urgencias</span><span class="font-black">1/1</span></div>
-                      <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden"><div class="w-full h-full bg-amber-500"></div></div>
-                      <div class="text-[11px] text-amber-600 font-black">Cobertura agotada</div>
-                    </div>
-                  </td>
-                  <td class="px-6 py-4"><span class="text-rose-600 flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-rose-500"></span>Impagado</span></td>
-                  <td class="px-6 py-4">02/04/2026</td>
-                  <td class="px-6 py-4"><span class="px-2.5 py-1 rounded-full bg-rose-50 text-rose-700 text-[10px] font-black uppercase tracking-widest">Suspendido</span></td>
-                  <td class="px-6 py-4 text-right">
-                    <div class="flex justify-end gap-2">
-                      <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500"><i data-lucide="bell-ring" class="w-4 h-4"></i></button>
-                      <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500"><i data-lucide="message-circle-more" class="w-4 h-4"></i></button>
-                      <button class="p-2 rounded-lg hover:bg-gray-100 text-blue-600"><i data-lucide="eye" class="w-4 h-4"></i></button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </section>
+            `;
+        }
 
-      <section id="tab-billing" class="tab-content hidden flex-1 min-h-0 fade-in overflow-y-auto no-scrollbar pb-10">
-        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
-          <div class="xl:col-span-2 bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
-            <div class="p-5 border-b border-gray-100 bg-gray-50/70 flex justify-between items-center gap-3">
-              <div>
-                <h3 class="text-sm font-black text-gray-900">Cobros y reintentos</h3>
-                <p class="text-xs text-gray-500 font-semibold">Seguimiento de pasarela, renovaciones y recobro.</p>
-              </div>
-              <button class="px-3 py-2 rounded-lg border border-gray-200 bg-white text-[10px] uppercase tracking-widest font-black">Lanzar recobro</button>
-            </div>
-            <div class="overflow-auto no-scrollbar">
-              <table class="w-full min-w-[860px] text-left">
-                <thead class="text-[10px] uppercase tracking-widest font-black text-gray-400 bg-white sticky top-0 shadow-sm">
-                  <tr>
-                    <th class="px-6 py-4">Titular</th>
-                    <th class="px-6 py-4">Concepto</th>
-                    <th class="px-6 py-4">Importe</th>
-                    <th class="px-6 py-4">Estado</th>
-                    <th class="px-6 py-4">Acción siguiente</th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-50 text-sm font-bold text-gray-700">
-                  <tr>
-                    <td class="px-6 py-4">María Ortega Ruiz</td>
-                    <td class="px-6 py-4">Renovación anual Hogar Plus</td>
-                    <td class="px-6 py-4">99,00€</td>
-                    <td class="px-6 py-4"><span class="text-emerald-600">Cobrado</span></td>
-                    <td class="px-6 py-4 text-gray-500">Recibo emitido</td>
-                  </tr>
-                  <tr>
-                    <td class="px-6 py-4">Juan Pérez García</td>
-                    <td class="px-6 py-4">Mensualidad abril</td>
-                    <td class="px-6 py-4">8,90€</td>
-                    <td class="px-6 py-4"><span class="text-rose-600">Fallido</span></td>
-                    <td class="px-6 py-4 text-gray-500">Reintento en 48h + WhatsApp</td>
-                  </tr>
-                  <tr>
-                    <td class="px-6 py-4">Lucía Domínguez</td>
-                    <td class="px-6 py-4">Alta nuevo contrato</td>
-                    <td class="px-6 py-4">69,90€</td>
-                    <td class="px-6 py-4"><span class="text-blue-600">Pendiente</span></td>
-                    <td class="px-6 py-4 text-gray-500">Esperando firma</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
+        function renderConfig() {
+            document.getElementById('cfg_name').value = state.config.name || '';
+            document.getElementById('cfg_email').value = state.config.email || '';
+            document.getElementById('cfg_phone').value = state.config.phone || '';
+            document.getElementById('cfg_auto_renew').checked = !!state.config.autoRenew;
+            document.getElementById('cfg_pre_notice').checked = !!state.config.preNotice;
+            document.getElementById('cfg_billing_method').value = state.config.billingMethod || 'stripe';
+            document.getElementById('cfg_contract').value = state.config.contract || '';
+        }
 
-          <div class="space-y-6">
-            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-              <h3 class="text-sm font-black text-gray-900 mb-4">Reglas automáticas</h3>
-              <div class="space-y-4 text-sm font-bold">
-                <label class="flex items-center justify-between gap-3">
-                  <span>Renovación automática activa</span>
-                  <input type="checkbox" checked class="w-5 h-5 rounded" />
-                </label>
-                <label class="flex items-center justify-between gap-3">
-                  <span>Suspender tras 2 fallos</span>
-                  <input type="checkbox" checked class="w-5 h-5 rounded" />
-                </label>
-                <label class="flex items-center justify-between gap-3">
-                  <span>WhatsApp de impago</span>
-                  <input type="checkbox" checked class="w-5 h-5 rounded" />
-                </label>
-                <label class="flex items-center justify-between gap-3">
-                  <span>Email con enlace de pago</span>
-                  <input type="checkbox" checked class="w-5 h-5 rounded" />
-                </label>
-              </div>
-            </div>
+        function renderAll() {
+            renderStats();
+            renderActivity();
+            renderTopPlans();
+            renderPlans();
+            renderClients();
+            renderConfig();
+            populatePlanSelect();
+            if (window.lucide) lucide.createIcons();
+        }
 
-            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-              <h3 class="text-sm font-black text-gray-900 mb-4">Embudo de cobro</h3>
-              <div class="space-y-4">
-                <div>
-                  <div class="flex justify-between text-xs font-black text-gray-500 mb-1"><span>Cobrado</span><span>78%</span></div>
-                  <div class="w-full h-2 rounded-full bg-gray-100 overflow-hidden"><div class="w-[78%] h-full bg-emerald-500"></div></div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-xs font-black text-gray-500 mb-1"><span>Pendiente</span><span>12%</span></div>
-                  <div class="w-full h-2 rounded-full bg-gray-100 overflow-hidden"><div class="w-[12%] h-full bg-blue-500"></div></div>
-                </div>
-                <div>
-                  <div class="flex justify-between text-xs font-black text-gray-500 mb-1"><span>Fallido</span><span>10%</span></div>
-                  <div class="w-full h-2 rounded-full bg-gray-100 overflow-hidden"><div class="w-[10%] h-full bg-rose-500"></div></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+        function toast(message) {
+            const existing = document.getElementById('app-toast');
+            if (existing) existing.remove();
+            const toast = document.createElement('div');
+            toast.id = 'app-toast';
+            toast.className = 'fixed bottom-5 right-5 bg-slate-900 text-white px-4 py-3 rounded-xl shadow-2xl text-xs font-black uppercase tracking-widest z-[999] fade-in';
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => toast.remove(), 2200);
+        }
 
-      <section id="tab-automation" class="tab-content hidden flex-1 min-h-0 fade-in overflow-y-auto no-scrollbar pb-10">
-        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
-          <div class="xl:col-span-1 space-y-6">
-            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-              <h3 class="text-sm font-black text-gray-900 mb-4">Eventos activos</h3>
-              <div class="space-y-3">
-                <label class="flex items-center justify-between gap-3 p-3 rounded-xl bg-gray-50 border border-gray-100">
-                  <span class="text-sm font-bold">Bienvenida de alta</span>
-                  <input type="checkbox" checked class="w-5 h-5" />
-                </label>
-                <label class="flex items-center justify-between gap-3 p-3 rounded-xl bg-gray-50 border border-gray-100">
-                  <span class="text-sm font-bold">Recordatorio de renovación</span>
-                  <input type="checkbox" checked class="w-5 h-5" />
-                </label>
-                <label class="flex items-center justify-between gap-3 p-3 rounded-xl bg-gray-50 border border-gray-100">
-                  <span class="text-sm font-bold">Impago</span>
-                  <input type="checkbox" checked class="w-5 h-5" />
-                </label>
-                <label class="flex items-center justify-between gap-3 p-3 rounded-xl bg-gray-50 border border-gray-100">
-                  <span class="text-sm font-bold">Cobertura agotada</span>
-                  <input type="checkbox" checked class="w-5 h-5" />
-                </label>
-                <label class="flex items-center justify-between gap-3 p-3 rounded-xl bg-gray-50 border border-gray-100">
-                  <span class="text-sm font-bold">Contrato firmado</span>
-                  <input type="checkbox" checked class="w-5 h-5" />
-                </label>
-              </div>
-            </div>
-          </div>
-
-          <div class="xl:col-span-2 bg-white p-6 rounded-2xl border border-gray-200 shadow-sm flex flex-col min-h-[520px]">
-            <div class="flex justify-between items-center gap-3 mb-4 border-b border-gray-100 pb-4">
-              <div>
-                <h3 class="text-sm font-black text-gray-900">Plantilla WhatsApp · Bienvenida</h3>
-                <p class="text-xs text-gray-500 font-semibold">Se envía tras firma y activación del contrato.</p>
-              </div>
-              <button onclick="fakeSave('Automatización guardada')" class="px-4 py-2.5 rounded-xl bg-blue-600 text-white text-[10px] font-black uppercase tracking-widest shadow-lg">Guardar</button>
-            </div>
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1">
-              <div class="lg:col-span-2 flex flex-col">
-                <label class="text-[10px] font-black text-gray-400 uppercase mb-2">Mensaje</label>
-                <textarea class="flex-1 w-full p-5 rounded-2xl bg-gray-50 border border-gray-200 text-sm font-semibold text-gray-700 min-h-[300px] outline-none focus:ring-2 focus:ring-blue-500">👋 Hola {{NOMBRE}}, te damos la bienvenida a {{EMPRESA}}.
-
-Tu plan {{PLAN}} ya está activo desde hoy.
-Incluye {{COBERTURAS_RESUMEN}}.
-
-Puedes consultar tu contrato, recibos y servicios desde tu portal:
-{{ENLACE_PORTAL}}</textarea>
-              </div>
-              <div class="space-y-4">
-                <div class="p-4 rounded-2xl bg-blue-50 border border-blue-100">
-                  <p class="text-[10px] uppercase tracking-widest font-black text-blue-600 mb-2">Variables</p>
-                  <div class="space-y-2 text-xs font-black text-blue-800">
-                    <div>{{NOMBRE}}</div>
-                    <div>{{EMPRESA}}</div>
-                    <div>{{PLAN}}</div>
-                    <div>{{COBERTURAS_RESUMEN}}</div>
-                    <div>{{ENLACE_PORTAL}}</div>
-                    <div>{{FECHA_RENOVACION}}</div>
-                  </div>
-                </div>
-                <div class="p-4 rounded-2xl bg-gray-50 border border-gray-200">
-                  <p class="text-[10px] uppercase tracking-widest font-black text-gray-400 mb-2">Regla</p>
-                  <p class="text-sm font-bold text-gray-700">Disparar al cambiar estado del contrato a <span class="text-blue-700">ACTIVO</span>.</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section id="tab-documents" class="tab-content hidden flex-1 min-h-0 fade-in overflow-y-auto no-scrollbar pb-10">
-        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
-          <div class="xl:col-span-1 space-y-6">
-            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-              <h3 class="text-sm font-black text-gray-900 mb-4">Documentos base</h3>
-              <div class="space-y-3">
-                <button class="w-full p-3 rounded-xl bg-blue-50 border border-blue-100 text-left text-sm font-black text-blue-700">Contrato general</button>
-                <button class="w-full p-3 rounded-xl bg-gray-50 border border-gray-200 text-left text-sm font-black text-gray-700">Anexo RGPD</button>
-                <button class="w-full p-3 rounded-xl bg-gray-50 border border-gray-200 text-left text-sm font-black text-gray-700">Carta renovación</button>
-                <button class="w-full p-3 rounded-xl bg-gray-50 border border-gray-200 text-left text-sm font-black text-gray-700">Carta de baja</button>
-                <button class="w-full p-3 rounded-xl bg-gray-50 border border-gray-200 text-left text-sm font-black text-gray-700">Recibo / comprobante</button>
-              </div>
-            </div>
-          </div>
-          <div class="xl:col-span-2 bg-white p-6 rounded-2xl border border-gray-200 shadow-sm flex flex-col min-h-[540px]">
-            <div class="flex justify-between items-center gap-3 mb-4 border-b border-gray-100 pb-4">
-              <div>
-                <h3 class="text-sm font-black text-gray-900">Editor de contrato</h3>
-                <p class="text-xs text-gray-500 font-semibold">Plantilla maestra aplicada a nuevas altas.</p>
-              </div>
-              <div class="flex gap-2">
-                <button class="px-4 py-2.5 rounded-xl border border-gray-200 text-[10px] uppercase tracking-widest font-black">Vista previa PDF</button>
-                <button onclick="fakeSave('Contrato guardado')" class="px-4 py-2.5 rounded-xl bg-blue-600 text-white text-[10px] uppercase tracking-widest font-black shadow-lg">Guardar</button>
-              </div>
-            </div>
-            <textarea class="flex-1 w-full p-6 rounded-2xl bg-gray-50 border border-gray-200 text-sm font-semibold text-gray-700 min-h-[360px] outline-none focus:ring-2 focus:ring-blue-500">1. OBJETO DEL CONTRATO
-La empresa {{EMPRESA}} prestará al titular {{NOMBRE}} los servicios y coberturas descritos en el plan {{PLAN}}.
-
-2. COBERTURAS
-El contrato incluye {{COBERTURAS_RESUMEN}}, con los límites indicados en las condiciones particulares.
-
-3. CARENCIA
-Se establece un periodo de carencia de {{CARENCIA}} desde la fecha de alta.
-
-4. RENOVACIÓN
-La renovación será automática salvo oposición previa del titular.
-
-5. EXCLUSIONES
-Quedan excluidos los daños preexistentes, mal uso, trabajos de reforma integral y cualquier supuesto no amparado por las condiciones del plan.</textarea>
-          </div>
-        </div>
-      </section>
-
-    </main>
-  </div>
-
-  <div id="overlay" onclick="closeAllModals()" class="hidden fixed inset-0 bg-slate-950/40 glass z-40"></div>
-
-  <div id="companyModal" class="hidden fixed inset-0 z-50 p-4 md:p-8">
-    <div class="mx-auto max-w-3xl h-full flex items-center justify-center">
-      <div class="w-full bg-white rounded-3xl border border-gray-200 shadow-2xl overflow-hidden">
-        <div class="p-6 border-b border-gray-100 flex items-center justify-between">
-          <div>
-            <h3 class="text-lg font-black text-gray-900">Nueva aseguradora</h3>
-            <p class="text-xs text-gray-500 font-semibold">Alta rápida de empresa / marca de protección.</p>
-          </div>
-          <button onclick="closeAllModals()" class="p-2 rounded-xl hover:bg-gray-100"><i data-lucide="x" class="w-5 h-5"></i></button>
-        </div>
-        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[70vh] overflow-y-auto no-scrollbar">
-          <input placeholder="Nombre comercial" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Razón social" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="CIF" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Email" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Teléfono" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="IBAN" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <textarea placeholder="Dirección fiscal" class="md:col-span-2 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm min-h-[100px]"></textarea>
-        </div>
-        <div class="p-6 border-t border-gray-100 flex justify-end gap-3 bg-gray-50/70">
-          <button onclick="closeAllModals()" class="px-4 py-3 rounded-xl border border-gray-200 bg-white text-xs font-black uppercase tracking-widest">Cancelar</button>
-          <button onclick="fakeSave('Aseguradora creada'); closeAllModals();" class="px-4 py-3 rounded-xl bg-blue-600 text-white text-xs font-black uppercase tracking-widest shadow-lg">Crear</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div id="planModal" class="hidden fixed inset-0 z-50 p-4 md:p-8">
-    <div class="mx-auto max-w-4xl h-full flex items-center justify-center">
-      <div class="w-full bg-white rounded-3xl border border-gray-200 shadow-2xl overflow-hidden">
-        <div class="p-6 border-b border-gray-100 flex items-center justify-between">
-          <div>
-            <h3 class="text-lg font-black text-gray-900">Nuevo plan de protección</h3>
-            <p class="text-xs text-gray-500 font-semibold">Configura precio, carencia, coberturas y límites.</p>
-          </div>
-          <button onclick="closeAllModals()" class="p-2 rounded-xl hover:bg-gray-100"><i data-lucide="x" class="w-5 h-5"></i></button>
-        </div>
-        <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto no-scrollbar">
-          <input placeholder="Nombre del plan" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <select class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm"><option>Tipo de cobro</option><option>Mensual</option><option>Anual</option><option>Mixto</option></select>
-          <input placeholder="Precio alta / promo" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Precio renovación" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Carencia (días)" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Permanencia (meses)" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Urgencias incluidas" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Bricos incluidos" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Copago" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <textarea placeholder="Coberturas incluidas" class="lg:col-span-2 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm min-h-[100px]"></textarea>
-          <textarea placeholder="Exclusiones" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm min-h-[100px]"></textarea>
-        </div>
-        <div class="p-6 border-t border-gray-100 flex justify-end gap-3 bg-gray-50/70">
-          <button onclick="closeAllModals()" class="px-4 py-3 rounded-xl border border-gray-200 bg-white text-xs font-black uppercase tracking-widest">Cancelar</button>
-          <button onclick="fakeSave('Plan creado'); closeAllModals();" class="px-4 py-3 rounded-xl bg-blue-600 text-white text-xs font-black uppercase tracking-widest shadow-lg">Guardar plan</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div id="subscriberModal" class="hidden fixed inset-0 z-50 p-4 md:p-8">
-    <div class="mx-auto max-w-4xl h-full flex items-center justify-center">
-      <div class="w-full bg-white rounded-3xl border border-gray-200 shadow-2xl overflow-hidden">
-        <div class="p-6 border-b border-gray-100 flex items-center justify-between">
-          <div>
-            <h3 class="text-lg font-black text-gray-900">Alta manual de suscriptor</h3>
-            <p class="text-xs text-gray-500 font-semibold">Titular, contrato, inmueble y método de pago.</p>
-          </div>
-          <button onclick="closeAllModals()" class="p-2 rounded-xl hover:bg-gray-100"><i data-lucide="x" class="w-5 h-5"></i></button>
-        </div>
-        <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[70vh] overflow-y-auto no-scrollbar">
-          <input placeholder="Nombre completo" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="DNI / NIE" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Teléfono" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <input placeholder="Email" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" />
-          <select class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm"><option>Plan</option><option>Básico</option><option>Hogar Plus</option><option>Premium</option></select>
-          <select class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm"><option>Periodicidad</option><option>Mensual</option><option>Anual</option></select>
-          <input placeholder="Fecha inicio" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" type="date" />
-          <input placeholder="Fecha renovación" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm" type="date" />
-          <select class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm"><option>Método pago</option><option>Stripe</option><option>Transferencia</option><option>Recibo</option></select>
-          <textarea placeholder="Dirección inmueble" class="lg:col-span-2 px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm min-h-[100px]"></textarea>
-          <textarea placeholder="Observaciones internas" class="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 font-bold text-sm min-h-[100px]"></textarea>
-        </div>
-        <div class="p-6 border-t border-gray-100 flex justify-end gap-3 bg-gray-50/70">
-          <button onclick="closeAllModals()" class="px-4 py-3 rounded-xl border border-gray-200 bg-white text-xs font-black uppercase tracking-widest">Cancelar</button>
-          <button onclick="fakeSave('Suscriptor creado'); closeAllModals();" class="px-4 py-3 rounded-xl bg-blue-600 text-white text-xs font-black uppercase tracking-widest shadow-lg">Dar de alta</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script src="js/layout.js"></script>
-  <script>
-    function switchTab(tab) {
-      document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
-      document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
-      document.getElementById('tab-' + tab).classList.remove('hidden');
-      document.getElementById('btn-tab-' + tab).classList.add('active');
-      if (window.lucide) lucide.createIcons();
-    }
-
-    function openModal(id) {
-      document.getElementById('overlay').classList.remove('hidden');
-      document.getElementById(id).classList.remove('hidden');
-      if (window.lucide) lucide.createIcons();
-    }
-
-    function closeAllModals() {
-      document.getElementById('overlay').classList.add('hidden');
-      document.querySelectorAll('[id$="Modal"]').forEach(m => m.classList.add('hidden'));
-    }
-
-    function fakeSave(message) {
-      const toast = document.createElement('div');
-      toast.className = 'fixed bottom-6 right-6 z-[70] bg-slate-900 text-white px-5 py-3 rounded-2xl shadow-2xl text-sm font-black tracking-wide fade-in';
-      toast.textContent = '✅ ' + message;
-      document.body.appendChild(toast);
-      setTimeout(() => toast.remove(), 2200);
-    }
-
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') closeAllModals();
-    });
-
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.lucide) lucide.createIcons();
-    });
-  </script>
+        document.addEventListener('DOMContentLoaded', () => {
+            renderAll();
+            document.getElementById('searchClientInput').addEventListener('input', renderClients);
+            document.getElementById('filterStatus').addEventListener('change', renderClients);
+            document.getElementById('modalBackdrop').addEventListener('click', closeModals);
+            if (window.lucide) lucide.createIcons();
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file

Cobertura	Básico	Hogar Plus	Premium	Copago	Observaciones
Urgencia eléctrica	1/año	2/año	Ilimitada*	0€ / 0€ / 19€	Prioridad alta en Premium
Fontanería urgente	Incluida	Incluida	Incluida	0€	Solo vivienda habitual salvo Premium
Servicio manitas	1	2	4	0€	Máx. 2 horas por visita
Cerrajería	—	Incluida	Incluida	29€ / 15€	No incluye cambio de bombín premium especial