diff --git a/frontend/src/lib/components/dashboard/customs_brokers/data-table-actions.svelte b/frontend/src/lib/components/dashboard/customs_brokers/data-table-actions.svelte
index d32046fc..2d529e05 100644
--- a/frontend/src/lib/components/dashboard/customs_brokers/data-table-actions.svelte
+++ b/frontend/src/lib/components/dashboard/customs_brokers/data-table-actions.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
-	import { Button } from "$lib/components/ui/button/index.js";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-	import type { CustomsBroker } from "./columns.js";
-	import DetailsDialog from "./details-dialog.svelte";
-	import DeleteDialog from "./delete-dialog.svelte";
-	import { goto } from "$app/navigation";
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import type { CustomsBroker } from './columns.js';
+	import DetailsDialog from './details-dialog.svelte';
+	import DeleteDialog from './delete-dialog.svelte';
+	import { goto } from '$app/navigation';
 
-	let { 
+	let {
 		broker,
 		onSuccess
-	}: { 
+	}: {
 		broker: CustomsBroker;
 		onSuccess?: () => void;
 	} = $props();
@@ -32,10 +32,6 @@
 		showDetailsDialog = true;
 	}
 
-	function handleEdit() {
-		showEditDialog = true;
-	}
-
 	function handleDelete() {
 		showDeleteDialog = true;
 	}
@@ -43,33 +39,25 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger>
-		<Button
-			variant="ghost"
-			size="icon"
-			class="relative h-8 w-8 p-0"
-		>
+		<Button variant="ghost" size="icon" class="relative h-8 w-8 p-0">
 			<span class="sr-only">Abrir menú</span>
 			<EllipsisIcon class="h-4 w-4" />
 		</Button>
-	</DropdownMenu.Trigger>	
+	</DropdownMenu.Trigger>
 	<DropdownMenu.Content>
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
-			<DropdownMenu.Item onclick={handleCopyKey}>
-				Copiar clave
-			</DropdownMenu.Item>
+			<DropdownMenu.Item onclick={handleCopyKey}>Copiar clave</DropdownMenu.Item>
 			{#if broker.tax_id}
-				<DropdownMenu.Item onclick={handleCopyTaxId}>
-					Copiar RFC
-				</DropdownMenu.Item>
+				<DropdownMenu.Item onclick={handleCopyTaxId}>Copiar RFC</DropdownMenu.Item>
 			{/if}
 		</DropdownMenu.Group>
 		<DropdownMenu.Separator />
 		<DropdownMenu.Group>
-			<DropdownMenu.Item onclick={handleViewDetails}>
-				Ver detalles
-			</DropdownMenu.Item>
-			<DropdownMenu.Item onclick={() => goto(`/dashboard/customs_brokers/edit/${broker.broker_key}`)}>
+			<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+			<DropdownMenu.Item
+				onclick={() => goto(`/dashboard/customs_brokers/edit/${broker.broker_key}`)}
+			>
 				Editar
 			</DropdownMenu.Item>
 			<DropdownMenu.Item onclick={handleDelete} class="text-destructive">
diff --git a/frontend/src/lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte b/frontend/src/lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte
index d5578a0c..606853ba 100644
--- a/frontend/src/lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte
+++ b/frontend/src/lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte
@@ -76,6 +76,8 @@
 		material_description: '',
 		unit_of_measure_description: '',
 		unit_measure_key: '',
+		fraction_description: '',
+		us_fraction_description: '',
 		fraction_umt: '',
 		fraction_uma_key: '',
 		us_fraction_ad_valorem: '',
@@ -108,7 +110,8 @@
 			formData.import_tariff_code = snap.import_tariff_code ?? '';
 			formData.import_tariff_type = snap.import_tariff_type ?? '';
 			formData.export_tariff_code = snap.export_tariff_code ?? '';
-			formData.export_tariff_type = snap.export_tariff_type ?? '';
+			// Si tenemos initialData con claves cargadas en modo edición, deberíamos resolver sus descripciones si no las tenemos.
+			// (Opcional si el backend ya manda la descripción)
 		} else {
 			// Reset form when initialData is null (new class)
 			formData.class_code = '';
@@ -160,6 +163,7 @@
 
 	function selectFraction(fraction: TariffFraction) {
 		formData.fraction = fraction.fraction;
+		formData.fraction_description = fraction.description || '';
 		formData.fraction_umt = (fraction.umt ?? '') as string;
 		formData.fraction_uma_key = (fraction.nico ?? '') as string;
 		// Actualizar tarifa de importación
@@ -317,6 +321,7 @@
 
 	function selectUSFraction(fraction: USTariffFraction) {
 		formData.us_fraction = fraction.code;
+		formData.us_fraction_description = fraction.description || '';
 		formData.us_fraction_ad_valorem = fraction.ad_valorem?.toString() || '0.00';
 		formData.us_fraction_fixed_rate = fraction.fixed_cost?.toString() || '0.00000000';
 		// Actualizar tarifa de exportación
@@ -449,6 +454,137 @@
 		return Object.keys(errors).length === 0;
 	}
 
+	// Auto-fill callbacks
+	function handleMaterialKeyBlur() {
+		const keyUpper = formData.material_key?.trim().toUpperCase() || '';
+		formData.material_key = keyUpper;
+
+		if (!keyUpper) {
+			formData.material_description = '';
+			validateField('material_key');
+			return;
+		}
+
+		if (materialTypes.length === 0) {
+			const companyId = companyStore.activeCompany?.id;
+			if (companyId) {
+				materialTypesApi
+					.list(1, 100, 'ACTIVO FIJO')
+					.then((response) => {
+						if (response.data) {
+							materialTypes = response.data.items;
+							const mat = materialTypes.find((m) => m.key.toUpperCase() === keyUpper);
+							formData.material_description = mat ? mat.description : '';
+						}
+					})
+					.catch(console.error);
+			}
+		} else {
+			const mat = materialTypes.find((m) => m.key.toUpperCase() === keyUpper);
+			formData.material_description = mat ? mat.description : '';
+		}
+
+		validateField('material_key');
+	}
+
+	function handleUnitOfMeasureBlur() {
+		const umUpper = formData.unit_of_measure?.trim().toUpperCase() || '';
+		formData.unit_of_measure = umUpper;
+
+		if (!umUpper) {
+			formData.unit_of_measure_description = '';
+			formData.unit_measure_key = '';
+			validateField('unit_of_measure');
+			return;
+		}
+
+		if (unitsOfMeasureData.length === 0) {
+			loadUnitsOfMeasure()
+				.then(() => {
+					const um = unitsOfMeasureData.find((u) => u.code.toUpperCase() === umUpper);
+					if (um) {
+						formData.unit_of_measure_description = um.description;
+						formData.unit_measure_key = um.claveMexicana;
+					} else {
+						formData.unit_of_measure_description = '';
+						formData.unit_measure_key = '';
+					}
+				})
+				.catch(console.error);
+		} else {
+			const um = unitsOfMeasureData.find((u) => u.code.toUpperCase() === umUpper);
+			if (um) {
+				formData.unit_of_measure_description = um.description;
+				formData.unit_measure_key = um.claveMexicana;
+			} else {
+				formData.unit_of_measure_description = '';
+				formData.unit_measure_key = '';
+			}
+		}
+
+		validateField('unit_of_measure');
+	}
+
+	function handleFractionBlur() {
+		const val = formData.fraction?.trim() || '';
+		formData.fraction = val;
+
+		if (!val) {
+			formData.fraction_description = '';
+			formData.fraction_umt = '';
+			validateField('fraction');
+			return;
+		}
+
+		if (companyStore.activeCompany?.id) {
+			getTariffFractions(1, 10, companyStore.activeCompany.id, { fraction: val })
+				.then((response) => {
+					if (response.data && response.data.items.length > 0) {
+						// Intentar encontrar coincidencia exacta primero
+						const item =
+							response.data.items.find((i) => i.fraction === val) || response.data.items[0];
+						formData.fraction_description = item.description || '';
+						formData.fraction_umt = item.umt || '';
+					} else {
+						formData.fraction_description = '';
+						formData.fraction_umt = '';
+					}
+				})
+				.catch(console.error);
+		}
+		validateField('fraction');
+	}
+
+	function handleUSFractionBlur() {
+		const val = formData.us_fraction?.trim() || '';
+		formData.us_fraction = val;
+
+		if (!val) {
+			formData.us_fraction_description = '';
+			formData.us_fraction_ad_valorem = '';
+			formData.us_fraction_fixed_rate = '';
+			// No tiene validación mandatoria según el código actual, pero llamamos por si acaso
+			return;
+		}
+
+		if (companyStore.activeCompany?.id) {
+			getUSTariffFractions(1, 10, companyStore.activeCompany.id, { code: val })
+				.then((response) => {
+					if (response.data && response.data.items.length > 0) {
+						const item = response.data.items.find((i) => i.code === val) || response.data.items[0];
+						formData.us_fraction_description = item.description || '';
+						formData.us_fraction_ad_valorem = item.ad_valorem?.toString() || '';
+						formData.us_fraction_fixed_rate = item.fixed_cost?.toString() || '';
+					} else {
+						formData.us_fraction_description = '';
+						formData.us_fraction_ad_valorem = '';
+						formData.us_fraction_fixed_rate = '';
+					}
+				})
+				.catch(console.error);
+		}
+	}
+
 	// Validar campo individual (para validación en blur)
 	function validateField(fieldName: string) {
 		if (!showErrors) return; // Solo validar si ya se intentó guardar
@@ -522,14 +658,19 @@
 	}
 
 	// Escuchar el evento de guardado del padre
-	if (typeof document !== 'undefined') {
-		document.addEventListener('save-form', handleSave);
-	}
+	$effect(() => {
+		if (typeof document !== 'undefined') {
+			document.addEventListener('save-form', handleSave);
+			return () => {
+				document.removeEventListener('save-form', handleSave);
+			};
+		}
+	});
 </script>
 
 <div class="space-y-3">
 	<!-- Clase y Requiere Revisión Física -->
-	<div class="flex items-end gap-4">
+	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 		<div class="flex-1 space-y-2">
 			<Label for="class_code" class="font-bold">
 				Clase: <span class="text-red-500">*</span>
@@ -569,18 +710,21 @@
 						? 'border-red-500 focus-visible:ring-red-500'
 						: ''}"
 					maxlength={10}
-					onblur={() => validateField('material_key')}
+					onblur={handleMaterialKeyBlur}
 				/>
 				<Button type="button" variant="outline" size="icon" onclick={openMaterialSearch}>
 					<Folder class="h-4 w-4" />
 				</Button>
-				<span class="cursor-pointer text-sm text-blue-600 hover:underline">
-					{formData.material_description || ''}
-				</span>
 			</div>
-			{#if validationErrors.material_key}
-				<p class="mt-1 text-sm text-red-500">{validationErrors.material_key}</p>
-			{/if}
+			<div class="min-h-[20px]">
+				{#if validationErrors.material_key}
+					<p class="text-sm text-red-500">{validationErrors.material_key}</p>
+				{:else if formData.material_description}
+					<span class="block truncate text-sm text-blue-600">
+						{formData.material_description}
+					</span>
+				{/if}
+			</div>
 		</div>
 	</div>
 
@@ -629,18 +773,21 @@
 						? 'border-red-500 focus-visible:ring-red-500'
 						: ''}"
 					maxlength={5}
-					onblur={() => validateField('unit_of_measure')}
+					onblur={handleUnitOfMeasureBlur}
 				/>
 				<Button type="button" variant="outline" size="icon" onclick={openUnitOfMeasureSearch}>
 					<Folder class="h-4 w-4" />
 				</Button>
-				<span class="cursor-pointer text-sm text-blue-600 hover:underline">
-					{formData.unit_of_measure_description || ''}
-				</span>
 			</div>
-			{#if validationErrors.unit_of_measure}
-				<p class="mt-1 text-sm text-red-500">{validationErrors.unit_of_measure}</p>
-			{/if}
+			<div class="min-h-[20px]">
+				{#if validationErrors.unit_of_measure}
+					<p class="text-sm text-red-500">{validationErrors.unit_of_measure}</p>
+				{:else if formData.unit_of_measure_description}
+					<span class="block truncate text-sm text-blue-600">
+						{formData.unit_of_measure_description}
+					</span>
+				{/if}
+			</div>
 		</div>
 
 		<div class="space-y-2">
@@ -656,15 +803,21 @@
 						? 'border-red-500 focus-visible:ring-red-500'
 						: ''}"
 					maxlength={10}
-					onblur={() => validateField('fraction')}
+					onblur={handleFractionBlur}
 				/>
 				<Button type="button" variant="outline" size="icon" onclick={openFractionSearch}>
 					<Folder class="h-4 w-4" />
 				</Button>
 			</div>
-			{#if validationErrors.fraction}
-				<p class="mt-1 text-sm text-red-500">{validationErrors.fraction}</p>
-			{/if}
+			<div class="min-h-[20px]">
+				{#if validationErrors.fraction}
+					<p class="text-sm text-red-500">{validationErrors.fraction}</p>
+				{:else if formData.fraction_description}
+					<span class="block truncate text-sm text-blue-600">
+						{formData.fraction_description}
+					</span>
+				{/if}
+			</div>
 		</div>
 	</div>
 
@@ -677,13 +830,21 @@
 					id="us_fraction"
 					bind:value={formData.us_fraction}
 					placeholder="Fracción americana"
-					class="flex-1"
-					maxlength={16}
+					class="flex-1 uppercase"
+					maxlength={10}
+					onblur={handleUSFractionBlur}
 				/>
 				<Button type="button" variant="outline" size="icon" onclick={openUSFractionSearch}>
 					<Folder class="h-4 w-4" />
 				</Button>
 			</div>
+			<div class="min-h-[20px]">
+				{#if formData.us_fraction_description}
+					<span class="block truncate text-sm text-blue-600">
+						{formData.us_fraction_description}
+					</span>
+				{/if}
+			</div>
 		</div>
 
 		<div class="space-y-2">
diff --git a/frontend/src/lib/components/help/HelpDrawer.svelte b/frontend/src/lib/components/help/HelpDrawer.svelte
index e2de2644..6f543bdf 100644
--- a/frontend/src/lib/components/help/HelpDrawer.svelte
+++ b/frontend/src/lib/components/help/HelpDrawer.svelte
@@ -121,13 +121,16 @@
 </script>
 
 <Sheet.Root bind:open={helpStore.isOpen}>
-	<Sheet.Trigger asChild>
-		<button
-			class="fixed right-6 bottom-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-110 active:scale-95"
-			aria-label="Ayuda"
-		>
-			<HelpCircle size={28} />
-		</button>
+	<Sheet.Trigger>
+		{#snippet child({ props })}
+			<button
+				{...props}
+				class="fixed right-6 bottom-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-110 active:scale-95"
+				aria-label="Ayuda"
+			>
+				<HelpCircle size={28} />
+			</button>
+		{/snippet}
 	</Sheet.Trigger>
 	<Sheet.Content side="right" class="w-[400px] sm:w-[540px]">
 		<Sheet.Header>
diff --git a/frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte b/frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte
index 3a9be85d..07a6d8bf 100644
--- a/frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte
+++ b/frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte
@@ -49,8 +49,9 @@
 		role="dialog"
 		aria-modal="true"
 	>
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 		<div
-			class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-2xl dark:bg-gray-900 text-gray-900 dark:text-gray-100 max-h-[80vh] overflow-y-auto"
+			class="max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-6 text-gray-900 shadow-2xl dark:bg-gray-900 dark:text-gray-100"
 			role="document"
 			bind:this={modalRef}
 			onkeydown={handleFocusTrap}
@@ -83,12 +84,14 @@
 				<!-- Global Navigation -->
 				<div>
 					<h3
-						class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
+						class="mb-3 text-sm font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400"
 					>
 						Global Navigation (Alt)
 					</h3>
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+					<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 					<div
-						class="space-y-2 max-h-64 overflow-y-auto pr-1"
+						class="max-h-64 space-y-2 overflow-y-auto pr-1"
 						role="region"
 						aria-label="Global Navigation shortcuts"
 						bind:this={globalList}
@@ -118,15 +121,17 @@
 				<!-- Local Actions -->
 				<div>
 					<h3
-						class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
+						class="mb-3 text-sm font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400"
 					>
 						Active Actions (Alt+Shift)
 					</h3>
 					{#if localShortcuts.length === 0}
-						<p class="text-sm italic text-gray-400">No specific actions for this view.</p>
+						<p class="text-sm text-gray-400 italic">No specific actions for this view.</p>
 					{:else}
+						<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<div
-							class="space-y-2 max-h-64 overflow-y-auto pr-1"
+							class="max-h-64 space-y-2 overflow-y-auto pr-1"
 							role="region"
 							aria-label="Active Actions shortcuts"
 							bind:this={localList}
diff --git a/frontend/src/lib/components/sidebar/nav-main.svelte b/frontend/src/lib/components/sidebar/nav-main.svelte
index ff5a24f7..ee5a38ab 100644
--- a/frontend/src/lib/components/sidebar/nav-main.svelte
+++ b/frontend/src/lib/components/sidebar/nav-main.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import * as Collapsible from "$lib/components/ui/collapsible/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-	import { useSidebar } from "$lib/components/ui/sidebar/context.svelte.js";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import { useSidebar } from '$lib/components/ui/sidebar/context.svelte.js';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 
 	let {
-		items,
+		items
 	}: {
 		items: {
 			title: string;
@@ -37,30 +37,30 @@
 	}
 
 	function handleTriggerEnter(title: string) {
-		if (sidebar.state !== "collapsed") return;
+		if (sidebar.state !== 'collapsed') return;
 		activeTitle = title;
 	}
 
 	function handleTriggerLeave(event: PointerEvent, title: string) {
-		if (sidebar.state !== "collapsed") return;
-		
+		if (sidebar.state !== 'collapsed') return;
+
 		// Si nos movemos al contenido (o nos quedamos en el trigger), no cerramos
 		if (shouldKeepOpen(event, title)) return;
-		
+
 		activeTitle = null;
 	}
 
 	function handleContentEnter(title: string) {
-		if (sidebar.state !== "collapsed") return;
+		if (sidebar.state !== 'collapsed') return;
 		activeTitle = title;
 	}
 
 	function handleContentLeave(event: PointerEvent, title: string) {
-		if (sidebar.state !== "collapsed") return;
-		
+		if (sidebar.state !== 'collapsed') return;
+
 		// Si nos movemos de vuelta al trigger (o dentro del contenido), no cerramos
 		if (shouldKeepOpen(event, title)) return;
-		
+
 		activeTitle = null;
 	}
 
@@ -81,23 +81,26 @@
 	<Sidebar.Menu>
 		{#each items as item (item.title)}
 			{#if item.items && item.items.length > 0}
-				{#if sidebar.state === "collapsed"}
+				{#if sidebar.state === 'collapsed'}
 					<!-- Sidebar Colapsado: Dropdown controlado por eventos estrictos -->
 					<Sidebar.MenuItem>
 						<DropdownMenu.Root
 							open={activeTitle === item.title}
 							onOpenChange={(v) => onOpenChange(v, item.title)}
-							modal={false}
 						>
-							<DropdownMenu.Trigger asChild>
+							<DropdownMenu.Trigger>
 								{#snippet child({ props })}
 									<div
 										id={`trigger-${item.title}`}
-										class="relative z-30 w-full flex justify-center"
+										class="relative z-30 flex w-full justify-center"
 										onpointerenter={() => handleTriggerEnter(item.title)}
 										onpointerleave={(e) => handleTriggerLeave(e, item.title)}
 									>
-										<Sidebar.MenuButton {...props} tooltipContent={null} class="justify-center">
+										<Sidebar.MenuButton
+											{...props}
+											tooltipContent={undefined}
+											class="justify-center"
+										>
 											{#if item.icon}
 												<item.icon />
 											{:else}
@@ -113,7 +116,7 @@
 								side="right"
 								align="start"
 								sideOffset={0}
-								class="z-50 w-64 rounded-lg p-0 shadow-lg overflow-visible"
+								class="z-50 w-64 overflow-visible rounded-lg p-0 shadow-lg"
 								id={`content-${item.title}`}
 								onpointerenter={() => handleContentEnter(item.title)}
 								onpointerleave={(e) => handleContentLeave(e, item.title)}
@@ -123,7 +126,9 @@
 								Posicionado con right-full para estar exactamente donde el trigger termina (offset 0).
 								Usamos w-8 h-8 para coincidir con un botón de tamaño estándar de sidebar.
 								-->
-								<div class="absolute right-full top-0 flex items-center justify-center bg-sidebar-accent text-sidebar-accent-foreground rounded-l-lg w-8 h-8 shadow-none border border-sidebar-border border-r-0 z-50">
+								<div
+									class="absolute top-0 right-full z-50 flex h-8 w-8 items-center justify-center rounded-l-lg border border-r-0 border-sidebar-border bg-sidebar-accent text-sidebar-accent-foreground shadow-none"
+								>
 									{#if item.icon}
 										<item.icon class="size-4 shrink-0" />
 									{:else}
@@ -134,19 +139,28 @@
 								<!-- 
 								Panel Principal
 								-->
-								<div class="w-full h-full p-1 pointer-events-auto bg-popover rounded-lg rounded-tl-none border border-sidebar-border ml-[0px]">
-									
+								<div
+									class="pointer-events-auto ml-[0px] h-full w-full rounded-lg rounded-tl-none border border-sidebar-border bg-popover p-1"
+								>
 									<!-- Título en el panel principal -->
-									<div class="px-2 py-2 text-sm font-medium border-b text-sidebar-foreground truncate">
+									<div
+										class="truncate border-b px-2 py-2 text-sm font-medium text-sidebar-foreground"
+									>
 										{item.title}
 									</div>
-									
+
 									<DropdownMenu.DropdownMenuGroup class="mt-1 max-h-80 overflow-y-auto">
 										{#each item.items as subItem (subItem.title)}
-											<DropdownMenu.DropdownMenuItem asChild>
-												<a href={subItem.url} class="flex w-full items-center gap-2 overflow-hidden">
-													<span class="truncate">{subItem.title}</span>
-												</a>
+											<DropdownMenu.DropdownMenuItem>
+												{#snippet child({ props })}
+													<a
+														href={subItem.url}
+														{...props}
+														class="flex w-full items-center gap-2 overflow-hidden"
+													>
+														<span class="truncate">{subItem.title}</span>
+													</a>
+												{/snippet}
 											</DropdownMenu.DropdownMenuItem>
 										{/each}
 									</DropdownMenu.DropdownMenuGroup>
@@ -209,4 +223,3 @@
 		{/each}
 	</Sidebar.Menu>
 </Sidebar.Group>
-
diff --git a/frontend/src/lib/components/ui/dialog/index.ts b/frontend/src/lib/components/ui/dialog/index.ts
index 1d37c04e..da8652a5 100644
--- a/frontend/src/lib/components/ui/dialog/index.ts
+++ b/frontend/src/lib/components/ui/dialog/index.ts
@@ -9,8 +9,8 @@ import Description from "./dialog-description.svelte";
 import Trigger from "./dialog-trigger.svelte";
 import Close from "./dialog-close.svelte";
 
-const Root = Dialog.Root;
-const Portal = Dialog.Portal;
+const Root = Dialog?.Root ?? (class { } as any);
+const Portal = Dialog?.Portal ?? (class { } as any);
 
 export {
 	Root,
diff --git a/frontend/src/routes/dashboard/users/+page.svelte b/frontend/src/routes/dashboard/users/+page.svelte
index 1edb8a30..2420caa4 100644
--- a/frontend/src/routes/dashboard/users/+page.svelte
+++ b/frontend/src/routes/dashboard/users/+page.svelte
@@ -2,9 +2,16 @@
 	import { usersAPI, type User, type UserStats } from '$lib/api/dashboard/users';
 	import { userRolesAPI, type UserRole } from '$lib/api/dashboard/admin/user-roles';
 	import { rolesAPI, type CompanyRole } from '$lib/api/dashboard/admin/roles';
-	import { rolePermissionsAPI, type RolePermission } from '$lib/api/dashboard/admin/role-permissions';
+	import {
+		rolePermissionsAPI,
+		type RolePermission
+	} from '$lib/api/dashboard/admin/role-permissions';
 	import { permissionsAPI, type Permission } from '$lib/api/dashboard/admin/permissions';
-	import { userPermissionsAPI, type UserPermission, type EffectiveUserPermissions } from '$lib/api/dashboard/admin/user-permissions';
+	import {
+		userPermissionsAPI,
+		type UserPermission,
+		type EffectiveUserPermissions
+	} from '$lib/api/dashboard/admin/user-permissions';
 	import { companyStore } from '$lib/stores/company.svelte';
 	import * as Card from '$lib/components/ui/card';
 	import * as Dialog from '$lib/components/ui/dialog';
@@ -20,13 +27,13 @@
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Checkbox } from '$lib/components/ui/checkbox';
-	import { 
-		Plus, 
-		Pencil, 
-		Trash2, 
-		Key, 
-		UserCheck, 
-		UserX, 
+	import {
+		Plus,
+		Pencil,
+		Trash2,
+		Key,
+		UserCheck,
+		UserX,
 		Search,
 		RefreshCw,
 		Users,
@@ -109,7 +116,7 @@
 
 		// Dividir el código en partes
 		const parts = permission.code.split('.');
-		
+
 		// Si solo tiene module.action, formatear simple
 		if (parts.length === 2) {
 			const [module, action] = parts;
@@ -120,8 +127,8 @@
 		// La última parte es la acción, el resto son módulos/submódulos
 		const action = parts[parts.length - 1];
 		const modules = parts.slice(0, -1);
-		
-		const modulePath = modules.map(m => getModuleLabel(m)).join(' › ');
+
+		const modulePath = modules.map((m) => getModuleLabel(m)).join(' › ');
 		return `${modulePath} - ${getActionLabel(action)}`;
 	}
 
@@ -164,9 +171,7 @@
 
 	// Roles disponibles que NO están asignados
 	const unassignedRoles = $derived(
-		availableRoles.filter(
-			role => !userRoles.some(ur => ur.company_role_id === role.id)
-		)
+		availableRoles.filter((role) => !userRoles.some((ur) => ur.company_role_id === role.id))
 	);
 
 	// Usuario seleccionado para editar/eliminar
@@ -250,7 +255,7 @@
 				page_size: pageSize,
 				search: searchTerm || undefined
 			});
-			
+
 			users = response.users;
 			totalPages = response.total_pages;
 		} catch (error: any) {
@@ -275,8 +280,13 @@
 
 	// Crear usuario
 	async function handleCreate() {
-		if (!createForm.email || !createForm.username || !createForm.first_name || 
-		    !createForm.last_name || !createForm.password) {
+		if (
+			!createForm.email ||
+			!createForm.username ||
+			!createForm.first_name ||
+			!createForm.last_name ||
+			!createForm.password
+		) {
 			toast.error('Por favor complete todos los campos requeridos');
 			return;
 		}
@@ -385,7 +395,9 @@
 
 		try {
 			await usersAPI.delete(selectedUser.id, companyId, softDelete);
-			toast.success(softDelete ? 'Usuario desactivado exitosamente' : 'Usuario eliminado permanentemente');
+			toast.success(
+				softDelete ? 'Usuario desactivado exitosamente' : 'Usuario eliminado permanentemente'
+			);
 			showDeleteDialog = false;
 			selectedUser = null;
 			await Promise.all([loadUsers(), loadStats()]);
@@ -429,10 +441,14 @@
 		}
 
 		try {
-			await usersAPI.changePassword(selectedUser.id, {
-				password: passwordForm.password,
-				temporary: passwordForm.temporary
-			}, companyId);
+			await usersAPI.changePassword(
+				selectedUser.id,
+				{
+					password: passwordForm.password,
+					temporary: passwordForm.temporary
+				},
+				companyId
+			);
 			toast.success('Contraseña actualizada exitosamente');
 			showPasswordDialog = false;
 			selectedUser = null;
@@ -449,11 +465,7 @@
 	async function openRolesDialog(user: User) {
 		selectedUser = user;
 		showRolesDialog = true;
-		await Promise.all([
-			loadUserRoles(),
-			loadAvailableRoles(),
-			loadUserEffectivePermissions()
-		]);
+		await Promise.all([loadUserRoles(), loadAvailableRoles(), loadUserEffectivePermissions()]);
 	}
 
 	async function loadAvailableRoles() {
@@ -550,34 +562,34 @@
 
 	function openUserPermissionsDialog() {
 		if (!effectivePermissions) return;
-		
+
 		// Permisos disponibles son todos los permisos que no están:
 		// - Ya concedidos individualmente
 		// - Ya revocados individualmente
-		const grantedIds = new Set(effectivePermissions.granted_permissions.map(p => p.id));
-		const revokedIds = new Set(effectivePermissions.revoked_permissions.map(p => p.id));
-		
+		const grantedIds = new Set(effectivePermissions.granted_permissions.map((p) => p.id));
+		const revokedIds = new Set(effectivePermissions.revoked_permissions.map((p) => p.id));
+
 		availablePermissionsForUser = allPermissionsState.filter(
-			p => !grantedIds.has(p.id) && !revokedIds.has(p.id)
+			(p) => !grantedIds.has(p.id) && !revokedIds.has(p.id)
 		);
-		
+
 		selectedUserPermissionIds = [];
 		showUserPermissionsDialog = true;
 	}
 
 	function openGrantUserPermDialog() {
 		if (!effectivePermissions) return;
-		
+
 		// Permisos disponibles son todos los permisos que no están:
 		// - Ya concedidos individualmente
 		// - Ya revocados individualmente
-		const grantedIds = new Set(effectivePermissions.granted_permissions.map(p => p.id));
-		const revokedIds = new Set(effectivePermissions.revoked_permissions.map(p => p.id));
-		
+		const grantedIds = new Set(effectivePermissions.granted_permissions.map((p) => p.id));
+		const revokedIds = new Set(effectivePermissions.revoked_permissions.map((p) => p.id));
+
 		availablePermissionsForUser = allPermissionsState.filter(
-			p => !grantedIds.has(p.id) && !revokedIds.has(p.id)
+			(p) => !grantedIds.has(p.id) && !revokedIds.has(p.id)
 		);
-		
+
 		selectedUserPermissionIds = [];
 		permissionSearchQuery = '';
 		showGrantUserPermDialog = true;
@@ -593,11 +605,11 @@
 		try {
 			// Conceder cada permiso seleccionado
 			await Promise.all(
-				selectedUserPermissionIds.map(permId =>
+				selectedUserPermissionIds.map((permId) =>
 					userPermissionsAPI.grant(userId, companyId, permId)
 				)
 			);
-			
+
 			toast.success(`${selectedUserPermissionIds.length} permiso(s) concedido(s)`);
 			// Cerrar todos los diálogos
 			showGrantUserPermDialog = false;
@@ -644,7 +656,7 @@
 
 	function toggleUserPermission(permId: number) {
 		if (selectedUserPermissionIds.includes(permId)) {
-			selectedUserPermissionIds = selectedUserPermissionIds.filter(id => id !== permId);
+			selectedUserPermissionIds = selectedUserPermissionIds.filter((id) => id !== permId);
 		} else {
 			selectedUserPermissionIds = [...selectedUserPermissionIds, permId];
 		}
@@ -735,7 +747,7 @@
 
 	function updatePermissionsByModuleForRole() {
 		const grouped = new Map<string, Permission[]>();
-		
+
 		const filtered = availablePermissionsState.filter((p) => {
 			if (!permissionSearchQuery.trim()) return true;
 			const search = permissionSearchQuery.toLowerCase();
@@ -745,14 +757,14 @@
 				p.action.toLowerCase().includes(search)
 			);
 		});
-		
+
 		filtered.forEach((p) => {
 			if (!grouped.has(p.module)) {
 				grouped.set(p.module, []);
 			}
 			grouped.get(p.module)!.push(p);
 		});
-		
+
 		permissionsByModuleState = grouped;
 	}
 
@@ -823,23 +835,23 @@
 
 		try {
 			await rolesAPI.delete(roleToDelete.id, companyId);
-			
+
 			// Limpiar estado si el rol eliminado estaba seleccionado
 			if (selectedRoleForPermissions?.id === roleToDelete.id) {
 				selectedRoleForPermissions = null;
 				rolePermissionsState = [];
 			}
-			
+
 			showDeleteRoleDialog = false;
 			const deletedRoleId = roleToDelete.id;
 			roleToDelete = null;
-			
+
 			// Recargar listas
 			await Promise.all([loadRolesTab(), loadAvailableRoles()]);
-			
+
 			// Verificar que el rol ya no esté en la lista
-			rolesState = rolesState.filter(r => r.id !== deletedRoleId);
-			
+			rolesState = rolesState.filter((r) => r.id !== deletedRoleId);
+
 			toast.success('Rol eliminado permanentemente');
 		} catch (error: any) {
 			// Manejar error específico cuando el rol tiene usuarios asignados
@@ -857,7 +869,11 @@
 		if (!companyId || !selectedRoleForPermissions || selectedPermissionIds.length === 0) return;
 
 		try {
-			await rolePermissionsAPI.assignMultiple(selectedRoleForPermissions.id, companyId, selectedPermissionIds);
+			await rolePermissionsAPI.assignMultiple(
+				selectedRoleForPermissions.id,
+				companyId,
+				selectedPermissionIds
+			);
 			toast.success('Permisos asignados correctamente');
 			showPermissionsDialog = false;
 			await selectRoleForPermissions(selectedRoleForPermissions);
@@ -890,7 +906,6 @@
 		}
 	}
 
-
 	// Cargar datos reactivamente cuando cambia la compañía
 	$effect(() => {
 		const companyId = companyStore.activeCompany?.id;
@@ -900,9 +915,9 @@
 	});
 </script>
 
-<div class="container mx-auto py-6 space-y-6">
+<div class="container mx-auto space-y-6 py-6">
 	<!-- Header -->
-	<div class="flex justify-between items-center">
+	<div class="flex items-center justify-between">
 		<div>
 			<h1 class="text-3xl font-bold">Gestión de Usuarios y Roles</h1>
 			<p class="text-muted-foreground">Administra usuarios, roles y permisos de tu organización</p>
@@ -913,256 +928,270 @@
 	<Tabs.Root value="usuarios" class="w-full">
 		<Tabs.List class="grid w-full grid-cols-2">
 			<Tabs.Trigger value="usuarios">
-				<Users class="w-4 h-4 mr-2" />
+				<Users class="mr-2 h-4 w-4" />
 				Usuarios
 			</Tabs.Trigger>
 			<Tabs.Trigger value="roles">
-				<Shield class="w-4 h-4 mr-2" />
+				<Shield class="mr-2 h-4 w-4" />
 				Roles y Permisos
 			</Tabs.Trigger>
 		</Tabs.List>
 
 		<!-- Tab: Usuarios -->
-		<Tabs.Content value="usuarios" class="space-y-6 mt-6">
+		<Tabs.Content value="usuarios" class="mt-6 space-y-6">
 			<div class="flex justify-end">
-				<Button onclick={() => showCreateDialog = true}>
-					<Plus class="w-4 h-4 mr-2" />
+				<Button onclick={() => (showCreateDialog = true)}>
+					<Plus class="mr-2 h-4 w-4" />
 					Nuevo Usuario
 				</Button>
 			</div>
 
-	<!-- Estadísticas -->
-	{#if stats}
-		<div class="grid gap-4 md:grid-cols-4">
-			<Card.Root>
-				<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-					<Card.Title class="text-sm font-medium">Total Usuarios</Card.Title>
-					<Users class="h-4 w-4 text-muted-foreground" />
-				</Card.Header>
-				<Card.Content>
-					<div class="text-2xl font-bold">{stats.total_users}</div>
-				</Card.Content>
-			</Card.Root>
+			<!-- Estadísticas -->
+			{#if stats}
+				<div class="grid gap-4 md:grid-cols-4">
+					<Card.Root>
+						<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+							<Card.Title class="text-sm font-medium">Total Usuarios</Card.Title>
+							<Users class="h-4 w-4 text-muted-foreground" />
+						</Card.Header>
+						<Card.Content>
+							<div class="text-2xl font-bold">{stats.total_users}</div>
+						</Card.Content>
+					</Card.Root>
 
-			<Card.Root>
-				<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-					<Card.Title class="text-sm font-medium">Activos</Card.Title>
-					<UserCheck class="h-4 w-4 text-green-600" />
-				</Card.Header>
-				<Card.Content>
-					<div class="text-2xl font-bold text-green-600">{stats.active_users}</div>
-				</Card.Content>
-			</Card.Root>
+					<Card.Root>
+						<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+							<Card.Title class="text-sm font-medium">Activos</Card.Title>
+							<UserCheck class="h-4 w-4 text-green-600" />
+						</Card.Header>
+						<Card.Content>
+							<div class="text-2xl font-bold text-green-600">{stats.active_users}</div>
+						</Card.Content>
+					</Card.Root>
 
-			<Card.Root>
-				<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-					<Card.Title class="text-sm font-medium">Disponibles</Card.Title>
-					<AlertCircle class="h-4 w-4 text-blue-600" />
-				</Card.Header>
-				<Card.Content>
-					<div class="text-2xl font-bold text-blue-600">{stats.users_available}</div>
-					<p class="text-xs text-muted-foreground">de {stats.max_users_allowed} permitidos</p>
-				</Card.Content>
-			</Card.Root>
+					<Card.Root>
+						<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+							<Card.Title class="text-sm font-medium">Disponibles</Card.Title>
+							<AlertCircle class="h-4 w-4 text-blue-600" />
+						</Card.Header>
+						<Card.Content>
+							<div class="text-2xl font-bold text-blue-600">{stats.users_available}</div>
+							<p class="text-xs text-muted-foreground">de {stats.max_users_allowed} permitidos</p>
+						</Card.Content>
+					</Card.Root>
 
-			<Card.Root>
-				<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
-					<Card.Title class="text-sm font-medium">Uso de Licencia</Card.Title>
-				</Card.Header>
-				<Card.Content>
-					<div class="text-2xl font-bold">{stats.usage_percentage.toFixed(1)}%</div>
-					<div class="w-full bg-gray-200 rounded-full h-2 mt-2">
-						<div 
-							class="h-2 rounded-full transition-all"
-							class:bg-green-600={stats.usage_percentage < 70}
-							class:bg-yellow-600={stats.usage_percentage >= 70 && stats.usage_percentage < 90}
-							class:bg-red-600={stats.usage_percentage >= 90}
-							style="width: {stats.usage_percentage}%"
-						></div>
-					</div>
-				</Card.Content>
-			</Card.Root>
-		</div>
-	{/if}
-
-	<!-- Tabla de usuarios -->
-	<Card.Root>
-		<Card.Header>
-			<div class="flex justify-between items-center">
-				<Card.Title>Usuarios</Card.Title>
-				<div class="flex gap-2">
-					<div class="relative">
-						<Search class="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-						<Input
-							type="text"
-							placeholder="Buscar usuarios..."
-							bind:value={searchTerm}
-							oninput={handleSearch}
-							class="pl-10 w-64"
-						/>
-					</div>
-					<Button variant="outline" size="icon" onclick={() => loadUsers()}>
-						<RefreshCw class={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-					</Button>
-				</div>
-			</div>
-		</Card.Header>
-		<Card.Content>
-			<Table.Root>
-				<Table.Header>
-					<Table.Row>
-						<Table.Head>Usuario</Table.Head>
-						<Table.Head>Email</Table.Head>
-						<Table.Head>Nombre</Table.Head>
-						<Table.Head>Rol</Table.Head>
-						<Table.Head>Estado</Table.Head>
-						<Table.Head class="text-right">Acciones</Table.Head>
-					</Table.Row>
-				</Table.Header>
-				<Table.Body>
-					{#if loading && users.length === 0}
-						<Table.Row>
-							<Table.Cell colspan={6} class="text-center py-8">
-								<RefreshCw class="h-8 w-8 animate-spin mx-auto text-muted-foreground" />
-							</Table.Cell>
-						</Table.Row>
-					{:else if users.length === 0}
-						<Table.Row>
-							<Table.Cell colspan={6} class="text-center py-8 text-muted-foreground">
-								No se encontraron usuarios
-							</Table.Cell>
-						</Table.Row>
-					{:else}
-						{#each users as user}
-							<Table.Row>
-								<Table.Cell class="font-medium">{user.username}</Table.Cell>
-								<Table.Cell>
-									<div class="flex items-center gap-2">
-										{user.email}
-										{#if user.email_verified}
-											<Badge variant="outline" class="text-xs">Verificado</Badge>
-										{/if}
-									</div>
-								</Table.Cell>
-								<Table.Cell>{user.first_name} {user.last_name}</Table.Cell>
-								<Table.Cell>
-									{#if user.role}
-										<div class="flex flex-wrap gap-1">
-											{#each user.role.split(', ') as roleName}
-												<Badge variant="secondary">{roleName}</Badge>
-											{/each}
-										</div>
-									{:else}
-										<span class="text-muted-foreground">-</span>
-									{/if}
-								</Table.Cell>
-								<Table.Cell>
-									{#if user.enabled}
-										<Badge variant="default" class="bg-green-600">Activo</Badge>
-									{:else}
-										<Badge variant="destructive">Inactivo</Badge>
-									{/if}
-								</Table.Cell>
-								<Table.Cell class="text-right">
-									<div class="flex justify-end gap-2">
-										<Tooltip.Root>
-											<Tooltip.Trigger asChild>
-												<Button 
-													variant="ghost" 
-													size="icon"
-													onclick={() => openRolesDialog(user)}
-													aria-label="Gestionar roles"
-												>
-													<Shield class="h-4 w-4" />
-												</Button>
-											</Tooltip.Trigger>
-											<Tooltip.Content side="top">Gestionar roles</Tooltip.Content>
-										</Tooltip.Root>
-										<Tooltip.Root>
-											<Tooltip.Trigger asChild>
-												<Button 
-													variant="ghost" 
-													size="icon"
-													onclick={() => openEditDialog(user)}
-													aria-label="Editar usuario"
-												>
-													<Pencil class="h-4 w-4" />
-												</Button>
-											</Tooltip.Trigger>
-											<Tooltip.Content side="top">Editar usuario</Tooltip.Content>
-										</Tooltip.Root>
-										<Tooltip.Root>
-											<Tooltip.Trigger asChild>
-												<Button 
-													variant="ghost" 
-													size="icon"
-													onclick={() => openPasswordDialog(user)}
-													aria-label="Restablecer contrasena"
-												>
-													<Key class="h-4 w-4" />
-												</Button>
-											</Tooltip.Trigger>
-											<Tooltip.Content side="top">Restablecer contrasena</Tooltip.Content>
-										</Tooltip.Root>
-										<Tooltip.Root>
-											<Tooltip.Trigger asChild>
-												<Button 
-													variant="ghost" 
-													size="icon"
-													onclick={() => openDeleteDialog(user)}
-													aria-label="Eliminar usuario"
-												>
-													<Trash2 class="h-4 w-4 text-destructive" />
-												</Button>
-											</Tooltip.Trigger>
-											<Tooltip.Content side="top">Eliminar usuario</Tooltip.Content>
-										</Tooltip.Root>
-									</div>
-								</Table.Cell>
-							</Table.Row>
-						{/each}
-					{/if}
-				</Table.Body>
-			</Table.Root>
-
-			<!-- Paginación -->
-			{#if totalPages > 1}
-				<div class="flex items-center justify-between mt-4">
-					<p class="text-sm text-muted-foreground">
-						Página {currentPage} de {totalPages}
-					</p>
-					<div class="flex gap-2">
-						<Button 
-							variant="outline" 
-							size="sm"
-							disabled={currentPage === 1}
-							onclick={() => goToPage(currentPage - 1)}
-						>
-							Anterior
-						</Button>
-						<Button 
-							variant="outline" 
-							size="sm"
-							disabled={currentPage === totalPages}
-							onclick={() => goToPage(currentPage + 1)}
-						>
-							Siguiente
-						</Button>
-					</div>
+					<Card.Root>
+						<Card.Header class="flex flex-row items-center justify-between space-y-0 pb-2">
+							<Card.Title class="text-sm font-medium">Uso de Licencia</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<div class="text-2xl font-bold">{stats.usage_percentage.toFixed(1)}%</div>
+							<div class="mt-2 h-2 w-full rounded-full bg-gray-200">
+								<div
+									class="h-2 rounded-full transition-all"
+									class:bg-green-600={stats.usage_percentage < 70}
+									class:bg-yellow-600={stats.usage_percentage >= 70 && stats.usage_percentage < 90}
+									class:bg-red-600={stats.usage_percentage >= 90}
+									style="width: {stats.usage_percentage}%"
+								></div>
+							</div>
+						</Card.Content>
+					</Card.Root>
 				</div>
 			{/if}
-		</Card.Content>
-	</Card.Root>
+
+			<!-- Tabla de usuarios -->
+			<Card.Root>
+				<Card.Header>
+					<div class="flex items-center justify-between">
+						<Card.Title>Usuarios</Card.Title>
+						<div class="flex gap-2">
+							<div class="relative">
+								<Search
+									class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground"
+								/>
+								<Input
+									type="text"
+									placeholder="Buscar usuarios..."
+									bind:value={searchTerm}
+									oninput={handleSearch}
+									class="w-64 pl-10"
+								/>
+							</div>
+							<Button variant="outline" size="icon" onclick={() => loadUsers()}>
+								<RefreshCw class={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+							</Button>
+						</div>
+					</div>
+				</Card.Header>
+				<Card.Content>
+					<Table.Root>
+						<Table.Header>
+							<Table.Row>
+								<Table.Head>Usuario</Table.Head>
+								<Table.Head>Email</Table.Head>
+								<Table.Head>Nombre</Table.Head>
+								<Table.Head>Rol</Table.Head>
+								<Table.Head>Estado</Table.Head>
+								<Table.Head class="text-right">Acciones</Table.Head>
+							</Table.Row>
+						</Table.Header>
+						<Table.Body>
+							{#if loading && users.length === 0}
+								<Table.Row>
+									<Table.Cell colspan={6} class="py-8 text-center">
+										<RefreshCw class="mx-auto h-8 w-8 animate-spin text-muted-foreground" />
+									</Table.Cell>
+								</Table.Row>
+							{:else if users.length === 0}
+								<Table.Row>
+									<Table.Cell colspan={6} class="py-8 text-center text-muted-foreground">
+										No se encontraron usuarios
+									</Table.Cell>
+								</Table.Row>
+							{:else}
+								{#each users as user}
+									<Table.Row>
+										<Table.Cell class="font-medium">{user.username}</Table.Cell>
+										<Table.Cell>
+											<div class="flex items-center gap-2">
+												{user.email}
+												{#if user.email_verified}
+													<Badge variant="outline" class="text-xs">Verificado</Badge>
+												{/if}
+											</div>
+										</Table.Cell>
+										<Table.Cell>{user.first_name} {user.last_name}</Table.Cell>
+										<Table.Cell>
+											{#if user.role}
+												<div class="flex flex-wrap gap-1">
+													{#each user.role.split(', ') as roleName}
+														<Badge variant="secondary">{roleName}</Badge>
+													{/each}
+												</div>
+											{:else}
+												<span class="text-muted-foreground">-</span>
+											{/if}
+										</Table.Cell>
+										<Table.Cell>
+											{#if user.enabled}
+												<Badge variant="default" class="bg-green-600">Activo</Badge>
+											{:else}
+												<Badge variant="destructive">Inactivo</Badge>
+											{/if}
+										</Table.Cell>
+										<Table.Cell class="text-right">
+											<div class="flex justify-end gap-2">
+												<Tooltip.Root>
+													<Tooltip.Trigger>
+														{#snippet child({ props })}
+															<Button
+																{...props}
+																variant="ghost"
+																size="icon"
+																onclick={() => openRolesDialog(user)}
+																aria-label="Gestionar roles"
+															>
+																<Shield class="h-4 w-4" />
+															</Button>
+														{/snippet}
+													</Tooltip.Trigger>
+													<Tooltip.Content side="top">Gestionar roles</Tooltip.Content>
+												</Tooltip.Root>
+												<Tooltip.Root>
+													<Tooltip.Trigger>
+														{#snippet child({ props })}
+															<Button
+																{...props}
+																variant="ghost"
+																size="icon"
+																onclick={() => openEditDialog(user)}
+																aria-label="Editar usuario"
+															>
+																<Pencil class="h-4 w-4" />
+															</Button>
+														{/snippet}
+													</Tooltip.Trigger>
+													<Tooltip.Content side="top">Editar usuario</Tooltip.Content>
+												</Tooltip.Root>
+												<Tooltip.Root>
+													<Tooltip.Trigger>
+														{#snippet child({ props })}
+															<Button
+																{...props}
+																variant="ghost"
+																size="icon"
+																onclick={() => openPasswordDialog(user)}
+																aria-label="Restablecer contrasena"
+															>
+																<Key class="h-4 w-4" />
+															</Button>
+														{/snippet}
+													</Tooltip.Trigger>
+													<Tooltip.Content side="top">Restablecer contrasena</Tooltip.Content>
+												</Tooltip.Root>
+												<Tooltip.Root>
+													<Tooltip.Trigger>
+														{#snippet child({ props })}
+															<Button
+																{...props}
+																variant="ghost"
+																size="icon"
+																onclick={() => openDeleteDialog(user)}
+																aria-label="Eliminar usuario"
+															>
+																<Trash2 class="h-4 w-4 text-destructive" />
+															</Button>
+														{/snippet}
+													</Tooltip.Trigger>
+													<Tooltip.Content side="top">Eliminar usuario</Tooltip.Content>
+												</Tooltip.Root>
+											</div>
+										</Table.Cell>
+									</Table.Row>
+								{/each}
+							{/if}
+						</Table.Body>
+					</Table.Root>
+
+					<!-- Paginación -->
+					{#if totalPages > 1}
+						<div class="mt-4 flex items-center justify-between">
+							<p class="text-sm text-muted-foreground">
+								Página {currentPage} de {totalPages}
+							</p>
+							<div class="flex gap-2">
+								<Button
+									variant="outline"
+									size="sm"
+									disabled={currentPage === 1}
+									onclick={() => goToPage(currentPage - 1)}
+								>
+									Anterior
+								</Button>
+								<Button
+									variant="outline"
+									size="sm"
+									disabled={currentPage === totalPages}
+									onclick={() => goToPage(currentPage + 1)}
+								>
+									Siguiente
+								</Button>
+							</div>
+						</div>
+					{/if}
+				</Card.Content>
+			</Card.Root>
 		</Tabs.Content>
 
 		<!-- Tab: Roles y Permisos -->
-		<Tabs.Content value="roles" class="space-y-6 mt-6">
-			<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+		<Tabs.Content value="roles" class="mt-6 space-y-6">
+			<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
 				<!-- Roles List -->
 				<div class="lg:col-span-1">
-					<div class="border rounded-lg p-4">
-						<div class="flex items-center justify-between mb-4">
-							<h2 class="text-lg font-semibold flex items-center gap-2">
+					<div class="rounded-lg border p-4">
+						<div class="mb-4 flex items-center justify-between">
+							<h2 class="flex items-center gap-2 text-lg font-semibold">
 								<Shield class="h-5 w-5" />
 								Roles
 							</h2>
@@ -1172,10 +1201,10 @@
 						</div>
 
 						{#if loadingRoles}
-							<p class="text-muted-foreground text-center py-4">Cargando...</p>
+							<p class="py-4 text-center text-muted-foreground">Cargando...</p>
 						{:else if rolesState.length === 0}
-							<div class="text-center py-8">
-								<p class="text-muted-foreground mb-4">No hay roles disponibles</p>
+							<div class="py-8 text-center">
+								<p class="mb-4 text-muted-foreground">No hay roles disponibles</p>
 								<Button size="sm" onclick={openCreateRoleDialog}>
 									<Plus class="mr-2 h-4 w-4" />
 									Crear primer rol
@@ -1185,20 +1214,20 @@
 							<div class="space-y-2">
 								{#each rolesState as role (role.id)}
 									<div
-										class="flex items-center gap-2 p-2 rounded-lg border {selectedRoleForPermissions?.id ===
+										class="flex items-center gap-2 rounded-lg border p-2 {selectedRoleForPermissions?.id ===
 										role.id
-											? 'bg-primary/10 border-primary'
+											? 'border-primary bg-primary/10'
 											: 'hover:bg-accent'}"
 									>
 										<Button
 											variant="ghost"
-											class="flex-1 justify-start h-auto p-2"
+											class="h-auto flex-1 justify-start p-2"
 											onclick={() => selectRoleForPermissions(role)}
 										>
-											<div class="flex flex-col items-start gap-1 w-full">
-												<div class="flex items-center gap-2 w-full">
+											<div class="flex w-full flex-col items-start gap-1">
+												<div class="flex w-full items-center gap-2">
 													<Shield class="h-4 w-4 flex-shrink-0" />
-													<span class="font-medium text-sm truncate">{role.name}</span>
+													<span class="truncate text-sm font-medium">{role.name}</span>
 												</div>
 												{#if !role.is_active}
 													<Badge variant="secondary" class="text-xs">Inactivo</Badge>
@@ -1233,10 +1262,10 @@
 				<!-- Permissions List -->
 				<div class="lg:col-span-2">
 					{#if selectedRoleForPermissions}
-						<div class="border rounded-lg">
-							<div class="p-4 border-b flex items-center justify-between">
+						<div class="rounded-lg border">
+							<div class="flex items-center justify-between border-b p-4">
 								<div>
-									<h2 class="text-lg font-semibold flex items-center gap-2">
+									<h2 class="flex items-center gap-2 text-lg font-semibold">
 										<Key class="h-5 w-5" />
 										Permisos de "{selectedRoleForPermissions.name}"
 									</h2>
@@ -1244,7 +1273,10 @@
 										{rolePermissionsState.length} permisos asignados
 									</p>
 								</div>
-								<Button onclick={openAddPermissionsDialog} disabled={availablePermissionsState.length === 0}>
+								<Button
+									onclick={openAddPermissionsDialog}
+									disabled={availablePermissionsState.length === 0}
+								>
 									<Plus class="mr-2 h-4 w-4" />
 									Agregar Permisos
 								</Button>
@@ -1256,19 +1288,19 @@
 										<Table.Head class="w-[150px]">Módulo</Table.Head>
 										<Table.Head class="w-[120px]">Acción</Table.Head>
 										<Table.Head>Permiso</Table.Head>
-										<Table.Head class="text-right w-[80px]">Acciones</Table.Head>
+										<Table.Head class="w-[80px] text-right">Acciones</Table.Head>
 									</Table.Row>
 								</Table.Header>
 								<Table.Body>
 									{#if loadingPermissionsState}
 										<Table.Row>
-											<Table.Cell colspan={4} class="text-center py-8">
+											<Table.Cell colspan={4} class="py-8 text-center">
 												Cargando permisos...
 											</Table.Cell>
 										</Table.Row>
 									{:else if rolePermissionsState.length === 0}
 										<Table.Row>
-											<Table.Cell colspan={4} class="text-center py-8">
+											<Table.Cell colspan={4} class="py-8 text-center">
 												Este rol no tiene permisos asignados
 											</Table.Cell>
 										</Table.Row>
@@ -1276,16 +1308,25 @@
 										{#each rolePermissionsState as rp (rp.id)}
 											<Table.Row>
 												<Table.Cell>
-													<Badge variant="outline">{rp.permission?.module ? getModuleLabel(rp.permission.module) : '-'}</Badge>
+													<Badge variant="outline"
+														>{rp.permission?.module
+															? getModuleLabel(rp.permission.module)
+															: '-'}</Badge
+													>
 												</Table.Cell>
 												<Table.Cell>
-													<span class="font-medium">{rp.permission?.action ? getActionLabel(rp.permission.action) : '-'}</span>
+													<span class="font-medium"
+														>{rp.permission?.action
+															? getActionLabel(rp.permission.action)
+															: '-'}</span
+													>
 												</Table.Cell>
 												<Table.Cell>
 													{#if rp.permission}
 														<div class="space-y-1">
 															<div>{formatPermissionLabel(rp.permission)}</div>
-															<code class="text-xs text-muted-foreground">{rp.permission.code}</code>
+															<code class="text-xs text-muted-foreground">{rp.permission.code}</code
+															>
 														</div>
 													{:else}
 														<span class="text-muted-foreground">-</span>
@@ -1308,8 +1349,8 @@
 							</Table.Root>
 						</div>
 					{:else}
-						<div class="border rounded-lg p-12 text-center">
-							<Shield class="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+						<div class="rounded-lg border p-12 text-center">
+							<Shield class="mx-auto mb-4 h-12 w-12 text-muted-foreground" />
 							<p class="text-muted-foreground">Selecciona un rol para ver sus permisos</p>
 						</div>
 					{/if}
@@ -1327,7 +1368,8 @@
 		<Dialog.Header>
 			<Dialog.Title>Crear Nuevo Usuario</Dialog.Title>
 			<Dialog.Description>
-				Ingresa la información del nuevo usuario. Se enviará un correo para configurar su contraseña.
+				Ingresa la información del nuevo usuario. Se enviará un correo para configurar su
+				contraseña.
 			</Dialog.Description>
 		</Dialog.Header>
 		<div class="space-y-4">
@@ -1356,7 +1398,7 @@
 			</div>
 		</div>
 		<Dialog.Footer>
-			<Button variant="outline" onclick={() => showCreateDialog = false}>Cancelar</Button>
+			<Button variant="outline" onclick={() => (showCreateDialog = false)}>Cancelar</Button>
 			<Button onclick={handleCreate}>Crear Usuario</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
@@ -1391,12 +1433,17 @@
 				<Label for="edit_enabled">Usuario activo</Label>
 			</div>
 			<div class="flex items-center space-x-2">
-				<input type="checkbox" id="edit_email_verified" bind:checked={editForm.email_verified} class="h-4 w-4" />
+				<input
+					type="checkbox"
+					id="edit_email_verified"
+					bind:checked={editForm.email_verified}
+					class="h-4 w-4"
+				/>
 				<Label for="edit_email_verified">Email verificado</Label>
 			</div>
 		</div>
 		<Dialog.Footer>
-			<Button variant="outline" onclick={() => showEditDialog = false}>Cancelar</Button>
+			<Button variant="outline" onclick={() => (showEditDialog = false)}>Cancelar</Button>
 			<Button onclick={handleUpdate}>Guardar Cambios</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
@@ -1421,12 +1468,17 @@
 				<Input id="confirm_password" type="password" bind:value={passwordForm.confirmPassword} />
 			</div>
 			<div class="flex items-center space-x-2">
-				<input type="checkbox" id="temporary" bind:checked={passwordForm.temporary} class="h-4 w-4" />
+				<input
+					type="checkbox"
+					id="temporary"
+					bind:checked={passwordForm.temporary}
+					class="h-4 w-4"
+				/>
 				<Label for="temporary">Contraseña temporal (debe cambiarla al iniciar sesión)</Label>
 			</div>
 		</div>
 		<Dialog.Footer>
-			<Button variant="outline" onclick={() => showPasswordDialog = false}>Cancelar</Button>
+			<Button variant="outline" onclick={() => (showPasswordDialog = false)}>Cancelar</Button>
 			<Button onclick={handleChangePassword}>Cambiar Contraseña</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
@@ -1446,11 +1498,14 @@
 		<AlertDialog.Footer>
 			<AlertDialog.Cancel>Cancelar</AlertDialog.Cancel>
 			<Button variant="outline" onclick={() => handleDelete(true)}>
-				<UserX class="w-4 h-4 mr-2" />
+				<UserX class="mr-2 h-4 w-4" />
 				Desactivar
 			</Button>
-			<AlertDialog.Action onclick={() => handleDelete(false)} class="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-				<Trash2 class="w-4 h-4 mr-2" />
+			<AlertDialog.Action
+				onclick={() => handleDelete(false)}
+				class="text-destructive-foreground bg-destructive hover:bg-destructive/90"
+			>
+				<Trash2 class="mr-2 h-4 w-4" />
 				Eliminar Permanente
 			</AlertDialog.Action>
 		</AlertDialog.Footer>
@@ -1461,9 +1516,7 @@
 	<Dialog.Content class="max-w-2xl">
 		<Dialog.Header>
 			<Dialog.Title>Gestionar Roles - {selectedUser?.username}</Dialog.Title>
-			<Dialog.Description>
-				Asigna o remueve roles para este usuario
-			</Dialog.Description>
+			<Dialog.Description>Asigna o remueve roles para este usuario</Dialog.Description>
 		</Dialog.Header>
 
 		<div class="space-y-6 py-4">
@@ -1475,27 +1528,25 @@
 						<RefreshCw class="h-6 w-6 animate-spin text-muted-foreground" />
 					</div>
 				{:else if userRoles.length === 0}
-					<div class="text-center py-8 text-muted-foreground">
+					<div class="py-8 text-center text-muted-foreground">
 						Este usuario no tiene roles asignados
 					</div>
 				{:else}
 					<div class="space-y-2">
 						{#each userRoles as userRole}
-							<div class="flex items-center justify-between p-3 border rounded-lg">
+							<div class="flex items-center justify-between rounded-lg border p-3">
 								<div class="flex items-center gap-3">
 									<Shield class="h-5 w-5 text-primary" />
 									<div>
-									<div class="font-medium">{userRole.company_role?.name || 'Rol desconocido'}</div>
+										<div class="font-medium">
+											{userRole.company_role?.name || 'Rol desconocido'}
+										</div>
 										<div class="text-sm text-muted-foreground">
-										Asignado el {new Date(userRole.created_at).toLocaleDateString()}
+											Asignado el {new Date(userRole.created_at).toLocaleDateString()}
 										</div>
 									</div>
 								</div>
-								<Button 
-									variant="ghost" 
-									size="sm"
-									onclick={() => removeRole(userRole.id)}
-								>
+								<Button variant="ghost" size="sm" onclick={() => removeRole(userRole.id)}>
 									<Trash2 class="h-4 w-4 text-destructive" />
 								</Button>
 							</div>
@@ -1503,24 +1554,33 @@
 					</div>
 				{/if}
 			</div>
-			
+
 			<!-- Asignar nuevo rol -->
 			<div class="space-y-2">
 				<Label>Asignar Nuevo Rol</Label>
 				{#if unassignedRoles.length === 0}
 					<p class="text-sm text-muted-foreground">
-						No hay roles disponibles. Para cambiar de rol, primero remueve el rol actual usando el botón de eliminar arriba.
+						No hay roles disponibles. Para cambiar de rol, primero remueve el rol actual usando el
+						botón de eliminar arriba.
 					</p>
 				{:else}
 					<div class="flex gap-2">
 						<Select.Root
 							type="single"
-							value={typeof selectedRoleId === 'number' ? selectedRoleId.toString() : selectedRoleId}
-							onValueChange={(v: string | undefined) => selectedRoleId = v ? parseInt(v) : 0}
+							value={typeof selectedRoleId === 'number'
+								? selectedRoleId.toString()
+								: selectedRoleId}
+							onValueChange={(v: string | undefined) => (selectedRoleId = v ? parseInt(v) : 0)}
 						>
 							<Select.Trigger class="flex-1">
-								{selectedRoleId && selectedRoleId !== 0 
-									? availableRoles.find(r => r.id === (typeof selectedRoleId === 'string' ? parseInt(selectedRoleId) : selectedRoleId))?.name || 'Selecciona un rol' 
+								{selectedRoleId && selectedRoleId !== 0
+									? availableRoles.find(
+											(r) =>
+												r.id ===
+												(typeof selectedRoleId === 'string'
+													? parseInt(selectedRoleId)
+													: selectedRoleId)
+										)?.name || 'Selecciona un rol'
 									: 'Selecciona un rol'}
 							</Select.Trigger>
 							<Select.Content>
@@ -1530,7 +1590,7 @@
 							</Select.Content>
 						</Select.Root>
 						<Button onclick={assignRole} disabled={!selectedRoleId || selectedRoleId === 0}>
-							<Plus class="h-4 w-4 mr-2" />
+							<Plus class="mr-2 h-4 w-4" />
 							Asignar
 						</Button>
 					</div>
@@ -1539,25 +1599,28 @@
 		</div>
 
 		<Dialog.Footer class="flex justify-between">
-			<Button variant="outline" onclick={() => {
-				if (selectedUser) {
-					loadUserEffectivePermissions().then(() => {
-						showRolesDialog = false;
-						showUserPermissionsDialog = true;
-					});
-				}
-			}}>
-				<Key class="h-4 w-4 mr-2" />
+			<Button
+				variant="outline"
+				onclick={() => {
+					if (selectedUser) {
+						loadUserEffectivePermissions().then(() => {
+							showRolesDialog = false;
+							showUserPermissionsDialog = true;
+						});
+					}
+				}}
+			>
+				<Key class="mr-2 h-4 w-4" />
 				Permisos Individuales
 			</Button>
-			<Button variant="outline" onclick={() => showRolesDialog = false}>Cerrar</Button>
+			<Button variant="outline" onclick={() => (showRolesDialog = false)}>Cerrar</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
 
 <!-- Diálogo Permisos Individuales de Usuario -->
 <Dialog.Root bind:open={showUserPermissionsDialog}>
-	<Dialog.Content class="max-w-3xl max-h-[85vh] overflow-hidden flex flex-col">
+	<Dialog.Content class="flex max-h-[85vh] max-w-3xl flex-col overflow-hidden">
 		<Dialog.Header>
 			<Dialog.Title>Permisos Individuales - {selectedUser?.username}</Dialog.Title>
 			<Dialog.Description>
@@ -1565,24 +1628,30 @@
 			</Dialog.Description>
 		</Dialog.Header>
 
-		<div class="overflow-y-auto flex-1 space-y-4 py-4">
+		<div class="flex-1 space-y-4 overflow-y-auto py-4">
 			{#if loadingUserPermissions}
 				<div class="flex items-center justify-center py-12">
 					<RefreshCw class="h-8 w-8 animate-spin text-muted-foreground" />
 				</div>
 			{:else if effectivePermissions}
 				<!-- Resumen de permisos -->
-				<div class="grid grid-cols-3 gap-3 p-4 bg-accent/50 rounded-lg">
+				<div class="grid grid-cols-3 gap-3 rounded-lg bg-accent/50 p-4">
 					<div class="text-center">
-						<div class="text-2xl font-bold text-primary">{effectivePermissions.role_permissions.length}</div>
+						<div class="text-2xl font-bold text-primary">
+							{effectivePermissions.role_permissions.length}
+						</div>
 						<div class="text-xs text-muted-foreground">Del Rol</div>
 					</div>
 					<div class="text-center">
-						<div class="text-2xl font-bold text-green-600">{effectivePermissions.granted_permissions.length}</div>
+						<div class="text-2xl font-bold text-green-600">
+							{effectivePermissions.granted_permissions.length}
+						</div>
 						<div class="text-xs text-muted-foreground">Concedidos Extra</div>
 					</div>
 					<div class="text-center">
-						<div class="text-2xl font-bold text-destructive">{effectivePermissions.revoked_permissions.length}</div>
+						<div class="text-2xl font-bold text-destructive">
+							{effectivePermissions.revoked_permissions.length}
+						</div>
 						<div class="text-xs text-muted-foreground">Revocados</div>
 					</div>
 				</div>
@@ -1591,17 +1660,17 @@
 				{#if effectivePermissions.granted_permissions.length > 0}
 					<div class="space-y-2">
 						<div class="flex items-center justify-between">
-							<Label class="text-green-600 flex items-center gap-2">
+							<Label class="flex items-center gap-2 text-green-600">
 								<Plus class="h-4 w-4" />
 								Permisos Extra Concedidos
 							</Label>
 							<Badge variant="secondary">{effectivePermissions.granted_permissions.length}</Badge>
 						</div>
-						<div class="space-y-1 border rounded-lg p-2 max-h-48 overflow-y-auto">
+						<div class="max-h-48 space-y-1 overflow-y-auto rounded-lg border p-2">
 							{#each effectivePermissions.granted_permissions as perm}
-								<div class="flex items-center justify-between px-3 py-2 hover:bg-accent/50 rounded">
-									<div class="flex-1 min-w-0">
-										<div class="text-sm font-medium truncate">{formatPermissionLabel(perm)}</div>
+								<div class="flex items-center justify-between rounded px-3 py-2 hover:bg-accent/50">
+									<div class="min-w-0 flex-1">
+										<div class="truncate text-sm font-medium">{formatPermissionLabel(perm)}</div>
 										<code class="text-xs text-muted-foreground">{perm.code}</code>
 									</div>
 									<Button
@@ -1622,17 +1691,19 @@
 				{#if effectivePermissions.revoked_permissions.length > 0}
 					<div class="space-y-2">
 						<div class="flex items-center justify-between">
-							<Label class="text-destructive flex items-center gap-2">
+							<Label class="flex items-center gap-2 text-destructive">
 								<AlertCircle class="h-4 w-4" />
 								Permisos Revocados del Rol
 							</Label>
 							<Badge variant="destructive">{effectivePermissions.revoked_permissions.length}</Badge>
 						</div>
-						<div class="space-y-1 border rounded-lg p-2 max-h-48 overflow-y-auto">
+						<div class="max-h-48 space-y-1 overflow-y-auto rounded-lg border p-2">
 							{#each effectivePermissions.revoked_permissions as perm}
-								<div class="flex items-center justify-between px-3 py-2 hover:bg-accent/50 rounded">
-									<div class="flex-1 min-w-0">
-										<div class="text-sm font-medium line-through truncate">{formatPermissionLabel(perm)}</div>
+								<div class="flex items-center justify-between rounded px-3 py-2 hover:bg-accent/50">
+									<div class="min-w-0 flex-1">
+										<div class="truncate text-sm font-medium line-through">
+											{formatPermissionLabel(perm)}
+										</div>
 										<code class="text-xs text-muted-foreground">{perm.code}</code>
 									</div>
 									<Button
@@ -1651,18 +1722,20 @@
 
 				<!-- Permisos del Rol (solo info + opción de revocar) -->
 				{#if effectivePermissions.role_permissions.length > 0}
-					<div class="space-y-2 pt-4 border-t">
+					<div class="space-y-2 border-t pt-4">
 						<div class="flex items-center justify-between">
 							<Label class="text-muted-foreground">Permisos Heredados del Rol</Label>
 							<Badge variant="outline">{effectivePermissions.role_permissions.length}</Badge>
 						</div>
-						<div class="text-xs text-muted-foreground space-y-1 max-h-48 overflow-y-auto border rounded-lg p-2">
+						<div
+							class="max-h-48 space-y-1 overflow-y-auto rounded-lg border p-2 text-xs text-muted-foreground"
+						>
 							{#each effectivePermissions.role_permissions as perm}
-								<div class="flex items-center justify-between px-2 py-1 hover:bg-accent/30 rounded">
-									<div class="flex-1 min-w-0 truncate">
+								<div class="flex items-center justify-between rounded px-2 py-1 hover:bg-accent/30">
+									<div class="min-w-0 flex-1 truncate">
 										{formatPermissionLabel(perm)}
 									</div>
-									{#if !effectivePermissions.revoked_permissions.some(r => r.id === perm.id)}
+									{#if !effectivePermissions.revoked_permissions.some((r) => r.id === perm.id)}
 										<Button
 											variant="ghost"
 											size="sm"
@@ -1681,21 +1754,27 @@
 		</div>
 
 		<Dialog.Footer class="flex-shrink-0">
-			<Button variant="outline" onclick={() => {
-				showUserPermissionsDialog = false;
-				showRolesDialog = true;
-			}}>
+			<Button
+				variant="outline"
+				onclick={() => {
+					showUserPermissionsDialog = false;
+					showRolesDialog = true;
+				}}
+			>
 				Volver a Roles
 			</Button>
 			<div class="flex-1"></div>
-			<Button variant="default" onclick={() => {
-				showUserPermissionsDialog = false;
-				openGrantUserPermDialog();
-			}}>
-				<Plus class="h-4 w-4 mr-2" />
+			<Button
+				variant="default"
+				onclick={() => {
+					showUserPermissionsDialog = false;
+					openGrantUserPermDialog();
+				}}
+			>
+				<Plus class="mr-2 h-4 w-4" />
 				Conceder Permisos
 			</Button>
-			<Button onclick={() => showUserPermissionsDialog = false}>Cerrar</Button>
+			<Button onclick={() => (showUserPermissionsDialog = false)}>Cerrar</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
@@ -1706,7 +1785,7 @@
 
 <!-- Diálogo Conceder Permisos a Usuario -->
 <Dialog.Root bind:open={showGrantUserPermDialog}>
-	<Dialog.Content class="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+	<Dialog.Content class="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
 		<Dialog.Header>
 			<Dialog.Title>Conceder Permisos Extra a {selectedUser?.username}</Dialog.Title>
 			<Dialog.Description>
@@ -1714,7 +1793,7 @@
 			</Dialog.Description>
 		</Dialog.Header>
 
-		<div class="overflow-y-auto flex-1 py-4">
+		<div class="flex-1 overflow-y-auto py-4">
 			<div class="px-4 pb-2">
 				<Input
 					type="text"
@@ -1725,42 +1804,54 @@
 			</div>
 
 			{#if availablePermissionsForUser.length === 0}
-				<p class="text-center text-muted-foreground py-8">
+				<p class="py-8 text-center text-muted-foreground">
 					No hay permisos disponibles para conceder
 				</p>
 			{:else}
 				<div class="space-y-4">
 					{#each [...availablePermissionsForUser.reduce((map, p) => {
-						const module = p.module;
-						if (!map.has(module)) map.set(module, []);
-						map.get(module).push(p);
-						return map;
-					}, new Map())] as [module, permissions] (module)}
-						<div class="border rounded-lg p-4">
-							<h3 class="font-semibold mb-3 flex items-center gap-2">
+							const module = p.module;
+							if (!map.has(module)) map.set(module, []);
+							map.get(module).push(p);
+							return map;
+						}, new Map())] as [module, permissions] (module)}
+						<div class="rounded-lg border p-4">
+							<h3 class="mb-3 flex items-center gap-2 font-semibold">
 								<Badge variant="secondary">{getModuleLabel(module)}</Badge>
-								<span class="text-xs text-muted-foreground">({permissions.length} {permissions.length === 1 ? 'permiso' : 'permisos'})</span>
+								<span class="text-xs text-muted-foreground"
+									>({permissions.length} {permissions.length === 1 ? 'permiso' : 'permisos'})</span
+								>
 							</h3>
 							<div class="space-y-2">
 								{#each permissions as permission (permission.id)}
-									{#if !permissionSearchQuery || formatPermissionLabel(permission).toLowerCase().includes(permissionSearchQuery.toLowerCase()) || permission.code.toLowerCase().includes(permissionSearchQuery.toLowerCase())}
-										<div class="flex items-start space-x-3 p-2 rounded hover:bg-accent/50 transition-colors">
+									{#if !permissionSearchQuery || formatPermissionLabel(permission)
+											.toLowerCase()
+											.includes(permissionSearchQuery.toLowerCase()) || permission.code
+											.toLowerCase()
+											.includes(permissionSearchQuery.toLowerCase())}
+										<div
+											class="flex items-start space-x-3 rounded p-2 transition-colors hover:bg-accent/50"
+										>
 											<Checkbox
 												id="user-perm-{permission.id}"
 												checked={selectedUserPermissionIds.includes(permission.id)}
 												onCheckedChange={() => toggleUserPermission(permission.id)}
 											/>
-											<div class="flex-1 min-w-0">
+											<div class="min-w-0 flex-1">
 												<Label
 													for="user-perm-{permission.id}"
-													class="text-sm font-medium leading-none cursor-pointer block"
+													class="block cursor-pointer text-sm leading-none font-medium"
 													title={getPermissionHint(permission)}
 												>
 													{formatPermissionLabel(permission)}
 												</Label>
-												<div class="flex items-center gap-2 mt-1.5">
-													<Badge variant="outline" class="text-xs font-mono">{getActionLabel(permission.action)}</Badge>
-													<code class="text-xs text-muted-foreground truncate">{permission.code}</code>
+												<div class="mt-1.5 flex items-center gap-2">
+													<Badge variant="outline" class="font-mono text-xs"
+														>{getActionLabel(permission.action)}</Badge
+													>
+													<code class="truncate text-xs text-muted-foreground"
+														>{permission.code}</code
+													>
 												</div>
 											</div>
 										</div>
@@ -1774,8 +1865,11 @@
 		</div>
 
 		<Dialog.Footer class="flex-shrink-0">
-			<Button variant="outline" onclick={() => showGrantUserPermDialog = false}>Cancelar</Button>
-			<Button onclick={handleGrantUserPermissions} disabled={selectedUserPermissionIds.length === 0}>
+			<Button variant="outline" onclick={() => (showGrantUserPermDialog = false)}>Cancelar</Button>
+			<Button
+				onclick={handleGrantUserPermissions}
+				disabled={selectedUserPermissionIds.length === 0}
+			>
 				Conceder {selectedUserPermissionIds.length} permiso(s)
 			</Button>
 		</Dialog.Footer>
@@ -1784,12 +1878,12 @@
 
 <!-- Add Permissions Dialog -->
 <Dialog.Root bind:open={showPermissionsDialog}>
-	<Dialog.Content class="max-w-2xl max-h-[80vh]">
+	<Dialog.Content class="max-h-[80vh] max-w-2xl">
 		<Dialog.Header>
 			<Dialog.Title>Agregar Permisos a "{selectedRoleForPermissions?.name}"</Dialog.Title>
 		</Dialog.Header>
 
-		<div class="overflow-y-auto max-h-96 py-4">
+		<div class="max-h-96 overflow-y-auto py-4">
 			<div class="px-4 pb-2">
 				<Input
 					type="text"
@@ -1801,36 +1895,43 @@
 			</div>
 
 			{#if availablePermissionsState.length === 0}
-				<p class="text-center text-muted-foreground py-8">
+				<p class="py-8 text-center text-muted-foreground">
 					No hay permisos disponibles para asignar
 				</p>
 			{:else}
 				<div class="space-y-4">
 					{#each [...permissionsByModuleState] as [module, permissions] (module)}
-						<div class="border rounded-lg p-4">
-							<h3 class="font-semibold mb-3 flex items-center gap-2">
+						<div class="rounded-lg border p-4">
+							<h3 class="mb-3 flex items-center gap-2 font-semibold">
 								<Badge variant="secondary">{getModuleLabel(module)}</Badge>
-								<span class="text-xs text-muted-foreground">({permissions.length} {permissions.length === 1 ? 'permiso' : 'permisos'})</span>
+								<span class="text-xs text-muted-foreground"
+									>({permissions.length} {permissions.length === 1 ? 'permiso' : 'permisos'})</span
+								>
 							</h3>
 							<div class="space-y-2">
 								{#each permissions as permission (permission.id)}
-									<div class="flex items-start space-x-3 p-2 rounded hover:bg-accent/50 transition-colors">
+									<div
+										class="flex items-start space-x-3 rounded p-2 transition-colors hover:bg-accent/50"
+									>
 										<Checkbox
 											id="perm-{permission.id}"
 											checked={selectedPermissionIds.includes(permission.id)}
 											onCheckedChange={() => togglePermission(permission.id)}
 										/>
-										<div class="flex-1 min-w-0">
+										<div class="min-w-0 flex-1">
 											<Label
 												for="perm-{permission.id}"
-												class="text-sm font-medium leading-none cursor-pointer block"
+												class="block cursor-pointer text-sm leading-none font-medium"
 												title={getPermissionHint(permission)}
 											>
 												{formatPermissionLabel(permission)}
 											</Label>
-											<div class="flex items-center gap-2 mt-1.5">
-												<Badge variant="outline" class="text-xs font-mono">{getActionLabel(permission.action)}</Badge>
-												<code class="text-xs text-muted-foreground truncate">{permission.code}</code>
+											<div class="mt-1.5 flex items-center gap-2">
+												<Badge variant="outline" class="font-mono text-xs"
+													>{getActionLabel(permission.action)}</Badge
+												>
+												<code class="truncate text-xs text-muted-foreground">{permission.code}</code
+												>
 											</div>
 										</div>
 									</div>
@@ -1902,12 +2003,17 @@
 			<AlertDialog.Title>¿Eliminar rol permanentemente?</AlertDialog.Title>
 			<AlertDialog.Description>
 				{#if roleToDelete}
-					Estás a punto de eliminar el rol <strong>"{roleToDelete.name}"</strong> de forma permanente.
+					Estás a punto de eliminar el rol <strong>"{roleToDelete.name}"</strong> de forma
+					permanente.
 					<br /><br />
-					Esta acción <strong class="text-destructive">NO se puede deshacer</strong> y el rol será eliminado completamente del sistema.
+					Esta acción <strong class="text-destructive">NO se puede deshacer</strong> y el rol será
+					eliminado completamente del sistema.
 					<br /><br />
 					{#if rolePermissionsState.length > 0 && selectedRoleForPermissions?.id === roleToDelete.id}
-						<span class="text-muted-foreground">Este rol tiene {rolePermissionsState.length} {rolePermissionsState.length === 1 ? 'permiso asignado' : 'permisos asignados'}.</span>
+						<span class="text-muted-foreground"
+							>Este rol tiene {rolePermissionsState.length}
+							{rolePermissionsState.length === 1 ? 'permiso asignado' : 'permisos asignados'}.</span
+						>
 					{/if}
 					<br />
 					Si solo deseas desactivarlo temporalmente, usa el interruptor "Activo" en el modo de edición.
@@ -1916,7 +2022,10 @@
 		</AlertDialog.Header>
 		<AlertDialog.Footer>
 			<AlertDialog.Cancel>Cancelar</AlertDialog.Cancel>
-			<AlertDialog.Action onclick={confirmDeleteRole} class="bg-destructive hover:bg-destructive/90">
+			<AlertDialog.Action
+				onclick={confirmDeleteRole}
+				class="bg-destructive hover:bg-destructive/90"
+			>
 				Eliminar permanentemente
 			</AlertDialog.Action>
 		</AlertDialog.Footer>