From d33ca3376751de3996f166cedef6787674983edf Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Mon, 30 Mar 2026 07:40:52 +0000
Subject: [PATCH] Actualizar proteccion.html

---
 proteccion.html | 382 +++++++++++++++++++++++-------------------------
 1 file changed, 186 insertions(+), 196 deletions(-)
diff --git a/proteccion.html b/proteccion.html
index 90bcc64..b7a1a74 100644
--- a/proteccion.html
+++ b/proteccion.html
@@ -1,216 +1,206 @@
-<div class="p-6 space-y-6">
-    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
-        <div>
-            <h1 class="text-2xl font-black text-slate-800 flex items-center gap-2">
-                <i data-lucide="shield-check" class="text-blue-600 w-8 h-8"></i>
-                Planes de Protección
-            </h1>
-            <p class="text-slate-500 text-sm font-medium">Gestión de suscripciones y mantenimiento recurrente</p>
-        </div>
-        <div class="flex bg-slate-100 p-1 rounded-2xl">
-            <button onclick="switchTab('config')" id="btn-tab-config" class="tab-btn active px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
-                Configuración
-            </button>
-            <button onclick="switchTab('clients')" id="btn-tab-clients" class="tab-btn px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
-                Suscriptores
-            </button>
-        </div>
-    </div>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Planes de Protección - Admin IntegraRepara</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');
+        body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+        .tab-btn.active {
+            background-color: white;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+            color: #2563eb;
+        }
+        .tab-btn:not(.active) { color: #64748b; }
+    </style>
+</head>
+<body class="flex h-screen overflow-hidden">
 
-    <div id="tab-config" class="tab-content space-y-6">
-        <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-[2rem] shadow-sm border border-slate-100">
-                    <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
-                        <i data-lucide="banknote" class="w-4 h-4 text-blue-600"></i> Precios y Tarifas
-                    </h3>
-                    <div class="space-y-4">
-                        <div>
-                            <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Cuota Mensual (€)</label>
-                            <input type="number" id="cfg-price-month" value="6.90" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700 focus:ring-2 focus:ring-blue-500 outline-none">
-                        </div>
-                        <div>
-                            <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Cuota Anual (Oferta €)</label>
-                            <input type="number" id="cfg-price-year" value="59.95" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700 focus:ring-2 focus:ring-blue-500 outline-none">
-                        </div>
-                        <div class="pt-2">
-                            <label class="flex items-center gap-2 cursor-pointer">
-                                <input type="checkbox" checked class="w-5 h-5 rounded border-slate-300 text-blue-600">
-                                <span class="text-xs font-bold text-slate-600">IVA Incluido en el precio</span>
-                            </label>
-                        </div>
-                    </div>
+    <div id="sidebar-container" class="h-full shrink-0"></div>
+
+    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
+        
+        <div id="header-container"></div>
+
+        <main class="flex-1 overflow-y-auto p-6 space-y-6">
+            
+            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
+                <div>
+                    <h1 class="text-2xl font-black text-slate-800 flex items-center gap-3">
+                        <i data-lucide="shield-check" class="text-blue-600 w-8 h-8"></i>
+                        Planes de Protección
+                    </h1>
+                    <p class="text-slate-500 text-sm font-medium">Gestión de suscripciones y mantenimiento recurrente</p>
                 </div>
-
-                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
-                    <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
-                        <i data-lucide="settings-2" class="w-4 h-4 text-blue-600"></i> Parámetros del Plan
-                    </h3>
-                    <div class="space-y-4">
-                        <div>
-                            <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Días de Carencia</label>
-                            <input type="number" value="15" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
-                        </div>
-                        <div>
-                            <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Urgencias/Año Incluidas</label>
-                            <input type="number" value="2" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
-                        </div>
-                        <div>
-                            <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Horas Manitas/Año</label>
-                            <input type="number" value="2" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
-                        </div>
-                    </div>
+                <div class="flex bg-slate-100 p-1.5 rounded-2xl">
+                    <button onclick="switchTab('config')" id="btn-tab-config" class="tab-btn active px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
+                        Configuración
+                    </button>
+                    <button onclick="switchTab('clients')" id="btn-tab-clients" class="tab-btn px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
+                        Suscriptores
+                    </button>
                 </div>
             </div>
 
-            <div class="lg:col-span-2">
-                <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 h-full flex flex-col">
-                    <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center justify-between">
-                        <span class="flex items-center gap-2"><i data-lucide="file-text" class="w-4 h-4 text-blue-600"></i> Texto Legal del Contrato</span>
-                        <span class="text-[10px] text-slate-400 font-medium">Este texto aparecerá en el PDF para firmar</span>
-                    </h3>
-                    <textarea id="cfg-contract-text" class="flex-1 w-full p-6 bg-slate-50 border border-slate-100 rounded-[1.5rem] text-sm text-slate-600 leading-relaxed focus:ring-2 focus:ring-blue-500 outline-none min-h-[400px]">
-1. OBJETO DEL CONTRATO: IntegraRepara prestará servicios de asistencia técnica eléctrica...
+            <div id="tab-config" class="tab-content space-y-6">
+                <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-[2rem] shadow-sm border border-slate-100">
+                            <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
+                                <i data-lucide="banknote" class="w-4 h-4 text-blue-600"></i> Precios y Tarifas
+                            </h3>
+                            <div class="space-y-4">
+                                <div>
+                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Cuota Mensual (€)</label>
+                                    <input type="number" id="cfg-price-month" value="6.90" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700 focus:ring-2 focus:ring-blue-500 outline-none">
+                                </div>
+                                <div>
+                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Cuota Anual (€)</label>
+                                    <input type="number" id="cfg-price-year" value="59.95" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700 focus:ring-2 focus:ring-blue-500 outline-none">
+                                </div>
+                                <div class="pt-2">
+                                    <label class="flex items-center gap-2 cursor-pointer">
+                                        <input type="checkbox" checked class="w-5 h-5 rounded border-slate-300 text-blue-600">
+                                        <span class="text-xs font-bold text-slate-600">IVA Incluido en el precio</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
+                            <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
+                                <i data-lucide="settings-2" class="w-4 h-4 text-blue-600"></i> Parámetros del Plan
+                            </h3>
+                            <div class="space-y-4">
+                                <div>
+                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Días de Carencia</label>
+                                    <input type="number" value="15" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
+                                </div>
+                                <div>
+                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Urgencias/Año Incluidas</label>
+                                    <input type="number" value="2" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
+                                </div>
+                                <div>
+                                    <label class="text-[10px] font-black text-slate-400 uppercase ml-1">Horas Manitas/Año</label>
+                                    <input type="number" value="2" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="lg:col-span-2">
+                        <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 h-full flex flex-col">
+                            <h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center justify-between">
+                                <span class="flex items-center gap-2"><i data-lucide="file-text" class="w-4 h-4 text-blue-600"></i> Texto Legal del Contrato</span>
+                                <span class="text-[10px] text-slate-400 font-medium">Se inyectará en el PDF al firmar</span>
+                            </h3>
+                            <textarea id="cfg-contract-text" class="flex-1 w-full p-6 bg-slate-50 border border-slate-100 rounded-[1.5rem] text-sm text-slate-600 leading-relaxed focus:ring-2 focus:ring-blue-500 outline-none min-h-[450px]">
+1. OBJETO DEL CONTRATO: IntegraRepara prestará servicios de asistencia técnica...
 2. COBERTURA DE URGENCIAS: 2 intervenciones al año, 3h de mano de obra...
 3. BRICOLAJE ELÉCTRICO: 1 servicio de 2h anual...
 4. MATERIALES: Por cuenta del cliente...
-... (puedes editar todo el texto aquí)
-                    </textarea>
-                    <div class="mt-6 flex justify-end">
-                        <button onclick="saveConfig()" class="bg-blue-600 text-white px-8 py-4 rounded-2xl font-black uppercase tracking-widest text-xs shadow-lg hover:opacity-90 active:scale-95 transition-all flex items-center gap-2">
-                            <i data-lucide="save" class="w-4 h-4"></i> Guardar Cambios
-                        </button>
+... (puedes editar el contrato completo aquí)
+                            </textarea>
+                            <div class="mt-6 flex justify-end">
+                                <button onclick="saveConfig()" class="bg-blue-600 text-white px-8 py-4 rounded-2xl font-black uppercase tracking-widest text-xs shadow-lg hover:opacity-90 active:scale-95 transition-all flex items-center gap-2">
+                                    <i data-lucide="save" class="w-4 h-4"></i> Guardar Configuración
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
 
-    <div id="tab-clients" class="tab-content hidden space-y-6">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex items-center gap-4">
-                <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center"><i data-lucide="users" class="w-6 h-6"></i></div>
-                <div><p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Socios</p><p class="text-xl font-black text-slate-800">124</p></div>
-            </div>
-            <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex items-center gap-4">
-                <div class="w-12 h-12 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center"><i data-lucide="trending-up" class="w-6 h-6"></i></div>
-                <div><p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Ingreso Mensual (MRR)</p><p class="text-xl font-black text-slate-800">855,60€</p></div>
-            </div>
-            <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex items-center gap-4">
-                <div class="w-12 h-12 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center"><i data-lucide="alert-circle" class="w-6 h-6"></i></div>
-                <div><p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Cobros Fallidos</p><p class="text-xl font-black text-slate-800">3</p></div>
-            </div>
-        </div>
-
-        <div class="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
-            <div class="p-6 border-b border-slate-50 flex flex-col md:flex-row justify-between gap-4">
-                <div class="relative flex-1 max-w-md">
-                    <i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
-                    <input type="text" placeholder="Buscar por nombre o teléfono..." class="w-full pl-11 pr-4 py-3 bg-slate-50 rounded-xl text-sm font-medium outline-none focus:ring-2 focus:ring-blue-500 border-none">
+            <div id="tab-clients" class="tab-content hidden space-y-6">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm flex items-center gap-4">
+                        <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center shadow-sm"><i data-lucide="users" class="w-6 h-6"></i></div>
+                        <div><p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Socios</p><p class="text-xl font-black text-slate-800">124</p></div>
+                    </div>
+                    <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm flex items-center gap-4">
+                        <div class="w-12 h-12 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center shadow-sm"><i data-lucide="trending-up" class="w-6 h-6"></i></div>
+                        <div><p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Ingreso Mensual (MRR)</p><p class="text-xl font-black text-slate-800">855,60€</p></div>
+                    </div>
+                    <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm flex items-center gap-4">
+                        <div class="w-12 h-12 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center shadow-sm"><i data-lucide="alert-circle" class="w-6 h-6"></i></div>
+                        <div><p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Impagos / Fallidos</p><p class="text-xl font-black text-slate-800">3</p></div>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
+                    <div class="p-6 border-b border-slate-50 flex flex-col md:flex-row justify-between gap-4">
+                        <div class="relative flex-1 max-w-md">
+                            <i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
+                            <input type="text" placeholder="Buscar por nombre o teléfono..." class="w-full pl-11 pr-4 py-3 bg-slate-50 rounded-xl text-sm font-medium outline-none focus:ring-2 focus:ring-blue-500 border-none">
+                        </div>
+                    </div>
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest">
+                                    <th class="px-6 py-4">Socio</th>
+                                    <th class="px-6 py-4 text-center">Plan</th>
+                                    <th class="px-6 py-4">Estado Pago</th>
+                                    <th class="px-6 py-4">Última Visita</th>
+                                    <th class="px-6 py-4 text-right">Acciones</th>
+                                </tr>
+                            </thead>
+                            <tbody class="text-sm font-bold text-slate-600 divide-y divide-slate-50">
+                                <tr>
+                                    <td class="px-6 py-4">
+                                        <div class="flex flex-col">
+                                            <span>Juan Pérez García</span>
+                                            <span class="text-[10px] font-medium text-slate-400">600 112 233</span>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4 text-center">
+                                        <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded text-[10px]">ANUAL</span>
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        <span class="text-emerald-500 flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> Activo</span>
+                                    </td>
+                                    <td class="px-6 py-4 text-slate-400 font-medium">Pendiente revisión</td>
+                                    <td class="px-6 py-4 text-right">
+                                        <button class="w-8 h-8 bg-slate-50 text-slate-400 rounded-lg hover:text-blue-600 transition-colors"><i data-lucide="file-text" class="w-4 h-4 mx-auto"></i></button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
-                <button class="bg-slate-800 text-white px-6 py-3 rounded-xl text-xs font-black uppercase tracking-widest flex items-center gap-2">
-                    <i data-lucide="download" class="w-4 h-4"></i> Exportar Excel
-                </button>
             </div>
-            <div class="overflow-x-auto">
-                <table class="w-full text-left border-collapse">
-                    <thead>
-                        <tr class="bg-slate-50/50 text-[10px] font-black text-slate-400 uppercase tracking-[0.15em]">
-                            <th class="px-6 py-4">Cliente</th>
-                            <th class="px-6 py-4">Plan</th>
-                            <th class="px-6 py-4">Estado</th>
-                            <th class="px-6 py-4">Prox. Cobro</th>
-                            <th class="px-6 py-4 text-right">Acciones</th>
-                        </tr>
-                    </thead>
-                    <tbody class="text-sm font-bold text-slate-600 divide-y divide-slate-50">
-                        <tr class="hover:bg-slate-50/50 transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="flex flex-col">
-                                    <span>Juan Pérez García</span>
-                                    <span class="text-[10px] font-medium text-slate-400">600 112 233</span>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-[10px]">ANUAL</span>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="flex items-center gap-1.5 text-emerald-600">
-                                    <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
-                                    <span>Al día</span>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4 text-slate-400 font-medium">15 Abr 2026</td>
-                            <td class="px-6 py-4 text-right">
-                                <div class="flex justify-end gap-2">
-                                    <button class="w-8 h-8 bg-slate-100 text-slate-600 rounded-lg flex items-center justify-center active:scale-90" title="Ver Contrato PDF"><i data-lucide="file-text" class="w-4 h-4"></i></button>
-                                    <button class="w-8 h-8 bg-slate-100 text-slate-600 rounded-lg flex items-center justify-center active:scale-90" title="Información"><i data-lucide="info" class="w-4 h-4"></i></button>
-                                </div>
-                            </td>
-                        </tr>
-                        <tr class="hover:bg-slate-50/50 transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="flex flex-col">
-                                    <span>Marta López</span>
-                                    <span class="text-[10px] font-medium text-slate-400">677 889 900</span>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <span class="bg-slate-100 text-slate-600 px-2 py-1 rounded-md text-[10px]">MENSUAL</span>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="flex items-center gap-1.5 text-rose-600">
-                                    <i data-lucide="alert-triangle" class="w-4 h-4"></i>
-                                    <span>Pago Fallido</span>
-                                </div>
-                            </td>
-                            <td class="px-6 py-4 text-rose-400 font-medium">CADUCADO</td>
-                            <td class="px-6 py-4 text-right">
-                                <div class="flex justify-end gap-2">
-                                    <button class="bg-blue-600 text-white px-3 py-1.5 rounded-lg text-[10px] uppercase">Reintentar Cobro</button>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
+        </main>
     </div>
-</div>
 
-<style>
-    .tab-btn.active {
-        background-color: white;
-        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-        color: #1e40af;
-    }
-    .tab-btn:not(.active) {
-        color: #64748b;
-    }
-</style>
+    <script src="js/main.js"></script> 
+    <script>
+        // Inicializar Iconos de Lucide al cargar
+        lucide.createIcons();
 
-<script>
-    lucide.createIcons();
+        function switchTab(tab) {
+            // Ocultar todos los contenidos
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
 
-    function switchTab(tab) {
-        // Ocultar contenidos
-        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
-        document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
+            // Mostrar el seleccionado
+            document.getElementById('tab-' + tab).classList.remove('hidden');
+            document.getElementById('btn-tab-' + tab).classList.add('active');
+            
+            // Re-renderizar iconos por si hay nuevos en la pestaña
+            lucide.createIcons();
+        }
 
-        // Mostrar seleccionado
-        document.getElementById('tab-' + tab).classList.remove('hidden');
-        document.getElementById('btn-tab-' + tab).classList.add('active');
-        
-        lucide.createIcons(); // Refrescar iconos por si acaso
-    }
+        async function saveConfig() {
+            const text = document.getElementById('cfg-contract-text').value;
+            const pMonth = document.getElementById('cfg-price-month').value;
+            const pYear = document.getElementById('cfg-price-year').value;
 
-    async function saveConfig() {
-        const text = document.getElementById('cfg-contract-text').value;
-        const pMonth = document.getElementById('cfg-price-month').value;
-        const pYear = document.getElementById('cfg-price-year').value;
-
-        // Aquí harías el fetch a tu server para guardar esta config
-        console.log("Guardando configuración...", { pMonth, pYear, text });
-        alert("✅ Configuración guardada correctamente");
-    }
-</script>
\ No newline at end of file
+            alert("✅ Configuración guardada correctamente en el sistema.");
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file

Cliente	Plan	Estado	Prox. Cobro	Acciones
- - Juan Pérez García - 600 112 233 - -	- ANUAL -	- - - Al día - -	15 Abr 2026	- - - - -
- - Marta López - 677 889 900 - -	- MENSUAL -	- - - Pago Fallido - -	CADUCADO	- - - -