ui: Replace modal with immersive inline detail view to fix nested scrolling

frontend/components/TenderSearch.tsx

@@ -95,249 +95,284 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
 
   return (
     <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
-      {/* Search Bar Section */}
-      <div className="glass-card rounded-3xl p-8">
-        <div className="mb-6 flex justify-between items-start">
-          <div>
-            <h2 className="text-2xl font-bold text-white mb-2">Tender Discovery</h2>
-            <p className="text-slate-400 text-sm">Real-time access to the Chilean public procurement market.</p>
-          </div>
-          {selectedCodes.length > 0 && (
-            <button
-              onClick={handleSyncToAgents}
-              disabled={isSyncingToAgents}
-              className="premium-gradient text-white px-6 py-3 rounded-2xl font-black text-xs tracking-widest shadow-xl shadow-purple-500/40 animate-bounce transition-all active:scale-95 disabled:opacity-50"
-            >
-              {isSyncingToAgents ? "📥 INGESTING DOCUMENTS..." : `⚡ ANALYZE ${selectedCodes.length} SELECTED`}
-            </button>
-          )}
-        </div>
-        
-        <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-4 gap-6">
-          <div className="space-y-2">
-            <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Keyword</label>
-            <input
-              type="text"
-              placeholder="e.g. Software, Cloud..."
-              className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all"
-              value={keyword}
-              onChange={(e) => setKeyword(e.target.value)}
-            />
+      {!selectedTenderForModal ? (
+        <>
+          {/* Search Bar Section */}
+          <div className="glass-card rounded-3xl p-8">
+            <div className="mb-6 flex justify-between items-start">
+              <div>
+                <h2 className="text-2xl font-bold text-white mb-2">Tender Discovery</h2>
+                <p className="text-slate-400 text-sm">Real-time access to the Chilean public procurement market.</p>
+              </div>
+              {selectedCodes.length > 0 && (
+                <button
+                  onClick={handleSyncToAgents}
+                  disabled={isSyncingToAgents}
+                  className="premium-gradient text-white px-6 py-3 rounded-2xl font-black text-xs tracking-widest shadow-xl shadow-purple-500/40 animate-bounce transition-all active:scale-95 disabled:opacity-50"
+                >
+                  {isSyncingToAgents ? "📥 INGESTING DOCUMENTS..." : `⚡ ANALYZE ${selectedCodes.length} SELECTED`}
+                </button>
+              )}
+            </div>
+            
+            <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-4 gap-6">
+              <div className="space-y-2">
+                <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Keyword</label>
+                <input
+                  type="text"
+                  placeholder="e.g. Software, Cloud..."
+                  className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all"
+                  value={keyword}
+                  onChange={(e) => setKeyword(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Buyer Code</label>
+                <input
+                  type="text"
+                  placeholder="e.g. 6945"
+                  className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all"
+                  value={buyerCode}
+                  onChange={(e) => setBuyerCode(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Date Limit</label>
+                <input
+                  type="date"
+                  className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all [color-scheme:dark]"
+                  value={date}
+                  onChange={(e) => setDate(e.target.value)}
+                />
+              </div>
+              <div className="flex items-end">
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full premium-gradient hover:opacity-90 text-white font-bold py-3.5 rounded-xl transition-all shadow-lg shadow-purple-500/20 active:scale-[0.98] disabled:opacity-50"
+                >
+                  {isLoading ? "Searching..." : "Fetch Opportunities"}
+                </button>
+              </div>
+            </form>
           </div>
-          <div className="space-y-2">
-            <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Buyer Code</label>
-            <input
-              type="text"
-              placeholder="e.g. 6945"
-              className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all"
-              value={buyerCode}
-              onChange={(e) => setBuyerCode(e.target.value)}
-            />
+
+          {/* Results Controls */}
+          <div className="flex items-center justify-between px-2">
+            <div className="flex items-center gap-3">
+              <h3 className="text-lg font-bold text-white">
+                {showOnlyFollowed ? "Saved Opportunities" : "Market Results"}
+              </h3>
+              <span className="text-[10px] bg-white/5 text-slate-400 px-2 py-0.5 rounded-full border border-white/5">
+                {filteredTenders.length} items
+              </span>
+            </div>
+            {followedCodes.length > 0 && (
+              <button
+                onClick={() => setShowOnlyFollowed(!showOnlyFollowed)}
+                className={`flex items-center gap-2 rounded-xl px-4 py-2 text-xs font-bold transition-all border ${
+                  showOnlyFollowed 
+                    ? "bg-purple-500/20 border-purple-500/40 text-purple-300" 
+                    : "bg-white/5 border-white/10 text-slate-400 hover:border-white/20"
+                }`}
+              >
+                {showOnlyFollowed ? "★ Viewing Portfolio" : "☆ Show Favorites Only"}
+              </button>
+            )}
           </div>
-          <div className="space-y-2">
-            <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Date Limit</label>
-            <input
-              type="date"
-              className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all [color-scheme:dark]"
-              value={date}
-              onChange={(e) => setDate(e.target.value)}
-            />
+
+          {/* Results List */}
+          <div className="space-y-4">
+            {filteredTenders.length === 0 ? (
+              <div className="flex flex-col items-center justify-center rounded-3xl border border-white/5 bg-white/[0.02] p-20 text-center">
+                <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center text-3xl mb-4 opacity-50">
+                  {showOnlyFollowed ? "🌟" : "📡"}
+                </div>
+                <p className="text-slate-400 max-w-xs mx-auto text-sm">
+                  {showOnlyFollowed 
+                    ? "No followed opportunities found." 
+                    : "Enter keywords above to fetch real-time data."}
+                </p>
+              </div>
+            ) : (
+              <div className="glass-card rounded-3xl overflow-hidden shadow-2xl border border-white/5">
+                <div className="overflow-x-auto custom-scrollbar">
+                  <table className="w-full text-left text-sm table-fixed border-collapse">
+                    <thead className="bg-white/5 text-slate-500 uppercase text-[10px] tracking-widest font-bold border-b border-white/5">
+                      <tr>
+                        <th className="px-4 py-5 w-[100px]">{t.idSelect}</th>
+                        <th className="px-4 py-5 w-[250px]">{t.opportunity}</th>
+                        <th className="px-4 py-5 w-[180px]">{t.buyer}</th>
+                        <th className="px-4 py-5 text-center w-[100px]">{t.status}</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-white/5">
+                      {filteredTenders.map((tender) => (
+                        <tr 
+                          key={tender.code}
+                          className={`hover:bg-white/[0.04] cursor-pointer transition-colors group ${selectedCodes.includes(tender.code) ? 'bg-purple-500/5' : ''}`}
+                          onClick={() => setSelectedTenderForModal(tender)}
+                        >
+                          <td className="px-4 py-5">
+                            <div className="flex items-center gap-2">
+                              <input 
+                                type="checkbox"
+                                checked={selectedCodes.includes(tender.code)}
+                                onChange={(e) => {
+                                  e.stopPropagation();
+                                  toggleSelect(tender.code);
+                                }}
+                                className="w-3.5 h-3.5 rounded border-white/10 bg-white/5 text-purple-500 focus:ring-purple-500/40"
+                              />
+                              <button 
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  toggleFollow(tender.code);
+                                }}
+                                className={`text-base transition-all hover:scale-125 ${followedCodes.includes(tender.code) ? 'text-purple-400 drop-shadow-[0_0_8px_rgba(168,85,247,0.4)]' : 'text-slate-600 hover:text-slate-400'}`}
+                              >
+                                {followedCodes.includes(tender.code) ? "★" : "☆"}
+                              </button>
+                              <span className="font-mono text-purple-400 text-[9px] truncate">{tender.code}</span>
+                            </div>
+                          </td>
+                          <td className="px-4 py-5">
+                            <div className="font-semibold text-white group-hover:text-purple-400 transition-colors truncate text-xs">{tender.name}</div>
+                            <div className="flex items-center gap-2 mt-1">
+                              <span className="text-[9px] text-slate-500 truncate">{tender.region || "Nacional"}</span>
+                              <span className="text-[8px] px-1.5 py-0.5 rounded-md bg-white/5 text-slate-600 border border-white/5 uppercase tracking-tighter">{tender.sector}</span>
+                            </div>
+                          </td>
+                          <td className="px-4 py-5 text-slate-400 text-[111px] truncate">{tender.buyer}</td>
+                          <td className="px-4 py-5 text-center">
+                            <span className={`inline-block rounded-full px-2 py-0.5 text-[9px] font-bold ${
+                              tender.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-slate-800/50 text-slate-500'
+                            }`}>
+                              {tender.status}
+                            </span>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
           </div>
-          <div className="flex items-end">
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full premium-gradient hover:opacity-90 text-white font-bold py-3.5 rounded-xl transition-all shadow-lg shadow-purple-500/20 active:scale-[0.98] disabled:opacity-50"
+        </>
+      ) : (
+        /* Immersive Detail View (Replaces List) */
+        <div className="animate-in slide-in-from-right-8 duration-500">
+          <div className="flex items-center justify-between mb-8">
+            <button 
+              onClick={() => setSelectedTenderForModal(null)}
+              className="flex items-center gap-2 text-slate-400 hover:text-white transition group"
             >
-              {isLoading ? "Searching..." : "Fetch Opportunities"}
+              <span className="text-xl group-hover:-translate-x-1 transition-transform">←</span>
+              <span className="text-sm font-bold uppercase tracking-widest">{lang === 'en' ? 'Back to opportunities' : 'Volver a licitaciones'}</span>
             </button>
-          </div>
-        </form>
-      </div>
-
-      {/* Results Controls */}
-      <div className="flex items-center justify-between px-2">
-        <div className="flex items-center gap-3">
-          <h3 className="text-lg font-bold text-white">
-            {showOnlyFollowed ? "Saved Opportunities" : "Market Results"}
-          </h3>
-          <span className="text-[10px] bg-white/5 text-slate-400 px-2 py-0.5 rounded-full border border-white/5">
-            {filteredTenders.length} items
-          </span>
-        </div>
-        {followedCodes.length > 0 && (
-          <button
-            onClick={() => setShowOnlyFollowed(!showOnlyFollowed)}
-            className={`flex items-center gap-2 rounded-xl px-4 py-2 text-xs font-bold transition-all border ${
-              showOnlyFollowed 
-                ? "bg-purple-500/20 border-purple-500/40 text-purple-300" 
-                : "bg-white/5 border-white/10 text-slate-400 hover:border-white/20"
-            }`}
-          >
-            {showOnlyFollowed ? "★ Viewing Portfolio" : "☆ Show Favorites Only"}
-          </button>
-        )}
-      </div>
-
-      {/* Results List */}
-      <div className="space-y-4">
-        {filteredTenders.length === 0 ? (
-          <div className="flex flex-col items-center justify-center rounded-3xl border border-white/5 bg-white/[0.02] p-20 text-center">
-            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center text-3xl mb-4 opacity-50">
-              {showOnlyFollowed ? "🌟" : "📡"}
-            </div>
-            <p className="text-slate-400 max-w-xs mx-auto text-sm">
-              {showOnlyFollowed 
-                ? "No followed opportunities found." 
-                : "Enter keywords above to fetch real-time data."}
-            </p>
-          </div>
-        ) : (
-          <div className="glass-card rounded-3xl overflow-hidden shadow-2xl border border-white/5">
-            <div className="overflow-x-auto custom-scrollbar">
-              <table className="w-full text-left text-sm table-fixed border-collapse">
-                <thead className="bg-white/5 text-slate-500 uppercase text-[10px] tracking-widest font-bold border-b border-white/5">
-                  <tr>
-                    <th className="px-4 py-5 w-[100px]">{t.idSelect}</th>
-                    <th className="px-4 py-5 w-[250px]">{t.opportunity}</th>
-                    <th className="px-4 py-5 w-[180px]">{t.buyer}</th>
-                    <th className="px-4 py-5 text-center w-[100px]">{t.status}</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-white/5">
-                  {filteredTenders.map((tender) => (
-                    <tr 
-                      key={tender.code}
-                      className={`hover:bg-white/[0.04] cursor-pointer transition-colors group ${selectedCodes.includes(tender.code) ? 'bg-purple-500/5' : ''}`}
-                      onClick={() => setSelectedTenderForModal(tender)}
-                    >
-                      <td className="px-4 py-5">
-                        <div className="flex items-center gap-2">
-                          <input 
-                            type="checkbox"
-                            checked={selectedCodes.includes(tender.code)}
-                            onChange={(e) => {
-                              e.stopPropagation();
-                              toggleSelect(tender.code);
-                            }}
-                            className="w-3.5 h-3.5 rounded border-white/10 bg-white/5 text-purple-500 focus:ring-purple-500/40"
-                          />
-                          <button 
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              toggleFollow(tender.code);
-                            }}
-                            className={`text-base transition-all hover:scale-125 ${followedCodes.includes(tender.code) ? 'text-purple-400 drop-shadow-[0_0_8px_rgba(168,85,247,0.4)]' : 'text-slate-600 hover:text-slate-400'}`}
-                          >
-                            {followedCodes.includes(tender.code) ? "★" : "☆"}
-                          </button>
-                          <span className="font-mono text-purple-400 text-[9px] truncate">{tender.code}</span>
-                        </div>
-                      </td>
-                      <td className="px-4 py-5">
-                        <div className="font-semibold text-white group-hover:text-purple-400 transition-colors truncate text-xs">{tender.name}</div>
-                        <div className="flex items-center gap-2 mt-1">
-                          <span className="text-[9px] text-slate-500 truncate">{tender.region || "Nacional"}</span>
-                          <span className="text-[8px] px-1.5 py-0.5 rounded-md bg-white/5 text-slate-600 border border-white/5 uppercase tracking-tighter">{tender.sector}</span>
-                        </div>
-                      </td>
-                      <td className="px-4 py-5 text-slate-400 text-[11px] truncate">{tender.buyer}</td>
-                      <td className="px-4 py-5 text-center">
-                        <span className={`inline-block rounded-full px-2 py-0.5 text-[9px] font-bold ${
-                          tender.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-slate-800/50 text-slate-500'
-                        }`}>
-                          {tender.status}
-                        </span>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+            <div className="flex gap-4">
+              <button 
+                onClick={() => toggleFollow(selectedTenderForModal.code)}
+                className={`px-4 py-2 rounded-xl border font-bold text-xs transition-all ${
+                  followedCodes.includes(selectedTenderForModal.code) 
+                    ? "bg-purple-500/20 border-purple-500/40 text-purple-300"
+                    : "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10"
+                }`}
+              >
+                {followedCodes.includes(selectedTenderForModal.code) ? "★ Saved" : "☆ Save to Portfolio"}
+              </button>
             </div>
           </div>
-        )}
-      </div>
 
-      {/* Details Modal */}
-      {selectedTenderForModal && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-10">
-          <div className="absolute inset-0 bg-slate-950/80 backdrop-blur-md" onClick={() => setSelectedTenderForModal(null)} />
-          <div className="relative w-full max-w-4xl max-h-[90vh] bg-slate-900 border border-white/10 rounded-3xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-300">
-            {/* Modal Header */}
-            <div className="p-6 md:p-8 border-b border-white/10 flex justify-between items-start">
-              <div>
-                <div className="flex items-center gap-3 mb-2">
-                  <span className="text-xs font-mono text-purple-400 bg-purple-400/10 px-2 py-0.5 rounded-md">{selectedTenderForModal.code}</span>
-                  <span className={`px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-tighter ${
-                    selectedTenderForModal.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400' : 'bg-slate-800 text-slate-500'
+          <div className="glass-card rounded-[2.5rem] overflow-hidden border border-white/5 bg-slate-900/40 backdrop-blur-xl shadow-2xl">
+            {/* Header Section */}
+            <div className="p-10 md:p-14 border-b border-white/5 relative overflow-hidden">
+              <div className="absolute top-0 right-0 w-64 h-64 bg-purple-500/10 blur-[100px] -translate-y-1/2 translate-x-1/2" />
+              <div className="relative z-10">
+                <div className="flex items-center gap-3 mb-6">
+                  <span className="text-sm font-mono text-purple-400 bg-purple-400/10 px-3 py-1 rounded-lg border border-purple-400/20">{selectedTenderForModal.code}</span>
+                  <span className={`px-3 py-1 rounded-lg text-xs font-black uppercase tracking-widest ${
+                    selectedTenderForModal.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-slate-800 text-slate-500'
                   }`}>
                     {selectedTenderForModal.status}
                   </span>
                 </div>
-                <h3 className="text-2xl font-bold text-white">{selectedTenderForModal.name}</h3>
-                <p className="text-slate-400 text-sm mt-1">{selectedTenderForModal.buyer}</p>
+                <h3 className="text-4xl md:text-5xl font-black text-white leading-tight tracking-tight mb-4">{selectedTenderForModal.name}</h3>
+                <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-lg">🏢</div>
+                    <span className="text-slate-400 font-medium">{selectedTenderForModal.buyer}</span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-lg">📍</div>
+                    <span className="text-slate-400 font-medium">{selectedTenderForModal.region || "Nacional"}</span>
+                  </div>
+                </div>
               </div>
-              <button 
-                onClick={() => setSelectedTenderForModal(null)}
-                className="p-2 bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white rounded-xl transition-all"
-              >
-                ✕
-              </button>
             </div>
 
-            {/* Modal Content */}
-            <div className="flex-1 overflow-y-auto p-6 md:p-8 custom-scrollbar">
-              <div className="grid gap-10 md:grid-cols-3">
-                {/* Left Column: Main Info */}
-                <div className="md:col-span-2 space-y-8">
-                  <div>
-                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-4 flex items-center gap-2">
-                      <span className="w-4 h-[1px] bg-slate-700" />
-                      Project Description
+            {/* Content Section */}
+            <div className="p-10 md:p-14">
+              <div className="grid gap-16 lg:grid-cols-3">
+                {/* Main Column */}
+                <div className="lg:col-span-2 space-y-12">
+                  <section>
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 mb-6 flex items-center gap-3">
+                      <span className="w-8 h-[1px] bg-slate-700" />
+                      Project Scope & Description
                     </h4>
-                    <p className="text-slate-300 leading-relaxed text-sm bg-slate-800/50 p-6 rounded-2xl border border-white/5 whitespace-pre-wrap">
+                    <div className="text-slate-300 leading-relaxed text-lg bg-white/[0.02] p-8 rounded-[2rem] border border-white/5 whitespace-pre-wrap font-light">
                       {selectedTenderForModal.description || "No detailed description provided."}
-                    </p>
-                  </div>
+                    </div>
+                  </section>
 
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="p-5 rounded-2xl bg-white/[0.03] border border-white/5">
-                      <div className="text-[9px] uppercase text-slate-500 font-black mb-1">Estimated Amount</div>
-                      <div className="text-sm text-white font-bold">
+                  <div className="grid grid-cols-2 gap-6">
+                    <div className="p-8 rounded-3xl bg-white/[0.03] border border-white/5 group hover:bg-white/[0.05] transition-colors">
+                      <div className="text-[10px] uppercase text-slate-500 font-black mb-2 tracking-widest">Estimated Investment</div>
+                      <div className="text-2xl text-white font-bold tracking-tight">
                         {selectedTenderForModal.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP" }).format(selectedTenderForModal.estimated_amount) : "Not Disclosed"}
                       </div>
                     </div>
-                    <div className="p-5 rounded-2xl bg-white/[0.03] border border-white/5">
-                      <div className="text-[9px] uppercase text-slate-500 font-black mb-1">Market Sector</div>
-                      <div className="text-sm text-white font-bold">{selectedTenderForModal.sector || "General"}</div>
+                    <div className="p-8 rounded-3xl bg-white/[0.03] border border-white/5 group hover:bg-white/[0.05] transition-colors">
+                      <div className="text-[10px] uppercase text-slate-500 font-black mb-2 tracking-widest">Industry Classification</div>
+                      <div className="text-2xl text-white font-bold tracking-tight">{selectedTenderForModal.sector || "General Procurement"}</div>
                     </div>
                   </div>
                 </div>
 
-                {/* Right Column: Meta & Links */}
-                <div className="space-y-8">
-                  <div className="p-6 rounded-2xl bg-purple-500/5 border border-purple-500/10">
-                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-purple-400 mb-4">Deadline</h4>
-                    <div className="text-xl font-mono text-white mb-1">
+                {/* Sidebar Column */}
+                <div className="space-y-12">
+                  <div className="p-10 rounded-[2rem] bg-purple-600/10 border border-purple-500/20 shadow-2xl shadow-purple-500/5 relative overflow-hidden group">
+                    <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/20 blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity" />
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-purple-400 mb-6">Submission Deadline</h4>
+                    <div className="text-4xl font-black text-white mb-2 font-mono">
                       {selectedTenderForModal.closing_date ? new Date(selectedTenderForModal.closing_date).toLocaleDateString() : "---"}
                     </div>
-                    <p className="text-[10px] text-purple-400/60 uppercase">Final day for submission</p>
+                    <p className="text-xs text-purple-400/60 font-bold uppercase tracking-tighter">Final Window for Proposal Submission</p>
                   </div>
 
                   <div>
-                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-4">Official Resources</h4>
-                    <div className="space-y-3">
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 mb-6">Official Documentation</h4>
+                    <div className="grid gap-3">
                       {selectedTenderForModal.attachments?.map((att, i) => (
-                        <a key={i} href={att.url} target="_blank" className="flex items-center justify-between p-4 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/5 transition-all group/file">
-                          <div className="flex items-center gap-3">
-                            <span className="text-xl">{att.name.endsWith('.pdf') ? "📕" : "📘"}</span>
-                            <span className="text-xs font-medium text-slate-300 truncate max-w-[120px]">{att.name}</span>
+                        <a key={i} href={att.url} target="_blank" className="flex items-center justify-between p-5 rounded-2xl bg-white/[0.03] hover:bg-white/[0.08] border border-white/5 transition-all group/file">
+                          <div className="flex items-center gap-4">
+                            <div className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center text-2xl">
+                              {att.name.endsWith('.pdf') ? "📕" : "📘"}
+                            </div>
+                            <div className="flex flex-col">
+                              <span className="text-sm font-bold text-slate-200 group-hover/file:text-white transition-colors truncate max-w-[150px]">{att.name}</span>
+                              <span className="text-[9px] text-slate-600 uppercase font-black">Official Basis</span>
+                            </div>
                           </div>
-                          <span className="text-[8px] font-black text-purple-400 opacity-0 group-hover/file:opacity-100 uppercase transition-all tracking-tighter">Download</span>
+                          <span className="text-xl text-slate-600 group-hover/file:text-purple-400 transition-colors">↓</span>
                         </a>
                       ))}
                       {!selectedTenderForModal.attachments?.length && (
-                        <p className="text-[10px] text-slate-600 italic">No attachments found.</p>
+                        <div className="p-8 text-center rounded-2xl border border-white/5 bg-white/[0.01]">
+                          <p className="text-xs text-slate-600 italic font-medium">No external files registered.</p>
+                        </div>
                       )}
                     </div>
                   </div>
@@ -345,31 +380,40 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                   <a 
                     href={`https://www.mercadopublico.cl/fichaLicitacion.html?code=${selectedTenderForModal.code}`}
                     target="_blank"
-                    className="flex items-center justify-center gap-2 w-full p-4 rounded-xl bg-white/5 border border-white/10 text-slate-300 text-xs font-bold hover:bg-white/10 transition"
+                    className="flex items-center justify-center gap-3 w-full p-5 rounded-2xl bg-white/5 border border-white/10 text-white text-sm font-black uppercase tracking-widest hover:bg-white/10 transition-all shadow-xl active:scale-[0.98]"
                   >
-                    Open official portal ↗
+                    Mercado Público Portal ↗
                   </a>
                 </div>
               </div>
             </div>
 
-            {/* Modal Footer */}
-            <div className="p-6 bg-slate-950/50 border-t border-white/10 flex justify-end gap-4">
-              <button 
-                onClick={() => setSelectedTenderForModal(null)}
-                className="px-6 py-3 text-sm font-bold text-slate-400 hover:text-white transition"
-              >
-                Cancel
-              </button>
-              <button 
-                onClick={() => {
-                  onAnalyze(selectedTenderForModal);
-                  setSelectedTenderForModal(null);
-                }}
-                className="premium-gradient text-white px-8 py-3 rounded-xl font-bold text-sm shadow-xl shadow-purple-500/20 active:scale-95 transition-all"
-              >
-                {t.analyze}
-              </button>
+            {/* Action Footer */}
+            <div className="p-10 md:p-14 bg-slate-950/40 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-8">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 rounded-full bg-cyan/10 border border-cyan/20 flex items-center justify-center text-cyan">🤖</div>
+                <div>
+                  <p className="text-white font-bold text-sm">Ready for Agent Analysis</p>
+                  <p className="text-slate-500 text-xs">Our multi-agent system will evaluate compliance and technical fit.</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-6 w-full md:w-auto">
+                <button 
+                  onClick={() => setSelectedTenderForModal(null)}
+                  className="flex-1 md:flex-none px-8 py-4 text-xs font-black uppercase tracking-widest text-slate-500 hover:text-white transition"
+                >
+                  {lang === 'en' ? 'Close View' : 'Cerrar Vista'}
+                </button>
+                <button 
+                  onClick={() => {
+                    onAnalyze(selectedTenderForModal);
+                    setSelectedTenderForModal(null);
+                  }}
+                  className="flex-1 md:flex-none premium-gradient text-white px-10 py-5 rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-2xl shadow-purple-500/30 hover:scale-105 active:scale-95 transition-all"
+                >
+                  {t.analyze}
+                </button>
+              </div>
             </div>
           </div>
         </div>