Refactor: Migrar UI completa a Tailwind CSS v4 + shadcn-vue

- Reemplazar CSS nativo con Tailwind CSS v4 y utilidades custom
- Crear librería de componentes UI basada en shadcn-vue (Radix Vue)
- Componentes UI: Button, Card, Input, Textarea, Badge, Dialog, Avatar, DropdownMenu
- Migrar todos los componentes existentes a Tailwind utilities
- Convertir EventCard.js (htm) a EventCard.vue (SFC)
- Implementar sistema de temas dark/light con clase .dark
- Mantener efectos glassmorphism via @utility custom
- Eliminar styles.css legacy

frontend/src/components/UserForm.vue

@@ -1,40 +1,6 @@
-<template>
-  <form @submit.prevent="submit" class="column" style="gap:10px;">
-    <div class="row">
-      <label class="toggle" style="flex:1;">
-        <div class="muted" style="font-size:12px;">Usuario</div>
-        <input v-model="state.username" :readonly="isEdit" placeholder="usuario" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
-      </label>
-      <label class="toggle" style="flex:1;">
-        <div class="muted" style="font-size:12px;">Contraseña</div>
-        <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>
-        <input v-model="state.vlan" placeholder="VLAN" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
-      </label>
-      <label class="row toggle" style="gap:6px;">
-        <input type="checkbox" v-model="state.disabled"/>
-        Deshabilitado
-      </label>
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="icon-btn" @click="$emit('cancel')">Cancelar</button>
-      <button type="submit" class="icon-btn">Guardar</button>
-    </div>
-  </form>
-</template>
-
 <script setup>
 import { reactive, watch, computed, ref } from 'vue';
+import { Input, Label, Button } from '@/components/ui';
 
 const props = defineProps({
   modelValue: { type: Object, default: () => ({ username:'', password:'', vlan:'', disabled:false }) },
@@ -57,3 +23,52 @@ function submit() {
   emit('submit', { ...state, etiquetas: tags });
 }
 </script>
+
+<template>
+  <form @submit.prevent="submit" class="flex flex-col gap-3">
+    <div class="flex flex-wrap gap-3">
+      <div class="flex-1 min-w-[140px] space-y-1">
+        <Label class="text-xs text-muted">Usuario</Label>
+        <Input
+          v-model="state.username"
+          :readonly="isEdit"
+          placeholder="usuario"
+        />
+      </div>
+      <div class="flex-1 min-w-[140px] space-y-1">
+        <Label class="text-xs text-muted">Contraseña</Label>
+        <Input
+          v-model="state.password"
+          placeholder="contraseña"
+        />
+      </div>
+    </div>
+
+    <div class="space-y-1">
+      <Label class="text-xs text-muted">Etiquetas (separadas por coma)</Label>
+      <Input
+        v-model="etiquetasText"
+        placeholder="invitado, vip"
+      />
+    </div>
+
+    <div class="flex flex-wrap gap-3 items-end">
+      <div class="flex-1 min-w-[100px] space-y-1">
+        <Label class="text-xs text-muted">VLAN</Label>
+        <Input
+          v-model="state.vlan"
+          placeholder="VLAN"
+        />
+      </div>
+      <label class="flex items-center gap-2 glass glass-border rounded-md px-3 py-2 cursor-pointer">
+        <input type="checkbox" v-model="state.disabled" class="accent-pink-500" />
+        <span class="text-sm">Deshabilitado</span>
+      </label>
+    </div>
+
+    <div class="flex justify-end gap-2 mt-2">
+      <Button type="button" variant="ghost" @click="emit('cancel')">Cancelar</Button>
+      <Button type="submit">Guardar</Button>
+    </div>
+  </form>
+</template>