feature/app-laucher-mejoras

frontend/src/lib/components/sidebar/app-launcher.svelte

@@ -38,14 +38,14 @@
 		{#snippet child({ props })}
 			<button
 				{...props}
-				class="inline-flex size-8 shrink-0 items-center justify-center rounded-md
+				class="inline-flex size-10 shrink-0 select-none items-center justify-center rounded-md
 					text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
 					transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring
 					data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 				title="Aplicaciones"
 				aria-label="Abrir selector de aplicaciones"
 			>
-				<LayoutGridIcon class="size-4" />
+				<LayoutGridIcon class="size-5" />
 			</button>
 		{/snippet}
 	</DropdownMenu.Trigger>

frontend/src/lib/components/sidebar/app-sidebar.svelte

@@ -84,6 +84,21 @@
 		inventory: BarChart3Icon,
 	};
 
+	const SYSTEM_COLORS: Record<SystemType, { border: string; bg: string; iconBg: string; iconText: string }> = {
+		fixed_asset: {
+			border: 'border-amber-500/40',
+			bg: 'bg-amber-500/5 dark:bg-amber-500/10',
+			iconBg: 'bg-amber-500/10',
+			iconText: 'text-amber-600 dark:text-amber-400',
+		},
+		inventory: {
+			border: 'border-emerald-500/40',
+			bg: 'bg-emerald-500/5 dark:bg-emerald-500/10',
+			iconBg: 'bg-emerald-500/10',
+			iconText: 'text-emerald-600 dark:text-emerald-400',
+		},
+	};
+
 	onMount(() => {
 		const expandForKeyboardNav = () => {
 			sidebar.setOpen(true);
@@ -104,15 +119,15 @@
 				{@const activeLabel = systemStore.activeLabel}
 				{@const activeSystem = systemStore.activeSystem}
 				{@const Icon = activeSystem ? ACTIVE_ICONS[activeSystem] : null}
+				{@const colors = activeSystem ? SYSTEM_COLORS[activeSystem] : null}
 
 				<div
-					class="flex items-center gap-2 rounded-lg border border-primary/40 bg-primary/5 px-3 py-2 text-xs shadow-sm
+					class="flex items-center gap-2 rounded-lg border {colors?.border} {colors?.bg} px-3 py-2 text-xs shadow-sm"
-						dark:bg-primary/10"
 					aria-label={`Aplicación activa: ${activeLabel.name}`}
 					title={`Aplicación activa: ${activeLabel.name}`}
 				>
 					{#if Icon}
-						<div class="flex size-8 items-center justify-center rounded-md bg-primary/10 text-primary">
+						<div class="flex size-8 items-center justify-center rounded-md {colors?.iconBg} {colors?.iconText}">
 							<Icon class="size-4" />
 						</div>
 					{/if}