From e19c24b9ab324c82653ed7acd94f37a0cbaec227 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Mon, 22 Dec 2025 07:21:08 -0300
Subject: [PATCH] feat: enhance 'Almoxarifado' UI with new icons, improved
 layout, and updated styling for better user experience and accessibility

---
 .../configuracoes-almoxarifado/+page.svelte   | 700 +++++++++---------
 1 file changed, 368 insertions(+), 332 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/ti/configuracoes-almoxarifado/+page.svelte b/apps/web/src/routes/(dashboard)/ti/configuracoes-almoxarifado/+page.svelte
index 4fed926..a37f53c 100644
--- a/apps/web/src/routes/(dashboard)/ti/configuracoes-almoxarifado/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/configuracoes-almoxarifado/+page.svelte
@@ -3,7 +3,7 @@
 	import type { FunctionReference } from 'convex/server';
 	import { useConvexClient, useQuery } from 'convex-svelte';
 	import { resolve } from '$app/paths';
-	import { Settings, Save, AlertTriangle, Info, Barcode, Key, CheckCircle, XCircle } from 'lucide-svelte';
+	import { Settings, Save, AlertTriangle, Info, Barcode, Key, CheckCircle, XCircle, Warehouse, ClipboardList, Bell, Package, Shield } from 'lucide-svelte';
 
 	const client = useConvexClient();
 	const configAtual = useQuery(api.configuracaoAlmoxarifado.obterConfiguracao, {});
@@ -190,14 +190,16 @@
 	</div>
 
 	<!-- Cabeçalho -->
-	<div class="mb-6">
+	<div class="mb-8">
 		<div class="flex items-center gap-4">
-			<div class="rounded-xl bg-warning/20 p-3">
-				<Settings class="h-8 w-8 text-warning" strokeWidth={2} />
+			<div class="rounded-2xl bg-gradient-to-br from-warning/20 via-warning/10 to-warning/5 p-4 shadow-lg border border-warning/20">
+				<Settings class="h-10 w-10 text-warning" strokeWidth={2.5} />
 			</div>
-			<div>
-				<h1 class="text-3xl font-bold">Configurações de Almoxarifado</h1>
-				<p class="text-base-content/70">
+			<div class="flex-1">
+				<h1 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-warning to-warning/70 bg-clip-text text-transparent">
+					Configurações de Almoxarifado
+				</h1>
+				<p class="text-base-content/70 text-lg mt-1">
 					Configure parâmetros do sistema de almoxarifado. Acesso restrito à TI.
 				</p>
 			</div>
@@ -205,11 +207,11 @@
 	</div>
 
 	<!-- Alerta de Acesso Restrito -->
-	<div class="alert alert-warning mb-6 shadow-lg">
-		<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" />
+	<div class="alert alert-warning mb-8 shadow-lg border-warning/30 bg-warning/10">
+		<Shield class="h-6 w-6 shrink-0 text-warning" strokeWidth={2.5} />
 		<div>
-			<h3 class="font-bold">Acesso Restrito</h3>
-			<div class="text-sm">
+			<h3 class="font-bold text-base-content">Acesso Restrito</h3>
+			<div class="text-sm text-base-content/80 mt-1">
 				Esta página é restrita apenas para usuários com permissão de TI. Alterações aqui afetam
 				o comportamento de todo o sistema de almoxarifado.
 			</div>
@@ -224,207 +226,232 @@
 	{/if}
 
 	<!-- Formulário -->
-	<div class="card bg-base-100 shadow-xl">
-		<div class="card-body">
+	<div class="card bg-base-100 border border-base-300 shadow-2xl">
+		<div class="card-body p-8">
 			<form onsubmit={(e) => { e.preventDefault(); salvarConfiguracao(); }}>
 				<!-- Configurações Gerais -->
-				<div class="divider">
-					<h2 class="text-xl font-bold">Configurações Gerais</h2>
-				</div>
-
-				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-					<div class="form-control">
-						<label class="label">
-							<span class="label-text font-bold">Estoque Mínimo Padrão</span>
-						</label>
-						<input
-							type="number"
-							class="input input-bordered"
-							min="0"
-							bind:value={estoqueMinimoPadrao}
-							required
-						/>
-						<label class="label">
-							<span class="label-text-alt"
-								>Valor padrão usado para novos materiais quando não especificado</span
-							>
-						</label>
+				<div class="mb-10">
+					<div class="mb-6 flex items-center gap-3 border-b-2 border-primary/20 pb-4">
+						<div class="rounded-lg bg-primary/10 p-2.5">
+							<Warehouse class="h-5 w-5 text-primary" strokeWidth={2.5} />
+						</div>
+						<h2 class="text-xl font-bold text-base-content">Configurações Gerais</h2>
 					</div>
 
-					<div class="form-control">
-						<label class="label">
-							<span class="label-text font-bold">Dias de Antecedência para Alerta</span>
-						</label>
-						<input
-							type="number"
-							class="input input-bordered"
-							min="0"
-							bind:value={diasAntecedenciaAlerta}
-							required
-						/>
-						<label class="label">
-							<span class="label-text-alt"
-								>Dias antes do estoque mínimo para gerar alerta</span
-							>
-						</label>
-					</div>
-
-					<div class="form-control md:col-span-2">
-						<label class="label cursor-pointer justify-start gap-2">
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+						<div class="form-control">
+							<label class="label pb-2">
+								<span class="label-text font-semibold">Estoque Mínimo Padrão</span>
+							</label>
 							<input
-								type="checkbox"
-								class="checkbox checkbox-warning"
-								bind:checked={permitirEstoqueNegativo}
+								type="number"
+								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								min="0"
+								step="1"
+								bind:value={estoqueMinimoPadrao}
+								required
 							/>
-							<span class="label-text font-bold">Permitir Estoque Negativo</span>
-						</label>
-						<label class="label">
-							<span class="label-text-alt"
-								>Permite registrar saídas mesmo quando o estoque é insuficiente</span
-							>
-						</label>
+							<label class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Valor padrão usado para novos materiais quando não especificado</span
+								>
+							</label>
+						</div>
+
+						<div class="form-control">
+							<label class="label pb-2">
+								<span class="label-text font-semibold">Dias de Antecedência para Alerta</span>
+							</label>
+							<input
+								type="number"
+								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								min="0"
+								step="1"
+								bind:value={diasAntecedenciaAlerta}
+								required
+							/>
+							<label class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Dias antes do estoque mínimo para gerar alerta</span
+								>
+							</label>
+						</div>
+
+						<div class="form-control md:col-span-2">
+							<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
+								<input
+									type="checkbox"
+									class="checkbox checkbox-warning"
+									bind:checked={permitirEstoqueNegativo}
+								/>
+								<span class="label-text font-semibold">Permitir Estoque Negativo</span>
+							</label>
+							<label class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Permite registrar saídas mesmo quando o estoque é insuficiente</span
+								>
+							</label>
+						</div>
 					</div>
 				</div>
 
 				<!-- Configurações de Requisições -->
-				<div class="divider">
-					<h2 class="text-xl font-bold">Requisições</h2>
-				</div>
-
-				<div class="grid grid-cols-1 gap-6">
-					<div class="form-control">
-						<label class="label cursor-pointer justify-start gap-2">
-							<input
-								type="checkbox"
-								class="checkbox checkbox-warning"
-								bind:checked={requerAprovacaoRequisicao}
-							/>
-							<span class="label-text font-bold">Requer Aprovação de Requisições</span>
-						</label>
-						<label class="label">
-							<span class="label-text-alt"
-								>Se ativado, requisições precisam ser aprovadas antes de serem atendidas</span
-							>
-						</label>
+				<div class="mb-10">
+					<div class="mb-6 flex items-center gap-3 border-b-2 border-info/20 pb-4">
+						<div class="rounded-lg bg-info/10 p-2.5">
+							<ClipboardList class="h-5 w-5 text-info" strokeWidth={2.5} />
+						</div>
+						<h2 class="text-xl font-bold text-base-content">Requisições</h2>
 					</div>
 
-					<div class="form-control">
-						<label class="label">
-							<span class="label-text">Roles que Podem Aprovar</span>
-						</label>
-						<div class="alert alert-info">
-							<Info class="h-5 w-5" />
-							<span class="text-sm"
-								>Configure as roles no painel de permissões. Roles com permissão
-								'almoxarifado.aprovar_requisicao' podem aprovar requisições.</span
-							>
+					<div class="grid grid-cols-1 gap-6">
+						<div class="form-control">
+							<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
+								<input
+									type="checkbox"
+									class="checkbox checkbox-warning"
+									bind:checked={requerAprovacaoRequisicao}
+								/>
+								<span class="label-text font-semibold">Requer Aprovação de Requisições</span>
+							</label>
+							<label class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Se ativado, requisições precisam ser aprovadas antes de serem atendidas</span
+								>
+							</label>
+						</div>
+
+						<div class="form-control">
+							<label class="label pb-2">
+								<span class="label-text font-semibold">Roles que Podem Aprovar</span>
+							</label>
+							<div class="alert alert-info border-info/30 bg-info/10">
+								<Info class="h-5 w-5 text-info shrink-0" />
+								<span class="text-sm text-base-content/80"
+									>Configure as roles no painel de permissões. Roles com permissão
+									'almoxarifado.aprovar_requisicao' podem aprovar requisições.</span
+								>
+							</div>
 						</div>
 					</div>
 				</div>
 
 				<!-- Alertas e Notificações -->
-				<div class="divider">
-					<h2 class="text-xl font-bold">Alertas e Notificações</h2>
-				</div>
-
-				<div class="grid grid-cols-1 gap-6">
-					<div class="form-control">
-						<label class="label cursor-pointer justify-start gap-2">
-							<input
-								type="checkbox"
-								class="checkbox checkbox-warning"
-								bind:checked={emailAlertasAtivo}
-							/>
-							<span class="label-text font-bold">Ativar Alertas por Email</span>
-						</label>
-						<label class="label">
-							<span class="label-text-alt"
-								>Envia emails quando alertas de estoque são gerados</span
-							>
-						</label>
+				<div class="mb-10">
+					<div class="mb-6 flex items-center gap-3 border-b-2 border-warning/20 pb-4">
+						<div class="rounded-lg bg-warning/10 p-2.5">
+							<Bell class="h-5 w-5 text-warning" strokeWidth={2.5} />
+						</div>
+						<h2 class="text-xl font-bold text-base-content">Alertas e Notificações</h2>
 					</div>
 
-					{#if emailAlertasAtivo}
+					<div class="grid grid-cols-1 gap-6">
 						<div class="form-control">
-							<label class="label">
-								<span class="label-text font-bold">Emails Destinatários</span>
-							</label>
-							<div class="flex gap-2 mb-2">
+							<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
 								<input
-									type="email"
-									class="input input-bordered flex-1"
-									placeholder="email@exemplo.com"
-									bind:value={novoEmail}
-									onkeypress={(e) => {
-										if (e.key === 'Enter') {
-											e.preventDefault();
-											adicionarEmail();
-										}
-									}}
+									type="checkbox"
+									class="checkbox checkbox-warning"
+									bind:checked={emailAlertasAtivo}
 								/>
-								<button type="button" class="btn btn-primary" onclick={adicionarEmail}>
-									Adicionar
-								</button>
-							</div>
-							{#if emailsDestinatarios.length > 0}
-								<div class="flex flex-wrap gap-2">
-									{#each emailsDestinatarios as email}
-										<div class="badge badge-lg gap-2">
-											{email}
-											<button
-												type="button"
-												class="btn btn-ghost btn-xs"
-												onclick={() => removerEmail(email)}
-											>
-												×
-											</button>
-										</div>
-									{/each}
-								</div>
-							{:else}
-								<div class="alert alert-warning">
-									<AlertTriangle class="h-5 w-5" />
-									<span class="text-sm">Nenhum email adicionado</span>
-								</div>
-							{/if}
+								<span class="label-text font-semibold">Ativar Alertas por Email</span>
+							</label>
+							<label class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Envia emails quando alertas de estoque são gerados</span
+								>
+							</label>
 						</div>
-					{/if}
+
+						{#if emailAlertasAtivo}
+							<div class="form-control">
+								<label class="label pb-2">
+									<span class="label-text font-semibold">Emails Destinatários</span>
+								</label>
+								<div class="flex gap-3 mb-4">
+									<input
+										type="email"
+										class="input input-bordered flex-1 focus:input-primary transition-colors h-12"
+										placeholder="email@exemplo.com"
+										bind:value={novoEmail}
+										onkeypress={(e) => {
+											if (e.key === 'Enter') {
+												e.preventDefault();
+												adicionarEmail();
+											}
+										}}
+									/>
+									<button type="button" class="btn btn-primary h-12 shadow-lg hover:shadow-xl transition-all" onclick={adicionarEmail}>
+										Adicionar
+									</button>
+								</div>
+								{#if emailsDestinatarios.length > 0}
+									<div class="flex flex-wrap gap-2">
+										{#each emailsDestinatarios as email}
+											<div class="badge badge-lg gap-2 badge-primary">
+												{email}
+												<button
+													type="button"
+													class="btn btn-ghost btn-xs hover:btn-error"
+													onclick={() => removerEmail(email)}
+													title="Remover email"
+												>
+													×
+												</button>
+											</div>
+										{/each}
+									</div>
+								{:else}
+									<div class="alert alert-warning border-warning/30 bg-warning/10">
+										<AlertTriangle class="h-5 w-5 text-warning" />
+										<span class="text-sm font-medium">Nenhum email adicionado</span>
+									</div>
+								{/if}
+							</div>
+						{/if}
+					</div>
 				</div>
 
 				<!-- Inventário -->
-				<div class="divider">
-					<h2 class="text-xl font-bold">Inventário</h2>
-				</div>
+				<div class="mb-10">
+					<div class="mb-6 flex items-center gap-3 border-b-2 border-success/20 pb-4">
+						<div class="rounded-lg bg-success/10 p-2.5">
+							<Package class="h-5 w-5 text-success" strokeWidth={2.5} />
+						</div>
+						<h2 class="text-xl font-bold text-base-content">Inventário</h2>
+					</div>
 
-				<div class="grid grid-cols-1 gap-6">
-					<div class="form-control">
-						<label class="label">
-							<span class="label-text font-bold">Periodicidade de Inventário (dias)</span>
-						</label>
-						<input
-							type="number"
-							class="input input-bordered"
-							min="1"
-							bind:value={periodicidadeInventario}
-							required
-						/>
-						<label class="label">
-							<span class="label-text-alt"
-								>Intervalo recomendado entre inventários físicos</span
-							>
-						</label>
+					<div class="grid grid-cols-1 gap-6">
+						<div class="form-control">
+							<label class="label pb-2">
+								<span class="label-text font-semibold">Periodicidade de Inventário (dias)</span>
+							</label>
+							<input
+								type="number"
+								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								min="1"
+								step="1"
+								bind:value={periodicidadeInventario}
+								required
+							/>
+							<label class="label pt-1">
+								<span class="label-text-alt text-base-content/60"
+									>Intervalo recomendado entre inventários físicos</span
+								>
+							</label>
+						</div>
 					</div>
 				</div>
 
 				<!-- Botões -->
-				<div class="card-actions mt-6 justify-end">
-					<button type="submit" class="btn btn-warning" disabled={processando}>
+				<div class="card-actions mt-8 justify-end border-t-2 border-base-300 pt-6">
+					<button type="submit" class="btn btn-warning btn-lg min-w-[200px] shadow-lg hover:shadow-xl transition-all" disabled={processando}>
 						{#if processando}
 							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
 						{:else}
 							<Save class="h-5 w-5" />
+							Salvar Configurações
 						{/if}
-						Salvar Configurações
 					</button>
 				</div>
 			</form>
@@ -432,19 +459,21 @@
 	</div>
 
 	<!-- Configurações de Busca de Código de Barras -->
-	<div class="card bg-base-100 shadow-xl mt-6">
-		<div class="card-body">
-			<h2 class="card-title mb-6 text-2xl">
-				<Barcode class="h-6 w-6" />
-				Configurações de Busca de Código de Barras
-			</h2>
+	<div class="card bg-base-100 border border-base-300 shadow-2xl mt-8">
+		<div class="card-body p-8">
+			<div class="mb-6 flex items-center gap-3 border-b-2 border-primary/20 pb-4">
+				<div class="rounded-lg bg-primary/10 p-2.5">
+					<Barcode class="h-5 w-5 text-primary" strokeWidth={2.5} />
+				</div>
+				<h2 class="text-xl font-bold text-base-content">Configurações de Busca de Código de Barras</h2>
+			</div>
 
 			<!-- Informação sobre APIs Gratuitas -->
-			<div class="alert alert-info mb-6 shadow-lg">
-				<Info class="h-6 w-6 shrink-0" />
+			<div class="alert alert-info mb-8 shadow-lg border-info/30 bg-info/10">
+				<Info class="h-6 w-6 shrink-0 text-info" strokeWidth={2.5} />
 				<div>
-					<p class="font-semibold">APIs Gratuitas Disponíveis</p>
-					<p class="text-sm">
+					<p class="font-semibold text-base-content">APIs Gratuitas Disponíveis</p>
+					<p class="text-sm text-base-content/80 mt-1">
 						As APIs <strong>Busca Unificada</strong> e <strong>Open Food Facts</strong> funcionam sem
 						credenciais e estão sempre disponíveis. Você só precisa configurar as credenciais abaixo
 						se desejar usar as APIs pagas (GS1 Brasil, Bluesoft Cosmo, Product-Search.net).
@@ -453,185 +482,192 @@
 			</div>
 
 			<!-- GS1 Brasil -->
-			<div class="divider">
-				<div class="flex items-center gap-2">
-					<Key class="h-5 w-5 text-primary" />
-					<span class="font-semibold">GS1 Brasil</span>
-				</div>
-			</div>
-
-			<div class="form-control mb-4">
-				<label class="label cursor-pointer">
-					<span class="label-text font-medium">Ativar GS1 Brasil</span>
-					<input type="checkbox" class="toggle toggle-primary" bind:checked={gs1BrasilAtivo} />
-				</label>
-			</div>
-
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 mb-6">
-				<div class="form-control">
-					<label class="label" for="gs1-client-id">
-						<span class="label-text font-medium">Client ID</span>
-					</label>
-					<input
-						id="gs1-client-id"
-						type="text"
-						bind:value={gs1BrasilClientId}
-						placeholder="Seu Client ID"
-						class="input input-bordered"
-						disabled={!gs1BrasilAtivo}
-					/>
+			<div class="mb-10">
+				<div class="mb-6 flex items-center gap-3 border-b-2 border-primary/20 pb-4">
+					<div class="rounded-lg bg-primary/10 p-2.5">
+						<Key class="h-5 w-5 text-primary" strokeWidth={2.5} />
+					</div>
+					<h3 class="text-lg font-bold text-base-content">GS1 Brasil</h3>
 				</div>
 
-				<div class="form-control">
-					<label class="label" for="gs1-client-secret">
-						<span class="label-text font-medium">Client Secret</span>
+				<div class="form-control mb-6">
+					<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
+						<input type="checkbox" class="toggle toggle-primary" bind:checked={gs1BrasilAtivo} />
+						<span class="label-text font-semibold">Ativar GS1 Brasil</span>
 					</label>
-					<input
-						id="gs1-client-secret"
-						type="password"
-						bind:value={gs1BrasilClientSecret}
-						placeholder="Deixe em branco para manter atual"
-						class="input input-bordered"
-						disabled={!gs1BrasilAtivo}
-					/>
 				</div>
 
-				<div class="form-control">
-					<label class="label" for="gs1-token-url">
-						<span class="label-text font-medium">Token URL</span>
-					</label>
-					<input
-						id="gs1-token-url"
-						type="text"
-						bind:value={gs1BrasilTokenUrl}
-						placeholder="https://apicnp.gs1br.org/oauth/token"
-						class="input input-bordered"
-						disabled={!gs1BrasilAtivo}
-					/>
-				</div>
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div class="form-control">
+						<label class="label pb-2" for="gs1-client-id">
+							<span class="label-text font-semibold">Client ID</span>
+						</label>
+						<input
+							id="gs1-client-id"
+							type="text"
+							bind:value={gs1BrasilClientId}
+							placeholder="Seu Client ID"
+							class="input input-bordered w-full focus:input-primary transition-colors h-12"
+							disabled={!gs1BrasilAtivo}
+						/>
+					</div>
 
-				<div class="form-control">
-					<label class="label" for="gs1-api-url">
-						<span class="label-text font-medium">API URL</span>
-					</label>
-					<input
-						id="gs1-api-url"
-						type="text"
-						bind:value={gs1BrasilApiUrl}
-						placeholder="https://apicnp.gs1br.org/api/v1/products"
-						class="input input-bordered"
-						disabled={!gs1BrasilAtivo}
-					/>
+					<div class="form-control">
+						<label class="label pb-2" for="gs1-client-secret">
+							<span class="label-text font-semibold">Client Secret</span>
+						</label>
+						<input
+							id="gs1-client-secret"
+							type="password"
+							bind:value={gs1BrasilClientSecret}
+							placeholder="Deixe em branco para manter atual"
+							class="input input-bordered w-full focus:input-primary transition-colors h-12"
+							disabled={!gs1BrasilAtivo}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label pb-2" for="gs1-token-url">
+							<span class="label-text font-semibold">Token URL</span>
+						</label>
+						<input
+							id="gs1-token-url"
+							type="text"
+							bind:value={gs1BrasilTokenUrl}
+							placeholder="https://apicnp.gs1br.org/oauth/token"
+							class="input input-bordered w-full focus:input-primary transition-colors h-12"
+							disabled={!gs1BrasilAtivo}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label pb-2" for="gs1-api-url">
+							<span class="label-text font-semibold">API URL</span>
+						</label>
+						<input
+							id="gs1-api-url"
+							type="text"
+							bind:value={gs1BrasilApiUrl}
+							placeholder="https://apicnp.gs1br.org/api/v1/products"
+							class="input input-bordered w-full focus:input-primary transition-colors h-12"
+							disabled={!gs1BrasilAtivo}
+						/>
+					</div>
 				</div>
 			</div>
 
 			<!-- Bluesoft Cosmo -->
-			<div class="divider">
-				<div class="flex items-center gap-2">
-					<Key class="h-5 w-5 text-info" />
-					<span class="font-semibold">Bluesoft Cosmo</span>
-				</div>
-			</div>
-
-			<div class="form-control mb-4">
-				<label class="label cursor-pointer">
-					<span class="label-text font-medium">Ativar Bluesoft Cosmo</span>
-					<input type="checkbox" class="toggle toggle-info" bind:checked={bluesoftAtivo} />
-				</label>
-			</div>
-
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 mb-6">
-				<div class="form-control">
-					<label class="label" for="bluesoft-api-key">
-						<span class="label-text font-medium">API Key</span>
-					</label>
-					<input
-						id="bluesoft-api-key"
-						type="password"
-						bind:value={bluesoftApiKey}
-						placeholder="Deixe em branco para manter atual"
-						class="input input-bordered"
-						disabled={!bluesoftAtivo}
-					/>
+			<div class="mb-10">
+				<div class="mb-6 flex items-center gap-3 border-b-2 border-info/20 pb-4">
+					<div class="rounded-lg bg-info/10 p-2.5">
+						<Key class="h-5 w-5 text-info" strokeWidth={2.5} />
+					</div>
+					<h3 class="text-lg font-bold text-base-content">Bluesoft Cosmo</h3>
 				</div>
 
-				<div class="form-control">
-					<label class="label" for="bluesoft-api-url">
-						<span class="label-text font-medium">API URL</span>
+				<div class="form-control mb-6">
+					<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
+						<input type="checkbox" class="toggle toggle-info" bind:checked={bluesoftAtivo} />
+						<span class="label-text font-semibold">Ativar Bluesoft Cosmo</span>
 					</label>
-					<input
-						id="bluesoft-api-url"
-						type="text"
-						bind:value={bluesoftApiUrl}
-						placeholder="https://api.cosmos.bluesoft.io/v1/products"
-						class="input input-bordered"
-						disabled={!bluesoftAtivo}
-					/>
+				</div>
+
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div class="form-control">
+						<label class="label pb-2" for="bluesoft-api-key">
+							<span class="label-text font-semibold">API Key</span>
+						</label>
+						<input
+							id="bluesoft-api-key"
+							type="password"
+							bind:value={bluesoftApiKey}
+							placeholder="Deixe em branco para manter atual"
+							class="input input-bordered w-full focus:input-primary transition-colors h-12"
+							disabled={!bluesoftAtivo}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label pb-2" for="bluesoft-api-url">
+							<span class="label-text font-semibold">API URL</span>
+						</label>
+						<input
+							id="bluesoft-api-url"
+							type="text"
+							bind:value={bluesoftApiUrl}
+							placeholder="https://api.cosmos.bluesoft.io/v1/products"
+							class="input input-bordered w-full focus:input-primary transition-colors h-12"
+							disabled={!bluesoftAtivo}
+						/>
+					</div>
 				</div>
 			</div>
 
 			<!-- Product-Search.net -->
-			<div class="divider">
-				<div class="flex items-center gap-2">
-					<Key class="h-5 w-5 text-warning" />
-					<span class="font-semibold">Product-Search.net</span>
-				</div>
-			</div>
-
-			<div class="form-control mb-4">
-				<label class="label cursor-pointer">
-					<span class="label-text font-medium">Ativar Product-Search.net</span>
-					<input
-						type="checkbox"
-						class="toggle toggle-warning"
-						bind:checked={productSearchAtivo}
-					/>
-				</label>
-			</div>
-
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 mb-6">
-				<div class="form-control">
-					<label class="label" for="product-search-api-key">
-						<span class="label-text font-medium">API Key (Opcional)</span>
-					</label>
-					<input
-						id="product-search-api-key"
-						type="password"
-						bind:value={productSearchApiKey}
-						placeholder="Deixe em branco para manter atual"
-						class="input input-bordered"
-						disabled={!productSearchAtivo}
-					/>
+			<div class="mb-10">
+				<div class="mb-6 flex items-center gap-3 border-b-2 border-warning/20 pb-4">
+					<div class="rounded-lg bg-warning/10 p-2.5">
+						<Key class="h-5 w-5 text-warning" strokeWidth={2.5} />
+					</div>
+					<h3 class="text-lg font-bold text-base-content">Product-Search.net</h3>
 				</div>
 
-				<div class="form-control">
-					<label class="label" for="product-search-api-url">
-						<span class="label-text font-medium">API URL</span>
+				<div class="form-control mb-6">
+					<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-4 hover:bg-base-200 transition-colors">
+						<span class="label-text font-semibold">Ativar Product-Search.net</span>
+						<input
+							type="checkbox"
+							class="toggle toggle-warning"
+							bind:checked={productSearchAtivo}
+						/>
 					</label>
-					<input
-						id="product-search-api-url"
-						type="text"
-						bind:value={productSearchApiUrl}
-						placeholder="https://api.product-search.net/v1/products"
-						class="input input-bordered"
-						disabled={!productSearchAtivo}
-					/>
+				</div>
+
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div class="form-control">
+						<label class="label pb-2" for="product-search-api-key">
+							<span class="label-text font-semibold">API Key (Opcional)</span>
+						</label>
+						<input
+							id="product-search-api-key"
+							type="password"
+							bind:value={productSearchApiKey}
+							placeholder="Deixe em branco para manter atual"
+							class="input input-bordered w-full focus:input-primary transition-colors h-12"
+							disabled={!productSearchAtivo}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label pb-2" for="product-search-api-url">
+							<span class="label-text font-semibold">API URL</span>
+						</label>
+						<input
+							id="product-search-api-url"
+							type="text"
+							bind:value={productSearchApiUrl}
+							placeholder="https://api.product-search.net/v1/products"
+							class="input input-bordered w-full focus:input-primary transition-colors h-12"
+							disabled={!productSearchAtivo}
+						/>
+					</div>
 				</div>
 			</div>
 
 			<!-- Botões -->
-			<div class="card-actions justify-end mt-6">
+			<div class="card-actions justify-end mt-8 border-t-2 border-base-300 pt-6">
 				<button
-					class="btn btn-primary"
+					class="btn btn-primary btn-lg min-w-[280px] shadow-lg hover:shadow-xl transition-all"
 					onclick={salvarConfiguracaoCodigoBarras}
 					disabled={processandoCodigoBarras}
 				>
 					{#if processandoCodigoBarras}
 						<span class="loading loading-spinner loading-sm"></span>
+						Salvando...
 					{:else}
 						<Save class="h-5 w-5" />
+						Salvar Configurações de Código de Barras
 					{/if}
-					Salvar Configurações de Código de Barras
 				</button>
 			</div>
 		</div>