cronjob de manejo de invitados listo

frontend/src/App.vue

@@ -325,7 +325,7 @@ function openAddUser() {
 }
 function openAddGuest() {
   userFormMode.value = 'guest';
-  userFormModel.value = { username:'', password:'', vlan:'5', disabled:false };
+  userFormModel.value = { username:'', password:'', vlan:'5', disabled:false, etiquetas: ['invitado'] };
   showUserForm.value = true;
 }
 function toggleSettingsMenu() { showSettingsMenu.value = !showSettingsMenu.value; }

frontend/src/components/UserCard.vue

@@ -12,6 +12,9 @@
       <button class="icon-btn" @click="$emit('remove', item)">Eliminar</button>
       <button v-if="expandable" class="icon-btn" @click="$emit('toggleExpand')">{{ expanded ? 'Contraer' : 'Expandir' }}</button>
     </div>
+    <div v-if="item.etiquetas && item.etiquetas.length" class="row" style="gap:6px; margin-top:6px;">
+      <span v-for="tag in item.etiquetas" :key="tag" class="chip">#{{ tag }}</span>
+    </div>
     <div v-if="expanded && deviceList.length" style="margin-top:8px;">
       <div class="grid">
         <DispositivoCard v-for="d in deviceList" :key="d.id" :device="d" :connected="isConnected(d.id)" simple @edit="$emit('editDevice', d)" />

frontend/src/components/UserForm.vue

@@ -10,6 +10,12 @@
         <input v-model="state.password" placeholder="contraseña" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
       </label>
     </div>
+    <div class="row">
+      <label class="toggle" style="flex:1;">
+        <div class="muted" style="font-size:12px;">Etiquetas (separadas por coma)</div>
+        <input v-model="etiquetasText" placeholder="invitado, vip" style="width:100%; background:transparent; border:none; outline:none; color:inherit;" />
+      </label>
+    </div>
     <div class="row">
       <label class="toggle" style="flex:1;">
         <div class="muted" style="font-size:12px;">VLAN</div>
@@ -28,7 +34,7 @@
 </template>
 
 <script setup>
-import { reactive, watch, computed } from 'vue';
+import { reactive, watch, computed, ref } from 'vue';
 
 const props = defineProps({
   modelValue: { type: Object, default: () => ({ username:'', password:'', vlan:'', disabled:false }) },
@@ -38,13 +44,16 @@ const emit = defineEmits(['update:modelValue', 'submit', 'cancel']);
 
 const state = reactive({ username:'', password:'', vlan:'', disabled:false });
 const isEdit = computed(() => props.mode === 'edit');
+const etiquetasText = ref('');
 
 watch(() => props.modelValue, (v) => {
   Object.assign(state, v || {});
+  const tags = Array.isArray(v?.etiquetas) ? v.etiquetas : [];
+  etiquetasText.value = tags.join(', ');
 }, { immediate: true, deep: true });
 
 function submit() {
-  emit('submit', { ...state });
+  const tags = etiquetasText.value.split(',').map(s => s.trim()).filter(Boolean).slice(0, 100);
+  emit('submit', { ...state, etiquetas: tags });
 }
 </script>
-