Add modular group verification system with frontend and backend checks

This commit implements a comprehensive, reusable group verification system:

Components:
- GroupCheckButton: Base component for group verification
- 7 specialized buttons: 3 real groups (authentik Admins, grupo-prueba, lvl0), 1 public access test, 2 system verification buttons
- All buttons support both frontend and backend verification modes

Backend:
- New API endpoint /api/auth/check-group for server-side group validation
- Reads Authentik headers and validates group membership

Frontend:
- Enhanced useAuthentik composable with hasGroup() and checkGroupBackend() methods
- Toast notifications for all verification results
- Smooth animations and color-coded visual feedback

UI Improvements:
- Organized layout with cards for different verification types
- Grid layout for group buttons
- Professional styling with hover effects and shadows
- Clear visual distinction between frontend/backend checks

nuxt4/app/app.vue

@@ -22,6 +22,9 @@
 
             <!-- Botones de acción individuales -->
             <UCard class="w-full">
+              <template #header>
+                <h3 class="text-lg font-semibold">Acciones de Sesión</h3>
+              </template>
               <div class="flex flex-wrap gap-3">
                 <AuthSessionStatusButton />
                 <AuthProfileButton />
@@ -29,12 +32,58 @@
                 <AuthLoginButton />
               </div>
             </UCard>
+
+            <!-- Verificaciones Frontend/Backend -->
+            <UCard class="w-full">
+              <template #header>
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-heroicons-cpu-chip" class="w-5 h-5" />
+                  <h3 class="text-lg font-semibold">Verificación de Sistema</h3>
+                </div>
+              </template>
+              <div class="flex flex-wrap gap-3">
+                <AuthFrontendVerificationButton />
+                <AuthBackendVerificationButton />
+              </div>
+            </UCard>
           </div>
 
           <!-- Columna derecha -->
           <div class="space-y-6">
             <!-- Metadatos completos -->
             <AuthUserMetadata />
+
+            <!-- Verificaciones de Grupos Frontend -->
+            <UCard class="w-full">
+              <template #header>
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-heroicons-user-group" class="w-5 h-5 text-purple-500" />
+                  <h3 class="text-lg font-semibold">Grupos (Frontend)</h3>
+                </div>
+              </template>
+              <div class="grid grid-cols-2 gap-3">
+                <AuthCheckAuthentikAdminsButton />
+                <AuthCheckGrupoPruebaButton />
+                <AuthCheckLvl0Button />
+                <AuthCheckPublicAccessButton />
+              </div>
+            </UCard>
+
+            <!-- Verificaciones de Grupos Backend -->
+            <UCard class="w-full">
+              <template #header>
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-heroicons-server-stack" class="w-5 h-5 text-orange-500" />
+                  <h3 class="text-lg font-semibold">Grupos (Backend)</h3>
+                </div>
+              </template>
+              <div class="grid grid-cols-2 gap-3">
+                <AuthCheckAuthentikAdminsButton :verify-backend="true" />
+                <AuthCheckGrupoPruebaButton :verify-backend="true" />
+                <AuthCheckLvl0Button :verify-backend="true" />
+                <AuthCheckPublicAccessButton :verify-backend="true" />
+              </div>
+            </UCard>
           </div>
         </div>