feat: restore premium search UI and advanced filters with correct syntax

frontend/components/TenderSearch.tsx

@@ -141,6 +141,7 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
     <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
       {!selectedTenderForModal ? (
         <>
+          {/* Header Section */}
           <div className={`glass-card rounded-3xl p-8 mb-4 border transition-all duration-500 ${forceShowFollowed ? 'border-purple-500/30 bg-purple-500/5 shadow-[0_0_50px_rgba(168,85,247,0.1)]' : 'border-white/10'}`}>
             <div className="mb-6 flex justify-between items-start">
               <div>
@@ -169,178 +170,136 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
             </div>
             
             {!forceShowFollowed && (
-              <form onSubmit={handleSearch} className="relative z-10 space-y-4 animate-in slide-in-from-top-4 duration-500">
-                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-                  <div className="space-y-2 xl:col-span-2">
-                    <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Keyword / Tender Code</label>
+              <form onSubmit={handleSearch} className="relative z-10 space-y-6">
+                <div className="flex flex-col md:flex-row gap-4">
+                  <div className="relative flex-1 group">
+                    <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-500">
+                      <span className="text-xl">🔍</span>
+                    </div>
                     <input
                       type="text"
-                      placeholder="e.g. Software or 1509-5-L114"
-                      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"
+                      placeholder={isAgileMode ? "Product keyword for Compra Ágil..." : "Search by name, ID, buyer, or description..."}
+                      className="w-full bg-slate-900/60 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all backdrop-blur-sm"
                       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 name</label>
-                    <input
-                      type="text"
-                      placeholder="e.g. Servicio de Salud"
-                      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"
-                      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">Provider Code</label>
-                    <input
-                      type="text"
-                      placeholder="e.g. 17793"
-                      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"
-                      value={providerCode}
-                      onChange={(e) => setProviderCode(e.target.value)}
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Org 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 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all"
-                      value={orgCode}
-                      onChange={(e) => setOrgCode(e.target.value)}
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Status</label>
-                    <select
-                      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"
-                      value={status}
-                      onChange={(e) => setStatus(e.target.value)}
-                    >
-                      <option value="">Any state</option>
-                      <option value="activas">Activas (Today)</option>
-                      <option value="5">Publicada (5)</option>
-                      <option value="6">Cerrada (6)</option>
-                      <option value="7">Desierta (7)</option>
-                      <option value="8">Adjudicada (8)</option>
-                    </select>
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Tender Type</label>
-                    <select
-                      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"
-                      value={typeCode}
-                      onChange={(e) => setTypeCode(e.target.value)}
-                    >
-                      <option value="">Any type</option>
-                      <option value="L1">L1 - < 100 UTM</option>
-                      <option value="LE">LE - 100-1000 UTM</option>
-                      <option value="LP">LP - > 1000 UTM</option>
-                      <option value="LS">LS - Servicios Personales</option>
-                      <option value="A1">A1 - Privada por Desierta</option>
-                    </select>
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Date</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 [color-scheme:dark]"
-                      value={date}
-                      onChange={(e) => setDate(e.target.value)}
-                    />
-                  </div>
-                </div>
-                <div className="rounded-3xl bg-slate-900/70 border border-white/10 p-4 text-slate-400 text-xs flex justify-between items-center">
-                  <div>
-                    <span className="font-bold text-slate-200">Tip:</span> Use Tender Code for exact search or filters for direct live data.
+
+                  <div className="flex gap-2">
+                     <button
+                        type="button"
+                        onClick={() => setShowAdvanced(!showAdvanced)}
+                        className={`px-6 py-4 rounded-2xl border transition-all flex items-center gap-2 font-bold text-sm ${showAdvanced ? 'bg-purple-500/20 border-purple-500/50 text-purple-300' : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10'}`}
+                     >
+                        <span>⚙️</span> Advanced
+                     </button>
+
+                     <button
+                        type="submit"
+                        disabled={isLoading}
+                        className="px-8 py-4 bg-purple-600 hover:bg-purple-500 disabled:bg-purple-800 text-white rounded-2xl font-bold transition-all shadow-lg active:scale-95 flex items-center gap-3"
+                     >
+                        {isLoading && <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />}
+                        {searchButtonLabel}
+                     </button>
                   </div>
-                  <button 
-                    type="button"
-                    onClick={() => {
-                      setKeyword(""); setBuyerCode(""); setProviderCode(""); setOrgCode(""); setStatus(""); setDate(""); setTypeCode("");
-                    }}
-                    className="text-[10px] font-bold uppercase text-slate-500 hover:text-white transition"
-                  >
-                    Clear All
-                  </button>
                 </div>
-                <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-                  <div className="flex flex-col gap-2">
-                    <button
-                      type="button"
-                      disabled={isLoading}
-                      onClick={handleSearch}
-                      className="w-full sm:w-auto premium-gradient text-white font-bold py-3.5 rounded-xl px-8 transition-all"
-                    >
-                      {searchButtonLabel}
-                    </button>
+
+                {showAdvanced && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6 glass-card rounded-3xl bg-white/[0.02] border border-white/5 animate-in slide-in-from-top-4 duration-300">
+                    <div className="space-y-2">
+                      <label className="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Date</label>
+                      <input type="date" className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-white text-sm focus:ring-1 focus:ring-purple-500/50 [color-scheme:dark]" value={date} onChange={(e) => setDate(e.target.value)} />
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Organization ID</label>
+                      <input type="text" placeholder="e.g. 6945" className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-white text-sm focus:ring-1 focus:ring-purple-500/50" value={orgCode} onChange={(e) => setOrgCode(e.target.value)} />
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Status</label>
+                      <select className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-white text-sm focus:ring-1 focus:ring-purple-500/50" value={status} onChange={(e) => setStatus(e.target.value)}>
+                        <option value="">All Statuses</option>
+                        <option value="activas">Active (Publicada)</option>
+                        <option value="5">Publicada</option>
+                        <option value="6">Cerrada</option>
+                        <option value="7">Desierta</option>
+                        <option value="8">Adjudicada</option>
+                      </select>
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-[10px] font-bold uppercase tracking-widest text-slate-500 ml-1">Tender Type</label>
+                      <select className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-white text-sm focus:ring-1 focus:ring-purple-500/50" value={typeCode} onChange={(e) => setTypeCode(e.target.value)}>
+                        <option value="">All Types</option>
+                        <option value="L1">L1 - < 100 UTM</option>
+                        <option value="LE">LE - 100-1000 UTM</option>
+                        <option value="LP">LP - > 1000 UTM</option>
+                        <option value="LS">LS - Servicios Personales</option>
+                        <option value="D1">D1 - Trato Directo</option>
+                      </select>
+                    </div>
+                    
+                    <div className="lg:col-span-4 flex justify-between items-center pt-2">
+                       <button type="button" onClick={() => setIsAgileMode(!isAgileMode)} className={`px-4 py-2 rounded-xl border text-[10px] font-bold uppercase transition-all ${isAgileMode ? 'bg-cyan/20 border-cyan/40 text-cyan animate-pulse' : 'bg-white/5 border-white/10 text-slate-500'}`}>🚀 Compra Ágil Mode</button>
+                       <button type="button" onClick={() => { setKeyword(""); setBuyerCode(""); setProviderCode(""); setOrgCode(""); setStatus(""); setDate(""); setTypeCode(""); }} className="text-[10px] font-bold uppercase text-slate-500 hover:text-white transition">Clear Filters</button>
+                    </div>
                   </div>
-                  <button
-                    type="button"
-                    onClick={() => setIsAgileMode(!isAgileMode)}
-                    className={`px-4 py-3.5 rounded-xl border font-bold text-[10px] uppercase tracking-widest transition-all ${isAgileMode ? "bg-cyan/20 border-cyan/40 text-cyan animate-pulse" : "bg-white/5 border-white/10 text-slate-500"}`}
-                  >
-                    🚀 Agile
-                  </button>
-                </div>
+                )}
               </form>
             )}
           </div>
 
-          <div className="flex flex-col gap-3 px-2 md:flex-row md:items-center md:justify-between">
-            <h3 className="text-lg font-bold text-white">
-              {showOnlyFollowed ? "Portfolio" : "Market Results"} ({filteredTenders.length})
-            </h3>
-            {followedCodes.length > 0 && (
-              <button
-                onClick={() => setShowOnlyFollowed(!showOnlyFollowed)}
-                className={`rounded-xl px-4 py-2 text-xs font-bold border transition-all ${showOnlyFollowed ? "bg-purple-500/20 border-purple-500/40 text-purple-300" : "bg-white/5 border-white/10 text-slate-400"}`}
-              >
-                {showOnlyFollowed ? "★ Viewing Portfolio" : "☆ Show Favorites"}
-              </button>
-            )}
-          </div>
-
+          {/* Results List */}
           <div className="space-y-4">
+            <div className="flex items-center justify-between px-2">
+              <h3 className="text-lg font-bold text-white">{showOnlyFollowed ? "Portfolio" : "Market Results"} ({filteredTenders.length})</h3>
+              {followedCodes.length > 0 && (
+                <button onClick={() => setShowOnlyFollowed(!showOnlyFollowed)} className={`rounded-xl px-4 py-2 text-xs font-bold border transition-all ${showOnlyFollowed ? "bg-purple-500/20 border-purple-500/40 text-purple-300" : "bg-white/5 border-white/10 text-slate-400"}`}>
+                  {showOnlyFollowed ? "★ Viewing Portfolio" : "☆ Show Favorites"}
+                </button>
+              )}
+            </div>
+
             {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">
-                <p className="text-slate-400 text-sm">No opportunities found.</p>
+              <div className="flex flex-col items-center justify-center rounded-3xl border border-white/5 bg-white/[0.02] p-20 text-center text-slate-400">
+                <div className="text-4xl mb-4 opacity-50">{showOnlyFollowed ? "🌟" : "📡"}</div>
+                <p>No opportunities found.</p>
               </div>
             ) : (
-              <div className="glass-card rounded-3xl overflow-hidden border border-white/5">
+              <div className="glass-card rounded-3xl overflow-hidden border border-white/5 shadow-2xl">
                 <div className="overflow-x-auto custom-scrollbar">
                   <table className="w-full text-left text-sm table-fixed">
                     <thead className="bg-white/5 text-slate-500 uppercase text-[10px] font-bold border-b border-white/5">
                       <tr>
-                        <th className="px-4 py-5 w-[100px]">
-                          <input type="checkbox" checked={selectedCodes.length === filteredTenders.length} onChange={toggleSelectAll} className="mr-2" />
-                          ID
+                        <th className="px-6 py-5 w-[120px]">
+                           <div className="flex items-center gap-3">
+                              <input type="checkbox" checked={selectedCodes.length === filteredTenders.length && filteredTenders.length > 0} onChange={toggleSelectAll} className="w-4 h-4 rounded border-white/10 bg-white/5 text-purple-500" />
+                              ID
+                           </div>
                         </th>
-                        <th className="px-4 py-5 w-[250px]">Opportunity</th>
-                        <th className="px-4 py-5 w-[180px]">Buyer</th>
-                        <th className="px-4 py-5 text-center w-[100px]">Status</th>
+                        <th className="px-6 py-5 w-[300px]">Opportunity</th>
+                        <th className="px-6 py-5 w-[200px]">Buyer</th>
+                        <th className="px-6 py-5 text-center w-[120px]">Status</th>
                       </tr>
                     </thead>
                     <tbody className="divide-y divide-white/5">
                       {filteredTenders.map((tender) => (
                         <tr key={tender.code} className="hover:bg-white/[0.04] transition-colors group">
-                          <td className="px-4 py-5">
-                            <div className="flex items-center gap-2">
-                              <input type="checkbox" checked={selectedCodes.includes(tender.code)} onChange={() => toggleSelect(tender.code)} />
-                              <button onClick={() => toggleFollow(tender)} className={followedCodes.includes(tender.code) ? 'text-purple-400' : 'text-slate-600'}>
+                          <td className="px-6 py-5">
+                            <div className="flex items-center gap-3">
+                              <input type="checkbox" checked={selectedCodes.includes(tender.code)} onChange={() => toggleSelect(tender.code)} className="w-4 h-4 rounded border-white/10 bg-white/5 text-purple-500" />
+                              <button onClick={() => toggleFollow(tender)} className={`text-lg transition-all ${followedCodes.includes(tender.code) ? 'text-purple-400' : '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>
+                              <span className="font-mono text-purple-400 text-[10px] truncate">{tender.code}</span>
                             </div>
                           </td>
-                          <td className="px-4 py-5 cursor-pointer" onClick={() => setSelectedTenderForModal(tender)}>
-                            <div className="font-semibold text-white group-hover:text-purple-400 transition-colors truncate text-xs">{tender.name}</div>
-                            <div className="text-[9px] text-slate-500">{tender.region || "Nacional"}</div>
+                          <td className="px-6 py-5 cursor-pointer group-hover:text-purple-400 transition-colors" onClick={() => setSelectedTenderForModal(tender)}>
+                            <div className="font-bold text-white group-hover:text-purple-400 truncate text-xs">{tender.name}</div>
+                            <div className="text-[10px] text-slate-500 mt-1">{tender.region || "Nacional"}</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' : 'bg-slate-800 text-slate-500'}`}>
+                          <td className="px-6 py-5 text-slate-400 text-[11px] truncate">{tender.buyer}</td>
+                          <td className="px-6 py-5 text-center">
+                            <span className={`inline-block rounded-full px-3 py-1 text-[9px] font-black uppercase tracking-widest ${tender.status.toLowerCase().includes('publicada') ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-slate-800 text-slate-500'}`}>
                               {tender.status}
                             </span>
                           </td>
@@ -362,58 +321,69 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                 <span className="text-sm font-bold uppercase tracking-widest">Back to search</span>
               </button>
               <div className="flex bg-white/5 p-1 rounded-2xl border border-white/10 w-fit">
-                <button onClick={() => setActiveDetailTab("Overview")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${activeDetailTab === "Overview" ? "bg-purple-600 text-white" : "text-slate-500"}`}>Overview</button>
-                <button onClick={() => setActiveDetailTab("Agent Chat")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${activeDetailTab === "Agent Chat" ? "bg-purple-600 text-white" : "text-slate-500"}`}>Agent Chat</button>
+                <button onClick={() => setActiveDetailTab("Overview")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${activeDetailTab === "Overview" ? "bg-purple-600 text-white shadow-lg" : "text-slate-500 hover:text-slate-300"}`}>Overview</button>
+                <button onClick={() => setActiveDetailTab("Agent Chat")} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${activeDetailTab === "Agent Chat" ? "bg-purple-600 text-white shadow-lg" : "text-slate-500 hover:text-slate-300"}`}>Agent Chat</button>
               </div>
             </div>
-            <button onClick={() => toggleFollow(selectedTenderForModal)} className="px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-xs text-slate-400">
-              {followedCodes.includes(selectedTenderForModal.code) ? "★ Saved" : "☆ Save"}
-            </button>
+            
+            <div className="flex items-center gap-4">
+                <button onClick={() => toggleFollow(selectedTenderForModal)} className={`px-6 py-3 rounded-xl border text-xs font-bold 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'}`}>
+                  {followedCodes.includes(selectedTenderForModal.code) ? "★ Saved to Portfolio" : "☆ Save to Portfolio"}
+                </button>
+                <button onClick={() => { onAnalyze(selectedTenderForModal); setSelectedTenderForModal(null); }} className="premium-gradient text-white px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest shadow-xl">Analyze Opportunity</button>
+            </div>
           </div>
 
           {activeDetailTab === "Overview" ? (
-            <div className="glass-card rounded-[2.5rem] overflow-hidden border border-white/5 bg-slate-900/40 backdrop-blur-xl">
+            <div className="glass-card rounded-[2.5rem] overflow-hidden border border-white/5 bg-slate-900/40 backdrop-blur-xl shadow-2xl">
               <div className="p-10 md:p-14 border-b border-white/5 relative">
-                <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">{selectedTenderForModal.code}</span>
-                  <span className="px-3 py-1 rounded-lg text-xs font-black uppercase bg-green-500/10 text-green-400">{selectedTenderForModal.status}</span>
-                </div>
-                <h3 className="text-3xl md:text-4xl font-black text-white leading-tight mb-4">{selectedTenderForModal.name}</h3>
-                <div className="flex flex-wrap gap-8">
-                  <span className="text-slate-400">🏢 {selectedTenderForModal.buyer}</span>
-                  <span className="text-slate-400">📍 {selectedTenderForModal.buyer_region || "Nacional"}</span>
+                <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 bg-green-500/10 text-green-400 border border-green-500/20">{selectedTenderForModal.status}</span>
+                  </div>
+                  <h3 className="text-3xl md:text-4xl font-black text-white leading-tight tracking-tight mb-4">{selectedTenderForModal.name}</h3>
+                  <div className="flex flex-wrap items-center gap-8 text-slate-400 font-medium">
+                    <span>🏢 {selectedTenderForModal.buyer}</span>
+                    <span>📍 {selectedTenderForModal.buyer_region || "Nacional"}</span>
+                    <span>🏷️ Type: {selectedTenderForModal.type || "N/A"}</span>
+                  </div>
                 </div>
               </div>
               <div className="p-10 md:p-14">
                 <div className="grid gap-16 lg:grid-cols-3">
                   <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">Description</h4>
-                      <div className="text-slate-300 leading-relaxed text-lg bg-white/[0.02] p-8 rounded-[2rem] border border-white/5 whitespace-pre-wrap">
-                        {selectedTenderForModal.description || "No description."}
+                      <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</h4>
+                      <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 description provided."}
                       </div>
                     </section>
                     <div className="grid grid-cols-2 gap-6">
                       <div className="p-6 rounded-3xl bg-white/[0.03] border border-white/5">
                         <div className="text-[10px] uppercase text-slate-500 font-black mb-2">Estimated Investment</div>
-                        <div className="text-xl text-white font-bold">
-                          {selectedTenderForModal.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP" }).format(selectedTenderForModal.estimated_amount) : "Not Disclosed"}
-                        </div>
+                        <div className="text-xl text-white font-bold">{selectedTenderForModal.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP" }).format(selectedTenderForModal.estimated_amount) : "Not Disclosed"}</div>
                       </div>
                     </div>
                   </div>
                   <div className="space-y-12">
-                    <div className="p-8 rounded-[2rem] bg-purple-600/10 border border-purple-500/20">
+                    <div className="p-8 rounded-[2rem] bg-purple-600/10 border border-purple-500/20 shadow-2xl shadow-purple-500/5">
                       <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-purple-400 mb-6">Timeline</h4>
                       <div className="text-[10px] text-slate-500 font-bold uppercase mb-1">Closing Deadline</div>
                       <div className="text-2xl font-black text-white font-mono">{selectedTenderForModal.closing_date ? new Date(selectedTenderForModal.closing_date).toLocaleDateString() : "---"}</div>
                     </div>
-                    <button 
-                      onClick={() => { onAnalyze(selectedTenderForModal); setSelectedTenderForModal(null); }}
-                      className="w-full premium-gradient text-white px-8 py-5 rounded-2xl font-black uppercase tracking-widest"
-                    >
-                      Analyze Opportunity
-                    </button>
+                    <div>
+                      <h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 mb-6">Official Files</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-5 rounded-2xl bg-white/[0.03] hover:bg-white/[0.08] border border-white/5 transition-all group/file">
+                             <span className="text-sm font-bold text-slate-200 group-hover/file:text-white truncate max-w-[200px]">{att.name}</span>
+                             <span className="text-xl text-slate-600 group-hover/file:text-purple-400">↓</span>
+                          </a>
+                        ))}
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>