Temas Visuales y HTMX

El frontend del CRM ha abandonado por completo arquitecturas de tipo Single Page Application (React/Vue/Angular) pesadas a favor de la pila HTMX + Alpine.js + TailwindCSS. Esta decisión nos otorga la velocidad de una SPA con la robustez y seguridad de las aplicaciones renderizadas en el servidor.

Renderizado con HTMXCopy Anchor Link

Todos los enlaces y envíos de formularios utilizan atributos hx-*.

• Navegación: Al hacer clic en un enlace del menú, HTMX pide al servidor el fragmento de HTML correspondiente (vista parcial) y lo inyecta directamente en el contenedor #main-content, sin recargar la página completa.
• Pila de Historial: Al usar hx-push-url="true", la URL de la barra del navegador cambia dinámicamente y se integra con los botones de "Atrás/Adelante" del navegador de forma nativa.

Reglas para Componentes HTMXCopy Anchor Link

1. Ningún formulario de acción debe recargar la web de forma clásica. Todos deben enviarse usando hx-post apuntando a modules/*/actions/*.php.
2. Las respuestas del backend deben ser o bien un nuevo nodo de DOM HTML, o triggers de eventos HTMX (ej. cabecera HX-Trigger: showToast).

Theme Runtime v2Copy Anchor Link

El CRM soporta la inyección dinámica de variables de entorno para CSS (Temas Claro, Oscuro, y sub-variantes Enterprise o Brutalistas).

FuncionamientoCopy Anchor Link

1. Un componente Alpine.js a nivel de <body> controla el estado visual (Theme activo).
2. Las clases CSS nunca usan colores absolutos fijos de Tailwind (ej. bg-red-500), sino variables CSS de Tailwind extendidas (ej. bg-[var(--fgx-red)]).
3. El cambio de tema solo altera las variables --fgx-* a nivel de :root en tiempo de ejecución. Esto garantiza un redibujado instantáneo del navegador sin latencia de red ni reflows costosos.