style: Premium UI overhaul with glassmorphism and modern aesthetics

frontend/app/page.tsx

@@ -43,7 +43,6 @@ export default function HomePage() {
   const [status, setStatus] = useState("listening");
 
   useEffect(() => {
-    // Initial tab from URL
     if (typeof window !== 'undefined') {
       const params = new URLSearchParams(window.location.search);
       const tabParam = params.get('tab');
@@ -86,18 +85,6 @@ export default function HomePage() {
     init();
   }, []);
 
-  const recommendedCount = useMemo(
-    () => (analysisResult?.decision === "Recommended" ? 1 : 0),
-    [analysisResult]
-  );
-
-  const highRiskItems = useMemo(
-    () => analysisResult?.risks.filter((item) => item.severity === "High").length ?? 0,
-    [analysisResult]
-  );
-
-  const reportsGenerated = useMemo(() => (analysisResult ? 1 : 0), [analysisResult]);
-
   const handleTenderSelect = (tender: Tender) => {
     setSelectedTender(tender);
     setActiveTab("Agent Analysis");
@@ -132,54 +119,85 @@ export default function HomePage() {
   };
 
   return (
-    <div className="min-h-screen bg-navy text-slate-100">
-      <div className="mx-auto flex min-h-screen max-w-[1440px] gap-6 px-6 py-6">
+    <div className="min-h-screen">
+      <div className="mx-auto flex min-h-screen max-w-[1500px] gap-8 px-8 py-6">
         <Sidebar
           tabs={tabs}
           activeTab={activeTab}
           onTabSelect={setActiveTab}
           status={status}
         />
-        <main className="flex-1 rounded-3xl border border-slate-800 bg-surface p-6 shadow-2xl shadow-slate-900/20">
-          {activeTab === "Dashboard" && (
-            <Dashboard
-              tendersFound={tenders.length}
-              recommendedOpportunities={recommendedCount}
-              highRiskItems={highRiskItems}
-              reportsGenerated={reportsGenerated}
-              tenders={tenders}
-            />
-          )}
-          {(activeTab === "Tender Search" || activeTab === "My Portfolio") && (
-            <TenderSearch
-              tenders={tenders}
-              onSearch={handleSearch}
-              onAnalyze={handleTenderSelect}
-              forceShowFollowed={activeTab === "My Portfolio"}
-            />
-          )}
-          {activeTab === "Company Profile" && (
-            <CompanyProfile profile={companyProfile} onSave={handleProfileSave} />
-          )}
-          {activeTab === "Agent Analysis" && (
-            <AgentAnalysis
-              tender={selectedTender}
-              companyProfile={companyProfile}
-              analysis={analysisResult}
-              onAnalyze={handleRunAnalysis}
-            />
-          )}
-          {activeTab === "Proposal Draft" && <ProposalDraft proposal={analysisResult?.proposal_draft ?? ""} />}
-          {activeTab === "Reports" && <Reports reportMarkdown={analysisResult?.report_markdown ?? ""} />}
-          {activeTab === "History" && <AnalysisHistory history={analysisHistory} />}
+        
+        <main className="flex-1 flex flex-col gap-6 overflow-hidden">
+          {/* Dashboard Header */}
+          <header className="flex items-center justify-between px-2">
+            <div>
+              <h2 className="text-3xl font-bold text-white mb-1">{activeTab}</h2>
+              <p className="text-slate-500 text-sm">
+                {activeTab === "Dashboard" && "Overview of your tender ecosystem."}
+                {activeTab === "Tender Search" && "Explore new opportunities from the market."}
+                {activeTab === "Agent Analysis" && "Deep-dive into tender documentation."}
+                {activeTab === "My Portfolio" && "Manage your followed opportunities."}
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="flex -space-x-3">
+                {[1, 2, 3].map(i => (
+                  <div key={i} className="w-8 h-8 rounded-full border-2 border-[#030303] bg-slate-800 flex items-center justify-center text-[10px] font-bold text-slate-400">
+                    A{i}
+                  </div>
+                ))}
+              </div>
+              <div className="h-8 w-px bg-white/10" />
+              <button className="bg-white/5 hover:bg-white/10 text-white px-4 py-2 rounded-xl text-xs font-bold border border-white/10 transition-all">
+                Help Center
+              </button>
+            </div>
+          </header>
+
+          {/* Content Area */}
+          <div className="flex-1 overflow-y-auto pr-2 custom-scrollbar pb-12">
+            {activeTab === "Dashboard" && (
+              <Dashboard
+                tendersFound={tenders.length}
+                recommendedOpportunities={analysisResult?.decision === "Recommended" ? 1 : 0}
+                highRiskItems={analysisResult?.risks.filter(r => r.severity === "High").length ?? 0}
+                reportsGenerated={analysisResult ? 1 : 0}
+                tenders={tenders}
+              />
+            )}
+            {(activeTab === "Tender Search" || activeTab === "My Portfolio") && (
+              <TenderSearch
+                tenders={tenders}
+                onSearch={handleSearch}
+                onAnalyze={handleTenderSelect}
+                forceShowFollowed={activeTab === "My Portfolio"}
+              />
+            )}
+            {activeTab === "Company Profile" && (
+              <CompanyProfile profile={companyProfile} onSave={handleProfileSave} />
+            )}
+            {activeTab === "Agent Analysis" && (
+              <AgentAnalysis
+                tender={selectedTender}
+                companyProfile={companyProfile}
+                analysis={analysisResult}
+                onAnalyze={handleRunAnalysis}
+              />
+            )}
+            {activeTab === "Proposal Draft" && <ProposalDraft proposal={analysisResult?.proposal_draft ?? ""} />}
+            {activeTab === "Reports" && <Reports reportMarkdown={analysisResult?.report_markdown ?? ""} />}
+            {activeTab === "History" && <AnalysisHistory history={analysisHistory} />}
+          </div>
         </main>
       </div>
-      <footer className="mt-8 border-t border-slate-800 bg-navy/50 py-12 text-center">
-        <p className="text-xs font-bold uppercase tracking-[0.4em] text-slate-500 mb-2">
-          Architecting the Agentic Future
+
+      <footer className="py-8 border-t border-white/5 bg-black/20 text-center">
+        <p className="text-[10px] font-bold uppercase tracking-[0.5em] text-slate-600 mb-2">
+          Intelligence Orchestrated
         </p>
-        <p className="text-sm font-medium text-slate-400">
-          © 2026 <a href="https://rew.cl" target="_blank" className="text-cyan hover:text-sky transition-colors font-bold">REW 2026</a> | IA TECH PREMIUM
+        <p className="text-xs text-slate-500 font-medium">
+          AndesOps AI Enterprise 2026 | Powered by REW
         </p>
       </footer>
     </div>

frontend/components/Sidebar.tsx

@@ -21,39 +21,51 @@ type Props = {
 
 export default function Sidebar({ tabs, activeTab, onTabSelect, status }: Props) {
   return (
-    <aside className="w-80 rounded-3xl border border-slate-800 bg-[#081822] p-6 text-slate-100 shadow-xl shadow-slate-900/20">
-      <div className="mb-8">
-        <div className="text-sm uppercase tracking-[0.3em] text-cyan-300/80">AndesOps AI</div>
-        <h1 className="mt-4 text-3xl font-semibold text-white">Enterprise Tender Intelligence</h1>
-        <p className="mt-3 text-slate-400">Chile-focused procurement insights for enterprise teams.</p>
+    <aside className="w-72 glass-card rounded-3xl h-[calc(100vh-3rem)] sticky top-6 p-6 flex flex-col gap-8">
+      <div className="flex items-center gap-3 px-2">
+        <div className="w-10 h-10 premium-gradient rounded-xl flex items-center justify-center shadow-lg shadow-purple-500/20">
+          <span className="text-white font-bold text-xl">A</span>
+        </div>
+        <h1 className="text-xl font-bold tracking-tight text-white">AndesOps AI</h1>
       </div>
-      <div className="space-y-2">
+
+      <nav className="flex-1 flex flex-col gap-2">
         {tabs.map((tab) => {
+          const isActive = activeTab === tab;
           const tabSlug = tab.toLowerCase().replace(/ /g, "_");
+          
           return (
-            <a
+            <button
               key={tab}
-              href={`?tab=${tabSlug}`}
-              onClick={(e) => {
-                e.preventDefault();
+              onClick={() => {
                 onTabSelect(tab);
                 window.history.pushState({}, '', `?tab=${tabSlug}`);
               }}
-              className={`flex w-full items-center justify-between rounded-2xl px-4 py-3 text-left transition ${
-                activeTab === tab
-                  ? "bg-gradient-to-r from-cyan/20 to-slate-700 text-white shadow-inner"
-                  : "text-slate-300 hover:bg-slate-800/80"
+              className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
+                isActive
+                  ? "bg-white/10 text-white shadow-inner"
+                  : "text-slate-400 hover:bg-white/5 hover:text-white"
               }`}
             >
-              <span>{tab}</span>
-              {activeTab === tab && <span className="text-cyan-300">●</span>}
-            </a>
+              <div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${
+                isActive ? "bg-purple-500 scale-125 shadow-[0_0_8px_rgba(168,85,247,0.8)]" : "bg-transparent group-hover:bg-slate-600"
+              }`} />
+              <span className="font-medium text-sm">{tab}</span>
+            </button>
           );
         })}
-      </div>
-      <div className="mt-8 rounded-2xl bg-slate-900/70 p-4 text-sm text-slate-300">
-        <div className="font-semibold text-slate-100">Conexión</div>
-        <div className="mt-2 text-cyan-300">{status === "connected" ? "Backend disponible" : "Conectando..."}</div>
+      </nav>
+
+      <div className="mt-auto pt-6 border-t border-white/5">
+        <div className="px-4 py-3 rounded-xl bg-gradient-to-br from-indigo-500/10 to-purple-500/10 border border-indigo-500/20">
+          <p className="text-[10px] uppercase tracking-widest text-indigo-300 font-bold mb-1">Status</p>
+          <div className="flex items-center gap-2">
+            <div className={`w-2 h-2 rounded-full ${status === "connected" ? "bg-green-500 animate-pulse" : "bg-yellow-500"}`} />
+            <span className={`text-xs font-medium ${status === "connected" ? "text-green-300" : "text-yellow-300"}`}>
+              {status === "connected" ? "Systems Nominal" : "Connecting..."}
+            </span>
+          </div>
+        </div>
       </div>
     </aside>
   );

frontend/components/TenderSearch.tsx

@@ -14,10 +14,7 @@ type Props = {
 export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFollowed = false }: Props) {
   const [keyword, setKeyword] = useState("");
   const [buyerCode, setBuyerCode] = useState("");
-  const [providerCode, setProviderCode] = useState("");
-  const [searchDate, setSearchDate] = useState("");
-  
-  const [searchMode, setSearchMode] = useState<"keyword" | "intelligence">("keyword");
+  const [date, setDate] = useState("");
   const [expandedTenderCodes, setExpandedTenderCodes] = useState<string[]>([]);
   const [followedCodes, setFollowedCodes] = useState<string[]>(() => {
     if (typeof window !== 'undefined') {
@@ -31,12 +28,10 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 50;
 
-  // Sync with forceShowFollowed prop
   useEffect(() => {
     if (forceShowFollowed) setShowOnlyFollowed(true);
   }, [forceShowFollowed]);
 
-  // Persistence effect
   useEffect(() => {
     localStorage.setItem('andes_followed_codes', JSON.stringify(followedCodes));
   }, [followedCodes]);
@@ -53,22 +48,19 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
     );
   };
 
-  const handleSearchClick = async (page = 1) => {
-    setShowOnlyFollowed(false); // Reset filter on new search
+  const handleSubmit = async (e?: React.FormEvent, page = 1) => {
+    e?.preventDefault();
+    setShowOnlyFollowed(false);
     setIsLoading(true);
     setCurrentPage(page);
     try {
-      if (searchMode === "keyword") {
-        await onSearch({ keyword, skip: (page - 1) * itemsPerPage, limit: itemsPerPage });
-      } else {
-        await onSearch({ 
-          buyer_code: buyerCode, 
-          provider_code: providerCode, 
-          date: searchDate,
-          skip: (page - 1) * itemsPerPage,
-          limit: itemsPerPage
-        });
-      }
+      await onSearch({ 
+        keyword, 
+        buyer_code: buyerCode, 
+        date,
+        skip: (page - 1) * itemsPerPage, 
+        limit: itemsPerPage 
+      });
     } finally {
       setIsLoading(false);
     }
@@ -82,198 +74,149 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
   }, [tenders, showOnlyFollowed, followedCodes]);
 
   return (
-    <div className="space-y-6">
-      {/* Header & Modes */}
-      <div className="flex items-center justify-between border-b border-slate-800 pb-4">
-        <div>
-          <h2 className="text-2xl font-bold text-white">Discovery & Intelligence</h2>
-          <p className="text-sm text-slate-400">Encuentra oportunidades reales o analiza a tu competencia.</p>
+    <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">
+          <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>
-        <div className="flex rounded-2xl bg-slate-900 p-1">
-          <button
-            onClick={() => setSearchMode("keyword")}
-            className={`rounded-xl px-4 py-2 text-xs font-semibold transition ${
-              searchMode === "keyword" ? "bg-cyan text-slate-950 shadow-lg shadow-cyan/20" : "text-slate-400 hover:text-slate-200"
-            }`}
-          >
-            Búsqueda General
-          </button>
-          <button
-            onClick={() => setSearchMode("intelligence")}
-            className={`rounded-xl px-4 py-2 text-xs font-semibold transition ${
-              searchMode === "intelligence" ? "bg-cyan text-slate-950 shadow-lg shadow-cyan/20" : "text-slate-400 hover:text-slate-200"
-            }`}
-          >
-            Market Intelligence
-          </button>
-        </div>
-      </div>
-
-      {/* Search Forms */}
-      <div className="rounded-3xl border border-slate-800 bg-slate-900/40 p-6">
-        {searchMode === "keyword" ? (
-          <div className="flex flex-wrap items-end gap-4">
-            <div className="flex-1 min-w-[300px]">
-              <label className="block text-[10px] uppercase tracking-widest text-slate-500 mb-2 ml-1">Palabra clave o código</label>
-              <input
-                value={keyword}
-                onChange={(event) => setKeyword(event.target.value)}
-                onKeyDown={(event) => event.key === "Enter" && handleSearchClick()}
-                placeholder="Ej: software, 7210-24-LE23"
-                className="w-full rounded-2xl border border-slate-800 bg-slate-950 px-5 py-4 text-white outline-none focus:border-cyan transition shadow-inner"
-              />
-            </div>
-            <button
-              onClick={() => handleSearchClick()}
-              disabled={isLoading}
-              className="rounded-2xl bg-cyan px-8 py-4 font-bold text-slate-950 transition hover:bg-sky hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50"
-            >
-              {isLoading ? "Buscando..." : "Search"}
-            </button>
+        
+        <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">Search Keyword</label>
+            <input
+              type="text"
+              placeholder="e.g. Software, Construction..."
+              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="grid gap-4 md:grid-cols-4 items-end">
-            <div>
-              <label className="block text-[10px] uppercase tracking-widest text-slate-500 mb-2 ml-1">RUT Proveedor (Competencia)</label>
-              <input
-                value={providerCode}
-                onChange={(event) => setProviderCode(event.target.value)}
-                placeholder="Ej: 17793"
-                className="w-full rounded-2xl border border-slate-800 bg-slate-950 px-4 py-3 text-white text-sm outline-none focus:border-cyan"
-              />
-            </div>
-            <div>
-              <label className="block text-[10px] uppercase tracking-widest text-slate-500 mb-2 ml-1">ID Organismo (Comprador)</label>
-              <input
-                value={buyerCode}
-                onChange={(event) => setBuyerCode(event.target.value)}
-                placeholder="Ej: 6945"
-                className="w-full rounded-2xl border border-slate-800 bg-slate-950 px-4 py-3 text-white text-sm outline-none focus:border-cyan"
-              />
-            </div>
-            <div>
-              <label className="block text-[10px] uppercase tracking-widest text-slate-500 mb-2 ml-1">Fecha (ddmmaaaa)</label>
-              <input
-                value={searchDate}
-                onChange={(event) => setSearchDate(event.target.value)}
-                placeholder="Ej: 29042024"
-                className="w-full rounded-2xl border border-slate-800 bg-slate-950 px-4 py-3 text-white text-sm outline-none focus:border-cyan"
-              />
-            </div>
+          <div className="space-y-2">
+            <label className="text-[10px] uppercase tracking-wider text-slate-500 font-bold px-1">Buyer Code (Optional)</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">Specific 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 transition-all [color-scheme:dark]"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+            />
+          </div>
+          <div className="flex items-end">
             <button
-              onClick={() => handleSearchClick()}
-              className="rounded-2xl bg-sky px-6 py-3 font-bold text-slate-950 transition hover:bg-cyan"
+              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"
             >
-              Get Insights
+              {isLoading ? "Searching..." : "Fetch Opportunities"}
             </button>
           </div>
-        )}
+        </form>
       </div>
 
-      {/* Results Header & Follow Filter */}
+      {/* Results Controls */}
       <div className="flex items-center justify-between px-2">
-        <h3 className="text-lg font-bold text-white flex items-center gap-2">
-          {showOnlyFollowed ? "Mis Seguimientos" : "Resultados Encontrados"}
-          <span className="text-xs bg-slate-800 text-slate-500 px-2 py-0.5 rounded-full font-mono">
-            {filteredTenders.length}
+        <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>
-        </h3>
+        </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 border ${
+            className={`flex items-center gap-2 rounded-xl px-4 py-2 text-xs font-bold transition-all border ${
               showOnlyFollowed 
-                ? "bg-amber-400/10 border-amber-400/30 text-amber-400" 
-                : "bg-slate-900 border-slate-800 text-slate-400 hover:border-slate-700"
+                ? "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 ? "★ Viendo Seguimientos" : "☆ Ver solo Seguidos"}
+            {showOnlyFollowed ? "★ Viewing Portfolio" : "☆ Show Favorites Only"}
           </button>
         )}
       </div>
 
-      {/* Results Table */}
+      {/* Results List */}
       <div className="space-y-4">
         {filteredTenders.length === 0 ? (
-          <div className="flex flex-col items-center justify-center rounded-3xl border border-slate-800 bg-slate-950/30 p-20 text-center">
-            <div className="text-5xl mb-4 opacity-50">{showOnlyFollowed ? "🌟" : "📡"}</div>
-            <p className="text-slate-400">
+          <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">
               {showOnlyFollowed 
-                ? "No tienes licitaciones marcadas como favoritas todavía." 
-                : "Inicia una búsqueda para conectar con la API de Mercado Público."}
+                ? "You haven't followed any tenders yet. Start by searching for opportunities." 
+                : "Enter keywords above to connect with the Mercado Público API."}
             </p>
           </div>
         ) : (
-          <div className="overflow-hidden rounded-3xl border border-slate-800 bg-slate-950/80 shadow-2xl">
-            <table className="w-full min-w-[900px] border-collapse text-left text-sm">
-              <thead className="bg-slate-900 text-slate-400 uppercase text-[10px] tracking-widest font-bold">
+          <div className="glass-card rounded-3xl overflow-hidden overflow-x-auto shadow-2xl">
+            <table className="w-full min-w-[1000px] text-left text-sm">
+              <thead className="bg-white/5 text-slate-500 uppercase text-[10px] tracking-widest font-bold">
                 <tr>
-                  <th className="px-6 py-5">Identificador</th>
-                  <th className="px-6 py-5">Oportunidad</th>
-                  <th className="px-6 py-5">Entidad Compradora</th>
-                  <th className="px-6 py-5">Cierre</th>
-                  <th className="px-6 py-5 text-center">Estado</th>
-                  <th className="px-6 py-5">Monto</th>
-                  <th className="px-6 py-5 text-right pr-10">Acciones</th>
+                  <th className="px-6 py-5">Code</th>
+                  <th className="px-6 py-5">Opportunity</th>
+                  <th className="px-6 py-5">Buyer</th>
+                  <th className="px-6 py-5 text-center">Status</th>
+                  <th className="px-6 py-5 text-right">Deadline</th>
+                  <th className="px-6 py-5 text-right pr-10">Actions</th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody className="divide-y divide-white/5">
                 {filteredTenders.map((tender) => (
                   <Fragment key={tender.code}>
-                    <tr className="border-t border-slate-800 hover:bg-slate-900/50 transition-colors group">
+                    <tr className="hover:bg-white/[0.02] transition-colors group">
                       <td className="px-6 py-5">
                         <div className="flex items-center gap-3">
                           <button 
                             onClick={() => toggleFollow(tender.code)}
-                            className={`text-lg transition-transform hover:scale-125 ${followedCodes.includes(tender.code) ? 'text-amber-400' : 'text-slate-600 hover:text-slate-400'}`}
+                            className={`text-lg 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>
-                          <div>
-                            <div className="font-mono text-cyan">{tender.code}</div>
-                            <div className="text-[10px] text-slate-500">{tender.source}</div>
-                          </div>
+                          <span className="font-mono text-purple-400 text-xs">{tender.code}</span>
                         </div>
                       </td>
                       <td className="px-6 py-5 max-w-xs">
-                        <div className="font-semibold text-white group-hover:text-cyan transition-colors truncate">{tender.name}</div>
-                        <div className="text-xs text-slate-500">{tender.region || "Multiregional"}</div>
-                      </td>
-                      <td className="px-6 py-5 text-slate-300">{tender.buyer}</td>
-                      <td className="px-6 py-5">
-                        <div className={`text-xs font-mono ${
-                          tender.closing_date && new Date(tender.closing_date).getTime() - new Date().getTime() < 3 * 24 * 60 * 60 * 1000
-                            ? "text-red-400 font-bold"
-                            : "text-slate-400"
-                        }`}>
-                          {tender.closing_date ? new Date(tender.closing_date).toLocaleDateString() : "---"}
-                        </div>
+                        <div className="font-semibold text-white group-hover:text-purple-400 transition-colors truncate">{tender.name}</div>
+                        <div className="text-[10px] text-slate-500">{tender.region || "Multiregional"}</div>
                       </td>
+                      <td className="px-6 py-5 text-slate-400 text-xs">{tender.buyer}</td>
                       <td className="px-6 py-5 text-center">
-                        <span className={`rounded-full px-3 py-1 text-[10px] font-bold ${
+                        <span className={`inline-block rounded-full px-3 py-1 text-[10px] font-bold ${
                           tender.status.toLowerCase().includes('abierto') || tender.status.toLowerCase().includes('publicada')
                             ? 'bg-green-500/10 text-green-400 border border-green-500/20'
-                            : 'bg-slate-800 text-slate-400'
+                            : 'bg-slate-800/50 text-slate-500 border border-white/5'
                         }`}>
                           {tender.status}
                         </span>
                       </td>
-                      <td className="px-6 py-5 font-semibold text-slate-200">
-                        {tender.estimated_amount
-                          ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP", maximumFractionDigits: 0 }).format(tender.estimated_amount)
-                          : "---"}
+                      <td className="px-6 py-5 text-right font-mono text-xs text-slate-400">
+                        {tender.closing_date ? new Date(tender.closing_date).toLocaleDateString() : "---"}
                       </td>
                       <td className="px-6 py-5 text-right pr-10">
                         <div className="flex items-center justify-end gap-3">
                           <button
                             onClick={() => toggleExpanded(tender.code)}
-                            className="rounded-xl border border-slate-700 bg-slate-900 px-5 py-2.5 text-xs font-bold text-slate-200 hover:border-cyan hover:text-cyan transition whitespace-nowrap"
+                            className="text-[11px] font-bold text-slate-400 hover:text-white transition"
                           >
-                            {expandedTenderCodes.includes(tender.code) ? "Cerrar" : "Detalle"}
+                            {expandedTenderCodes.includes(tender.code) ? "Close" : "Detail"}
                           </button>
                           <button
                             onClick={() => onAnalyze(tender)}
-                            className="rounded-xl bg-cyan px-5 py-2.5 text-xs font-bold text-slate-950 hover:bg-sky transition shadow-lg shadow-cyan/10 whitespace-nowrap"
+                            className="bg-white/10 hover:bg-white/20 text-white text-[11px] font-bold px-4 py-2 rounded-lg transition-all border border-white/10"
                           >
                             Analyze
                           </button>
@@ -281,74 +224,45 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                       </td>
                     </tr>
                     {expandedTenderCodes.includes(tender.code) && (
-                      <tr className="bg-slate-950/90 animate-in fade-in duration-300">
-                        <td colSpan={7} className="px-10 py-8 border-t border-slate-800">
-                          <div className="grid gap-10 lg:grid-cols-2">
-                            {/* Left Col: Info */}
-                            <div className="space-y-8">
-                              <div>
-                                <h4 className="text-xs font-bold uppercase tracking-widest text-cyan mb-4">Descripción del Proyecto</h4>
-                                <p className="text-slate-300 leading-relaxed text-sm">{tender.description}</p>
-                              </div>
-                              
-                              <div>
-                                <h4 className="text-xs font-bold uppercase tracking-widest text-cyan mb-4">Ítems Solicitados</h4>
-                                <div className="space-y-2 max-h-[200px] overflow-y-auto pr-2 custom-scrollbar">
-                                  {tender.items?.length ? tender.items.map((it, i) => (
-                                    <div key={i} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/50 border border-slate-800">
-                                      <span className="text-xs text-slate-200">{it.name}</span>
-                                      <span className="text-xs font-mono text-cyan">{it.quantity} {it.unit}</span>
-                                    </div>
-                                  )) : <p className="text-xs text-slate-600 italic">No hay ítems detallados disponibles.</p>}
-                                </div>
-                              </div>
-                            </div>
-
-                            {/* Right Col: Documents & Meta */}
-                            <div className="space-y-8">
+                      <tr className="bg-white/[0.01] animate-in fade-in duration-500">
+                        <td colSpan={6} className="px-10 py-8">
+                          <div className="grid gap-12 lg:grid-cols-2">
+                            <div className="space-y-6">
                               <div>
-                                <h4 className="text-xs font-bold uppercase tracking-widest text-cyan mb-4">Bases y Documentos</h4>
-                                <div className="grid gap-3">
-                                  {tender.attachments && tender.attachments.length > 0 ? (
-                                    tender.attachments.map((att, i) => (
-                                      <a key={i} href={att.url} target="_blank" className="flex items-center gap-3 p-4 rounded-2xl bg-slate-900 hover:bg-slate-800 border border-slate-800 transition group">
-                                        <div className="text-2xl group-hover:scale-110 transition">📄</div>
-                                        <div className="overflow-hidden">
-                                          <div className="text-xs font-semibold text-slate-200 truncate group-hover:text-cyan">{att.name}</div>
-                                          <div className="text-[10px] text-slate-500">Descargar desde Mercado Público</div>
-                                        </div>
-                                      </a>
-                                    ))
-                                  ) : (
-                                    <div className="space-y-3">
-                                      <div className="rounded-2xl border border-dashed border-slate-800 p-6 text-center">
-                                        <p className="text-xs text-slate-500">No hay enlaces directos.</p>
-                                        <p className="mt-2 text-xs text-cyan">Usa 'Upload PDF' en el análisis agéntico.</p>
-                                      </div>
-                                      <a 
-                                        href={`https://www.mercadopublico.cl/fichaLicitacion.html?code=${tender.code}`}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="flex items-center justify-center gap-2 w-full p-4 rounded-2xl bg-cyan/10 border border-cyan/20 text-cyan text-xs font-bold hover:bg-cyan/20 transition"
-                                      >
-                                        🌐 Ir al Portal de Mercado Público
-                                      </a>
-                                    </div>
-                                  )}
-                                </div>
+                                <h4 className="text-[10px] font-bold uppercase tracking-widest text-purple-400 mb-3">Project Description</h4>
+                                <p className="text-slate-400 leading-relaxed text-xs">{tender.description}</p>
                               </div>
-
                               <div className="grid grid-cols-2 gap-4">
-                                <div className="p-4 rounded-2xl bg-slate-900/50 border border-slate-800">
-                                  <div className="text-[10px] uppercase text-slate-500 font-bold mb-1">Cierre Licitación</div>
-                                  <div className="text-xs text-slate-100">{tender.closing_date}</div>
+                                <div className="p-4 rounded-2xl bg-white/[0.03] border border-white/5">
+                                  <div className="text-[9px] uppercase text-slate-500 font-bold mb-1">Estimated Amount</div>
+                                  <div className="text-xs text-slate-200 font-semibold">
+                                    {tender.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP" }).format(tender.estimated_amount) : "Not Disclosed"}
+                                  </div>
                                 </div>
-                                <div className="p-4 rounded-2xl bg-slate-900/50 border border-slate-800">
-                                  <div className="text-[10px] uppercase text-slate-500 font-bold mb-1">Rubro / Sector</div>
-                                  <div className="text-xs text-slate-100">{tender.sector || "General"}</div>
+                                <div className="p-4 rounded-2xl bg-white/[0.03] border border-white/5">
+                                  <div className="text-[9px] uppercase text-slate-500 font-bold mb-1">Sector</div>
+                                  <div className="text-xs text-slate-200 font-semibold">{tender.sector || "General"}</div>
                                 </div>
                               </div>
                             </div>
+                            <div className="space-y-6">
+                              <h4 className="text-[10px] font-bold uppercase tracking-widest text-purple-400 mb-3">Resources & Direct Links</h4>
+                              <div className="grid gap-3">
+                                {tender.attachments?.map((att, i) => (
+                                  <a key={i} href={att.url} target="_blank" className="flex items-center gap-3 p-3 rounded-xl bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 transition group">
+                                    <span className="text-lg">📄</span>
+                                    <span className="text-xs text-slate-300 group-hover:text-white truncate">{att.name}</span>
+                                  </a>
+                                ))}
+                                <a 
+                                  href={`https://www.mercadopublico.cl/fichaLicitacion.html?code=${tender.code}`}
+                                  target="_blank"
+                                  className="flex items-center justify-center gap-2 p-3 rounded-xl bg-purple-500/10 border border-purple-500/20 text-purple-300 text-xs font-bold hover:bg-purple-500/20 transition mt-2"
+                                >
+                                  Open official portal
+                                </a>
+                              </div>
+                            </div>
                           </div>
                         </td>
                       </tr>
@@ -357,59 +271,10 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
                 ))}
               </tbody>
             </table>
-            {/* Pagination Controls */}
-            {!showOnlyFollowed && tenders.length > 0 && (
-              <div className="flex items-center justify-between p-6 border-t border-slate-800">
-                <div className="text-xs text-slate-500">
-                  Mostrando <span className="text-white font-bold">{tenders.length}</span> resultados (Página {currentPage})
-                </div>
-                <div className="flex gap-2">
-                  <button
-                    onClick={() => handleSearchClick(currentPage - 1)}
-                    disabled={currentPage === 1 || isLoading}
-                    className="px-4 py-2 rounded-xl border border-slate-700 text-xs font-bold text-white hover:bg-slate-800 disabled:opacity-30 transition"
-                  >
-                    ← Anterior
-                  </button>
-                  <button
-                    onClick={() => handleSearchClick(currentPage + 1)}
-                    disabled={tenders.length < itemsPerPage || isLoading}
-                    className="px-4 py-2 rounded-xl border border-slate-700 text-xs font-bold text-white hover:bg-slate-800 disabled:opacity-30 transition"
-                  >
-                    Siguiente →
-                  </button>
-                </div>
-              </div>
-            )}
           </div>
         )}
       </div>
 
-      {/* Agent Documentation Section */}
-      <div className="mt-12 rounded-3xl border border-slate-800 bg-slate-900/20 p-8">
-        <h3 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
-          <span className="text-cyan">◈</span> Intelligent Agent Orchestration
-        </h3>
-        <div className="flex items-center gap-3 mb-6">
-          <span className="text-cyan">◈</span>
-          <h3 className="text-sm font-bold uppercase tracking-widest text-white">Intelligent Agent Orchestration</h3>
-        </div>
-        <div className="grid gap-4 md:grid-cols-3">
-          <div className="rounded-2xl border border-slate-800/50 bg-slate-950/50 p-4">
-            <div className="text-[10px] font-bold text-cyan mb-2 uppercase">Legal Agent</div>
-            <p className="text-[11px] text-slate-400">Analiza bases administrativas y riesgos de cumplimiento legal en tiempo real.</p>
-          </div>
-          <div className="rounded-2xl border border-slate-800/50 bg-slate-950/50 p-4">
-            <div className="text-[10px] font-bold text-cyan mb-2 uppercase">Technical Agent</div>
-            <p className="text-[11px] text-slate-400">Evalúa especificaciones técnicas y determina la factibilidad del proyecto.</p>
-          </div>
-          <div className="rounded-2xl border border-slate-800/50 bg-slate-950/50 p-4">
-            <div className="text-[10px] font-bold text-cyan mb-2 uppercase">Strategy Agent</div>
-            <p className="text-[11px] text-slate-400">Calcula el ROI proyectado y define la mejor táctica comercial para ganar.</p>
-          </div>
-        </div>
-      </div>
-
       {isLoading && <BrandLoader />}
     </div>
   );

frontend/globals.css

@@ -3,23 +3,65 @@
 @tailwind utilities;
 
 :root {
-  color-scheme: dark;
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 263.4 70% 50.4%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 263.4 70% 50.4%;
+  --radius: 0.75rem;
 }
 
-html,
-body {
-  min-height: 100%;
+@layer base {
+  body {
+    @apply bg-[#030303] text-foreground antialiased;
+    background-image: 
+      radial-gradient(at 0% 0%, hsla(263, 70%, 50%, 0.15) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, hsla(190, 70%, 50%, 0.1) 0px, transparent 50%);
+    background-attachment: fixed;
+  }
 }
 
-body {
-  margin: 0;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background: radial-gradient(circle at top, rgba(34, 211, 238, 0.14), transparent 30%),
-    linear-gradient(180deg, #06121d 0%, #081727 40%, #081a29 100%);
+@layer components {
+  .glass-card {
+    @apply bg-black/40 backdrop-blur-md border border-white/10 shadow-xl transition-all duration-300;
+  }
+  
+  .glass-card:hover {
+    @apply border-white/20 bg-black/50;
+  }
+
+  .premium-gradient {
+    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+  }
+
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400;
+  }
 }
 
-* {
-  box-sizing: border-box;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+::-webkit-scrollbar-thumb {
+  @apply bg-white/10 rounded-full hover:bg-white/20 transition-colors;
 }
 
 ::selection {