neuronalstarx

Running

App Files Files Community

salomonsky commited on Dec 22, 2025

Commit

e229d32

verified ·

1 Parent(s): 7a7ae4e

Upload 10 files

Browse files

Files changed (10) hide show

index.html +73 -1536
src/config.js +4 -0
src/db.js +6 -0
src/firebase.js +19 -0
src/gemini.js +3 -0
src/main.js +52 -0
src/scene.js +33 -0
src/ui.js +10 -0
src/utils.js +4 -0
styles.css +1 -74

index.html CHANGED Viewed

@@ -1,1551 +1,88 @@
 <!DOCTYPE html>
 <html lang="es">
 <head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-<title>ECOTAGS 3D - SISTEMA NEURONAL</title>
-<script src="https://cdn.tailwindcss.com"></script>
-<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
-<style>
-    :root {
-        --color-bg: #030508;
-        --color-primary: #00f3ff;
-        --color-secondary: #0066ff;
-        --color-danger: #ff003c;
-        --color-success: #00ff9d;
-        --color-text: #e0f7ff;
-        --color-panel: rgba(5, 10, 20, 0.85);
-        --border-glow: 0 0 10px rgba(0, 243, 255, 0.3);
-        --font-main: 'Orbitron', sans-serif;
-        --font-body: 'Rajdhani', sans-serif;
-    }
-    * {
-        box-sizing: border-box;
-        user-select: none;
-        -webkit-user-drag: none;
-    }
-    body {
-        margin: 0;
-        overflow: hidden;
-        background-color: var(--color-bg);
-        font-family: var(--font-main);
-        color: var(--color-text);
-        height: 100vh;
-        width: 100vw;
-    }
-    #canvas-container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
-    }
-    .hud-panel {
-        background: var(--color-panel);
-        border: 1px solid rgba(0, 243, 255, 0.2);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-        border-radius: 4px;
-        position: relative;
-        overflow: hidden;
-    }
-    .hud-panel::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
-        opacity: 0.5;
-    }
-    .hud-panel::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        width: 10px;
-        height: 10px;
-        border-bottom: 2px solid var(--color-primary);
-        border-right: 2px solid var(--color-primary);
-    }
-    #ui-sidebar {
-        position: fixed;
-        top: 20px;
-        left: 20px;
-        width: 340px;
-        max-height: calc(100vh - 40px);
-        display: flex;
-        flex-direction: column;
-        z-index: 100;
-        padding: 24px;
-        gap: 20px;
-        transition: transform 0.3s ease;
-    }
-    .logo-section {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        padding-bottom: 15px;
-    }
-    .logo-text {
-        font-size: 24px;
-        font-weight: 900;
-        letter-spacing: 2px;
-        background: linear-gradient(180deg, #fff, var(--color-primary));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
-    }
-    .version-tag {
-        font-family: var(--font-body);
-        font-size: 12px;
-        color: var(--color-secondary);
-        border: 1px solid var(--color-secondary);
-        padding: 2px 6px;
-        border-radius: 2px;
-    }
-    .input-group {
-        position: relative;
-        margin-bottom: 10px;
-    }
-    .cyber-input {
-        width: 100%;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        color: var(--color-primary);
-        padding: 12px 15px;
-        font-family: var(--font-body);
-        font-size: 16px;
-        font-weight: 500;
-        outline: none;
-        transition: all 0.3s ease;
-        text-transform: uppercase;
-    }
-    .cyber-input:focus {
-        border-color: var(--color-primary);
-        box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1);
-    }
-    .cyber-input::placeholder {
-        color: rgba(255, 255, 255, 0.3);
-    }
-    .slider-container {
-        margin-bottom: 15px;
-    }
-    .slider-header {
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
-        margin-bottom: 5px;
-        font-family: var(--font-body);
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
-    .cyber-slider {
-        -webkit-appearance: none;
-        width: 100%;
-        height: 4px;
-        background: rgba(255, 255, 255, 0.1);
-        outline: none;
-        border-radius: 2px;
-    }
-    .cyber-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 12px;
-        height: 20px;
-        background: var(--color-primary);
-        border: 1px solid #fff;
-        cursor: pointer;
-        box-shadow: 0 0 10px var(--color-primary);
-    }
-    .cyber-button {
-        width: 100%;
-        background: linear-gradient(45deg, rgba(0, 102, 255, 0.2), rgba(0, 243, 255, 0.2));
-        border: 1px solid var(--color-secondary);
-        color: var(--color-primary);
-        padding: 15px;
-        font-family: var(--font-main);
-        font-weight: 700;
-        font-size: 14px;
-        letter-spacing: 2px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        text-transform: uppercase;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-    }
-    .cyber-button:hover {
-        background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
-        color: #000;
-        box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
-    }
-    .cyber-button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        filter: grayscale(1);
-    }
-    .cyber-button-danger {
-        border-color: var(--color-danger);
-        color: var(--color-danger);
-        background: rgba(255, 0, 60, 0.1);
-        font-size: 10px;
-        padding: 5px 10px;
-        width: auto;
-    }
-    .cyber-button-danger:hover {
-        background: var(--color-danger);
-        color: #fff;
-        box-shadow: 0 0 15px rgba(255, 0, 60, 0.5);
-    }
-    #minimap-container {
-        margin-top: auto;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background: rgba(0, 0, 0, 0.5);
-        position: relative;
-    }
-    #minimap-header {
-        position: absolute;
-        top: 5px;
-        left: 5px;
-        font-size: 10px;
-        color: var(--color-primary);
-        pointer-events: none;
-    }
-    #minimap-controls {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        display: flex;
-        gap: 2px;
-    }
-    .mini-btn {
-        width: 16px;
-        height: 16px;
-        background: rgba(0, 0, 0, 0.8);
-        border: 1px solid var(--color-secondary);
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 10px;
-        cursor: pointer;
-    }
-    .mini-btn:hover {
-        background: var(--color-secondary);
-    }
-    #users-list {
-        margin-top: 10px;
-        max-height: 150px;
-        overflow-y: auto;
-        font-family: var(--font-body);
-    }
-    .user-item {
-        display: flex;
-        justify-content: space-between;
-        padding: 8px;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        cursor: pointer;
-        transition: background 0.2s;
-        font-size: 14px;
-    }
-    .user-item:hover {
-        background: rgba(0, 243, 255, 0.1);
-        color: var(--color-primary);
-    }
-    .user-count-badge {
-        background: rgba(255, 255, 255, 0.1);
-        padding: 0 6px;
-        border-radius: 10px;
-        font-size: 12px;
-    }
-    #progress-bar {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 2px;
-        background: var(--color-success);
-        width: 0%;
-        transition: width 0.3s;
-    }
-    #login-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        background: rgba(0, 3, 10, 0.95);
-        z-index: 200;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        backdrop-filter: blur(20px);
-        transition: opacity 0.6s ease;
-    }
-    .login-card {
-        width: 100%;
-        max-width: 450px;
-        padding: 40px;
-        background: rgba(10, 15, 30, 0.6);
-        border: 1px solid var(--color-primary);
-        box-shadow: 0 0 50px rgba(0, 243, 255, 0.1);
-        position: relative;
-    }
-    .login-card::before {
-        content: '';
-        position: absolute;
-        top: -2px;
-        left: -2px;
-        width: 20px;
-        height: 20px;
-        border-top: 2px solid var(--color-primary);
-        border-left: 2px solid var(--color-primary);
-    }
-    .login-card::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        right: -2px;
-        width: 20px;
-        height: 20px;
-        border-bottom: 2px solid var(--color-primary);
-        border-right: 2px solid var(--color-primary);
-    }
-    .scan-line {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background: rgba(0, 243, 255, 0.5);
-        animation: scan 3s linear infinite;
-        opacity: 0.3;
-        pointer-events: none;
-    }
-    @keyframes scan {
-        0% { top: 0%; }
-        100% { top: 100%; }
-    }
-    .tooltip-box {
-        position: absolute;
-        background: rgba(5, 10, 15, 0.95);
-        border: 1px solid var(--color-success);
-        padding: 10px 15px;
-        pointer-events: none;
-        display: none;
-        z-index: 150;
-        box-shadow: 0 0 15px rgba(0, 255, 157, 0.2);
-        max-width: 250px;
-    }
-    .tooltip-title {
-        color: var(--color-success);
-        font-weight: 700;
-        font-size: 14px;
-        margin-bottom: 4px;
-        border-bottom: 1px solid rgba(0, 255, 157, 0.3);
-        padding-bottom: 4px;
-        text-transform: uppercase;
-    }
-    .tooltip-meta {
-        color: rgba(255, 255, 255, 0.7);
-        font-size: 11px;
-        font-family: var(--font-body);
-    }
-    #error-console {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 150px;
-        background: rgba(20, 0, 0, 0.9);
-        border-top: 2px solid var(--color-danger);
-        color: var(--color-danger);
-        font-family: monospace;
-        padding: 10px;
-        z-index: 9999;
-        overflow-y: auto;
-        display: none;
-        font-size: 12px;
-    }
-    ::-webkit-scrollbar {
-        width: 4px;
-    }
-    ::-webkit-scrollbar-track {
-        background: rgba(0, 0, 0, 0.2);
-    }
-    ::-webkit-scrollbar-thumb {
-        background: var(--color-secondary);
-    }
-    .hidden {
-        display: none !important;
-    }
-    .fade-out {
-        opacity: 0;
-        pointer-events: none;
-    }
-    .loading-pulse {
-        animation: pulse 1.5s infinite;
-        color: var(--color-primary);
-        font-weight: bold;
-        text-align: center;
-        margin-top: 20px;
-        font-family: var(--font-body);
-        letter-spacing: 2px;
-    }
-    @keyframes pulse {
-        0% { opacity: 0.5; }
-        50% { opacity: 1; text-shadow: 0 0 10px var(--color-primary); }
-        100% { opacity: 0.5; }
-    }
-</style>
 </head>
 <body>
-<div id="error-console">
-    <strong>SISTEMA DE DIAGNOSTICO - ERRORES DETECTADOS:</strong><br>
-    <div id="error-list"></div>
-</div>
-<div id="login-overlay">
-    <div class="login-card hud-panel">
-        <div class="scan-line"></div>
-        <div class="text-center mb-8">
-            <h1 class="logo-text" style="font-size: 32px;">ECOTAGS <span style="font-size: 16px; color: var(--color-primary);">SYSTEM</span></h1>
-            <p style="font-family: var(--font-body); color: rgba(255,255,255,0.6); margin-top: 5px;">INTERFAZ NEURONAL DE DATOS</p>
-        </div>
-        <div class="loading-pulse" id="loading-text">
-            INICIALIZANDO SISTEMA...
-        </div>
-        <div style="text-align: center; margin-top: 10px; color: #666; font-size: 10px;">
-            ASIGNANDO IDENTIFICADOR AUTOMÁTICO
-        </div>
     </div>
-</div>
-<div id="canvas-container"></div>
-<div id="tooltip" class="tooltip-box"></div>
-<aside id="ui-sidebar" class="hud-panel">
-    <div id="progress-bar"></div>
-    <div class="logo-section">
-        <div class="logo-text">ECOTAGS</div>
-        <div style="display: flex; gap: 10px; align-items: center;">
-            <div class="version-tag">V3.1</div>
-            <button id="btn-logout" class="cyber-button cyber-button-danger">REINICIAR</button>
         </div>
-    </div>
-    <div style="display: flex; flex-direction: column; gap: 15px;">
-        <div class="input-group">
-            <input type="text" id="seed-input" class="cyber-input" placeholder="SEMILLA NEURONAL...">
         </div>
-        <div class="slider-container">
-            <div class="slider-header">
-                <span>DENSIDAD PRIMARIA</span>
-                <span id="val-l1" style="color: var(--color-primary)">6</span>
-            </div>
-            <input type="range" id="range-l1" class="cyber-slider" min="1" max="15" value="6">
         </div>
-        <div class="slider-container">
-            <div class="slider-header">
-                <span>RAMIFICACIÓN SECUNDARIA</span>
-                <span id="val-l2" style="color: var(--color-primary)">4</span>
-            </div>
-            <input type="range" id="range-l2" class="cyber-slider" min="1" max="10" value="4">
         </div>
-        <div class="slider-container">
-            <div class="slider-header">
-                <span>PROFUNDIDAD TERCIARIA</span>
-                <span id="val-l3" style="color: var(--color-primary)">2</span>
-            </div>
-            <input type="range" id="range-l3" class="cyber-slider" min="0" max="5" value="2">
         </div>
-        <button id="btn-visualize" class="cyber-button">
-            <span>SEMBRAR EN LA RED</span>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="12" y1="8" x2="12" y2="16"></line>
-                <line x1="8" y1="12" x2="16" y2="12"></line>
-            </svg>
-        </button>
     </div>
-    <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 10px;">
-        <div style="font-size: 12px; color: var(--color-secondary); letter-spacing: 2px; font-weight: 700;">RED GLOBAL</div>
-        <div id="minimap-container" style="height: 180px; width: 100%;">
-            <canvas id="minimap-canvas" width="290" height="180"></canvas>
-            <div id="minimap-header">RADAR</div>
-            <div id="minimap-controls">
-                <div class="mini-btn" id="map-zoom-out">-</div>
-                <div class="mini-btn" id="map-zoom-in">+</div>
-            </div>
-        </div>
-        <div id="users-list"></div>
-    </div>
-</aside>
-<script>
-    // Sistema global de diagnóstico de errores
-    window.onerror = function(msg, url, lineNo, columnNo, error) {
-        const consoleDiv = document.getElementById('error-console');
-        const list = document.getElementById('error-list');
-        if (consoleDiv && list) {
-            consoleDiv.style.display = 'block';
-            const item = document.createElement('div');
-            item.innerHTML = `[CRITICO] ${msg} <br><span style="color:#aaa; font-size:10px">En: ${url}:${lineNo}</span>`;
-            item.style.borderBottom = '1px solid #400';
-            item.style.padding = '5px 0';
-            list.appendChild(item);
-        }
-        return false;
-    };
-    window.addEventListener('unhandledrejection', function(event) {
-        const consoleDiv = document.getElementById('error-console');
-        const list = document.getElementById('error-list');
-        if (consoleDiv && list) {
-            consoleDiv.style.display = 'block';
-            const item = document.createElement('div');
-            // Detectar error común de Firebase Domain
-            let msg = event.reason ? event.reason.message : 'Error desconocido';
-            if (msg.includes('auth/unauthorized-domain')) {
-                msg = "ERROR DE DOMINIO: Este dominio no está autorizado en Firebase Console -> Authentication -> Settings.";
-            }
-            item.innerHTML = `[PROMESA] ${msg}`;
-            item.style.borderBottom = '1px solid #400';
-            item.style.padding = '5px 0';
-            list.appendChild(item);
-        }
-    });
-</script>
-<script type="module">
-    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
-    import { getAuth, signInAnonymously, signOut, onAuthStateChanged, setPersistence, browserSessionPersistence } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
-    import { getFirestore, doc, setDoc, getDoc, addDoc, collection, onSnapshot, query, orderBy, serverTimestamp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
-    import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js";
-    import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/controls/OrbitControls.js";
-    import { FontLoader } from "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/loaders/FontLoader.js";
-    import { TextGeometry } from "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/geometries/TextGeometry.js";
-    import TWEEN from "https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.6.4/dist/tween.esm.js";
-    class Config {
-        static get FIREBASE() {
-            return {
-                apiKey: "AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
-                authDomain: "neuronal-1f3b9.firebaseapp.com",
-                projectId: "neuronal-1f3b9",
-                storageBucket: "neuronal-1f3b9.firebasestorage.app",
-                messagingSenderId: "208887839866",
-                appId: "1:208887839866:web:adbb697dd0b63195b10fc3"
-            };
-        }
-        static get GEMINI_API_KEY() {
-            return localStorage.getItem('GEMINI_API_KEY') || 'AIzaSyDmoQNpzgzW21f_WFCU9YbaAeI1fdOJMlo';
-        }
-        static get COLORS() {
-            return {
-                bg: 0x030508,
-                primary: 0x00f3ff,
-                secondary: 0x0066ff,
-                text: 0xe0f7ff,
-                grid: 0x1a2b4a
-            };
-        }
-        static get CONSTANTS() {
-            return {
-                GALAXY_SPACING: 400,
-                USER_SPHERE_RADIUS: 5,
-                SPIRAL_TIGHTNESS: 0.15,
-                SPIRAL_VERTICAL_STEP: 2.5,
-                CAMERA_FOV: 60,
-                CAMERA_FAR: 5000
-            };
-        }
-    }
-    class Utils {
-        static normalizeString(str) {
-            return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toUpperCase();
-        }
-        static stringToColor(str) {
-            let hash = 0;
-            for (let i = 0; i < str.length; i++) {
-                hash = str.charCodeAt(i) + ((hash << 5) - hash);
-            }
-            const h = Math.abs(hash % 360);
-            return new THREE.Color(`hsl(${h}, 80%, 60%)`);
-        }
-        static stringToHexColor(str) {
-            let hash = 0;
-            for (let i = 0; i < str.length; i++) {
-                hash = str.charCodeAt(i) + ((hash << 5) - hash);
-            }
-            const h = Math.abs(hash % 360);
-            return `hsl(${h}, 80%, 60%)`;
-        }
-        static delay(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-        static randomRange(min, max) {
-            return Math.random() * (max - min) + min;
-        }
-        static generateCode() {
-            return Math.floor(1000 + Math.random() * 9000).toString();
-        }
-    }
-    class AuthManager {
-        constructor(appInstance) {
-            this.app = appInstance;
-            this.firebaseApp = initializeApp(Config.FIREBASE);
-            this.auth = getAuth(this.firebaseApp);
-            this.db = getFirestore(this.firebaseApp);
-            this.currentUser = null;
-            this.currentUsername = null;
-        }
-        async init() {
-            await setPersistence(this.auth, browserSessionPersistence);
-            onAuthStateChanged(this.auth, async (user) => {
-                if (user) {
-                    this.currentUser = user;
-                    const loader = document.getElementById('loading-text');
-                    if (loader) loader.innerText = "CONECTANDO A BASE DE DATOS...";
-                    await this.checkUserProfile();
-                } else {
-                    const loader = document.getElementById('loading-text');
-                    if (loader) loader.innerText = "GENERANDO CREDENCIALES...";
-                    try {
-                        await signInAnonymously(this.auth);
-                    } catch (e) {
-                        console.error("Auth Error:", e);
-                        if (loader) loader.innerText = "ERROR DE AUTENTICACION (VER CONSOLA)";
-                    }
-                }
-            });
-            const logoutBtn = document.getElementById('btn-logout');
-            if (logoutBtn) logoutBtn.addEventListener('click', () => this.handleLogout());
-        }
-        async handleLogout() {
-            try {
-                await signOut(this.auth);
-                window.location.reload();
-            } catch (error) {
-                console.error("Logout Error:", error);
-            }
-        }
-        async createUserProfile(username) {
-            if (!this.currentUser) return;
-            const uid = this.currentUser.uid;
-            this.currentUsername = username;
-            const userRef = doc(this.db, 'artifacts', 'neuronal-1f3b9', 'users', uid, 'user_data', 'profile');
-            await setDoc(userRef, {
-                username: username,
-                createdAt: serverTimestamp(),
-                lastLogin: serverTimestamp(),
-                platform: navigator.platform
-            }, { merge: true });
-        }
-        async checkUserProfile() {
-            if (!this.currentUser) return;
-            const uid = this.currentUser.uid;
-            try {
-                const userRef = doc(this.db, 'artifacts', 'neuronal-1f3b9', 'users', uid, 'user_data', 'profile');
-                const snap = await getDoc(userRef);
-                if (snap.exists()) {
-                    this.currentUsername = snap.data().username;
-                } else {
-                    const randomName = `PILOTO-${Utils.generateCode()}`;
-                    await this.createUserProfile(randomName);
-                }
-                const loader = document.getElementById('loading-text');
-                if (loader) loader.innerText = "ACCESO CONCEDIDO";
-                setTimeout(() => {
-                    this.app.ui.hideLogin();
-                    this.app.data.startListening();
-                }, 800);
-            } catch (error) {
-                console.error("Profile Check Error:", error);
-                const loader = document.getElementById('loading-text');
-                if (loader) loader.innerText = "ERROR DE CONEXION";
-            }
-        }
-    }
-    class DataManager {
-        constructor(appInstance) {
-            this.app = appInstance;
-            this.db = appInstance.auth.db;
-            this.maps = [];
-            this.users = new Map();
-            this.listeners = [];
-        }
-        startListening() {
-            const mapsRef = collection(this.db, 'artifacts', 'neuronal-1f3b9', 'public', 'data', 'maps');
-            const q = query(mapsRef, orderBy('createdAt', 'asc'));
-            const unsubscribe = onSnapshot(q, (snapshot) => {
-                this.maps = [];
-                snapshot.forEach(doc => {
-                    this.maps.push({
-                        id: doc.id,
-                        ...doc.data()
-                    });
-                });
-                this.processData();
-            }, (error) => {
-                console.error("Snapshot error:", error);
-            });
-            this.listeners.push(unsubscribe);
-        }
-        async processData() {
-            const uniqueUserIds = [...new Set(this.maps.map(m => m.userId))];
-            if (this.app.auth.currentUser && !uniqueUserIds.includes(this.app.auth.currentUser.uid)) {
-                uniqueUserIds.push(this.app.auth.currentUser.uid);
-            }
-            for (const uid of uniqueUserIds) {
-                if (!this.users.has(uid)) {
-                    let username = "DESCONOCIDO";
-                    if (uid === this.app.auth.currentUser?.uid) {
-                        username = this.app.auth.currentUsername;
-                    } else {
-                        try {
-                            const ref = doc(this.db, 'artifacts', 'neuronal-1f3b9', 'users', uid, 'user_data', 'profile');
-                            const snap = await getDoc(ref);
-                            if (snap.exists()) username = snap.data().username;
-                        } catch (e) {
-                            console.warn(`Error fetching user ${uid}`, e);
-                        }
-                    }
-                    this.users.set(uid, { username, id: uid, maps: [] });
-                }
-            }
-            this.users.forEach(u => u.maps = []);
-            this.maps.forEach(map => {
-                if (this.users.has(map.userId)) {
-                    this.users.get(map.userId).maps.push(map);
-                }
-            });
-            this.app.world.galaxySystem.rebuild(this.users);
-            this.app.ui.updateUserList(this.users);
-        }
-        async saveNeuron(topic, dataStructure) {
-            if (!this.app.auth.currentUser) return;
-            const colRef = collection(this.db, 'artifacts', 'neuronal-1f3b9', 'public', 'data', 'maps');
-            await addDoc(colRef, {
-                topic: topic,
-                data: JSON.stringify(dataStructure),
-                userId: this.app.auth.currentUser.uid,
-                createdAt: serverTimestamp(),
-                origin: { x: 0, y: 0, z: 0 }
-            });
-        }
-    }
-    class AIManager {
-        constructor(appInstance) {
-            this.app = appInstance;
-        }
-        async generate(topic, levels) {
-            const prompt = `
-                Genera un objeto JSON puro (sin markdown) basado en el tema: "${topic}".
-                Asegúrate de que no haya acentos ni caracteres especiales.
-                Estructura:
-                {
-                    "analisis": "Breve descripción de 15 palabras",
-                    "lista_palabras": [
-                        {
-                            "palabra_principal": "Concepto1",
-                            "variantes": [
-                                {
-                                    "palabra_variante": "Subconcepto1",
-                                    "sub_variantes": ["Detalle1", "Detalle2"]
-                                }
-                            ]
-                        }
-                    ]
-                }
-                Requisitos de cantidad:
-                - ${levels.l1} elementos principales en lista_palabras.
-                - ${levels.l2} variantes por cada principal.
-                - ${levels.l3} sub_variantes por cada variante.
-                IMPORTANTE: Responde SOLO con el JSON.
-            `;
-            const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${Config.GEMINI_API_KEY}`;
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        contents: [{ parts: [{ text: prompt }] }],
-                        generationConfig: { responseMimeType: "application/json" }
-                    })
-                });
-                if (!response.ok) throw new Error("API Error");
-                const data = await response.json();
-                const text = data.candidates[0].content.parts[0].text;
-                return JSON.parse(text);
-            } catch (error) {
-                console.error("AI Error:", error);
-                throw error;
-            }
-        }
-    }
-    class Comet {
-        constructor(scene, font) {
-            this.scene = scene;
-            this.font = font;
-            this.angle = 0;
-            this.radius = 600;
-            this.speed = 0.003;
-            this.group = new THREE.Group();
-            this.tailPositions = [];
-            this.wordTimer = 0;
-            this.currentWordMesh = null;
-            this.words = ["DATOS", "FLUJO", "RED", "NODO", "ENLACE", "CORE", "SYSTEM", "LINK", "SIGNAL", "PULSE"];
-            this.initVisuals();
-            this.scene.add(this.group);
-        }
-        initVisuals() {
-            const headGeo = new THREE.SphereGeometry(2, 16, 16);
-            const headMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
-            this.head = new THREE.Mesh(headGeo, headMat);
-            this.group.add(this.head);
-            const glowGeo = new THREE.SpriteMaterial({
-                map: new THREE.CanvasTexture(this.generateGlowTexture()),
-                color: 0x00ffff,
-                transparent: true,
-                opacity: 0.8,
-                blending: THREE.AdditiveBlending
-            });
-            const glow = new THREE.Sprite(glowGeo);
-            glow.scale.set(15, 15, 1);
-            this.head.add(glow);
-            const lineGeo = new THREE.BufferGeometry();
-            const positions = new Float32Array(50 * 3);
-            lineGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-            const lineMat = new THREE.LineBasicMaterial({
-                color: 0x00ffff,
-                transparent: true,
-                opacity: 0.4,
-                blending: THREE.AdditiveBlending
-            });
-            this.tail = new THREE.Line(lineGeo, lineMat);
-            this.scene.add(this.tail);
-        }
-        generateGlowTexture() {
-            const canvas = document.createElement('canvas');
-            canvas.width = 32;
-            canvas.height = 32;
-            const context = canvas.getContext('2d');
-            const gradient = context.createRadialGradient(16, 16, 0, 16, 16, 16);
-            gradient.addColorStop(0, 'rgba(255,255,255,1)');
-            gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
-            gradient.addColorStop(0.5, 'rgba(0,64,255,0.2)');
-            gradient.addColorStop(1, 'rgba(0,0,0,0)');
-            context.fillStyle = gradient;
-            context.fillRect(0, 0, 32, 32);
-            return canvas;
-        }
-        update(camera) {
-            this.angle += this.speed;
-            const x = Math.cos(this.angle) * this.radius;
-            const z = Math.sin(this.angle * 0.7) * this.radius;
-            const y = Math.sin(this.angle * 0.3) * 100;
-            this.group.position.set(x, y, z);
-            this.tailPositions.unshift(new THREE.Vector3(x, y, z));
-            if (this.tailPositions.length > 50) this.tailPositions.pop();
-            const positions = this.tail.geometry.attributes.position.array;
-            for (let i = 0; i < this.tailPositions.length; i++) {
-                const p = this.tailPositions[i];
-                positions[i * 3] = p.x;
-                positions[i * 3 + 1] = p.y;
-                positions[i * 3 + 2] = p.z;
-            }
-            this.tail.geometry.attributes.position.needsUpdate = true;
-            this.wordTimer++;
-            if (this.wordTimer > 300) {
-                this.spawnWord();
-                this.wordTimer = 0;
-            }
-            if (this.currentWordMesh) {
-                this.currentWordMesh.lookAt(camera.position);
-            }
-        }
-        spawnWord() {
-            if (this.currentWordMesh) {
-                this.group.remove(this.currentWordMesh);
-                this.currentWordMesh.geometry.dispose();
-            }
-            const word = this.words[Math.floor(Math.random() * this.words.length)];
-            const geo = new TextGeometry(word, {
-                font: this.font,
-                size: 4,
-                height: 0.2
-            });
-            geo.center();
-            const mat = new THREE.MeshBasicMaterial({ color: 0x00ffff });
-            this.currentWordMesh = new THREE.Mesh(geo, mat);
-            this.currentWordMesh.position.y = 8;
-            this.group.add(this.currentWordMesh);
-        }
-    }
-    class GalaxySystem {
-        constructor(appInstance) {
-            this.app = appInstance;
-            this.scene = appInstance.world.scene;
-            this.container = new THREE.Group();
-            this.scene.add(this.container);
-            this.userNodes = new Map();
-        }
-        rebuild(usersMap) {
-            this.clear();
-            const users = Array.from(usersMap.values());
-            const userIndex = users.findIndex(u => u.id === this.app.auth.currentUser?.uid);
-            if (userIndex === -1 && this.app.auth.currentUser) {
-                // Si el usuario actual no tiene mapas, agrégalo virtualmente al final
-                users.push({
-                    id: this.app.auth.currentUser.uid,
-                    username: this.app.auth.currentUsername,
-                    maps: []
-                });
-            }
-            users.forEach((user, index) => {
-                const angle = index * 2.5;
-                const radius = Math.sqrt(index) * Config.CONSTANTS.GALAXY_SPACING;
-                const x = Math.cos(angle) * radius;
-                const z = Math.sin(angle) * radius;
-                const origin = new THREE.Vector3(x, 0, z);
-                this.createUserGalaxy(user, origin);
-            });
-        }
-        createUserGalaxy(user, origin) {
-            const isMe = user.id === this.app.auth.currentUser?.uid;
-            const coreGeo = new THREE.IcosahedronGeometry(Config.CONSTANTS.USER_SPHERE_RADIUS, 1);
-            const coreMat = new THREE.MeshStandardMaterial({
-                color: isMe ? Config.COLORS.primary : Config.COLORS.secondary,
-                emissive: isMe ? 0x0044aa : 0x001133,
-                emissiveIntensity: 0.8,
-                wireframe: true
-            });
-            const core = new THREE.Mesh(coreGeo, coreMat);
-            core.position.copy(origin);
-            core.userData = { type: 'user', id: user.id, username: user.username };
-            this.container.add(core);
-            // Anillos rotatorios decorativos
-            const ringGeo = new THREE.TorusGeometry(Config.CONSTANTS.USER_SPHERE_RADIUS * 1.5, 0.1, 8, 32);
-            const ringMat = new THREE.MeshBasicMaterial({ color: isMe ? 0xffffff : 0x555555, transparent: true, opacity: 0.3 });
-            const ring = new THREE.Mesh(ringGeo, ringMat);
-            ring.position.copy(origin);
-            ring.rotation.x = Math.PI / 2;
-            this.container.add(ring);
-            // Animación del anillo guardada en userData para el loop
-            ring.userData = { animate: true, speed: 0.01 };
-            if (this.app.world.font) {
-                const textGeo = new TextGeometry(user.username, {
-                    font: this.app.world.font,
-                    size: 2.5,
-                    height: 0.1
-                });
-                textGeo.center();
-                const textMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
-                const text = new THREE.Mesh(textGeo, textMat);
-                text.position.copy(origin);
-                text.position.y += 10;
-                text.userData = { isBillboard: true };
-                this.container.add(text);
-            }
-            this.buildNeurons(user.maps, origin);
-            this.userNodes.set(user.id, { origin, mesh: core });
-        }
-        buildNeurons(maps, origin) {
-            maps.forEach((map, index) => {
-                // Cálculo de espiral esférica
-                const phi = index * 0.5; // Espaciado angular
-                const height = (index * Config.CONSTANTS.SPIRAL_VERTICAL_STEP) - (maps.length * Config.CONSTANTS.SPIRAL_VERTICAL_STEP / 2);
-                const r = 20 + (index * 1.2);
-                const x = r * Math.cos(phi);
-                const z = r * Math.sin(phi);
-                const y = height;
-                const pos = new THREE.Vector3(x, y, z).add(origin);
-                const color = Utils.stringToColor(map.topic);
-                // Línea conector al centro
-                const points = [origin, pos];
-                const lineGeo = new THREE.BufferGeometry().setFromPoints(points);
-                const lineMat = new THREE.LineBasicMaterial({
-                    color: color,
-                    transparent: true,
-                    opacity: 0.2
-                });
-                this.container.add(new THREE.Line(lineGeo, lineMat));
-                try {
-                    const data = JSON.parse(map.data);
-                    this.buildTreeRecursive(data.lista_palabras, pos, 1, color);
-                    // Título del mapa
-                    if (this.app.world.font) {
-                        const labelGeo = new TextGeometry(map.topic, {
-                            font: this.app.world.font,
-                            size: 1.2,
-                            height: 0.05
-                        });
-                        const labelMat = new THREE.MeshBasicMaterial({ color: color });
-                        const label = new THREE.Mesh(labelGeo, labelMat);
-                        label.position.copy(pos).add(new THREE.Vector3(0, 2, 0));
-                        label.userData = { isBillboard: true };
-                        this.container.add(label);
-                    }
-                } catch (e) {
-                    console.error("Error parsing map data", e);
-                }
-            });
-        }
-        buildTreeRecursive(items, parentPos, level, color) {
-            if (!items || level > 3) return;
-            const radius = 10 / level;
-            items.forEach((item, i) => {
-                let text = item.palabra_principal || item.palabra_variante || item;
-                let children = item.variantes || item.sub_variantes || [];
-                // Distribución aleatoria esférica local
-                const u = Math.random();
-                const v = Math.random();
-                const theta = 2 * Math.PI * u;
-                const phi = Math.acos(2 * v - 1);
-                const lx = radius * Math.sin(phi) * Math.cos(theta);
-                const ly = radius * Math.sin(phi) * Math.sin(theta);
-                const lz = radius * Math.cos(phi);
-                const pos = new THREE.Vector3(lx, ly, lz).add(parentPos);
-                const nodeSize = 0.5 / level;
-                const geo = new THREE.SphereGeometry(nodeSize, 8, 8);
-                const mat = new THREE.MeshBasicMaterial({ color: color });
-                const mesh = new THREE.Mesh(geo, mat);
-                mesh.position.copy(pos);
-                mesh.userData = { type: 'neuron', text: text, level: level };
-                this.container.add(mesh);
-                const lineGeo = new THREE.BufferGeometry().setFromPoints([parentPos, pos]);
-                const lineMat = new THREE.LineBasicMaterial({ color: color, transparent: true, opacity: 0.15 });
-                this.container.add(new THREE.Line(lineGeo, lineMat));
-                this.buildTreeRecursive(children, pos, level + 1, color);
-            });
-        }
-        clear() {
-            while(this.container.children.length > 0){
-                const obj = this.container.children[0];
-                this.container.remove(obj);
-                if(obj.geometry) obj.geometry.dispose();
-                if(obj.material) obj.material.dispose();
-            }
-            this.userNodes.clear();
-        }
-        update() {
-            this.container.children.forEach(child => {
-                if (child.userData.animate) {
-                    child.rotation.z += child.userData.speed;
-                }
-                if (child.userData.isBillboard) {
-                    child.lookAt(this.app.world.camera.position);
-                }
-            });
-        }
-    }
-    class Minimap {
-        constructor(appInstance) {
-            this.app = appInstance;
-            this.canvas = document.getElementById('minimap-canvas');
-            this.ctx = this.canvas.getContext('2d');
-            this.scale = 0.05;
-            this.width = this.canvas.width;
-            this.height = this.canvas.height;
-            this.cx = this.width / 2;
-            this.cy = this.height / 2;
-            this.setupInteractions();
-        }
-        setupInteractions() {
-            document.getElementById('map-zoom-in').onclick = () => { this.scale *= 1.2; this.draw(); };
-            document.getElementById('map-zoom-out').onclick = () => { this.scale /= 1.2; this.draw(); };
-            this.canvas.addEventListener('click', (e) => {
-                const rect = this.canvas.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
-                this.handleClick(x, y);
-            });
-        }
-        draw() {
-            this.ctx.fillStyle = '#000000';
-            this.ctx.fillRect(0, 0, this.width, this.height);
-            // Grid
-            this.ctx.strokeStyle = '#112233';
-            this.ctx.lineWidth = 1;
-            this.ctx.beginPath();
-            const gridSize = 20;
-            for(let x=0; x<this.width; x+=gridSize) { this.ctx.moveTo(x,0); this.ctx.lineTo(x,this.height); }
-            for(let y=0; y<this.height; y+=gridSize) { this.ctx.moveTo(0,y); this.ctx.lineTo(this.width,y); }
-            this.ctx.stroke();
-            const galaxy = this.app.world.galaxySystem;
-            galaxy.userNodes.forEach((data, uid) => {
-                const mapX = this.cx + data.origin.x * this.scale;
-                const mapY = this.cy + data.origin.z * this.scale;
-                const isMe = uid === this.app.auth.currentUser?.uid;
-                this.ctx.fillStyle = isMe ? '#00f3ff' : '#0066ff';
-                this.ctx.beginPath();
-                this.ctx.arc(mapX, mapY, isMe ? 4 : 2, 0, Math.PI * 2);
-                this.ctx.fill();
-                // Nombre
-                if (isMe) {
-                    this.ctx.fillStyle = '#ffffff';
-                    this.ctx.font = '10px Rajdhani';
-                    this.ctx.fillText("YO", mapX + 6, mapY + 3);
-                }
-            });
-        }
-        handleClick(mx, my) {
-            const worldX = (mx - this.cx) / this.scale;
-            const worldZ = (my - this.cy) / this.scale;
-            let closest = null;
-            let minDist = Infinity;
-            this.app.world.galaxySystem.userNodes.forEach((data) => {
-                const dx = data.origin.x - worldX;
-                const dz = data.origin.z - worldZ;
-                const dist = Math.sqrt(dx*dx + dz*dz);
-                if (dist < minDist) {
-                    minDist = dist;
-                    closest = data.origin;
-                }
-            });
-            if (closest && minDist < 1000) {
-                this.app.world.cameraFlyTo(closest);
-            }
-        }
-    }
-    class World3D {
-        constructor(appInstance) {
-            this.app = appInstance;
-            this.container = document.getElementById('canvas-container');
-            this.font = null;
-            this.initThree();
-            this.initStars();
-            this.galaxySystem = new GalaxySystem(this.app);
-            this.raycaster = new THREE.Raycaster();
-            this.mouse = new THREE.Vector2();
-            window.addEventListener('resize', () => this.onResize());
-            document.addEventListener('mousemove', (e) => this.onMouseMove(e));
-        }
-        initThree() {
-            this.scene = new THREE.Scene();
-            this.scene.fog = new THREE.FogExp2(Config.COLORS.bg, 0.0008);
-            this.camera = new THREE.PerspectiveCamera(Config.CONSTANTS.CAMERA_FOV, window.innerWidth / window.innerHeight, 0.1, Config.CONSTANTS.CAMERA_FAR);
-            this.camera.position.set(0, 100, 200);
-            this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
-            this.renderer.setSize(window.innerWidth, window.innerHeight);
-            this.renderer.setPixelRatio(window.devicePixelRatio);
-            this.renderer.setClearColor(Config.COLORS.bg);
-            this.container.appendChild(this.renderer.domElement);
-            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-            this.controls.enableDamping = true;
-            this.controls.dampingFactor = 0.05;
-            this.controls.maxDistance = 2000;
-            const ambient = new THREE.AmbientLight(0xffffff, 0.5);
-            this.scene.add(ambient);
-            const dir = new THREE.DirectionalLight(0xffffff, 1);
-            dir.position.set(100, 200, 100);
-            this.scene.add(dir);
-        }
-        initStars() {
-            const count = 8000;
-            const geo = new THREE.BufferGeometry();
-            const pos = new Float32Array(count * 3);
-            const colors = new Float32Array(count * 3);
-            for(let i=0; i<count; i++) {
-                pos[i*3] = (Math.random()-0.5) * 4000;
-                pos[i*3+1] = (Math.random()-0.5) * 2000;
-                pos[i*3+2] = (Math.random()-0.5) * 4000;
-                const starType = Math.random();
-                if (starType > 0.9) {
-                    colors[i*3] = 0.5; colors[i*3+1] = 0.8; colors[i*3+2] = 1;
-                } else if (starType > 0.7) {
-                    colors[i*3] = 1; colors[i*3+1] = 0.9; colors[i*3+2] = 0.6;
-                } else {
-                    colors[i*3] = 1; colors[i*3+1] = 1; colors[i*3+2] = 1;
-                }
-            }
-            geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
-            geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-            const mat = new THREE.PointsMaterial({ size: 1.5, vertexColors: true, transparent: true, opacity: 0.8 });
-            this.stars = new THREE.Points(geo, mat);
-            this.scene.add(this.stars);
-        }
-        async loadResources() {
-            return new Promise((resolve) => {
-                const loader = new FontLoader();
-                loader.load('https://cdn.jsdelivr.net/npm/three@0.128.0/examples/fonts/helvetiker_bold.typeface.json', (font) => {
-                    this.font = font;
-                    this.comet = new Comet(this.scene, font);
-                    resolve();
-                }, undefined, (err) => {
-                    console.error("Font loading error:", err);
-                    resolve(); // Continue without font
-                });
-            });
-        }
-        cameraFlyTo(target) {
-            new TWEEN.Tween(this.camera.position)
-                .to({ x: target.x, y: target.y + 60, z: target.z + 120 }, 2000)
-                .easing(TWEEN.Easing.Cubic.InOut)
-                .start();
-            new TWEEN.Tween(this.controls.target)
-                .to({ x: target.x, y: target.y, z: target.z }, 2000)
-                .easing(TWEEN.Easing.Cubic.InOut)
-                .start();
-        }
-        onResize() {
-            this.camera.aspect = window.innerWidth / window.innerHeight;
-            this.camera.updateProjectionMatrix();
-            this.renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        onMouseMove(e) {
-            this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
-            this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
-            const tooltip = document.getElementById('tooltip');
-            tooltip.style.left = (e.clientX + 20) + 'px';
-            tooltip.style.top = (e.clientY + 20) + 'px';
-        }
-        animate() {
-            requestAnimationFrame(() => this.animate());
-            TWEEN.update();
-            this.controls.update();
-            if (this.comet) this.comet.update(this.camera);
-            if (this.galaxySystem) this.galaxySystem.update();
-            if (this.stars) this.stars.rotation.y += 0.0001;
-            // Raycasting logic
-            this.raycaster.setFromCamera(this.mouse, this.camera);
-            const intersects = this.raycaster.intersectObjects(this.galaxySystem.container.children);
-            const tooltip = document.getElementById('tooltip');
-            if (intersects.length > 0) {
-                const obj = intersects[0].object;
-                if (obj.userData && (obj.userData.text || obj.userData.username)) {
-                    tooltip.style.display = 'block';
-                    const title = obj.userData.username || obj.userData.text;
-                    const type = obj.userData.type || 'NODO DE DATO';
-                    tooltip.innerHTML = `
-                        <div class="tooltip-title">${title}</div>
-                        <div class="tooltip-meta">TIPO: ${type.toUpperCase()}</div>
-                    `;
-                    document.body.style.cursor = 'pointer';
-                } else {
-                    tooltip.style.display = 'none';
-                    document.body.style.cursor = 'default';
-                }
-            } else {
-                tooltip.style.display = 'none';
-                document.body.style.cursor = 'default';
-            }
-            this.renderer.render(this.scene, this.camera);
-            if (this.app.minimap) this.app.minimap.draw();
-        }
-    }
-    class UIManager {
-        constructor(appInstance) {
-            this.app = appInstance;
-            this.setupListeners();
-        }
-        setupListeners() {
-            const s1 = document.getElementById('range-l1');
-            const s2 = document.getElementById('range-l2');
-            const s3 = document.getElementById('range-l3');
-            if(s1) s1.oninput = () => document.getElementById('val-l1').innerText = s1.value;
-            if(s2) s2.oninput = () => document.getElementById('val-l2').innerText = s2.value;
-            if(s3) s3.oninput = () => document.getElementById('val-l3').innerText = s3.value;
-            const vizBtn = document.getElementById('btn-visualize');
-            if(vizBtn) vizBtn.addEventListener('click', () => this.handleVisualize());
-        }
-        async handleVisualize() {
-            const input = document.getElementById('seed-input');
-            const topic = input.value.trim();
-            if (!topic) return;
-            const btn = document.getElementById('btn-visualize');
-            btn.disabled = true;
-            btn.innerHTML = 'PROCESANDO NEURONA...';
-            const bar = document.getElementById('progress-bar');
-            bar.style.width = '20%';
-            try {
-                const levels = {
-                    l1: document.getElementById('range-l1').value,
-                    l2: document.getElementById('range-l2').value,
-                    l3: document.getElementById('range-l3').value
-                };
-                bar.style.width = '60%';
-                const data = await this.app.ai.generate(topic, levels);
-                bar.style.width = '80%';
-                await this.app.data.saveNeuron(topic, data);
-                bar.style.width = '100%';
-                input.value = '';
-            } catch (error) {
-                console.error(error);
-                alert("ERROR EN LA GENERACIÓN DE LA NEURONA");
-            } finally {
-                setTimeout(() => {
-                    btn.disabled = false;
-                    btn.innerHTML = `
-                        <span>SEMBRAR EN LA RED</span>
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <line x1="12" y1="8" x2="12" y2="16"></line>
-                            <line x1="8" y1="12" x2="16" y2="12"></line>
-                        </svg>
-                    `;
-                    bar.style.width = '0%';
-                }, 1000);
-            }
-        }
-        updateUserList(usersMap) {
-            const list = document.getElementById('users-list');
-            list.innerHTML = '';
-            usersMap.forEach((user) => {
-                const div = document.createElement('div');
-                div.className = 'user-item';
-                div.innerHTML = `
-                    <span>${user.username}</span>
-                    <span class="user-count-badge">${user.maps.length}</span>
-                `;
-                div.onclick = () => {
-                    const node = this.app.world.galaxySystem.userNodes.get(user.id);
-                    if (node) this.app.world.cameraFlyTo(node.origin);
-                };
-                list.appendChild(div);
-            });
-        }
-        showLogin() {
-            const overlay = document.getElementById('login-overlay');
-            if(overlay) overlay.classList.remove('fade-out');
-        }
-        hideLogin() {
-            const overlay = document.getElementById('login-overlay');
-            if(overlay) overlay.classList.add('fade-out');
-        }
-    }
-    class App {
-        constructor() {
-            this.auth = new AuthManager(this);
-            this.data = new DataManager(this);
-            this.world = new World3D(this);
-            this.ui = new UIManager(this);
-            this.ai = new AIManager(this);
-            this.minimap = new Minimap(this);
-        }
-        async start() {
-            try {
-                await this.world.loadResources();
-                await this.auth.init();
-                this.world.animate();
-            } catch (err) {
-                console.error("FATAL ERROR IN APP START:", err);
-                const loader = document.getElementById('loading-text');
-                if(loader) loader.innerText = "ERROR FATAL: " + err.message;
-            }
-        }
-    }
-    const app = new App();
-    app.start();
-</script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="es">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>ECOTAGS · Galaxias 3D</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
+  <div id="container"></div>
+  <div id="tooltip"></div>
+  <div id="ui">
+    <div id="hdr">
+      <div id="title">
+        <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.6" 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>ECOTAGS</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span id="statusPill" class="hidden">Conectado</span>
+        <button id="logoutBtn" class="btn bg-red-600 text-white px-3 py-1 rounded text-sm hidden">Cerrar sesión</button>
+      </div>
     </div>
+    <div id="panel">
+      <div class="mb-3">
+        <div class="text-xs text-gray-400 mb-1">Usuario</div>
+        <div id="usernameLabel" class="text-green-300 font-semibold">-</div>
+      </div>
+      <input id="topicInput" type="text" class="w-full p-3 rounded-lg bg-gray-800/70 text-white border border-gray-700 focus:outline-none focus:border-green-500 mb-3" placeholder="Escribe uno o más hashtags">
+      <div class="grid grid-cols-3 gap-3 mb-4 text-sm">
+        <div>
+          <label class="text-gray-300">Nivel 1: <span id="level1Value" class="text-blue-300">10</span></label>
+          <input id="level1Slider" type="range" min="1" max="15" value="10">
         </div>
+        <div>
+          <label class="text-gray-300">Nivel 2: <span id="level2Value" class="text-blue-300">5</span></label>
+          <input id="level2Slider" type="range" min="3" max="8" value="5">
         </div>
+        <div>
+          <label class="text-gray-300">Nivel 3: <span id="level3Value" class="text-blue-300">3</span></label>
+          <input id="level3Slider" type="range" min="1" max="3" value="3">
         </div>
+      </div>
+      <button id="seedBtn" class="btn w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-500 hover:to-blue-500 text-white font-bold py-3 rounded-lg flex items-center justify-center gap-2">
+        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" 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 id="progressBarContainer" class="mt-3"><div id="progressBar"></div></div>
+      <details class="mt-4 bg-gray-800/60 rounded-md p-3 border border-gray-700">
+        <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 class="block text-gray-300">Gemini API Key</label>
+            <input id="geminiKeyInput" type="password" class="w-full p-2 rounded bg-gray-800 text-white border border-gray-700 focus:outline-none focus:border-blue-500" placeholder="AIza...">
+          </div>
+          <div class="flex items-center gap-2">
+            <button id="saveGeminiKeyBtn" class="btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">Guardar clave</button>
+            <span id="geminiKeyStatus" class="text-gray-400"></span>
+          </div>
         </div>
+      </details>
+      <div class="mt-4">
+        <h2 class="font-bold text-lg text-blue-300 mb-2">Galaxias de Usuarios</h2>
+        <div id="userList" class="w-full max-h-[22vh] overflow-y-auto text-gray-300 pr-1 text-sm"></div>
+      </div>
+      <div id="minimapContainer">
+        <div class="flex justify-between items-center mb-2">
+          <h2 class="font-bold text-lg text-blue-300">Minimapa</h2>
+          <div class="flex gap-1">
+            <button id="zoomOutButton" class="btn w-7 h-7 bg-gray-700 hover:bg-gray-600 rounded text-lg font-bold flex items-center justify-center">-</button>
+            <button id="zoomInButton" class="btn w-7 h-7 bg-gray-700 hover:bg-gray-600 rounded text-lg font-bold flex items-center justify-center">+</button>
+          </div>
         </div>
+        <canvas id="minimap" width="340" height="200"></canvas>
+      </div>
     </div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/geometries/TextGeometry.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/loaders/FontLoader.js"></script>
+  <script type="module" src="./src/main.js"></script>
 </body>
+</html>

src/config.js ADDED Viewed

	@@ -0,0 +1,4 @@

+export const firebaseConfig={apiKey:"AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",authDomain:"neuronal-1f3b9.firebaseapp.com",projectId:"neuronal-1f3b9",storageBucket:"neuronal-1f3b9.firebasestorage.app",messagingSenderId:"208887839866",appId:"1:208887839866:web:adbb697dd0b63195b10fc3",measurementId:"G-102SEBLQFJ"};
+export const appId="neuronal-1f3b9";
+export const gemKeyGet=()=>localStorage.getItem('GEMINI_API_KEY')||'';
+export const gemKeySet=k=>localStorage.setItem('GEMINI_API_KEY',k||'');

src/db.js ADDED Viewed

	@@ -0,0 +1,6 @@

+import {getFirestore, collection, addDoc, onSnapshot, query, serverTimestamp} from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+import {getDB} from './firebase.js';
+export async function saveNeuron(n){const db=getDB();const ref=collection(db,'artifacts',n.appId,'public','data','neurons');await addDoc(ref,{userId:n.userId,username:n.username,label:n.label,level:n.level,position:{x:n.position.x,y:n.position.y,z:n.position.z},topic:n.topic||null,createdAt:serverTimestamp()});}
+export function subscribeNeurons(appId,cb){const db=getDB();const ref=query(collection(db,'artifacts',appId,'public','data','neurons'));return onSnapshot(ref,cb);
+}

src/firebase.js ADDED Viewed

	@@ -0,0 +1,19 @@

+import {initializeApp} from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+import {getAuth, onAuthStateChanged, signInAnonymously, signOut as fbSignOut} from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
+import {getFirestore, doc, setDoc, getDoc, serverTimestamp} from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+import {firebaseConfig, appId} from './config.js';
+import {autoUsername} from './utils.js';
+let app, db, auth, userId=null, username=null, ready=false;
+let profilesCache={};
+async function fetchIP(){try{const r=await fetch('https://api.ipify.org?format=json');if(!r.ok)throw 0;const j=await r.json();return j.ip||'';}catch{return''}}
+export async function initFirebase(){app=initializeApp(firebaseConfig);db=getFirestore(app);auth=getAuth(app);const ip=await fetchIP();const last=localStorage.getItem('last_ip')||'';if(ip&&ip!==last){localStorage.removeItem('local_username');localStorage.setItem('last_ip',ip);}onAuthStateChanged(auth,async u=>{if(u){userId=u.uid;ready=true;const p=await ensureProfile(userId);username=p.username;renderAuthUI(true);}else{try{await signInAnonymously(auth);}catch{userId=localStorage.getItem('local_uid')||crypto.randomUUID();localStorage.setItem('local_uid',userId);let uname=localStorage.getItem('local_username');if(!uname){uname=autoUsername();localStorage.setItem('local_username',uname);}username=uname;ready=true;renderAuthUI(false);}}});return new Promise(res=>{const t=setInterval(()=>{if(ready){clearInterval(t);res();}},50);});}
+export function getDB(){return db;}
+export function getAuthState(){return{userId,username,ready}};
+export async function ensureProfile(uid){if(profilesCache[uid])return profilesCache[uid];try{const ref=doc(db,'artifacts',appId,'users',uid,'user_data','profile');const s=await getDoc(ref);if(s.exists()){const p=s.data();profilesCache[uid]=p;return p;}const uname=localStorage.getItem('local_username')||autoUsername();const p={username:uname,createdAt:serverTimestamp()};await setDoc(ref,p);profilesCache[uid]=p;return p;}catch{const uname=localStorage.getItem('local_username')||autoUsername();const p={username:uname};profilesCache[uid]=p;return p;}}
+export function getProfile(uid){return profilesCache[uid]||null}
+export async function signOut(){try{await fbSignOut(auth);}catch{} localStorage.removeItem('local_username');}
+function renderAuthUI(logged){const pill=document.getElementById('statusPill');const lo=document.getElementById('logoutBtn');const ul=document.getElementById('usernameLabel');if(logged){pill.classList.remove('hidden');lo.classList.remove('hidden');}else{pill.classList.remove('hidden');lo.classList.remove('hidden');}ul.textContent=username||'-';}

src/gemini.js ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ import {gemKeyGet} from './config.js';
2	+
3	+ export async function callGemini(topic,n1,n2,n3){const modelId='gemini-2.0-flash-exp';const schema={type:'OBJECT',properties:{analisis:{type:'STRING'},lista_palabras:{type:'ARRAY',items:{type:'OBJECT',properties:{palabra_principal:{type:'STRING'},variantes:{type:'ARRAY',items:{type:'OBJECT',properties:{palabra_variante:{type:'STRING'},sub_variantes:{type:'ARRAY',items:{type:'STRING'}}},required:['palabra_variante','sub_variantes']}}},required:['palabra_principal','variantes']}}},required:['lista_palabras']};const sys='Eres un analista. Devuelve JSON sin acentos.';const up=`Tema: "${topic}". 1) ${n1} palabras clave. 2) ${n2} variantes por cada una. 3) ${n3} sub-variantes por variante.`;const payload={contents:[{parts:[{text:up}]}],systemInstruction:{parts:[{text:sys}]},generationConfig:{responseMimeType:'application/json',responseSchema:schema}};const key=gemKeyGet();if(!key)throw new Error('Configura tu Gemini API Key.');const url=`https://generativelanguage.googleapis.com/v1beta/models/${modelId}:generateContent?key=${key}`;const r=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});if(!r.ok){throw new Error(await r.text()\|\|'Error Gemini');}return await r.json();}

src/main.js ADDED Viewed

	@@ -0,0 +1,52 @@

+import {initFirebase, getAuthState, ensureProfile, signOut, getProfile} from './firebase.js';
+import {initScene, clearScene, usernameSphere, addNeuronMesh, drawMinimap, focusOnUser, teleportToUser, userCenter} from './scene.js';
+import {initUI, handleSeed} from './ui.js';
+import {subscribeNeurons} from './db.js';
+import {appId} from './config.js';
+import {hslFromString} from './utils.js';
+const THREE=window.THREE;
+await initFirebase();
+initScene();
+initUI();
+document.getElementById('seedBtn').addEventListener('click',handleSeed);
+document.getElementById('logoutBtn').addEventListener('click',async()=>{await signOut(); location.reload();});
+let profiles={};
+subscribeNeurons(appId, async snap=>{
+  clearScene();
+  const perUser={};
+  snap.forEach(d=>{const v=d.data(); if(!v.userId||!v.position||!v.label) return; if(!perUser[v.userId]) perUser[v.userId]=[]; perUser[v.userId].push(v); if(v.username && !profiles[v.userId]) profiles[v.userId]={username:v.username};});
+  const uids=Object.keys(perUser);
+  const userList=document.getElementById('userList');
+  if (userList) userList.innerHTML='';
+  for(const uid of uids){
+    if(!profiles[uid]){ try{ const p=await ensureProfile(uid); profiles[uid]=p; }catch{} }
+    const uname=(profiles[uid]?.username)||`Usuario ${uid.slice(0,4)}`;
+    usernameSphere(uid,uname);
+    const arr=perUser[uid].sort((a,b)=>(a.createdAt?.seconds||0)-(b.createdAt?.seconds||0));
+    for(const n of arr){
+      const col=hslFromString(n.label).color;
+      const pos=new THREE.Vector3(n.position.x,n.position.y,n.position.z);
+      addNeuronMesh(uid,n.label,n.level||1,pos,col);
+    }
+    if (userList){
+      const item=document.createElement('div');
+      item.className='p-2 mb-1 rounded-md hover:bg-gray-700 cursor-pointer';
+      item.textContent=uname;
+      item.addEventListener('click',()=> teleportToUser(uid));
+      userList.appendChild(item);
+    }
+  }
+  const me=getAuthState().userId;
+  drawMinimap(uids,profiles,me);
+  focusOnUser(me);
+});
+window.addEventListener('teleport',e=>{teleportToUser(e.detail.uid)});
+document.getElementById('usernameLabel').textContent=getAuthState().username||'-';

src/scene.js ADDED Viewed

	@@ -0,0 +1,33 @@

+import {hslFromString, randomWord} from './utils.js';
+const THREE=window.THREE;const OrbitControls=THREE.OrbitControls;const TextGeometry=THREE.TextGeometry;const FontLoader=THREE.FontLoader;
+let scene,camera,renderer,controls,raycaster,mouse,tooltip,font,rootGroup,starsGroup,comet,cometTrail=[],cometTimer=0,cometWordTimer=0,cometWord='';
+let minimapCtx,minimapScale=0.025,minimapDots=[];const MINIMAP_DOT_SIZE=2;const fontLoader=new FontLoader();
+const usersCenters={};
+export function getUsersCenters(){return usersCenters;}
+export function userCenter(uid){if(usersCenters[uid])return usersCenters[uid];let hash=0;for(let i=0;i<uid.length;i++)hash=uid.charCodeAt(i)+((hash<<5)-hash);const ang=Math.abs(hash)%360*Math.PI/180;const ring=600+(Math.abs(hash)%7)*180;const x=Math.cos(ang)*ring;const z=Math.sin(ang)*ring;const y=((hash%37)-18)*2;const v=new THREE.Vector3(x,y,z);usersCenters[uid]=v;return v;}
+export function spiralPosition(uid,i){const c=userCenter(uid);const a=0.55;const step=0.9;const ang=i*a;const r=6+step*i*0.45;const y=(i%18-9)*0.22;const x=Math.cos(ang)*r;const z=Math.sin(ang)*r;return new THREE.Vector3(c.x+x,c.y+y,c.z+z);}
+export function initScene(){scene=new THREE.Scene();camera=new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1,4000);camera.position.set(0,8,28);renderer=new THREE.WebGLRenderer({antialias:true,powerPreference:'high-performance'});renderer.setSize(window.innerWidth,window.innerHeight);renderer.setPixelRatio(Math.min(devicePixelRatio,2));document.getElementById('container').appendChild(renderer.domElement);controls=new OrbitControls(camera,renderer.domElement);controls.enableDamping=true;controls.dampingFactor=.06;controls.target.set(0,0,0);const amb=new THREE.AmbientLight(0xbfd4ff,.75);scene.add(amb);const dir=new THREE.DirectionalLight(0xffffff,.9);dir.position.set(6,10,7);scene.add(dir);const hemi=new THREE.HemisphereLight(0x4fc3f7,0x0b1020,.35);scene.add(hemi);raycaster=new THREE.Raycaster();mouse=new THREE.Vector2();rootGroup=new THREE.Group();scene.add(rootGroup);tooltip=document.getElementById('tooltip');addBackgroundStars();addComet();const minimap=document.getElementById('minimap');minimapCtx=minimap.getContext('2d');minimap.addEventListener('click',onMinimapClick);document.getElementById('zoomInButton').addEventListener('click',()=>{minimapScale*=1.4;drawMinimap([],{})});document.getElementById('zoomOutButton').addEventListener('click',()=>{minimapScale/=1.4;drawMinimap([],{})});window.addEventListener('resize',onResize);window.addEventListener('mousemove',onPointerMove);fontLoader.load('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/fonts/helvetiker_regular.typeface.json',f=>{font=f;});animate();}
+export function clearScene(){rootGroup.clear();}
+export function focusOnUser(uid){const c=userCenter(uid);controls.target.copy(c);camera.position.copy(c.clone().add(new THREE.Vector3(0,8,26)));controls.update();}
+export function teleportToUser(uid){const c=userCenter(uid);controls.target.copy(c);camera.position.copy(c.clone().add(new THREE.Vector3(0,8,26)));controls.update();}
+function animate(){requestAnimationFrame(animate);controls.update();updateRaycast();updateComet();renderer.render(scene,camera);}
+function onResize(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}
+function onPointerMove(e){mouse.x=e.clientX/window.innerWidth*2-1;mouse.y=-(e.clientY/window.innerHeight)*2+1;tooltip.style.left=`${e.clientX+16}px`;tooltip.style.top=`${e.clientY}px`}
+function updateRaycast(){raycaster.setFromCamera(mouse,camera);const meshes=[];rootGroup.traverse(o=>{if(o.isMesh&&!o.userData.ignoreHit)meshes.push(o)});const is=raycaster.intersectObjects(meshes,false);if(is.length>0){const o=is[0].object;const d=o.userData;let html=`<strong>${d.label||d.hashtag||'Nodo'}</strong>`;if(d.level!=null)html+=`<br>Nivel: ${d.level}`;tooltip.innerHTML=html;tooltip.style.display='block';}else{tooltip.style.display='none';}}
+function addBackgroundStars(){starsGroup=new THREE.Group();const geo=new THREE.BufferGeometry();const count=2000;const positions=new Float32Array(count*3);for(let i=0;i<count;i++){const r=1200*Math.pow(Math.random(),.6)+200;const a=Math.random()*Math.PI*2;const e=(Math.random()-0.5)*0.6;const x=Math.cos(a)*r;const z=Math.sin(a)*r;const y=r*e*0.25;positions[i*3]=x;positions[i*3+1]=y;positions[i*3+2]=z;}geo.setAttribute('position',new THREE.BufferAttribute(positions,3));const mat=new THREE.PointsMaterial({color:0x88b4ff,sizeAttenuation:true,size:1.2,transparent:true,opacity:.8});const pts=new THREE.Points(geo,mat);starsGroup.add(pts);scene.add(starsGroup);}
+function addComet(){const cometGeo=new THREE.SphereGeometry(0.35,16,16);const cometMat=new THREE.MeshStandardMaterial({color:0xffe08a,emissive:0xffb703,emissiveIntensity:1.2,metalness:.2,roughness:.4});comet=new THREE.Mesh(cometGeo,cometMat);scene.add(comet);comet.userData.radius=220;comet.userData.speed=0.0022;comet.userData.angle=Math.random()*Math.PI*2;comet.userData.incl=0.25;}
+function updateComet(){if(!comet)return;comet.userData.angle+=comet.userData.speed;const a=comet.userData.angle;const r=comet.userData.radius;const inc=comet.userData.incl;comet.position.set(Math.cos(a)*r,Math.sin(a*inc)*25,Math.sin(a)*r);cometTimer+=1/60;cometWordTimer+=1/60;if(cometTimer>.045){cometTimer=0;leaveTrailWord();}if(cometWordTimer>3){cometWordTimer=0;cometWord=randomWord();}for(let i=cometTrail.length-1;i>=0;i--){const m=cometTrail[i];m.material.opacity-=.01;m.position.y+=.03;if(m.material.opacity<=0){m.geometry.dispose();m.material.dispose();scene.remove(m);cometTrail.splice(i,1);}}}
+function leaveTrailWord(){if(!font)return;const s=cometWord||randomWord();const g=new TextGeometry(s.toUpperCase(),{font,size:.9,height:.02,curveSegments:4,bevelEnabled:false});g.computeBoundingBox();const m=new THREE.MeshBasicMaterial({color:0x4ade80,transparent:true,opacity:.8});const mesh=new THREE.Mesh(g,m);mesh.position.copy(comet.position);mesh.position.y+=.6;mesh.rotation.y=Math.random()*Math.PI;cometTrail.push(mesh);scene.add(mesh);}
+export function usernameSphere(uid,uname){const center=userCenter(uid);const mat=new THREE.MeshPhysicalMaterial({color:0x60a5fa,emissive:0x1e293b,roughness:.25,metalness:.35,clearcoat:.6,clearcoatRoughness:.2});const geo=new THREE.SphereGeometry(2.2,32,32);const s=new THREE.Mesh(geo,mat);s.position.copy(center);s.userData={ignoreHit:false,label:uname};rootGroup.add(s);if(font){const tg=new TextGeometry(uname.toUpperCase(),{font,size:.9,height:.05,curveSegments:6,bevelEnabled:false});tg.computeBoundingBox();const tm=new THREE.MeshBasicMaterial({color:0x93c5fd,transparent:true,opacity:.9});const text=new THREE.Mesh(tg,tm);text.position.copy(center);text.position.y+=3.1;text.position.x-=(tg.boundingBox.max.x-tg.boundingBox.min.x)/2;text.userData={ignoreHit:false,label:uname};rootGroup.add(text);}}
+export function addNeuronMesh(uid,label,level,pos,baseColor){const mat=new THREE.MeshStandardMaterial({color:new THREE.Color(baseColor),roughness:.4,metalness:.2,emissive:new THREE.Color(baseColor).multiplyScalar(.15)});const r=level===1?.45:level===2?.28:.18;const geo=new THREE.IcosahedronGeometry(r,1);const m=new THREE.Mesh(geo,mat);m.position.copy(pos);m.userData={label,level};const rimGeo=new THREE.RingGeometry(r*1.2,r*1.35,24);const rimMat=new THREE.MeshBasicMaterial({color:0x94ffa8,transparent:true,opacity:.18,side:THREE.DoubleSide});const rim=new THREE.Mesh(rimGeo,rimMat);rim.position.copy(pos);rim.rotation.x=Math.PI/2;rim.userData={ignoreHit:true};rootGroup.add(rim);rootGroup.add(m);if(font){const tgeo=new TextGeometry(label.toUpperCase(),{font,size:r*.9,height:.02,curveSegments:4});tgeo.computeBoundingBox();const tmat=new THREE.MeshBasicMaterial({color:new THREE.Color(baseColor),transparent:true,opacity:.85});const tm=new THREE.Mesh(tgeo,tmat);tm.position.copy(pos);tm.position.y+=r+.08;tm.position.x-=(tgeo.boundingBox.max.x-tgeo.boundingBox.min.x)/2;tm.userData={label,level};rootGroup.add(tm);}}
+export function drawMinimap(uids,profiles,me){if(!minimapCtx)return;const c=minimapCtx.canvas;minimapCtx.clearRect(0,0,c.width,c.height);minimapCtx.fillStyle='#0b1321';minimapCtx.fillRect(0,0,c.width,c.height);minimapDots=[];let cx=0,cz=0;if(me){const cc=userCenter(me);cx=cc.x;cz=cc.z;}for(const uid of uids){const center=userCenter(uid);const relX=(center.x-cx)*minimapScale;const relZ=(center.z-cz)*minimapScale;const x=c.width/2+relX;const y=c.height/2+relZ;const self=uid===me;const col=self?'#fde047':'#06b6d4';const size=MINIMAP_DOT_SIZE+(self?1:0);minimapCtx.beginPath();minimapCtx.arc(x,y,size,0,Math.PI*2);minimapCtx.fillStyle=col;minimapCtx.fill();minimapCtx.font='10px Orbitron';minimapCtx.fillStyle='#cbd5e1';const nm=(profiles[uid]?.username)||`Usr ${uid.slice(0,4)}`;minimapCtx.fillText(nm,x+size+3,y+3);minimapDots.push({x,y,uid});}}
+function onMinimapClick(e){const c=minimapCtx.canvas;const r=c.getBoundingClientRect();const x=e.clientX-r.left;const y=e.clientY-r.top;let pick=null,dmin=12;for(let i=minimapDots.length-1;i>=0;i--){const d=Math.hypot(x-minimapDots[i].x,y-minimapDots[i].y);if(d<dmin){dmin=d;pick=minimapDots[i].uid;}}if(pick)window.dispatchEvent(new CustomEvent('teleport',{detail:{uid:pick}}));}

src/ui.js ADDED Viewed

	@@ -0,0 +1,10 @@

+import {gemKeySet, gemKeyGet, appId} from './config.js';
+import {normalizeString, hslFromString} from './utils.js';
+import {callGemini} from './gemini.js';
+import {saveNeuron} from './db.js';
+import {spiralPosition, addNeuronMesh, userCenter} from './scene.js';
+import {getAuthState} from './firebase.js';
+export function initUI(){document.getElementById('level1Slider').addEventListener('input',e=>document.getElementById('level1Value').innerText=e.target.value);document.getElementById('level2Slider').addEventListener('input',e=>document.getElementById('level2Value').innerText=e.target.value);document.getElementById('level3Slider').addEventListener('input',e=>document.getElementById('level3Value').innerText=e.target.value);document.getElementById('saveGeminiKeyBtn').addEventListener('click',()=>{const k=document.getElementById('geminiKeyInput').value.trim();gemKeySet(k);const s=document.getElementById('geminiKeyStatus');s.textContent='Guardada';setTimeout(()=>s.textContent='',1200)});const egk=gemKeyGet();if(egk)document.getElementById('geminiKeyInput').value=egk;}
+export async function handleSeed(){const {userId,username}=getAuthState();const topic=normalizeString(document.getElementById('topicInput').value.trim());if(!topic) return;const n1=parseInt(document.getElementById('level1Slider').value,10);const n2=parseInt(document.getElementById('level2Slider').value,10);const n3=parseInt(document.getElementById('level3Slider').value,10);const btn=document.getElementById('seedBtn');const pbc=document.getElementById('progressBarContainer');const pb=document.getElementById('progressBar');btn.disabled=true;const bak=btn.innerHTML;btn.innerHTML='Analizando...';pbc.style.display='block';pb.style.transition='none';pb.style.width='0%';void pb.offsetWidth;pb.style.transition='width 18s ease-out';pb.style.width='92%';try{const data=await callGemini(topic,n1,n2,n3);const cand=data.candidates?.[0];const text=cand?.content?.parts?.[0]?.text||'{}';const parsed=JSON.parse(text);const lista=parsed.lista_palabras||[];const center=userCenter(userId);const rootCol=hslFromString(topic).color;addNeuronMesh(userId,topic,0,center.clone().add(new THREE.Vector3(0,3.1,0)),rootCol);let baseIndex=0;for(const l1 of lista){const tag1=normalizeString(l1.palabra_principal);const c1=hslFromString(tag1).color;const p1=spiralPosition(userId,baseIndex++);await saveNeuron({appId,userId,username,label:tag1,level:1,position:p1,topic});addNeuronMesh(userId,tag1,1,p1,c1);const variantes=l1.variantes||[];for(const v of variantes){const tag2=normalizeString(v.palabra_variante);const p2=spiralPosition(userId,baseIndex++);await saveNeuron({appId,userId,username,label:tag2,level:2,position:p2,topic});addNeuronMesh(userId,tag2,2,p2,c1);const subs=v.sub_variantes||[];for(const s of subs){const tag3=normalizeString(s);const p3=spiralPosition(userId,baseIndex++);await saveNeuron({appId,userId,username,label:tag3,level:3,position:p3,topic});addNeuronMesh(userId,tag3,3,p3,c1);}}}document.getElementById('topicInput').value='';}catch(e){}finally{btn.disabled=false;btn.innerHTML=bak;pb.style.transition='width .25s ease-in';pb.style.width='100%';setTimeout(()=>{pbc.style.display='none';pb.style.width='0%';},400)}}

src/utils.js ADDED Viewed

	@@ -0,0 +1,4 @@

+export function normalizeString(s){if(!s)return'';return s.normalize('NFD').replace(/[\u0300-\u036f]/g,'');}
+export function hslFromString(s){let h=0;for(let i=0;i<s.length;i++)h=s.charCodeAt(i)+((h<<5)-h);h=Math.abs(h%360);return{h,color:`hsl(${h},80%,60%)`};}
+export function autoUsername(){const a=["Nova","Orion","Lyra","Vela","Aster","Cosmo","Draco","Vasto","Lumen","Aqua","Gaia","Terra","Nix","Aura","Flux","Vox"];const b=a[Math.floor(Math.random()*a.length)];const k=Math.random().toString(36).slice(2,6).toUpperCase();return`${b}-${k}`;}
+export function randomWord(){const r=["eco","vida","bosque","agua","tierra","aire","luz","verde","azul","flora","fauna","clima","ciclo","sol","lunar","salud","campo","rio","mar","cielo"];return r[Math.floor(Math.random()*r.length)];}

styles.css CHANGED Viewed

@@ -1,74 +1 @@
-body {
-  margin: 0;
-  overflow: hidden;
-  background: #020617;
-  font-family: "Orbitron", sans-serif;
-}
-#scene {
-  position: fixed;
-  inset: 0;
-}
-#ui {
-  position: fixed;
-  top: 16px;
-  left: 16px;
-  z-index: 20;
-  width: 320px;
-  background: rgba(15, 23, 42, 0.92);
-  padding: 16px;
-  border-radius: 14px;
-  color: white;
-}
-.ui-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-#username {
-  color: #4ade80;
-  font-size: 0.85rem;
-}
-#logoutBtn {
-  background: #dc2626;
-  border: none;
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-}
-#topicInput {
-  width: 100%;
-  padding: 8px;
-  margin-bottom: 8px;
-  border-radius: 6px;
-  background: #020617;
-  border: 1px solid #334155;
-  color: white;
-}
-#seedBtn {
-  width: 100%;
-  padding: 10px;
-  border-radius: 6px;
-  background: #16a34a;
-  color: white;
-  font-weight: bold;
-  cursor: pointer;
-}
-#minimap {
-  width: 100%;
-  height: 180px;
-  margin-top: 12px;
-  background: #020617;
-  border-radius: 8px;
-  border: 1px solid #334155;
-}


1	+ body{font-family:'Orbitron',sans-serif;margin:0;overflow:hidden;background:radial-gradient(1200px 800px at 70% 10%,#0b1220 0%,#0a0f1a 40%,#070b14 70%,#04080f 100%)}#container{position:fixed;inset:0}canvas{display:block}#ui{position:fixed;top:20px;left:20px;z-index:20;background:rgba(17,24,39,.92);border:1px solid rgba(59,130,246,.18);box-shadow:0 10px 30px rgba(0,0,0,.45);border-radius:16px;width:380px;color:#e5e7eb;display:flex;flex-direction:column;max-height:calc(100vh - 40px)}#hdr{padding:14px 16px;border-bottom:1px solid rgba(59,130,246,.18);display:flex;align-items:center;justify-content:space-between;gap:10px}#title{display:flex;align-items:center;gap:10px;color:#a7f3d0;font-weight:800;letter-spacing:1px}#panel{padding:14px 16px;overflow:auto}#tooltip{position:absolute;display:none;background:rgba(0,0,0,.85);color:#fff;padding:8px 12px;border-radius:8px;z-index:30;pointer-events:none;font-size:13px;border:1px solid rgba(255,255,255,.1)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:linear-gradient(90deg,#374151,#1f2937);border-radius:6px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#22c55e;border-radius:50%;border:2px solid #052e1a;box-shadow:0 0 0 3px rgba(34,197,94,.25);cursor:pointer}#progressBarContainer{width:100%;background:#1f2937;border-radius:6px;overflow:hidden;display:none;height:8px;margin-top:10px;border:1px solid rgba(59,130,246,.18)}#progressBar{width:0;height:8px;background:linear-gradient(90deg,#22c55e,#3b82f6);box-shadow:0 0 12px #22c55e inset}#minimapContainer{width:100%;height:240px;margin-top:12px}#minimap{width:100%;height:100%;background:linear-gradient(180deg,#0d1726,#0b1321);border-radius:10px;border:1px solid rgba(148,163,184,.25);cursor:pointer}.btn{transition:all .2s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}#statusPill{font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(20,184,166,.15);color:#5eead4;border:1px solid rgba(45,212,191,.25)}