style: final aesthetic polish with radial charts and cinematic sync experience

frontend/components/Dashboard.tsx

@@ -195,29 +195,53 @@ export default function Dashboard({
           </div>
         </div>
 
-        {/* Deadline Status */}
-        <div className="rounded-3xl border border-slate-800 bg-slate-950/80 p-6">
-          <h3 className="text-sm uppercase tracking-widest text-slate-400 mb-6 font-semibold">{t.deadlines}</h3>
-          <div className="space-y-6 pt-2">
-            <div className="flex items-center gap-4">
-              <div className="h-12 w-1.5 bg-red-500 rounded-full" />
-              <div>
-                <div className="text-2xl font-bold text-white">{deadlineStatus.urgent}</div>
-                <div className="text-xs text-slate-500">Cierre en menos de 7 días</div>
+        {/* Deadline Status - Enhanced Visual */}
+        <div className="rounded-3xl border border-white/5 bg-slate-950/80 p-8 relative overflow-hidden group hover:border-purple-500/20 transition-all duration-500">
+          <div className="absolute -right-10 -bottom-10 w-40 h-40 bg-purple-500/5 blur-3xl group-hover:bg-purple-500/10 transition-colors" />
+          <h3 className="text-[10px] uppercase tracking-[0.2em] text-slate-500 mb-8 font-black">{t.deadlines}</h3>
+          
+          <div className="flex items-center gap-10">
+            <div className="relative w-32 h-32 flex items-center justify-center">
+              {/* Complex Radial Background with Multiple Segments via CSS Gradients */}
+              <div 
+                className="absolute inset-0 rounded-full border-[10px] border-white/5 shadow-inner"
+                style={{
+                  background: `conic-gradient(
+                    #ef4444 0% ${((deadlineStatus.urgent / Math.max(1, tenders.length)) * 100).toFixed(1)}%, 
+                    #f59e0b ${((deadlineStatus.urgent / Math.max(1, tenders.length)) * 100).toFixed(1)}% ${(((deadlineStatus.urgent + deadlineStatus.near) / Math.max(1, tenders.length)) * 100).toFixed(1)}%, 
+                    #22c55e ${(((deadlineStatus.urgent + deadlineStatus.near) / Math.max(1, tenders.length)) * 100).toFixed(1)}% 100%
+                  )`,
+                  maskImage: 'radial-gradient(transparent 58%, black 60%)',
+                  WebkitMaskImage: 'radial-gradient(transparent 58%, black 60%)'
+                }}
+              />
+              <div className="text-center">
+                <div className="text-3xl font-black text-white">{tenders.length}</div>
+                <div className="text-[8px] font-bold text-slate-500 uppercase tracking-tighter">Total</div>
               </div>
             </div>
-            <div className="flex items-center gap-4">
-              <div className="h-12 w-1.5 bg-amber-500 rounded-full" />
-              <div>
-                <div className="text-2xl font-bold text-white">{deadlineStatus.near}</div>
-                <div className="text-xs text-slate-500">Cierre en 7-21 días</div>
+
+            <div className="flex-1 space-y-4">
+              <div className="flex items-center justify-between group/row">
+                <div className="flex items-center gap-2">
+                  <div className="w-1.5 h-1.5 rounded-full bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]" />
+                  <span className="text-[11px] text-slate-400 group-hover/row:text-red-400 transition-colors">Urgent</span>
+                </div>
+                <span className="text-xs font-bold text-white">{deadlineStatus.urgent}</span>
               </div>
-            </div>
-            <div className="flex items-center gap-4">
-              <div className="h-12 w-1.5 bg-green-500 rounded-full" />
-              <div>
-                <div className="text-2xl font-bold text-white">{deadlineStatus.far}</div>
-                <div className="text-xs text-slate-500">Más de 21 días</div>
+              <div className="flex items-center justify-between group/row">
+                <div className="flex items-center gap-2">
+                  <div className="w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]" />
+                  <span className="text-[11px] text-slate-400 group-hover/row:text-amber-400 transition-colors">Near</span>
+                </div>
+                <span className="text-xs font-bold text-white">{deadlineStatus.near}</span>
+              </div>
+              <div className="flex items-center justify-between group/row">
+                <div className="flex items-center gap-2">
+                  <div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
+                  <span className="text-[11px] text-slate-400 group-hover/row:text-green-400 transition-colors">Safe</span>
+                </div>
+                <span className="text-xs font-bold text-white">{deadlineStatus.far}</span>
               </div>
             </div>
           </div>

frontend/components/GlobalSync.tsx

@@ -41,32 +41,51 @@ export default function GlobalSync({ onComplete }: { onComplete: () => void }) {
   }, [onComplete]);
 
   return (
-    <div className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#030303] text-white">
+    <div className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#020202] text-white overflow-hidden">
+      {/* Cinematic Grid Background */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
+      
+      {/* Decorative Blur Orbs */}
+      <div className="absolute -top-24 -left-24 w-96 h-96 bg-purple-500/10 blur-[120px] animate-pulse" />
+      <div className="absolute -bottom-24 -right-24 w-96 h-96 bg-cyan-500/10 blur-[120px] animate-pulse" />
+
+      {/* Floating Code Snippets (Pure CSS Animations) */}
+      <div className="absolute inset-0 opacity-20 pointer-events-none select-none font-mono text-[8px] md:text-[10px] text-purple-400/40">
+        <div className="absolute top-[10%] left-[5%] animate-[pulse_3s_infinite]">GET /api/tenders/sync HTTP/1.1</div>
+        <div className="absolute top-[20%] right-[10%] animate-[pulse_4s_infinite]">SELECT * FROM active_opportunities;</div>
+        <div className="absolute bottom-[30%] left-[15%] animate-[pulse_5s_infinite]">AGENT_ORCHESTRATOR.INIT()</div>
+        <div className="absolute bottom-[10%] right-[5%] animate-[pulse_6s_infinite]">Status: 200 OK | Payload: 4.2k items</div>
+      </div>
+
       <div className="relative w-64 h-64 flex items-center justify-center mb-12">
-        {/* Animated Rings */}
-        <div className="absolute inset-0 border-2 border-purple-500/20 rounded-full animate-[spin_10s_linear_infinite]" />
-        <div className="absolute inset-4 border-2 border-indigo-500/40 rounded-full animate-[spin_7s_linear_infinite_reverse]" />
-        <div className="absolute inset-8 border-2 border-cyan-500/60 rounded-full animate-[spin_5s_linear_infinite]" />
+        {/* Animated Rings - Enhanced */}
+        <div className="absolute inset-0 border border-purple-500/20 rounded-full animate-[spin_12s_linear_infinite]" />
+        <div className="absolute inset-4 border border-indigo-500/30 rounded-full animate-[spin_8s_linear_infinite_reverse]" />
+        <div className="absolute inset-8 border border-cyan-500/40 rounded-full animate-[spin_6s_linear_infinite]" />
         
         {/* Progress Text */}
-        <div className="flex flex-col items-center">
-          <span className="text-4xl font-bold text-gradient mb-1">{progress}%</span>
-          <span className="text-[10px] uppercase tracking-[0.2em] text-slate-500 font-bold">Syncing</span>
+        <div className="flex flex-col items-center relative z-10">
+          <span className="text-5xl font-black tracking-tighter text-white mb-1 drop-shadow-[0_0_15px_rgba(168,85,247,0.5)]">{progress}%</span>
+          <span className="text-[9px] uppercase tracking-[0.4em] text-slate-500 font-black">Neural Link</span>
         </div>
       </div>
 
-      <div className="space-y-4 text-center">
-        <h2 className="text-xl font-bold tracking-tight">{message}</h2>
-        <div className="w-64 h-1 bg-white/5 rounded-full overflow-hidden">
+      <div className="relative z-10 space-y-6 text-center max-w-sm px-6">
+        <h2 className="text-xl font-bold tracking-tight text-slate-200 animate-in fade-in slide-in-from-bottom-2 duration-300">{message}</h2>
+        <div className="relative w-72 h-1.5 bg-white/5 rounded-full overflow-hidden border border-white/5">
           <div 
-            className="h-full premium-gradient transition-all duration-300 ease-out" 
+            className="h-full bg-gradient-to-r from-purple-600 via-indigo-500 to-cyan-400 transition-all duration-300 ease-out shadow-[0_0_10px_rgba(168,85,247,0.5)]" 
             style={{ width: `${progress}%` }} 
           />
         </div>
+        <p className="text-[10px] text-slate-500 font-medium tracking-widest uppercase opacity-60">Initializing AndesOps AI Engine</p>
       </div>
       
-      <div className="absolute bottom-12 text-[10px] uppercase tracking-[0.4em] text-slate-700 font-bold">
-        AndesOps AI Framework v1.0
+      <div className="absolute bottom-12 flex flex-col items-center gap-2">
+        <div className="w-1 h-8 bg-gradient-to-b from-purple-500/40 to-transparent" />
+        <div className="text-[10px] uppercase tracking-[0.5em] text-slate-700 font-black">
+          Orchestrated by REW Intelligence
+        </div>
       </div>
     </div>
   );