diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,1288 +1,1131 @@
 <!DOCTYPE html>
 <html lang="es">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>NEXUS OMEGA: Neural Interface v9.0</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Navegador Neuronal de Twitter</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
+  <style>
+    body { 
+        scrollbar-width: none; 
+        -ms-overflow-style: none; 
+        background-color: #020205; 
+    }
+    body::-webkit-scrollbar { display: none; }
     
-    <script src="https://cdn.tailwindcss.com"></script>
-    
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
-    
-    <style>
-        :root {
-            --color-bg: #030508;
-            --color-primary: #00f3ff;
-            --color-secondary: #7000ff;
-            --color-accent: #ff0055;
-            --color-warning: #ffaa00;
-            --color-success: #00ff66;
-            --glass-bg: rgba(6, 11, 25, 0.85);
-            --glass-border: rgba(0, 243, 255, 0.15);
-            --hud-font: 'Orbitron', sans-serif;
-            --text-font: 'Rajdhani', sans-serif;
-        }
-
-        * {
-            box-sizing: border-box;
-            user-select: none;
-            -webkit-user-select: none;
-        }
-
-        body, html {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            background-color: var(--color-bg);
-            overflow: hidden;
-            font-family: var(--hud-font);
-            color: #e0faff;
-        }
-
-        body::-webkit-scrollbar {
-            display: none;
-        }
-
-        canvas {
-            display: block;
-            outline: none;
-        }
-
-        .ui-layer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 10;
-        }
-
-        .pointer-events-auto {
-            pointer-events: auto;
-        }
-
-        .glass-panel {
-            background: var(--glass-bg);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--glass-border);
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .glass-panel::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
-            opacity: 0.5;
-        }
-
-        .scanline {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(to bottom, transparent 50%, rgba(0, 243, 255, 0.02) 51%);
-            background-size: 100% 4px;
-            pointer-events: none;
-            z-index: 2;
-        }
-
-        .vignette {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle, transparent 60%, black 100%);
-            pointer-events: none;
-            z-index: 1;
-        }
-
-        @keyframes pulse-glow {
-            0% { box-shadow: 0 0 5px var(--color-primary); }
-            50% { box-shadow: 0 0 20px var(--color-primary); }
-            100% { box-shadow: 0 0 5px var(--color-primary); }
-        }
-
-        @keyframes glitch-anim {
-            0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); }
-            20% { clip-path: inset(92% 0 1% 0); transform: translate(0px, 0px); }
-            40% { clip-path: inset(43% 0 1% 0); transform: translate(2px, -2px); }
-            60% { clip-path: inset(25% 0 58% 0); transform: translate(0px, 0px); }
-            80% { clip-path: inset(54% 0 7% 0); transform: translate(-1px, 1px); }
-            100% { clip-path: inset(58% 0 43% 0); transform: translate(0px, 0px); }
-        }
-
-        .glitch-text {
-            position: relative;
-            display: inline-block;
-        }
-
-        .glitch-text::before, .glitch-text::after {
-            content: attr(data-text);
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: var(--color-bg);
-        }
-
-        .glitch-text::before {
-            left: 2px;
-            text-shadow: -1px 0 #ff00c1;
-            clip: rect(44px, 450px, 56px, 0);
-            animation: glitch-anim 5s infinite linear alternate-reverse;
-        }
-
-        .glitch-text::after {
-            left: -2px;
-            text-shadow: -1px 0 #00fff9;
-            clip: rect(44px, 450px, 56px, 0);
-            animation: glitch-anim 2s infinite linear alternate-reverse;
-        }
-
-        .btn-cyber {
-            background: rgba(0, 243, 255, 0.05);
-            border: 1px solid var(--color-primary);
-            color: var(--color-primary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            font-weight: 700;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            cursor: pointer;
-            clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
-        }
-
-        .btn-cyber:hover {
-            background: rgba(0, 243, 255, 0.2);
-            box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
-            text-shadow: 0 0 8px var(--color-primary);
-        }
-
-        .btn-cyber:disabled {
-            border-color: #555;
-            color: #555;
-            cursor: not-allowed;
-            background: rgba(0,0,0,0.5);
-        }
-
-        .btn-cyber-danger {
-            border-color: var(--color-accent);
-            color: var(--color-accent);
-        }
-
-        .btn-cyber-danger:hover {
-            background: rgba(255, 0, 85, 0.2);
-            box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
-        }
-
-        .mode-active {
-            background: rgba(0, 243, 255, 0.3) !important;
-            box-shadow: 0 0 20px rgba(0, 243, 255, 0.2) inset;
-            border-color: #fff !important;
-            color: #fff !important;
-        }
-
-        input[type="range"] {
-            -webkit-appearance: none;
-            width: 100%;
-            background: transparent;
-        }
-
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            height: 16px;
-            width: 16px;
-            border-radius: 50%;
-            background: var(--color-primary);
-            cursor: pointer;
-            margin-top: -6px;
-            box-shadow: 0 0 10px var(--color-primary);
-        }
-
-        input[type="range"]::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 4px;
-            cursor: pointer;
-            background: #333;
-            border-radius: 2px;
-        }
-
-        .custom-scroll {
-            scrollbar-width: thin;
-            scrollbar-color: var(--color-primary) #111;
-        }
+    .glass-panel {
+        background: rgba(10, 15, 30, 0.75);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+    }
+
+    @keyframes shimmer {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(100%); }
+    }
+    .animate-shimmer {
+        animation: shimmer 2s infinite;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar {
+        width: 4px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+        background: rgba(0,0,0,0.3);
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: #22d3ee;
+        border-radius: 4px;
+    }
+  </style>
+</head>
 
-        .custom-scroll::-webkit-scrollbar {
-            width: 6px;
-        }
+<body class="m-0 overflow-hidden font-[Orbitron] text-slate-200">
 
-        .custom-scroll::-webkit-scrollbar-track {
-            background: #111;
-        }
+  <div id="loginOverlay" class="fixed inset-0 bg-black/95 z-[9999] flex items-center justify-center transition-opacity duration-700 opacity-100">
+    <div id="loginModal" class="glass-panel p-8 rounded-2xl w-full max-w-md text-white relative overflow-hidden border-t border-cyan-500/30">
+        
+        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-70"></div>
+      
+      <div id="authStep1">
+        <h2 class="text-4xl font-bold text-center mb-2 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 drop-shadow-[0_0_15px_rgba(34,211,238,0.5)]">NEXUS</h2>
+        <p class="text-cyan-500/60 text-center mb-8 text-[10px] tracking-[0.3em] uppercase">Visualizador Semántico Neural v2.0</p>
+
+        <button id="btnGoToAnon" class="w-full bg-white/5 hover:bg-white/10 text-cyan-300 border border-cyan-500/20 font-bold py-4 px-4 rounded-lg transition-all flex items-center justify-center gap-3 mb-6 group hover:shadow-[0_0_15px_rgba(34,211,238,0.2)]">
+          <svg class="w-5 h-5 group-hover:scale-110 transition-transform text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+          Entrar como Anónimo
+        </button>
+
+        <div class="relative flex py-2 items-center mb-4">
+          <div class="flex-grow border-t border-white/10"></div>
+          <span class="flex-shrink-0 mx-4 text-gray-500 text-[10px] uppercase tracking-wider">Credenciales de Acceso</span>
+          <div class="flex-grow border-t border-white/10"></div>
+        </div>
 
-        .custom-scroll::-webkit-scrollbar-thumb {
-            background-color: var(--color-primary);
-            border-radius: 6px;
-        }
+        <form id="emailAuthForm" class="space-y-4">
+          <div class="relative group">
+            <input type="email" id="loginEmail" class="w-full p-3 pl-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:border-cyan-500 focus:outline-none text-sm transition-all focus:bg-black/70" placeholder="ID de Usuario (Email)">
+            <div class="absolute inset-0 border border-cyan-500/0 rounded-lg group-hover:border-cyan-500/20 pointer-events-none transition-colors"></div>
+          </div>
+          <div class="relative group">
+            <input type="password" id="loginPassword" class="w-full p-3 pl-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:border-cyan-500 focus:outline-none text-sm transition-all focus:bg-black/70" placeholder="Clave de Acceso">
+             <div class="absolute inset-0 border border-cyan-500/0 rounded-lg group-hover:border-cyan-500/20 pointer-events-none transition-colors"></div>
+          </div>
+          
+          <div class="flex gap-3 pt-2">
+            <button type="button" id="loginButton" class="flex-1 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 py-2 rounded border border-blue-500/30 text-xs font-bold transition-all uppercase tracking-wider hover:shadow-[0_0_10px_rgba(59,130,246,0.3)]">Entrar</button>
+            <button type="button" id="registerButton" class="flex-1 bg-green-600/10 hover:bg-green-600/30 text-green-400 py-2 rounded border border-green-500/30 text-xs font-bold transition-all uppercase tracking-wider hover:shadow-[0_0_10px_rgba(74,222,128,0.3)]">Registrar</button>
+          </div>
+        </form>
+        
+        <p id="loginMessage" class="text-center text-xs mt-4 min-h-[1.5rem] text-red-400 font-bold tracking-wide"></p>
+      </div>
 
-        #loading-bar {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            height: 4px;
-            background: var(--color-primary);
-            width: 0%;
-            transition: width 0.2s ease;
-            box-shadow: 0 0 10px var(--color-primary);
-            z-index: 50;
-        }
+      <div id="authStep2" class="hidden">
+        <h2 class="text-2xl font-bold text-white mb-2 text-center">Identidad Digital</h2>
+        <p class="text-gray-400 text-xs mb-8 text-center">Asigna un nombre clave a tu constelación.</p>
+        
+        <input type="text" id="usernameInput" class="w-full p-4 rounded-lg bg-black/50 border border-white/10 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 transition-all text-lg mb-8 text-center tracking-[0.2em] font-bold" placeholder="NICKNAME">
+        
+        <button id="saveUsernameButton" class="w-full bg-gradient-to-r from-cyan-600 to-blue-700 hover:from-cyan-500 hover:to-blue-600 text-white font-bold py-4 px-4 rounded-lg shadow-[0_0_20px_rgba(6,182,212,0.4)] transition-all uppercase text-sm tracking-widest mb-4">
+          Establecer Enlace Neural
+        </button>
+        
+        <button id="backToStep1" class="w-full mt-2 text-gray-500 text-[10px] hover:text-white transition-colors uppercase tracking-widest">Abortar Secuencia</button>
+      </div>
 
-        .hud-item {
-            background: rgba(0,0,0,0.6);
-            border: 1px solid rgba(255,255,255,0.1);
-            padding: 8px 16px;
-            clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
+    </div>
+  </div>
 
-        .rare-glow {
-            animation: pulse-gold 2s infinite;
-        }
+  <div id="container" class="w-screen h-screen fixed top-0 left-0 bg-[#020205]"></div>
+  
+  <div id="tooltip" class="absolute hidden bg-black/80 text-white px-4 py-3 rounded-none border-l-2 border-cyan-500 z-[101] pointer-events-none text-sm backdrop-blur-md shadow-[0_0_15px_rgba(6,182,212,0.2)] max-w-xs"></div>
 
-        @keyframes pulse-gold {
-            0% { box-shadow: 0 0 5px #ffd700; }
-            50% { box-shadow: 0 0 20px #ffd700; }
-            100% { box-shadow: 0 0 5px #ffd700; }
-        }
+  <div id="ui" class="fixed top-5 left-5 z-[100] glass-panel p-6 rounded-xl max-w-[380px] text-white h-[calc(100vh-40px)] flex flex-col transition-all hidden transform duration-700 translate-x-[-20px] opacity-0" style="opacity: 1; transform: translateX(0);">
+    
+    <div class="flex items-center justify-between mb-6 border-b border-white/10 pb-4">
+      <h1 class="text-lg font-bold text-white flex items-center space-x-3">
+        <div class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse shadow-[0_0_10px_#22d3ee]"></div>
+        <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-blue-500 tracking-[0.2em]">NEXUS</span>
+      </h1>
+      <div class="flex items-center gap-3">
+        <span id="authStatus" class="text-[9px] text-cyan-500/80 uppercase tracking-widest border border-cyan-500/20 px-2 py-1 rounded bg-cyan-900/10"></span>
+        <button id="mainLogoutButton" class="text-red-400/70 hover:text-red-300 text-[10px] uppercase transition-colors font-bold tracking-wider">Salir</button>
+      </div>
+    </div>
 
-        .crt-overlay {
-            background: rgba(18, 16, 16, 0); 
-            opacity: 0.1;
-            position: absolute;
-            inset: 0;
-            z-index: 99;
-            pointer-events: none;
-            background: radial-gradient(circle, rgba(32,32,32,0) 50%, rgba(0,0,0,0.4) 90%), linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%), linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
-            background-size: 100% 2px, 3px 100%;
-        }
-    </style>
-</head>
-<body>
-
-    <div class="scanline"></div>
-    <div class="vignette"></div>
-    <div class="crt-overlay"></div>
-    <div id="loading-bar"></div>
-
-    <div id="login-screen" class="fixed inset-0 z-[1000] flex items-center justify-center bg-black transition-opacity duration-700">
-        <div class="glass-panel p-10 w-full max-w-lg flex flex-col items-center relative">
-            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent"></div>
-            <h1 class="text-5xl font-black mb-2 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 drop-shadow-[0_0_15px_rgba(0,243,255,0.5)] tracking-tighter">NEXUS</h1>
-            <h2 class="text-xs uppercase tracking-[0.5em] text-cyan-500 mb-10">Neural Interface System</h2>
-
-            <div id="auth-forms" class="w-full space-y-6">
-                <div class="flex border-b border-gray-800 mb-6">
-                    <button id="tab-login" class="flex-1 pb-2 text-sm uppercase tracking-widest text-cyan-400 border-b-2 border-cyan-400 transition-all">Acceso</button>
-                    <button id="tab-register" class="flex-1 pb-2 text-sm uppercase tracking-widest text-gray-500 border-b-2 border-transparent hover:text-white transition-all">Registro</button>
-                </div>
-
-                <form id="form-login" class="space-y-4">
-                    <div class="relative group">
-                        <input type="email" id="login-email" class="w-full bg-black/50 border border-gray-800 p-4 text-white focus:border-cyan-500 focus:outline-none transition-all rounded-sm font-mono text-sm" placeholder="IDENTIFICADOR (EMAIL)">
-                        <div class="absolute right-3 top-4 text-cyan-500/50 text-xs">ID</div>
-                    </div>
-                    <div class="relative group">
-                        <input type="password" id="login-pass" class="w-full bg-black/50 border border-gray-800 p-4 text-white focus:border-cyan-500 focus:outline-none transition-all rounded-sm font-mono text-sm" placeholder="CLAVE DE ACCESO">
-                        <div class="absolute right-3 top-4 text-cyan-500/50 text-xs">KEY</div>
-                    </div>
-                    <button type="submit" id="btn-submit-login" class="btn-cyber w-full py-4 mt-4">Iniciar Secuencia</button>
-                </form>
-
-                <form id="form-register" class="space-y-4 hidden">
-                    <div class="relative group">
-                        <input type="email" id="reg-email" class="w-full bg-black/50 border border-gray-800 p-4 text-white focus:border-cyan-500 focus:outline-none transition-all rounded-sm font-mono text-sm" placeholder="NUEVO IDENTIFICADOR">
-                    </div>
-                    <div class="relative group">
-                        <input type="password" id="reg-pass" class="w-full bg-black/50 border border-gray-800 p-4 text-white focus:border-cyan-500 focus:outline-none transition-all rounded-sm font-mono text-sm" placeholder="DEFINIR CLAVE">
-                    </div>
-                    <button type="submit" id="btn-submit-reg" class="btn-cyber w-full py-4 mt-4 text-green-400 border-green-500">Crear Registro</button>
-                </form>
-
-                <div class="relative flex py-4 items-center">
-                    <div class="flex-grow border-t border-gray-800"></div>
-                    <span class="flex-shrink-0 mx-4 text-gray-600 text-[10px] uppercase">Opciones Alternativas</span>
-                    <div class="flex-grow border-t border-gray-800"></div>
-                </div>
-
-                <button id="btn-anon" class="w-full border border-gray-700 hover:border-white text-gray-400 hover:text-white py-3 text-xs uppercase tracking-widest transition-all">Modo Fantasma (Anónimo)</button>
-            </div>
-
-            <div id="username-setup" class="w-full hidden text-center">
-                <p class="text-cyan-300 text-sm mb-6 uppercase tracking-wider">Establecer Alias de Red</p>
-                <input type="text" id="setup-name" class="w-full bg-black/50 border border-cyan-500/50 p-4 text-center text-xl text-white font-bold mb-6 focus:outline-none focus:shadow-[0_0_20px_rgba(0,243,255,0.2)]" placeholder="ALIAS">
-                <button id="btn-save-profile" class="btn-cyber w-full py-4">Confirmar Identidad</button>
-            </div>
-
-            <p id="auth-msg" class="mt-6 text-red-500 text-xs font-mono min-h-[20px] text-center uppercase tracking-wide"></p>
-        </div>
+    <div class="relative mb-5 group">
+        <div class="absolute -inset-0.5 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-lg blur opacity-20 group-hover:opacity-60 transition duration-500"></div>
+        <input type="text" id="topicInput" class="relative w-full p-4 rounded-lg bg-black/80 text-white border border-white/10 focus:outline-none focus:border-cyan-500/50 text-sm placeholder-gray-500 font-mono" placeholder="Ingresar semilla semántica...">
     </div>
 
-    <div class="ui-layer flex flex-col justify-between p-4 pointer-events-none opacity-0 transition-opacity duration-1000" id="main-ui">
+    <div class="space-y-5 mb-6 px-1">
+      <div>
+        <label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 1 <span id="level1Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">10</span></label>
+        <input type="range" id="level1Slider" min="1" max="15" value="10" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400">
+      </div>
+      <div>
+        <label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 2 <span id="level2Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">5</span></label>
+        <input type="range" id="level2Slider" min="5" max="8" value="5" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400">
+      </div>
+      <div>
+        <label class="text-[10px] text-gray-400 flex justify-between uppercase tracking-wider mb-2">Densidad Nivel 3 <span id="level3Value" class="text-cyan-400 font-mono bg-cyan-900/20 px-1 rounded">3</span></label>
+        <input type="range" id="level3Slider" min="1" max="3" value="3" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400">
+      </div>
+    </div>
 
-        <div class="flex justify-between items-start w-full pointer-events-auto">
-            <div class="glass-panel p-4 rounded-br-2xl max-w-sm w-full transform transition-transform duration-500" id="control-panel">
-                
-                <div class="flex items-center justify-between mb-4 border-b border-white/10 pb-2">
-                    <div class="flex items-center gap-2">
-                        <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                        <span id="user-display" class="font-bold text-cyan-300 text-sm tracking-widest uppercase">OFFLINE</span>
-                    </div>
-                    <button id="btn-logout" class="text-[10px] text-red-400 hover:text-red-200 uppercase font-bold border border-red-900/50 px-2 py-1 rounded hover:bg-red-900/20 transition-all">Abort</button>
-                </div>
-
-                <div class="grid grid-cols-4 gap-1 mb-6">
-                    <button class="mode-btn btn-cyber text-[8px] py-2 flex flex-col items-center gap-1 mode-active" data-mode="explore">
-                        <span>🔭</span><span>Explorar</span>
-                    </button>
-                    <button class="mode-btn btn-cyber text-[8px] py-2 flex flex-col items-center gap-1" data-mode="bridge">
-                        <span>🌉</span><span>Puente</span>
-                    </button>
-                    <button class="mode-btn btn-cyber text-[8px] py-2 flex flex-col items-center gap-1" data-mode="miner">
-                        <span>⛏️</span><span>Minero</span>
-                    </button>
-                    <button class="mode-btn btn-cyber text-[8px] py-2 flex flex-col items-center gap-1" data-mode="defense">
-                        <span>🛡️</span><span>Defensa</span>
-                    </button>
-                </div>
-
-                <div class="relative mb-4">
-                    <input type="text" id="input-topic" class="w-full bg-black/60 border border-gray-700 text-white p-3 text-xs font-mono focus:border-cyan-500 focus:outline-none placeholder-gray-600 uppercase" placeholder="SEMILLA SEMÁNTICA...">
-                    <div class="absolute right-2 top-3 text-[10px] text-gray-500">REQ</div>
-                </div>
-
-                <div id="bridge-target-container" class="relative mb-4 hidden">
-                    <input type="text" id="input-target" class="w-full bg-black/60 border border-purple-700 text-white p-3 text-xs font-mono focus:border-purple-500 focus:outline-none placeholder-gray-600 uppercase" placeholder="OBJETIVO DE CONEXIÓN...">
-                    <div class="absolute right-2 top-3 text-[10px] text-purple-500">DST</div>
-                </div>
-
-                <div class="space-y-4 mb-6">
-                    <div>
-                        <div class="flex justify-between text-[9px] text-cyan-500 uppercase mb-1">
-                            <span>Densidad N1</span>
-                            <span id="val-d1">8</span>
-                        </div>
-                        <input type="range" id="slider-d1" min="1" max="12" value="8">
-                    </div>
-                    <div>
-                        <div class="flex justify-between text-[9px] text-cyan-500 uppercase mb-1">
-                            <span>Densidad N2</span>
-                            <span id="val-d2">4</span>
-                        </div>
-                        <input type="range" id="slider-d2" min="1" max="6" value="4">
-                    </div>
-                    <div>
-                        <div class="flex justify-between text-[9px] text-cyan-500 uppercase mb-1">
-                            <span>Densidad N3</span>
-                            <span id="val-d3">2</span>
-                        </div>
-                        <input type="range" id="slider-d3" min="1" max="4" value="2">
-                    </div>
-                </div>
-
-                <div class="border-t border-white/10 pt-4 mb-4">
-                    <button id="btn-config-api" class="text-[10px] text-gray-400 uppercase hover:text-white flex justify-between w-full mb-2">
-                        <span>Configuración Neural (API)</span>
-                        <span>+</span>
-                    </button>
-                    <div id="panel-api" class="hidden">
-                        <input type="password" id="input-api-key" class="w-full bg-black/80 border border-gray-800 p-2 text-[10px] text-gray-300 font-mono mb-2" placeholder="CLAVE GEMINI">
-                        <button id="btn-save-api" class="w-full bg-gray-800 hover:bg-gray-700 text-[10px] py-1 text-gray-300">GUARDAR ENLACE</button>
-                    </div>
-                </div>
-
-                <button id="btn-visualize" class="btn-cyber w-full py-4 text-sm relative group overflow-hidden">
-                    <span class="relative z-10 flex items-center justify-center gap-2">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
-                        EJECUTAR ANÁLISIS
-                    </span>
-                    <div class="absolute inset-0 bg-cyan-500/20 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
-                </button>
-
-                <div id="log-console" class="mt-4 h-24 bg-black/80 border border-gray-800 p-2 font-mono text-[9px] text-gray-400 overflow-y-auto custom-scroll">
-                    <div class="text-green-500">> SISTEMA INICIADO...</div>
-                    <div class="text-cyan-500">> ESPERANDO INPUT...</div>
-                </div>
-            </div>
-
-            <div class="flex flex-col gap-2 items-end">
-                <div id="hud-stats" class="flex gap-2 pointer-events-auto">
-                    <div class="hud-item">
-                        <span class="text-yellow-400 text-lg">⚡</span>
-                        <div class="flex flex-col">
-                            <span class="text-[8px] text-gray-400 uppercase">Energía</span>
-                            <span id="stat-energy" class="font-mono text-lg font-bold leading-none text-white">100</span>
-                        </div>
-                    </div>
-                    <div class="hud-item">
-                        <span class="text-purple-400 text-lg">💠</span>
-                        <div class="flex flex-col">
-                            <span class="text-[8px] text-gray-400 uppercase">XP</span>
-                            <span id="stat-xp" class="font-mono text-lg font-bold leading-none text-white">0</span>
-                        </div>
-                    </div>
-                    <div class="hud-item border-cyan-500/50">
-                        <span class="text-cyan-400 text-lg">🎖️</span>
-                        <div class="flex flex-col">
-                            <span class="text-[8px] text-gray-400 uppercase">Rango</span>
-                            <span id="stat-rank" class="font-mono text-xs font-bold leading-none text-cyan-300 uppercase">Novato</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div id="mission-panel" class="glass-panel p-4 rounded-bl-2xl w-64 border-r-4 border-r-yellow-500 pointer-events-auto mt-2">
-                    <h3 class="text-yellow-500 text-[10px] uppercase font-bold tracking-widest mb-1">Misión Activa</h3>
-                    <p id="mission-desc" class="text-xs text-gray-300 leading-tight">Explora la red semántica libremente para recolectar datos.</p>
-                </div>
-            </div>
+    <details class="mb-5 bg-black/40 rounded border border-white/5 overflow-hidden group">
+      <summary class="cursor-pointer text-[10px] text-blue-300/80 font-bold p-3 uppercase tracking-wide hover:bg-white/5 hover:text-cyan-300 transition-colors list-none flex justify-between items-center">
+        <span>Configuración API</span>
+        <span class="text-xs group-open:rotate-180 transition-transform duration-300 text-cyan-500">▼</span>
+      </summary>
+      <div class="p-4 space-y-3 border-t border-white/5 bg-black/60">
+        <div>
+          <label class="block text-[9px] text-gray-500 mb-1 uppercase tracking-widest">Gemini API Key</label>
+          <input type="password" id="geminiKeyInput" class="w-full p-2 rounded bg-black/50 text-white border border-white/10 text-xs focus:border-cyan-500/50 focus:outline-none font-mono tracking-tighter" placeholder="Pegar Key aquí...">
         </div>
-
-        <div class="flex justify-between items-end w-full pointer-events-auto">
-            <div class="glass-panel w-64 h-48 rounded-tr-2xl flex flex-col pointer-events-auto relative group">
-                <div class="absolute top-0 left-0 bg-white/5 w-full h-6 flex items-center px-2 border-b border-white/5">
-                    <span class="text-[9px] text-gray-500 uppercase tracking-widest">Radar Galáctico</span>
-                </div>
-                <div class="flex-1 relative bg-black/80 mt-6">
-                    <canvas id="minimap-canvas" width="256" height="166" class="w-full h-full cursor-crosshair opacity-80"></canvas>
-                    <div class="absolute bottom-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <button id="zoom-in" class="w-5 h-5 bg-gray-800 text-white text-xs flex items-center justify-center border border-gray-600">+</button>
-                        <button id="zoom-out" class="w-5 h-5 bg-gray-800 text-white text-xs flex items-center justify-center border border-gray-600">-</button>
-                    </div>
-                </div>
-            </div>
-
-            <div id="vault-panel" class="glass-panel max-w-md w-full p-4 rounded-tl-2xl hidden pointer-events-auto">
-                <div class="flex justify-between items-center mb-2 border-b border-yellow-500/30 pb-1">
-                    <h3 class="text-yellow-500 text-xs uppercase font-bold tracking-widest">Bóveda Semántica</h3>
-                    <span id="vault-count" class="text-[9px] text-gray-400">0 ITEMS</span>
-                </div>
-                <div id="vault-grid" class="flex flex-wrap gap-2 max-h-32 overflow-y-auto custom-scroll">
-                </div>
-            </div>
+        <div class="flex items-center gap-3 justify-end">
+          <span id="geminiKeyStatus" class="text-[9px] text-green-400 italic font-mono"></span>
+          <button id="saveGeminiKeyBtn" class="bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded text-gray-300 text-[10px] border border-white/10 transition-colors uppercase tracking-wider hover:border-cyan-500/30 hover:text-cyan-300">Guardar</button>
         </div>
+      </div>
+    </details>
+
+    <div class="flex gap-2 mb-2">
+      <button id="visualizeButton" class="relative w-full overflow-hidden bg-cyan-900/20 hover:bg-cyan-800/40 text-cyan-300 font-bold py-4 px-4 rounded-lg border border-cyan-500/30 transition-all flex items-center justify-center space-x-3 group hover:shadow-[0_0_15px_rgba(34,211,238,0.2)]">
+        <div class="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:animate-shimmer"></div>
+        <svg class="w-4 h-4 text-cyan-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+        </svg>
+        <span class="uppercase tracking-[0.2em] text-xs">Ejecutar Análisis</span>
+      </button>
     </div>
 
-    <div id="tooltip-3d" class="fixed hidden pointer-events-none z-50 bg-black/90 border border-cyan-500 p-2 max-w-xs shadow-[0_0_15px_rgba(0,243,255,0.3)]">
-        <div id="tt-title" class="text-cyan-300 font-bold text-sm uppercase tracking-wider mb-1"></div>
-        <div id="tt-sub" class="text-[10px] text-gray-400 font-mono"></div>
+    <div id="progressBarContainer" class="w-full bg-gray-900 rounded-full h-1 mb-4 overflow-hidden hidden border border-white/10">
+      <div id="progressBar" class="bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-600 h-1 w-0 shadow-[0_0_10px_#22d3ee]"></div>
     </div>
 
-    <script type="module">
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
-        import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInAnonymously, signOut, updateProfile } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
-        import { getFirestore, doc, setDoc, getDoc, updateDoc, arrayUnion, onSnapshot, collection, query, limit, orderBy, addDoc } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
-        import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";
-        import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js";
-        import { FontLoader } from "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/FontLoader.js";
-        import { TextGeometry } from "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/geometries/TextGeometry.js";
-        import { EffectComposer } from "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/postprocessing/EffectComposer.js";
-        import { RenderPass } from "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/postprocessing/RenderPass.js";
-        import { UnrealBloomPass } from "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/postprocessing/UnrealBloomPass.js";
-
-        // Configuración de Firebase - ¡Asegúrate de agregar tu dominio de Hugging Face en Authentication > Settings!
-        const FB_CONFIG = {
-            apiKey: "AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
-            authDomain: "neuronal-1f3b9.firebaseapp.com",
-            projectId: "neuronal-1f3b9",
-            storageBucket: "neuronal-1f3b9.firebasestorage.app",
-            messagingSenderId: "208887839866",
-            appId: "1:208887839866:web:adbb697dd0b63195b10fc3"
-        };
+    <div id="userListContainer" class="flex-1 flex flex-col min-h-0 bg-black/40 rounded border border-white/5 mb-4 relative overflow-hidden group">
+      <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-b from-black/80 to-transparent pointer-events-none z-10"></div>
+      <h2 class="font-bold text-[9px] text-gray-500 mb-2 uppercase tracking-[0.2em] p-3 border-b border-white/5 sticky top-0 bg-black/40 backdrop-blur-sm">Exploradores Activos</h2>
+      <div id="userList" class="overflow-y-auto pr-1 space-y-1 custom-scrollbar text-xs p-2"></div>
+      <div class="absolute bottom-0 left-0 w-full h-4 bg-gradient-to-t from-black/80 to-transparent pointer-events-none z-10"></div>
+    </div>
 
-        const DEF_GEMINI = 'AIzaSyDmoQNpzgzW21f_WFCU9YbaAeI1fdOJMlo';
-
-        const STATE = {
-            user: null,
-            profile: null,
-            mode: 'explore',
-            energy: 100,
-            xp: 0,
-            rank: 'Novato',
-            geminiKey: localStorage.getItem('NEXUS_KEY') || DEF_GEMINI,
-            nodes: [],
-            links: [],
-            comet: { pos: new THREE.Vector3(), vel: new THREE.Vector3(), target: null },
-            bridgeTarget: null,
-            isProcessing: false,
-            maps: {},
-            defenseHP: 100
-        };
+    <div id="minimapContainer" class="shrink-0 relative group border-t border-white/5 pt-4">
+      <div class="flex justify-between items-center mb-1 absolute top-6 right-2 z-10 gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+        <button id="zoomOutButton" class="w-6 h-6 bg-black/80 hover:bg-cyan-900/50 rounded border border-white/20 text-white flex items-center justify-center text-xs backdrop-blur-sm transition-colors">-</button>
+        <button id="zoomInButton" class="w-6 h-6 bg-black/80 hover:bg-cyan-900/50 rounded border border-white/20 text-white flex items-center justify-center text-xs backdrop-blur-sm transition-colors">+</button>
+      </div>
+      <canvas id="minimap" width="340" height="130" class="w-full h-[130px] bg-black/60 rounded border border-white/10 cursor-crosshair shadow-inner"></canvas>
+      <div class="text-[9px] text-center text-cyan-500/40 mt-2 uppercase tracking-[0.3em]">Radar Galáctico</div>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/geometries/TextGeometry.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/FontLoader.js"></script>
+  
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
+
+  <script type="module">
+    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+    import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-analytics.js";
+    import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInAnonymously, signOut, setPersistence, browserLocalPersistence } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
+    import { getFirestore, doc, addDoc, onSnapshot, collection, setDoc, getDoc, query, setLogLevel } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+
+    const firebaseConfig = {
+      apiKey: "AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
+      authDomain: "neuronal-1f3b9.firebaseapp.com",
+      projectId: "neuronal-1f3b9",
+      storageBucket: "neuronal-1f3b9.firebasestorage.app",
+      messagingSenderId: "208887839866",
+      appId: "1:208887839866:web:adbb697dd0b63195b10fc3",
+      measurementId: "G-102SEBLQFJ"
+    };
+
+    const DEFAULT_GEMINI_KEY = 'AIzaSyDmoQNpzgzW21f_WFCU9YbaAeI1fdOJMlo'; 
+    function getLocalGeminiKey() {
+      try { return localStorage.getItem('GEMINI_API_KEY') || DEFAULT_GEMINI_KEY; } catch { return DEFAULT_GEMINI_KEY; }
+    }
+    function setLocalGeminiKey(k) {
+      try { localStorage.setItem('GEMINI_API_KEY', k || ''); } catch {}
+    }
+
+    const THREE = window.THREE;
+    const OrbitControls = THREE.OrbitControls;
+    const TextGeometry = THREE.TextGeometry;
+    const FontLoader = THREE.FontLoader;
+
+    let scene, camera, renderer, controls, raycaster, mouse;
+    let composer; 
+    let hashtagGroup, tooltip;
+    let font;
+    let clock = new THREE.Clock();
+
+    let cometGroup, cometHead, cometLight, cometText;
+    let cometParticlesGeometry, cometParticlesMaterial, cometParticlesMesh;
+    let cometParticlesData = []; 
+    const COMET_PARTICLE_COUNT = 400; 
+    const COMET_WORDS = ["NEXUS", "DATA", "VOID", "SIGNAL", "CYBER", "PULSE", "NODE", "FLUX", "SYNTH", "CORE", "ORBIT", "LINK"];
+    let cometAngle = 0;
+    let userCentroidForComet = new THREE.Vector3(0,0,0);
+
+    let bgParticles;
+
+    let db, auth, analytics, userId = null, appId = "neuronal-1f3b9", userProfile = null;
+    let userMaps = {}, userProfileCache = {}, allMapsDataCache = {};
+    let isAuthReady = false, isFontReady = false;
+    let minimapCtx, minimapDotCoords = [], minimapScale = 0.025;
+    const MINIMAP_DOT_SIZE = 2;
+    let intersected = {};
+
+    const isHFStatic = /\.hf\.space$/.test(location.hostname);
+    let authMode = null;
+
+    const normalizeString = (str) => {
+      if (!str) return "";
+      return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+    };
+
+    const loader = new FontLoader();
+    loader.load('https://cdn.jsdelivr.net/npm/three@0.128.0/examples/fonts/helvetiker_regular.typeface.json', (loadedFont) => {
+        font = loadedFont;
+        isFontReady = true;
+        checkAppReady();
+    });
+
+    initFirebase();
+    
+    const gkInput = document.getElementById('geminiKeyInput');
+    const gkBtn = document.getElementById('saveGeminiKeyBtn');
+    const gkStatus = document.getElementById('geminiKeyStatus');
+    if (gkInput && gkBtn) {
+       const existing = getLocalGeminiKey();
+       if(existing && existing !== DEFAULT_GEMINI_KEY) gkInput.value = existing;
+       gkBtn.addEventListener('click', (e) => {
+         e.preventDefault();
+         setLocalGeminiKey(gkInput.value.trim());
+         gkStatus.textContent = 'GUARDADO';
+         setTimeout(() => gkStatus.textContent = '', 2000);
+       });
+    }
+
+    async function initFirebase() {
+        try {
+            const app = initializeApp(firebaseConfig);
+            db = getFirestore(app);
+            auth = getAuth(app);
+            analytics = getAnalytics(app);
+            setLogLevel('Silent'); 
+            
+            const els = {
+                msg: document.getElementById('loginMessage'),
+                overlay: document.getElementById('loginOverlay'),
+                step1: document.getElementById('authStep1'),
+                step2: document.getElementById('authStep2'),
+                email: document.getElementById('loginEmail'),
+                pass: document.getElementById('loginPassword'),
+                loginBtn: document.getElementById('loginButton'),
+                regBtn: document.getElementById('registerButton'),
+                anonBtn: document.getElementById('btnGoToAnon'),
+                saveUserBtn: document.getElementById('saveUsernameButton'),
+                userInput: document.getElementById('usernameInput'),
+                backBtn: document.getElementById('backToStep1'),
+                logoutBtn: document.getElementById('mainLogoutButton'),
+                ui: document.getElementById('ui')
+            };
 
-        let app, auth, db;
-        let scene, camera, renderer, composer, controls;
-        let raycaster, mouse = new THREE.Vector2();
-        let font;
-        let particleSystem, cometSystem, explosionSystem;
-        let nodeGroup, linkGroup, cometGroup;
-        let clock = new THREE.Clock();
-        let minimapCtx, mmScale = 0.05;
-
-        // Referencias del DOM
-        const DOM = {
-            loginScreen: document.getElementById('login-screen'),
-            mainUI: document.getElementById('main-ui'),
-            authForms: document.getElementById('auth-forms'),
-            userSetup: document.getElementById('username-setup'),
-            loginForm: document.getElementById('form-login'),
-            regForm: document.getElementById('form-register'),
-            tabLogin: document.getElementById('tab-login'),
-            tabReg: document.getElementById('tab-register'),
-            btnAnon: document.getElementById('btn-anon'),
-            msgAuth: document.getElementById('auth-msg'),
-            userDisplay: document.getElementById('user-display'),
-            inputTopic: document.getElementById('input-topic'),
-            inputTarget: document.getElementById('input-target'),
-            targetContainer: document.getElementById('bridge-target-container'),
-            btnViz: document.getElementById('btn-visualize'),
-            sliders: [document.getElementById('slider-d1'), document.getElementById('slider-d2'), document.getElementById('slider-d3')],
-            sliderVals: [document.getElementById('val-d1'), document.getElementById('val-d2'), document.getElementById('val-d3')],
-            console: document.getElementById('log-console'),
-            vaultPanel: document.getElementById('vault-panel'),
-            vaultGrid: document.getElementById('vault-grid'),
-            vaultCount: document.getElementById('vault-count'),
-            statEnergy: document.getElementById('stat-energy'),
-            statXP: document.getElementById('stat-xp'),
-            statRank: document.getElementById('stat-rank'),
-            missionDesc: document.getElementById('mission-desc'),
-            tooltip: document.getElementById('tooltip-3d'),
-            ttTitle: document.getElementById('tt-title'),
-            ttSub: document.getElementById('tt-sub'),
-            loadingBar: document.getElementById('loading-bar')
-        };
+            els.regBtn.addEventListener('click', async () => {
+                if(els.email.value.length < 6) {
+                    els.msg.innerText = "Email/Pass muy corto"; return;
+                }
+                els.msg.innerText = "Procesando registro...";
+                authMode = 'email';
+                try {
+                    await setPersistence(auth, browserLocalPersistence);
+                    await createUserWithEmailAndPassword(auth, els.email.value, els.pass.value);
+                } catch(e) { els.msg.innerText = "Error: " + e.message; }
+            });
 
-        // Utilidad de Logs
-        function log(msg, type='info') {
-            const div = document.createElement('div');
-            div.textContent = `> ${msg}`;
-            div.className = type === 'err' ? 'text-red-500' : (type === 'success' ? 'text-green-500' : 'text-gray-400');
-            DOM.console.appendChild(div);
-            DOM.console.scrollTop = DOM.console.scrollHeight;
-        }
+            els.loginBtn.addEventListener('click', async () => {
+                els.msg.innerText = "Autenticando...";
+                authMode = 'email';
+                try {
+                     await setPersistence(auth, browserLocalPersistence);
+                     await signInWithEmailAndPassword(auth, els.email.value, els.pass.value);
+                } catch(e) { els.msg.innerText = "Error: " + e.message; }
+            });
 
-        // --- SISTEMA FIREBASE ---
-        function initFirebase() {
-            app = initializeApp(FB_CONFIG);
-            auth = getAuth(app);
-            db = getFirestore(app);
+            els.anonBtn.addEventListener('click', () => {
+                authMode = 'anonymous';
+                els.step1.classList.add('hidden');
+                els.step2.classList.remove('hidden');
+            });
 
-            // Listener de Auth Global
-            onAuthStateChanged(auth, async (u) => {
-                if (u) {
-                    STATE.user = u;
-                    // Transición suave al entrar
-                    DOM.loginScreen.classList.add('opacity-0', 'pointer-events-none');
-                    setTimeout(() => DOM.loginScreen.classList.add('hidden'), 700);
-                    
-                    DOM.mainUI.classList.remove('opacity-0');
-                    await loadUserProfile(u.uid);
-                    init3D();
-                    subscribeToMaps();
-                    log("CONEXIÓN ESTABLECIDA.", "success");
-                } else {
-                    // Mostrar login si no hay usuario
-                    DOM.loginScreen.classList.remove('hidden', 'opacity-0', 'pointer-events-none');
-                    DOM.mainUI.classList.add('opacity-0');
+            els.backBtn.addEventListener('click', () => {
+                els.step2.classList.add('hidden');
+                els.step1.classList.remove('hidden');
+                els.msg.innerText = "";
+            });
+
+            els.saveUserBtn.addEventListener('click', async () => {
+                const name = normalizeString(els.userInput.value.trim());
+                if(name.length < 3) {
+                    els.userInput.classList.add('border-red-500'); return;
+                }
+                els.userInput.classList.remove('border-red-500');
+                els.saveUserBtn.innerText = "ESTABLECIENDO ENLACE...";
+                els.saveUserBtn.disabled = true;
+                try {
+                    if(authMode === 'anonymous') await signInAnonymously(auth);
+                    if(auth.currentUser) {
+                        await saveUserProfile(auth.currentUser.uid, name);
+                        els.overlay.style.opacity = '0';
+                        setTimeout(() => els.overlay.style.display = 'none', 700);
+                        initScene();
+                        loadAllMaps();
+                        els.ui.classList.remove('hidden');
+                        setTimeout(() => {
+                           els.ui.style.transform = 'translateX(0)';
+                           els.ui.style.opacity = '1';
+                        }, 100);
+                    }
+                } catch(e) {
+                    els.saveUserBtn.innerText = "ERROR DE CONEXIÓN";
+                    els.saveUserBtn.disabled = false;
+                    console.error(e);
                 }
             });
-        }
 
-        async function loadUserProfile(uid) {
-            const ref = doc(db, 'artifacts', FB_CONFIG.projectId, 'users', uid, 'profile', 'data');
-            try {
-                const snap = await getDoc(ref);
-                if (snap.exists()) {
-                    STATE.profile = snap.data();
-                    STATE.xp = STATE.profile.xp || 0;
-                    STATE.energy = STATE.profile.energy || 100;
-                    STATE.rank = STATE.profile.rank || 'Novato';
-                    updateHUD();
-                    DOM.userDisplay.textContent = STATE.profile.username;
-                } else {
-                    // Si es nuevo usuario pero autenticado (email/anon)
-                    if (!auth.currentUser.isAnonymous) {
-                        // Si es email, mostrar setup de nombre
-                        DOM.loginScreen.classList.remove('hidden', 'opacity-0', 'pointer-events-none');
-                        DOM.authForms.classList.add('hidden');
-                        DOM.userSetup.classList.remove('hidden');
+            els.logoutBtn.addEventListener('click', async () => { await signOut(auth); location.reload(); });
+
+            onAuthStateChanged(auth, async (user) => {
+                if(user) {
+                    userId = user.uid;
+                    isAuthReady = true;
+                    await fetchUserProfile(userId);
+                    if(userProfile) {
+                        els.overlay.style.opacity = '0';
+                        setTimeout(() => els.overlay.style.display = 'none', 700);
+                        els.ui.classList.remove('hidden');
+                        setTimeout(() => {
+                           els.ui.style.transform = 'translateX(0)';
+                           els.ui.style.opacity = '1';
+                        }, 100);
+                        document.getElementById('authStatus').textContent = userProfile.username;
+                        if(!scene) { initScene(); loadAllMaps(); }
                     } else {
-                        // Si es anónimo, asignar nombre temporal
-                        DOM.userDisplay.textContent = "ANON-" + uid.substr(0,4);
-                        saveProfile("ANON-" + uid.substr(0,4));
+                        els.step1.classList.add('hidden');
+                        els.step2.classList.remove('hidden');
+                        if(authMode === 'email') els.userInput.focus();
                     }
+                } else {
+                    els.overlay.style.display = 'flex';
+                    els.overlay.style.opacity = '1';
+                    els.step1.classList.remove('hidden');
+                    els.step2.classList.add('hidden');
+                    els.ui.classList.add('hidden');
                 }
-            } catch(e) {
-                console.error("Error cargando perfil:", e);
-                // Fallback para errores de permisos
-                DOM.userDisplay.textContent = "GHOST MODE";
-            }
-        }
+            });
 
-        async function saveProfile(username) {
-            if(!auth.currentUser) return;
-            const uid = auth.currentUser.uid;
-            const data = { username, xp: 0, energy: 100, rank: 'Novato', inventory: [] };
-            try {
-                await setDoc(doc(db, 'artifacts', FB_CONFIG.projectId, 'users', uid, 'profile', 'data'), data);
-                STATE.profile = data;
-                DOM.userDisplay.textContent = username;
-                
-                // Forzar cierre de login si estaba abierto
-                DOM.loginScreen.classList.add('opacity-0', 'pointer-events-none');
-                setTimeout(() => DOM.loginScreen.classList.add('hidden'), 700);
-                DOM.mainUI.classList.remove('opacity-0');
-                
-                init3D();
-                subscribeToMaps();
-            } catch (e) {
-                console.error("Error guardando perfil:", e);
-            }
-        }
+        } catch (e) { console.error("Firebase Error", e); }
+    }
+
+    async function fetchUserProfile(uid) {
+        if(!db) return;
+        try {
+            const snap = await getDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'));
+            if(snap.exists()) { userProfile = snap.data(); userProfileCache[uid] = userProfile; }
+        } catch {}
+    }
+    async function saveUserProfile(uid, name) {
+        if(!db) return;
+        await setDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'), { username: name });
+        userProfile = { username: name };
+        userProfileCache[uid] = userProfile;
+        document.getElementById('authStatus').textContent = name;
+    }
+    async function getProfile(uid) {
+        if(userProfileCache[uid]) return userProfileCache[uid];
+        try {
+            const snap = await getDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'));
+            if(snap.exists()) { userProfileCache[uid] = snap.data(); return snap.data(); }
+        } catch {}
+        return null;
+    }
+
+    function checkAppReady() { if(isAuthReady && isFontReady && userProfile) { initScene(); loadAllMaps(); } }
+
+    function initScene() {
+        if(scene) return;
+        scene = new THREE.Scene();
+        scene.fog = new THREE.FogExp2(0x020205, 0.005); 
+
+        camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 2500);
+        camera.position.set(0, 5, 30);
+
+        renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "high-performance" }); 
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)); 
+        renderer.toneMapping = THREE.ReinhardToneMapping;
+        renderer.toneMappingExposure = 1.2;
+        document.getElementById('container').appendChild(renderer.domElement);
+
+        tooltip = document.getElementById('tooltip');
+
+        controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.04; 
+        controls.rotateSpeed = 0.5;
+        controls.zoomSpeed = 0.7;
+        controls.maxDistance = 600;
+        controls.target.set(0,0,0);
+        
+        scene.add(new THREE.AmbientLight(0x404040, 1.0));
+        const dirLight = new THREE.DirectionalLight(0xaaccff, 1.2);
+        dirLight.position.set(50, 80, 50);
+        scene.add(dirLight);
 
-        // --- HANDLERS DE AUTENTICACIÓN (Fix para Hugging Face) ---
+        const renderScene = new THREE.RenderPass(scene, camera);
+        
+        const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
+        bloomPass.threshold = 0.15; 
+        bloomPass.strength = 1.4;   
+        bloomPass.radius = 0.6;     
         
-        // Login con Email
-        DOM.loginForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const btn = document.getElementById('btn-submit-login');
-            const originalText = btn.textContent;
-            btn.textContent = "VERIFICANDO...";
-            btn.disabled = true;
-            DOM.msgAuth.textContent = "";
+        composer = new THREE.EffectComposer(renderer);
+        composer.addPass(renderScene);
+        composer.addPass(bloomPass);
 
-            try {
-                await signInWithEmailAndPassword(auth, document.getElementById('login-email').value, document.getElementById('login-pass').value);
-                // El listener onAuthStateChanged manejará la transición
-            } catch (err) { 
-                console.error(err);
-                DOM.msgAuth.textContent = "Error: " + err.message;
-                btn.textContent = originalText;
-                btn.disabled = false;
-            }
-        });
+        raycaster = new THREE.Raycaster();
+        mouse = new THREE.Vector2();
+        
+        hashtagGroup = new THREE.Group();
+        scene.add(hashtagGroup);
 
-        // Registro con Email
-        DOM.regForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const btn = document.getElementById('btn-submit-reg');
-            const originalText = btn.textContent;
-            btn.textContent = "CREANDO...";
-            btn.disabled = true;
-            DOM.msgAuth.textContent = "";
+        createAdvancedBackground();
+        initAdvancedComet();
 
-            try {
-                await createUserWithEmailAndPassword(auth, document.getElementById('reg-email').value, document.getElementById('reg-pass').value);
-                DOM.authForms.classList.add('hidden');
-                DOM.userSetup.classList.remove('hidden');
-            } catch (err) { 
-                console.error(err);
-                DOM.msgAuth.textContent = "Error: " + err.message;
-                btn.textContent = originalText;
-                btn.disabled = false;
-            }
-        });
+        const visBtn = document.getElementById('visualizeButton');
+        if(!visBtn.dataset.bound) {
+            visBtn.addEventListener('click', handleAnalysisAndVisualization);
+            visBtn.dataset.bound = '1';
+        }
 
-        // Login Anónimo
-        DOM.btnAnon.addEventListener('click', async () => {
-            DOM.btnAnon.textContent = "CONECTANDO...";
-            DOM.btnAnon.disabled = true;
-            try {
-                await signInAnonymously(auth);
-            } catch (error) {
-                DOM.btnAnon.textContent = "Modo Fantasma (Anónimo)";
-                DOM.btnAnon.disabled = false;
-                DOM.msgAuth.textContent = "Error Anónimo: " + error.message;
-                console.error(error);
-            }
+        ['level1', 'level2', 'level3'].forEach(l => {
+            document.getElementById(`${l}Slider`).addEventListener('input', e => document.getElementById(`${l}Value`).innerText = e.target.value);
         });
 
-        // UI Tabs
-        DOM.tabLogin.addEventListener('click', (e) => {
-            e.preventDefault();
-            DOM.loginForm.classList.remove('hidden');
-            DOM.regForm.classList.add('hidden');
-            DOM.tabLogin.classList.add('border-cyan-400', 'text-cyan-400');
-            DOM.tabLogin.classList.remove('border-transparent', 'text-gray-500');
-            DOM.tabReg.classList.remove('border-cyan-400', 'text-cyan-400');
-            DOM.tabReg.classList.add('border-transparent', 'text-gray-500');
-        });
+        window.addEventListener('resize', onWindowResize);
+        window.addEventListener('mousemove', onPointerMove);
 
-        DOM.tabReg.addEventListener('click', (e) => {
-            e.preventDefault();
-            DOM.loginForm.classList.add('hidden');
-            DOM.regForm.classList.remove('hidden');
-            DOM.tabReg.classList.add('border-cyan-400', 'text-cyan-400');
-            DOM.tabReg.classList.remove('border-transparent', 'text-gray-500');
-            DOM.tabLogin.classList.remove('border-cyan-400', 'text-cyan-400');
-            DOM.tabLogin.classList.add('border-transparent', 'text-gray-500');
-        });
+        const mmCanvas = document.getElementById('minimap');
+        if(mmCanvas) {
+            minimapCtx = mmCanvas.getContext('2d');
+            mmCanvas.addEventListener('click', onMinimapClick);
+        }
+        document.getElementById('zoomInButton').addEventListener('click', () => { minimapScale *= 1.5; drawMinimap(); });
+        document.getElementById('zoomOutButton').addEventListener('click', () => { minimapScale /= 1.5; drawMinimap(); });
 
-        document.getElementById('btn-save-profile').addEventListener('click', () => {
-            saveProfile(document.getElementById('setup-name').value || "User-" + Math.floor(Math.random()*1000));
+        animate();
+    }
+
+    function createAdvancedBackground() {
+        const pGeo = new THREE.BufferGeometry();
+        const count = 5000;
+        const pos = new Float32Array(count * 3);
+        const sizes = new Float32Array(count);
+        
+        for(let i=0; i<count; i++) {
+            pos[i*3] = (Math.random()-0.5) * 1500;
+            pos[i*3+1] = (Math.random()-0.5) * 1500;
+            pos[i*3+2] = (Math.random()-0.5) * 1500;
+            sizes[i] = Math.random();
+        }
+        pGeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+        pGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+
+        const pMat = new THREE.PointsMaterial({
+            color: 0x88ccff,
+            size: 1.0,
+            transparent: true,
+            opacity: 0.6,
+            sizeAttenuation: true
         });
 
-        document.getElementById('btn-logout').addEventListener('click', () => signOut(auth));
+        bgParticles = new THREE.Points(pGeo, pMat);
+        scene.add(bgParticles);
+    }
 
+    function initAdvancedComet() {
+        if(cometGroup) { scene.remove(cometGroup); }
+        if(cometParticlesMesh) { scene.remove(cometParticlesMesh); }
+        
+        if(!font || !userId) return;
 
-        // --- LÓGICA DEL JUEGO / UI ---
+        userCentroidForComet.copy(getCurrentUserCentroid());
+        
+        cometGroup = new THREE.Group();
 
-        function updateHUD() {
-            DOM.statEnergy.textContent = Math.floor(STATE.energy);
-            DOM.statXP.textContent = Math.floor(STATE.xp);
-            DOM.statRank.textContent = STATE.rank;
-        }
+        const coreGeo = new THREE.SphereGeometry(0.5, 32, 32);
+        const coreMat = new THREE.MeshBasicMaterial({ color: 0xffffff }); 
+        cometHead = new THREE.Mesh(coreGeo, coreMat);
+        
+        const haloGeo = new THREE.SphereGeometry(0.9, 32, 32);
+        const haloMat = new THREE.MeshBasicMaterial({ 
+            color: 0x00ffff, 
+            transparent: true, 
+            opacity: 0.25,
+            blending: THREE.AdditiveBlending
+        });
+        const halo = new THREE.Mesh(haloGeo, haloMat);
+        cometHead.add(halo);
+        cometGroup.add(cometHead);
+
+        cometLight = new THREE.PointLight(0x00ffff, 2.5, 60);
+        cometGroup.add(cometLight);
+
+        const word = COMET_WORDS[Math.floor(Math.random() * COMET_WORDS.length)];
+        const tGeo = new TextGeometry(word, { font: font, size: 0.4, height: 0.02, bevelEnabled: false });
+        tGeo.center();
+        const tMat = new THREE.MeshBasicMaterial({ color: 0xccffff });
+        cometText = new THREE.Mesh(tGeo, tMat);
+        cometText.position.y = 1.3;
+        cometGroup.add(cometText);
+
+        scene.add(cometGroup);
+
+        const pGeo = new THREE.BufferGeometry();
+        const positions = new Float32Array(COMET_PARTICLE_COUNT * 3);
+        const colors = new Float32Array(COMET_PARTICLE_COUNT * 3);
+        const sizes = new Float32Array(COMET_PARTICLE_COUNT);
+
+        pGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        pGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+        pGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+
+        const pMat = new THREE.PointsMaterial({
+            vertexColors: true,
+            size: 1.0,
+            transparent: true,
+            opacity: 0.9,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+            sizeAttenuation: true
+        });
 
-        function checkRank() {
-            if (STATE.xp > 1000 && STATE.rank === 'Novato') STATE.rank = 'Explorador';
-            else if (STATE.xp > 5000 && STATE.rank === 'Explorador') STATE.rank = 'Arquitecto';
-            else if (STATE.xp > 10000 && STATE.rank === 'Arquitecto') STATE.rank = 'Oráculo';
-            updateHUD();
-            if(STATE.user) updateDoc(doc(db, 'artifacts', FB_CONFIG.projectId, 'users', STATE.user.uid, 'profile', 'data'), { xp: STATE.xp, rank: STATE.rank });
-        }
+        cometParticlesMesh = new THREE.Points(pGeo, pMat);
+        scene.add(cometParticlesMesh);
 
-        // --- THREE.JS ENGINE ---
-
-        function init3D() {
-            if (scene) return;
-            const container = document.createElement('div');
-            container.className = 'fixed inset-0 z-0';
-            document.body.appendChild(container);
-
-            scene = new THREE.Scene();
-            scene.fog = new THREE.FogExp2(0x030508, 0.002);
-
-            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 3000);
-            camera.position.set(0, 50, 150);
-
-            renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "high-performance" });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
-            renderer.toneMapping = THREE.ReinhardToneMapping;
-            container.appendChild(renderer.domElement);
-
-            const renderScene = new RenderPass(scene, camera);
-            const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
-            bloomPass.threshold = 0.2;
-            bloomPass.strength = 1.2;
-            bloomPass.radius = 0.5;
-
-            composer = new EffectComposer(renderer);
-            composer.addPass(renderScene);
-            composer.addPass(bloomPass);
-
-            controls = new OrbitControls(camera, renderer.domElement);
-            controls.enableDamping = true;
-            controls.dampingFactor = 0.05;
-            controls.maxDistance = 1000;
-
-            const ambient = new THREE.AmbientLight(0x404040);
-            scene.add(ambient);
-            const dirLight = new THREE.DirectionalLight(0xaaccff, 2);
-            dirLight.position.set(100, 100, 50);
-            scene.add(dirLight);
-
-            nodeGroup = new THREE.Group();
-            linkGroup = new THREE.Group();
-            cometGroup = new THREE.Group();
-            scene.add(nodeGroup);
-            scene.add(linkGroup);
-            scene.add(cometGroup);
-
-            createStarfield();
-            initComet();
-
-            const loader = new FontLoader();
-            loader.load('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/fonts/helvetiker_bold.typeface.json', (f) => {
-                font = f;
+        cometParticlesData = [];
+        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
+            cometParticlesData.push({
+                life: -1, 
+                velocity: new THREE.Vector3()
             });
-
-            raycaster = new THREE.Raycaster();
-
-            window.addEventListener('resize', onResize);
-            window.addEventListener('mousemove', onMouseMove);
-            window.addEventListener('mousedown', onMouseDown);
-            minimapCtx = document.getElementById('minimap-canvas').getContext('2d');
-
-            animate();
+            positions[i*3] = 99999; 
         }
+    }
 
-        function createStarfield() {
-            const geom = new THREE.BufferGeometry();
-            const pos = [];
-            const col = [];
-            for (let i = 0; i < 8000; i++) {
-                pos.push((Math.random() - 0.5) * 2000, (Math.random() - 0.5) * 2000, (Math.random() - 0.5) * 2000);
-                const c = new THREE.Color().setHSL(Math.random(), 0.8, 0.8);
-                col.push(c.r, c.g, c.b);
-            }
-            geom.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
-            geom.setAttribute('color', new THREE.Float32BufferAttribute(col, 3));
-            const mat = new THREE.PointsMaterial({ size: 1.5, vertexColors: true, transparent: true, opacity: 0.8 });
-            particleSystem = new THREE.Points(geom, mat);
-            scene.add(particleSystem);
-        }
+    function updateAdvancedComet(delta, time) {
+        if(!cometGroup || !cometParticlesMesh) return;
 
-        function initComet() {
-            const headGeom = new THREE.SphereGeometry(1, 16, 16);
-            const headMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
-            const head = new THREE.Mesh(headGeom, headMat);
-            cometGroup.add(head);
-
-            const light = new THREE.PointLight(0x00ffff, 2, 50);
-            cometGroup.add(light);
-
-            const tailGeom = new THREE.BufferGeometry();
-            const tailPos = new Float32Array(300 * 3);
-            tailGeom.setAttribute('position', new THREE.BufferAttribute(tailPos, 3));
-            const tailMat = new THREE.PointsMaterial({ color: 0x00ffff, size: 0.5, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending });
-            cometSystem = new THREE.Points(tailGeom, tailMat);
-            cometSystem.userData = { positions: [] };
-            scene.add(cometSystem);
-        }
+        cometAngle += delta * 0.35;
+        const rX = 80; const rZ = 60; 
+        
+        const x = userCentroidForComet.x + Math.cos(cometAngle) * rX;
+        const z = userCentroidForComet.z + Math.sin(cometAngle) * rZ;
+        const y = userCentroidForComet.y + Math.sin(cometAngle * 2.0) * 20; 
 
-        function createExplosion(pos) {
-            const count = 30;
-            const geom = new THREE.BufferGeometry();
-            const pArr = new Float32Array(count * 3);
-            const vArr = [];
-            for(let i=0; i<count; i++){
-                pArr[i*3] = pos.x; pArr[i*3+1] = pos.y; pArr[i*3+2] = pos.z;
-                vArr.push(new THREE.Vector3((Math.random()-0.5)*2, (Math.random()-0.5)*2, (Math.random()-0.5)*2));
-            }
-            geom.setAttribute('position', new THREE.BufferAttribute(pArr, 3));
-            const mat = new THREE.PointsMaterial({color: 0xff0055, size: 2, blending: THREE.AdditiveBlending});
-            const sys = new THREE.Points(geom, mat);
-            sys.userData = { vels: vArr, age: 0 };
-            scene.add(sys);
-            if(!explosionSystem) explosionSystem = [];
-            explosionSystem.push(sys);
-        }
+        const targetPos = new THREE.Vector3(x, y, z);
+        
+        const nextPos = new THREE.Vector3(
+            userCentroidForComet.x + Math.cos(cometAngle + 0.1) * rX,
+            userCentroidForComet.y + Math.sin((cometAngle + 0.1) * 2.0) * 20,
+            userCentroidForComet.z + Math.sin(cometAngle + 0.1) * rZ
+        );
+        cometGroup.position.copy(targetPos);
+        cometGroup.lookAt(nextPos);
+        
+        if(cometText) cometText.quaternion.copy(camera.quaternion);
 
-        function updateExplosions() {
-            if(!explosionSystem) return;
-            for(let i=explosionSystem.length-1; i>=0; i--){
-                const sys = explosionSystem[i];
-                const positions = sys.geometry.attributes.position.array;
-                sys.userData.age += 0.05;
-                for(let j=0; j<30; j++){
-                    positions[j*3] += sys.userData.vels[j].x;
-                    positions[j*3+1] += sys.userData.vels[j].y;
-                    positions[j*3+2] += sys.userData.vels[j].z;
-                }
-                sys.geometry.attributes.position.needsUpdate = true;
-                sys.material.opacity = 1 - sys.userData.age;
-                if(sys.userData.age >= 1) {
-                    scene.remove(sys);
-                    explosionSystem.splice(i, 1);
-                }
-            }
-        }
+        const positions = cometParticlesMesh.geometry.attributes.position.array;
+        const colors = cometParticlesMesh.geometry.attributes.color.array;
+        const sizes = cometParticlesMesh.geometry.attributes.size.array;
 
-        function onResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            composer.setSize(window.innerWidth, window.innerHeight);
+        let spawnCount = 5; 
+        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
+            if(spawnCount > 0 && cometParticlesData[i].life < 0) {
+                cometParticlesData[i].life = 1.0;
+                
+                positions[i*3] = cometGroup.position.x + (Math.random()-0.5);
+                positions[i*3+1] = cometGroup.position.y + (Math.random()-0.5);
+                positions[i*3+2] = cometGroup.position.z + (Math.random()-0.5);
+                
+                colors[i*3] = 0.2; colors[i*3+1] = 1.0; colors[i*3+2] = 1.0;
+                sizes[i] = 1.2;
+                spawnCount--;
+            }
         }
 
-        function onMouseMove(e) {
-            mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
-            DOM.tooltip.style.left = (e.clientX + 15) + 'px';
-            DOM.tooltip.style.top = (e.clientY + 15) + 'px';
-        }
+        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
+            if(cometParticlesData[i].life > 0) {
+                const d = cometParticlesData[i];
+                d.life -= delta * 0.7; 
 
-        function onMouseDown() {
-            if (STATE.mode === 'defense') {
-                raycaster.setFromCamera(mouse, camera);
-                const intersects = raycaster.intersectObjects(nodeGroup.children);
-                if (intersects.length > 0) {
-                    const obj = intersects[0].object;
-                    if (obj.userData.isTrash) {
-                        createExplosion(obj.position);
-                        destroyNode(obj);
-                        STATE.xp += 15;
-                        STATE.energy = Math.min(100, STATE.energy + 5);
-                        log("AMENAZA NEUTRALIZADA. +15 XP", "success");
-                        updateHUD();
-                        checkRank();
-                    } else {
-                        STATE.energy -= 10;
-                        log("ERROR: NODO SEMÁNTICO DAÑADO. -10 E", "err");
-                        updateHUD();
-                    }
+                if(d.life > 0.6) {
+                    colors[i*3] = 0.2; colors[i*3+1] = 1.0; colors[i*3+2] = 1.0; 
+                } else if (d.life > 0.3) {
+                    colors[i*3] = 0.6; colors[i*3+1] = 0.2; colors[i*3+2] = 1.0; 
+                } else {
+                    colors[i*3] = 0.1; colors[i*3+1] = 0.1; colors[i*3+2] = 0.5;
                 }
+                
+                sizes[i] = d.life * 1.8;
+                
+            } else {
+                positions[i*3] = 99999;
             }
         }
 
-        function destroyNode(mesh) {
-            nodeGroup.remove(mesh);
-            if(mesh.userData.textRef) nodeGroup.remove(mesh.userData.textRef);
-            const idx = STATE.nodes.indexOf(mesh);
-            if(idx > -1) STATE.nodes.splice(idx, 1);
-        }
-
-        // --- GEMINI API ---
-
-        async function callGemini(prompt) {
-            const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${STATE.geminiKey}`;
-            const payload = {
-                contents: [{ parts: [{ text: prompt }] }],
-                generationConfig: {
-                    temperature: 0.9,
-                    topK: 40,
-                    topP: 0.95,
-                    maxOutputTokens: 2048,
-                }
-            };
+        cometParticlesMesh.geometry.attributes.position.needsUpdate = true;
+        cometParticlesMesh.geometry.attributes.color.needsUpdate = true;
+        cometParticlesMesh.geometry.attributes.size.needsUpdate = true;
+    }
 
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload)
-                });
-                const data = await response.json();
-                if (data.error) throw new Error(data.error.message);
-                const text = data.candidates[0].content.parts[0].text;
-                const jsonStr = text.replace(/```json|```/g, '').trim();
-                return JSON.parse(jsonStr);
-            } catch (e) {
-                log(`ERROR NEURAL: ${e.message}`, 'err');
-                return null;
-            }
-        }
+    function animate() {
+        requestAnimationFrame(animate);
+        
+        const delta = clock.getDelta();
+        const time = clock.getElapsedTime();
 
-        function buildPrompt(topic, mode) {
-            const d1 = DOM.sliders[0].value;
-            const d2 = DOM.sliders[1].value;
-            const d3 = DOM.sliders[2].value;
-
-            let base = `Genera un grafo de conocimiento JSON para "${topic}". Estructura: root { palabra: "${topic}", hijos: [ { palabra: "...", hijos: [] } ] }.
-            Profundidad 3. Cantidad: ${d1} hijos directos, cada uno con ${d2} hijos, y esos con ${d3} hijos. SOLO JSON PURO.`;
-
-            if (mode === 'bridge') {
-                const target = DOM.inputTarget.value;
-                STATE.bridgeTarget = target;
-                base += ` El objetivo es conectar conceptualmente con "${target}". Incluye caminos semánticos que se acerquen a "${target}".`;
-            } else if (mode === 'miner') {
-                base += ` Incluye 3-5 nodos marcados como "rare: true" que sean conceptos oscuros, científicos o poéticos relacionados.`;
-            } else if (mode === 'defense') {
-                base += ` Incluye 10 nodos marcados como "trash: true" que sean palabras aleatorias sin relación o conceptos opuestos.`;
-            }
+        controls.update();
 
-            return base;
+        if(bgParticles) {
+            bgParticles.rotation.y = time * 0.015;
+            bgParticles.rotation.z = time * 0.005;
         }
 
-        async function visualize() {
-            if (STATE.isProcessing) return;
-            const topic = DOM.inputTopic.value;
-            if (!topic) return log("FALTA SEMILLA", "err");
-            if (STATE.energy < 10) return log("ENERGÍA INSUFICIENTE", "err");
-
-            STATE.isProcessing = true;
-            STATE.energy -= 10;
-            updateHUD();
-            DOM.btnViz.disabled = true;
-            DOM.loadingBar.style.width = "50%";
-            log("INICIANDO SÍNTESIS...");
-
-            const prompt = buildPrompt(topic, STATE.mode);
-            const data = await callGemini(prompt);
-
-            DOM.loadingBar.style.width = "100%";
-
-            if (data) {
-                clearScene();
-                const origin = new THREE.Vector3(0, 0, 0);
-                if(STATE.user && STATE.maps[STATE.user.uid]) {
-                    const offset = new THREE.Vector3((Math.random()-0.5)*100, (Math.random()-0.5)*50, (Math.random()-0.5)*100);
-                    origin.add(offset);
-                }
-                parseAndCreate(data, origin, 0, null);
-                if (STATE.user) {
-                    addDoc(collection(db, 'artifacts', FB_CONFIG.projectId, 'public', 'maps', 'data'), {
-                        userId: STATE.user.uid,
-                        topic: topic,
-                        origin: {x: origin.x, y: origin.y, z: origin.z},
-                        mode: STATE.mode,
-                        timestamp: Date.now()
-                    });
-                }
-                log("MATERIALIZACIÓN COMPLETA.", "success");
+        updateAdvancedComet(delta, time);
+        updateRaycaster();
+        drawMinimap();
+
+        hashtagGroup.children.forEach(obj => {
+            if (obj.userData.isText) {
+                obj.lookAt(camera.position);
+                const dist = obj.position.distanceTo(camera.position);
+                let scale = (1/dist) * 12; 
+                scale = Math.max(0.6, Math.min(5.0, scale));
+                obj.scale.set(scale, scale, scale);
             }
+        });
 
-            setTimeout(() => {
-                DOM.loadingBar.style.width = "0%";
-                DOM.btnViz.disabled = false;
-                STATE.isProcessing = false;
-            }, 500);
+        composer.render();
+    }
+
+    function getCurrentUserCentroid() {
+      if (!userId || !userMaps[userId] || userMaps[userId].length === 0) return new THREE.Vector3(0,0,0);
+      const centroid = new THREE.Vector3(0,0,0);
+      userMaps[userId].forEach(o => centroid.add(o));
+      centroid.divideScalar(userMaps[userId].length);
+      return centroid;
+    }
+
+    function visualizeHashtags(dataList, origin, level, parentColor = null) {
+      if (!dataList || dataList.length === 0) return;
+      for (const item of dataList) {
+        let currentTag, variantsList;
+        if (level === 1) {
+          currentTag = normalizeString(item.palabra_principal);
+          variantsList = item.variantes || [];
+        } else if (level === 2) {
+          currentTag = normalizeString(item.palabra_variante);
+          variantsList = item.sub_variantes || [];
+        } else {
+          currentTag = normalizeString(item);
+          variantsList = [];
         }
+        if (!currentTag) continue;
+        
+        const { color, h } = stringToHslColor(currentTag);
+        const nodeColor = (level === 1) ? color : parentColor;
+        
+        const nodeMaterial = new THREE.MeshPhysicalMaterial({
+          color: new THREE.Color(nodeColor),
+          emissive: new THREE.Color(nodeColor),
+          emissiveIntensity: level === 1 ? 0.8 : 0.4,
+          roughness: 0.2,
+          metalness: 0.1,
+          transmission: 0.1, 
+          transparent: true,
+          opacity: 0.95
+        });
 
-        function clearScene() {
-            while (nodeGroup.children.length > 0) {
-                const c = nodeGroup.children[0];
-                if(c.geometry) c.geometry.dispose();
-                if(c.material) c.material.dispose();
-                nodeGroup.remove(c);
-            }
-            while (linkGroup.children.length > 0) {
-                linkGroup.remove(linkGroup.children[0]);
+        const theta = (h / 360) * Math.PI * 2;
+        let phiHash = 0;
+        for (let i = 0; i < currentTag.length; i++) phiHash = (phiHash + currentTag.charCodeAt(i) * 13) % 180;
+        const phi = ((phiHash / 180) * 90 + 45) * (Math.PI / 180);
+
+        const baseRadius = 12 / (level * level); 
+        const cx = baseRadius * Math.sin(phi) * Math.cos(theta);
+        const cy = baseRadius * Math.cos(phi);
+        const cz = baseRadius * Math.sin(phi) * Math.sin(theta);
+        const clusterCenter = new THREE.Vector3(cx, cy, cz).add(origin);
+
+        const lineMat = new THREE.LineBasicMaterial({ 
+            color: new THREE.Color(nodeColor), 
+            transparent: true, 
+            opacity: 0.25 
+        });
+        const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints([origin, clusterCenter]), lineMat);
+        hashtagGroup.add(line);
+
+        let sRad = (level === 1) ? 0.35 : (level === 2 ? 0.18 : 0.1);
+        const sphere = new THREE.Mesh(new THREE.SphereGeometry(sRad, 16, 16), nodeMaterial);
+        sphere.position.copy(clusterCenter);
+        sphere.userData.hashtag = currentTag;
+        sphere.userData.level = level;
+        hashtagGroup.add(sphere);
+
+        let tSize = (level === 1) ? 0.35 : (level === 2 ? 0.18 : 0.12);
+        const tGeo = new TextGeometry(currentTag.toUpperCase(), { font: font, size: tSize, height: 0.01, bevelEnabled: false });
+        tGeo.computeBoundingBox();
+        const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: nodeColor }));
+        tMesh.position.copy(clusterCenter);
+        tMesh.position.y += sRad + 0.15;
+        tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x)/2;
+        tMesh.userData.isText = true;
+        hashtagGroup.add(tMesh);
+
+        visualizeHashtags(variantsList, clusterCenter, level + 1, nodeColor);
+      }
+    }
+
+    function visualizeRoot(topic, origin) {
+      const { color } = stringToHslColor(topic);
+      const mat = new THREE.MeshStandardMaterial({
+        color: new THREE.Color(color),
+        emissive: new THREE.Color(color),
+        emissiveIntensity: 2.2,
+        roughness: 0.4
+      });
+      const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.7, 32, 32), mat);
+      sphere.position.copy(origin);
+      sphere.userData.hashtag = topic;
+      sphere.userData.level = 0;
+      hashtagGroup.add(sphere);
+
+      const tGeo = new TextGeometry(topic.toUpperCase(), { font: font, size: 0.6, height: 0.05, bevelEnabled: false });
+      tGeo.computeBoundingBox();
+      const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }));
+      tMesh.position.copy(origin);
+      tMesh.position.y += 1.0;
+      tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x) / 2;
+      tMesh.userData.isText = true;
+      hashtagGroup.add(tMesh);
+    }
+    
+    function createUserSun(pos, name, isMe) {
+        const col = isMe ? 0xffaa00 : 0x00ff88;
+        const mat = new THREE.MeshStandardMaterial({
+            color: col, emissive: col, emissiveIntensity: 1.8, roughness: 0.2
+        });
+        const mesh = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), mat);
+        mesh.position.copy(pos);
+        mesh.userData.hashtag = `Usuario: ${name}`;
+        mesh.userData.isPlaceholder = true;
+        hashtagGroup.add(mesh);
+        
+        const tGeo = new TextGeometry(name.toUpperCase(), { font: font, size: 1.2, height: 0.1 });
+        tGeo.computeBoundingBox();
+        const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }));
+        tMesh.position.copy(pos);
+        tMesh.position.y += 4;
+        tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x)/2;
+        tMesh.userData.isText = true;
+        hashtagGroup.add(tMesh);
+    }
+
+    async function fetchWithTimeout(url, options = {}, timeoutMs = 25000) {
+      const controller = new AbortController();
+      const id = setTimeout(() => controller.abort(), timeoutMs);
+      try {
+        return await fetch(url, { ...options, signal: controller.signal });
+      } finally { clearTimeout(id); }
+    }
+
+    async function fetchWithBackoff(url, options, retries = 2, delay = 1000) {
+      try {
+        return await fetchWithTimeout(url, options);
+      } catch (err) {
+        if (retries > 0) {
+          await new Promise(r => setTimeout(r, delay));
+          return fetchWithBackoff(url, options, retries - 1, delay * 2);
+        } else { throw err; }
+      }
+    }
+
+    async function callGemini(topic, mc, vc, svc) {
+        const k = getLocalGeminiKey();
+        if(!k || k.length<10) throw new Error("Falta API Key");
+        
+        const schema = {
+            type: "OBJECT",
+            properties: {
+                analisis: { type: "STRING" },
+                lista_palabras: { type: "ARRAY", items: { type: "OBJECT", properties: { palabra_principal: {type:"STRING"}, variantes: {type:"ARRAY", items: {type:"OBJECT", properties: {palabra_variante: {type:"STRING"}, sub_variantes: {type:"ARRAY", items:{type:"STRING"}}}}} } } }
             }
-            STATE.nodes = [];
-            STATE.links = [];
+        };
+        const prompt = `Tema: ${topic}. 1. Genera ${mc} palabras clave (Nivel 1). 2. Para cada una, ${vc} variantes (Nivel 2). 3. Para cada variante, ${svc} sub-variantes (Nivel 3). JSON Puro sin markdown.`;
+        
+        const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${k}`;
+        
+        if (!isHFStatic) {
+            try {
+                const proxyResp = await fetchWithBackoff('/.netlify/functions/gemini-proxy', {
+                    method: 'POST', headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ model: 'gemini-2.5-flash-preview-09-2025', payload: { contents: [{parts:[{text: prompt}]}] } }) 
+                }, 1, 1000);
+                if (proxyResp.ok) return await proxyResp.json();
+            } catch (e) {}
         }
 
-        function parseAndCreate(node, center, level, parent) {
-            if (!node || !node.palabra) return;
-            const text = node.palabra;
-            const isRare = node.rare === true;
-            const isTrash = node.trash === true;
-
-            const radius = 30 / (level + 1);
-            const phi = Math.acos(-1 + (2 * Math.random()));
-            const theta = Math.sqrt(Math.PI * 800) * phi;
-            const pos = new THREE.Vector3(
-                center.x + (radius * Math.sin(phi) * Math.cos(theta)),
-                center.y + (radius * Math.sin(phi) * Math.sin(theta)),
-                center.z + (radius * Math.cos(phi))
-            );
-            if(level === 0) pos.copy(center);
-
-            const color = isRare ? 0xffd700 : (isTrash ? 0xff0055 : (level === 0 ? 0xffffff : 0x00f3ff));
-            const size = level === 0 ? 2 : (isRare ? 1.5 : 0.8);
-
-            const geo = new THREE.SphereGeometry(size, 16, 16);
-            const mat = new THREE.MeshStandardMaterial({
-                color: color,
-                emissive: color,
-                emissiveIntensity: isRare ? 2 : 0.5,
-                roughness: 0.2,
-                metalness: 0.8
-            });
-
-            const mesh = new THREE.Mesh(geo, mat);
-            mesh.position.copy(pos);
-            mesh.userData = { text: text, isRare, isTrash, level };
-            nodeGroup.add(mesh);
-            STATE.nodes.push(mesh);
-
-            if (font && level < 2) {
-                const tGeo = new TextGeometry(text.toUpperCase(), { font: font, size: size * 0.4, height: 0.05 });
-                const tMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
-                const tMesh = new THREE.Mesh(tGeo, tMat);
-                tMesh.position.copy(pos).add(new THREE.Vector3(0, size + 0.5, 0));
-                tMesh.lookAt(camera.position);
-                nodeGroup.add(tMesh);
-                mesh.userData.textRef = tMesh;
-            }
-
-            if (parent) {
-                const points = [parent.position, pos];
-                const lGeo = new THREE.BufferGeometry().setFromPoints(points);
-                const lMat = new THREE.LineBasicMaterial({ color: color, transparent: true, opacity: 0.2 });
-                const line = new THREE.Line(lGeo, lMat);
-                linkGroup.add(line);
-            }
-
-            if (isRare && STATE.mode === 'miner') {
-                addToVault(text);
-                STATE.xp += 100;
-                log(`NODO DORADO: ${text}`, "success");
-                updateHUD();
-                checkRank();
+        const resp = await fetchWithBackoff(url, {
+            method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ contents: [{parts:[{text: prompt}]}], generationConfig: { responseMimeType: "application/json", responseSchema: schema } })
+        });
+        if(!resp.ok) throw new Error(await resp.text());
+        return await resp.json();
+    }
+
+    async function handleAnalysisAndVisualization() {
+        if(!font) return;
+        const topic = normalizeString(document.getElementById('topicInput').value);
+        if(!topic) return;
+        
+        const btn = document.getElementById('visualizeButton');
+        const pb = document.getElementById('progressBar');
+        const pbc = document.getElementById('progressBarContainer');
+        const originalBtnHtml = btn.innerHTML;
+        
+        btn.disabled = true; btn.innerHTML = '<span class="animate-pulse">PROCESANDO RED...</span>';
+        pbc.classList.remove('hidden'); pb.style.width = "90%"; pb.style.transition = "width 15s ease-out";
+
+        try {
+            const mc = document.getElementById('level1Slider').value;
+            const vc = document.getElementById('level2Slider').value;
+            const svc = document.getElementById('level3Slider').value;
+
+            let origin = new THREE.Vector3(0,0,0);
+            const myMaps = userMaps[userId] || [];
+            if(myMaps.length === 0) {
+                const globalIdx = Object.keys(userMaps).length;
+                origin.set(globalIdx*800*Math.cos(globalIdx), 0, globalIdx*800*Math.sin(globalIdx));
+            } else {
+                let center = new THREE.Vector3(); myMaps.forEach(m=>center.add(m)); center.divideScalar(myMaps.length);
+                const r = Math.sqrt(myMaps.length)*40; const a = myMaps.length;
+                origin.set(center.x + r*Math.cos(a), 0, center.z + r*Math.sin(a));
             }
 
-            if (STATE.mode === 'bridge' && STATE.bridgeTarget) {
-                if (text.toLowerCase().includes(STATE.bridgeTarget.toLowerCase())) {
-                    const laserGeo = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0,0,0), pos]);
-                    const laserMat = new THREE.LineBasicMaterial({ color: 0x00ff00, linewidth: 5 });
-                    scene.add(new THREE.Line(laserGeo, laserMat));
-                    log("PUENTE ESTABLECIDO!", "success");
-                    STATE.xp += 500;
-                    checkRank();
-                }
-            }
+            const res = await callGemini(topic, mc, vc, svc);
+            const txt = res.candidates?.[0]?.content?.parts?.[0]?.text;
+            if(!txt) throw new Error("La IA no generó datos válidos.");
+            const json = JSON.parse(txt);
+            
+            visualizeRoot(topic, origin);
+            visualizeHashtags(json.lista_palabras, origin, 1);
+            if(db && userId) await addDoc(collection(db,'artifacts',appId,'public','data','maps'), {
+                topic, depth: "3", origin: {x:origin.x, y:origin.y, z:origin.z}, data: JSON.stringify(json), createdAt: new Date(), userId
+            });
 
-            if (node.hijos) {
-                node.hijos.forEach(child => parseAndCreate(child, pos, level + 1, mesh));
-            }
+        } catch(e) { 
+            console.error(e);
+            alert("Error en análisis: " + e.message); 
+        } finally {
+            btn.disabled = false; btn.innerHTML = originalBtnHtml;
+            pb.style.width = "100%"; setTimeout(()=>{pbc.classList.add('hidden'); pb.style.width="0%";}, 500);
         }
+    }
 
-        function addToVault(word) {
-            if(STATE.user) {
-                updateDoc(doc(db, 'artifacts', FB_CONFIG.projectId, 'users', STATE.user.uid, 'profile', 'data'), {
-                    inventory: arrayUnion(word)
-                });
+    function loadAllMaps() {
+        if(!db || !font) { setTimeout(loadAllMaps,500); return; }
+        const q = query(collection(db,'artifacts',appId,'public','data','maps'));
+        
+        onSnapshot(q, async (snap) => {
+            while(hashtagGroup.children.length > 0){ 
+                let obj = hashtagGroup.children[0]; 
+                hashtagGroup.remove(obj); 
+                if(obj.geometry) obj.geometry.dispose(); 
+                if(obj.material) {
+                   if(Array.isArray(obj.material)) obj.material.forEach(m=>m.dispose());
+                   else obj.material.dispose();
+                }
             }
-            const tag = document.createElement('span');
-            tag.className = 'text-[9px] border border-yellow-500 text-yellow-500 px-1 rounded rare-glow cursor-help';
-            tag.textContent = word;
-            tag.title = "Concepto Raro";
-            DOM.vaultGrid.appendChild(tag);
-            DOM.vaultPanel.classList.remove('hidden');
-            DOM.vaultCount.textContent = (DOM.vaultGrid.children.length) + " ITEMS";
-        }
 
-        function subscribeToMaps() {
-            const q = query(collection(db, 'artifacts', FB_CONFIG.projectId, 'public', 'maps', 'data'), orderBy('timestamp', 'desc'), limit(50));
-            onSnapshot(q, (snap) => {
-                STATE.maps = {};
-                minimapCtx.clearRect(0,0,256,166);
-                snap.forEach(d => {
-                    const data = d.data();
-                    STATE.maps[data.userId] = data.origin;
-                    const isMe = STATE.user && data.userId === STATE.user.uid;
-                    const x = 128 + (data.origin.x * mmScale);
-                    const y = 83 + (data.origin.z * mmScale);
-                    minimapCtx.beginPath();
-                    minimapCtx.arc(x, y, isMe ? 4 : 2, 0, Math.PI * 2);
-                    minimapCtx.fillStyle = isMe ? '#00f3ff' : '#555';
-                    minimapCtx.fill();
-                });
+            userMaps = {}; allMapsDataCache = {};
+            
+            snap.docs.forEach(d => {
+                const m = d.data();
+                if(!m.origin) return;
+                const o = new THREE.Vector3(m.origin.x, m.origin.y, m.origin.z);
+                if(!userMaps[m.userId]) userMaps[m.userId] = [];
+                userMaps[m.userId].push(o);
+                
+                try {
+                    const data = JSON.parse(m.data);
+                    visualizeRoot(m.topic, o);
+                    visualizeHashtags(data.lista_palabras, o, 1);
+                } catch {}
             });
-        }
-
-        function animate() {
-            requestAnimationFrame(animate);
-            const delta = clock.getDelta();
-            const time = clock.getElapsedTime();
 
-            controls.update();
-            updateExplosions();
-
-            if (particleSystem) {
-                particleSystem.rotation.y = time * 0.02;
-            }
-
-            if (cometGroup) {
-                if(STATE.mode === 'defense' && STATE.nodes.length > 0) {
-                    let closest = null;
-                    let dist = Infinity;
-                    STATE.nodes.forEach(n => {
-                        const d = cometGroup.position.distanceTo(n.position);
-                        if(d < dist && n.userData.isTrash) { dist = d; closest = n; }
-                    });
-                    if(closest) {
-                        const dir = new THREE.Vector3().subVectors(closest.position, cometGroup.position).normalize();
-                        cometGroup.position.add(dir.multiplyScalar(delta * 20));
-                        if(dist < 2) {
-                            STATE.energy -= 20;
-                            log("IMPACTO DE BASURA!", "err");
-                            updateHUD();
-                            destroyNode(closest);
-                            createExplosion(closest.position);
-                        }
-                    } else {
-                        cometGroup.position.x = Math.sin(time) * 100;
-                        cometGroup.position.z = Math.cos(time) * 50;
-                    }
-                } else {
-                    cometGroup.position.x = Math.sin(time * 0.5) * 120;
-                    cometGroup.position.y = Math.cos(time * 0.3) * 40;
-                    cometGroup.position.z = Math.sin(time * 0.2) * 120;
+            const uids = Object.keys(userMaps);
+            const list = document.getElementById('userList');
+            if(list) list.innerHTML = '';
+            
+            for(const uid of uids) {
+                const prof = await getProfile(uid);
+                const name = prof ? prof.username : "ANON " + uid.substring(0,4);
+                
+                if(list) {
+                    const item = document.createElement('div');
+                    item.className = 'text-cyan-400 hover:text-white cursor-pointer hover:bg-white/5 p-1 rounded transition-colors text-[10px] tracking-wide';
+                    item.innerHTML = `> <span class="font-bold">${name}</span>`;
+                    item.onclick = () => teleportToUser(uid);
+                    list.appendChild(item);
                 }
 
-                const positions = cometSystem.userData.positions;
-                positions.push(cometGroup.position.clone());
-                if(positions.length > 300) positions.shift();
-
-                const arr = cometSystem.geometry.attributes.position.array;
-                for(let i=0; i<positions.length; i++){
-                    arr[i*3] = positions[i].x;
-                    arr[i*3+1] = positions[i].y;
-                    arr[i*3+2] = positions[i].z;
+                const origins = userMaps[uid];
+                if(origins.length > 0) {
+                    const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
+                    createUserSun(c, name, uid === userId);
                 }
-                cometSystem.geometry.attributes.position.needsUpdate = true;
             }
+            
+            initAdvancedComet(); 
+            drawMinimap();
+            focusOnUserMaps();
+        });
+    }
+
+    function focusOnUserMaps() {
+        if(!controls || !userId || !userMaps[userId]) return;
+        const c = getCurrentUserCentroid();
+        controls.target.copy(c);
+        camera.position.copy(c).add(new THREE.Vector3(0,10,40));
+    }
+
+    function teleportToUser(uid) {
+        if(!userMaps[uid]) return;
+        const origins = userMaps[uid];
+        const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
+        controls.target.copy(c);
+        camera.position.copy(c).add(new THREE.Vector3(0,10,40));
+    }
+
+    function drawMinimap() {
+        if(!minimapCtx) return;
+        const w = minimapCtx.canvas.width; const h = minimapCtx.canvas.height;
+        minimapCtx.clearRect(0,0,w,h);
+        minimapDotCoords = [];
+
+        const myC = getCurrentUserCentroid();
+        
+        Object.keys(userMaps).forEach(uid => {
+             const origins = userMaps[uid];
+             const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
+             
+             const x = w/2 + (c.x - myC.x)*minimapScale;
+             const y = h/2 + (c.z - myC.z)*minimapScale;
+             
+             const isMe = (uid === userId);
+             const mainColor = isMe ? '#22d3ee' : '#64748b';
+             
+             minimapDotCoords.push({x, y, uid});
+
+             if(origins.length > 0) {
+                 const satColor = isMe ? 'rgba(34, 211, 238, 0.4)' : 'rgba(100, 116, 139, 0.4)';
+                 origins.forEach(o => {
+                    const sx = w/2 + (o.x - myC.x)*minimapScale;
+                    const sy = h/2 + (o.z - myC.z)*minimapScale;
+                    minimapCtx.beginPath();
+                    minimapCtx.arc(sx, sy, 1, 0, Math.PI*2);
+                    minimapCtx.fillStyle = satColor;
+                    minimapCtx.fill();
+                 });
+             }
+
+             minimapCtx.fillStyle = mainColor;
+             minimapCtx.beginPath(); 
+             minimapCtx.arc(x,y, isMe?4:2.5, 0, Math.PI*2); 
+             minimapCtx.fill();
+             
+             if(isMe) {
+                 minimapCtx.strokeStyle = 'rgba(34, 211, 238, 0.3)';
+                 minimapCtx.beginPath(); minimapCtx.arc(x,y, 8, 0, Math.PI*2); minimapCtx.stroke();
+             }
+        });
 
-            raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects(nodeGroup.children);
-            if (intersects.length > 0) {
-                const obj = intersects[0].object;
-                DOM.tooltip.classList.remove('hidden');
-                DOM.ttTitle.textContent = obj.userData.text;
-                DOM.ttSub.textContent = obj.userData.isTrash ? "AMENAZA (CLICK PARA BORRAR)" : (obj.userData.isRare ? "NODO RARO" : `NIVEL ${obj.userData.level}`);
-                DOM.ttTitle.className = obj.userData.isTrash ? "text-red-500 font-bold" : (obj.userData.isRare ? "text-yellow-400 font-bold" : "text-cyan-300 font-bold");
-                document.body.style.cursor = 'pointer';
-            } else {
-                DOM.tooltip.classList.add('hidden');
-                document.body.style.cursor = 'default';
-            }
+        if (cometGroup) {
+            const cometX = w/2 + (cometGroup.position.x - myC.x) * minimapScale;
+            const cometY = h/2 + (cometGroup.position.z - myC.z) * minimapScale;
 
-            composer.render();
-        }
+            minimapCtx.beginPath();
+            minimapCtx.arc(cometX, cometY, 3, 0, Math.PI * 2);
+            minimapCtx.fillStyle = 'rgba(0, 255, 255, 0.4)'; 
+            minimapCtx.fill();
 
-        // --- EVENT LISTENERS ---
-
-        document.querySelectorAll('.mode-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('mode-active'));
-                btn.classList.add('mode-active');
-                STATE.mode = btn.dataset.mode;
-                DOM.targetContainer.classList.add('hidden');
-                if(STATE.mode === 'bridge') {
-                    DOM.targetContainer.classList.remove('hidden');
-                    DOM.missionDesc.textContent = "Conecta el concepto A con el B mediante nodos intermedios.";
-                } else if (STATE.mode === 'miner') {
-                    DOM.missionDesc.textContent = "Busca nodos dorados (conceptos raros) para tu bóveda.";
-                } else if (STATE.mode === 'defense') {
-                    DOM.missionDesc.textContent = "¡ALERTA! Destruye los nodos basura rojos antes de que el cometa impacte.";
-                } else {
-                    DOM.missionDesc.textContent = "Explora la red semántica libremente.";
-                }
-            });
-        });
+            minimapCtx.beginPath();
+            minimapCtx.arc(cometX, cometY, 1.5, 0, Math.PI * 2);
+            minimapCtx.fillStyle = '#ffffff'; 
+            minimapCtx.fill();
+        }
+    }
 
-        DOM.sliders.forEach((s, i) => {
-            s.addEventListener('input', (e) => DOM.sliderVals[i].textContent = e.target.value);
-        });
+    function onMinimapClick(e) {
+        if(!minimapCtx) return;
+        const rect = minimapCtx.canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        
+        let closest = null;
+        let minD = 20; 
 
-        document.getElementById('btn-config-api').addEventListener('click', () => {
-            document.getElementById('panel-api').classList.toggle('hidden');
+        minimapDotCoords.forEach(dot => {
+            const d = Math.sqrt((x-dot.x)**2 + (y-dot.y)**2);
+            if(d < minD) { minD = d; closest = dot.uid; }
         });
 
-        document.getElementById('btn-save-api').addEventListener('click', () => {
-            const k = document.getElementById('input-api-key').value;
-            if(k) {
-                STATE.geminiKey = k;
-                localStorage.setItem('NEXUS_KEY', k);
-                log("LLAVE API ACTUALIZADA", "success");
-                document.getElementById('panel-api').classList.add('hidden');
-            }
-        });
+        if(closest) teleportToUser(closest);
+    }
 
-        DOM.btnViz.addEventListener('click', visualize);
+    function onWindowResize() { 
+        camera.aspect = window.innerWidth/window.innerHeight; 
+        camera.updateProjectionMatrix(); 
+        renderer.setSize(window.innerWidth, window.innerHeight); 
+        composer.setSize(window.innerWidth, window.innerHeight); 
+    }
+    
+    function onPointerMove(e) { 
+        mouse.x = (e.clientX/window.innerWidth)*2-1; 
+        mouse.y = -(e.clientY/window.innerHeight)*2+1; 
+        tooltip.style.left = e.clientX+20+'px'; 
+        tooltip.style.top = e.clientY+'px'; 
+    }
+    
+    function updateRaycaster() {
+        raycaster.setFromCamera(mouse, camera);
+        let targets = [...hashtagGroup.children];
+        if(cometHead) targets.push(cometHead);
 
-        document.getElementById('zoom-in').addEventListener('click', () => mmScale *= 1.2);
-        document.getElementById('zoom-out').addEventListener('click', () => mmScale *= 0.8);
+        const intersects = raycaster.intersectObjects(targets, false);
+        
+        if(intersects.length > 0) {
+            let o = intersects[0].object;
+            if(o.parent === cometHead || o.parent === cometGroup) o = cometHead; 
+
+            if(o === cometHead) {
+                tooltip.classList.remove('hidden');
+                const word = cometText ? cometText.geometry.parameters.text : "ENLACE";
+                tooltip.innerHTML = `
+                    <div class="border-b border-cyan-500/50 pb-1 mb-1 text-cyan-300 font-bold tracking-widest text-xs">COMETA NEURAL</div>
+                    <div class="text-white text-[10px]">SEÑAL: ${word}</div>
+                `;
+                document.body.style.cursor = 'pointer';
+                return;
+            }
 
-        // Arranque
-        initFirebase();
+            const d = o.userData;
+            if(d.hashtag) {
+                tooltip.classList.remove('hidden');
+                let typeColor = d.isPlaceholder ? "text-yellow-400" : "text-cyan-300";
+                let typeText = d.isPlaceholder ? "NODO USUARIO" : `NIVEL ${d.level}`;
+                
+                tooltip.innerHTML = `
+                    <div class="${typeColor} font-bold tracking-widest text-sm mb-1">${d.hashtag}</div>
+                    <div class="text-gray-400 text-[10px] uppercase">${typeText}</div>
+                `;
+                document.body.style.cursor = 'pointer';
+            }
+        } else { 
+            tooltip.classList.add('hidden'); 
+            document.body.style.cursor = 'default'; 
+        }
+    }
 
-    </script>
+    function stringToHslColor(str) {
+        let hash = 0; for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        return { color: `hsl(${Math.abs(hash % 360)}, 75%, 60%)`, h: Math.abs(hash % 360) };
+    }
+  </script>
 </body>
 </html>
\ No newline at end of file
