🌌 Sistema Solar Interactivo

[MODO] Actúo como un diseñador gráfico e interactivo experto, mejorando un mapa mental HTML/CSS/JS (v6.4).

[TAREA] Solucionar la "inestabilidad", el "brinco" al pasar el mouse y el "caos" al arrastrar nodos.

[SUPERPODERES v6.5 - ESTABILIDAD TOTAL]
1.  **SOLUCIÓN AL "BRINCO" (Estabilidad CSS/JS):**
    * Se diagnosticó el conflicto: CSS (`:hover`) aplicaba `transform: scale` mientras JS (`renderNode`) aplicaba `transform: translate`.
    * **Solución:** Se reescribió la lógica.
        * CSS (`.node`): Ya NO usa `transform: translate()`.
        * CSS (`.node:hover`): Usa `transform: scale(1.1)`.
        * JS (`renderNode`): Ahora calcula el centro del nodo manualmente (`data.x - nodeSize.width / 2`) y lo posiciona usando `left` y `top`.
    * **Resultado:** No hay conflicto. El "brinco" desaparece.

2.  **SOLUCIÓN AL "CAOS" (Arrastre de Grupo):**
    * Se diagnosticó el problema: Arrastrar un nodo "padre" no movía a sus "hijos", rompiendo las líneas.
    * **Solución:** Se creó una nueva función recursiva `moveNodeAndChildren(nodeData, dx, dy)`.
    * En el evento `mousemove`, en lugar de mover un solo nodo, se llama a esta función.
    * Calcula el `deltaX` y `deltaY` (cuánto se movió) y aplica ese mismo delta al nodo arrastrado Y a todos sus descendientes (hijos, nietos, etc.).
    * **Resultado:** Arrastrar "Planetas Exteriores" ahora mueve a Júpiter, Saturno y todas sus lunas como un grupo cohesivo.

3.  **LÓGICA DE MEMORIA (Estabilidad de Colapso):**
    * Se mantuvo la lógica de "memoria" (v6.3). Al expandir, los nodos que el usuario arrastró recuerdan su posición personalizada (`child.x`) en lugar de saltar a su órbita original.

4.  **REFINAMIENTO DE INTERACCIÓN:**
    * El `expander` (`+/-`) sigue controlando el colapso.
    * El `dblclick` sigue controlando la info.
    * El `drag` (arrastre) y el `pan` (paneo) coexisten limpiamente.