diff --git a/.gitignore b/.gitignore
index df6980ae..8628496d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,6 +30,7 @@ wheels/
 backend/.env
 frontend/.env
 backend/SCRIPTS/
+
 # IDEs
 .vscode/
 .idea/
diff --git a/backend/alembic/versions/7937209f9718_seed_initial_data.py b/backend/alembic/versions/7937209f9718_seed_initial_data.py
index a6fda94d..e41ecd80 100644
--- a/backend/alembic/versions/7937209f9718_seed_initial_data.py
+++ b/backend/alembic/versions/7937209f9718_seed_initial_data.py
@@ -73,9 +73,6 @@ from api.v1.modules.a76.general_catalogs.units_of_measure.seed_adua import (
 from api.v1.modules.a76.general_catalogs.fractions.tariff_fractions.seed import (
     seed as tariff_fractions_seed,
 )
-from api.v1.modules.a76.general_catalogs.fractions.historical_tariff_fractions.seed import (
-    seed as historical_tariff_fractions_seed,
-)
 from api.v1.modules.public.reference_data.trailer_types.seed import (
     seed as trailer_types_seed,
 )
@@ -429,25 +426,7 @@ def upgrade() -> None:
             f"INSERT INTO a76.unit_of_measure_oma (code, description) VALUES {val_add_oma} ON CONFLICT ON CONSTRAINT uq_uom_oma_code DO NOTHING;"
         )
 
-    # TABLA MAESTRA UOM
-    # TODO: Generar tenant_id y company_id correctos
-    val_uom = ", ".join(
-        [
-            f"({format_value(code)}, {format_value(desc)}, {format_value(desc_en)}, "
-            f"{format_value(customs)}, {format_value(american)}, {format_value(ace)}, {format_value(oma)}, 1, 1)"
-            for code, desc, desc_en, customs, american, ace, oma in units_of_measure_seed
-        ]
-    )
-    op.execute("ALTER TABLE a76.units_of_measure DISABLE TRIGGER ALL;")
-    op.execute(
-        f"""
-        INSERT INTO a76.units_of_measure 
-        (code, description, description_en, customs_code, american_code, ace_code, oma_code, tenant_id, company_id)
-        VALUES {val_uom}
-        ON CONFLICT (code, tenant_id, company_id) DO NOTHING;
-    """
-    )
-    op.execute("ALTER TABLE a76.units_of_measure ENABLE TRIGGER ALL;")
+    # TABLA MAESTRA UOM se genera ahora al crear una empresa
 
     # --- SEEDS CORE (Permissions) ---
 
@@ -501,45 +480,7 @@ def upgrade() -> None:
     """
     )
 
-    def format_bool(val):
-        """Convert boolean string to SQL boolean."""
-        if val is None or str(val).strip() == "" or str(val).upper() == "NONE":
-            return "NULL"
-        return "TRUE" if str(val).upper() == "TRUE" else "FALSE"
-
-    def format_timestamp(val):
-        """Format timestamp for PostgreSQL."""
-        if val is None or str(val).strip() == "" or str(val).upper() == "NONE":
-            return "NULL"
-        # El valor ya viene en formato 'YYYY-MM-DD HH:MM:SS'
-        return f"'{str(val)}'"
-
-    values_historical_fractions = ", ".join(
-        [
-            f"({format_value(historical_fraction)}, {format_value(nico)},{format_value(unit_measure)}, {format_value(country)}, "
-            f"{format_value(fraction_type)}, {format_value(sector)}, {format_value(import_tax)}, "
-            f"{format_value(export_tax)}, {format_timestamp(pub_date)}, {format_bool(is_immex)}, "
-            f"{format_bool(normal_temp)}, {format_bool(services_temp)}, {format_bool(certified_temp)}, "
-            f"{format_bool(by_log)}, {format_timestamp(end_date)}, "
-            f"1, 1)" # tenant_id=1, company_id=1
-            for historical_fraction, nico, unit_measure, country, fraction_type, sector, import_tax, export_tax, pub_date, is_immex, normal_temp, services_temp, certified_temp, by_log, end_date in historical_tariff_fractions_seed
-        ]
-    )
-
-    if values_historical_fractions:
-        op.execute("SET session_replication_role = replica;")
-        op.execute(
-            f"""
-            INSERT INTO a76.historical_tariff_fractions 
-            (historical_fraction, nico, unit_of_measure_code, country, fraction_type, sector, 
-             import_tax_rate, export_tax_rate, publication_date, is_immex, 
-             normal_temporality, services_temporality, certified_temporality, by_log, end_date,
-             tenant_id, company_id)
-            VALUES {values_historical_fractions}
-            ON CONFLICT DO NOTHING;
-        """
-        )
-        op.execute("SET session_replication_role = DEFAULT;")
+    # Historical Fractions se generan ahora al crear una empresa
 
 
 def downgrade() -> None:
diff --git a/backend/api/v1/modules/a76/general_catalogs/company/service.py b/backend/api/v1/modules/a76/general_catalogs/company/service.py
index 06b85f7d..e042cea9 100644
--- a/backend/api/v1/modules/a76/general_catalogs/company/service.py
+++ b/backend/api/v1/modules/a76/general_catalogs/company/service.py
@@ -3,6 +3,7 @@ Capa de servicio para lógica de negocio de empresa
 """
 
 import logging
+from datetime import datetime
 from typing import List, Optional, Tuple, Dict, Any
 
 from fastapi import HTTPException
@@ -12,7 +13,10 @@ from sqlalchemy.orm import Session
 from .dto import CompanyCreateDTO, CompanyResponseDTO, CompanyUpdateDTO
 from .models import Company
 from ...audit_log.services.service import AuditService
+from ..units_of_measure.seed import seed as units_of_measure_seed
+from ..fractions.historical_tariff_fractions.seed import seed as historical_tariff_fractions_seed
 from core.context import get_user_context
+from sqlalchemy import text
 
 logger = logging.getLogger(__name__)
 
@@ -34,7 +38,7 @@ class CompanyService:
         filters: Optional[Dict[str, Any]] = None,
     ) -> Tuple[List[Company], int]:
         """Get all companies for a tenant with pagination"""
-        query = db.query(Company).filter(Company.tenant_id == tenant_id)
+        query = db.query(Company).filter(Company.tenant_id == tenant_id, Company.deleted_at.is_(None))
 
         # Apply filters if provided
         if filters:
@@ -62,6 +66,7 @@ class CompanyService:
             .filter(
                 Company.id == company_id,
                 Company.tenant_id == tenant_id,
+                Company.deleted_at.is_(None)
             )
             .first()
         )
@@ -381,7 +386,10 @@ class CompanyService:
             if addr_ind2:
                 self.db.add(CompanyAddress(**addr_ind2, address_type='industrial2', company_id=db_company.id))
 
-            # 7. Commit
+            # 7. Seed company data (tenant/company dependent)
+            self._seed_company_data(self.db, tenant_id, db_company.id)
+
+            # 8. Commit
             self.db.commit()
 
             self.db.refresh(db_company)
@@ -584,17 +592,9 @@ class CompanyService:
         # ----------------------
 
         try:
-            # Cascading deletes are handled by relationship settings, but manual is safer here
-            if company.certification: db.delete(company.certification)
-            if company.prevalidator: db.delete(company.prevalidator)
-            if company.electronic_agent: db.delete(company.electronic_agent)
-            if company.ventanilla_unica: db.delete(company.ventanilla_unica)
-            if company.cfdi: db.delete(company.cfdi)
-            for cert in company.digital_certificates: db.delete(cert)
-            for addr in company.addresses: db.delete(addr)
-
+            company.deleted_at = datetime.utcnow()
+            
             db.flush()
-            db.delete(company)
             db.commit()
 
             # --- Audit Log ---
@@ -698,11 +698,68 @@ class CompanyService:
 
 
     # Custom methods
+    def _seed_company_data(self, db: Session, tenant_id: int, company_id: int):
+        """Seeds tenant/company dependent data for a new company"""
+        def format_value(val):
+            if val is None or str(val).strip() == "" or str(val).upper() == "NONE":
+                return "NULL"
+            return f"'{str(val).replace(chr(39), chr(39)*2)}'"
+
+        # 1. Units of Measure
+        val_uom = ", ".join(
+            [
+                f"({format_value(code)}, {format_value(desc)}, {format_value(desc_en)}, "
+                f"{format_value(customs)}, {format_value(american)}, {format_value(ace)}, {format_value(oma)}, {tenant_id}, {company_id})"
+                for code, desc, desc_en, customs, american, ace, oma in units_of_measure_seed
+            ]
+        )
+        
+        db.execute(text("ALTER TABLE a76.units_of_measure DISABLE TRIGGER ALL;"))
+        db.execute(text(f"INSERT INTO a76.units_of_measure (code, description, description_en, customs_code, american_code, ace_code, oma_code, tenant_id, company_id) VALUES {val_uom} ON CONFLICT (code, tenant_id, company_id) DO NOTHING;"))
+        db.execute(text("ALTER TABLE a76.units_of_measure ENABLE TRIGGER ALL;"))
+
+        # 2. Historical Tariff Fractions
+        def format_bool(val):
+            if val is None or str(val).strip() == "" or str(val).upper() == "NONE":
+                return "NULL"
+            return "TRUE" if str(val).upper() == "TRUE" else "FALSE"
+
+        def format_timestamp(val):
+            if val is None or str(val).strip() == "" or str(val).upper() == "NONE":
+                return "NULL"
+            return f"'{str(val)}'"
+
+        values_historical = ", ".join(
+            [
+                f"({format_value(historical_fraction)}, {format_value(nico)}, {format_value(unit_measure)}, {format_value(country)}, "
+                f"{format_value(fraction_type)}, {format_value(sector)}, {format_value(import_tax)}, "
+                f"{format_value(export_tax)}, {format_timestamp(pub_date)}, {format_bool(is_immex)}, "
+                f"{format_bool(normal_temp)}, {format_bool(services_temp)}, {format_bool(certified_temp)}, "
+                f"{format_bool(by_log)}, {format_timestamp(end_date)}, "
+                f"{tenant_id}, {company_id})"
+                for (historical_fraction, nico, unit_measure, country, fraction_type, sector, import_tax, 
+                        export_tax, pub_date, is_immex, normal_temp, services_temp, certified_temp, by_log, end_date) in historical_tariff_fractions_seed
+            ]
+        )
+
+        if values_historical:
+            db.execute(text("SET session_replication_role = replica;"))
+            db.execute(text(f"""
+                INSERT INTO a76.historical_tariff_fractions 
+                (historical_fraction, nico, unit_of_measure_code, country, fraction_type, sector, 
+                    import_tax_rate, export_tax_rate, publication_date, is_immex, 
+                    normal_temporality, services_temporality, certified_temporality, by_log, end_date,
+                    tenant_id, company_id)
+                VALUES {values_historical}
+                ON CONFLICT DO NOTHING;
+            """))
+            db.execute(text("SET session_replication_role = DEFAULT;"))
+
     def get_companies_by_tenant(self, tenant_id: int) -> List[Company]:
         """Get all companies for a tenant"""
         return (
             self.db.query(Company)
-            .filter(Company.tenant_id == tenant_id)
+            .filter(Company.tenant_id == tenant_id, Company.deleted_at.is_(None))
             .order_by(Company.name)
             .all()
         )
@@ -711,7 +768,7 @@ class CompanyService:
         """Check if a company exists for a tenant"""
         return (
             self.db.query(Company)
-            .filter(Company.tenant_id == tenant_id)
+            .filter(Company.tenant_id == tenant_id, Company.deleted_at.is_(None))
             .first()
             is not None
         )
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 6a61948f..3be97b57 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -266,7 +266,6 @@ services:
         max-size: "10m"
         max-file: "3"
 
-
   # celery
   celery_worker:
     build: ./backend
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..5e203e5b 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,27 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger>
-		<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>	
+		{#snippet child({ props })}
+			<Button {...props} 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>
+		{/snippet}
+	</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/help/HelpDrawer.svelte b/frontend/src/lib/components/help/HelpDrawer.svelte
index e2de2644..2fb4719f 100644
--- a/frontend/src/lib/components/help/HelpDrawer.svelte
+++ b/frontend/src/lib/components/help/HelpDrawer.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { authStore, currentUser } from '$lib/auth';
 	import * as Sheet from '$lib/components/ui/sheet';
 	import { Button } from '$lib/components/ui/button';
@@ -60,7 +59,8 @@
 			title: '',
 			content: '',
 			updated_at: '',
-			last_editor: ''
+			last_editor: '',
+			content_type: 'markdown'
 		}; // Mock for UI
 	}
 
@@ -100,8 +100,10 @@
 		}
 	}
 
-	onMount(() => {
-		loadArticles();
+	$effect(() => {
+		if (helpStore.isOpen && articles.length === 0 && !isLoading) {
+			loadArticles();
+		}
 	});
 
 	// Simple markdown renderer fallback if marked is not available
diff --git a/frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte b/frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte
index 3a9be85d..b59e08d1 100644
--- a/frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte
+++ b/frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte
@@ -53,6 +53,7 @@
 			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"
 			role="document"
 			bind:this={modalRef}
+			role="presentation"
 			onkeydown={handleFocusTrap}
 		>
 			<div
@@ -83,16 +84,19 @@
 				<!-- 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_element_interactions -->
 					<div
 						class="space-y-2 max-h-64 overflow-y-auto pr-1"
 						role="region"
 						aria-label="Global Navigation shortcuts"
 						bind:this={globalList}
-						tabindex="0"
+						tabindex="-1"
+						role="region"
+						aria-label="Global Navigation Shortcuts"
 						onkeydown={(event) => handleArrowScroll(event, globalList)}
 					>
 						{#each Object.entries(GLOBAL_CONF) as [key, route]}
@@ -118,19 +122,22 @@
 				<!-- 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_element_interactions -->
 						<div
 							class="space-y-2 max-h-64 overflow-y-auto pr-1"
 							role="region"
 							aria-label="Active Actions shortcuts"
 							bind:this={localList}
-							tabindex="0"
+							tabindex="-1"
+							role="region"
+							aria-label="Local Action Shortcuts"
 							onkeydown={(event) => handleArrowScroll(event, localList)}
 						>
 							{#each localShortcuts as shortcut}
diff --git a/frontend/src/lib/components/sidebar/nav-main.svelte b/frontend/src/lib/components/sidebar/nav-main.svelte
index ff5a24f7..18f8fb37 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,20 +139,29 @@
 								<!-- 
 								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>
+											<DropdownMenu.Item>
+												{#snippet child({ props })}
+													<a
+														{...props}
+														href={subItem.url}
+														class="flex w-full items-center gap-2 overflow-hidden"
+													>
+														<span class="truncate">{subItem.title}</span>
+													</a>
+												{/snippet}
+											</DropdownMenu.Item>
 										{/each}
 									</DropdownMenu.DropdownMenuGroup>
 								</div>
@@ -209,4 +223,3 @@
 		{/each}
 	</Sidebar.Menu>
 </Sidebar.Group>
-
diff --git a/frontend/src/lib/components/sidebar/nav-user.svelte b/frontend/src/lib/components/sidebar/nav-user.svelte
index ebf7eee3..ba3e2720 100644
--- a/frontend/src/lib/components/sidebar/nav-user.svelte
+++ b/frontend/src/lib/components/sidebar/nav-user.svelte
@@ -1,30 +1,30 @@
 <script lang="ts">
-	import * as Avatar from "$lib/components/ui/avatar/index.js";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import { useSidebar } from "$lib/components/ui/sidebar/index.js";
-	import BadgeCheckIcon from "@lucide/svelte/icons/badge-check";
-	import BellIcon from "@lucide/svelte/icons/bell";
-	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
-	import CreditCardIcon from "@lucide/svelte/icons/credit-card";
-	import LogOutIcon from "@lucide/svelte/icons/log-out";	
-	import LanguagesIcon from "@lucide/svelte/icons/languages";
-	import MoonIcon from "@lucide/svelte/icons/moon";
-	import SunIcon from "@lucide/svelte/icons/sun";
-	import { logout } from "$lib/auth";
-	import { cookieName } from "$lib/paraglide/runtime";
-	import { page } from "$app/state";
-	import { goto } from "$app/navigation";
-	import { browser } from "$app/environment";
-	import { getBackendAssetUrl } from "$lib/utils";
-	import AppVersion from "$lib/components/app-version.svelte";
+	import * as Avatar from '$lib/components/ui/avatar/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import { useSidebar } from '$lib/components/ui/sidebar/index.js';
+	import BadgeCheckIcon from '@lucide/svelte/icons/badge-check';
+	import BellIcon from '@lucide/svelte/icons/bell';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import CreditCardIcon from '@lucide/svelte/icons/credit-card';
+	import LogOutIcon from '@lucide/svelte/icons/log-out';
+	import LanguagesIcon from '@lucide/svelte/icons/languages';
+	import MoonIcon from '@lucide/svelte/icons/moon';
+	import SunIcon from '@lucide/svelte/icons/sun';
+	import { logout } from '$lib/auth';
+	import { cookieName } from '$lib/paraglide/runtime';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { getBackendAssetUrl } from '$lib/utils';
+	import AppVersion from '$lib/components/app-version.svelte';
 
 	let { user }: { user: { name: string; email: string; avatar: string } } = $props();
 	const sidebar = useSidebar();
-	
+
 	// URL completa del avatar
 	let avatarUrl = $derived(getBackendAssetUrl(user.avatar) || '/avatars/default.jpg');
-	
+
 	// Iniciales del usuario (2 primeras letras)
 	let initials = $derived(user.name.slice(0, 2).toUpperCase());
 
@@ -65,34 +65,34 @@
 
 	function toggleLanguage() {
 		if (!browser) return;
-		
+
 		// Leer la cookie actual para obtener el idioma real
-		const cookies = document.cookie.split(';').map(c => c.trim());
-		const localeCookie = cookies.find(c => c.startsWith(`${cookieName}=`));
+		const cookies = document.cookie.split(';').map((c) => c.trim());
+		const localeCookie = cookies.find((c) => c.startsWith(`${cookieName}=`));
 		const current = localeCookie ? localeCookie.split('=')[1] : 'en';
-		
+
 		// Alternar el idioma
 		const newLocale = current === 'en' ? 'es' : 'en';
-		
+
 		// Establecer la cookie del idioma
 		document.cookie = `${cookieName}=${newLocale}; path=/; max-age=34560000; SameSite=Lax`;
-		
+
 		// Recargar la página para que el servidor procese el nuevo idioma
 		window.location.reload();
 	}
 
 	function toggleTheme() {
 		if (!browser) return;
-		
+
 		const html = document.documentElement;
 		const newTheme = html.classList.contains('dark') ? 'light' : 'dark';
-		
+
 		if (newTheme === 'dark') {
 			html.classList.add('dark');
 		} else {
 			html.classList.remove('dark');
 		}
-		
+
 		// Guardar la preferencia en localStorage
 		localStorage.setItem('theme', newTheme);
 		isDarkMode = newTheme === 'dark';
@@ -123,7 +123,7 @@
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
 				class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
-				side={sidebar.isMobile ? "bottom" : "right"}
+				side={sidebar.isMobile ? 'bottom' : 'right'}
 				align="end"
 				sideOffset={4}
 			>
diff --git a/frontend/src/lib/components/sidebar/team-switcher.svelte b/frontend/src/lib/components/sidebar/team-switcher.svelte
index 1c071fdd..e0557c15 100644
--- a/frontend/src/lib/components/sidebar/team-switcher.svelte
+++ b/frontend/src/lib/components/sidebar/team-switcher.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import { useSidebar } from "$lib/components/ui/sidebar/index.js";
-	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
-	import BuildingIcon from "@lucide/svelte/icons/building";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import { companyStore } from "$lib/stores/company.svelte";
-	import { getBackendAssetUrl } from "$lib/utils";
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import { useSidebar } from '$lib/components/ui/sidebar/index.js';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import BuildingIcon from '@lucide/svelte/icons/building';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { getBackendAssetUrl } from '$lib/utils';
 
 	const sidebar = useSidebar();
 
@@ -14,95 +14,93 @@
 	let activeCompanyLogoUrl = $derived(
 		companyStore.activeCompany?.logo
 			? getBackendAssetUrl(
-				`v1/a76/company/${companyStore.activeCompany.id}/logo/image?t=${Date.now()}`
-			)
+					`v1/a76/company/${companyStore.activeCompany.id}/logo/image?t=${Date.now()}`
+				)
 			: null
 	);
 
 	// Iniciales de la compañía activa (2 primeras letras)
 	let activeCompanyInitials = $derived(
-		companyStore.activeCompany?.name?.slice(0, 2).toUpperCase() || "CO"
+		companyStore.activeCompany?.name?.slice(0, 2).toUpperCase() || 'CO'
 	);
 
 	// Fallback en degradé cuando no hay logo cargado
 	const fallbackBg =
-		"radial-gradient(circle at 30% 30%, rgba(0,0,0,0.08), rgba(0,0,0,0.12)), linear-gradient(135deg, rgba(99,102,241,0.12), rgba(14,165,233,0.18))";
+		'radial-gradient(circle at 30% 30%, rgba(0,0,0,0.08), rgba(0,0,0,0.12)), linear-gradient(135deg, rgba(99,102,241,0.12), rgba(14,165,233,0.18))';
 
-	const logoBg = $derived(
-		activeCompanyLogoUrl
-			? `url(${activeCompanyLogoUrl})`
-			: fallbackBg
-	);
+	const logoBg = $derived(activeCompanyLogoUrl ? `url(${activeCompanyLogoUrl})` : fallbackBg);
 </script>
 
 <Sidebar.Menu>
 	<Sidebar.MenuItem>
 		<DropdownMenu.Root>
-				<DropdownMenu.Trigger>
-					{#snippet child({ props })}
-						<Sidebar.MenuButton
-							{...props}
-							size="lg"
-							class="relative overflow-hidden data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-has-data-[state=collapsed]/sidebar-wrapper:aspect-square group-has-data-[state=collapsed]/sidebar-wrapper:h-10 group-has-data-[state=collapsed]/sidebar-wrapper:w-10 group-has-data-[state=collapsed]/sidebar-wrapper:rounded-lg group-has-data-[state=collapsed]/sidebar-wrapper:justify-center group-has-data-[state=collapsed]/sidebar-wrapper:gap-0"
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Sidebar.MenuButton
+						{...props}
+						size="lg"
+						class="relative overflow-hidden group-has-data-[state=collapsed]/sidebar-wrapper:aspect-square group-has-data-[state=collapsed]/sidebar-wrapper:h-10 group-has-data-[state=collapsed]/sidebar-wrapper:w-10 group-has-data-[state=collapsed]/sidebar-wrapper:justify-center group-has-data-[state=collapsed]/sidebar-wrapper:gap-0 group-has-data-[state=collapsed]/sidebar-wrapper:rounded-lg data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+					>
+						<div
+							class="flex aspect-square size-8 items-center justify-center overflow-hidden rounded-lg bg-sidebar-primary text-sidebar-primary-foreground group-has-data-[state=collapsed]/sidebar-wrapper:hidden"
 						>
-							<div
-								class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg overflow-hidden group-has-data-[state=collapsed]/sidebar-wrapper:hidden"
-							>
-								{#if activeCompanyLogoUrl}
-									<img
-										src={activeCompanyLogoUrl}
-										alt={companyStore.activeCompany?.name || "Company"}
-										class="size-full object-cover"
-										onerror={(e) => {
-											(e.currentTarget as HTMLImageElement).style.display = "none";
-										}}
-									/>
-								{:else}
-									<span class="text-sm font-semibold text-white">{activeCompanyInitials}</span>
-								{/if}
-							</div>
-							<div class="grid flex-1 text-left text-sm leading-tight min-w-0 group-has-data-[state=collapsed]/sidebar-wrapper:hidden">
-								<span class="truncate font-medium">
-									{companyStore.activeCompany?.name || "Seleccionar compañía"}
+							{#if activeCompanyLogoUrl}
+								<img
+									src={activeCompanyLogoUrl}
+									alt={companyStore.activeCompany?.name || 'Company'}
+									class="size-full object-cover"
+									onerror={(e) => {
+										(e.currentTarget as HTMLImageElement).style.display = 'none';
+									}}
+								/>
+							{:else}
+								<span class="text-sm font-semibold text-white">{activeCompanyInitials}</span>
+							{/if}
+						</div>
+						<div
+							class="grid min-w-0 flex-1 text-left text-sm leading-tight group-has-data-[state=collapsed]/sidebar-wrapper:hidden"
+						>
+							<span class="truncate font-medium">
+								{companyStore.activeCompany?.name || 'Seleccionar compañía'}
+							</span>
+							{#if companyStore.activeCompany?.rfc}
+								<span class="truncate text-xs text-muted-foreground">
+									{companyStore.activeCompany.rfc}
 								</span>
-								{#if companyStore.activeCompany?.rfc}
-									<span class="truncate text-xs text-muted-foreground">
-										{companyStore.activeCompany.rfc}
-									</span>
-								{/if}
-							</div>
-							<ChevronsUpDownIcon class="ml-auto size-4 group-has-data-[state=collapsed]/sidebar-wrapper:hidden" />
+							{/if}
+						</div>
+						<ChevronsUpDownIcon
+							class="ml-auto size-4 group-has-data-[state=collapsed]/sidebar-wrapper:hidden"
+						/>
 
-							<!-- Isotipo compacto visible solo en modo colapsado -->
-							<div
-								class="relative z-10 hidden size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-foreground text-sm font-semibold shadow-sm ring-1 ring-sidebar-border/40 group-has-data-[state=collapsed]/sidebar-wrapper:flex overflow-hidden"
-							>
-								{#if activeCompanyLogoUrl}
-									<img
-										src={activeCompanyLogoUrl}
-										alt={companyStore.activeCompany?.name || "Company"}
-										class="size-full object-cover"
-										onerror={(e) => {
-											(e.currentTarget as HTMLImageElement).style.display = "none";
-										}}
-									/>
-								{:else}
-									{activeCompanyInitials}
-								{/if}
-							</div>
-						</Sidebar.MenuButton>
-					{/snippet}
-				</DropdownMenu.Trigger>
+						<!-- Isotipo compacto visible solo en modo colapsado -->
+						<div
+							class="relative z-10 hidden size-8 items-center justify-center overflow-hidden rounded-md bg-sidebar-primary text-sm font-semibold text-sidebar-foreground shadow-sm ring-1 ring-sidebar-border/40 group-has-data-[state=collapsed]/sidebar-wrapper:flex"
+						>
+							{#if activeCompanyLogoUrl}
+								<img
+									src={activeCompanyLogoUrl}
+									alt={companyStore.activeCompany?.name || 'Company'}
+									class="size-full object-cover"
+									onerror={(e) => {
+										(e.currentTarget as HTMLImageElement).style.display = 'none';
+									}}
+								/>
+							{:else}
+								{activeCompanyInitials}
+							{/if}
+						</div>
+					</Sidebar.MenuButton>
+				{/snippet}
+			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
 				class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
 				align="start"
-				side={sidebar.isMobile ? "bottom" : "right"}
+				side={sidebar.isMobile ? 'bottom' : 'right'}
 				sideOffset={4}
 			>
-				<DropdownMenu.Label class="text-muted-foreground text-xs">
-					Mis Compañías
-				</DropdownMenu.Label>
-				
+				<DropdownMenu.Label class="text-xs text-muted-foreground">Mis Compañías</DropdownMenu.Label>
+
 				{#if companyStore.loading}
 					<DropdownMenu.Item disabled class="gap-2 p-2">
 						<span class="text-muted-foreground">Cargando...</span>
@@ -113,25 +111,28 @@
 					</DropdownMenu.Item>
 				{:else}
 					{#each companyStore.companies as company, index (company.id)}
-						<DropdownMenu.Item 
-							onSelect={() => companyStore.setActiveCompany(company)} 
-							class="gap-2 p-2 cursor-pointer"
+						<DropdownMenu.Item
+							onSelect={() => companyStore.setActiveCompany(company)}
+							class="cursor-pointer gap-2 p-2"
 						>
-							<div class="flex size-6 items-center justify-center rounded-md border overflow-hidden">
+							<div
+								class="flex size-6 items-center justify-center overflow-hidden rounded-md border"
+							>
 								{#if company.logo}
-									<img 
-										src={getBackendAssetUrl(`v1/a76/company/${company.id}/logo/image`)} 
+									<img
+										src={getBackendAssetUrl(`v1/a76/company/${company.id}/logo/image`)}
 										alt={company.name}
 										class="size-full rounded object-cover"
 									/>
 								{:else}
-									<span class="text-xs font-semibold">{company.name.slice(0, 2).toUpperCase()}</span>
+									<span class="text-xs font-semibold">{company.name.slice(0, 2).toUpperCase()}</span
+									>
 								{/if}
 							</div>
-							<div class="flex flex-1 flex-col min-w-0">
-								<span class="font-medium truncate">{company.name}</span>
+							<div class="flex min-w-0 flex-1 flex-col">
+								<span class="truncate font-medium">{company.name}</span>
 								{#if company.rfc}
-									<span class="text-xs text-muted-foreground truncate">{company.rfc}</span>
+									<span class="truncate text-xs text-muted-foreground">{company.rfc}</span>
 								{/if}
 							</div>
 							{#if companyStore.activeCompany?.id === company.id}
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
index 4bef683f..c358b708 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -1,47 +1,45 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const sidebarMenuButtonVariants = tv({
-		base: "peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+		base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
 		variants: {
 			variant: {
-				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
 				outline:
-					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+					'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
 			},
 			size: {
-				default: "h-8 text-sm",
-				sm: "h-7 text-xs",
-				lg: "group-data-[collapsible=icon]:p-0! h-12 text-sm",
-			},
+				default: 'h-8 text-sm',
+				sm: 'h-7 text-xs',
+				lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm'
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
+			variant: 'default',
+			size: 'default'
+		}
 	});
 
-	export type SidebarMenuButtonVariant = VariantProps<
-		typeof sidebarMenuButtonVariants
-	>["variant"];
-	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+	export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
 </script>
 
 <script lang="ts">
-	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
-	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import { mergeProps } from "bits-ui";
-	import type { ComponentProps, Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { useSidebar } from "./context.svelte.js";
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import { mergeProps } from 'bits-ui';
+	import type { ComponentProps, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useSidebar } from './context.svelte.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		child,
-		variant = "default",
-		size = "default",
+		variant = 'default',
+		size = 'default',
 		isActive = false,
 		tooltipContent,
 		tooltipContentProps,
@@ -59,11 +57,11 @@
 
 	const buttonProps = $derived({
 		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
-		"data-slot": "sidebar-menu-button",
-		"data-sidebar": "menu-button",
-		"data-size": size,
-		"data-active": isActive,
-		...restProps,
+		'data-slot': 'sidebar-menu-button',
+		'data-sidebar': 'menu-button',
+		'data-size': size,
+		'data-active': isActive,
+		...restProps
 	});
 </script>
 
@@ -90,10 +88,10 @@
 		<Tooltip.Content
 			side="right"
 			align="center"
-			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+			hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
 			{...tooltipContentProps}
 		>
-			{#if typeof tooltipContent === "string"}
+			{#if typeof tooltipContent === 'string'}
 				{tooltipContent}
 			{:else if tooltipContent}
 				{@render tooltipContent()}
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
index e495efe5..b040bc9c 100644
--- a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 0,
-		side = "top",
+		side = 'top',
 		children,
 		arrowClasses,
 		...restProps
@@ -22,7 +22,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+			'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground',
 			className
 		)}
 		{...restProps}
@@ -32,11 +32,11 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
-						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
-						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
-						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
-						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						'z-50 size-2.5 rotate-45 rounded-[2px] bg-primary',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
 						arrowClasses
 					)}
 					{...props}
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>
diff --git a/scripts/init_first_time.sh b/scripts/init_first_time.sh
index de1c32ae..d9f09601 100755
--- a/scripts/init_first_time.sh
+++ b/scripts/init_first_time.sh
@@ -137,6 +137,7 @@ POSTGRES_PORT="${POSTGRES_PORT:-5432}"
 POSTGRES_DB="${POSTGRES_DB:-anexo76_core}"
 POSTGRES_USER="${POSTGRES_USER:-postgres}"
 POSTGRES_PASSWORD="${POSTGRES_PASSWORD:-postgres}"
+BACKEND_URL="${BACKEND_URL:-http://localhost:8000}"
 
 DEMO_USERNAME="demo"
 DEMO_PASSWORD="demo123"
@@ -601,27 +602,6 @@ fi
 
 echo -e "${GREEN}✓ Tenant ID: ${TENANT_ID}${NC}"
 
-# Insertar company si no existe
-COMPANY_EXISTS=$(exec_pg_sql "SELECT COUNT(*) FROM a76.company WHERE tenant_id = ${TENANT_ID};")
-COMPANY_EXISTS=$(echo "$COMPANY_EXISTS" | xargs)
-
-if [ "$COMPANY_EXISTS" = "0" ]; then
-    exec_pg_sql "INSERT INTO a76.company (tenant_id, name, rfc, is_service_company, created_at, updated_at) VALUES (${TENANT_ID}, '${COMPANY_NAME}', '${COMPANY_RFC}', false, now(), now());" >/dev/null
-    exec_pg_sql_client "INSERT INTO a76.company (tenant_id, name, rfc, is_service_company, created_at, updated_at) VALUES (${TENANT_ID}, '${COMPANY_NAME}', '${COMPANY_RFC}', false, now(), now());" >/dev/null
-    echo -e "${GREEN}✓ Company creada (Hub y Cliente)${NC}"
-else
-    echo -e "${YELLOW}⚠ Company ya existe para este tenant${NC}"
-fi
-
-# Obtener ID de la company (necesario para user_tenants)
-COMPANY_ID=$(exec_pg_sql "SELECT id FROM a76.company WHERE tenant_id = ${TENANT_ID} LIMIT 1;" | xargs)
-if [ -z "$COMPANY_ID" ]; then
-    echo -e "${RED}✗ Error: No se pudo obtener el ID de la company${NC}"
-    exit 1
-fi
-COMPANY_INFO=$(exec_pg_sql "SELECT id, name FROM a76.company WHERE tenant_id = ${TENANT_ID} LIMIT 1;")
-echo -e "${GREEN}✓ Company ID: ${COMPANY_ID} | ${COMPANY_INFO}${NC}"
-
 # Agregar tenant_id al usuario demo en Keycloak
 echo -e "\n${YELLOW}Asignando tenant_id al usuario demo...${NC}"
 
@@ -636,14 +616,71 @@ curl -s -X PUT "${KEYCLOAK_URL}/admin/realms/${KEYCLOAK_REALM}/users/${USER_ID}"
 
 echo -e "${GREEN}✓ Atributo tenant_id asignado al usuario${NC}"
 
-# Agregar relación usuario-tenant en la base de datos (usar company_id real)
+
+
+# Obtener token de demo user para usar la API con su tenant
+echo "Obteniendo token de usuario demo..."
+DEMO_TOKEN_RESPONSE=$(curl -s -X POST "${KEYCLOAK_URL}/realms/${KEYCLOAK_REALM}/protocol/openid-connect/token" \
+  -H "Content-Type: application/x-www-form-urlencoded" \
+  -d "username=${DEMO_USERNAME}" \
+  -d "password=${DEMO_PASSWORD}" \
+  -d "grant_type=password" \
+  -d "client_id=anexo76-backend" \
+  -d "client_secret=${BACKEND_SECRET}")
+
+DEMO_ACCESS_TOKEN=$(echo "$DEMO_TOKEN_RESPONSE" | jq -r '.access_token // empty')
+
+if [ -z "$DEMO_ACCESS_TOKEN" ]; then
+    echo -e "${RED}✗ Error: No se pudo obtener el token de usuario demo${NC}"
+    exit 1
+fi
+
+# Insertar company si no existe
+COMPANY_EXISTS=$(exec_pg_sql "SELECT COUNT(*) FROM a76.company WHERE tenant_id = ${TENANT_ID};")
+COMPANY_EXISTS=$(echo "$COMPANY_EXISTS" | xargs)
+
+if [ "$COMPANY_EXISTS" = "0" ]; then
+    echo "  → Creando company mediante API..."
+    CREATE_COMPANY_RESPONSE=$(curl -s -w "\n%{http_code}" -X POST "${BACKEND_URL}/api/v1/a76/company" \
+      -H "Authorization: Bearer ${DEMO_ACCESS_TOKEN}" \
+      -H "Content-Type: application/json" \
+      -d "{
+        \"name\": \"${COMPANY_NAME}\",
+        \"rfc\": \"${COMPANY_RFC}\",
+        \"is_service_company\": false
+      }")
+    
+    HTTP_CODE=$(echo "$CREATE_COMPANY_RESPONSE" | tail -n1)
+    RESPONSE_BODY=$(echo "$CREATE_COMPANY_RESPONSE" | head -n -1)
+
+    if [ "$HTTP_CODE" = "201" ]; then
+        COMPANY_ID=$(echo "$RESPONSE_BODY" | jq -r '.id // empty')
+        echo -e "${GREEN}✓ Company creada exitosamente via API (Hub, Cliente replicado por DB trigger o servicio asíncrono)${NC}"
+    else
+        echo -e "${RED}✗ Error al crear company via API (HTTP ${HTTP_CODE})${NC}"
+        echo "Respuesta: $RESPONSE_BODY"
+        exit 1
+    fi
+else
+    echo -e "${YELLOW}⚠ Company ya existe para este tenant${NC}"
+    # Obtener información de la company existente
+    COMPANY_ID=$(exec_pg_sql "SELECT id FROM a76.company WHERE tenant_id = ${TENANT_ID} LIMIT 1;" | xargs)
+fi
+
+COMPANY_INFO=$(exec_pg_sql "SELECT name FROM a76.company WHERE id = ${COMPANY_ID} AND tenant_id = ${TENANT_ID} LIMIT 1;")
+echo -e "${GREEN}✓ Company: ${COMPANY_INFO}${NC}"
+echo -e "${GREEN}✓ Company ID: ${COMPANY_ID}${NC}"
+
+# Agregar relación usuario-tenant en la base de datos
 echo -e "\n${YELLOW}Creando relación usuario-tenant en la base de datos...${NC}"
 
-exec_pg_sql "INSERT INTO core.user_tenants (keycloak_user_id, tenant_id, company_id, role, is_active, created_at, updated_at) VALUES ('${USER_ID}', ${TENANT_ID}, 1, 'admin', true, now(), now()) ON CONFLICT (keycloak_user_id, tenant_id, company_id) DO UPDATE SET is_active = true, updated_at = CURRENT_TIMESTAMP;" >/dev/null
-exec_pg_sql_client "INSERT INTO core.user_tenants (keycloak_user_id, tenant_id, company_id, role, is_active, created_at, updated_at) VALUES ('${USER_ID}', ${TENANT_ID}, 1, 'admin', true, now(), now()) ON CONFLICT (keycloak_user_id, tenant_id, company_id) DO UPDATE SET is_active = true, updated_at = CURRENT_TIMESTAMP;" >/dev/null
+exec_pg_sql "INSERT INTO core.user_tenants (keycloak_user_id, tenant_id, company_id, role, is_active, created_at, updated_at) VALUES ('${USER_ID}', ${TENANT_ID}, ${COMPANY_ID}, 'admin', true, now(), now()) ON CONFLICT (keycloak_user_id, tenant_id, company_id) DO UPDATE SET is_active = true, updated_at = CURRENT_TIMESTAMP;" >/dev/null
+exec_pg_sql_client "INSERT INTO core.user_tenants (keycloak_user_id, tenant_id, company_id, role, is_active, created_at, updated_at) VALUES ('${USER_ID}', ${TENANT_ID}, ${COMPANY_ID}, 'admin', true, now(), now()) ON CONFLICT (keycloak_user_id, tenant_id, company_id) DO UPDATE SET is_active = true, updated_at = CURRENT_TIMESTAMP;" >/dev/null
 
 echo -e "${GREEN}✓ Relación usuario-tenant creada en la base de datos (Hub y Cliente)${NC}"
 
+
+
 ###############################################################################
 # 9. Crear licencia Enterprise para el tenant
 ###############################################################################