📊 UX: Added Procurement Lifecycle visualization to match official Mercado Público structure

frontend/components/TenderSearch.tsx

@@ -274,6 +274,27 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                     </div>
                   </div>
                 )}
+
+                {/* Lifecycle Section */}
+                <div>
+                  <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 mb-6 flex items-center gap-2">
+                     <span className="text-cyan">🔄</span> Procurement Lifecycle
+                  </h4>
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    {[
+                      { label: "Preguntas", icon: "❓", status: "Active" },
+                      { label: "Historial", icon: "📜", status: "Available" },
+                      { label: "Apertura", icon: "🔓", status: "Pending" },
+                      { label: "Adjudicación", icon: "🏆", status: "Future" }
+                    ].map((step, i) => (
+                      <div key={i} className="p-4 rounded-2xl bg-white/[0.03] border border-white/5 text-center group hover:bg-white/5 transition-all">
+                        <div className="text-2xl mb-2 group-hover:scale-110 transition">{step.icon}</div>
+                        <div className="text-[10px] font-black uppercase tracking-widest text-slate-300 mb-1">{step.label}</div>
+                        <div className="text-[8px] font-bold text-slate-600 uppercase">{step.status}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
                 
                 {tender.items && tender.items.length > 0 && (
                   <div>