From db8cb8f3a034dc7b620f7ef9a5f5cdfddd2df72f Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 29 Mar 2026 17:38:22 +0000
Subject: [PATCH] Actualizar presupuestos.html

---
 presupuestos.html | 59 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 18 deletions(-)

diff --git a/presupuestos.html b/presupuestos.html
index 9998220..afd5815 100644
--- a/presupuestos.html
+++ b/presupuestos.html
@@ -455,7 +455,7 @@ async function downloadPDF(id) {
             }
         }
 
-        // ------------------ RENDERIZAR LA LISTA EN PANTALLA ------------------
+      // ------------------ RENDERIZAR LA LISTA EN PANTALLA ------------------
         function renderBudgetsList(budgets) {
             const container = document.getElementById('budgetsList');
             if(budgets.length === 0) {
@@ -470,43 +470,66 @@ async function downloadPDF(id) {
             }
 
             container.innerHTML = budgets.map(b => {
-                let statusColor = "bg-amber-50 text-amber-600";
-                let statusText = "Pendiente";
+                // 🔴 LÓGICA DE ESTADOS Y CADUCIDAD (Igual que en el Portal)
+                let bDate = new Date(b.created_at);
+                let diffDays = Math.ceil(Math.abs(new Date() - bDate) / (1000 * 60 * 60 * 24));
+                let isExpired = diffDays > 30;
+
+                let statusColor = "bg-amber-100 text-amber-700";
+                let statusText = "Pte. Resolver";
                 let icon = "clock";
                 
-                if(b.status === 'accepted' || b.status === 'converted') { statusColor = "bg-emerald-50 text-emerald-600"; statusText = "Aceptado"; icon = "check-circle"; }
-                else if(b.status === 'rejected') { statusColor = "bg-rose-50 text-rose-600"; statusText = "Rechazado"; icon = "x-circle"; }
+                // Prioridad de estados
+                if (b.status === 'paid') {
+                    statusColor = "bg-emerald-100 text-emerald-700 border border-emerald-200";
+                    statusText = "Pagado Online";
+                    icon = "badge-check";
+                } else if (isExpired && b.status !== 'rejected') {
+                    statusColor = "bg-slate-100 text-slate-500 border border-slate-200";
+                    statusText = "Caducado";
+                    icon = "clock-alert";
+                } else if (b.status === 'accepted' || b.status === 'converted') {
+                    statusColor = "bg-blue-100 text-blue-700 border border-blue-200";
+                    statusText = "Aceptado (Pte. Pago)";
+                    icon = "clock";
+                } else if (b.status === 'rejected') {
+                    statusColor = "bg-rose-100 text-rose-700";
+                    statusText = "Rechazado";
+                    icon = "x-circle";
+                }
 
-                const d = new Date(b.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: '2-digit' });
+                const d = bDate.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: '2-digit' });
 
                 return `
-                <div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm flex flex-col gap-4 relative overflow-hidden">
-                    <div class="absolute top-0 left-0 w-1 h-full bg-slate-200"></div>
+                <div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm flex flex-col gap-4 relative overflow-hidden fade-in">
+                    <div class="absolute top-0 left-0 w-1.5 h-full ${b.status === 'paid' ? 'bg-emerald-500' : (isExpired ? 'bg-slate-300' : 'bg-primary-dynamic')}"></div>
 
                     <div class="flex justify-between items-start pl-2">
                         <div class="w-[60%]">
                             <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">PRE-${b.id} • ${d}</span>
                             <h3 class="text-sm font-bold text-slate-800 truncate">${b.client_name || 'Sin Nombre'}</h3>
-                            <p class="text-xs text-slate-500 font-medium mt-0.5"><i data-lucide="phone" class="w-3 h-3 inline pb-0.5"></i> ${b.client_phone}</p>
+                            <div class="${statusColor} text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-wider flex items-center gap-1 w-max mt-2">
+                                <i data-lucide="${icon}" class="w-3 h-3"></i> ${statusText}
+                            </div>
                         </div>
                         <div class="text-right">
                             <p class="text-xl font-black text-slate-800">${parseFloat(b.total).toFixed(2)}€</p>
-                            <span class="${statusColor} text-[9px] font-black px-2.5 py-1 rounded-md uppercase tracking-wider flex items-center justify-end gap-1 w-max ml-auto mt-1">
-                                <i data-lucide="${icon}" class="w-3 h-3"></i> ${statusText}
-                            </span>
+                            <p class="text-[9px] font-bold text-slate-400 mt-1">${b.client_phone}</p>
                         </div>
                     </div>
 
                     <div class="pt-3 border-t border-slate-100 flex justify-between items-center pl-2">
                         <div class="flex gap-2">
-                            ${ b.status === 'pending' ? `
-                                <button onclick="updateStatus(${b.id}, 'accepted')" title="Aceptar" class="w-9 h-9 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="check" class="w-5 h-5"></i></button>
-                                <button onclick="updateStatus(${b.id}, 'rejected')" title="Rechazar" class="w-9 h-9 bg-rose-50 text-rose-600 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="x" class="w-5 h-5"></i></button>
-                            ` : `<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest flex items-center">Ya gestionado</span>` }
+                            ${ (b.status === 'pending' && !isExpired) ? `
+                                <button onclick="updateStatus(${b.id}, 'accepted')" class="w-9 h-9 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center active:scale-95 transition-transform border border-emerald-100"><i data-lucide="check" class="w-5 h-5"></i></button>
+                                <button onclick="updateStatus(${b.id}, 'rejected')" class="w-9 h-9 bg-rose-50 text-rose-600 rounded-full flex items-center justify-center active:scale-95 transition-transform border border-rose-100"><i data-lucide="x" class="w-5 h-5"></i></button>
+                            ` : (b.status === 'paid' ? 
+                                `<span class="text-[9px] font-black text-emerald-600 uppercase tracking-widest bg-emerald-50 px-2 py-1 rounded-md">Cobrado</span>` : 
+                                `<span class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Cerrado</span>`) }
                         </div>
                         <div class="flex gap-2">
-                            <button onclick="downloadPDF(${b.id})" title="Descargar PDF" class="w-9 h-9 bg-slate-50 border border-slate-100 text-slate-600 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="download" class="w-4 h-4"></i></button>
-                            <button onclick="deleteBudget(${b.id})" title="Borrar" class="w-9 h-9 bg-slate-50 border border-slate-100 text-rose-500 rounded-full flex items-center justify-center active:scale-95 transition-transform hover:bg-rose-50"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
+                            <button onclick="downloadPDF(${b.id})" class="w-9 h-9 bg-slate-50 border border-slate-200 text-slate-600 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="download" class="w-4 h-4"></i></button>
+                            <button onclick="deleteBudget(${b.id})" class="w-9 h-9 bg-slate-50 border border-slate-200 text-rose-500 rounded-full flex items-center justify-center active:scale-95 transition-transform"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                         </div>
                     </div>
                 </div>