From c661791e17b888c756599f6ee3902bde4f6f85b8 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Fri, 3 Apr 2026 16:58:14 +0000
Subject: [PATCH] Actualizar index.html

---
 index.html | 58 ++++++++++++++++++++++++++----------------------------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index 09a2006..d806d66 100644
--- a/index.html
+++ b/index.html
@@ -85,24 +85,13 @@
 </div>
         </header>
 
-        <div id="promo-banner" onclick="window.location.href='plan-tranquilidad.html?token=' + urlToken" class="hidden cursor-pointer mt-4 mb-2 mx-5 fade-in bg-[#131b2c] rounded-2xl p-4 shadow-md transition-all hover:shadow-lg active:scale-[0.98] flex items-center gap-4">
-                    <div class="w-12 h-12 shrink-0 bg-[#232b3e] rounded-xl flex items-center justify-center border border-white/5">
-                        <i data-lucide="shield-check" class="w-6 h-6 text-amber-400"></i>
-                    </div>
-                    <div class="flex-1 text-left min-w-0">
-                        <h3 class="text-white font-black text-sm tracking-tight leading-tight truncate">Plan Tranquilidad</h3>
-                        <p class="text-slate-400 text-[10px] font-medium mt-0.5 leading-snug pr-2">
-                            Urgencias a 0€ y revisión anual. Descubre los planes.
-                        </p>
-                    </div>
-                    <div class="shrink-0 bg-white text-[#131b2c] w-8 h-8 rounded-full flex items-center justify-center shadow-sm">
-                        <i data-lucide="arrow-right" class="w-4 h-4 font-bold"></i>
-                    </div>
+        <div class="w-full relative z-10">
+            <div id="tabAvisos" class="tab-content active px-5 pt-6 pb-6">
+
+                <div id="promo-banner" onclick="window.location.href='plan-tranquilidad.html?token=' + urlToken" class="hidden cursor-pointer mb-6 fade-in transition-all hover:shadow-lg hover:-translate-y-1 active:scale-[0.98] rounded-[2rem] overflow-hidden shadow-md">
+                    <img src="https://i.postimg.cc/30d993sK/Disen-o-sin-ti-tulo-20.jpg" alt="Plan Tranquilidad Marsalva" class="w-full h-auto object-cover border border-slate-200 rounded-[2rem]">
                 </div>
-
-
-                            
-                <div id="activeServicesContainer" class="space-y-5 fade-in fade-in-delay-1"></div>
+                <h2 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-4 ml-2 fade-in fade-in-delay-1">Tus Reparaciones</h2>       <div id="activeServicesContainer" class="space-y-5 fade-in fade-in-delay-1"></div>
                 
                 <div id="noActiveServices" class="hidden text-center p-8 bg-white rounded-[2.5rem] shadow-sm border border-slate-100 mt-2">
                     <div class="w-16 h-16 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4"><i data-lucide="check-circle-2" class="w-8 h-8"></i></div>
@@ -370,18 +359,9 @@
                 if (!data.ok) throw new Error("Token inválido");
                 
                 const servicesList = data.services || [];
+                
                 currentQuotes = data.quotes || [];
 
-                // 🛑 LÓGICA DEL BANNER: Si NO tiene suscripción activa, se lo enseñamos
-                const promoBanner = document.getElementById('promo-banner');
-                if (promoBanner) {
-                    if (data.subscription) {
-                        promoBanner.classList.add('hidden'); // Ya tiene el plan, lo ocultamos
-                    } else {
-                        promoBanner.classList.remove('hidden'); // No tiene el plan, lo mostramos
-                    }
-                }
-
                 renderPortal(data.client, data.company, servicesList);
                 
                 renderQuotes(); 
@@ -512,9 +492,27 @@ if (hasUnseenPending && isAvisosTab) {
                     statusBadge = `<span class="bg-rose-100 text-rose-700 px-2 py-1 rounded-md text-[8px] font-black uppercase tracking-widest flex items-center gap-1 w-fit mt-1.5"><i data-lucide="x" class="w-3 h-3"></i> Rechazado</span>`;
                 }
 
-                <div id="promo-banner" onclick="window.location.href='plan-tranquilidad.html?token=' + urlToken" class="hidden cursor-pointer mt-5 mb-3 mx-5 fade-in transition-all hover:shadow-lg hover:-translate-y-1 active:scale-[0.98] rounded-[2rem] overflow-hidden shadow-md">
-                    <img src="https://i.postimg.cc/fW4hvS95/pt.jpg" alt="Plan Tranquilidad Marsalva" class="w-full h-auto object-cover border border-slate-200 rounded-[2rem]">
-                </div>
+                html += `
+                <div onclick="openQuoteModal(${q.id})" class="bg-white p-5 rounded-[2rem] shadow-sm border ${isViewed ? 'border-slate-100' : 'border-blue-400 ring-2 ring-blue-50'} relative cursor-pointer active:scale-95 transition-all text-left">
+                    ${!isViewed ? '<div class="absolute top-5 right-5 w-3 h-3 bg-red-500 rounded-full animate-pulse shadow-sm border-2 border-white"></div>' : ''}
+                    
+                    <div class="flex items-center gap-3 mb-3">
+                        <div class="w-10 h-10 rounded-xl ${isViewed ? 'bg-slate-50 text-slate-400' : 'bg-blue-50 text-blue-600'} flex items-center justify-center shrink-0">
+                            <i data-lucide="file-text" class="w-5 h-5"></i>
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1">REF #${refStr}</p>
+                            <h3 class="font-black text-slate-800 text-sm leading-tight pr-6 truncate">${titleStr}</h3>
+                            ${statusBadge}
+                        </div>
+                    </div>
+                    
+                    <div class="flex justify-between items-end border-t border-slate-100 pt-3 mt-1">
+                        <span class="text-[10px] font-bold text-slate-500 flex items-center gap-1"><i data-lucide="calendar" class="w-3 h-3"></i> ${dateStr}</span>
+                        <span class="text-lg font-black text-slate-800">${amountStr}€</span>
+                    </div>
+                    ${quickPayButton}
+                </div>`;
             });
             
             container.innerHTML = html;