From bf4fdd6db04cc939f97d8c6502990280174d316b Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Wed, 20 May 2026 09:52:40 -0500
Subject: [PATCH] feat(vcard-api): tabla VCards completa + modal edicion con
 redes y apariencia
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tabla VCards: añade columnas cargo, URL (enlace unico), borrador badge, pais/ciudad, fecha
- Modal Editar VCard ahora tiene 3 tabs: Datos, Redes Sociales, Apariencia
- Datos: todos los campos existentes + indicativos tel/whatsapp, foto_perfil, logo, boton
- Redes: linkedin, twitter, facebook, instagram, tiktok, github, behance,
  youtube, youtube_channel, telegram, messenger, wechat, signal, line
- Apariencia: colores (cabecera, fondo, cuerpo, iconos, info) con color picker,
  fuente, bordes, estilo_vcard, orden_iconos, animacion
- JS: editVcardForm y openEditVcardModal actualizados con todos los campos

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 resources/views/vcard_api.html | 390 +++++++++++++++++++++++++--------
 1 file changed, 293 insertions(+), 97 deletions(-)

diff --git a/resources/views/vcard_api.html b/resources/views/vcard_api.html
index 319a851..ffa420b 100644
--- a/resources/views/vcard_api.html
+++ b/resources/views/vcard_api.html
@@ -126,30 +126,55 @@
                 <table class="table-auto w-full text-sm" x-show="items.length > 0">
                     <thead class="border-b border-gray-200 text-left text-xs font-semibold text-gray-500 uppercase">
                         <tr>
-                            <th class="py-2 px-3">Nombre</th>
+                            <th class="py-2 px-3">Nombre / Cargo</th>
                             <th class="py-2 px-3">Usuario</th>
                             <th class="py-2 px-3">Empresa</th>
                             <th class="py-2 px-3">Email</th>
+                            <th class="py-2 px-3">URL</th>
                             <th class="py-2 px-3">Estado</th>
+                            <th class="py-2 px-3">Borrador</th>
                             <th class="py-2 px-3">Privacidad</th>
+                            <th class="py-2 px-3">País / Ciudad</th>
+                            <th class="py-2 px-3">Creada</th>
                             <th class="py-2 px-3 text-right">Acciones</th>
                         </tr>
                     </thead>
                     <tbody>
                         <template x-for="v in items" :key="v.id || v._id">
                             <tr class="hover:bg-gray-50 border-b border-gray-100">
-                                <td class="py-2 px-3 font-medium" x-text="v.nombre || '—'"></td>
-                                <td class="py-2 px-3 text-xs text-gray-500" x-text="(v.user && v.user.email) ? v.user.email : (v.user_id || '—')"></td>
-                                <td class="py-2 px-3 text-gray-500" x-text="v.empresa || '—'"></td>
-                                <td class="py-2 px-3 text-gray-500" x-text="v.email || '—'"></td>
+                                <td class="py-2 px-3">
+                                    <div class="font-medium" x-text="v.nombre || '—'"></div>
+                                    <div class="text-xs text-gray-400" x-text="v.cargo || ''"></div>
+                                </td>
+                                <td class="py-2 px-3 text-xs text-gray-500">
+                                    <div x-text="(v.user && v.user.name) ? v.user.name : '—'"></div>
+                                    <div class="text-gray-400" x-text="(v.user && v.user.email) ? v.user.email : (v.user_id || '')"></div>
+                                </td>
+                                <td class="py-2 px-3 text-gray-500 text-xs" x-text="v.empresa || '—'"></td>
+                                <td class="py-2 px-3 text-gray-500 text-xs" x-text="v.email || '—'"></td>
+                                <td class="py-2 px-3 text-xs">
+                                    <a :href="v.url || ('https://vcard.u-site.app/' + v.unico)" target="_blank"
+                                        x-show="v.unico || v.url"
+                                        class="text-blue-500 hover:underline font-mono" x-text="v.unico || '—'"></a>
+                                    <span x-show="!v.unico && !v.url" class="text-gray-400">—</span>
+                                </td>
                                 <td class="py-2 px-3">
                                     <span :class="v.estado ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
                                         class="text-xs px-2 py-0.5 rounded-full" x-text="v.estado ? 'Activa' : 'Inactiva'"></span>
                                 </td>
+                                <td class="py-2 px-3">
+                                    <span x-show="v.es_borrador" class="text-xs px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-700">Borrador</span>
+                                    <span x-show="!v.es_borrador" class="text-xs text-gray-300">—</span>
+                                </td>
                                 <td class="py-2 px-3">
                                     <span :class="v.privacidad === 'publica' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'"
                                         class="text-xs px-2 py-0.5 rounded-full" x-text="v.privacidad || '—'"></span>
                                 </td>
+                                <td class="py-2 px-3 text-xs text-gray-500">
+                                    <div x-text="v.pais || '—'"></div>
+                                    <div class="text-gray-400" x-text="v.ciudad || ''"></div>
+                                </td>
+                                <td class="py-2 px-3 text-xs text-gray-400" x-text="v.created_at ? v.created_at.substring(0,10) : '—'"></td>
                                 <td class="py-2 px-3 text-right">
                                     <button @click="openEditVcardModal(v)"
                                         class="text-gray-600 hover:text-gray-800 text-xs px-2 py-1 border border-gray-300 rounded">Editar</button>
@@ -753,90 +778,217 @@
 
     <!-- ─── Modal: Editar VCard ───────────────────────────────────────────── -->
     <div x-show="editVcardModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" style="display:none">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
-            <div class="flex justify-between items-center p-5 border-b sticky top-0 bg-white z-10">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col">
+            <div class="flex justify-between items-center p-5 border-b shrink-0">
                 <div>
                     <h2 class="text-lg font-semibold">Editar VCard</h2>
                     <p class="text-xs text-gray-500 mt-0.5" x-text="editVcardData ? (editVcardData.nombre || '') : ''"></p>
                 </div>
                 <button @click="editVcardModal = false" class="text-gray-400 hover:text-gray-600 text-xl">✕</button>
             </div>
-            <div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Nombre</label>
-                    <input x-model="editVcardForm.nombre" type="text"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Cargo</label>
-                    <input x-model="editVcardForm.cargo" type="text"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div class="sm:col-span-2">
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Descripción</label>
-                    <textarea x-model="editVcardForm.descripcion" rows="2"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]"></textarea>
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Teléfono</label>
-                    <input x-model="editVcardForm.telefono" type="text"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">WhatsApp</label>
-                    <input x-model="editVcardForm.whatsapp" type="text"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Email</label>
-                    <input x-model="editVcardForm.email" type="email"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Empresa</label>
-                    <input x-model="editVcardForm.empresa" type="text"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div class="sm:col-span-2">
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Dirección</label>
-                    <input x-model="editVcardForm.direccion" type="text"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Website</label>
-                    <input x-model="editVcardForm.website" type="url"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">País</label>
-                    <input x-model="editVcardForm.pais" type="text"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Ciudad</label>
-                    <input x-model="editVcardForm.ciudad" type="text"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
-                </div>
-                <div>
-                    <label class="block text-xs font-medium text-gray-700 mb-1">Privacidad</label>
-                    <select x-model="editVcardForm.privacidad"
-                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
-                        <option value="publica">Pública</option>
-                        <option value="privada">Privada</option>
-                    </select>
-                </div>
-                <div class="flex items-center gap-4 sm:col-span-2">
-                    <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
-                        <input x-model="editVcardForm.estado" type="checkbox" class="rounded" /> Activa
-                    </label>
-                    <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
-                        <input x-model="editVcardForm.es_borrador" type="checkbox" class="rounded" /> Borrador
-                    </label>
-                </div>
-                <div x-show="editVcardError" class="sm:col-span-2 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-600" x-text="editVcardError"></div>
-                <div x-show="editVcardSuccess" class="sm:col-span-2 p-3 bg-green-50 border border-green-200 rounded text-sm text-green-700">✓ VCard actualizada correctamente.</div>
+            <!-- Tabs del modal -->
+            <div class="border-b px-5 flex gap-1 shrink-0 overflow-x-auto">
+                <template x-for="vt in ['datos','redes','apariencia']" :key="vt">
+                    <button @click="editVcardTab = vt"
+                        :class="editVcardTab === vt ? 'border-b-2 border-[#8eb02f] text-[#6d8c24] font-semibold' : 'text-gray-500 hover:text-gray-700'"
+                        class="text-xs py-2 px-3 whitespace-nowrap capitalize" x-text="vt.charAt(0).toUpperCase()+vt.slice(1)"></button>
+                </template>
             </div>
-            <div class="flex justify-end gap-3 px-5 pb-5">
+            <div class="overflow-y-auto flex-1 p-5">
+                <!-- Tab Datos -->
+                <div x-show="editVcardTab === 'datos'" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Nombre</label>
+                        <input x-model="editVcardForm.nombre" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Cargo</label>
+                        <input x-model="editVcardForm.cargo" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div class="sm:col-span-2">
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Descripción</label>
+                        <textarea x-model="editVcardForm.descripcion" rows="2" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Teléfono</label>
+                        <div class="flex gap-1">
+                            <input x-model="editVcardForm.consecutivo_telefono" type="text" placeholder="+57" class="w-16 border border-gray-300 rounded-lg px-2 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                            <input x-model="editVcardForm.telefono" type="text" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">WhatsApp</label>
+                        <div class="flex gap-1">
+                            <input x-model="editVcardForm.consecutivo_whatsapp" type="text" placeholder="+57" class="w-16 border border-gray-300 rounded-lg px-2 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                            <input x-model="editVcardForm.whatsapp" type="text" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Email</label>
+                        <input x-model="editVcardForm.email" type="email" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Empresa</label>
+                        <input x-model="editVcardForm.empresa" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div class="sm:col-span-2">
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Dirección</label>
+                        <input x-model="editVcardForm.direccion" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Website</label>
+                        <input x-model="editVcardForm.website" type="url" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">País</label>
+                        <input x-model="editVcardForm.pais" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Ciudad</label>
+                        <input x-model="editVcardForm.ciudad" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Foto perfil (URL)</label>
+                        <input x-model="editVcardForm.foto_perfil" type="url" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Logo (URL)</label>
+                        <input x-model="editVcardForm.logo" type="url" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Privacidad</label>
+                        <select x-model="editVcardForm.privacidad" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                            <option value="publica">Pública</option>
+                            <option value="privada">Privada</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Texto botón</label>
+                        <input x-model="editVcardForm.boton" type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                    <div class="flex items-center gap-4 sm:col-span-2 pt-1">
+                        <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
+                            <input x-model="editVcardForm.estado" type="checkbox" class="rounded" /> Activa
+                        </label>
+                        <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
+                            <input x-model="editVcardForm.es_borrador" type="checkbox" class="rounded" /> Borrador
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Tab Redes Sociales -->
+                <div x-show="editVcardTab === 'redes'" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <template x-for="red in [
+                        {key:'linkedin',    label:'LinkedIn'},
+                        {key:'twitter',     label:'Twitter / X'},
+                        {key:'facebook',    label:'Facebook'},
+                        {key:'instagram',   label:'Instagram'},
+                        {key:'tiktok',      label:'TikTok'},
+                        {key:'github',      label:'GitHub'},
+                        {key:'behance',     label:'Behance'},
+                        {key:'youtube',     label:'YouTube'},
+                        {key:'youtube_channel', label:'Canal YouTube'},
+                        {key:'telegram',    label:'Telegram'},
+                        {key:'messenger',   label:'Messenger'},
+                        {key:'wechat',      label:'WeChat'},
+                        {key:'signal',      label:'Signal'},
+                        {key:'line',        label:'Line'}
+                    ]" :key="red.key">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-700 mb-1" x-text="red.label"></label>
+                            <div class="flex gap-1" x-show="red.key === 'signal'">
+                                <input x-model="editVcardForm.consecutivo_signal" type="text" placeholder="+57" class="w-16 border border-gray-300 rounded-lg px-2 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                                <input x-model="editVcardForm[red.key]" type="text" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                            </div>
+                            <input x-show="red.key !== 'signal'" x-model="editVcardForm[red.key]" type="text"
+                                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                        </div>
+                    </template>
+                </div>
+
+                <!-- Tab Apariencia -->
+                <div x-show="editVcardTab === 'apariencia'" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Color cabecera</label>
+                        <div class="flex gap-2 items-center">
+                            <input x-model="editVcardForm.cabecera" type="color" class="h-9 w-12 border border-gray-300 rounded cursor-pointer" />
+                            <input x-model="editVcardForm.cabecera" type="text" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Color fondo</label>
+                        <div class="flex gap-2 items-center">
+                            <input x-model="editVcardForm.fondo" type="color" class="h-9 w-12 border border-gray-300 rounded cursor-pointer" />
+                            <input x-model="editVcardForm.fondo" type="text" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Color cuerpo</label>
+                        <div class="flex gap-2 items-center">
+                            <input x-model="editVcardForm.color_cuerpo" type="color" class="h-9 w-12 border border-gray-300 rounded cursor-pointer" />
+                            <input x-model="editVcardForm.color_cuerpo" type="text" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Color iconos</label>
+                        <div class="flex gap-2 items-center">
+                            <input x-model="editVcardForm.color_iconos" type="color" class="h-9 w-12 border border-gray-300 rounded cursor-pointer" />
+                            <input x-model="editVcardForm.color_iconos" type="text" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Color info</label>
+                        <div class="flex gap-2 items-center">
+                            <input x-model="editVcardForm.color_info" type="color" class="h-9 w-12 border border-gray-300 rounded cursor-pointer" />
+                            <input x-model="editVcardForm.color_info" type="text" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Fuente</label>
+                        <select x-model="editVcardForm.fuente" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                            <option value="Inter">Inter</option>
+                            <option value="Roboto">Roboto</option>
+                            <option value="Montserrat">Montserrat</option>
+                            <option value="Poppins">Poppins</option>
+                            <option value="Lato">Lato</option>
+                            <option value="Open Sans">Open Sans</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Bordes</label>
+                        <select x-model="editVcardForm.bordes" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                            <option value="rounded-full">Circular</option>
+                            <option value="rounded-lg">Redondeado</option>
+                            <option value="rounded-none">Recto</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Estilo VCard</label>
+                        <select x-model="editVcardForm.estilo_vcard" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                            <option :value="1">Estilo 1</option>
+                            <option :value="2">Estilo 2</option>
+                            <option :value="3">Estilo 3</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Orden iconos</label>
+                        <select x-model="editVcardForm.orden_iconos" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                            <option value="top">Arriba</option>
+                            <option value="bottom">Abajo</option>
+                            <option value="left">Izquierda</option>
+                            <option value="right">Derecha</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 mb-1">Animación</label>
+                        <input x-model="editVcardForm.animacion" type="text" placeholder="ej: fade, slide..." class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                    </div>
+                </div>
+
+                <div x-show="editVcardError" class="mt-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-600" x-text="editVcardError"></div>
+                <div x-show="editVcardSuccess" class="mt-4 p-3 bg-green-50 border border-green-200 rounded text-sm text-green-700">✓ VCard actualizada correctamente.</div>
+            </div>
+            <div class="flex justify-end gap-3 px-5 py-4 border-t shrink-0">
                 <button @click="editVcardModal = false" class="px-4 py-2 text-sm border rounded-lg hover:bg-gray-50">Cancelar</button>
                 <button @click="saveEditVcard()" :disabled="saving"
                     class="px-4 py-2 text-sm text-white rounded-lg disabled:opacity-50"
@@ -959,8 +1111,21 @@ function vcardApiApp() {
 
         // Modal editar vcard
         editVcardModal: false,
+        editVcardTab: 'datos',
         editVcardData: null,
-        editVcardForm: { nombre: '', cargo: '', descripcion: '', telefono: '', whatsapp: '', email: '', empresa: '', direccion: '', website: '', pais: '', ciudad: '', estado: true, privacidad: 'publica', es_borrador: false },
+        editVcardForm: {
+            nombre: '', cargo: '', descripcion: '', telefono: '', consecutivo_telefono: '',
+            whatsapp: '', consecutivo_whatsapp: '', email: '', empresa: '', direccion: '',
+            website: '', pais: '', ciudad: '', foto_perfil: '', logo: '',
+            privacidad: 'publica', boton: '', estado: true, es_borrador: false,
+            linkedin: '', twitter: '', facebook: '', instagram: '', tiktok: '',
+            github: '', behance: '', youtube: '', youtube_channel: '',
+            telegram: '', messenger: '', wechat: '', signal: '', consecutivo_signal: '', line: '',
+            cabecera: '#E8E8E8', fondo: '#2B2D35', color_cuerpo: '#FFFFFF',
+            color_iconos: '#2B2D35', color_info: '#2B2D35',
+            fuente: 'Inter', bordes: 'rounded-full', estilo_vcard: 1,
+            orden_iconos: 'top', animacion: '',
+        },
         editVcardError: '',
         editVcardSuccess: false,
 
@@ -1213,21 +1378,52 @@ function vcardApiApp() {
 
         openEditVcardModal(v) {
             this.editVcardData = v;
+            this.editVcardTab  = 'datos';
             this.editVcardForm = {
-                nombre:      v.nombre      || '',
-                cargo:       v.cargo       || '',
-                descripcion: v.descripcion || '',
-                telefono:    v.telefono    || '',
-                whatsapp:    v.whatsapp    || '',
-                email:       v.email       || '',
-                empresa:     v.empresa     || '',
-                direccion:   v.direccion   || '',
-                website:     v.website     || '',
-                pais:        v.pais        || '',
-                ciudad:      v.ciudad      || '',
-                estado:      !!v.estado,
-                privacidad:  v.privacidad  || 'publica',
-                es_borrador: !!v.es_borrador,
+                nombre:               v.nombre       || '',
+                cargo:                v.cargo        || '',
+                descripcion:          v.descripcion  || '',
+                telefono:             v.telefono     || '',
+                consecutivo_telefono: v.consecutivo_telefono || '',
+                whatsapp:             v.whatsapp     || '',
+                consecutivo_whatsapp: v.consecutivo_whatsapp || '',
+                email:                v.email        || '',
+                empresa:              v.empresa      || '',
+                direccion:            v.direccion    || '',
+                website:              v.website      || '',
+                pais:                 v.pais         || '',
+                ciudad:               v.ciudad       || '',
+                foto_perfil:          v.foto_perfil  || '',
+                logo:                 v.logo         || '',
+                privacidad:           v.privacidad   || 'publica',
+                boton:                v.boton        || '',
+                estado:               !!v.estado,
+                es_borrador:          !!v.es_borrador,
+                linkedin:             v.linkedin     || '',
+                twitter:              v.twitter      || '',
+                facebook:             v.facebook     || '',
+                instagram:            v.instagram    || '',
+                tiktok:               v.tiktok       || '',
+                github:               v.github       || '',
+                behance:              v.behance      || '',
+                youtube:              v.youtube      || '',
+                youtube_channel:      v.youtube_channel || '',
+                telegram:             v.telegram     || '',
+                messenger:            v.messenger    || '',
+                wechat:               v.wechat       || '',
+                signal:               v.signal       || '',
+                consecutivo_signal:   v.consecutivo_signal || '',
+                line:                 v.line         || '',
+                cabecera:             v.cabecera     || '#E8E8E8',
+                fondo:                v.fondo        || '#2B2D35',
+                color_cuerpo:         v.color_cuerpo || '#FFFFFF',
+                color_iconos:         v.color_iconos || '#2B2D35',
+                color_info:           v.color_info   || '#2B2D35',
+                fuente:               v.fuente       || 'Inter',
+                bordes:               v.bordes       || 'rounded-full',
+                estilo_vcard:         v.estilo_vcard || 1,
+                orden_iconos:         v.orden_iconos || 'top',
+                animacion:            v.animacion    || '',
             };
             this.editVcardError   = '';
             this.editVcardSuccess = false;