ProjectListView: mejorar visibilidad gestor de equipo + buscador en dialog

- Sección "Equipo" con label visible y botón "Gestionar equipo" en la card
- Team dialog ahora incluye buscador (filtro por nombre, email, rol, célula)
- Lista filtrada en vivo + contador de seleccionados
- Avatar show hasta 5 miembros (+N badge)

src/i18n/locales/en.json

@@ -142,7 +142,8 @@
     "manageTeam": "Manage team",
     "selectTeamMembers": "Select team members for this project",
     "noTeamMembers": "No team assigned",
-    "moreMembers": "+{count} more"
+    "moreMembers": "+{count} more",
+    "selectedCount": "selected"
   },
   "users": {
     "teamTitle": "Team",

src/i18n/locales/es.json

@@ -142,7 +142,8 @@
     "manageTeam": "Gestionar equipo",
     "selectTeamMembers": "Seleccioná los miembros del equipo para este proyecto",
     "noTeamMembers": "Sin equipo asignado",
-    "moreMembers": "+{count} más"
+    "moreMembers": "+{count} más",
+    "selectedCount": "seleccionados"
   },
   "users": {
     "teamTitle": "Equipo",

src/views/ProjectListView.vue

@@ -4,7 +4,7 @@ import { useI18n } from "vue-i18n"
 import { useProjectsStore } from "@/stores/projects"
 import { useUsersStore, type AlphaUser } from "@/stores/users"
 import { storage } from "@/services/storage"
-import { IconFolder, IconExclamationCircle, IconUsers, IconUserPlus, IconX } from "@tabler/icons-vue"
+import { IconFolder, IconExclamationCircle, IconUsers, IconUserPlus, IconX, IconSearch } from "@tabler/icons-vue"
 import {
   Card,
   CardHeader,
@@ -57,6 +57,18 @@ const teamByProject = ref<Map<number, number[]>>(new Map())
 const teamDialogProjectId = ref<number | null>(null)
 const teamDialogOpen = ref(false)
 const pendingTeam = ref<Set<number>>(new Set())
+const teamSearch = ref('')
+
+const filteredUsers = computed(() => {
+  const q = teamSearch.value.toLowerCase().trim()
+  if (!q) return usersStore.activeUsers
+  return usersStore.activeUsers.filter(u =>
+    (u.full_name || '').toLowerCase().includes(q) ||
+    (u.email || '').toLowerCase().includes(q) ||
+    (u.role || '').toLowerCase().includes(q) ||
+    (u.cell || '').toLowerCase().includes(q)
+  )
+})
 
 const storageKey = (projectId: number) => `project_team_${projectId}`
 
@@ -238,10 +250,24 @@ onMounted(async () => {
           </div>
 
           <!-- Team Members -->
-          <div class="flex items-center gap-2 pt-3">
+          <div class="pt-3 border-t">
+            <div class="flex items-center justify-between gap-2">
+              <div class="flex items-center gap-1.5 min-w-0">
                 <IconUsers class="size-3.5 text-muted-foreground shrink-0" />
-            <div class="flex items-center -space-x-1.5">
+                <span class="text-xs text-muted-foreground font-medium">{{ t('projects.teamMembers') }}</span>
-              <template v-for="member in getTeamMembers(p.id).slice(0, 4)" :key="member.id">
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                class="h-6 text-xs gap-1 px-2 shrink-0"
+                @click.stop="openTeamDialog(p.id)"
+              >
+                <IconUserPlus class="size-3" />
+                {{ t('projects.manageTeam') }}
+              </Button>
+            </div>
+            <div v-if="getTeamMembers(p.id).length > 0" class="flex items-center gap-1.5 pt-1.5 flex-wrap">
+              <template v-for="member in getTeamMembers(p.id).slice(0, 5)" :key="member.id">
                 <Tooltip>
                   <TooltipTrigger as-child>
                     <Avatar class="size-6 border-2 border-background">
@@ -256,24 +282,17 @@ onMounted(async () => {
                 </Tooltip>
               </template>
               <button
-                v-if="getTeamMembers(p.id).length > 4"
+                v-if="getTeamMembers(p.id).length > 5"
                 class="size-6 rounded-full bg-muted text-[10px] text-muted-foreground flex items-center justify-center border-2 border-background hover:bg-muted/80 transition-colors"
-                :title="t('projects.moreMembers', { count: getTeamMembers(p.id).length - 4 })"
+                :title="t('projects.moreMembers', { count: getTeamMembers(p.id).length - 5 })"
                 @click.stop="openTeamDialog(p.id)"
               >
-                +{{ getTeamMembers(p.id).length - 4 }}
+                +{{ getTeamMembers(p.id).length - 5 }}
               </button>
             </div>
-            <button
+            <div v-else class="pt-1.5">
-              class="size-6 rounded-full bg-muted/50 text-muted-foreground flex items-center justify-center hover:bg-muted transition-colors"
+              <span class="text-xs text-muted-foreground italic">{{ t('projects.noTeamMembers') }}</span>
-              :title="t('projects.manageTeam')"
+            </div>
-              @click.stop="openTeamDialog(p.id)"
-            >
-              <IconUserPlus class="size-3.5" />
-            </button>
-            <span v-if="getTeamMembers(p.id).length === 0" class="text-xs text-muted-foreground">
-              {{ t('projects.noTeamMembers') }}
-            </span>
           </div>
         </CardHeader>
       </Card>
@@ -295,17 +314,27 @@ onMounted(async () => {
 
   <!-- Team Members Modal -->
   <Dialog v-model:open="teamDialogOpen">
-    <DialogContent class="sm:max-w-[450px] max-h-[80vh] flex flex-col">
+    <DialogContent class="sm:max-w-[480px] max-h-[80vh] flex flex-col">
       <DialogHeader>
         <DialogTitle>{{ t('projects.manageTeam') }}</DialogTitle>
         <DialogDescription>{{ t('projects.selectTeamMembers') }}</DialogDescription>
       </DialogHeader>
-      <div class="flex-1 overflow-y-auto space-y-1 py-2">
+      <!-- Search -->
+      <div class="relative">
+        <IconSearch class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+        <input
+          v-model="teamSearch"
+          :placeholder="t('siteHeader.search')"
+          class="w-full h-9 rounded-md border border-input bg-background pl-9 pr-3 text-sm outline-none focus:border-ring focus:ring-1 focus:ring-ring transition-colors"
+        />
+      </div>
+      <!-- Users list -->
+      <div class="flex-1 overflow-y-auto space-y-0.5 py-2">
         <button
-          v-for="u in usersStore.activeUsers"
+          v-for="u in filteredUsers"
           :key="u.id"
           class="w-full flex items-center gap-3 rounded-md px-3 py-2 text-left text-sm hover:bg-muted transition-colors"
-          :class="pendingTeam.has(u.id) ? 'bg-muted/60' : ''"
+          :class="pendingTeam.has(u.id) ? 'bg-accent' : ''"
           @click="toggleTeamMember(u.id)"
         >
           <Avatar class="size-7">
@@ -316,28 +345,34 @@ onMounted(async () => {
           <div class="flex-1 min-w-0">
             <div class="font-medium truncate">{{ u.full_name || u.email }}</div>
             <div class="text-xs text-muted-foreground truncate">
-              {{ u.role || u.cell || '' }}
+              {{ [u.role, u.cell].filter(Boolean).join(' · ') }}
             </div>
           </div>
           <div
-            class="size-4 rounded border flex items-center justify-center shrink-0 transition-colors"
+            class="size-4.5 rounded border flex items-center justify-center shrink-0 transition-colors"
             :class="pendingTeam.has(u.id) ? 'bg-primary border-primary' : 'border-input'"
           >
             <IconX v-if="pendingTeam.has(u.id)" class="size-3 text-primary-foreground" />
           </div>
         </button>
-        <div v-if="usersStore.activeUsers.length === 0" class="py-8 text-center text-sm text-muted-foreground">
+        <div v-if="filteredUsers.length === 0" class="py-8 text-center text-sm text-muted-foreground">
-          {{ t('users.emptyTitle') }}
+          {{ teamSearch ? t('siteHeader.noResults') : t('users.emptyTitle') }}
         </div>
       </div>
-      <div class="flex justify-end gap-2 pt-3 border-t">
+      <!-- Footer -->
-        <Button variant="outline" @click="teamDialogOpen = false">
+      <div class="flex items-center justify-between pt-3 border-t">
+        <span class="text-xs text-muted-foreground">
+          {{ pendingTeam.size }} {{ t('projects.selectedCount') }}
+        </span>
+        <div class="flex gap-2">
+          <Button variant="outline" size="sm" @click="teamDialogOpen = false">
             {{ t('common.cancel') }}
           </Button>
-        <Button @click="saveTeam">
+          <Button size="sm" @click="saveTeam">
             {{ t('common.save') }}
           </Button>
         </div>
+      </div>
     </DialogContent>
   </Dialog>
 </template>