Actualizar calendario.html

calendario.html

@@ -623,9 +623,27 @@
                 if (hasLock) alertBadges += `<span class="bg-slate-800 text-white px-1.5 py-0.5 rounded text-[10px] shadow-sm inline-flex items-center" title="Gestora (Candado)"><i data-lucide="lock" class="w-3 h-3"></i></span>`;
                 if (hasEyes) alertBadges += `<span class="bg-amber-500 text-white px-1.5 py-0.5 rounded animate-pulse text-[10px] shadow-sm inline-flex items-center" title="Requiere Información (Ojos)"><i data-lucide="eye" class="w-3 h-3"></i></span>`;
 
-                return `
+                // 👻 NUEVO: EFECTO FANTASMA PARA FINALIZADOS O ANULADOS
-                <div onclick="openService(${s.id})" class="bg-white p-6 rounded-[2.5rem] border ${hasNewMessage ? 'border-blue-400 ring-2 ring-blue-50' : 'border-slate-200'} shadow-sm active:scale-95 transition-transform flex gap-4 relative overflow-hidden text-left">
+                let opacityClass = '';
+                let watermark = '';
+                
+                if (s.status === 'archived' || stName.includes('finalizado') || stName.includes('terminado') || stName.includes('anulado') || statusObj?.is_final) {
+                    opacityClass = 'opacity-60 grayscale-[50%]'; // Vuelve la tarjeta translúcida y gris
                     
+                    if (stName.includes('anulado')) {
+                        watermark = `<div class="absolute inset-0 z-0 flex items-center justify-center pointer-events-none overflow-hidden">
+                                        <span class="text-4xl font-black text-red-500 opacity-10 -rotate-12 uppercase tracking-widest">Cancelado</span>
+                                     </div>`;
+                    } else {
+                        watermark = `<div class="absolute inset-0 z-0 flex items-center justify-center pointer-events-none overflow-hidden">
+                                        <span class="text-4xl font-black text-emerald-500 opacity-10 -rotate-12 uppercase tracking-widest">Completado</span>
+                                     </div>`;
+                    }
+                }
+
+                return `
+                <div onclick="openService(${s.id})" class="${opacityClass} bg-white p-6 rounded-[2.5rem] border ${hasNewMessage ? 'border-blue-400 ring-2 ring-blue-50' : 'border-slate-200'} shadow-sm active:scale-95 transition-transform flex gap-4 relative overflow-hidden text-left">
+                    ${watermark}
                     ${hasNewMessage ? `
                         <div class="absolute top-2 right-12 flex items-center gap-1 bg-blue-600 text-white text-[8px] font-black px-2 py-1 rounded-full shadow-lg animate-pulse">
                             <i data-lucide="message-square" class="w-2.5 h-2.5"></i> MENSAJE