diff --git a/frontend/src/lib/config/shortcuts.ts b/frontend/src/lib/config/shortcuts.ts
index 13ad46de..f3b5e82f 100644
--- a/frontend/src/lib/config/shortcuts.ts
+++ b/frontend/src/lib/config/shortcuts.ts
@@ -22,6 +22,9 @@ export const GLOBAL_NAV = {
     // Customs & Brokers
     'a': '/dashboard/customs_brokers',
 
+    // Clients & Providers
+    'o': '/dashboard/clients_and_providers',
+
     // Invoices
     'i': '/dashboard/invoices',
 
diff --git a/frontend/src/lib/config/shortcuts/clients-providers-edit-shortcuts.ts b/frontend/src/lib/config/shortcuts/clients-providers-edit-shortcuts.ts
new file mode 100644
index 00000000..8d2e4c35
--- /dev/null
+++ b/frontend/src/lib/config/shortcuts/clients-providers-edit-shortcuts.ts
@@ -0,0 +1,41 @@
+import type { ShortcutDef } from '$lib/stores/shortcut-store';
+
+export const obtenerAtajosEdicionSocio = (acciones: {
+    irGeneral: () => void;
+    irDireccion: () => void;
+    irProgramas: () => void;
+    irConfig: () => void;
+    guardar: () => void;
+    cancelar: () => void;
+}): ShortcutDef[] => [
+        {
+            key: 'Alt+Digit1',
+            description: 'Tab General',
+            action: acciones.irGeneral
+        },
+        {
+            key: 'Alt+Digit2',
+            description: 'Tab Dirección',
+            action: acciones.irDireccion
+        },
+        {
+            key: 'Alt+Digit3',
+            description: 'Tab Programas',
+            action: acciones.irProgramas
+        },
+        {
+            key: 'Alt+Digit4',
+            description: 'Tab Configuración',
+            action: acciones.irConfig
+        },
+        {
+            key: 'Ctrl+S',
+            description: 'Guardar',
+            action: acciones.guardar
+        },
+        {
+            key: 'Escape',
+            description: 'Cancelar / Volver',
+            action: acciones.cancelar
+        }
+    ];
diff --git a/frontend/src/lib/config/shortcuts/clients-providers-list-shortcuts.ts b/frontend/src/lib/config/shortcuts/clients-providers-list-shortcuts.ts
new file mode 100644
index 00000000..6de7f9f2
--- /dev/null
+++ b/frontend/src/lib/config/shortcuts/clients-providers-list-shortcuts.ts
@@ -0,0 +1,38 @@
+import type { ShortcutDef } from '$lib/stores/shortcut-store';
+
+export const obtenerAtajosListaSocios = (acciones: {
+    filtrarTodos: () => void;
+    filtrarClientes: () => void;
+    filtrarProveedores: () => void;
+    nuevo: () => void;
+    recargar: () => void;
+}): ShortcutDef[] => [
+        {
+            key: 'Alt+Digit1',
+            description: 'Ver Todos',
+            action: acciones.filtrarTodos,
+            context: 'Clients Providers Navigation'
+        },
+        {
+            key: 'Alt+Digit2',
+            description: 'Ver Clientes',
+            action: acciones.filtrarClientes,
+            context: 'Clients Providers Navigation'
+        },
+        {
+            key: 'Alt+Digit3',
+            description: 'Ver Proveedores',
+            action: acciones.filtrarProveedores,
+            context: 'Clients Providers Navigation'
+        },
+        {
+            key: 'Alt+Shift+N',
+            description: 'Nuevo Socio',
+            action: acciones.nuevo
+        },
+        {
+            key: 'Alt+Shift+R',
+            description: 'Actualizar Lista',
+            action: acciones.recargar
+        }
+    ];
diff --git a/frontend/src/routes/dashboard/clients_and_providers/+page.svelte b/frontend/src/routes/dashboard/clients_and_providers/+page.svelte
index 173101a7..27bc72fb 100644
--- a/frontend/src/routes/dashboard/clients_and_providers/+page.svelte
+++ b/frontend/src/routes/dashboard/clients_and_providers/+page.svelte
@@ -3,7 +3,10 @@
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { clientsProvidersApi, type ClientProvider } from '$lib/api/dashboard/a76/clients-providers';
+	import {
+		clientsProvidersApi,
+		type ClientProvider
+	} from '$lib/api/dashboard/a76/clients-providers';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import { Input } from '$lib/components/ui/input';
@@ -21,7 +24,7 @@
 	let items = $state<ClientProvider[]>(data.items || []);
 	let selectedItem = $state<ClientProvider | null>(null);
 	let isLoading = $state(false);
-	
+
 	// Server-side filtering/pagination parameters
 	let currentPage = $state(data.page || 1);
 	let pageSize = $state(50);
@@ -37,7 +40,7 @@
 	let error = $state<string | ApiError | null>(data.error || null);
 
 	// --- Lifecycle ---
-	
+
 	onMount(() => {
 		if (browser) {
 			// Sincronizar token de cookies a localStorage si es necesario
@@ -49,7 +52,8 @@
 			};
 			const cookieToken = getCookie('access_token');
 			const localToken = localStorage.getItem('access_token');
-			if (cookieToken && cookieToken !== localToken) localStorage.setItem('access_token', cookieToken);
+			if (cookieToken && cookieToken !== localToken)
+				localStorage.setItem('access_token', cookieToken);
 
 			// Listen for company changes
 			const handleCompanyChange = () => loadItems(1); // Reload from page 1
@@ -68,9 +72,9 @@
 		try {
 			const filters: any = {};
 			if (searchType !== 'both') filters.type = searchType;
-			// Note: The API technically supports name/rfc fitlering if backend implements it. 
-			// Assuming backend supports 'name' and 'rfc' query params based on standard patterns, 
-			// or we filter client side if the list is small. 
+			// Note: The API technically supports name/rfc fitlering if backend implements it.
+			// Assuming backend supports 'name' and 'rfc' query params based on standard patterns,
+			// or we filter client side if the list is small.
 			// Given pagination, we should try sending them. If backend ignores them, we might need client filtering.
 			// Ideally backend should handle this. I will assume backend filters for now or add query params.
 			if (searchName) filters.name = searchName;
@@ -105,7 +109,7 @@
 		searchType = value;
 		loadItems(1);
 	}
-	
+
 	function handleSearch() {
 		loadItems(1);
 	}
@@ -118,10 +122,13 @@
 		if (selectedItem) goto(`/dashboard/clients_and_providers/edit/${selectedItem.id}`);
 	}
 
+	import { useShortcuts } from '$lib/hooks/use-shortcuts';
+	import { obtenerAtajosListaSocios } from '$lib/config/shortcuts/clients-providers-list-shortcuts';
+
 	async function handleDelete() {
 		if (!selectedItem || !companyStore.activeCompany?.id) return;
 		if (!confirm('¿Estás seguro de eliminar este registro?')) return;
-		
+
 		try {
 			await clientsProvidersApi.delete(selectedItem.id, companyStore.activeCompany.id);
 			toast.success('Registro eliminado');
@@ -132,6 +139,16 @@
 		}
 	}
 
+	useShortcuts(
+		'Clients Providers List',
+		obtenerAtajosListaSocios({
+			filtrarTodos: () => handleTypeChange('both'),
+			filtrarClientes: () => handleTypeChange('client'),
+			filtrarProveedores: () => handleTypeChange('provider'),
+			nuevo: () => goto('/dashboard/clients_and_providers/edit/new'),
+			recargar: () => loadItems(1)
+		})
+	);
 </script>
 
 <div class="flex flex-col h-[calc(100vh-4rem)] p-4 gap-4 pb-15">
@@ -145,7 +162,9 @@
 
 	<!-- Error Message -->
 	{#if error}
-		<Card.Root class="bg-card dark:bg-black text-card-foreground dark:text-white border-destructive dark:border-red-800">
+		<Card.Root
+			class="bg-card dark:bg-black text-card-foreground dark:text-white border-destructive dark:border-red-800"
+		>
 			<Card.Header>
 				<Card.Title class="text-destructive">Error</Card.Title>
 				<Card.Description>
@@ -168,18 +187,18 @@
 					<div class="grid grid-cols-4 gap-4">
 						<div class="space-y-2">
 							<Label class="text-xs">Nombre / Razón Social</Label>
-							<Input 
-								bind:value={searchName} 
-								placeholder="Buscar por nombre..." 
+							<Input
+								bind:value={searchName}
+								placeholder="Buscar por nombre..."
 								class="h-9"
 								onkeydown={(e) => e.key === 'Enter' && handleSearch()}
 							/>
 						</div>
 						<div class="space-y-2">
 							<Label class="text-xs">RFC</Label>
-							<Input 
-								bind:value={searchRfc} 
-								placeholder="RFC..." 
+							<Input
+								bind:value={searchRfc}
+								placeholder="RFC..."
 								class="h-9"
 								onkeydown={(e) => e.key === 'Enter' && handleSearch()}
 							/>
@@ -188,7 +207,11 @@
 							<Label class="text-xs">Tipo</Label>
 							<Select.Root type="single" value={searchType} onValueChange={handleTypeChange}>
 								<Select.Trigger class="h-9">
-									{searchType === 'both' ? 'Todos' : searchType === 'client' ? 'Clientes' : 'Proveedores'}
+									{searchType === 'both'
+										? 'Todos'
+										: searchType === 'client'
+											? 'Clientes'
+											: 'Proveedores'}
 								</Select.Trigger>
 								<Select.Content>
 									<Select.Item value="both">Todos</Select.Item>
@@ -234,13 +257,23 @@
 						</thead>
 						<tbody>
 							{#if isLoading}
-								<tr><td colspan="5" class="text-center py-8 text-muted-foreground">Cargando...</td></tr>
+								<tr
+									><td colspan="5" class="text-center py-8 text-muted-foreground">Cargando...</td
+									></tr
+								>
 							{:else if items.length === 0}
-								<tr><td colspan="5" class="text-center py-8 text-muted-foreground">No se encontraron registros</td></tr>
+								<tr
+									><td colspan="5" class="text-center py-8 text-muted-foreground"
+										>No se encontraron registros</td
+									></tr
+								>
 							{:else}
 								{#each items as item (item.id)}
-									<tr 
-										class="border-b cursor-pointer transition-colors hover:bg-muted/50 {selectedItem?.id === item.id ? 'bg-muted' : ''}"
+									<tr
+										class="border-b cursor-pointer transition-colors hover:bg-muted/50 {selectedItem?.id ===
+										item.id
+											? 'bg-muted'
+											: ''}"
 										onclick={() => selectItem(item)}
 									>
 										<td class="px-3 py-2 font-mono text-xs text-muted-foreground">{item.id}</td>
@@ -248,15 +281,28 @@
 										<td class="px-3 py-2">{item.name}</td>
 										<td class="px-3 py-2">
 											{#if item.client_or_provider === 'client'}
-												<span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Cliente</span>
+												<span
+													class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700"
+													>Cliente</span
+												>
 											{:else if item.client_or_provider === 'provider'}
-												<span class="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Proveedor</span>
+												<span
+													class="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700"
+													>Proveedor</span
+												>
 											{:else}
-												<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">Ambos</span>
+												<span
+													class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700"
+													>Ambos</span
+												>
 											{/if}
 										</td>
 										<td class="px-3 py-2">
-											<span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {item.is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}">
+											<span
+												class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {item.is_active
+													? 'bg-green-100 text-green-700'
+													: 'bg-red-100 text-red-700'}"
+											>
 												{item.is_active ? 'Activo' : 'Inactivo'}
 											</span>
 										</td>
@@ -266,113 +312,140 @@
 						</tbody>
 					</table>
 				</div>
-                <!-- Simple Pagination Controls -->
-                <div class="p-2 border-t flex justify-end gap-2">
-                    <Button 
-                        variant="outline" 
-                        size="sm" 
-                        disabled={currentPage === 1 || isLoading}
-                        onclick={() => loadItems(currentPage - 1)}
-                    >
-                        Anterior
-                    </Button>
-                    <span class="flex items-center text-xs text-muted-foreground px-2">
-                        Página {currentPage} de {Math.ceil(totalItems / pageSize)}
-                    </span>
-                    <Button 
-                        variant="outline" 
-                        size="sm" 
-                        disabled={items.length < pageSize || isLoading}
-                        onclick={() => loadItems(currentPage + 1)}
-                    >
-                        Siguiente
-                    </Button>
-                </div>
+				<!-- Simple Pagination Controls -->
+				<div class="p-2 border-t flex justify-end gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={currentPage === 1 || isLoading}
+						onclick={() => loadItems(currentPage - 1)}
+					>
+						Anterior
+					</Button>
+					<span class="flex items-center text-xs text-muted-foreground px-2">
+						Página {currentPage} de {Math.ceil(totalItems / pageSize)}
+					</span>
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={items.length < pageSize || isLoading}
+						onclick={() => loadItems(currentPage + 1)}
+					>
+						Siguiente
+					</Button>
+				</div>
 			</div>
 		</div>
 
 		<!-- Right Panel: Details -->
-		<div class="w-96 flex-none flex flex-col border rounded-xl bg-muted/30 shadow-sm overflow-hidden">
+		<div
+			class="w-96 flex-none flex flex-col border rounded-xl bg-muted/30 shadow-sm overflow-hidden"
+		>
 			<div class="p-4 border-b bg-card">
-				<p class="text-[10px] uppercase tracking-widest opacity-80 text-muted-foreground">Detalles del Registro</p>
-				<h2 class="text-xl font-black font-mono tracking-tighter truncate" title={selectedItem?.name || ''}>
+				<p class="text-[10px] uppercase tracking-widest opacity-80 text-muted-foreground">
+					Detalles del Registro
+				</p>
+				<h2
+					class="text-xl font-black font-mono tracking-tighter truncate"
+					title={selectedItem?.name || ''}
+				>
 					{selectedItem?.name || '---'}
 				</h2>
-                <div class="flex items-center gap-2 mt-1">
-                    <span class="text-xs font-mono text-muted-foreground">{selectedItem?.rfc || ''}</span>
-                </div>
+				<div class="flex items-center gap-2 mt-1">
+					<span class="text-xs font-mono text-muted-foreground">{selectedItem?.rfc || ''}</span>
+				</div>
 			</div>
 
 			<div class="flex-1 overflow-auto p-5 space-y-6 bg-card">
 				{#if selectedItem}
 					<div class="grid grid-cols-1 gap-4">
-                        <div class="space-y-1">
-                             <Label class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1">
-                                <Users size={10} /> Tipo
-                             </Label>
-                             <p class="text-sm font-medium capitalize">{selectedItem.client_or_provider}</p>
-                        </div>
-                        
-                        {#if selectedItem.address}
-                         <div class="pt-4 border-t space-y-3">
-                             <Label class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1">
-                                <MapPin size={10} /> Dirección
-                             </Label>
-                             <div class="text-sm space-y-1">
-                                <p>{selectedItem.address.streets || ''} {selectedItem.address.exterior_number || ''} {selectedItem.address.interior_number ? 'Int ' + selectedItem.address.interior_number : ''}</p>
-                                <p>{selectedItem.address.neighborhood || ''}</p>
-                                <p>{selectedItem.address.city || ''}, {selectedItem.address.state || ''}</p>
-                                <p>{selectedItem.address.postal_code || ''}, {selectedItem.address.country || ''}</p>
-                             </div>
-                         </div>
-                         
-                         <div class="pt-4 border-t space-y-3">
-                            <Label class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1">
-                               <Hash size={10} /> Contacto
-                            </Label>
-                            {#if selectedItem.address.email}
-                                <div class="flex items-center gap-2 text-sm">
-                                    <Mail size={14} class="text-muted-foreground" />
-                                    <span>{selectedItem.address.email}</span>
-                                </div>
-                            {/if}
-                            {#if selectedItem.address.phone}
-                                <div class="flex items-center gap-2 text-sm">
-                                    <Phone size={14} class="text-muted-foreground" />
-                                    <span>{selectedItem.address.phone}</span>
-                                </div>
-                            {/if}
-                         </div>
-                        {:else}
-                            <div class="p-4 rounded-md bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-900">
-                                <p class="text-xs text-yellow-600 dark:text-yellow-400">Sin dirección registrada</p>
-                            </div>
-                        {/if}
+						<div class="space-y-1">
+							<Label
+								class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1"
+							>
+								<Users size={10} /> Tipo
+							</Label>
+							<p class="text-sm font-medium capitalize">{selectedItem.client_or_provider}</p>
+						</div>
 
-                         {#if selectedItem.programs}
-                             <div class="pt-4 border-t space-y-3">
-                                 <Label class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1">
-                                    <Building2 size={10} /> Programas
-                                 </Label>
-                                 <div class="grid grid-cols-2 gap-2 text-sm">
-                                     <div>
-                                         <span class="text-xs text-muted-foreground block">Programa</span>
-                                         <span class="font-medium">{selectedItem.programs.program || '-'}</span>
-                                     </div>
-                                     <div>
-                                         <span class="text-xs text-muted-foreground block">Número</span>
-                                         <span class="font-medium">{selectedItem.programs.program_number || '-'}</span>
-                                     </div>
-                                      <div>
-                                         <span class="text-xs text-muted-foreground block">TAX ID</span>
-                                         <span class="font-medium">{selectedItem.programs.tax_id || '-'}</span>
-                                     </div>
-                                 </div>
-                             </div>
-                         {/if}
+						{#if selectedItem.address}
+							<div class="pt-4 border-t space-y-3">
+								<Label
+									class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1"
+								>
+									<MapPin size={10} /> Dirección
+								</Label>
+								<div class="text-sm space-y-1">
+									<p>
+										{selectedItem.address.streets || ''}
+										{selectedItem.address.exterior_number || ''}
+										{selectedItem.address.interior_number
+											? 'Int ' + selectedItem.address.interior_number
+											: ''}
+									</p>
+									<p>{selectedItem.address.neighborhood || ''}</p>
+									<p>{selectedItem.address.city || ''}, {selectedItem.address.state || ''}</p>
+									<p>
+										{selectedItem.address.postal_code || ''}, {selectedItem.address.country || ''}
+									</p>
+								</div>
+							</div>
+
+							<div class="pt-4 border-t space-y-3">
+								<Label
+									class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1"
+								>
+									<Hash size={10} /> Contacto
+								</Label>
+								{#if selectedItem.address.email}
+									<div class="flex items-center gap-2 text-sm">
+										<Mail size={14} class="text-muted-foreground" />
+										<span>{selectedItem.address.email}</span>
+									</div>
+								{/if}
+								{#if selectedItem.address.phone}
+									<div class="flex items-center gap-2 text-sm">
+										<Phone size={14} class="text-muted-foreground" />
+										<span>{selectedItem.address.phone}</span>
+									</div>
+								{/if}
+							</div>
+						{:else}
+							<div
+								class="p-4 rounded-md bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-900"
+							>
+								<p class="text-xs text-yellow-600 dark:text-yellow-400">Sin dirección registrada</p>
+							</div>
+						{/if}
+
+						{#if selectedItem.programs}
+							<div class="pt-4 border-t space-y-3">
+								<Label
+									class="text-[10px] uppercase text-muted-foreground font-bold flex items-center gap-1"
+								>
+									<Building2 size={10} /> Programas
+								</Label>
+								<div class="grid grid-cols-2 gap-2 text-sm">
+									<div>
+										<span class="text-xs text-muted-foreground block">Programa</span>
+										<span class="font-medium">{selectedItem.programs.program || '-'}</span>
+									</div>
+									<div>
+										<span class="text-xs text-muted-foreground block">Número</span>
+										<span class="font-medium">{selectedItem.programs.program_number || '-'}</span>
+									</div>
+									<div>
+										<span class="text-xs text-muted-foreground block">TAX ID</span>
+										<span class="font-medium">{selectedItem.programs.tax_id || '-'}</span>
+									</div>
+								</div>
+							</div>
+						{/if}
 					</div>
 				{:else}
-					<div class="flex flex-col items-center justify-center h-full text-center text-muted-foreground opacity-50">
+					<div
+						class="flex flex-col items-center justify-center h-full text-center text-muted-foreground opacity-50"
+					>
 						<Building2 class="h-12 w-12 mb-3" />
 						<p class="text-sm">Selecciona un registro</p>
 					</div>
@@ -383,7 +456,9 @@
 </div>
 
 <!-- Sticky Footer Actions -->
-<div class="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t shadow-lg z-[5] group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] ml-[calc(var(--sidebar-width))]">
+<div
+	class="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t shadow-lg z-[5] group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] ml-[calc(var(--sidebar-width))]"
+>
 	<div class="px-4 py-4 max-w-[1400px] mx-auto">
 		<div class="flex justify-end gap-2">
 			<Button size="sm" href="/dashboard/clients_and_providers/edit">
@@ -393,7 +468,13 @@
 			<Button variant="outline" size="sm" onclick={handleEdit} disabled={!selectedItem}>
 				Editar
 			</Button>
-			<Button variant="outline" size="sm" onclick={handleDelete} disabled={!selectedItem} class="text-destructive hover:text-destructive">
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={handleDelete}
+				disabled={!selectedItem}
+				class="text-destructive hover:text-destructive"
+			>
 				Borrar
 			</Button>
 		</div>
diff --git a/frontend/src/routes/dashboard/clients_and_providers/edit/[[id]]/+page.svelte b/frontend/src/routes/dashboard/clients_and_providers/edit/[[id]]/+page.svelte
index 30b1ecd6..31c9cd50 100644
--- a/frontend/src/routes/dashboard/clients_and_providers/edit/[[id]]/+page.svelte
+++ b/frontend/src/routes/dashboard/clients_and_providers/edit/[[id]]/+page.svelte
@@ -1,517 +1,666 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores'; 
-    import { goto } from "$app/navigation";
-    
-    // Componentes UI
-    import { Button } from "$lib/components/ui/button";
-    import { Input } from "$lib/components/ui/input";
-    import { Label } from "$lib/components/ui/label";
-    import * as Card from "$lib/components/ui/card";
-    import * as Select from "$lib/components/ui/select";
-    import * as Tabs from "$lib/components/ui/tabs";
-    import { Switch } from "$lib/components/ui/switch";
-    import { Badge } from '$lib/components/ui/badge';
-    import { Separator } from '$lib/components/ui/separator';
-    import { LoaderCircle, ArrowLeft, Save, Building2, MapPin, FileText, Settings, User, Trash2 } from 'lucide-svelte';
-    import { toast } from 'svelte-sonner';
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 
-    // API & Stores
-    import { clientsProvidersApi } from "$lib/api/dashboard/a76/clients-providers";
-    import { companyStore } from "$lib/stores/company.svelte";
+	// Componentes UI
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import * as Card from '$lib/components/ui/card';
+	import * as Select from '$lib/components/ui/select';
+	import * as Tabs from '$lib/components/ui/tabs';
+	import { Switch } from '$lib/components/ui/switch';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Separator } from '$lib/components/ui/separator';
+	import {
+		LoaderCircle,
+		ArrowLeft,
+		Save,
+		Building2,
+		MapPin,
+		FileText,
+		Settings,
+		User,
+		Trash2
+	} from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
 
-    // --- CONFIGURACIÓN ---
-    let id = $derived($page.params.id); 
-    let isEditing = $derived(!!id); 
-    
-    // State for Tabs
-    let activeTab = $state('general');
+	// API & Stores
+	import { clientsProvidersApi } from '$lib/api/dashboard/a76/clients-providers';
+	import { companyStore } from '$lib/stores/company.svelte';
 
-    const typeLabels: Record<string, string> = {
-        client: "Cliente",
-        provider: "Proveedor",
-        both: "Ambos"
-    };
+	// --- CONFIGURACIÓN ---
+	let id = $derived($page.params.id);
+	let isEditing = $derived(!!id);
 
-    // --- ESTADO INICIAL (PLANO) ---
-    const getEmptyForm = () => ({
-        rfc: "", 
-        name: "", 
-        short_name: "",
-        curp: "",
-        client_or_provider: "client", 
-        type_nat_foreign: "N",
-        responsible: "", 
-        position: "",
-        is_active: true,
-        is_national_provider: false, 
+	// State for Tabs
+	let activeTab = $state('general');
 
-       
-        streets: "", 
-        exterior_number: "",
-        interior_number: "",
-        neighborhood: "", 
-        municipality: "",
-        city: "", 
-        state: "",
-        country: "", 
-        postal_code: "", 
-        email: "",
-        phone: "",
-        contact: "",
+	const typeLabels: Record<string, string> = {
+		client: 'Cliente',
+		provider: 'Proveedor',
+		both: 'Ambos'
+	};
 
-        // Tabla Programas (Programs)
-        program: "", 
-        program_number: "",
-        authorization_date_str: "", // String para input date
-        prosec: 0,
-        manufacturer_id: "",
-        tax_id: "",
-        ctpat_svi: "",
-        is_certified_company: "0"
-    });
+	// --- ESTADO INICIAL (PLANO) ---
+	const getEmptyForm = () => ({
+		rfc: '',
+		name: '',
+		short_name: '',
+		curp: '',
+		client_or_provider: 'client',
+		type_nat_foreign: 'N',
+		responsible: '',
+		position: '',
+		is_active: true,
+		is_national_provider: false,
 
-    let formData = $state(getEmptyForm());
-    let loading = $state(false);
-    let error = $state<string | null>(null);
+		streets: '',
+		exterior_number: '',
+		interior_number: '',
+		neighborhood: '',
+		municipality: '',
+		city: '',
+		state: '',
+		country: '',
+		postal_code: '',
+		email: '',
+		phone: '',
+		contact: '',
 
-    // --- UTILIDADES ---
-    const intDateToString = (d?: number | null) => d ? `${d.toString().substring(0, 4)}-${d.toString().substring(4, 6)}-${d.toString().substring(6, 8)}` : "";
-    const stringDateToInt = (d?: string) => d ? parseInt(d.replace(/-/g, '')) : null;
-    const clean = (v: any) => (typeof v === 'string' && !v.trim() ? null : v);
+		// Tabla Programas (Programs)
+		program: '',
+		program_number: '',
+		authorization_date_str: '', // String para input date
+		prosec: 0,
+		manufacturer_id: '',
+		tax_id: '',
+		ctpat_svi: '',
+		is_certified_company: '0'
+	});
 
-    // --- CARGA DE DATOS ---
-    $effect(() => {
-        if (id && companyStore.activeCompany?.id) loadData(Number(id));
-        else if (!id) formData = getEmptyForm();
-    });
+	let formData = $state(getEmptyForm());
+	let loading = $state(false);
+	let error = $state<string | null>(null);
 
-    async function loadData(clientId: number) {
-        if (!companyStore.activeCompany?.id) return;
-        loading = true;
-        try {
-            const res = await clientsProvidersApi.get(clientId, companyStore.activeCompany.id);
-            const item = (res as any).data || res; 
+	// --- UTILIDADES ---
+	const intDateToString = (d?: number | null) =>
+		d
+			? `${d.toString().substring(0, 4)}-${d.toString().substring(4, 6)}-${d.toString().substring(6, 8)}`
+			: '';
+	const stringDateToInt = (d?: string) => (d ? parseInt(d.replace(/-/g, '')) : null);
+	const clean = (v: any) => (typeof v === 'string' && !v.trim() ? null : v);
 
-            if (item) {
-                const addr = item.address || {};
-                const prog = item.programs || {};
+	// --- CARGA DE DATOS ---
+	$effect(() => {
+		if (id && companyStore.activeCompany?.id) loadData(Number(id));
+		else if (!id) formData = getEmptyForm();
+	});
 
-                // Mapear respuesta anidada -> formulario plano
-                formData = {
-                    rfc: item.rfc || "",
-                    name: item.name || "",
-                    short_name: item.short_name || "",
-                    curp: item.curp || "",
-                    client_or_provider: item.client_or_provider || "client",
-                    type_nat_foreign: item.type_nat_foreign || "N",
-                    responsible: item.responsible || "",
-                    position: item.position || "",
-                    is_active: !!item.is_active,
-                    is_national_provider: !!item.is_national_provider,
+	async function loadData(clientId: number) {
+		if (!companyStore.activeCompany?.id) return;
+		loading = true;
+		try {
+			const res = await clientsProvidersApi.get(clientId, companyStore.activeCompany.id);
+			const item = (res as any).data || res;
 
-                    streets: addr.streets || "", 
-                    exterior_number: addr.exterior_number || "",
-                    interior_number: addr.interior_number || "",
-                    neighborhood: addr.neighborhood || "",
-                    municipality: addr.municipality || "",
-                    city: addr.city || "",
-                    state: addr.state || "",
-                    country: addr.country || "",
-                    postal_code: addr.postal_code || "", 
-                    email: addr.email || "",
-                    phone: addr.phone || "",
-                    contact: addr.contact || "",
+			if (item) {
+				const addr = item.address || {};
+				const prog = item.programs || {};
 
-                    program: prog.program || "",
-                    program_number: prog.program_number || "",
-                    authorization_date_str: intDateToString(prog.secon_auth_date),
-                    prosec: prog.prosec || 0,
-                    manufacturer_id: prog.manufacturer_id || "",
-                    tax_id: prog.tax_id || "",
-                    ctpat_svi: prog.ctpat_svi || "",
-                    is_certified_company: prog.is_certified_company || "0"
-                };
-            }
-        } catch (e: any) {
-            error = "Error al cargar: " + e.message;
-            toast.error(error);
-        } finally {
-            loading = false;
-        }
-    }
+				// Mapear respuesta anidada -> formulario plano
+				formData = {
+					rfc: item.rfc || '',
+					name: item.name || '',
+					short_name: item.short_name || '',
+					curp: item.curp || '',
+					client_or_provider: item.client_or_provider || 'client',
+					type_nat_foreign: item.type_nat_foreign || 'N',
+					responsible: item.responsible || '',
+					position: item.position || '',
+					is_active: !!item.is_active,
+					is_national_provider: !!item.is_national_provider,
 
-    // --- ENVÍO DE DATOS ---
-    async function handleSubmit() {
-        if (!companyStore.activeCompany) { error = "Selecciona una compañía"; toast.error(error); return; }
-        if (!formData.rfc.trim() || !formData.name.trim()) { error = "RFC y Nombre obligatorios"; toast.error(error); return; }
+					streets: addr.streets || '',
+					exterior_number: addr.exterior_number || '',
+					interior_number: addr.interior_number || '',
+					neighborhood: addr.neighborhood || '',
+					municipality: addr.municipality || '',
+					city: addr.city || '',
+					state: addr.state || '',
+					country: addr.country || '',
+					postal_code: addr.postal_code || '',
+					email: addr.email || '',
+					phone: addr.phone || '',
+					contact: addr.contact || '',
 
-        loading = true;
-        error = null;
+					program: prog.program || '',
+					program_number: prog.program_number || '',
+					authorization_date_str: intDateToString(prog.secon_auth_date),
+					prosec: prog.prosec || 0,
+					manufacturer_id: prog.manufacturer_id || '',
+					tax_id: prog.tax_id || '',
+					ctpat_svi: prog.ctpat_svi || '',
+					is_certified_company: prog.is_certified_company || '0'
+				};
+			}
+		} catch (e: any) {
+			error = 'Error al cargar: ' + e.message;
+			toast.error(error);
+		} finally {
+			loading = false;
+		}
+	}
 
-        try {
-            // Reconstruir objeto anidado para el backend
-            const payload = {
-                rfc: clean(formData.rfc),
-                name: clean(formData.name),
-                short_name: clean(formData.short_name),
-                curp: clean(formData.curp),
-                client_or_provider: formData.client_or_provider,
-                type_nat_foreign: clean(formData.type_nat_foreign),
-                responsible: clean(formData.responsible),
-                position: clean(formData.position),
-                is_active: formData.is_active,
-                is_national_provider: formData.is_national_provider, 
+	// --- ENVÍO DE DATOS ---
+	async function handleSubmit() {
+		if (!companyStore.activeCompany) {
+			error = 'Selecciona una compañía';
+			toast.error(error);
+			return;
+		}
+		if (!formData.rfc.trim() || !formData.name.trim()) {
+			error = 'RFC y Nombre obligatorios';
+			toast.error(error);
+			return;
+		}
 
-                address: {
-                    streets: clean(formData.streets),
-                    exterior_number: clean(formData.exterior_number),
-                    interior_number: clean(formData.interior_number),
-                    neighborhood: clean(formData.neighborhood),
-                    municipality: clean(formData.municipality),
-                    city: clean(formData.city),
-                    state: clean(formData.state),
-                    country: clean(formData.country),
-                    postal_code: clean(formData.postal_code),
-                    email: clean(formData.email),
-                    phone: clean(formData.phone),
-                    contact: clean(formData.contact)
-                },
+		loading = true;
+		error = null;
 
-                programs: {
-                    program: clean(formData.program),
-                    program_number: clean(formData.program_number),
-                    secon_auth_date: stringDateToInt(formData.authorization_date_str),
-                    prosec: Number(formData.prosec) || null,
-                    manufacturer_id: clean(formData.manufacturer_id),
-                    tax_id: clean(formData.tax_id),
-                    ctpat_svi: clean(formData.ctpat_svi),
-                    is_certified_company: clean(formData.is_certified_company)
-                }
-            };
+		try {
+			// Reconstruir objeto anidado para el backend
+			const payload = {
+				rfc: clean(formData.rfc),
+				name: clean(formData.name),
+				short_name: clean(formData.short_name),
+				curp: clean(formData.curp),
+				client_or_provider: formData.client_or_provider,
+				type_nat_foreign: clean(formData.type_nat_foreign),
+				responsible: clean(formData.responsible),
+				position: clean(formData.position),
+				is_active: formData.is_active,
+				is_national_provider: formData.is_national_provider,
 
-            const companyId = companyStore.activeCompany.id;
-            const response = isEditing 
-                ? await clientsProvidersApi.update(Number(id), companyId, payload as any)
-                : await clientsProvidersApi.create(companyId, payload as any);
+				address: {
+					streets: clean(formData.streets),
+					exterior_number: clean(formData.exterior_number),
+					interior_number: clean(formData.interior_number),
+					neighborhood: clean(formData.neighborhood),
+					municipality: clean(formData.municipality),
+					city: clean(formData.city),
+					state: clean(formData.state),
+					country: clean(formData.country),
+					postal_code: clean(formData.postal_code),
+					email: clean(formData.email),
+					phone: clean(formData.phone),
+					contact: clean(formData.contact)
+				},
 
-            if (response.error) throw new Error(response.error);
-            
-            toast.success(isEditing ? 'Registro actualizado correctamente' : 'Registro creado correctamente');
-            goto('/dashboard/clients_and_providers');
+				programs: {
+					program: clean(formData.program),
+					program_number: clean(formData.program_number),
+					secon_auth_date: stringDateToInt(formData.authorization_date_str),
+					prosec: Number(formData.prosec) || null,
+					manufacturer_id: clean(formData.manufacturer_id),
+					tax_id: clean(formData.tax_id),
+					ctpat_svi: clean(formData.ctpat_svi),
+					is_certified_company: clean(formData.is_certified_company)
+				}
+			};
 
-        } catch (e: any) {
-            console.error(e);
-            error = e.message || "Error al guardar";
-            toast.error(error);
-        } finally {
-            loading = false;
-        }
-    }
-    
-    function handleCancel() {
-        goto('/dashboard/clients_and_providers');
-    }
+			const companyId = companyStore.activeCompany.id;
+			const response = isEditing
+				? await clientsProvidersApi.update(Number(id), companyId, payload as any)
+				: await clientsProvidersApi.create(companyId, payload as any);
+
+			if (response.error) throw new Error(response.error);
+
+			toast.success(
+				isEditing ? 'Registro actualizado correctamente' : 'Registro creado correctamente'
+			);
+			goto('/dashboard/clients_and_providers');
+		} catch (e: any) {
+			console.error(e);
+			error = e.message || 'Error al guardar';
+			toast.error(error);
+		} finally {
+			loading = false;
+		}
+	}
+
+	import { useShortcuts } from '$lib/hooks/use-shortcuts';
+	import { obtenerAtajosEdicionSocio } from '$lib/config/shortcuts/clients-providers-edit-shortcuts';
+
+	// ... previous imports / code ...
+
+	function handleCancel() {
+		goto('/dashboard/clients_and_providers');
+	}
+
+	useShortcuts(
+		'Edit Client Provider',
+		obtenerAtajosEdicionSocio({
+			irGeneral: () => (activeTab = 'general'),
+			irDireccion: () => (activeTab = 'address'),
+			irProgramas: () => (activeTab = 'programs'),
+			irConfig: () => (activeTab = 'config'),
+			guardar: handleSubmit,
+			cancelar: handleCancel
+		})
+	);
 </script>
 
 <div class="space-y-3">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-        <div class="space-y-1">
-            <div class="flex items-center gap-3">
-                <Button variant="ghost" size="icon" onclick={handleCancel}>
-                    <ArrowLeft size={20} />
-                </Button>
-                <h1 class="text-3xl font-bold tracking-tight">
-                    {isEditing ? `Socio Comercial #${id}` : 'Nuevo Socio Comercial'}
-                </h1>
-                {#if isEditing}
-                    <Badge variant={formData.is_active ? 'default' : 'secondary'}>
-                        {formData.is_active ? 'Activo' : 'Inactivo'}
-                    </Badge>
-                {:else}
-                    <Badge variant="default">Nuevo</Badge>
-                {/if}
-            </div>
-            <p class="text-muted-foreground ml-12">
-                {isEditing ? 'Edita la información del cliente o proveedor' : 'Registra un nuevo cliente o proveedor en el sistema'}
-            </p>
-        </div>
-    </div>
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div class="space-y-1">
+			<div class="flex items-center gap-3">
+				<Button variant="ghost" size="icon" onclick={handleCancel}>
+					<ArrowLeft size={20} />
+				</Button>
+				<h1 class="text-3xl font-bold tracking-tight">
+					{isEditing ? `Socio Comercial #${id}` : 'Nuevo Socio Comercial'}
+				</h1>
+				{#if isEditing}
+					<Badge variant={formData.is_active ? 'default' : 'secondary'}>
+						{formData.is_active ? 'Activo' : 'Inactivo'}
+					</Badge>
+				{:else}
+					<Badge variant="default">Nuevo</Badge>
+				{/if}
+			</div>
+			<p class="text-muted-foreground ml-12">
+				{isEditing
+					? 'Edita la información del cliente o proveedor'
+					: 'Registra un nuevo cliente o proveedor en el sistema'}
+			</p>
+		</div>
+	</div>
 
-    <Separator />
+	<Separator />
 
-    <!-- Main Content with Tabs -->
-    <div class="pb-48"> <!-- Padding bottom for sticky footer -->
-        <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
-            <Tabs.Root bind:value={activeTab}>
-                
-                <!-- Tab Panel: General -->
-                <Tabs.Content value="general">
-                    <Card.Root>
-                        <Card.Header>
-                            <Card.Title>Información General</Card.Title>
-                            <Card.Description>Datos principales de identificación y clasificación.</Card.Description>
-                        </Card.Header>
-                        <Card.Content class="space-y-4">
-                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-                                <div class="grid gap-2">
-                                    <Label for="rfc">RFC <span class="text-destructive">*</span></Label>
-                                    <Input id="rfc" bind:value={formData.rfc} placeholder="XAXX010101000" maxlength={13} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="type">Tipo de Relación <span class="text-destructive">*</span></Label>
-                                    <Select.Root type="single" bind:value={formData.client_or_provider}>
-                                        <Select.Trigger id="type">
-                                            {typeLabels[formData.client_or_provider] || "Selecciona un tipo"}
-                                        </Select.Trigger>
-                                        <Select.Content>
-                                            <Select.Item value="client" label="Cliente">Cliente</Select.Item>
-                                            <Select.Item value="provider" label="Proveedor">Proveedor</Select.Item>
-                                            <Select.Item value="both" label="Ambos">Ambos</Select.Item>
-                                        </Select.Content>
-                                    </Select.Root>
-                                </div>
-                            </div>
+	<!-- Main Content with Tabs -->
+	<div class="pb-48">
+		<!-- Padding bottom for sticky footer -->
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleSubmit();
+			}}
+		>
+			<Tabs.Root bind:value={activeTab}>
+				<!-- Tab Panel: General -->
+				<Tabs.Content value="general">
+					<Card.Root>
+						<Card.Header>
+							<Card.Title>Información General</Card.Title>
+							<Card.Description
+								>Datos principales de identificación y clasificación.</Card.Description
+							>
+						</Card.Header>
+						<Card.Content class="space-y-4">
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+								<div class="grid gap-2">
+									<Label for="rfc">RFC <span class="text-destructive">*</span></Label>
+									<Input
+										id="rfc"
+										bind:value={formData.rfc}
+										placeholder="XAXX010101000"
+										maxlength={13}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid gap-2">
+									<Label for="type">Tipo de Relación <span class="text-destructive">*</span></Label>
+									<Select.Root type="single" bind:value={formData.client_or_provider}>
+										<Select.Trigger id="type">
+											{typeLabels[formData.client_or_provider] || 'Selecciona un tipo'}
+										</Select.Trigger>
+										<Select.Content>
+											<Select.Item value="client" label="Cliente">Cliente</Select.Item>
+											<Select.Item value="provider" label="Proveedor">Proveedor</Select.Item>
+											<Select.Item value="both" label="Ambos">Ambos</Select.Item>
+										</Select.Content>
+									</Select.Root>
+								</div>
+							</div>
 
-                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                                <div class="md:col-span-3 grid gap-2">
-                                    <Label for="name">Razón Social <span class="text-destructive">*</span></Label>
-                                    <Input id="name" bind:value={formData.name} placeholder="Nombre completo" maxlength={256} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="short_name">Nombre Corto</Label>
-                                    <Input id="short_name" bind:value={formData.short_name} placeholder="Alias" maxlength={10} disabled={loading} />
-                                </div>
-                            </div>
+							<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+								<div class="md:col-span-3 grid gap-2">
+									<Label for="name">Razón Social <span class="text-destructive">*</span></Label>
+									<Input
+										id="name"
+										bind:value={formData.name}
+										placeholder="Nombre completo"
+										maxlength={256}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid gap-2">
+									<Label for="short_name">Nombre Corto</Label>
+									<Input
+										id="short_name"
+										bind:value={formData.short_name}
+										placeholder="Alias"
+										maxlength={10}
+										disabled={loading}
+									/>
+								</div>
+							</div>
 
-                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-                                <div class="grid gap-2">
-                                    <Label for="curp">CURP (Opcional)</Label>
-                                    <Input id="curp" bind:value={formData.curp} maxlength={18} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="type_nat">Tipo Origen</Label>
-                                    <Select.Root type="single" bind:value={formData.type_nat_foreign}>
-                                        <Select.Trigger id="type_nat">
-                                            {formData.type_nat_foreign === 'N' ? 'Nacional' : formData.type_nat_foreign === 'E' ? 'Extranjero' : 'Seleccione'}
-                                        </Select.Trigger>
-                                        <Select.Content>
-                                            <Select.Item value="N" label="Nacional">Nacional</Select.Item>
-                                            <Select.Item value="E" label="Extranjero">Extranjero</Select.Item>
-                                        </Select.Content>
-                                    </Select.Root>
-                                </div>
-                            </div>
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+								<div class="grid gap-2">
+									<Label for="curp">CURP (Opcional)</Label>
+									<Input id="curp" bind:value={formData.curp} maxlength={18} disabled={loading} />
+								</div>
+								<div class="grid gap-2">
+									<Label for="type_nat">Tipo Origen</Label>
+									<Select.Root type="single" bind:value={formData.type_nat_foreign}>
+										<Select.Trigger id="type_nat">
+											{formData.type_nat_foreign === 'N'
+												? 'Nacional'
+												: formData.type_nat_foreign === 'E'
+													? 'Extranjero'
+													: 'Seleccione'}
+										</Select.Trigger>
+										<Select.Content>
+											<Select.Item value="N" label="Nacional">Nacional</Select.Item>
+											<Select.Item value="E" label="Extranjero">Extranjero</Select.Item>
+										</Select.Content>
+									</Select.Root>
+								</div>
+							</div>
 
-                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-                                <div class="grid gap-2">
-                                    <Label for="responsible">Responsable</Label>
-                                    <Input id="responsible" bind:value={formData.responsible} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="position">Puesto</Label>
-                                    <Input id="position" bind:value={formData.position} disabled={loading} />
-                                </div>
-                            </div>
-                        </Card.Content>
-                    </Card.Root>
-                </Tabs.Content>
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+								<div class="grid gap-2">
+									<Label for="responsible">Responsable</Label>
+									<Input id="responsible" bind:value={formData.responsible} disabled={loading} />
+								</div>
+								<div class="grid gap-2">
+									<Label for="position">Puesto</Label>
+									<Input id="position" bind:value={formData.position} disabled={loading} />
+								</div>
+							</div>
+						</Card.Content>
+					</Card.Root>
+				</Tabs.Content>
 
-                <!-- Tab Panel: Address -->
-                <Tabs.Content value="address">
-                     <Card.Root>
-                        <Card.Header>
-                            <Card.Title>Dirección y Contacto</Card.Title>
-                            <Card.Description>Ubicación fiscal y datos de contacto.</Card.Description>
-                        </Card.Header>
-                        <Card.Content class="space-y-4">
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="grid gap-2">
-                                    <Label for="street">Calle</Label>
-                                    <Input id="street" bind:value={formData.streets} maxlength={100} disabled={loading} />
-                                </div>
-                                <div class="grid grid-cols-2 gap-4">
-                                    <div class="grid gap-2">
-                                        <Label for="ext">No. Exterior</Label>
-                                        <Input id="ext" bind:value={formData.exterior_number} maxlength={20} disabled={loading} />
-                                    </div>
-                                    <div class="grid gap-2">
-                                        <Label for="int">No. Interior</Label>
-                                        <Input id="int" bind:value={formData.interior_number} maxlength={20} disabled={loading} />
-                                    </div>
-                                </div>
-                            </div>
+				<!-- Tab Panel: Address -->
+				<Tabs.Content value="address">
+					<Card.Root>
+						<Card.Header>
+							<Card.Title>Dirección y Contacto</Card.Title>
+							<Card.Description>Ubicación fiscal y datos de contacto.</Card.Description>
+						</Card.Header>
+						<Card.Content class="space-y-4">
+							<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+								<div class="grid gap-2">
+									<Label for="street">Calle</Label>
+									<Input
+										id="street"
+										bind:value={formData.streets}
+										maxlength={100}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid grid-cols-2 gap-4">
+									<div class="grid gap-2">
+										<Label for="ext">No. Exterior</Label>
+										<Input
+											id="ext"
+											bind:value={formData.exterior_number}
+											maxlength={20}
+											disabled={loading}
+										/>
+									</div>
+									<div class="grid gap-2">
+										<Label for="int">No. Interior</Label>
+										<Input
+											id="int"
+											bind:value={formData.interior_number}
+											maxlength={20}
+											disabled={loading}
+										/>
+									</div>
+								</div>
+							</div>
 
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                <div class="grid gap-2">
-                                    <Label for="col">Colonia</Label>
-                                    <Input id="col" bind:value={formData.neighborhood} maxlength={40} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="cp">C.P.</Label>
-                                    <Input id="cp" bind:value={formData.postal_code} maxlength={15} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="mun">Municipio</Label>
-                                    <Input id="mun" bind:value={formData.municipality} maxlength={150} disabled={loading} />
-                                </div>
-                            </div>
+							<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+								<div class="grid gap-2">
+									<Label for="col">Colonia</Label>
+									<Input
+										id="col"
+										bind:value={formData.neighborhood}
+										maxlength={40}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid gap-2">
+									<Label for="cp">C.P.</Label>
+									<Input
+										id="cp"
+										bind:value={formData.postal_code}
+										maxlength={15}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid gap-2">
+									<Label for="mun">Municipio</Label>
+									<Input
+										id="mun"
+										bind:value={formData.municipality}
+										maxlength={150}
+										disabled={loading}
+									/>
+								</div>
+							</div>
 
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                <div class="grid gap-2">
-                                    <Label for="city">Ciudad</Label>
-                                    <Input id="city" bind:value={formData.city} maxlength={30} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="state">Estado</Label>
-                                    <Input id="state" bind:value={formData.state} maxlength={30} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="country">País (ISO)</Label>
-                                    <Input id="country" bind:value={formData.country} placeholder="MEX" maxlength={3} disabled={loading} />
-                                </div>
-                            </div>
+							<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+								<div class="grid gap-2">
+									<Label for="city">Ciudad</Label>
+									<Input id="city" bind:value={formData.city} maxlength={30} disabled={loading} />
+								</div>
+								<div class="grid gap-2">
+									<Label for="state">Estado</Label>
+									<Input id="state" bind:value={formData.state} maxlength={30} disabled={loading} />
+								</div>
+								<div class="grid gap-2">
+									<Label for="country">País (ISO)</Label>
+									<Input
+										id="country"
+										bind:value={formData.country}
+										placeholder="MEX"
+										maxlength={3}
+										disabled={loading}
+									/>
+								</div>
+							</div>
 
-                            <Separator class="my-4" />
+							<Separator class="my-4" />
 
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="grid gap-2">
-                                    <Label for="email">Email de Contacto</Label>
-                                    <Input id="email" type="email" bind:value={formData.email} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="phone">Teléfono</Label>
-                                    <Input id="phone" bind:value={formData.phone} disabled={loading} />
-                                </div>
-                            </div>
-                        </Card.Content>
-                     </Card.Root>
-                </Tabs.Content>
+							<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+								<div class="grid gap-2">
+									<Label for="email">Email de Contacto</Label>
+									<Input id="email" type="email" bind:value={formData.email} disabled={loading} />
+								</div>
+								<div class="grid gap-2">
+									<Label for="phone">Teléfono</Label>
+									<Input id="phone" bind:value={formData.phone} disabled={loading} />
+								</div>
+							</div>
+						</Card.Content>
+					</Card.Root>
+				</Tabs.Content>
 
-                <!-- Tab Panel: Programs -->
-                <Tabs.Content value="programs">
-                    <Card.Root>
-                        <Card.Header>
-                            <Card.Title>Programas y Certificaciones</Card.Title>
-                            <Card.Description>Información sobre IMMEX, PROSEC y otras certificaciones.</Card.Description>
-                        </Card.Header>
-                        <Card.Content class="space-y-4">
-                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-                                <div class="grid gap-2">
-                                    <Label for="program">Programa</Label>
-                                    <Input id="program" bind:value={formData.program} placeholder="IMMEX" maxlength={7} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="program_num">Número de Programa</Label>
-                                    <Input id="program_num" bind:value={formData.program_number} maxlength={40} disabled={loading} />
-                                </div>
-                            </div>
+				<!-- Tab Panel: Programs -->
+				<Tabs.Content value="programs">
+					<Card.Root>
+						<Card.Header>
+							<Card.Title>Programas y Certificaciones</Card.Title>
+							<Card.Description
+								>Información sobre IMMEX, PROSEC y otras certificaciones.</Card.Description
+							>
+						</Card.Header>
+						<Card.Content class="space-y-4">
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+								<div class="grid gap-2">
+									<Label for="program">Programa</Label>
+									<Input
+										id="program"
+										bind:value={formData.program}
+										placeholder="IMMEX"
+										maxlength={7}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid gap-2">
+									<Label for="program_num">Número de Programa</Label>
+									<Input
+										id="program_num"
+										bind:value={formData.program_number}
+										maxlength={40}
+										disabled={loading}
+									/>
+								</div>
+							</div>
 
-                            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-                                <div class="grid gap-2">
-                                    <Label for="auth_date">Fecha Autorización</Label>
-                                    <Input id="auth_date" type="date" bind:value={formData.authorization_date_str} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="tax_id">Tax ID (Extranjero)</Label>
-                                    <Input id="tax_id" bind:value={formData.tax_id} maxlength={30} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="man_id">Manufacturer ID</Label>
-                                    <Input id="man_id" bind:value={formData.manufacturer_id} maxlength={25} disabled={loading} />
-                                </div>
-                            </div>
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+								<div class="grid gap-2">
+									<Label for="auth_date">Fecha Autorización</Label>
+									<Input
+										id="auth_date"
+										type="date"
+										bind:value={formData.authorization_date_str}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid gap-2">
+									<Label for="tax_id">Tax ID (Extranjero)</Label>
+									<Input
+										id="tax_id"
+										bind:value={formData.tax_id}
+										maxlength={30}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid gap-2">
+									<Label for="man_id">Manufacturer ID</Label>
+									<Input
+										id="man_id"
+										bind:value={formData.manufacturer_id}
+										maxlength={25}
+										disabled={loading}
+									/>
+								</div>
+							</div>
 
-                            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-                                <div class="grid gap-2">
-                                    <Label for="ctpat">C-TPAT / SVI</Label>
-                                    <Input id="ctpat" bind:value={formData.ctpat_svi} maxlength={100} disabled={loading} />
-                                </div>
-                                <div class="grid gap-2">
-                                    <Label for="prosec">PROSEC (Sector)</Label>
-                                    <Input id="prosec" type="number" bind:value={formData.prosec} disabled={loading} />
-                                </div>
-                            </div>
-                        </Card.Content>
-                    </Card.Root>
-                </Tabs.Content>
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+								<div class="grid gap-2">
+									<Label for="ctpat">C-TPAT / SVI</Label>
+									<Input
+										id="ctpat"
+										bind:value={formData.ctpat_svi}
+										maxlength={100}
+										disabled={loading}
+									/>
+								</div>
+								<div class="grid gap-2">
+									<Label for="prosec">PROSEC (Sector)</Label>
+									<Input
+										id="prosec"
+										type="number"
+										bind:value={formData.prosec}
+										disabled={loading}
+									/>
+								</div>
+							</div>
+						</Card.Content>
+					</Card.Root>
+				</Tabs.Content>
 
-                <!-- Tab Panel: Settings -->
-                <Tabs.Content value="config">
-                    <Card.Root>
-                        <Card.Header>
-                            <Card.Title>Configuración</Card.Title>
-                            <Card.Description>Ajustes de estado y atributos especiales.</Card.Description>
-                        </Card.Header>
-                         <Card.Content class="space-y-4">
-                             <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-                                <div class="flex items-center gap-3 p-4 border rounded-lg bg-card">
-                                    <Switch id="is_active" bind:checked={formData.is_active} disabled={loading} />
-                                    <div class="grid gap-0.5">
-                                        <Label for="is_active">Registro Activo</Label>
-                                        <p class="text-xs text-muted-foreground">Habilitar o deshabilitar este socio comercial</p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center gap-3 p-4 border rounded-lg bg-card">
-                                    <Switch id="is_national" bind:checked={formData.is_national_provider} disabled={loading} />
-                                    <div class="grid gap-0.5">
-                                        <Label for="is_national">Proveedor Nacional</Label>
-                                        <p class="text-xs text-muted-foreground">Marcar si es un proveedor nacional</p>
-                                    </div>
-                                </div>
-                            </div>
-                         </Card.Content>
-                    </Card.Root>
-                </Tabs.Content>
-            </Tabs.Root>
-        </form>
-    </div>
+				<!-- Tab Panel: Settings -->
+				<Tabs.Content value="config">
+					<Card.Root>
+						<Card.Header>
+							<Card.Title>Configuración</Card.Title>
+							<Card.Description>Ajustes de estado y atributos especiales.</Card.Description>
+						</Card.Header>
+						<Card.Content class="space-y-4">
+							<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+								<div class="flex items-center gap-3 p-4 border rounded-lg bg-card">
+									<Switch id="is_active" bind:checked={formData.is_active} disabled={loading} />
+									<div class="grid gap-0.5">
+										<Label for="is_active">Registro Activo</Label>
+										<p class="text-xs text-muted-foreground">
+											Habilitar o deshabilitar este socio comercial
+										</p>
+									</div>
+								</div>
+								<div class="flex items-center gap-3 p-4 border rounded-lg bg-card">
+									<Switch
+										id="is_national"
+										bind:checked={formData.is_national_provider}
+										disabled={loading}
+									/>
+									<div class="grid gap-0.5">
+										<Label for="is_national">Proveedor Nacional</Label>
+										<p class="text-xs text-muted-foreground">Marcar si es un proveedor nacional</p>
+									</div>
+								</div>
+							</div>
+						</Card.Content>
+					</Card.Root>
+				</Tabs.Content>
+			</Tabs.Root>
+		</form>
+	</div>
 </div>
 
 <!-- Sticky Footer -->
-<div class="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t shadow-lg z-[5] group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] ml-[calc(var(--sidebar-width))]">
-    <div class="px-4 py-4 space-y-4 max-w-[1400px] mx-auto">
-        <!-- Tabs Navigation in Footer -->
-        <Tabs.Root bind:value={activeTab}>
-            <div class="w-full overflow-x-auto pb-2">
-                <Tabs.List class="inline-flex md:grid md:w-full md:grid-cols-4">
-                    <Tabs.Trigger value="general" class="whitespace-nowrap">
-                        <Building2 size={16} class="mr-2" /> General
-                    </Tabs.Trigger>
-                    <Tabs.Trigger value="address" class="whitespace-nowrap">
-                        <MapPin size={16} class="mr-2" /> Dirección
-                    </Tabs.Trigger>
-                    <Tabs.Trigger value="programs" class="whitespace-nowrap">
-                        <FileText size={16} class="mr-2" /> Programas
-                    </Tabs.Trigger>
-                    <Tabs.Trigger value="config" class="whitespace-nowrap">
-                        <Settings size={16} class="mr-2" /> Config
-                    </Tabs.Trigger>
-                </Tabs.List>
-            </div>
-        </Tabs.Root>
+<div
+	class="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t shadow-lg z-[5] group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] ml-[calc(var(--sidebar-width))]"
+>
+	<div class="px-4 py-4 space-y-4 max-w-[1400px] mx-auto">
+		<!-- Tabs Navigation in Footer -->
+		<Tabs.Root bind:value={activeTab}>
+			<div class="w-full overflow-x-auto pb-2">
+				<Tabs.List class="inline-flex md:grid md:w-full md:grid-cols-4">
+					<Tabs.Trigger value="general" class="whitespace-nowrap">
+						<Building2 size={16} class="mr-2" /> General
+					</Tabs.Trigger>
+					<Tabs.Trigger value="address" class="whitespace-nowrap">
+						<MapPin size={16} class="mr-2" /> Dirección
+					</Tabs.Trigger>
+					<Tabs.Trigger value="programs" class="whitespace-nowrap">
+						<FileText size={16} class="mr-2" /> Programas
+					</Tabs.Trigger>
+					<Tabs.Trigger value="config" class="whitespace-nowrap">
+						<Settings size={16} class="mr-2" /> Config
+					</Tabs.Trigger>
+				</Tabs.List>
+			</div>
+		</Tabs.Root>
 
-        <!-- Actions -->
-        <div class="flex justify-end gap-3">
-            <Button variant="outline" onclick={handleCancel} disabled={loading}>
-                Cancelar
-            </Button>
-            {#if !isEditing}
-                 <Button variant="outline" onclick={() => formData = getEmptyForm()} disabled={loading}>
-                    <!-- <Trash2 size={16} class="mr-2" /> -->
-                    Limpiar
-                </Button>
-            {/if}
-            <Button onclick={handleSubmit} disabled={loading}>
-                {#if loading}
-                    <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
-                    Guardando...
-                {:else}
-                    <Save size={16} class="mr-2" />
-                    {isEditing ? 'Actualizar Socio' : 'Guardar Socio'}
-                {/if}
-            </Button>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+		<!-- Actions -->
+		<div class="flex justify-end gap-3">
+			<Button variant="outline" onclick={handleCancel} disabled={loading}>Cancelar</Button>
+			{#if !isEditing}
+				<Button variant="outline" onclick={() => (formData = getEmptyForm())} disabled={loading}>
+					<!-- <Trash2 size={16} class="mr-2" /> -->
+					Limpiar
+				</Button>
+			{/if}
+			<Button onclick={handleSubmit} disabled={loading}>
+				{#if loading}
+					<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+					Guardando...
+				{:else}
+					<Save size={16} class="mr-2" />
+					{isEditing ? 'Actualizar Socio' : 'Guardar Socio'}
+				{/if}
+			</Button>
+		</div>
+	</div>
+</div>