MOTORES: pastillas configurables y destino (salida o capa)

Las pestanas de capa de la barra superior no valian: mezclaban navegar por el
panel con elegir sobre que se trabaja, y sacaban del panel de directo. Se
quitan y todo pasa a MOTORES, con dos decisiones separadas:

  DONDE  -> fila 'Donde se ve': SALIDA o una capa del mapping (+ crea una).
  QUE    -> las pastillas: combinaciones guardadas por el usuario.

Pinchar una pastilla la manda al destino elegido: con SALIDA cambia el motor
global, con una capa cambia SOLO esa capa y el resto sigue igual. Con una capa
elegida sus ajustes salen en MOTORES (la tarjeta de propiedades se mueve, no
se duplica: dos formularios para lo mismo se desincronizan a la primera).

Las pastillas son configurables: motor + preset + ajustes y su nombre, con
'Configurar pastillas'. Persisten en data/slots.json (gitignorado, es de cada
instalacion). De fabrica vienen los cinco motores de siempre, asi que quien
actualice se encuentra lo mismo que tenia. Hydra, Mezcla y projectM nativo
solo pueden ir a la salida, y al intentar mandarlos a una capa se dice.

Comprobado en Chromium por CDP, no con --dump-dom: ese fotografia el DOM al
cargar, antes de que llegue el estado por socket, y daba falsos "esta vacio".
Verificado que disparar sobre una capa deja el motor global intacto, que la
tarjeta de propiedades va y vuelve de su sitio, y que las pastillas nuevas se
guardan en disco.

De paso, dos fallos que aparecieron al probarlo:
- Restaurar la vista guardada corria al principio del fichero y llamaba a
  codigo que usa variables declaradas con let mas abajo: ReferenceError que
  se llevaba por delante el resto del script (socket incluido) y dejaba el
  panel en blanco. Ahora se restaura al final.
- #card-destino no estaba en la lista de 'order' del CSS, asi que caia a 0 y
  se colaba encima de las pastillas pese a ir despues en el HTML.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

data/ayuda.json

@@ -23,11 +23,13 @@
       ]
     },
     "engines": {
-      "title": "Motor de visuales",
+      "title": "Pastillas",
       "body": [
-        "FOSFENO tiene cinco motores de visuales distintos. Solo uno funciona a la vez.",
-        "Cada boton redondo cambia al motor correspondiente. Al cambiar de motor aparecen debajo sus propios controles.",
-        "Pulsa el boton de informacion de cada motor para saber que hace, que necesita y como se configura."
+        "Cada circulo es una PASTILLA: una combinacion tuya guardada (motor + preset + ajustes) con el nombre que le pongas.",
+        "Al pincharla, salta al DESTINO que tengas elegido abajo: la salida entera o una capa concreta del mapping. No cambia nada mas.",
+        "Con 'Configurar pastillas' el toque deja de lanzar y pasa a editar: eliges que hace cada una, le pones nombre, anades con el '+' o la borras. Se guardan en el equipo.",
+        "De fabrica vienen los cinco motores de siempre (projectM, Butter, Hydra, Shaders, Mezcla), asi que puedes seguir usandolo como antes y montarte las tuyas cuando quieras.",
+        "Hydra, Mezcla y projectM nativo solo pueden ir a pantalla completa: son motores globales, no fuentes que una capa sepa pintar."
       ]
     },
     "projectm": {
@@ -134,6 +136,15 @@
         "projectM no puede ir en una capa: es un programa nativo que corre en su propia ventana, fuera del navegador. Para el mismo tipo de visual, usa 'Visuales MilkDrop propias', que son los mismos presets.",
         "Ojo con la Raspberry: cada capa de MilkDrop o de shader es un motor de verdad funcionando. Dos o tres van bien; con muchas mas la cosa se arrastra. Los clips y la camara son mucho mas baratos."
       ]
+    },
+    "destino": {
+      "title": "Donde se ve",
+      "body": [
+        "Aqui eliges a donde van las pastillas que dispares.",
+        "SALIDA es el proyector entero. Cada CAPA es una zona del mapping.",
+        "Con una capa elegida, debajo salen sus ajustes (fuente, preset, opacidad, mezcla) sin tener que ir a la pestana MAPPING.",
+        "El '+' crea una capa nueva y te deja ya sobre ella. Para colocarla y deformarla sobre la superficie fisica, ve a MAPPING."
+      ]
     }
   }
-}
+}