neuronalstar

Running

App Files Files Community

salomonsky commited on Dec 25, 2025

Commit

021a33b

verified ·

1 Parent(s): 7f5fa26

Update index.html

Browse files

Files changed (1) hide show

index.html +498 -614

index.html CHANGED Viewed

@@ -3,252 +3,135 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Analizador de Temas 3D con Gemini</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 {
-      font-family: 'Orbitron', sans-serif;
-      margin: 0;
-      overflow: hidden;
-    }
-    #container {
-      width: 100vw;
-      height: 100vh;
-      position: fixed;
-      top: 0;
-      left: 0;
-      background-color: #111827;
-    }
-    canvas {
-      display: block;
-    }
-    #ui {
-      position: fixed;
-      top: 20px;
-      left: 20px;
-      z-index: 100;
-      background-color: rgba(31, 41, 55, 0.9);
-      padding: 20px;
-      border-radius: 12px;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
-      max-width: 400px;
-      color: white;
-      height: calc(100vh - 40px);
-      display: flex;
-      flex-direction: column;
-    }
-    #tooltip {
-      position: absolute;
-      display: none;
-      background: rgba(0, 0, 0, 0.8);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 6px;
-      z-index: 101;
-      pointer-events: none;
-      font-size: 14px;
-    }
-    input[type="range"] {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 100%;
-      height: 8px;
-      background: #4b5563;
-      border-radius: 5px;
-      outline: none;
-      opacity: 0.7;
-      transition: opacity .2s;
-    }
-    input[type="range"]:hover {
-      opacity: 1;
-    }
-    input[type="range"]::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 20px;
-      height: 20px;
-      background: #3b82f6;
-      border-radius: 50%;
-      cursor: pointer;
-    }
-    input[type="range"]::-moz-range-thumb {
-      width: 20px;
-      height: 20px;
-      background: #3b82f6;
-      border-radius: 50%;
-      cursor: pointer;
-    }
-    #progressBarContainer {
-      width: 100%;
-      background-color: #374151;
-      border-radius: 4px;
-      overflow: hidden;
-      display: none;
-      height: 6px;
-      margin-top: 12px;
-    }
-    #progressBar {
-      width: 0%;
-      height: 6px;
-      background-color: #3b82f6;
-    }
-    #loginOverlay {
-      transition: opacity 0.5s ease-in-out;
-      display: flex;
-      opacity: 0;
-    }
-    #toast {
-      position: fixed;
-      top: 20px;
-      left: 50%;
-      background-color: #22c55e;
-      color: white;
-      padding: 16px;
-      border-radius: 8px;
-      box-shadow: 0 4px 10px rgba(0,0,0,.3);
-      z-index: 200;
-      transform: translateY(-120%) translateX(-50%);
-      transition: transform 0.5s ease-in-out;
-      font-weight: bold;
-    }
-    #toast.show {
-      transform: translateY(0) translateX(-50%);
-    }
-    #minimapContainer {
-      width: 100%;
-      height: 250px;
-      margin-top: 16px;
-      flex-shrink: 0;
-    }
-    #minimap {
-      width: 100%;
-      height: 100%;
-      background-color: #1f2937;
-      border-radius: 8px;
-      border: 1px solid #4b5563;
-      cursor: pointer;
-    }
-    /* main auth buttons inside the main UI header */
-    #mainAuthButtons {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-  </style>
 </head>
-<body>
-  <!-- Login modal / overlay -->
-  <div id="loginOverlay" class="fixed inset-0 bg-gray-900 bg-opacity-75 backdrop-blur-sm z-[200] items-center justify-center transition-opacity duration-500">
-    <div id="loginModal" class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-sm">
-      <div id="loginForm">
-        <h2 class="text-2xl font-bold text-green-400 mb-4">Iniciar Sesión</h2>
-        <p class="text-gray-300 mb-6" id="loginMessage">Por favor, inicia sesión o regístrate.</p>
-        <input type="email" id="loginEmail" class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:border-blue-500" placeholder="Correo electrónico" autocomplete="email">
-        <input type="password" id="loginPassword" class="w-full p-3 mt-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:border-blue-500" placeholder="Contraseña" autocomplete="current-password">
-        <div class="flex justify-between items-center mt-4 text-sm">
-          <label class="flex items-center text-gray-400">
-            <input type="checkbox" id="showPasswordCheck" class="mr-2 rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
-            Mostrar contraseña
-          </label>
-          <label class="flex items-center text-gray-400">
-            <input type="checkbox" id="rememberMeCheck" class="mr-2 rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500" checked>
-            Recordarme
-          </label>
-        </div>
-        <div class="flex flex-col space-y-2 mt-6">
-          <button id="loginButton" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Entrar</button>
-          <button id="registerButton" class="w-full bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Registrar</button>
-          <button id="anonymousLoginButton" class="w-full bg-gray-900 hover:bg-black text-blue-300 font-bold py-3 px-4 rounded-lg transition duration-300 border border-gray-700">Explorar como Anónimo</button>
         </div>
       </div>
-      <div id="usernameForm" style="display: none;">
-        <h2 class="text-2xl font-bold text-green-400 mb-4">¡Bienvenido!</h2>
-        <p class="text-gray-300 mb-6" id="usernameMessage">Elige un nombre de usuario público para continuar.</p>
-        <input type="text" id="usernameInput" class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:border-blue-500" placeholder="Elige un nombre de usuario">
-        <button id="saveUsernameButton" class="w-full mt-4 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Guardar y Entrar</button>
       </div>
     </div>
   </div>
-  <div id="container"></div>
-  <div id="tooltip" class="z-[101]"></div>
-  <div id="ui">
     <div class="flex items-center justify-between mb-4">
-      <h1 class="text-2xl font-bold text-white flex items-center space-x-2">
         <svg class="w-6 h-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
         </svg>
-        <span class="text-green-400">ECOTAGS</span>
       </h1>
       <div class="flex items-center gap-2">
-        <span id="authStatus" class="text-xs text-gray-300 hidden"></span>
-      </div>
-      <div id="mainAuthButtons" class="flex items-center">
-        <button id="mainLoginButton" class="bg-blue-600 text-white px-3 py-1 rounded text-sm mr-2" style="display:none" title="Iniciar sesión">Iniciar sesión</button>
-        <button id="mainLogoutButton" class="bg-red-600 text-white px-3 py-1 rounded text-sm mr-2" style="display:none" title="Cerrar sesión">Cerrar sesión</button>
       </div>
     </div>
-    <input type="text" id="topicInput" class="w-full p-2 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:border-blue-500 mb-4" placeholder="Escribe uno o mas hashtags">
-    <label for="level1Slider" class="text-sm text-gray-400">Nivel 1 (1-15): <span id="level1Value">10</span></label>
-    <input type="range" id="level1Slider" min="1" max="15" value="10" class="w-full mb-2">
-    <label for="level2Slider" class="text-sm text-gray-400">Nivel 2 (5-8): <span id="level2Value">5</span></label>
-    <input type="range" id="level2Slider" min="5" max="8" value="5" class="w-full mb-2">
-    <label for="level3Slider" class="text-sm text-gray-400">Nivel 3 (1-3): <span id="level3Value">3</span></label>
-    <input type="range" id="level3Slider" min="1" max="3" value="3" class="w-full mb-4">
-    <details class="mb-3 bg-gray-700/50 rounded-md p-3 border border-gray-600">
-      <summary class="cursor-pointer text-sm text-blue-300 font-semibold">Configuración</summary>
-      <div class="mt-3 space-y-2 text-sm">
         <div>
-          <label for="geminiKeyInput" class="block text-gray-300">Gemini API Key (guardada localmente)</label>
-          <input type="password" id="geminiKeyInput" class="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:border-blue-500" placeholder="AIza...">
         </div>
-        <div class="flex items-center gap-2">
-          <button id="saveGeminiKeyBtn" class="bg-gray-600 hover:bg-gray-500 px-3 py-1 rounded">Guardar clave</button>
-          <span id="geminiKeyStatus" class="text-gray-400"></span>
         </div>
-        <p class="text-gray-400">En un Space estático de Hugging Face, no hay backend: guarda tu clave localmente aquí para llamar a la API de Gemini desde el navegador. Si necesitas ocultar la clave, migra a un Space con backend (Gradio/Streamlit) y usa Secrets del Space.</p>
       </div>
     </details>
-    <div class="flex items-center gap-2 mb-2">
-      <button id="newNeuronButton" class="bg-gray-700 hover:bg-gray-600 text-white font-semibold py-2 px-3 rounded-lg transition duration-300">+ Nueva neurona</button>
-      <button id="visualizeButton" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
-      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
-      </svg>
-      <span>Sembrar</span>
       </button>
     </div>
-    <div id="progressBarContainer"><div id="progressBar"></div></div>
-    <div id="userListContainer" class="mt-4 flex flex-col" style="max-height:25vh;">
-      <h2 class="font-bold text-lg mb-2 text-blue-300">Galaxias de Usuarios</h2>
-      <div id="userList" class="w-full overflow-y-auto text-gray-300 pr-2"></div>
     </div>
-    <div id="minimapContainer">
-      <div class="flex justify-between items-center mb-2">
-        <h2 class="font-bold text-lg text-blue-300">Minimapa Galáctico</h2>
-        <div class="flex space-x-1">
-          <button id="zoomOutButton" class="w-6 h-6 bg-gray-700 hover:bg-gray-600 rounded text-lg font-bold flex items-center justify-center">-</button>
-          <button id="zoomInButton" class="w-6 h-6 bg-gray-700 hover:bg-gray-600 rounded text-lg font-bold flex items-center justify-center">+</button>
-        </div>
       </div>
-      <canvas id="minimap" width="360" height="200"></canvas>
     </div>
   </div>
@@ -259,16 +142,16 @@
   <script type="module">
     import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
     import {
       getAuth,
       onAuthStateChanged,
       createUserWithEmailAndPassword,
       signInWithEmailAndPassword,
-      setPersistence,
-      browserLocalPersistence,
-      browserSessionPersistence,
       signInAnonymously,
-      signOut
     } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
     import {
       getFirestore,
@@ -282,7 +165,6 @@
       setLogLevel
     } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
-    // --- FIREBASE CONFIG (usar la API key del proyecto Firebase) ---
     const firebaseConfig = {
       apiKey: "AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
       authDomain: "neuronal-1f3b9.firebaseapp.com",
@@ -293,10 +175,8 @@
       measurementId: "G-102SEBLQFJ"
     };
-    // --- Gemini API Key helpers (local fallback) ---
-    // ADVERTENCIA: Incluir una clave por defecto en el cliente la expone públicamente.
-    // Úsalo solo si entiendes los riesgos. Recomendado: guardar por UI o usar backend con Secrets.
-    const DEFAULT_GEMINI_KEY = 'AIzaSyDmoQNpzgzW21f_WFCU9YbaAeI1fdOJMlo';
     function getLocalGeminiKey() {
       try {
         const k = localStorage.getItem('GEMINI_API_KEY') || '';
@@ -308,28 +188,37 @@
     function setLocalGeminiKey(k) {
       try { localStorage.setItem('GEMINI_API_KEY', k || ''); } catch {}
     }
-    // Three.js aliases (for older included builds)
     const THREE = window.THREE;
     const OrbitControls = THREE.OrbitControls;
     const TextGeometry = THREE.TextGeometry;
     const FontLoader = THREE.FontLoader;
-    // Scene variables
     let scene, camera, renderer, controls, raycaster, mouse;
     let hashtagGroup, tooltip;
     let font;
     let mapCount = 0;
-    // Firebase / app state
-    let db, auth;
     let userId = null;
     const appId = "neuronal-1f3b9";
     let userProfile = null;
     let userMaps = {};
     let isAuthReady = false;
     let isFontReady = false;
-    let isAnonymous = false;
     let userProfileCache = {};
     let allMapsDataCache = {};
     const LOAD_DISTANCE = 30.0;
@@ -339,9 +228,10 @@
     let minimapScale = 0.025;
     const MINIMAP_DOT_SIZE = 2;
-    // Detectar si estamos en un Space estático de Hugging Face
     const isHFStatic = /\.hf\.space$/.test(location.hostname);
     const normalizeString = (str) => {
       if (!str) return "";
       return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
@@ -353,34 +243,32 @@
       function (loadedFont) {
         font = loadedFont;
         isFontReady = true;
-        tryStartApp();
       },
       undefined,
       function (err) {
-        console.error('Error al cargar la fuente 3D:', err);
       }
     );
     initFirebase();
-    // Setup config UI
     const geminiKeyInput = document.getElementById('geminiKeyInput');
     const saveGeminiKeyBtn = document.getElementById('saveGeminiKeyBtn');
     const geminiKeyStatus = document.getElementById('geminiKeyStatus');
     if (geminiKeyInput && saveGeminiKeyBtn && geminiKeyStatus) {
       const existing = getLocalGeminiKey();
-      if (existing) geminiKeyInput.value = existing;
       saveGeminiKeyBtn.addEventListener('click', (e) => {
         e.preventDefault();
-        setLocalGeminiKey(geminiKeyInput.value.trim());
-        geminiKeyStatus.textContent = 'Clave guardada localmente';
         setTimeout(() => { geminiKeyStatus.textContent = ''; }, 2000);
       });
-      // Mostrar aviso si se está usando la clave por defecto embebida
-      if (!localStorage.getItem('GEMINI_API_KEY')) {
-        geminiKeyStatus.textContent = 'Usando clave por defecto embebida (no recomendado)';
-        setTimeout(() => { geminiKeyStatus.textContent = ''; }, 4000);
-      }
     }
     async function initFirebase() {
@@ -388,203 +276,138 @@
         const app = initializeApp(firebaseConfig);
         db = getFirestore(app);
         auth = getAuth(app);
         setLogLevel('Debug');
         const loginMessage = document.getElementById('loginMessage');
         const loginOverlay = document.getElementById('loginOverlay');
-        const loginForm = document.getElementById('loginForm');
-        const usernameForm = document.getElementById('usernameForm');
         const loginEmail = document.getElementById('loginEmail');
         const loginPassword = document.getElementById('loginPassword');
-        const showPasswordCheck = document.getElementById('showPasswordCheck');
-        const rememberMeCheck = document.getElementById('rememberMeCheck');
         const loginButton = document.getElementById('loginButton');
         const registerButton = document.getElementById('registerButton');
         const saveUsernameButton = document.getElementById('saveUsernameButton');
         const usernameInput = document.getElementById('usernameInput');
-        const usernameMessage = document.getElementById('usernameMessage');
-        const anonymousLoginButton = document.getElementById('anonymousLoginButton');
-        const mainLoginButton = document.getElementById('mainLoginButton');
         const mainLogoutButton = document.getElementById('mainLogoutButton');
-        const authStatus = document.getElementById('authStatus');
-        // show/hide password
-        showPasswordCheck.addEventListener('change', () => {
-          loginPassword.type = showPasswordCheck.checked ? 'text' : 'password';
-        });
-        // register email/password
         registerButton.addEventListener('click', async () => {
           try {
             const email = loginEmail.value;
             const password = loginPassword.value;
             if (email.length < 6 || password.length < 6) {
-              loginMessage.innerText = "Correo y contraseña deben tener al menos 6 caracteres.";
-              loginMessage.classList.add('text-red-500');
               return;
             }
             loginMessage.innerText = "Registrando...";
-            loginMessage.classList.remove('text-red-500');
             await createUserWithEmailAndPassword(auth, email, password);
           } catch (error) {
-            console.error("Error al registrar:", error);
             loginMessage.innerText = `Error: ${error.message}`;
-            loginMessage.classList.add('text-red-500');
           }
         });
-        // login email/password
         loginButton.addEventListener('click', async () => {
           try {
             const email = loginEmail.value;
             const password = loginPassword.value;
-            const persistence = rememberMeCheck.checked ? browserLocalPersistence : browserSessionPersistence;
-            loginMessage.innerText = "Iniciando sesión...";
-            loginMessage.classList.remove('text-red-500');
-            await setPersistence(auth, persistence);
             await signInWithEmailAndPassword(auth, email, password);
           } catch (error) {
-            console.error("Error al iniciar sesión:", error);
             loginMessage.innerText = `Error: ${error.message}`;
-            loginMessage.classList.add('text-red-500');
           }
         });
-        // (Google eliminado) Solo Email/Password y Anónimo
-        // anonymous login (from modal)
-        anonymousLoginButton.addEventListener('click', async () => {
-          try {
-            loginMessage.innerText = "Entrando como anónimo...";
-            loginMessage.classList.remove('text-red-500');
-            await signInAnonymously(auth);
-          } catch (error) {
-            console.error("Error al iniciar sesión anónima:", error);
-            loginMessage.innerText = `Error: ${error.message}`;
-            loginMessage.classList.add('text-red-500');
-          }
         });
-        // mainLoginButton (in UI header) -> open login modal for upgrade from anonymous or to login
-        mainLoginButton.addEventListener('click', async () => {
-          // Abrir modal de login y ocultar opción anónima mientras se solicita inicio de sesión
-          if (anonymousLoginButton) anonymousLoginButton.style.display = 'none';
-          loginOverlay.style.display = 'flex';
-          setTimeout(() => { loginOverlay.style.opacity = '1'; }, 10);
-        });
-        // mainLogoutButton (in UI header)
-        mainLogoutButton.addEventListener('click', async () => {
-          try {
-            await signOut(auth);
-          } catch (err) {
-            console.error('Error al cerrar sesión:', err);
-          }
         });
-        // (Google eliminado) No hay procesamiento de redirect
-        // save username for new accounts (modal)
         saveUsernameButton.addEventListener('click', async () => {
-          if (!userId) {
-            usernameMessage.innerText = "Error, no se ha detectado usuario. Refresca la página.";
-            usernameMessage.classList.add('text-red-500');
-            return;
-          }
           const username = normalizeString(usernameInput.value.trim());
           if (username.length < 3) {
-            usernameMessage.innerText = "El nombre debe tener al menos 3 caracteres.";
-            usernameMessage.classList.add('text-red-500');
             return;
           }
-          // Establecer perfil local inmediatamente para no bloquear por red
-          userProfile = { username };
-          userProfileCache[userId] = userProfile;
-          loginOverlay.style.opacity = '0';
-          setTimeout(() => { loginOverlay.style.display = 'none'; }, 500);
-          initScene();
-          loadAllMaps();
-          // Guardar en Firestore en segundo plano (si falla, seguimos)
-          try { await saveUserProfile(userId, username); } catch (e) { console.warn('No se pudo guardar el perfil en Firestore (continuamos localmente):', e); }
         });
-        // auth state changes
         onAuthStateChanged(auth, async (user) => {
           if (user) {
-            console.log("Usuario autenticado:", user.uid);
             userId = user.uid;
             isAuthReady = true;
-            isAnonymous = user.isAnonymous;
-            if (authStatus) {
-              authStatus.classList.remove('hidden');
-              authStatus.textContent = isAnonymous ? 'Estado: Anónimo' : `Estado: Autenticado (${user.email || 'email no disponible'})`;
-            }
-            if (user.isAnonymous) {
-              console.log("Usuario es anónimo (nueva sesión). Solicitar username.");
-              // No asignamos un username automático; mostramos el formulario
-              userProfile = null;
-              mainLoginButton.style.display = 'none';
-              mainLogoutButton.style.display = 'inline-block';
-              tryStartApp();
-            } else {
-              console.log("Usuario registrado.");
-              isAnonymous = false;
-              // try fetch profile; if none, show username form
-              await fetchUserProfile(userId);
-              mainLoginButton.style.display = 'none';
-              mainLogoutButton.style.display = 'inline-block';
-              tryStartApp();
-            }
-            // Ocultar overlay solo si YA existe perfil de usuario.
-            // En nuevas sesiones anónimas queremos mostrar el formulario de username
-            // y mantener el overlay visible hasta que el usuario guarde su nombre.
             if (userProfile) {
               loginOverlay.style.opacity = '0';
               setTimeout(() => { loginOverlay.style.display = 'none'; }, 500);
-            }
-          } else {
-            console.log("Ningún usuario autenticado.");
-            userId = null;
-            isAuthReady = false;
-            isAnonymous = false;
-            userProfile = null;
-            // Modo solo anónimo: iniciar sesión anónima automáticamente
-            try {
-              await signInAnonymously(auth);
-              console.log('Sesión anónima iniciada automáticamente.');
-            } catch (e) {
-              console.error('No se pudo iniciar sesión anónima automáticamente:', e);
-              // Si falla, mostrar modal básico con opción anónima
-              loginOverlay.style.display = 'flex';
-              loginOverlay.style.opacity = '1';
-              loginForm.style.display = 'block';
-              usernameForm.style.display = 'none';
-              loginMessage.innerText = "No se pudo iniciar sesión automática. Usa 'Explorar como Anónimo'.";
-              loginMessage.classList.remove('text-red-500');
-              if (anonymousLoginButton) anonymousLoginButton.style.display = 'block';
-              mainLoginButton.style.display = 'inline-block';
-              mainLogoutButton.style.display = 'none';
-              if (authStatus) {
-                authStatus.textContent = 'Estado: No autenticado';
-                authStatus.classList.remove('hidden');
               }
             }
           }
         });
       } catch (error) {
-        console.error("Error inicializando Firebase:", error);
-        const loginMessage = document.getElementById('loginMessage');
-        if (loginMessage) {
-          loginMessage.innerText = "Error de conexión. Intenta recargar.";
-          loginMessage.classList.add('text-red-500');
-        }
       }
     }
-    // Firestore profile helpers
     async function fetchUserProfile(uid) {
       if (!db) return;
       try {
@@ -593,13 +416,10 @@
         if (docSnap && docSnap.exists()) {
           userProfile = docSnap.data();
           userProfileCache[uid] = userProfile;
-          console.log("Perfil de usuario cargado:", userProfile);
         } else {
-          console.log("No se encontró perfil para el usuario:", uid);
           userProfile = null;
         }
       } catch (error) {
-        console.error("Error al buscar perfil:", error);
         userProfile = null;
       }
     }
@@ -611,19 +431,14 @@
         await setDoc(profileDocRef, { username: username });
         userProfile = { username: username };
         userProfileCache[uid] = userProfile;
-        console.log("Perfil de usuario guardado:", userProfile);
       } catch (error) {
-        // No bloquear el uso por errores de red/offline; mantener perfil local
-        userProfile = { username: username };
-        userProfileCache[uid] = userProfile;
-        console.warn("Error al guardar perfil (continuamos con perfil local):", error);
       }
     }
     async function getProfile(uid) {
-      if (userProfileCache[uid]) {
-        return userProfileCache[uid];
-      }
       if (!db) return null;
       try {
         const profileDocRef = doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile');
@@ -636,43 +451,159 @@
           return null;
         }
       } catch (error) {
-        console.error("Error al buscar perfil (getProfile):", error);
         return null;
       }
     }
-    function tryStartApp() {
-      if (!isAuthReady || !isFontReady) {
-        return;
-      }
-      console.log("Auth y Fuente listos. Iniciando app...");
-      const loginOverlay = document.getElementById('loginOverlay');
-      const loginForm = document.getElementById('loginForm');
-      const usernameForm = document.getElementById('usernameForm');
-      const usernameMessage = document.getElementById('usernameMessage');
-      // Permitir visualizar el mapa de inmediato, incluso si aún no se ha elegido username
-      // Ocultamos overlay y cargamos escena y mapas.
-      loginOverlay.style.opacity = '0';
-      setTimeout(() => { loginOverlay.style.display = 'none'; }, 500);
-      initScene();
-      loadAllMaps();
-      // Si falta perfil, mostrar un aviso no bloqueante en consola y dejar opción de abrir el modal más tarde
-      if (!userProfile) {
-        console.log("Sugerencia: elige tu nombre de usuario en cualquier momento desde el modal para personalizar tu galaxia.");
       }
     }
-    // ---------- Three.js scene setup and main app logic ----------
     function initScene() {
       scene = new THREE.Scene();
-      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
       camera.position.set(0, 0, 15);
-      renderer = new THREE.WebGLRenderer({ antialias: true });
       renderer.setSize(window.innerWidth, window.innerHeight);
       renderer.setPixelRatio(window.devicePixelRatio);
       document.getElementById('container').appendChild(renderer.domElement);
       tooltip = document.getElementById('tooltip');
@@ -695,40 +626,16 @@
       hashtagGroup = new THREE.Group();
       scene.add(hashtagGroup);
       const visualizeButton = document.getElementById('visualizeButton');
-      const newNeuronButton = document.getElementById('newNeuronButton');
-      const topicInput = document.getElementById('topicInput');
-      const level1Slider = document.getElementById('level1Slider');
-      const level2Slider = document.getElementById('level2Slider');
-      const level3Slider = document.getElementById('level3Slider');
-      // Asegurar que los campos estén habilitados siempre (modo anónimo o autenticado)
-      if (topicInput) topicInput.disabled = false;
-      if (level1Slider) level1Slider.disabled = false;
-      if (level2Slider) level2Slider.disabled = false;
-      if (level3Slider) level3Slider.disabled = false;
-      // Permitir sembrar también en modo anónimo (no se guardará en la nube)
-      // Evitar múltiples bindings si la escena se reinstala
       if (!visualizeButton.dataset.bound) {
         visualizeButton.dataset.originalHtml = visualizeButton.innerHTML;
         visualizeButton.addEventListener('click', handleAnalysisAndVisualization);
         visualizeButton.dataset.bound = '1';
       }
-      if (isAnonymous) {
-        console.log('Modo anónimo: podrás visualizar neuronas, pero no se guardarán en Firestore.');
-        topicInput.placeholder = 'Ingresa un tema para sembrar (modo anónimo)';
-      }
-      // Botón "Nueva neurona": limpiar input y centrar cámara en tu galaxia
-      if (newNeuronButton) {
-        newNeuronButton.addEventListener('click', () => {
-          const ti = document.getElementById('topicInput');
-          if (ti) ti.value = '';
-          focusOnUserMaps();
-          if (ti) ti.focus();
-        });
-      }
       document.getElementById('level1Slider').addEventListener('input', (e) => {
         document.getElementById('level1Value').innerText = e.target.value;
@@ -747,8 +654,6 @@
       if (minimapCanvas) {
         minimapCtx = minimapCanvas.getContext('2d');
         minimapCanvas.addEventListener('click', onMinimapClick);
-      } else {
-        console.error("No se encontró el canvas del minimapa");
       }
       document.getElementById('zoomInButton').addEventListener('click', () => {
@@ -765,37 +670,33 @@
     function animate() {
       requestAnimationFrame(animate);
-      controls.update();
-      updateRaycaster();
-      hashtagGroup.children.forEach(object => {
-        if (object.userData.isText) {
-          object.lookAt(camera.position);
-          const distance = object.position.distanceTo(camera.position);
-          const minScale = 0.5;
-          const maxScale = 4.0;
-          const scaleFactor = 10;
-          let scale = (1 / distance) * scaleFactor;
-          scale = Math.max(minScale, Math.min(maxScale, scale));
-          object.scale.set(scale, scale, scale);
-        }
-      });
-      hashtagGroup.children.forEach(object => {
-        if (object.userData.isPlaceholder && !object.userData.isLoaded) {
-          const distance = object.position.distanceTo(camera.position);
-          if (distance < LOAD_DISTANCE) {
-            object.userData.isLoaded = true;
-            object.visible = false;
-            loadFullGalaxy(object.userData.ownerId);
           }
-        }
-      });
-      renderer.render(scene, camera);
     }
-    // Fetch helper with timeout + backoff
     async function fetchWithTimeout(url, options = {}, timeoutMs = 25000) {
       const controller = new AbortController();
       const id = setTimeout(() => controller.abort(), timeoutMs);
@@ -820,11 +721,16 @@
       }
     }
-    // Gemini call routed through Netlify proxy with local fallback
     async function callGemini(topic, mainCount, variantCount, subVariantCount) {
       const modelId = 'gemini-2.5-flash-preview-09-2025';
       const depth = 3;
       let systemInstruction = `Eres un analista de tendencias. Tu tarea es generar una lista estructurada de palabras clave. Normaliza todo el texto para que no tenga acentos.`;
       let userPrompt = `Tema: "${topic}".\n`;
@@ -881,11 +787,6 @@
           items: { type: "STRING" }
         };
         n2Items.required.push("sub_variantes");
-      } else if (depth == 2) {
-        userPrompt += `3. Asegurate que todo el texto no contenga acentos.`;
-      } else {
-        userPrompt += `1. Genera una lista de ${mainCount} palabras clave principales (Nivel 1).\n`;
-        userPrompt += `2. Asegurate que todo el texto no contenga acentos.`;
       }
       const payload = {
@@ -899,52 +800,35 @@
         }
       };
-      console.log("Preparando solicitud a Gemini:", payload);
-      // 1) Intentar proxy de Netlify solo si NO estamos en Hugging Face Static
       if (!isHFStatic) {
         try {
           const proxyResp = await fetchWithBackoff('/.netlify/functions/gemini-proxy', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ model: modelId, payload })
-          }, /*retries*/ 1, /*delay*/ 1000, /*timeoutMs*/ 25000);
           if (proxyResp.ok) {
             return await proxyResp.json();
-          } else {
-            const t = await proxyResp.text();
-            console.warn('Proxy no disponible o error:', proxyResp.status, t);
           }
-        } catch (e) {
-          console.warn('Fallo al conectar con el proxy, usando fallback local...', e);
-        }
       }
-      // 2) Fallback to direct call with local key (only for local/dev)
-      const localKey = getLocalGeminiKey();
-      if (!localKey) {
-        throw new Error('No se pudo usar un backend y no hay clave local configurada. En Hugging Face (Static), guarda tu clave en Configuración.');
-      }
       const apiUrlDirect = `https://generativelanguage.googleapis.com/v1beta/models/${modelId}:generateContent?key=${localKey}`;
       const directResp = await fetchWithBackoff(apiUrlDirect, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload)
-      }, /*retries*/ 2, /*delay*/ 1000, /*timeoutMs*/ 25000);
       if (!directResp.ok) {
-        const errorBody = await directResp.text();
-        console.error('Error en la API de Gemini (fallback):', directResp.status, errorBody);
-        throw new Error(`Error en la API (fallback): ${directResp.statusText}`);
       }
       return await directResp.json();
     }
-    // Main handler for analysis + visualization
     async function handleAnalysisAndVisualization() {
-      if (!font) {
-        console.error("La fuente 3D no se ha cargado. Espera o refresca.");
-        return;
-      }
       const topic = normalizeString(document.getElementById('topicInput').value);
       const mainCount = document.getElementById('level1Slider').value;
@@ -955,26 +839,22 @@
       const progressBarContainer = document.getElementById('progressBarContainer');
       const progressBar = document.getElementById('progressBar');
-      if (!topic) {
-        console.warn("Por favor, introduce un tema.");
-        return;
-      }
       button.disabled = true;
-      // Guardar HTML original si no existe y colocar estado "Analizando..."
       if (!button.dataset.originalHtml) button.dataset.originalHtml = button.innerHTML;
-      button.innerHTML = 'Analizando...';
-      // Watchdog: si algo se queda colgado, restaurar UI en 30s
       const watchdog = setTimeout(() => {
         try { button.disabled = false; } catch {}
         try { if (button.dataset.originalHtml) button.innerHTML = button.dataset.originalHtml; } catch {}
-        try { progressBarContainer.style.display = 'none'; } catch {}
       }, 30000);
       progressBar.style.transition = 'none';
       progressBar.style.width = '0%';
       progressBarContainer.style.display = 'block';
       void progressBar.offsetWidth;
       progressBar.style.transition = 'width 20s ease-out';
       progressBar.style.width = '95%';
@@ -983,6 +863,7 @@
       const existingUserMaps = userMaps[userId] || [];
       const localMapIndex = existingUserMaps.length;
       if (localMapIndex === 0) {
         const galaxyIndex = Object.keys(userMaps).length;
         const GALAXY_SEPARATION_STEP = 750;
@@ -1004,11 +885,9 @@
       }
       try {
-        console.log(`Llamando a Gemini con: ${topic}`);
         const result = await callGemini(topic, mainCount, variantCount, subVariantCount);
-        console.log("Respuesta de Gemini recibida:", result);
         const candidate = result.candidates?.[0];
         if (candidate && candidate.content?.parts?.[0]?.text) {
           const text = candidate.content.parts[0].text;
           const parsedData = JSON.parse(text);
@@ -1017,15 +896,15 @@
           visualizeRoot(rootTopic, mapOrigin);
           visualizeHashtags(parsedData.lista_palabras, mapOrigin, 1, null);
-          // Guardar si hay sesión (incluye usuarios anónimos con uid)
           if (db && userId) {
             await saveMapToFirestore(rootTopic, "3", mapOrigin, parsedData);
           }
         } else {
-          throw new Error("Respuesta de Gemini inválida o vacía.");
         }
       } catch (error) {
-        console.error("Error en handleAnalysisAndVisualization:", error);
       } finally {
         clearTimeout(watchdog);
         button.disabled = false;
@@ -1034,19 +913,18 @@
         } else {
           button.innerText = 'Sembrar';
         }
-        // Limpiar el input para permitir nueva siembra inmediata
         const ti = document.getElementById('topicInput');
         if (ti) ti.value = '';
         progressBar.style.transition = 'width 0.3s ease-in';
         progressBar.style.width = '100%';
         setTimeout(() => {
           progressBarContainer.style.display = 'none';
           progressBar.style.width = '0%';
         }, 500);
       }
     }
-    // Scene helpers (clear, visualize root, visualize hashtags, etc.)
     function clearScene() {
       while (hashtagGroup.children.length > 0) {
         const object = hashtagGroup.children[0];
@@ -1064,20 +942,21 @@
         }
         hashtagGroup.remove(object);
       }
-      console.log("Escena limpiada.");
     }
     function visualizeRoot(topic, origin) {
       const { color: rootColor } = stringToHslColor(topic);
       const rootMaterial = new THREE.MeshStandardMaterial({
         color: new THREE.Color(rootColor),
-        roughness: 0.5,
-        metalness: 0.1
       });
       const rootTextMaterial = new THREE.MeshBasicMaterial({
         color: new THREE.Color(rootColor),
         transparent: true,
-        opacity: 0.7
       });
       const rootSphereRadius = 0.4;
@@ -1106,6 +985,43 @@
       hashtagGroup.add(rootTextMesh);
     }
     async function saveMapToFirestore(topic, depth, origin, data) {
       if (!db) return;
       try {
@@ -1119,15 +1035,14 @@
           userId: userId
         };
         await addDoc(mapCollection, mapDocument);
-        console.log("Mapa guardado en Firestore:", topic);
       } catch (error) {
-        console.error("Error guardando mapa en Firestore:", error);
       }
     }
     function loadAllMaps() {
       if (!db || !font) {
-        console.warn("Firestore o la fuente no están listos. Esperando...");
         if (!font) {
           setTimeout(loadAllMaps, 500);
         }
@@ -1138,23 +1053,23 @@
       const q = query(mapCollection);
       onSnapshot(q, async (snapshot) => {
-        console.log("Datos de Firestore recibidos, redibujando escena...");
         clearScene();
         mapCount = 0;
         userMaps = {};
         allMapsDataCache = {};
         if (snapshot.empty) {
-          console.log("No se encontraron mapas en Firestore.");
           drawMinimap();
           return;
         }
         snapshot.docs.forEach((doc) => {
           mapCount++;
           const map = doc.data();
           if (!map.origin || !map.data || !map.topic || !map.userId) {
-            console.warn("Documento de mapa incompleto, saltando:", doc.id);
             return;
           }
           const origin = new THREE.Vector3(map.origin.x, map.origin.y, map.origin.z);
@@ -1167,7 +1082,6 @@
           try {
             parsedData = JSON.parse(map.data);
           } catch (e) {
-            console.error("Error al parsear datos del mapa:", e, doc.id);
             return;
           }
@@ -1176,94 +1090,58 @@
           }
           allMapsDataCache[map.userId].push({ topic: map.topic, origin: origin, data: parsedData });
-          // Visualizar TODOS los mapas (propios y de otros usuarios) de inmediato
           visualizeRoot(map.topic, origin);
           visualizeHashtags(parsedData.lista_palabras, origin, 1, null);
         });
-        // (Placeholder de usuarios ya no es necesario porque se visualizan todas las constelaciones)
         const userListElement = document.getElementById('userList');
-        if (userListElement) {
-          userListElement.innerHTML = '';
-          const profilePromises = Object.keys(userMaps).map(uid => getProfile(uid));
-          const profiles = await Promise.all(profilePromises);
-          Object.keys(userMaps).forEach((uid, index) => {
-            const profile = profiles[index];
-            const username = profile ? profile.username : `Usuario ${uid.substring(0,4)}`;
             const userItem = document.createElement('div');
-            userItem.className = 'p-2 mb-1 rounded-md hover:bg-gray-700 cursor-pointer transition-colors duration-200 text-sm';
-            userItem.innerText = username;
             userItem.dataset.userid = uid;
             userItem.addEventListener('click', () => teleportToUser(uid));
             userListElement.appendChild(userItem);
-          });
-        }
         drawMinimap();
-        console.log(`Cargados ${mapCount} mapas.`);
         focusOnUserMaps();
-      }, (error) => {
-        console.error("Error al escuchar mapas de Firestore:", error);
-      });
-    }
-    async function visualizeUserPlaceholder(uid, centroid) {
-      const profile = await getProfile(uid);
-      const username = profile ? profile.username : 'Usuario';
-      const placeholderMaterial = new THREE.MeshBasicMaterial({
-        color: 0x00ffff,
-        emissive: 0x00ffff,
-        emissiveIntensity: 1,
-        wireframe: true
-      });
-      const placeholderGeometry = new THREE.SphereGeometry(0.5, 8, 8);
-      const placeholderSphere = new THREE.Mesh(placeholderGeometry, placeholderMaterial);
-      placeholderSphere.position.copy(centroid);
-      placeholderSphere.userData = {
-        isPlaceholder: true,
-        ownerId: uid,
-        isLoaded: false,
-        hashtag: username
-      };
-      const placeholderTextMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.7 });
-      const textGeometry = new TextGeometry(username, {
-        font: font,
-        size: 0.3,
-        height: 0.02,
-        curveSegments: 4,
-        bevelEnabled: false
-      });
-      textGeometry.computeBoundingBox();
-      const textMesh = new THREE.Mesh(textGeometry, placeholderTextMaterial);
-      textMesh.position.y += 0.6;
-      textMesh.position.x -= (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x) / 2;
-      textMesh.userData.isText = true;
-      placeholderSphere.add(textMesh);
-      hashtagGroup.add(placeholderSphere);
-    }
-    function loadFullGalaxy(ownerId) {
-      console.log("Cargando galaxia para:", ownerId);
-      const mapsToLoad = allMapsDataCache[ownerId];
-      if (!mapsToLoad) {
-        console.warn("No se encontraron datos en caché para:", ownerId);
-        return;
-      }
-      mapsToLoad.forEach(map => {
-        visualizeRoot(map.topic, map.origin);
-        visualizeHashtags(map.data.lista_palabras, map.origin, 1, null);
-      });
     }
     function focusOnUserMaps() {
       if (!controls) return;
       if (!userId || !userMaps[userId] || userMaps[userId].length === 0) {
-        console.log("Usuario sin mapas o no logueado, centrando en (0,0,0).");
         controls.target.set(0, 0, 0);
         camera.position.set(0, 0, 15);
         controls.update();
@@ -1273,7 +1151,6 @@
       const centroid = new THREE.Vector3(0, 0, 0);
       userMapOrigins.forEach(origin => centroid.add(origin));
       centroid.divideScalar(userMapOrigins.length);
-      console.log(`Enfocando en la constelación del usuario en:`, centroid);
       controls.target.copy(centroid);
       const cameraOffset = new THREE.Vector3(0, 5, 20);
       camera.position.copy(centroid).add(cameraOffset);
@@ -1282,14 +1159,12 @@
     function teleportToUser(targetUserId) {
       if (!controls || !userMaps[targetUserId] || userMaps[targetUserId].length === 0) {
-        console.warn("No se puede teletransportar: Faltan controles o mapas para el usuario", targetUserId);
         return;
       }
       const userMapOrigins = userMaps[targetUserId];
       const centroid = new THREE.Vector3(0, 0, 0);
       userMapOrigins.forEach(origin => centroid.add(origin));
       centroid.divideScalar(userMapOrigins.length);
-      console.log(`Teletransportando a la galaxia de ${targetUserId} en:`, centroid);
       controls.target.copy(centroid);
       const cameraOffset = new THREE.Vector3(0, 5, 20);
       camera.position.copy(centroid).add(cameraOffset);
@@ -1298,7 +1173,6 @@
     function visualizeHashtags(dataList, origin, level, parentColor = null) {
       if (!dataList || dataList.length === 0) return;
-      console.log(`Dibujando Nivel ${level} con ${dataList.length} items.`);
       for (const item of dataList) {
         let currentTag, variantsList;
         if (level === 1) {
@@ -1316,13 +1190,13 @@
         const nodeColor = (level === 1) ? color : parentColor;
         const nodeMaterial = new THREE.MeshStandardMaterial({
           color: new THREE.Color(nodeColor),
-          roughness: 0.5,
-          metalness: 0.1
         });
         const nodeTextMaterial = new THREE.MeshBasicMaterial({
           color: new THREE.Color(nodeColor),
           transparent: true,
-          opacity: 0.7
         });
         const theta = (h / 360) * Math.PI * 2;
@@ -1340,7 +1214,7 @@
         clusterCenter.add(origin);
         const branchColor = new THREE.Color(nodeColor).multiplyScalar(0.4);
-        const lineMaterial = new THREE.LineBasicMaterial({ color: branchColor });
         const linePoints = [origin, clusterCenter];
         const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints);
         const line = new THREE.Line(lineGeometry, lineMaterial);
@@ -1390,16 +1264,15 @@
       minimapCtx.arc(dot.x, dot.y, size, 0, Math.PI * 2);
       minimapCtx.fillStyle = color;
       minimapCtx.fill();
-      minimapCtx.fillStyle = 'white';
-      minimapCtx.font = '10px Orbitron';
-      minimapCtx.fillText(dot.username, dot.x + size + 3, dot.y + 4);
     }
     async function drawMinimap() {
       if (!minimapCtx || !userMaps) return;
       const canvas = minimapCtx.canvas;
-      minimapCtx.fillStyle = '#1f2937';
-      minimapCtx.fillRect(0, 0, canvas.width, canvas.height);
       minimapDotCoords = [];
       let centerX = 0, centerZ = 0;
@@ -1426,8 +1299,6 @@
         if (numSatellites > 0) {
           userMapsList.forEach(origin => userCentroid.add(origin));
           userCentroid.divideScalar(numSatellites);
-        } else {
-          console.warn(`Usuario ${uid} no tiene orígenes de mapa, usando (0,0,0)`);
         }
         const relX = (userCentroid.x - centerX) * minimapScale;
         const relZ = (userCentroid.z - centerZ) * minimapScale;
@@ -1436,7 +1307,7 @@
         const dotData = { x: canvasX, y: canvasY, uid: uid, username: username };
         minimapDotCoords.push(dotData);
         const isMe = (uid === userId);
-        const mainColor = isMe ? '#fde047' : '#06b6d4';
         const baseSize = MINIMAP_DOT_SIZE;
         const sizeBonus = (numSatellites > 1) ? Math.log(numSatellites) * 1.5 : 0;
         let mainSize = baseSize + sizeBonus;
@@ -1473,8 +1344,9 @@
       const y = event.clientY - rect.top;
       let clickedUser = null;
       let minDistance = 10;
-      for (let i = minimapDotCoords.length - 1; i >= 0; i--) {
         const dot = minimapDotCoords[i];
         const dx = x - dot.x;
         const dy = y - dot.y;
         const distance = Math.sqrt(dx * dx + dy * dy);
@@ -1484,7 +1356,6 @@
         }
       }
       if (clickedUser) {
-        console.log("Clic en minimapa sobre usuario:", clickedUser);
         teleportToUser(clickedUser);
       }
     }
@@ -1504,23 +1375,36 @@
     function updateRaycaster() {
       raycaster.setFromCamera(mouse, camera);
-      const objectsToIntersect = hashtagGroup.children.filter(o => o.isMesh);
       const intersects = raycaster.intersectObjects(objectsToIntersect, false);
       if (intersects.length > 0) {
         let targetObject = intersects[0].object;
         if (targetObject.userData.isText && targetObject.parent) targetObject = targetObject.parent;
         if (intersected.object !== targetObject) {
           intersected.object = targetObject;
           const data = intersected.object.userData;
-          tooltip.style.display = 'block';
-          let tooltipText = `<strong>${data.hashtag}</strong>`;
-          if (data.level !== undefined) tooltipText += `<br>Nivel: ${data.level}`;
-          else if (data.isPlaceholder) tooltipText = `<strong>Galaxia de ${data.hashtag}</strong>`;
           tooltip.innerHTML = tooltipText;
         }
       } else {
-        if (intersected.object) tooltip.style.display = 'none';
         intersected.object = null;
       }
     }
@@ -1533,4 +1417,4 @@
     }
   </script>
 </body>
-</html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Analizador de Temas 3D - Debug Mode</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
 </head>
+<body class="m-0 overflow-hidden bg-gray-900 font-[Orbitron]">
+  <div id="loginOverlay" class="fixed inset-0 bg-black/90 backdrop-blur-md z-[9999] flex items-center justify-center transition-opacity duration-500 opacity-100">
+    <div id="loginModal" class="bg-slate-900/95 border border-white/10 backdrop-blur-xl p-8 rounded-2xl shadow-2xl w-full max-w-md text-white relative overflow-hidden">
+      <div id="authStep1">
+        <h2 class="text-3xl font-bold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">ECOTAGS</h2>
+        <p class="text-gray-400 text-center mb-8 text-xs">Explorador Semántico de Redes Neuronales</p>
+        <button id="btnGoToAnon" class="w-full bg-gray-800 hover:bg-gray-700 text-gray-300 font-bold py-3 px-4 rounded-lg transition-all border border-white/10 flex items-center justify-center gap-2 mb-6">
+          <svg class="w-5 h-5" 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-gray-700"></div>
+          <span class="flex-shrink-0 mx-4 text-gray-600 text-xs">O usa tu correo</span>
+          <div class="flex-grow border-t border-gray-700"></div>
         </div>
+        <form id="emailAuthForm" class="space-y-3">
+          <input type="email" id="loginEmail" class="w-full p-3 rounded-lg bg-black/30 border border-white/10 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none text-sm transition-colors" placeholder="Correo electrónico">
+          <input type="password" id="loginPassword" class="w-full p-3 rounded-lg bg-black/30 border border-white/10 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none text-sm transition-colors" placeholder="Contraseña">
+          <div class="flex gap-2 pt-2">
+            <button type="button" id="loginButton" class="flex-1 bg-blue-600/20 hover:bg-blue-600/40 text-blue-400 py-2 rounded border border-blue-500/30 text-sm font-bold transition-all">Entrar</button>
+            <button type="button" id="registerButton" class="flex-1 bg-green-600/20 hover:bg-green-600/40 text-green-400 py-2 rounded border border-green-500/30 text-sm font-bold transition-all">Registrar</button>
+          </div>
+        </form>
+        <p id="loginMessage" class="text-center text-xs mt-4 min-h-[1.5rem] text-red-400 font-bold bg-black/40 rounded p-1"></p>
       </div>
+      <div id="authStep2" class="hidden">
+        <h2 class="text-2xl font-bold text-white mb-2">Identidad Digital</h2>
+        <p class="text-gray-400 text-sm mb-6">Elige el nombre de tu Estrella Central.</p>
+        <input type="text" id="usernameInput" class="w-full p-4 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-green-500 transition-all text-lg mb-6" placeholder="Tu Nickname">
+        <button id="saveUsernameButton" class="w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-400 hover:to-blue-500 text-white font-bold py-3 px-4 rounded-lg shadow-lg shadow-green-900/50 transition-all">
+          Iniciar Exploración
+        </button>
+        <button id="backToStep1" class="w-full mt-3 text-gray-500 text-xs hover:text-white transition-colors">Volver</button>
       </div>
     </div>
   </div>
+  <div id="container" class="w-screen h-screen fixed top-0 left-0 bg-gray-900"></div>
+  <div id="tooltip" class="absolute hidden bg-black/80 text-white px-3 py-2 rounded-lg z-[101] pointer-events-none text-sm border border-white/20 backdrop-blur-sm"></div>
+  <div id="ui" class="fixed top-5 left-5 z-[100] bg-slate-900/40 backdrop-blur-xl border border-white/10 p-5 rounded-2xl shadow-2xl max-w-[400px] text-white h-[calc(100vh-40px)] flex flex-col transition-all hover:bg-slate-900/60 hover:border-white/20 hidden">
     <div class="flex items-center justify-between mb-4">
+      <h1 class="text-xl font-bold text-white flex items-center space-x-2 drop-shadow-md">
         <svg class="w-6 h-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
         </svg>
+        <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">ECOTAGS</span>
       </h1>
       <div class="flex items-center gap-2">
+        <span id="authStatus" class="text-[10px] text-gray-400 uppercase tracking-wider"></span>
+        <button id="mainLogoutButton" class="bg-red-500/20 hover:bg-red-500/40 text-red-300 border border-red-500/30 px-2 py-1 rounded text-[10px] backdrop-blur-sm transition-colors">Salir</button>
       </div>
     </div>
+    <input type="text" id="topicInput" class="w-full p-3 rounded-lg bg-black/20 text-white border border-white/10 focus:outline-none focus:border-green-400 focus:bg-black/40 mb-4 transition-all placeholder-gray-500 backdrop-blur-sm" placeholder="Escribe hashtags...">
+    <div class="space-y-3 mb-4">
+      <div>
+        <label class="text-xs text-gray-400 flex justify-between">Nivel 1 <span id="level1Value" class="text-green-400">10</span></label>
+        <input type="range" id="level1Slider" min="1" max="15" value="10" class="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500 hover:accent-green-400">
+      </div>
+      <div>
+        <label class="text-xs text-gray-400 flex justify-between">Nivel 2 <span id="level2Value" class="text-green-400">5</span></label>
+        <input type="range" id="level2Slider" min="5" max="8" value="5" class="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500 hover:accent-green-400">
+      </div>
+      <div>
+        <label class="text-xs text-gray-400 flex justify-between">Nivel 3 <span id="level3Value" class="text-green-400">3</span></label>
+        <input type="range" id="level3Slider" min="1" max="3" value="3" class="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-green-500 hover:accent-green-400">
+      </div>
+    </div>
+    <details class="mb-4 bg-black/20 rounded-lg border border-white/5" open>
+      <summary class="cursor-pointer text-xs text-blue-300 font-bold p-2 uppercase tracking-wide hover:text-blue-200">Configuración API</summary>
+      <div class="p-3 space-y-2 text-xs">
         <div>
+          <label class="block text-gray-400 mb-1">Gemini API Key (Requerida)</label>
+          <input type="password" id="geminiKeyInput" class="w-full p-2 rounded bg-black/30 text-white border border-white/10 focus:border-blue-400 focus:outline-none" placeholder="Pega tu API Key aquí...">
         </div>
+        <div class="flex items-center gap-2 justify-end">
+          <span id="geminiKeyStatus" class="text-green-400 italic"></span>
+          <button id="saveGeminiKeyBtn" class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded text-white border border-white/10 transition-colors">Guardar</button>
         </div>
       </div>
     </details>
+    <div class="flex gap-2 mb-2">
+      <button id="visualizeButton" class="w-full bg-gradient-to-r from-green-600 to-green-500 hover:from-green-500 hover:to-green-400 text-white font-bold py-3 px-4 rounded-xl shadow-lg shadow-green-900/50 transition-all flex items-center justify-center space-x-2 border border-white/10">
+        <svg class="w-5 h-5 animate-pulse" 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="M12 4.5v15m7.5-7.5h-15" />
+        </svg>
+        <span>Sembrar Galaxia</span>
       </button>
     </div>
+    <div id="progressBarContainer" class="w-full bg-gray-700/50 rounded-full h-1.5 mb-4 overflow-hidden hidden">
+      <div id="progressBar" class="bg-green-500 h-1.5 w-0 shadow-[0_0_10px_rgba(34,197,94,0.8)]"></div>
+    </div>
+    <div id="userListContainer" class="flex-1 flex flex-col min-h-0 bg-black/20 rounded-lg p-2 border border-white/5 mb-4">
+      <h2 class="font-bold text-xs text-blue-300 mb-2 uppercase tracking-wider sticky top-0 bg-transparent">Exploradores</h2>
+      <div id="userList" class="overflow-y-auto pr-1 space-y-1 custom-scrollbar text-xs"></div>
     </div>
+    <div id="minimapContainer" class="shrink-0 relative">
+      <div class="flex justify-between items-center mb-1 absolute top-2 right-2 z-10 gap-1">
+        <button id="zoomOutButton" class="w-6 h-6 bg-black/50 hover:bg-black/70 rounded border border-white/20 text-white flex items-center justify-center">-</button>
+        <button id="zoomInButton" class="w-6 h-6 bg-black/50 hover:bg-black/70 rounded border border-white/20 text-white flex items-center justify-center">+</button>
       </div>
+      <canvas id="minimap" width="360" height="150" class="w-full h-[150px] bg-black/40 rounded-lg border border-white/10 cursor-crosshair"></canvas>
+      <div class="text-[10px] text-center text-gray-500 mt-1">Minimapa Galáctico</div>
     </div>
   </div>
   <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,
       setLogLevel
     } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
     const firebaseConfig = {
       apiKey: "AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
       authDomain: "neuronal-1f3b9.firebaseapp.com",
       measurementId: "G-102SEBLQFJ"
     };
+    // --- MANEJO DE API KEY ---
+    const DEFAULT_GEMINI_KEY = 'TU_API_KEY_AQUI'; // Reemplazala si quieres hardcodear, pero mejor usa el UI
     function getLocalGeminiKey() {
       try {
         const k = localStorage.getItem('GEMINI_API_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 hashtagGroup, tooltip;
     let font;
     let mapCount = 0;
+    const clock = new THREE.Clock(); // Reloj para animaciones suaves
+    // --- VARIABLES DEL COMETA Y FONDO ---
+    let starsSystem;
+    let cometGroup, cometHead, cometTextMesh, cometTailPoints;
+    let cometAngle = 0;
+    let userCentroidForComet = new THREE.Vector3(0,0,0);
+    // Lista de palabras aleatorias para el cometa
+    const COMET_WORDS = ["CURIOSIDAD", "EXPLORA", "DESCUBRE", "NEXO", "SINTAXIS", "IDEA", "FUTURO", "ORBITA", "COSMOS", "ENLACE", "RED", "NODO"];
+    const COMET_TAIL_LENGTH = 30; // Longitud de la cola
+    const cometTailPositions = [];
+    // ------------------------------------
+    let db, auth, analytics;
     let userId = null;
     const appId = "neuronal-1f3b9";
     let userProfile = null;
     let userMaps = {};
     let isAuthReady = false;
     let isFontReady = false;
     let userProfileCache = {};
     let allMapsDataCache = {};
     const LOAD_DISTANCE = 30.0;
     let minimapScale = 0.025;
     const MINIMAP_DOT_SIZE = 2;
     const isHFStatic = /\.hf\.space$/.test(location.hostname);
+    let authMode = null;
     const normalizeString = (str) => {
       if (!str) return "";
       return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
       function (loadedFont) {
         font = loadedFont;
         isFontReady = true;
+        checkAppReady();
       },
       undefined,
       function (err) {
+        console.error(err);
       }
     );
     initFirebase();
     const geminiKeyInput = document.getElementById('geminiKeyInput');
     const saveGeminiKeyBtn = document.getElementById('saveGeminiKeyBtn');
     const geminiKeyStatus = document.getElementById('geminiKeyStatus');
     if (geminiKeyInput && saveGeminiKeyBtn && geminiKeyStatus) {
       const existing = getLocalGeminiKey();
+      if (existing && existing !== DEFAULT_GEMINI_KEY) {
+          geminiKeyInput.value = existing;
+      }
       saveGeminiKeyBtn.addEventListener('click', (e) => {
         e.preventDefault();
+        const newVal = geminiKeyInput.value.trim();
+        setLocalGeminiKey(newVal);
+        geminiKeyStatus.textContent = 'Guardado';
         setTimeout(() => { geminiKeyStatus.textContent = ''; }, 2000);
       });
     }
     async function initFirebase() {
         const app = initializeApp(firebaseConfig);
         db = getFirestore(app);
         auth = getAuth(app);
+        analytics = getAnalytics(app);
         setLogLevel('Debug');
         const loginMessage = document.getElementById('loginMessage');
         const loginOverlay = document.getElementById('loginOverlay');
+        const authStep1 = document.getElementById('authStep1');
+        const authStep2 = document.getElementById('authStep2');
         const loginEmail = document.getElementById('loginEmail');
         const loginPassword = document.getElementById('loginPassword');
         const loginButton = document.getElementById('loginButton');
         const registerButton = document.getElementById('registerButton');
+        const btnGoToAnon = document.getElementById('btnGoToAnon');
         const saveUsernameButton = document.getElementById('saveUsernameButton');
         const usernameInput = document.getElementById('usernameInput');
+        const backToStep1 = document.getElementById('backToStep1');
         const mainLogoutButton = document.getElementById('mainLogoutButton');
         registerButton.addEventListener('click', async () => {
           try {
             const email = loginEmail.value;
             const password = loginPassword.value;
             if (email.length < 6 || password.length < 6) {
+              loginMessage.innerText = "Mínimo 6 caracteres.";
               return;
             }
             loginMessage.innerText = "Registrando...";
+            authMode = 'email';
+            await setPersistence(auth, browserLocalPersistence);
             await createUserWithEmailAndPassword(auth, email, password);
           } catch (error) {
             loginMessage.innerText = `Error: ${error.message}`;
           }
         });
         loginButton.addEventListener('click', async () => {
           try {
             const email = loginEmail.value;
             const password = loginPassword.value;
+            loginMessage.innerText = "Entrando...";
+            authMode = 'email';
+            await setPersistence(auth, browserLocalPersistence);
             await signInWithEmailAndPassword(auth, email, password);
           } catch (error) {
             loginMessage.innerText = `Error: ${error.message}`;
           }
         });
+        btnGoToAnon.addEventListener('click', () => {
+          authMode = 'anonymous';
+          authStep1.classList.add('hidden');
+          authStep2.classList.remove('hidden');
         });
+        backToStep1.addEventListener('click', () => {
+          authMode = null;
+          authStep2.classList.add('hidden');
+          authStep1.classList.remove('hidden');
+          loginMessage.innerText = "";
         });
         saveUsernameButton.addEventListener('click', async () => {
           const username = normalizeString(usernameInput.value.trim());
           if (username.length < 3) {
+            usernameInput.classList.add('border-red-500');
             return;
           }
+          usernameInput.classList.remove('border-red-500');
+          saveUsernameButton.innerHTML = "Creando Identidad...";
+          saveUsernameButton.disabled = true;
+          try {
+            if (authMode === 'anonymous') {
+              await setPersistence(auth, browserLocalPersistence);
+              await signInAnonymously(auth);
+            }
+            if (auth.currentUser) {
+              await saveUserProfile(auth.currentUser.uid, username);
+              loginOverlay.style.opacity = '0';
+              setTimeout(() => { loginOverlay.style.display = 'none'; }, 500);
+              initScene();
+              loadAllMaps();
+              document.getElementById('ui').classList.remove('hidden');
+            }
+          } catch (e) {
+            saveUsernameButton.innerHTML = "Error. Intenta de nuevo.";
+            saveUsernameButton.disabled = false;
+            console.error(e);
+          }
+        });
+        mainLogoutButton.addEventListener('click', async () => {
+          await signOut(auth);
+          location.reload();
         });
         onAuthStateChanged(auth, async (user) => {
           if (user) {
             userId = user.uid;
             isAuthReady = true;
+            await fetchUserProfile(userId);
             if (userProfile) {
               loginOverlay.style.opacity = '0';
               setTimeout(() => { loginOverlay.style.display = 'none'; }, 500);
+              document.getElementById('ui').classList.remove('hidden');
+              document.getElementById('authStatus').textContent = userProfile.username;
+              if (!scene) {
+                initScene();
+                loadAllMaps();
+              }
+            } else {
+              authStep1.classList.add('hidden');
+              authStep2.classList.remove('hidden');
+              if (authMode === 'email') {
+                usernameInput.focus();
               }
             }
+          } else {
+            loginOverlay.style.display = 'flex';
+            loginOverlay.style.opacity = '1';
+            authStep1.classList.remove('hidden');
+            authStep2.classList.add('hidden');
+            document.getElementById('ui').classList.add('hidden');
           }
         });
       } catch (error) {
+        console.error("Firebase Init Error", error);
       }
     }
     async function fetchUserProfile(uid) {
       if (!db) return;
       try {
         if (docSnap && docSnap.exists()) {
           userProfile = docSnap.data();
           userProfileCache[uid] = userProfile;
         } else {
           userProfile = null;
         }
       } catch (error) {
         userProfile = null;
       }
     }
         await setDoc(profileDocRef, { username: username });
         userProfile = { username: username };
         userProfileCache[uid] = userProfile;
+        document.getElementById('authStatus').textContent = username;
       } catch (error) {
+        console.error(error);
       }
     }
     async function getProfile(uid) {
+      if (userProfileCache[uid]) return userProfileCache[uid];
       if (!db) return null;
       try {
         const profileDocRef = doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile');
           return null;
         }
       } catch (error) {
         return null;
       }
     }
+    function checkAppReady() {
+      if (isAuthReady && isFontReady && userProfile) {
+        initScene();
+        loadAllMaps();
       }
     }
+    // --- FUNCIÓN PARA CREAR ESTRELLAS DE FONDO ---
+    function createBackgroundStars() {
+         const geometry = new THREE.BufferGeometry();
+         const vertices = [];
+         // Crear 5000 estrellas distribuidas aleatoriamente en un volumen grande
+         for (let i = 0; i < 5000; i++) {
+             vertices.push(THREE.MathUtils.randFloatSpread(2000)); // x spread
+             vertices.push(THREE.MathUtils.randFloatSpread(2000)); // y spread
+             vertices.push(THREE.MathUtils.randFloatSpread(2000)); // z spread
+         }
+         geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+         // Material simple de puntos blancos
+         const material = new THREE.PointsMaterial({ color: 0xaaaaaa, size: 0.7, transparent: true, opacity: 0.6, sizeAttenuation: true });
+         starsSystem = new THREE.Points(geometry, material);
+         scene.add(starsSystem);
+    }
+    // --- FUNCIÓN PARA CALCULAR EL CENTROIDE DEL USUARIO ACTUAL ---
+    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;
+    }
+    // --- FUNCIÓN PARA INICIALIZAR EL COMETA ---
+    function initComet() {
+        // Limpiar cometa anterior si existe
+        if(cometGroup) { scene.remove(cometGroup); cometGroup = null; }
+        if(cometTailPoints) { scene.remove(cometTailPoints); cometTailPoints = null; }
+        if(!font || !userId) return;
+        // Calcular el centro de la órbita basado en los mapas del usuario
+        userCentroidForComet.copy(getCurrentUserCentroid());
+        cometGroup = new THREE.Group();
+        // 1. Cabeza del Cometa (Esfera brillante)
+        const headGeo = new THREE.SphereGeometry(0.8, 32, 32);
+        const headMat = new THREE.MeshStandardMaterial({
+            color: 0xffffff,
+            emissive: 0x00ffff, // Color cian brillante
+            emissiveIntensity: 5, // Intensidad alta para que brille
+            toneMapped: false // Evita que el tone mapping apague el brillo
+        });
+        cometHead = new THREE.Mesh(headGeo, headMat);
+        cometGroup.add(cometHead);
+        // 2. Texto del Cometa (Palabra aleatoria)
+        const word = COMET_WORDS[Math.floor(Math.random() * COMET_WORDS.length)];
+        const textGeo = new TextGeometry(word, { font: font, size: 0.5, height: 0.05, curveSegments: 4, bevelEnabled: false });
+        textGeo.center();
+        const textMat = new THREE.MeshBasicMaterial({ color: 0xccffff, transparent: true, opacity: 0.9 });
+        cometTextMesh = new THREE.Mesh(textGeo, textMat);
+        cometTextMesh.position.y = 1.5; // Flota sobre la cabeza
+        cometGroup.add(cometTextMesh);
+        // 3. Cola del Cometa (Sistema de Partículas)
+        const tailGeo = new THREE.BufferGeometry();
+        // Crear array para las posiciones de las partículas de la cola
+        const tailPositionsArray = new Float32Array(COMET_TAIL_LENGTH * 3);
+        tailGeo.setAttribute('position', new THREE.BufferAttribute(tailPositionsArray, 3));
+        // Material para la cola: puntos brillantes con blending aditivo para efecto de brillo
+        const tailMat = new THREE.PointsMaterial({
+            color: 0x00aaff,
+            size: 1.2,
+            transparent: true,
+            opacity: 0.7,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false, // Importante para transparencias superpuestas
+            sizeAttenuation: true
+        });
+        cometTailPoints = new THREE.Points(tailGeo, tailMat);
+        // La cola se añade directamente a la escena, no al grupo, para que no rote con la cabeza
+        scene.add(cometTailPoints);
+        scene.add(cometGroup);
+        // Inicializar el historial de posiciones de la cola
+        cometTailPositions.length = 0;
+        for(let i=0; i<COMET_TAIL_LENGTH; i++) cometTailPositions.push(new THREE.Vector3());
+    }
+    // --- FUNCIÓN PARA ACTUALIZAR LA ANIMACIÓN DEL COMETA ---
+    function updateComet(delta) {
+         if(!cometGroup || !cometHead || !cometTailPoints) return;
+         // 1. Lógica Orbital
+         cometAngle += delta * 0.3; // Velocidad de órbita (ajustar según necesidad)
+         // Radios de la órbita elíptica
+         const orbitRadiusX = 60;
+         const orbitRadiusZ = 45;
+         // Calcular nueva posición relativa al centroide del usuario
+         const x = userCentroidForComet.x + Math.cos(cometAngle) * orbitRadiusX;
+         const z = userCentroidForComet.z + Math.sin(cometAngle) * orbitRadiusZ;
+         // Añadir una onda vertical senoidal para movimiento más dinámico
+         const y = userCentroidForComet.y + Math.sin(cometAngle * 3) * 10;
+         cometGroup.position.set(x, y, z);
+         // Hacer que el texto del cometa siempre mire a la cámara
+         if(cometTextMesh) cometTextMesh.lookAt(camera.position);
+         // 2. Actualización de la Cola
+         // Eliminar la posición más antigua y añadir la posición actual de la cabeza al inicio
+         cometTailPositions.pop();
+         cometTailPositions.unshift(cometGroup.position.clone());
+         // Actualizar los vértices de la geometría de puntos de la cola
+         const positionsAttr = cometTailPoints.geometry.attributes.position;
+         const positionsArray = positionsAttr.array;
+         for(let i=0; i < COMET_TAIL_LENGTH; i++) {
+             const pos = cometTailPositions[i];
+             positionsArray[i*3] = pos.x;
+             positionsArray[i*3+1] = pos.y;
+             positionsArray[i*3+2] = pos.z;
+         }
+         // Marcar que la geometría necesita actualización
+         positionsAttr.needsUpdate = true;
+    }
     function initScene() {
+      if (scene) return;
       scene = new THREE.Scene();
+      // Fog ligeramente más denso para ocultar el horizonte de estrellas
+      scene.fog = new THREE.FogExp2(0x111827, 0.008);
+      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000); // Far plane aumentado para ver estrellas
       camera.position.set(0, 0, 15);
+      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
       renderer.setSize(window.innerWidth, window.innerHeight);
       renderer.setPixelRatio(window.devicePixelRatio);
+      // Habilitar manejo de color correcto para brillos intensos
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.0;
       document.getElementById('container').appendChild(renderer.domElement);
       tooltip = document.getElementById('tooltip');
       hashtagGroup = new THREE.Group();
       scene.add(hashtagGroup);
+      // --- AÑADIR ESTRELLAS DE FONDO ---
+      createBackgroundStars();
+      // --------------------------------
       const visualizeButton = document.getElementById('visualizeButton');
       if (!visualizeButton.dataset.bound) {
         visualizeButton.dataset.originalHtml = visualizeButton.innerHTML;
         visualizeButton.addEventListener('click', handleAnalysisAndVisualization);
         visualizeButton.dataset.bound = '1';
       }
       document.getElementById('level1Slider').addEventListener('input', (e) => {
         document.getElementById('level1Value').innerText = e.target.value;
       if (minimapCanvas) {
         minimapCtx = minimapCanvas.getContext('2d');
         minimapCanvas.addEventListener('click', onMinimapClick);
       }
       document.getElementById('zoomInButton').addEventListener('click', () => {
     function animate() {
       requestAnimationFrame(animate);
+      const delta = clock.getDelta(); // Obtener tiempo transcurrido para animación suave
+      if(controls) controls.update();
+      // --- ACTUALIZAR COMETA ---
+      updateComet(delta);
+      // ------------------------
+      if(camera && hashtagGroup) {
+         updateRaycaster();
+         hashtagGroup.children.forEach(object => {
+          if (object.userData.isText) {
+            object.lookAt(camera.position);
+            const distance = object.position.distanceTo(camera.position);
+            const minScale = 0.5;
+            const maxScale = 4.0;
+            const scaleFactor = 10;
+            let scale = (1 / distance) * scaleFactor;
+            scale = Math.max(minScale, Math.min(maxScale, scale));
+            object.scale.set(scale, scale, scale);
           }
+        });
+        renderer.render(scene, camera);
+      }
     }
     async function fetchWithTimeout(url, options = {}, timeoutMs = 25000) {
       const controller = new AbortController();
       const id = setTimeout(() => controller.abort(), timeoutMs);
       }
     }
     async function callGemini(topic, mainCount, variantCount, subVariantCount) {
       const modelId = 'gemini-2.5-flash-preview-09-2025';
       const depth = 3;
+      // VALIDACIÓN DE API KEY ANTES DE LLAMAR
+      const localKey = getLocalGeminiKey();
+      if (!localKey || localKey.length < 10) {
+        throw new Error("Falta la API Key de Gemini. Configúrala en el menú.");
+      }
       let systemInstruction = `Eres un analista de tendencias. Tu tarea es generar una lista estructurada de palabras clave. Normaliza todo el texto para que no tenga acentos.`;
       let userPrompt = `Tema: "${topic}".\n`;
           items: { type: "STRING" }
         };
         n2Items.required.push("sub_variantes");
       }
       const payload = {
         }
       };
       if (!isHFStatic) {
         try {
           const proxyResp = await fetchWithBackoff('/.netlify/functions/gemini-proxy', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ model: modelId, payload })
+          }, 1, 1000, 25000);
           if (proxyResp.ok) {
             return await proxyResp.json();
           }
+        } catch (e) {}
       }
       const apiUrlDirect = `https://generativelanguage.googleapis.com/v1beta/models/${modelId}:generateContent?key=${localKey}`;
       const directResp = await fetchWithBackoff(apiUrlDirect, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload)
+      }, 2, 1000, 25000);
       if (!directResp.ok) {
+        const errText = await directResp.text();
+        throw new Error(`Error API (${directResp.status}): ${errText}`);
       }
       return await directResp.json();
     }
     async function handleAnalysisAndVisualization() {
+      if (!font) return;
       const topic = normalizeString(document.getElementById('topicInput').value);
       const mainCount = document.getElementById('level1Slider').value;
       const progressBarContainer = document.getElementById('progressBarContainer');
       const progressBar = document.getElementById('progressBar');
+      if (!topic) return;
       button.disabled = true;
       if (!button.dataset.originalHtml) button.dataset.originalHtml = button.innerHTML;
+      button.innerHTML = '<span class="animate-pulse">Analizando...</span>';
       const watchdog = setTimeout(() => {
         try { button.disabled = false; } catch {}
         try { if (button.dataset.originalHtml) button.innerHTML = button.dataset.originalHtml; } catch {}
+        try { progressBarContainer.style.display = 'none'; progressBarContainer.classList.add('hidden'); } catch {}
       }, 30000);
       progressBar.style.transition = 'none';
       progressBar.style.width = '0%';
       progressBarContainer.style.display = 'block';
+      progressBarContainer.classList.remove('hidden');
       void progressBar.offsetWidth;
       progressBar.style.transition = 'width 20s ease-out';
       progressBar.style.width = '95%';
       const existingUserMaps = userMaps[userId] || [];
       const localMapIndex = existingUserMaps.length;
+      // Cálculo de posición de la nueva galaxia
       if (localMapIndex === 0) {
         const galaxyIndex = Object.keys(userMaps).length;
         const GALAXY_SEPARATION_STEP = 750;
       }
       try {
         const result = await callGemini(topic, mainCount, variantCount, subVariantCount);
         const candidate = result.candidates?.[0];
         if (candidate && candidate.content?.parts?.[0]?.text) {
           const text = candidate.content.parts[0].text;
           const parsedData = JSON.parse(text);
           visualizeRoot(rootTopic, mapOrigin);
           visualizeHashtags(parsedData.lista_palabras, mapOrigin, 1, null);
           if (db && userId) {
             await saveMapToFirestore(rootTopic, "3", mapOrigin, parsedData);
           }
         } else {
+            throw new Error("La IA no devolvió texto válido.");
         }
       } catch (error) {
+        console.error("ERROR CRITICO:", error);
+        alert("ERROR: " + error.message + "\n\nRevisa tu API Key en Configuración.");
       } finally {
         clearTimeout(watchdog);
         button.disabled = false;
         } else {
           button.innerText = 'Sembrar';
         }
         const ti = document.getElementById('topicInput');
         if (ti) ti.value = '';
         progressBar.style.transition = 'width 0.3s ease-in';
         progressBar.style.width = '100%';
         setTimeout(() => {
           progressBarContainer.style.display = 'none';
+          progressBarContainer.classList.add('hidden');
           progressBar.style.width = '0%';
         }, 500);
       }
     }
     function clearScene() {
       while (hashtagGroup.children.length > 0) {
         const object = hashtagGroup.children[0];
         }
         hashtagGroup.remove(object);
       }
     }
     function visualizeRoot(topic, origin) {
       const { color: rootColor } = stringToHslColor(topic);
       const rootMaterial = new THREE.MeshStandardMaterial({
         color: new THREE.Color(rootColor),
+        roughness: 0.2,
+        metalness: 0.8,
+        emissive: new THREE.Color(rootColor),
+        emissiveIntensity: 0.2
       });
       const rootTextMaterial = new THREE.MeshBasicMaterial({
         color: new THREE.Color(rootColor),
         transparent: true,
+        opacity: 0.9
       });
       const rootSphereRadius = 0.4;
       hashtagGroup.add(rootTextMesh);
     }
+    function createUserSun(centerPosition, username, isCurrentUser) {
+      const sunColor = isCurrentUser ? 0xffd700 : 0x4ade80; // Oro para actual, Verde para otros
+      const sunGeometry = new THREE.SphereGeometry(2.5, 32, 32);
+      const sunMaterial = new THREE.MeshStandardMaterial({
+        color: sunColor,
+        emissive: sunColor,
+        emissiveIntensity: 0.8,
+        roughness: 0.1,
+        metalness: 0.2
+      });
+      const sunMesh = new THREE.Mesh(sunGeometry, sunMaterial);
+      sunMesh.position.copy(centerPosition);
+      sunMesh.userData.hashtag = `Usuario: ${username}`;
+      sunMesh.userData.isPlaceholder = true; // Tratamos como placeholder para tooltip
+      hashtagGroup.add(sunMesh);
+      // Texto del Usuario
+      const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
+      const textGeometry = new TextGeometry(username.toUpperCase(), {
+        font: font,
+        size: 0.8,
+        height: 0.1,
+        curveSegments: 4,
+        bevelEnabled: false
+      });
+      textGeometry.computeBoundingBox();
+      const textMesh = new THREE.Mesh(textGeometry, textMaterial);
+      textMesh.position.copy(centerPosition);
+      textMesh.position.y += 3.5; // Flota sobre el sol
+      textMesh.position.x -= (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x) / 2;
+      textMesh.userData.isText = true;
+      hashtagGroup.add(textMesh);
+    }
     async function saveMapToFirestore(topic, depth, origin, data) {
       if (!db) return;
       try {
           userId: userId
         };
         await addDoc(mapCollection, mapDocument);
       } catch (error) {
+        console.error(error);
+        alert("Error guardando en BD: " + error.message);
       }
     }
     function loadAllMaps() {
       if (!db || !font) {
         if (!font) {
           setTimeout(loadAllMaps, 500);
         }
       const q = query(mapCollection);
       onSnapshot(q, async (snapshot) => {
         clearScene();
         mapCount = 0;
         userMaps = {};
         allMapsDataCache = {};
         if (snapshot.empty) {
           drawMinimap();
+          // Si no hay mapas, inicializar el cometa en el origen
+          initComet();
           return;
         }
+        // 1. Reconstruir todas las neuronas de todos los usuarios
         snapshot.docs.forEach((doc) => {
           mapCount++;
           const map = doc.data();
           if (!map.origin || !map.data || !map.topic || !map.userId) {
             return;
           }
           const origin = new THREE.Vector3(map.origin.x, map.origin.y, map.origin.z);
           try {
             parsedData = JSON.parse(map.data);
           } catch (e) {
             return;
           }
           }
           allMapsDataCache[map.userId].push({ topic: map.topic, origin: origin, data: parsedData });
           visualizeRoot(map.topic, origin);
           visualizeHashtags(parsedData.lista_palabras, origin, 1, null);
         });
+        // 2. Crear los Soles Centrales de cada Usuario
+        const uids = Object.keys(userMaps);
+        const profilePromises = uids.map(uid => getProfile(uid));
+        const profiles = await Promise.all(profilePromises);
         const userListElement = document.getElementById('userList');
+        if (userListElement) userListElement.innerHTML = '';
+        uids.forEach((uid, index) => {
+          const profile = profiles[index];
+          const username = profile ? profile.username : `Anon-${uid.substring(0,4)}`;
+          // Crear lista UI
+          if (userListElement) {
             const userItem = document.createElement('div');
+            userItem.className = 'p-2 mb-1 rounded bg-white/5 hover:bg-white/10 cursor-pointer transition-colors duration-200 text-[10px] text-gray-300 flex items-center gap-2';
+            userItem.innerHTML = `<span class="w-2 h-2 rounded-full bg-green-400"></span> ${username}`;
             userItem.dataset.userid = uid;
             userItem.addEventListener('click', () => teleportToUser(uid));
             userListElement.appendChild(userItem);
+          }
+          // Crear Sol 3D Central
+          const origins = userMaps[uid];
+          if(origins && origins.length > 0) {
+            const centroid = new THREE.Vector3();
+            origins.forEach(o => centroid.add(o));
+            centroid.divideScalar(origins.length);
+            // Si es la primera galaxia, el centro es el origen, si no, es el promedio
+            createUserSun(centroid, username, uid === userId);
+          }
+        });
         drawMinimap();
         focusOnUserMaps();
+        // --- INICIALIZAR EL COMETA DESPUÉS DE CARGAR MAPAS ---
+        // Esto asegura que el cometa conozca el centroide del usuario actual
+        initComet();
+        // ----------------------------------------------------
+      }, (error) => {});
     }
     function focusOnUserMaps() {
       if (!controls) return;
       if (!userId || !userMaps[userId] || userMaps[userId].length === 0) {
         controls.target.set(0, 0, 0);
         camera.position.set(0, 0, 15);
         controls.update();
       const centroid = new THREE.Vector3(0, 0, 0);
       userMapOrigins.forEach(origin => centroid.add(origin));
       centroid.divideScalar(userMapOrigins.length);
       controls.target.copy(centroid);
       const cameraOffset = new THREE.Vector3(0, 5, 20);
       camera.position.copy(centroid).add(cameraOffset);
     function teleportToUser(targetUserId) {
       if (!controls || !userMaps[targetUserId] || userMaps[targetUserId].length === 0) {
         return;
       }
       const userMapOrigins = userMaps[targetUserId];
       const centroid = new THREE.Vector3(0, 0, 0);
       userMapOrigins.forEach(origin => centroid.add(origin));
       centroid.divideScalar(userMapOrigins.length);
       controls.target.copy(centroid);
       const cameraOffset = new THREE.Vector3(0, 5, 20);
       camera.position.copy(centroid).add(cameraOffset);
     function visualizeHashtags(dataList, origin, level, parentColor = null) {
       if (!dataList || dataList.length === 0) return;
       for (const item of dataList) {
         let currentTag, variantsList;
         if (level === 1) {
         const nodeColor = (level === 1) ? color : parentColor;
         const nodeMaterial = new THREE.MeshStandardMaterial({
           color: new THREE.Color(nodeColor),
+          roughness: 0.3,
+          metalness: 0.5
         });
         const nodeTextMaterial = new THREE.MeshBasicMaterial({
           color: new THREE.Color(nodeColor),
           transparent: true,
+          opacity: 0.8
         });
         const theta = (h / 360) * Math.PI * 2;
         clusterCenter.add(origin);
         const branchColor = new THREE.Color(nodeColor).multiplyScalar(0.4);
+        const lineMaterial = new THREE.LineBasicMaterial({ color: branchColor, transparent: true, opacity: 0.4 });
         const linePoints = [origin, clusterCenter];
         const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints);
         const line = new THREE.Line(lineGeometry, lineMaterial);
       minimapCtx.arc(dot.x, dot.y, size, 0, Math.PI * 2);
       minimapCtx.fillStyle = color;
       minimapCtx.fill();
+      minimapCtx.fillStyle = 'rgba(255,255,255,0.7)';
+      minimapCtx.font = '8px Orbitron';
+      minimapCtx.fillText(dot.username.substring(0,8), dot.x + size + 3, dot.y + 3);
     }
     async function drawMinimap() {
       if (!minimapCtx || !userMaps) return;
       const canvas = minimapCtx.canvas;
+      minimapCtx.clearRect(0,0,canvas.width, canvas.height);
       minimapDotCoords = [];
       let centerX = 0, centerZ = 0;
         if (numSatellites > 0) {
           userMapsList.forEach(origin => userCentroid.add(origin));
           userCentroid.divideScalar(numSatellites);
         }
         const relX = (userCentroid.x - centerX) * minimapScale;
         const relZ = (userCentroid.z - centerZ) * minimapScale;
         const dotData = { x: canvasX, y: canvasY, uid: uid, username: username };
         minimapDotCoords.push(dotData);
         const isMe = (uid === userId);
+        const mainColor = isMe ? '#4ade80' : '#60a5fa';
         const baseSize = MINIMAP_DOT_SIZE;
         const sizeBonus = (numSatellites > 1) ? Math.log(numSatellites) * 1.5 : 0;
         let mainSize = baseSize + sizeBonus;
       const y = event.clientY - rect.top;
       let clickedUser = null;
       let minDistance = 10;
+      for (let i = minimapDotCoords.length - 0; i >= 0; i--) {
         const dot = minimapDotCoords[i];
+        if(!dot) continue;
         const dx = x - dot.x;
         const dy = y - dot.y;
         const distance = Math.sqrt(dx * dx + dy * dy);
         }
       }
       if (clickedUser) {
         teleportToUser(clickedUser);
       }
     }
     function updateRaycaster() {
       raycaster.setFromCamera(mouse, camera);
+      // Incluir la cabeza del cometa en los objetos interactuables si se desea
+      let objectsToIntersect = hashtagGroup.children.filter(o => o.isMesh);
+      if (cometHead) objectsToIntersect.push(cometHead);
       const intersects = raycaster.intersectObjects(objectsToIntersect, false);
       if (intersects.length > 0) {
         let targetObject = intersects[0].object;
+        // Lógica especial para el cometa si es necesario, por ahora usa el mismo tooltip
         if (targetObject.userData.isText && targetObject.parent) targetObject = targetObject.parent;
         if (intersected.object !== targetObject) {
           intersected.object = targetObject;
           const data = intersected.object.userData;
+          tooltip.classList.remove('hidden');
+          let tooltipText = "";
+           if (targetObject === cometHead) {
+               // Tooltip específico para el cometa
+               const word = cometTextMesh ? cometTextMesh.geometry.parameters.text : "Cometa";
+               tooltipText = `<strong class="text-cyan-300 text-lg">Cometa: ${word}</strong><br><span class="text-gray-400">Orbitando tu zona</span>`;
+           } else {
+               // Tooltip normal
+              tooltipText = `<strong class="text-green-300 text-lg">${data.hashtag}</strong>`;
+              if (data.level !== undefined) tooltipText += `<br><span class="text-gray-400">Nivel: ${data.level}</span>`;
+              else if (data.isPlaceholder) tooltipText = `<strong>Galaxia de ${data.hashtag}</strong>`;
+           }
           tooltip.innerHTML = tooltipText;
         }
       } else {
+        if (intersected.object) tooltip.classList.add('hidden');
         intersected.object = null;
       }
     }
     }
   </script>
 </body>
+</html>