Reemplazar selector de status por chip discreto indicativo

- Quitar botones de selección de estado de presencia
- Agregar chip compacto y discreto al lado del email
- El chip solo muestra el estado actual (no permite cambiarlo)
- El estado se manejará dinámicamente desde el backend
- Por defecto el estado es 'disponible' (online)
- Actualizar estilos para modo claro y oscuro

nuxt4/app/components/UserHeader.vue

@@ -21,21 +21,16 @@
             <UIcon name="i-heroicons-pencil-square" class="w-4 h-4" />
           </button>
         </div>
-        <p class="user-email">{{ user?.email }}</p>
+        <div class="user-email-row">
+          <p class="user-email">{{ user?.email }}</p>
 
-        <!-- Selector de estado de presencia -->
-        <div class="presence-selector">
-          <button
-            v-for="option in presenceOptions"
-            :key="option.value"
-            :class="['presence-option', { active: presenceStatus === option.value }]"
-            @click="setPresenceStatus(option.value as any)"
-            :title="option.label"
-          >
-            <UIcon :name="option.icon" class="w-3.5 h-3.5" />
-            <span class="presence-label">{{ option.label }}</span>
-          </button>
+          <!-- Chip de estado (solo indicativo) -->
+          <span class="presence-chip" :title="currentPresenceLabel">
+            <UIcon :name="currentPresenceIcon" class="w-3 h-3" />
+            <span class="presence-chip-label">{{ currentPresenceLabel }}</span>
+          </span>
         </div>
+
         <div class="user-badges">
           <span
             v-for="group in user?.groups.slice(0, 3)"
@@ -67,7 +62,7 @@
 <script setup lang="ts">
 const { user } = useAuthentik()
 const { isNight, toggleTheme } = useTheme()
-const { status: presenceStatus, setStatus: setPresenceStatus, initActivityListeners } = usePresence()
+const { status: presenceStatus, initActivityListeners } = usePresence()
 
 // Emits
 defineEmits(['edit-profile'])
@@ -77,13 +72,17 @@ onMounted(() => {
   initActivityListeners()
 })
 
-// Estados disponibles para el selector
-const presenceOptions = [
-  { value: 'online', label: 'Disponible', icon: 'i-heroicons-check-circle' },
-  { value: 'away', label: 'Ausente', icon: 'i-heroicons-clock' },
-  { value: 'busy', label: 'Ocupado', icon: 'i-heroicons-minus-circle' },
-  { value: 'offline', label: 'Desconectado', icon: 'i-heroicons-x-circle' }
-]
+// Mapeo de estados (solo para mostrar, no para cambiar)
+const presenceMap = {
+  online: { label: 'Disponible', icon: 'i-heroicons-check-circle' },
+  away: { label: 'Ausente', icon: 'i-heroicons-clock' },
+  busy: { label: 'Ocupado', icon: 'i-heroicons-minus-circle' },
+  offline: { label: 'Desconectado', icon: 'i-heroicons-x-circle' }
+}
+
+// Estado actual (computed)
+const currentPresenceLabel = computed(() => presenceMap[presenceStatus.value]?.label || 'Disponible')
+const currentPresenceIcon = computed(() => presenceMap[presenceStatus.value]?.icon || 'i-heroicons-check-circle')
 </script>
 
 <style scoped>
@@ -130,50 +129,36 @@ const presenceOptions = [
   transition: color 0.3s ease;
 }
 
+.user-email-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.25rem 0 0.75rem 0;
+}
+
 .user-email {
   font-size: 0.875rem;
   color: var(--color-gray-600);
-  margin: 0.25rem 0 0.5rem 0;
+  margin: 0;
 }
 
-.presence-selector {
-  display: flex;
-  gap: 0.375rem;
-  margin-bottom: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.presence-option {
-  display: flex;
+/* Chip de presencia discreto */
+.presence-chip {
+  display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.625rem;
-  font-size: 0.75rem;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.6875rem;
   font-weight: 500;
   border-radius: 0.5rem;
-  background: rgba(255, 255, 255, 0.3);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(0, 0, 0, 0.06);
   color: var(--color-gray-600);
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s ease;
 }
 
-.presence-option:hover {
-  background: rgba(255, 255, 255, 0.5);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.presence-option.active {
-  background: rgba(var(--color-primary-500), 0.2);
-  border-color: rgba(var(--color-primary-500), 0.4);
-  color: rgb(var(--color-primary-600));
-  font-weight: 600;
-  box-shadow: 0 2px 8px rgba(var(--color-primary-500), 0.2);
-}
-
-.presence-label {
+.presence-chip-label {
   white-space: nowrap;
 }
 
@@ -374,21 +359,9 @@ const presenceOptions = [
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
 }
 
-.dark .presence-option {
+.dark .presence-chip {
   background: rgba(255, 255, 255, 0.05) !important;
-  border-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.08) !important;
   color: var(--color-gray-400) !important;
 }
-
-.dark .presence-option:hover {
-  background: rgba(255, 255, 255, 0.1) !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
-}
-
-.dark .presence-option.active {
-  background: rgba(var(--color-primary-500), 0.3) !important;
-  border-color: rgba(var(--color-primary-500), 0.5) !important;
-  color: rgb(var(--color-primary-400)) !important;
-  box-shadow: 0 2px 8px rgba(var(--color-primary-500), 0.4) !important;
-}
 </style>