🚀 Prompt de Creación

MAPA MENTAL INTERACTIVO DEL UNIVERSO - ESPECIFICACIONES TÉCNICAS

Crea una aplicación web interactiva de mapa mental sobre el universo con las siguientes características:

═══════════════════════════════════════════════════════════════════
1. ARQUITECTURA Y TECNOLOGÍAS
═══════════════════════════════════════════════════════════════════

• HTML5 con Canvas nativo (sin frameworks)
• CSS3 con efectos modernos: glassmorphism, backdrop-filter, gradientes radiales
• JavaScript vanilla para máximo rendimiento
• Dos canvas superpuestos:
  - Canvas de fondo: partículas estelares animadas
  - Canvas principal: mapa mental interactivo

═══════════════════════════════════════════════════════════════════
2. ESTRUCTURA DE DATOS JERÁRQUICA
═══════════════════════════════════════════════════════════════════

Implementar una estructura de árbol con:
• Nodo raíz: "UNIVERSO OBSERVABLE"
• Niveles jerárquicos:
  - Nivel 1: Supercúmulos, Tipos de Galaxias
  - Nivel 2: Grupo Local, Galaxias específicas
  - Nivel 3: Vía Láctea con subestructuras
  - Nivel 4: Sistema Solar
  - Nivel 5: Planetas y lunas individuales
  - Nivel 6: Tipos de estrellas, fenómenos extremos, cúmulos estelares

Cada nodo debe tener:
{
  id: string,
  label: string,
  type: 'galaxy' | 'star' | 'phenomenon' | 'structure' | 'system',
  size: number (20-80),
  info: string (descripción astronómica),
  expanded: boolean,
  children: array
}

═══════════════════════════════════════════════════════════════════
3. SISTEMA DE CÁMARA Y COORDENADAS
═══════════════════════════════════════════════════════════════════

• Sistema de coordenadas mundial (world space) separado de pantalla
• Cámara con propiedades: { x, y, scale, targetScale }
• Transformación: screenX = (worldX - camera.x) * scale + width/2
• Interpolación suave (lerp) para zoom: scale += (targetScale - scale) * 0.1
• Zoom con límites: 0.3 - 3.0

═══════════════════════════════════════════════════════════════════
4. NAVEGACIÓN Y EXPANSIÓN PROGRESIVA
═══════════════════════════════════════════════════════════════════

INICIO:
• Mostrar solo el nodo "UNIVERSO" centrado en (0, 0)
• Cámara centrada en el origen

EXPANSIÓN:
• Doble click en nodo → expandir/colapsar
• Los nodos hijo aparecen en formación circular:
  - Radio: 250 + tamaño del padre
  - Ángulo: (2π / número de hijos) * índice
• Animación de entrada:
  - Iniciar en posición del padre
  - Animar hacia posición objetivo con ease-out cúbico
  - Fade-in de opacidad (0 → 1)
  - Duración: ~1 segundo

COLAPSO:
• Remover recursivamente todos los nodos descendientes
• Eliminar conexiones asociadas
• Mantener nodo padre expandible

═══════════════════════════════════════════════════════════════════
5. FÍSICA Y SIMULACIÓN
═══════════════════════════════════════════════════════════════════

Aplicar fuerzas físicas (opcional, toggleable):

REPULSIÓN entre nodos:
• Si distancia < 200px → aplicar fuerza repulsiva
• Fuerza = (200 - distancia) * 0.03

ATRACCIÓN entre nodos conectados:
• Distancia ideal: 250px
• Fuerza = (distancia - 250) * 0.005

AMORTIGUAMIENTO:
• velocity *= 0.85

GRAVEDAD hacia padre:
• Si hijo se aleja > 400px del padre → atraer de vuelta

═══════════════════════════════════════════════════════════════════
6. ESTILO VISUAL Y RENDERIZADO
═══════════════════════════════════════════════════════════════════

PALETA DE COLORES por tipo:
• galaxy:    { primary: '#ff6b6b', secondary: '#c92a2a' }
• star:      { primary: '#ffd43b', secondary: '#fab005' }
• phenomenon:{ primary: '#a78bfa', secondary: '#7c3aed' }
• structure: { primary: '#4dabf7', secondary: '#1c7ed6' }
• system:    { primary: '#51cf66', secondary: '#2b8a3e' }

RENDERIZADO DE NODOS:
1. Glow exterior (radial gradient, 1.8x tamaño)
2. Cuerpo del nodo (gradiente radial con highlight)
3. Borde de 3px en color primario
4. Pulso animado: size * (1 + sin(time) * 0.08)
5. Indicador +/- para nodos expandibles
6. Label debajo del nodo
7. Sombra en texto para legibilidad

CONEXIONES:
• Líneas con gradiente lineal entre colores de nodos
• Ancho: 2.5px
• Opacidad animada (fade-in)
• Pulsos de energía viajando por la línea
• Color y velocidad según tipo de conexión

PARTÍCULAS DE FONDO:
• 200 partículas flotantes
• Movimiento browniano suave
• Tamaño: 0.5-2.5px
• Opacidad: 0.2-0.7
• Color: rgba(100, 200, 255, opacity)

═══════════════════════════════════════════════════════════════════
7. INTERFAZ DE USUARIO
═══════════════════════════════════════════════════════════════════

CONTROLES (superior izquierda):
• Botón "Reset Vista" → colapsar todo y volver al universo
• Botón "Física: ON/OFF" → toggle simulación física
• Botón "Reorganizar" → layout aleatorio de nodos

BARRA DE BÚSQUEDA (superior centro):
• Input con glassmorphism
• Búsqueda en tiempo real
• Auto-expandir ruta hasta nodo encontrado
• Focus automático en resultado

PANEL DE INFORMACIÓN (derecha):
• Mostrar al hacer click en nodo
• Título, tipo, descripción
• Número de hijos/elementos contenidos
• Instrucción para expandir
• Botón cerrar (×)
• Animación slide-in desde la derecha

BREADCRUMB (superior izquierda):
• Mostrar ruta desde universo hasta nodo actual
• Formato: → → → con indentación
• Resaltar nodo actual en color cyan

LEYENDA (inferior izquierda):
• Círculos de colores con labels
• 5 tipos: Galaxias, Estrellas, Fenómenos, Estructuras, Sistema Solar

TOOLTIP (flotante):
• Seguir cursor al hacer hover
• Mostrar nombre + preview de info
• Indicar si es expandible
• Fade-in/out suave

FOOTER:
• Botón central con gradiente
• Abrir modal con este prompt al hacer click

MODAL:
• Fondo oscuro semi-transparente con blur
• Contenedor con glassmorphism
• Texto del prompt en bloque 
• Botón cerrar (×) superior derecha
• Animación fade-in

═══════════════════════════════════════════════════════════════════
8. INTERACCIONES
═══════════════════════════════════════════════════════════════════

MOUSE:
• Click + drag vacío → mover cámara
• Click + drag nodo → mover nodo específico
• Doble click nodo → expandir/colapsar
• Scroll → zoom in/out
• Hover nodo → mostrar tooltip + cursor pointer

TOUCH (móvil):
• Single tap → seleccionar nodo
• Double tap → expandir/colapsar
• Pinch → zoom
• Drag → mover cámara

═══════════════════════════════════════════════════════════════════
9. RESPONSIVE DESIGN
═══════════════════════════════════════════════════════════════════

@media (max-width: 768px):
• Búsqueda: ancho 100% - 40px
• Panel info: ancho 100% - 40px
• Controles: flex-direction row, wrap
• Leyenda: ancho completo, padding reducido
• Breadcrumb: tamaño de fuente reducido

═══════════════════════════════════════════════════════════════════
10. OPTIMIZACIONES
═══════════════════════════════════════════════════════════════════

• Culling: no renderizar nodos fuera de viewport (+200px margen)
• RequestAnimationFrame para smooth 60fps
• Throttle de eventos de mouse/touch
• Interpolación de animaciones (ease-out cubic)
• Reuso de gradientes cuando sea posible
• Índice espacial para detección de colisiones rápida

═══════════════════════════════════════════════════════════════════
11. CONTENIDO ASTRONÓMICO
═══════════════════════════════════════════════════════════════════

Incluir datos reales:
• Tamaños, distancias, edades
• Clasificaciones científicas
• Datos de misiones espaciales
• Curiosidades astronómicas
• Mínimo 45+ objetos celestes

Categorías obligatorias:
- Universo Observable
- Supercúmulos y cúmulos
- Tipos de galaxias (espirales, elípticas, irregulares)
- Vía Láctea y sus componentes
- Sistema Solar completo (Sol, 8 planetas, lunas principales)
- Tipos de estrellas (enanas, gigantes, etc.)
- Fenómenos extremos (agujeros negros, supernovas, púlsares, cuásares)
- Objetos menores (asteroides, cometas, cinturones)
- Constelaciones

═══════════════════════════════════════════════════════════════════
12. FEATURES AVANZADOS
═══════════════════════════════════════════════════════════════════

• Scroll suave con momentum
• Shadows y glows dinámicos
• Partículas que reaccionan a nodos cercanos
• Conexiones con pulsos de energía animados
• Transiciones de cámara con easing
• Estados de hover con feedback visual
• Animaciones de aparición escalonadas
• Sistema de z-index implícito (renderizar en orden)

═══════════════════════════════════════════════════════════════════
RESULTADO ESPERADO
═══════════════════════════════════════════════════════════════════

Una experiencia inmersiva de exploración del universo donde el usuario:
1. Comienza viendo solo el "UNIVERSO OBSERVABLE"
2. Hace doble click para descubrir qué contiene
3. Navega progresivamente desde lo macro a lo micro
4. Explora desde supercúmulos hasta planetas individuales
5. Aprende sobre el cosmos de forma visual e interactiva
6. Experimenta una interfaz fluida, hermosa y responsiva

El diseño debe romper esquemas tradicionales con:
• Efectos visuales modernos (glassmorphism, glows, particles)
• Navegación intuitiva por expansión progresiva
• Estética espacial auténtica con colores vibrantes
• Rendimiento óptimo (60fps constantes)
• Código limpio y bien estructurado