feat(admin): migrar navegación de tabs a cards agrupados

- Implementar sistema de grupos de componentes tipo "carpetas de apps"
- Crear ComponentGroupRegistry para gestionar grupos y componentes
- Añadir vista home con grupos: Header, Contenido, CTAs, Engagement, Forms, Config
- Rediseñar UI con Design System: header navy, cards blancos, mini-cards verticales
- Incluir animaciones fadeInUp escalonadas y efectos hover con glow
- Mantener navegación a vistas de componentes individuales

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Admin/Infrastructure/Ui/Assets/Js/admin-dashboard.js

@@ -10,12 +10,73 @@
      * Inicializa el dashboard cuando el DOM está listo
      */
     document.addEventListener('DOMContentLoaded', function() {
-        initializeTabs();
+        // Nueva navegación por Cards/Grupos
+        initializeCardNavigation();
+
+        // Funcionalidad existente (solo si hay tabs visibles)
+        if (document.querySelector('.nav-tabs-admin')) {
+            initializeTabs();
+        }
+
         initializeFormValidation();
         initializeButtons();
         initializeColorPickers();
     });
 
+    /**
+     * Inicializa la navegación por Cards/Grupos (App-Style)
+     */
+    function initializeCardNavigation() {
+        // Verificar que estamos en el panel correcto
+        const adminPanel = document.querySelector('.roi-admin-panel');
+        if (!adminPanel) {
+            return;
+        }
+
+        // Delegación de eventos para mini-cards
+        document.addEventListener('click', function(e) {
+            const minicard = e.target.closest('.roi-component-minicard');
+            if (minicard) {
+                e.preventDefault();
+                const componentId = minicard.getAttribute('data-component-id');
+                if (componentId) {
+                    navigateToComponent(componentId);
+                }
+            }
+        });
+
+        // Botón volver al home
+        document.addEventListener('click', function(e) {
+            if (e.target.closest('.roi-back-to-home')) {
+                e.preventDefault();
+                navigateToHome();
+            }
+        });
+    }
+
+    /**
+     * Navega a un componente específico
+     *
+     * @param {string} componentId ID del componente en kebab-case
+     */
+    function navigateToComponent(componentId) {
+        const url = new URL(window.location.href);
+        url.searchParams.set('component', componentId);
+        // Eliminar el parámetro admin-tab si existe (legacy)
+        url.searchParams.delete('admin-tab');
+        window.location.href = url.toString();
+    }
+
+    /**
+     * Navega de vuelta al home (vista de grupos)
+     */
+    function navigateToHome() {
+        const url = new URL(window.location.href);
+        url.searchParams.delete('component');
+        url.searchParams.delete('admin-tab');
+        window.location.href = url.toString();
+    }
+
     /**
      * Inicializa el sistema de tabs con persistencia en URL
      */