From b1db926ab4160eacd6f3b98cab9f72c731c36b9f Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Mon, 22 Dec 2025 10:52:46 -0300
Subject: [PATCH] feat: enhance 'Almoxarifado' functionality by integrating
 barcode scanning for material entry and exit, improving user experience with
 loading indicators and error handling for better inventory management

---
 apps/web/src/lib/components/Sidebar.svelte    |   3 +-
 .../almoxarifado/BarcodeScanner.svelte        | 172 ++++-
 .../almoxarifado/materiais/+page.svelte       | 298 +++++---
 .../materiais/cadastro/+page.svelte           | 692 ++++++++++++++----
 .../almoxarifado/movimentacoes/+page.svelte   | 105 ++-
 .../almoxarifado/relatorios/+page.svelte      |   3 +-
 packages/backend/convex/_generated/api.d.ts   |   2 +
 .../backend/convex/actions/downloadImage.ts   | 137 ++++
 8 files changed, 1125 insertions(+), 287 deletions(-)
 create mode 100644 packages/backend/convex/actions/downloadImage.ts

diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 74a0a0d..046dd22 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -169,7 +169,8 @@
 				{
 					label: 'Listar Materiais',
 					link: '/almoxarifado/materiais',
-					permission: { recurso: 'almoxarifado', acao: 'listar' }
+					permission: { recurso: 'almoxarifado', acao: 'listar' },
+					excludePaths: ['/almoxarifado/materiais/cadastro']
 				},
 				{
 					label: 'Movimentações',
diff --git a/apps/web/src/lib/components/almoxarifado/BarcodeScanner.svelte b/apps/web/src/lib/components/almoxarifado/BarcodeScanner.svelte
index e9f97ea..fd3e21d 100644
--- a/apps/web/src/lib/components/almoxarifado/BarcodeScanner.svelte
+++ b/apps/web/src/lib/components/almoxarifado/BarcodeScanner.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount, onDestroy, tick } from 'svelte';
 	import { Html5Qrcode, type Html5QrcodeResult } from 'html5-qrcode';
 	import { Camera, X, Scan } from 'lucide-svelte';
 
@@ -29,7 +29,43 @@
 	};
 
 	async function startScanning() {
-		if (!scannerElement) return;
+		// Aguardar o DOM ser atualizado
+		await tick();
+		
+		// Verificar se o elemento existe no DOM
+		const element = document.getElementById(scannerId);
+		if (!element) {
+			// Tentar novamente após um pequeno delay
+			setTimeout(async () => {
+				const retryElement = document.getElementById(scannerId);
+				if (!retryElement) {
+					const errorMsg = 'Elemento do scanner não encontrado no DOM';
+					error = errorMsg;
+					scanning = false;
+					if (onError) {
+						onError(errorMsg);
+					}
+					return;
+				}
+				await startScanningInternal();
+			}, 100);
+			return;
+		}
+
+		await startScanningInternal();
+	}
+
+	async function startScanningInternal() {
+		const element = document.getElementById(scannerId);
+		if (!element) {
+			const errorMsg = 'Elemento do scanner não encontrado';
+			error = errorMsg;
+			scanning = false;
+			if (onError) {
+				onError(errorMsg);
+			}
+			return;
+		}
 
 		try {
 			error = null;
@@ -37,26 +73,80 @@
 
 			scanner = new Html5Qrcode(scannerId);
 
-			await scanner.start(
-				{ facingMode: 'environment' },
-				config,
-				(decodedText: string, decodedResult: Html5QrcodeResult) => {
-					handleScannedCode(decodedText);
-				},
-				(errorMessage: string) => {
-					// Ignorar erros de leitura contínua
-					if (errorMessage.includes('No MultiFormat Readers')) {
-						return;
+			// Tentar primeiro com câmera traseira (environment), depois frontal (user)
+			let cameraConfig = { facingMode: 'environment' as const };
+			
+			try {
+				await scanner.start(
+					cameraConfig,
+					config,
+					(decodedText: string, decodedResult: Html5QrcodeResult) => {
+						handleScannedCode(decodedText);
+					},
+					(errorMessage: string) => {
+						// Ignorar erros de leitura contínua
+						if (errorMessage.includes('No MultiFormat Readers')) {
+							return;
+						}
 					}
+				);
+			} catch (cameraError) {
+				// Se falhar com câmera traseira, tentar com frontal (útil para PC)
+				if (cameraConfig.facingMode === 'environment') {
+					console.log('Tentando câmera frontal...');
+					cameraConfig = { facingMode: 'user' };
+					await scanner.start(
+						cameraConfig,
+						config,
+						(decodedText: string, decodedResult: Html5QrcodeResult) => {
+							handleScannedCode(decodedText);
+						},
+						(errorMessage: string) => {
+							if (errorMessage.includes('No MultiFormat Readers')) {
+								return;
+							}
+						}
+					);
+				} else {
+					throw cameraError;
 				}
-			);
+			}
 		} catch (err) {
-			const errorMessage = err instanceof Error ? err.message : 'Erro ao iniciar scanner';
+			let errorMessage = 'Erro ao iniciar scanner';
+			
+			if (err instanceof Error) {
+				errorMessage = err.message;
+				
+				// Mensagens de erro mais amigáveis
+				if (errorMessage.includes('Permission denied') || errorMessage.includes('NotAllowedError')) {
+					errorMessage = 'Permissão de câmera negada. Por favor, permita o acesso à câmera nas configurações do navegador.';
+				} else if (errorMessage.includes('NotFoundError') || errorMessage.includes('No camera found')) {
+					errorMessage = 'Nenhuma câmera encontrada. Verifique se há uma câmera conectada ao dispositivo.';
+				} else if (errorMessage.includes('NotReadableError') || errorMessage.includes('TrackStartError')) {
+					errorMessage = 'Câmera está sendo usada por outro aplicativo. Feche outros aplicativos que possam estar usando a câmera.';
+				} else if (errorMessage.includes('OverconstrainedError')) {
+					errorMessage = 'Câmera não suporta as configurações necessárias.';
+				}
+			}
+			
 			error = errorMessage;
 			scanning = false;
+			
+			// Limpar scanner em caso de erro
+			if (scanner) {
+				try {
+					await scanner.clear();
+				} catch (clearErr) {
+					console.error('Erro ao limpar scanner:', clearErr);
+				}
+				scanner = null;
+			}
+			
 			if (onError) {
 				onError(errorMessage);
 			}
+			
+			console.error('Erro ao iniciar scanner:', err);
 		}
 	}
 
@@ -128,7 +218,12 @@
 
 	$effect(() => {
 		if (enabled && !scanning) {
-			startScanning();
+			// Aguardar um pouco para garantir que o DOM foi atualizado
+			setTimeout(() => {
+				if (enabled && !scanning) {
+					startScanning();
+				}
+			}, 50);
 		} else if (!enabled && scanning) {
 			stopScanning();
 		}
@@ -171,12 +266,39 @@
 				{#if error}
 					<div class="alert alert-error mb-4">
 						<span>{error}</span>
+						<button
+							type="button"
+							class="btn btn-sm btn-ghost mt-2"
+							onclick={async () => {
+								error = null;
+								scanning = false;
+								// Limpar scanner anterior se existir
+								if (scanner) {
+									try {
+										await scanner.clear();
+									} catch (err) {
+										console.error('Erro ao limpar scanner:', err);
+									}
+									scanner = null;
+								}
+								// Aguardar um pouco antes de tentar novamente
+								await tick();
+								setTimeout(() => {
+									if (enabled && !scanning) {
+										startScanning();
+									}
+								}, 100);
+							}}
+						>
+							Tentar novamente
+						</button>
 					</div>
 				{/if}
 
-				{#if scanning}
-					<div class="relative">
-						<div id={scannerId} bind:this={scannerElement}></div>
+				<!-- Sempre renderizar o elemento quando enabled for true -->
+				<div class="relative">
+					<div id={scannerId} bind:this={scannerElement}></div>
+					{#if scanning}
 						<div class="mt-4 text-center">
 							<p class="text-sm text-base-content/70">
 								Posicione o código de barras dentro da área de leitura
@@ -185,13 +307,13 @@
 								Ou use um leitor USB/Bluetooth para escanear
 							</p>
 						</div>
-					</div>
-				{:else if !error}
-					<div class="text-center py-8">
-						<Camera class="h-16 w-16 mx-auto mb-4 text-base-content/30" />
-						<p class="text-base-content/70">Iniciando scanner...</p>
-					</div>
-				{/if}
+					{:else if !error}
+						<div class="text-center py-8">
+							<Camera class="h-16 w-16 mx-auto mb-4 text-base-content/30" />
+							<p class="text-base-content/70">Iniciando scanner...</p>
+						</div>
+					{/if}
+				</div>
 
 				<div class="card-actions justify-end mt-4">
 					<button type="button" class="btn btn-ghost" onclick={() => { enabled = false; }}>
diff --git a/apps/web/src/routes/(dashboard)/almoxarifado/materiais/+page.svelte b/apps/web/src/routes/(dashboard)/almoxarifado/materiais/+page.svelte
index bc1a529..aa9ed14 100644
--- a/apps/web/src/routes/(dashboard)/almoxarifado/materiais/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/almoxarifado/materiais/+page.svelte
@@ -4,14 +4,26 @@
 	import { useConvexClient, useQuery } from 'convex-svelte';
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	import { Package, Plus, Search, Edit, Eye, AlertTriangle, Trash2, Info, X, Filter, Barcode } from 'lucide-svelte';
+	import {
+		Package,
+		Plus,
+		Search,
+		Edit,
+		Eye,
+		AlertTriangle,
+		Trash2,
+		Info,
+		X,
+		Filter,
+		Barcode
+	} from 'lucide-svelte';
 	import BarcodeScanner from '$lib/components/almoxarifado/BarcodeScanner.svelte';
 
 	const client = useConvexClient();
 
 	// Usar useQuery para atualização automática
 	const materiaisQuery = useQuery(api.almoxarifado.listarMateriais, {});
-	
+
 	let materiais = $derived.by(() => {
 		try {
 			if (materiaisQuery === undefined || materiaisQuery === null) return [];
@@ -36,7 +48,11 @@
 	let materialParaExcluir = $state<Doc<'materiais'> | null>(null);
 	let excluindo = $state(false);
 	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
-	let erroExclusao = $state<{ titulo: string; mensagem: string; tipo: 'movimentacoes' | 'requisicoes' | 'outro' } | null>(null);
+	let erroExclusao = $state<{
+		titulo: string;
+		mensagem: string;
+		tipo: 'movimentacoes' | 'requisicoes' | 'outro';
+	} | null>(null);
 	let desativando = $state(false);
 
 	const categorias = $derived(
@@ -102,7 +118,11 @@
 		await buscarPorCodigoBarras(barcode);
 		if (!materialEncontrado) {
 			// Produto não encontrado, oferecer cadastro
-			if (confirm('Produto não encontrado. Deseja cadastrar um novo produto com este código de barras?')) {
+			if (
+				confirm(
+					'Produto não encontrado. Deseja cadastrar um novo produto com este código de barras?'
+				)
+			) {
 				goto(resolve('/almoxarifado/materiais/cadastro'));
 			}
 		}
@@ -158,20 +178,20 @@
 
 		try {
 			excluindo = true;
-			
+
 			// Remover item da lista localmente imediatamente (otimistic update)
 			filtered = filtered.filter((m) => m._id !== materialId);
-			
+
 			await client.mutation(api.almoxarifado.deletarMaterial, {
 				id: materialId
 			});
-			
+
 			fecharModalExclusao();
 			notice = {
 				kind: 'success',
 				text: `Material "${materialNome}" excluído com sucesso!`
 			};
-			
+
 			// Limpar notificação após 5 segundos
 			setTimeout(() => {
 				notice = null;
@@ -179,24 +199,26 @@
 		} catch (error: unknown) {
 			// Se houver erro, recarregar a lista para garantir consistência
 			applyFilters();
-			
+
 			const message = error instanceof Error ? error.message : 'Erro ao excluir material';
-			
+
 			// Determinar tipo de erro e criar mensagem mais clara
 			let tipo: 'movimentacoes' | 'requisicoes' | 'outro' = 'outro';
 			let titulo = 'Não foi possível excluir o material';
 			let mensagem = message;
 
 			const messageLower = message.toLowerCase();
-			
+
 			if (messageLower.includes('movimenta') || messageLower.includes('movimentação')) {
 				tipo = 'movimentacoes';
 				titulo = 'Material possui movimentações de estoque';
-				mensagem = 'Este material possui movimentações de estoque registradas e não pode ser excluído para manter o histórico. Você pode desativá-lo ao invés de excluir.';
+				mensagem =
+					'Este material possui movimentações de estoque registradas e não pode ser excluído para manter o histórico. Você pode desativá-lo ao invés de excluir.';
 			} else if (messageLower.includes('requisi') || messageLower.includes('requisição')) {
 				tipo = 'requisicoes';
 				titulo = 'Material possui requisições registradas';
-				mensagem = 'Este material possui requisições registradas e não pode ser excluído para manter o histórico. Você pode desativá-lo ao invés de excluir.';
+				mensagem =
+					'Este material possui requisições registradas e não pode ser excluído para manter o histórico. Você pode desativá-lo ao invés de excluir.';
 			}
 
 			// Exibir modal de erro
@@ -221,18 +243,18 @@
 
 		try {
 			desativando = true;
-			
+
 			await client.mutation(api.almoxarifado.editarMaterial, {
 				id: materialId,
 				ativo: false
 			});
-			
+
 			fecharModalErro();
 			notice = {
 				kind: 'success',
 				text: `Material "${materialNome}" desativado com sucesso!`
 			};
-			
+
 			// Limpar notificação após 5 segundos
 			setTimeout(() => {
 				notice = null;
@@ -264,17 +286,26 @@
 	<div class="mb-8">
 		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
 			<div class="flex items-center gap-4">
-				<div class="rounded-2xl bg-gradient-to-br from-primary/20 via-primary/10 to-primary/5 p-4 shadow-lg border border-primary/20">
-					<Package class="h-10 w-10 text-primary" strokeWidth={2.5} />
+				<div
+					class="from-primary/20 via-primary/10 to-primary/5 border-primary/20 rounded-2xl border bg-gradient-to-br p-4 shadow-lg"
+				>
+					<Package class="text-primary h-10 w-10" strokeWidth={2.5} />
 				</div>
 				<div class="flex-1">
-					<h1 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
+					<h1
+						class="from-primary to-primary/70 bg-gradient-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent"
+					>
 						Materiais
 					</h1>
-					<p class="text-base-content/70 text-lg mt-1">Gerencie o cadastro e controle de materiais do almoxarifado</p>
+					<p class="text-base-content/70 mt-1 text-lg">
+						Gerencie o cadastro e controle de materiais do almoxarifado
+					</p>
 				</div>
 			</div>
-			<button class="btn btn-primary btn-lg shadow-lg hover:shadow-xl transition-all min-w-[200px]" onclick={navCadastro}>
+			<button
+				class="btn btn-primary btn-lg min-w-[200px] shadow-lg transition-all hover:shadow-xl"
+				onclick={navCadastro}
+			>
 				<Plus class="h-5 w-5" />
 				Cadastrar Material
 			</button>
@@ -289,14 +320,14 @@
 	{/if}
 
 	<!-- Filtros -->
-	<div class="card bg-base-100 border border-base-300 mb-8 shadow-2xl">
+	<div class="card bg-base-100 border-base-300 mb-8 border shadow-2xl">
 		<div class="card-body p-8">
-			<div class="mb-6 flex items-center justify-between border-b-2 border-primary/20 pb-4">
+			<div class="border-primary/20 mb-6 flex items-center justify-between border-b-2 pb-4">
 				<div class="flex items-center gap-3">
-					<div class="rounded-lg bg-primary/10 p-2.5">
-						<Filter class="h-5 w-5 text-primary" strokeWidth={2.5} />
+					<div class="bg-primary/10 rounded-lg p-2.5">
+						<Filter class="text-primary h-5 w-5" strokeWidth={2.5} />
 					</div>
-					<h3 class="text-xl font-bold text-base-content">Filtros de Busca</h3>
+					<h3 class="text-base-content text-xl font-bold">Filtros de Busca</h3>
 				</div>
 				<BarcodeScanner
 					enabled={scannerEnabled}
@@ -307,25 +338,31 @@
 			<div class="grid grid-cols-1 gap-6 md:grid-cols-4">
 				<div class="form-control">
 					<label class="label pb-2">
-						<span class="label-text font-semibold flex items-center gap-2">
+						<span class="label-text flex items-center gap-2 font-semibold">
 							<Search class="h-4 w-4" />
 							Buscar
 						</span>
 					</label>
 					<div class="relative">
-						<Search class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-base-content/40" />
+						<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
 						<input
 							type="text"
 							placeholder="Código, nome ou código de barras..."
-							class="input input-bordered w-full pl-10 h-12 focus:input-primary transition-colors {buscandoPorCodigoBarras ? 'input-info' : ''}"
+							class="input input-bordered focus:input-primary h-12 w-full pl-10 transition-colors {buscandoPorCodigoBarras
+								? 'input-info'
+								: ''}"
 							bind:value={filtroBusca}
 						/>
 						{#if buscandoPorCodigoBarras}
-							<span class="loading loading-spinner loading-xs absolute right-3 top-1/2 -translate-y-1/2"></span>
+							<span
+								class="loading loading-spinner loading-xs absolute top-1/2 right-3 -translate-y-1/2"
+							></span>
 						{/if}
 					</div>
 					<label class="label pt-1">
-						<span class="label-text-alt text-base-content/60">Busque por código, nome ou código de barras</span>
+						<span class="label-text-alt text-base-content/60"
+							>Busque por código, nome ou código de barras</span
+						>
 					</label>
 				</div>
 
@@ -333,7 +370,10 @@
 					<label class="label pb-2">
 						<span class="label-text font-semibold">Categoria</span>
 					</label>
-					<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={filtroCategoria}>
+					<select
+						class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+						bind:value={filtroCategoria}
+					>
 						<option value="">Todas as categorias</option>
 						{#each categorias as cat}
 							<option value={cat}>{cat}</option>
@@ -345,7 +385,10 @@
 					<label class="label pb-2">
 						<span class="label-text font-semibold">Status</span>
 					</label>
-					<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={filtroAtivo}>
+					<select
+						class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+						bind:value={filtroAtivo}
+					>
 						<option value="">Todos</option>
 						<option value={true}>Ativos</option>
 						<option value={false}>Inativos</option>
@@ -356,8 +399,14 @@
 					<label class="label pb-2">
 						<span class="label-text font-semibold">Filtros Adicionais</span>
 					</label>
-					<label class="label cursor-pointer justify-start gap-3 rounded-lg border border-base-300 p-3 hover:bg-base-200 transition-colors">
-						<input type="checkbox" class="checkbox checkbox-primary" bind:checked={filtroEstoqueBaixo} />
+					<label
+						class="label border-base-300 hover:bg-base-200 cursor-pointer justify-start gap-3 rounded-lg border p-3 transition-colors"
+					>
+						<input
+							type="checkbox"
+							class="checkbox checkbox-primary"
+							bind:checked={filtroEstoqueBaixo}
+						/>
 						<span class="label-text font-medium">Apenas estoque baixo</span>
 					</label>
 				</div>
@@ -366,26 +415,26 @@
 	</div>
 
 	<!-- Tabela -->
-	<div class="card bg-base-100 border border-base-300 shadow-2xl">
+	<div class="card bg-base-100 border-base-300 border shadow-2xl">
 		<div class="card-body p-8">
-			<div class="mb-6 flex items-center gap-3 border-b-2 border-base-300 pb-4">
-				<div class="rounded-lg bg-info/10 p-2.5">
-					<Package class="h-5 w-5 text-info" strokeWidth={2.5} />
+			<div class="border-base-300 mb-6 flex items-center gap-3 border-b-2 pb-4">
+				<div class="bg-info/10 rounded-lg p-2.5">
+					<Package class="text-info h-5 w-5" strokeWidth={2.5} />
 				</div>
-				<h3 class="text-xl font-bold text-base-content">Lista de Materiais</h3>
+				<h3 class="text-base-content text-xl font-bold">Lista de Materiais</h3>
 			</div>
-			<div class="overflow-x-auto rounded-lg border border-base-300">
-				<table class="table table-zebra">
+			<div class="border-base-300 overflow-x-auto rounded-lg border">
+				<table class="table-zebra table">
 					<thead>
 						<tr class="bg-base-200">
-							<th class="font-bold text-base-content">Código</th>
-							<th class="font-bold text-base-content">Nome</th>
-							<th class="font-bold text-base-content">Categoria</th>
-							<th class="font-bold text-base-content">Estoque Atual</th>
-							<th class="font-bold text-base-content">Estoque Mínimo</th>
-							<th class="font-bold text-base-content">Unidade</th>
-							<th class="font-bold text-base-content">Status</th>
-							<th class="font-bold text-base-content">Ações</th>
+							<th class="text-base-content font-bold">Código</th>
+							<th class="text-base-content font-bold">Nome</th>
+							<th class="text-base-content font-bold">Categoria</th>
+							<th class="text-base-content font-bold">Estoque Atual</th>
+							<th class="text-base-content font-bold">Estoque Mínimo</th>
+							<th class="text-base-content font-bold">Unidade</th>
+							<th class="text-base-content font-bold">Status</th>
+							<th class="text-base-content font-bold">Ações</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -393,22 +442,28 @@
 							<tr>
 								<td colspan="8" class="text-center">
 									<div class="py-16">
-										<Package class="mx-auto mb-4 h-20 w-20 text-base-content/30" />
-										<p class="text-base-content/80 text-xl font-semibold mb-2">Nenhum material encontrado</p>
-										<p class="text-base-content/60 text-base">Tente ajustar os filtros de busca ou cadastre um novo material</p>
+										<Package class="text-base-content/30 mx-auto mb-4 h-20 w-20" />
+										<p class="text-base-content/80 mb-2 text-xl font-semibold">
+											Nenhum material encontrado
+										</p>
+										<p class="text-base-content/60 text-base">
+											Tente ajustar os filtros de busca ou cadastre um novo material
+										</p>
 									</div>
 								</td>
 							</tr>
 						{:else}
 							{#each filtered as material}
-								<tr class="hover:bg-base-200/50 transition-colors">
+								<tr class="hover:bg-base-200/50 transition-colors" key={material._id}>
 									<td>
-										<div class="font-mono font-bold text-primary">{material.codigo}</div>
+										<div class="text-primary font-mono font-bold">{material.codigo}</div>
 									</td>
 									<td>
 										<div class="font-medium">{material.nome}</div>
 										{#if material.descricao}
-											<div class="text-sm text-base-content/60 line-clamp-1">{material.descricao}</div>
+											<div class="text-base-content/60 line-clamp-1 text-sm">
+												{material.descricao}
+											</div>
 										{/if}
 									</td>
 									<td>
@@ -416,9 +471,13 @@
 									</td>
 									<td>
 										<div class="flex items-center gap-2">
-											<span class="font-bold {material.estoqueAtual <= material.estoqueMinimo ? 'text-error' : 'text-success'}">{material.estoqueAtual}</span>
+											<span
+												class="font-bold {material.estoqueAtual <= material.estoqueMinimo
+													? 'text-error'
+													: 'text-success'}">{material.estoqueAtual}</span
+											>
 											{#if material.estoqueAtual <= material.estoqueMinimo}
-												<AlertTriangle class="h-4 w-4 text-warning" />
+												<AlertTriangle class="text-warning h-4 w-4" />
 											{/if}
 										</div>
 									</td>
@@ -440,13 +499,7 @@
 											<button
 												class="btn btn-sm btn-ghost hover:btn-primary transition-all"
 												title="Visualizar detalhes"
-												onclick={() =>
-													goto(
-														resolve(
-															'/almoxarifado/materiais/' +
-																material._id
-														)
-													)}
+												onclick={() => goto(resolve('/almoxarifado/materiais/' + material._id))}
 											>
 												<Eye class="h-4 w-4" />
 											</button>
@@ -454,13 +507,7 @@
 												class="btn btn-sm btn-ghost hover:btn-info transition-all"
 												title="Editar material"
 												onclick={() =>
-													goto(
-														resolve(
-															'/almoxarifado/materiais/' +
-																material._id +
-																'/editar'
-														)
-													)}
+													goto(resolve('/almoxarifado/materiais/' + material._id + '/editar'))}
 											>
 												<Edit class="h-4 w-4" />
 											</button>
@@ -481,9 +528,10 @@
 			</div>
 
 			{#if filtered.length > 0}
-				<div class="mt-8 flex items-center justify-between border-t-2 border-base-300 pt-6">
-					<div class="text-base font-semibold text-base-content/80">
-						Mostrando <span class="text-primary font-bold">{filtered.length}</span> de <span class="text-primary font-bold">{materiais.length}</span> materiais
+				<div class="border-base-300 mt-8 flex items-center justify-between border-t-2 pt-6">
+					<div class="text-base-content/80 text-base font-semibold">
+						Mostrando <span class="text-primary font-bold">{filtered.length}</span> de
+						<span class="text-primary font-bold">{materiais.length}</span> materiais
 					</div>
 				</div>
 			{/if}
@@ -492,49 +540,53 @@
 
 	<!-- Modal de Confirmação de Exclusão -->
 	<dialog id="modal-excluir-material" class="modal backdrop-blur-sm">
-		<div class="modal-box max-w-2xl border border-base-300 shadow-2xl">
-			<div class="mb-6 flex items-center gap-4 border-b-2 border-error/20 pb-4">
-				<div class="rounded-2xl bg-error/20 p-3">
-					<AlertTriangle class="h-8 w-8 text-error" strokeWidth={2.5} />
+		<div class="modal-box border-base-300 max-w-2xl border shadow-2xl">
+			<div class="border-error/20 mb-6 flex items-center gap-4 border-b-2 pb-4">
+				<div class="bg-error/20 rounded-2xl p-3">
+					<AlertTriangle class="text-error h-8 w-8" strokeWidth={2.5} />
 				</div>
 				<div>
-					<h3 class="text-2xl font-bold text-base-content">Confirmar Exclusão</h3>
+					<h3 class="text-base-content text-2xl font-bold">Confirmar Exclusão</h3>
 					<p class="text-base-content/70 mt-1">Esta ação não pode ser desfeita</p>
 				</div>
 			</div>
 			{#if materialParaExcluir}
-				<div class="space-y-4 mb-6">
+				<div class="mb-6 space-y-4">
 					<div class="alert alert-warning border-warning/30 bg-warning/10">
-						<AlertTriangle class="h-5 w-5 shrink-0 text-warning" />
+						<AlertTriangle class="text-warning h-5 w-5 shrink-0" />
 						<div class="flex-1">
-							<p class="font-semibold text-base-content">Atenção!</p>
-							<p class="text-sm text-base-content/90 mt-1">
-								Esta ação não pode ser desfeita. O material será permanentemente excluído do sistema.
+							<p class="text-base-content font-semibold">Atenção!</p>
+							<p class="text-base-content/90 mt-1 text-sm">
+								Esta ação não pode ser desfeita. O material será permanentemente excluído do
+								sistema.
 							</p>
 						</div>
 					</div>
-					<div class="bg-base-200 rounded-lg p-5 border border-base-300">
-						<p class="text-sm text-base-content/70 mb-3 font-semibold">Material a ser excluído:</p>
-						<p class="font-bold text-lg text-base-content">{materialParaExcluir.nome}</p>
-						<p class="text-sm text-base-content/60 mt-2">
+					<div class="bg-base-200 border-base-300 rounded-lg border p-5">
+						<p class="text-base-content/70 mb-3 text-sm font-semibold">Material a ser excluído:</p>
+						<p class="text-base-content text-lg font-bold">{materialParaExcluir.nome}</p>
+						<p class="text-base-content/60 mt-2 text-sm">
 							Código: <span class="font-mono font-semibold">{materialParaExcluir.codigo}</span>
 						</p>
 						{#if materialParaExcluir.codigoBarras}
-							<p class="text-sm text-base-content/60 mt-1">
-								Código de Barras: <span class="font-mono font-semibold">{materialParaExcluir.codigoBarras}</span>
+							<p class="text-base-content/60 mt-1 text-sm">
+								Código de Barras: <span class="font-mono font-semibold"
+									>{materialParaExcluir.codigoBarras}</span
+								>
 							</p>
 						{/if}
 						{#if materialParaExcluir.estoqueAtual > 0}
-							<div class="mt-3 alert alert-info py-2 border-info/30 bg-info/10">
+							<div class="alert alert-info border-info/30 bg-info/10 mt-3 py-2">
 								<p class="text-sm font-medium">
-									⚠️ Este material possui <strong>{materialParaExcluir.estoqueAtual}</strong> unidades em estoque.
+									⚠️ Este material possui <strong>{materialParaExcluir.estoqueAtual}</strong> unidades
+									em estoque.
 								</p>
 							</div>
 						{/if}
 					</div>
 				</div>
 			{/if}
-			<div class="modal-action gap-3 border-t-2 border-base-300 pt-6">
+			<div class="modal-action border-base-300 gap-3 border-t-2 pt-6">
 				<button
 					class="btn btn-ghost btn-lg min-w-[140px]"
 					onclick={fecharModalExclusao}
@@ -565,53 +617,62 @@
 	<!-- Modal de Erro na Exclusão -->
 	{#if erroExclusao}
 		<dialog id="modal-erro-exclusao" class="modal modal-open backdrop-blur-sm">
-			<div class="modal-box max-w-2xl border border-base-300 shadow-2xl">
-				<div class="flex items-center gap-4 mb-6 border-b-2 border-error/20 pb-4">
-					<div class="rounded-2xl bg-error/20 p-3">
-						<AlertTriangle class="h-8 w-8 text-error" strokeWidth={2.5} />
+			<div class="modal-box border-base-300 max-w-2xl border shadow-2xl">
+				<div class="border-error/20 mb-6 flex items-center gap-4 border-b-2 pb-4">
+					<div class="bg-error/20 rounded-2xl p-3">
+						<AlertTriangle class="text-error h-8 w-8" strokeWidth={2.5} />
 					</div>
 					<div>
-						<h3 class="text-2xl font-bold text-base-content">{erroExclusao.titulo}</h3>
+						<h3 class="text-base-content text-2xl font-bold">{erroExclusao.titulo}</h3>
 						<p class="text-base-content/70 mt-1">Não foi possível excluir o material</p>
 					</div>
 				</div>
 
-				<div class="space-y-4 mb-6">
+				<div class="mb-6 space-y-4">
 					<div class="alert alert-error border-error/30 bg-error/10">
-						<AlertTriangle class="h-5 w-5 shrink-0 text-error" />
+						<AlertTriangle class="text-error h-5 w-5 shrink-0" />
 						<div class="flex-1">
-							<p class="font-semibold text-base-content">Motivo do bloqueio</p>
-							<p class="text-sm text-base-content/90 mt-1">{erroExclusao.mensagem}</p>
+							<p class="text-base-content font-semibold">Motivo do bloqueio</p>
+							<p class="text-base-content/90 mt-1 text-sm">{erroExclusao.mensagem}</p>
 						</div>
 					</div>
 
 					{#if materialParaExcluir}
-						<div class="bg-base-200 rounded-lg p-5 border border-base-300">
-							<p class="text-sm text-base-content/70 mb-3 font-semibold">Material:</p>
-							<p class="font-bold text-lg text-base-content">{materialParaExcluir.nome}</p>
-							<p class="text-sm text-base-content/60 mt-2">
+						<div class="bg-base-200 border-base-300 rounded-lg border p-5">
+							<p class="text-base-content/70 mb-3 text-sm font-semibold">Material:</p>
+							<p class="text-base-content text-lg font-bold">{materialParaExcluir.nome}</p>
+							<p class="text-base-content/60 mt-2 text-sm">
 								Código: <span class="font-mono font-semibold">{materialParaExcluir.codigo}</span>
 							</p>
 							{#if materialParaExcluir.codigoBarras}
-								<p class="text-sm text-base-content/60 mt-1">
-									Código de Barras: <span class="font-mono font-semibold">{materialParaExcluir.codigoBarras}</span>
+								<p class="text-base-content/60 mt-1 text-sm">
+									Código de Barras: <span class="font-mono font-semibold"
+										>{materialParaExcluir.codigoBarras}</span
+									>
 								</p>
 							{/if}
 						</div>
 					{/if}
 
-					<div class="bg-info/10 border border-info/30 rounded-lg p-5">
+					<div class="bg-info/10 border-info/30 rounded-lg border p-5">
 						<div class="flex gap-3">
-							<Info class="h-5 w-5 text-info shrink-0 mt-0.5" />
+							<Info class="text-info mt-0.5 h-5 w-5 shrink-0" />
 							<div>
-								<p class="font-semibold text-base-content mb-2">Solução recomendada</p>
-								<p class="text-sm text-base-content/80 leading-relaxed">
+								<p class="text-base-content mb-2 font-semibold">Solução recomendada</p>
+								<p class="text-base-content/80 text-sm leading-relaxed">
 									{#if erroExclusao.tipo === 'movimentacoes'}
-										O material possui histórico de movimentações de estoque. Para manter a integridade dos dados históricos, recomendamos <strong>desativar</strong> o material ao invés de excluí-lo. Um material desativado não aparecerá nas listagens ativas, mas seu histórico será preservado.
+										O material possui histórico de movimentações de estoque. Para manter a
+										integridade dos dados históricos, recomendamos <strong>desativar</strong> o material
+										ao invés de excluí-lo. Um material desativado não aparecerá nas listagens ativas,
+										mas seu histórico será preservado.
 									{:else if erroExclusao.tipo === 'requisicoes'}
-										O material possui requisições registradas. Para manter a integridade dos dados históricos, recomendamos <strong>desativar</strong> o material ao invés de excluí-lo. Um material desativado não aparecerá nas listagens ativas, mas seu histórico será preservado.
+										O material possui requisições registradas. Para manter a integridade dos dados
+										históricos, recomendamos <strong>desativar</strong> o material ao invés de excluí-lo.
+										Um material desativado não aparecerá nas listagens ativas, mas seu histórico será
+										preservado.
 									{:else}
-										Recomendamos verificar as dependências do material antes de tentar excluí-lo novamente.
+										Recomendamos verificar as dependências do material antes de tentar excluí-lo
+										novamente.
 									{/if}
 								</p>
 							</div>
@@ -619,7 +680,7 @@
 					</div>
 				</div>
 
-				<div class="modal-action gap-3 border-t-2 border-base-300 pt-6">
+				<div class="modal-action border-base-300 gap-3 border-t-2 pt-6">
 					<button
 						class="btn btn-ghost btn-lg min-w-[140px]"
 						onclick={fecharModalErro}
@@ -650,6 +711,3 @@
 		</dialog>
 	{/if}
 </main>
-
-
-
diff --git a/apps/web/src/routes/(dashboard)/almoxarifado/materiais/cadastro/+page.svelte b/apps/web/src/routes/(dashboard)/almoxarifado/materiais/cadastro/+page.svelte
index 07ad44c..8618b44 100644
--- a/apps/web/src/routes/(dashboard)/almoxarifado/materiais/cadastro/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/almoxarifado/materiais/cadastro/+page.svelte
@@ -4,7 +4,22 @@
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { tick } from 'svelte';
-	import { Package, Save, ArrowLeft, Check, X, ExternalLink, Loader2, AlertCircle, Info, Barcode, Box, Warehouse, ShoppingCart, Image } from 'lucide-svelte';
+	import {
+		Package,
+		Save,
+		ArrowLeft,
+		Check,
+		X,
+		ExternalLink,
+		Loader2,
+		AlertCircle,
+		Info,
+		Barcode,
+		Box,
+		Warehouse,
+		ShoppingCart,
+		Image
+	} from 'lucide-svelte';
 	import BarcodeScanner from '$lib/components/almoxarifado/BarcodeScanner.svelte';
 	import ImageUpload from '$lib/components/almoxarifado/ImageUpload.svelte';
 
@@ -38,7 +53,21 @@
 		embalagem?: string;
 		fonte?: string;
 	} | null>(null);
+	let dadosLocais = $state<{
+		codigo: string;
+		nome: string;
+		descricao?: string;
+		categoria: string;
+		unidadeMedida: string;
+		estoqueMinimo: number;
+		estoqueMaximo?: number;
+		estoqueAtual: number;
+		localizacao?: string;
+		fornecedor?: string;
+		imagemBase64?: string;
+	} | null>(null);
 	let modalDadosExternos = $state(false);
+	let modalDadosLocais = $state(false);
 	let modalBuscando = $state(false);
 	let modalProdutoNaoEncontrado = $state(false);
 	let codigoBarrasBuscado = $state('');
@@ -62,15 +91,60 @@
 		}, 5000);
 	}
 
+	/**
+	 * Converte uma URL de imagem em base64.
+	 *
+	 * Para imagens da mesma origem, faz o download diretamente no navegador.
+	 * Para imagens de domínios externos, usa uma action do Convex (server-side)
+	 * para evitar problemas de CORS.
+	 */
 	async function carregarImagemDeUrl(url: string): Promise<string | null> {
 		try {
-			// Tentar carregar a imagem
+			const appOrigin = window.location.origin;
+			let urlOrigin: string;
+
+			try {
+				urlOrigin = new URL(url).origin;
+			} catch {
+				console.error('URL inválida:', url);
+				return null;
+			}
+
+			// Se a origem for diferente, usar action do Convex (server-side, sem CORS)
+			if (appOrigin !== urlOrigin) {
+				console.log('Carregando imagem externa via proxy do servidor:', url);
+				try {
+					// Verificar se a action está disponível
+					if (!api['actions/downloadImage']?.downloadImageAsBase64) {
+						console.warn(
+							'Action downloadImageAsBase64 não está disponível. Servidor Convex pode precisar ser reiniciado.'
+						);
+						return null;
+					}
+
+					const imagemBase64 = await client.action(
+						api['actions/downloadImage'].downloadImageAsBase64,
+						{ url }
+					);
+					if (imagemBase64) {
+						console.log('✅ Imagem externa carregada com sucesso via proxy');
+						return imagemBase64;
+					} else {
+						console.warn('Falha ao carregar imagem externa via proxy');
+						return null;
+					}
+				} catch (err) {
+					console.error('Erro ao carregar imagem via proxy do servidor:', err);
+					return null;
+				}
+			}
+
+			// Para mesma origem, fazer download diretamente no navegador
 			const response = await fetch(url, {
 				mode: 'cors',
 				headers: {
-					'Accept': 'image/*'
+					Accept: 'image/*'
 				},
-				// Adicionar referrer policy para evitar problemas de CORS
 				referrerPolicy: 'no-referrer'
 			});
 
@@ -80,7 +154,7 @@
 			}
 
 			const blob = await response.blob();
-			
+
 			// Verificar se é realmente uma imagem
 			if (!blob.type.startsWith('image/')) {
 				console.warn('URL não retornou uma imagem:', url);
@@ -104,8 +178,6 @@
 			});
 		} catch (err) {
 			console.error('Erro ao carregar imagem de URL:', url, err);
-			// Se falhar por CORS, tentar usar um proxy ou retornar null
-			// Por enquanto, apenas logar o erro
 			return null;
 		}
 	}
@@ -129,12 +201,12 @@
 			if (dadosExternos.marca) {
 				fornecedor = dadosExternos.marca;
 			}
-			
+
 			// Carregar imagem se disponível - garantir que seja carregada antes de fechar o modal
 			if (dadosExternos.imagemUrl) {
 				let imagemParaSalvar: string | null = null;
 				const imagemUrlAtual = dadosExternos.imagemUrl;
-				
+
 				// Verificar se já está em base64 (carregada em background)
 				if (imagemUrlAtual.startsWith('data:')) {
 					// Já está em base64, usar diretamente
@@ -143,7 +215,7 @@
 				} else {
 					// Ainda é uma URL, tentar aguardar um pouco para ver se o carregamento em background terminou
 					await new Promise((resolve) => setTimeout(resolve, 1000));
-					
+
 					// Verificar novamente se foi carregada em background
 					if (dadosExternos.imagemUrl && dadosExternos.imagemUrl.startsWith('data:')) {
 						imagemParaSalvar = dadosExternos.imagemUrl;
@@ -158,25 +230,40 @@
 								console.log('Imagem carregada e convertida para base64 com sucesso');
 							} else {
 								console.warn('Não foi possível carregar a imagem da URL:', imagemUrlAtual);
+								// Avisar o usuário que a imagem não pôde ser carregada, mas os dados foram aplicados
+								mostrarMensagem(
+									'error',
+									'Os dados do produto foram aplicados, mas a imagem não pôde ser carregada automaticamente. ' +
+										'Você pode salvar a imagem no seu computador e fazer upload manual na seção "Imagem do Produto".'
+								);
 							}
 						} catch (err) {
 							console.error('Erro ao carregar imagem:', err);
+							mostrarMensagem(
+								'error',
+								'Os dados do produto foram aplicados, mas a imagem não pôde ser carregada automaticamente. ' +
+									'Você pode salvar a imagem no seu computador e fazer upload manual na seção "Imagem do Produto".'
+							);
 						}
 					}
 				}
-				
+
 				// Atribuir a imagem após o carregamento completo
 				if (imagemParaSalvar) {
 					// Atribuir diretamente ao estado - isso deve atualizar o componente ImageUpload automaticamente
 					imagemBase64 = imagemParaSalvar;
-					
+
 					// Aguardar o tick para garantir que o componente ImageUpload detecte a mudança
 					await tick();
-					
+
 					// Aguardar um frame adicional para garantir renderização
 					await new Promise((resolve) => requestAnimationFrame(resolve));
-					
-					console.log('Imagem atribuída ao campo imagemBase64, tamanho:', imagemParaSalvar.length, 'caracteres');
+
+					console.log(
+						'Imagem atribuída ao campo imagemBase64, tamanho:',
+						imagemParaSalvar.length,
+						'caracteres'
+					);
 				} else {
 					console.warn('Nenhuma imagem disponível para salvar');
 				}
@@ -184,10 +271,12 @@
 
 			// Fechar modal após garantir que tudo foi carregado
 			modalDadosExternos = false;
-			const dadosTemp = dadosExternos;
 			dadosExternos = null;
 
-			mostrarMensagem('success', 'Dados externos aplicados! Revise e complete as informações restantes.');
+			mostrarMensagem(
+				'success',
+				'Dados externos aplicados! Revise e complete as informações restantes.'
+			);
 		} finally {
 			carregandoImagemExterna = false;
 		}
@@ -199,9 +288,44 @@
 		mostrarMensagem('success', 'Código de barras lido. Complete as informações do produto.');
 	}
 
+	function usarDadosLocais() {
+		if (!dadosLocais) return;
+
+		// Preencher campos com dados encontrados localmente
+		codigo = dadosLocais.codigo;
+		nome = dadosLocais.nome;
+		descricao = dadosLocais.descricao || '';
+		categoria = dadosLocais.categoria;
+		unidadeMedida = dadosLocais.unidadeMedida;
+		estoqueMinimo = dadosLocais.estoqueMinimo;
+		estoqueMaximo = dadosLocais.estoqueMaximo;
+		estoqueAtual = dadosLocais.estoqueAtual;
+		localizacao = dadosLocais.localizacao || '';
+		fornecedor = dadosLocais.fornecedor || '';
+		imagemBase64 = dadosLocais.imagemBase64 || null;
+
+		// Fechar modal
+		modalDadosLocais = false;
+		dadosLocais = null;
+
+		mostrarMensagem(
+			'success',
+			'Dados do produto encontrado aplicados! Revise e complete as informações restantes.'
+		);
+	}
+
+	function descartarDadosLocais() {
+		modalDadosLocais = false;
+		dadosLocais = null;
+		mostrarMensagem('success', 'Código de barras lido. Complete as informações do produto.');
+	}
+
 	function fecharModalProdutoNaoEncontrado() {
 		modalProdutoNaoEncontrado = false;
-		mostrarMensagem('success', 'Código de barras lido. Complete as informações do produto manualmente.');
+		mostrarMensagem(
+			'success',
+			'Código de barras lido. Complete as informações do produto manualmente.'
+		);
 	}
 
 	async function buscarProdutoPorCodigoBarras(barcode: string, mostrarMensagemSucesso = true) {
@@ -228,38 +352,42 @@
 			if (materialExistente) {
 				// Fechar modal de busca
 				modalBuscando = false;
-				
-				// Preencher campos automaticamente
-				codigo = materialExistente.codigo;
-				nome = materialExistente.nome;
-				descricao = materialExistente.descricao || '';
-				categoria = materialExistente.categoria;
-				unidadeMedida = materialExistente.unidadeMedida;
-				estoqueMinimo = materialExistente.estoqueMinimo;
-				estoqueMaximo = materialExistente.estoqueMaximo;
-				estoqueAtual = materialExistente.estoqueAtual;
-				localizacao = materialExistente.localizacao || '';
-				fornecedor = materialExistente.fornecedor || '';
-				imagemBase64 = materialExistente.imagemBase64 || null;
 
-				if (mostrarMensagemSucesso) {
-					mostrarMensagem('success', 'Produto encontrado! Campos preenchidos automaticamente.');
-				}
+				// Armazenar dados encontrados localmente para mostrar no modal
+				dadosLocais = {
+					codigo: materialExistente.codigo,
+					nome: materialExistente.nome,
+					descricao: materialExistente.descricao || undefined,
+					categoria: materialExistente.categoria,
+					unidadeMedida: materialExistente.unidadeMedida,
+					estoqueMinimo: materialExistente.estoqueMinimo,
+					estoqueMaximo: materialExistente.estoqueMaximo,
+					estoqueAtual: materialExistente.estoqueAtual,
+					localizacao: materialExistente.localizacao || undefined,
+					fornecedor: materialExistente.fornecedor || undefined,
+					imagemBase64: materialExistente.imagemBase64 || undefined
+				};
+
+				// Mostrar modal para o usuário confirmar o uso dos dados
+				modalDadosLocais = true;
 			} else {
 				// Produto não encontrado localmente, buscar externamente
 				buscandoExterno = true;
 				try {
-					const infoExterna = await client.action(api['actions/buscarInfoProduto'].buscarInfoProdutoPorCodigoBarras, {
-						codigoBarras: barcode.trim()
-					});
+					const infoExterna = await client.action(
+						api['actions/buscarInfoProduto'].buscarInfoProdutoPorCodigoBarras,
+						{
+							codigoBarras: barcode.trim()
+						}
+					);
 
 					if (infoExterna && (infoExterna.nome || infoExterna.descricao)) {
 						// Fechar modal de busca
 						modalBuscando = false;
-						
+
 						// Dados encontrados externamente
 						dadosExternos = { ...infoExterna };
-						
+
 						// Tentar carregar imagem se disponível (em background, não bloquear)
 						if (infoExterna.imagemUrl && !infoExterna.imagemUrl.startsWith('data:')) {
 							// Carregar imagem em background
@@ -297,17 +425,20 @@
 			}
 		} catch (err) {
 			const errorMessage = err instanceof Error ? err.message : 'Erro ao buscar produto';
-			
+
 			// Fechar modal de busca
 			modalBuscando = false;
-			
+
 			// Verificar se é erro de função não encontrada
 			if (errorMessage.includes('Could not find public function')) {
-				const message = 'Servidor Convex precisa ser reiniciado. A função de busca por código de barras não foi encontrada.';
+				const message =
+					'Servidor Convex precisa ser reiniciado. A função de busca por código de barras não foi encontrada.';
 				if (mostrarMensagemSucesso) {
 					mostrarMensagem('error', message);
 				}
-				console.error('Erro: Servidor Convex precisa ser reiniciado para reconhecer a nova função buscarMaterialPorCodigoBarras');
+				console.error(
+					'Erro: Servidor Convex precisa ser reiniciado para reconhecer a nova função buscarMaterialPorCodigoBarras'
+				);
 			} else {
 				const message = errorMessage;
 				if (mostrarMensagemSucesso) {
@@ -377,7 +508,7 @@
 		try {
 			loading = true;
 
-			const materialId = await client.mutation(api.almoxarifado.criarMaterial, {
+			await client.mutation(api.almoxarifado.criarMaterial, {
 				codigo: codigo.trim(),
 				nome: nome.trim(),
 				descricao: descricao.trim() || undefined,
@@ -407,7 +538,9 @@
 	// Handler para tecla Escape
 	function handleEscapeKey(event: KeyboardEvent) {
 		if (event.key === 'Escape') {
-			if (modalDadosExternos && !carregandoImagemExterna) {
+			if (modalDadosLocais) {
+				descartarDadosLocais();
+			} else if (modalDadosExternos && !carregandoImagemExterna) {
 				descartarDadosExternos();
 			} else if (modalProdutoNaoEncontrado) {
 				fecharModalProdutoNaoEncontrado();
@@ -417,8 +550,9 @@
 
 	// Gerenciar scroll do body quando modais estão abertos
 	$effect(() => {
-		const temModalAberto = modalDadosExternos || modalBuscando || modalProdutoNaoEncontrado;
-		
+		const temModalAberto =
+			modalDadosLocais || modalDadosExternos || modalBuscando || modalProdutoNaoEncontrado;
+
 		if (temModalAberto) {
 			document.body.classList.add('modal-open');
 			document.addEventListener('keydown', handleEscapeKey);
@@ -453,20 +587,23 @@
 	<!-- Cabeçalho -->
 	<div class="mb-8">
 		<div class="flex items-center gap-4">
-			<button
-				class="btn btn-ghost btn-sm"
-				onclick={() => goto(resolve('/almoxarifado/materiais'))}
-			>
+			<button class="btn btn-ghost btn-sm" onclick={() => goto(resolve('/almoxarifado/materiais'))}>
 				<ArrowLeft class="h-5 w-5" />
 			</button>
-			<div class="rounded-2xl bg-gradient-to-br from-primary/20 via-primary/10 to-primary/5 p-4 shadow-lg border border-primary/20">
-				<Package class="h-10 w-10 text-primary" strokeWidth={2.5} />
+			<div
+				class="from-primary/20 via-primary/10 to-primary/5 border-primary/20 rounded-2xl border bg-gradient-to-br p-4 shadow-lg"
+			>
+				<Package class="text-primary h-10 w-10" strokeWidth={2.5} />
 			</div>
 			<div class="flex-1">
-				<h1 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
+				<h1
+					class="from-primary to-primary/70 bg-gradient-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent"
+				>
 					Cadastrar Material
 				</h1>
-				<p class="text-base-content/70 text-lg mt-1">Preencha as informações abaixo para adicionar um novo material ao estoque</p>
+				<p class="text-base-content/70 mt-1 text-lg">
+					Preencha as informações abaixo para adicionar um novo material ao estoque
+				</p>
 			</div>
 		</div>
 	</div>
@@ -479,20 +616,25 @@
 	{/if}
 
 	<!-- Formulário -->
-	<div class="card bg-base-100 border border-base-300 shadow-2xl">
+	<div class="card bg-base-100 border-base-300 border shadow-2xl">
 		<div class="card-body p-8">
-			<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleSubmit();
+				}}
+			>
 				<!-- Seção: Identificação -->
 				<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">
-							<Box class="h-5 w-5 text-primary" strokeWidth={2.5} />
+					<div class="border-primary/20 mb-6 flex items-center gap-3 border-b-2 pb-4">
+						<div class="bg-primary/10 rounded-lg p-2.5">
+							<Box class="text-primary h-5 w-5" strokeWidth={2.5} />
 						</div>
-						<h2 class="text-xl font-bold text-base-content">Identificação do Material</h2>
+						<h2 class="text-base-content text-xl font-bold">Identificação do Material</h2>
 					</div>
-					
+
 					<!-- Leitor de Código de Barras -->
-					<div class="mb-8 rounded-xl border border-base-300 bg-base-200/50 p-4">
+					<div class="border-base-300 bg-base-200/50 mb-8 rounded-xl border p-4">
 						<BarcodeScanner
 							enabled={scannerEnabled}
 							onScan={handleBarcodeScanned}
@@ -504,27 +646,29 @@
 						<!-- Código -->
 						<div class="form-control">
 							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<Package class="h-4 w-4" />
 									Código <span class="text-error">*</span>
 								</span>
 							</label>
 							<input
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								placeholder="Ex: MAT-001"
 								bind:value={codigo}
 								required
 							/>
 							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Código único identificador do material</span>
+								<span class="label-text-alt text-base-content/60"
+									>Código único identificador do material</span
+								>
 							</label>
 						</div>
 
 						<!-- Código de Barras -->
 						<div class="form-control">
 							<label class="label pb-2">
-								<span class="label-text font-semibold flex items-center gap-2">
+								<span class="label-text flex items-center gap-2 font-semibold">
 									<Barcode class="h-4 w-4" />
 									Código de Barras
 									{#if buscandoProduto || buscandoExterno}
@@ -534,7 +678,10 @@
 							</label>
 							<input
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12 {(buscandoProduto || buscandoExterno) ? 'input-info' : ''}"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors {buscandoProduto ||
+								buscandoExterno
+									? 'input-info'
+									: ''}"
 								placeholder="EAN-13, UPC, etc."
 								bind:value={codigoBarras}
 								onkeydown={handleBarcodeKeydown}
@@ -556,11 +703,13 @@
 						<!-- Nome -->
 						<div class="form-control md:col-span-2">
 							<label class="label pb-2">
-								<span class="label-text font-semibold">Nome do Material <span class="text-error">*</span></span>
+								<span class="label-text font-semibold"
+									>Nome do Material <span class="text-error">*</span></span
+								>
 							</label>
 							<input
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								placeholder="Digite o nome completo do material"
 								bind:value={nome}
 								required
@@ -573,7 +722,7 @@
 								<span class="label-text font-semibold">Descrição</span>
 							</label>
 							<textarea
-								class="textarea textarea-bordered w-full focus:textarea-primary transition-colors min-h-[100px]"
+								class="textarea textarea-bordered focus:textarea-primary min-h-[100px] w-full transition-colors"
 								placeholder="Descrição detalhada do material (opcional)"
 								bind:value={descricao}
 								rows="3"
@@ -583,11 +732,13 @@
 						<!-- Categoria -->
 						<div class="form-control">
 							<label class="label pb-2">
-								<span class="label-text font-semibold">Categoria <span class="text-error">*</span></span>
+								<span class="label-text font-semibold"
+									>Categoria <span class="text-error">*</span></span
+								>
 							</label>
 							<input
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								list="categorias"
 								placeholder="Ex: Escritório"
 								bind:value={categoria}
@@ -595,7 +746,7 @@
 							/>
 							<datalist id="categorias">
 								{#each categoriasComuns as cat}
-									<option value={cat} />
+									<option value={cat} key={cat} />
 								{/each}
 							</datalist>
 						</div>
@@ -603,11 +754,17 @@
 						<!-- Unidade de Medida -->
 						<div class="form-control">
 							<label class="label pb-2">
-								<span class="label-text font-semibold">Unidade de Medida <span class="text-error">*</span></span>
+								<span class="label-text font-semibold"
+									>Unidade de Medida <span class="text-error">*</span></span
+								>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={unidadeMedida} required>
+							<select
+								class="select select-bordered focus:select-primary h-12 w-full transition-colors"
+								bind:value={unidadeMedida}
+								required
+							>
 								{#each unidadesMedida as un}
-									<option value={un}>{un}</option>
+									<option value={un} key={un}>{un}</option>
 								{/each}
 							</select>
 						</div>
@@ -616,22 +773,24 @@
 
 				<!-- Seção: Estoque -->
 				<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">
-							<Warehouse class="h-5 w-5 text-success" strokeWidth={2.5} />
+					<div class="border-success/20 mb-6 flex items-center gap-3 border-b-2 pb-4">
+						<div class="bg-success/10 rounded-lg p-2.5">
+							<Warehouse class="text-success h-5 w-5" strokeWidth={2.5} />
 						</div>
-						<h2 class="text-xl font-bold text-base-content">Controle de Estoque</h2>
+						<h2 class="text-base-content text-xl font-bold">Controle de Estoque</h2>
 					</div>
 
 					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 						<!-- Estoque Mínimo -->
 						<div class="form-control">
 							<label class="label pb-2">
-								<span class="label-text font-semibold">Estoque Mínimo <span class="text-error">*</span></span>
+								<span class="label-text font-semibold"
+									>Estoque Mínimo <span class="text-error">*</span></span
+								>
 							</label>
 							<input
 								type="number"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								min="0"
 								step="1"
 								bind:value={estoqueMinimo}
@@ -647,7 +806,9 @@
 								}}
 							/>
 							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Quantidade mínima para alerta</span>
+								<span class="label-text-alt text-base-content/60"
+									>Quantidade mínima para alerta</span
+								>
 							</label>
 						</div>
 
@@ -658,7 +819,7 @@
 							</label>
 							<input
 								type="number"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								min="0"
 								step="1"
 								bind:value={estoqueMaximo}
@@ -673,7 +834,8 @@
 								}}
 							/>
 							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Opcional - Capacidade máxima</span>
+								<span class="label-text-alt text-base-content/60">Opcional - Capacidade máxima</span
+								>
 							</label>
 						</div>
 
@@ -684,7 +846,7 @@
 							</label>
 							<input
 								type="number"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								min="0"
 								step="1"
 								bind:value={estoqueAtual}
@@ -699,7 +861,9 @@
 								}}
 							/>
 							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Quantidade inicial em estoque</span>
+								<span class="label-text-alt text-base-content/60"
+									>Quantidade inicial em estoque</span
+								>
 							</label>
 						</div>
 
@@ -710,12 +874,14 @@
 							</label>
 							<input
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								placeholder="Ex: Prateleira A-01, Setor B"
 								bind:value={localizacao}
 							/>
 							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Onde o material está armazenado</span>
+								<span class="label-text-alt text-base-content/60"
+									>Onde o material está armazenado</span
+								>
 							</label>
 						</div>
 					</div>
@@ -723,11 +889,11 @@
 
 				<!-- Seção: Informações Adicionais -->
 				<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">
-							<ShoppingCart class="h-5 w-5 text-info" strokeWidth={2.5} />
+					<div class="border-info/20 mb-6 flex items-center gap-3 border-b-2 pb-4">
+						<div class="bg-info/10 rounded-lg p-2.5">
+							<ShoppingCart class="text-info h-5 w-5" strokeWidth={2.5} />
 						</div>
-						<h2 class="text-xl font-bold text-base-content">Informações Adicionais</h2>
+						<h2 class="text-base-content text-xl font-bold">Informações Adicionais</h2>
 					</div>
 
 					<div class="grid grid-cols-1 gap-6">
@@ -738,12 +904,14 @@
 							</label>
 							<input
 								type="text"
-								class="input input-bordered w-full focus:input-primary transition-colors h-12"
+								class="input input-bordered focus:input-primary h-12 w-full transition-colors"
 								placeholder="Nome do fornecedor (opcional)"
 								bind:value={fornecedor}
 							/>
 							<label class="label pt-1">
-								<span class="label-text-alt text-base-content/60">Fornecedor principal do material</span>
+								<span class="label-text-alt text-base-content/60"
+									>Fornecedor principal do material</span
+								>
 							</label>
 						</div>
 					</div>
@@ -751,11 +919,11 @@
 
 				<!-- Seção: Imagem -->
 				<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">
-							<Image class="h-5 w-5 text-warning" strokeWidth={2.5} />
+					<div class="border-warning/20 mb-6 flex items-center gap-3 border-b-2 pb-4">
+						<div class="bg-warning/10 rounded-lg p-2.5">
+							<Image class="text-warning h-5 w-5" strokeWidth={2.5} />
 						</div>
-						<h2 class="text-xl font-bold text-base-content">Imagem do Produto</h2>
+						<h2 class="text-base-content text-xl font-bold">Imagem do Produto</h2>
 					</div>
 
 					<div class="form-control">
@@ -764,13 +932,17 @@
 						</label>
 						<ImageUpload bind:value={imagemBase64} />
 						<label class="label pt-1">
-							<span class="label-text-alt text-base-content/60">Upload opcional da imagem do produto para melhor identificação</span>
+							<span class="label-text-alt text-base-content/60">
+								Upload opcional da imagem do produto para melhor identificação. Se a imagem não
+								tiver sido carregada automaticamente pelos dados externos, salve a imagem no seu
+								computador e envie por aqui.
+							</span>
 						</label>
 					</div>
 				</div>
 
 				<!-- Botões -->
-				<div class="card-actions mt-10 justify-end gap-4 border-t-2 border-base-300 pt-8">
+				<div class="card-actions border-base-300 mt-10 justify-end gap-4 border-t-2 pt-8">
 					<button
 						type="button"
 						class="btn btn-ghost btn-lg min-w-[140px]"
@@ -780,7 +952,11 @@
 						<ArrowLeft class="h-5 w-5" />
 						Cancelar
 					</button>
-					<button type="submit" class="btn btn-primary btn-lg min-w-[180px] shadow-lg hover:shadow-xl transition-all" disabled={loading}>
+					<button
+						type="submit"
+						class="btn btn-primary btn-lg min-w-[180px] shadow-lg transition-all hover:shadow-xl"
+						disabled={loading}
+					>
 						{#if loading}
 							<span class="loading loading-spinner loading-sm"></span>
 							Cadastrando...
@@ -813,17 +989,17 @@
 
 			<!-- Modal Box -->
 			<div
-				class="pointer-events-auto absolute left-1/2 top-1/2 z-10 flex max-h-[92vh] w-full max-w-3xl transform -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-3xl bg-base-100 shadow-2xl transition-all duration-300"
+				class="bg-base-100 pointer-events-auto absolute top-1/2 left-1/2 z-10 flex max-h-[92vh] w-full max-w-3xl -translate-x-1/2 -translate-y-1/2 transform flex-col overflow-hidden rounded-3xl shadow-2xl transition-all duration-300"
 				style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
 				onclick={(e) => e.stopPropagation()}
 			>
 				<!-- Header -->
 				<div
-					class="border-base-300 from-primary/10 via-primary/5 to-transparent flex flex-shrink-0 items-center justify-between border-b bg-gradient-to-r px-6 py-5"
+					class="border-base-300 from-primary/10 via-primary/5 flex flex-shrink-0 items-center justify-between border-b bg-gradient-to-r to-transparent px-6 py-5"
 				>
 					<div class="flex items-center gap-4">
-						<div class="rounded-2xl bg-primary/20 p-3 shadow-lg">
-							<ExternalLink class="h-6 w-6 text-primary" strokeWidth={2.5} />
+						<div class="bg-primary/20 rounded-2xl p-3 shadow-lg">
+							<ExternalLink class="text-primary h-6 w-6" strokeWidth={2.5} />
 						</div>
 						<div class="flex-1">
 							<h3 id="modal-dados-externos-title" class="text-base-content text-2xl font-bold">
@@ -831,7 +1007,9 @@
 							</h3>
 							<p id="modal-dados-externos-description" class="text-base-content/70 mt-1 text-sm">
 								{#if dadosExternos?.fonte}
-									Dados encontrados em: <span class="font-semibold text-primary">{dadosExternos.fonte}</span>
+									Dados encontrados em: <span class="text-primary font-semibold"
+										>{dadosExternos.fonte}</span
+									>
 								{:else}
 									Dados encontrados na base externa. Deseja usar essas informações?
 								{/if}
@@ -857,7 +1035,9 @@
 								<label class="label pb-3">
 									<span class="label-text text-base font-semibold">Imagem do Produto</span>
 								</label>
-								<div class="flex justify-center rounded-xl border-2 border-base-300 bg-gradient-to-br from-base-200 to-base-300 p-6 shadow-inner">
+								<div
+									class="border-base-300 from-base-200 to-base-300 flex justify-center rounded-xl border-2 bg-gradient-to-br p-6 shadow-inner"
+								>
 									<img
 										src={dadosExternos.imagemUrl}
 										alt="Imagem do produto encontrado"
@@ -868,6 +1048,11 @@
 										}}
 									/>
 								</div>
+								<p class="text-base-content/70 mt-3 text-sm">
+									Se a imagem não for carregada automaticamente na tela de cadastro, você pode abrir
+									o site de origem, salvar a imagem no seu computador e fazer o upload manual na
+									seção <strong>“Imagem do Produto”</strong>.
+								</p>
 							</div>
 						{/if}
 
@@ -879,7 +1064,9 @@
 									<label class="label pb-2">
 										<span class="label-text font-semibold">Nome</span>
 									</label>
-									<div class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300">
+									<div
+										class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+									>
 										{dadosExternos.nome}
 									</div>
 								</div>
@@ -891,7 +1078,9 @@
 									<label class="label pb-2">
 										<span class="label-text font-semibold">Categoria</span>
 									</label>
-									<div class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300">
+									<div
+										class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+									>
 										{dadosExternos.categoria}
 									</div>
 								</div>
@@ -903,7 +1092,9 @@
 									<label class="label pb-2">
 										<span class="label-text font-semibold">Marca</span>
 									</label>
-									<div class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300">
+									<div
+										class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+									>
 										{dadosExternos.marca}
 									</div>
 								</div>
@@ -915,7 +1106,9 @@
 									<label class="label pb-2">
 										<span class="label-text font-semibold">Quantidade</span>
 									</label>
-									<div class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300">
+									<div
+										class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+									>
 										{dadosExternos.quantidade}
 									</div>
 								</div>
@@ -927,7 +1120,9 @@
 									<label class="label pb-2">
 										<span class="label-text font-semibold">Embalagem</span>
 									</label>
-									<div class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300">
+									<div
+										class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+									>
 										{dadosExternos.embalagem}
 									</div>
 								</div>
@@ -939,7 +1134,9 @@
 									<label class="label pb-2">
 										<span class="label-text font-semibold">Descrição</span>
 									</label>
-									<div class="textarea textarea-bordered bg-base-200/80 min-h-[100px] text-base-content/90 whitespace-pre-wrap border-base-300">
+									<div
+										class="textarea textarea-bordered bg-base-200/80 text-base-content/90 border-base-300 min-h-[100px] whitespace-pre-wrap"
+									>
 										{dadosExternos.descricao}
 									</div>
 								</div>
@@ -949,7 +1146,9 @@
 				</div>
 
 				<!-- Footer -->
-				<div class="border-base-300 flex flex-shrink-0 justify-end gap-3 border-t bg-base-200/30 px-6 py-4">
+				<div
+					class="border-base-300 bg-base-200/30 flex flex-shrink-0 justify-end gap-3 border-t px-6 py-4"
+				>
 					<button
 						type="button"
 						class="btn btn-ghost gap-2"
@@ -978,6 +1177,219 @@
 		</div>
 	{/if}
 
+	<!-- Modal de Dados Locais Encontrados -->
+	{#if modalDadosLocais && dadosLocais}
+		<div
+			class="pointer-events-none fixed inset-0 z-50"
+			style="animation: fadeIn 0.2s ease-out;"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="modal-dados-locais-title"
+			aria-describedby="modal-dados-locais-description"
+		>
+			<!-- Backdrop -->
+			<div
+				class="pointer-events-auto absolute inset-0 bg-black/50 backdrop-blur-md transition-opacity duration-300"
+				onclick={descartarDadosLocais}
+				aria-hidden="true"
+			></div>
+
+			<!-- Modal Box -->
+			<div
+				class="bg-base-100 pointer-events-auto absolute top-1/2 left-1/2 z-10 flex max-h-[92vh] w-full max-w-3xl -translate-x-1/2 -translate-y-1/2 transform flex-col overflow-hidden rounded-3xl shadow-2xl transition-all duration-300"
+				style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
+				onclick={(e) => e.stopPropagation()}
+			>
+				<!-- Header -->
+				<div
+					class="border-base-300 from-success/10 via-success/5 flex flex-shrink-0 items-center justify-between border-b bg-gradient-to-r to-transparent px-6 py-5"
+				>
+					<div class="flex items-center gap-4">
+						<div class="bg-success/20 rounded-2xl p-3 shadow-lg">
+							<Check class="text-success h-6 w-6" strokeWidth={2.5} />
+						</div>
+						<div class="flex-1">
+							<h3 id="modal-dados-locais-title" class="text-base-content text-2xl font-bold">
+								Produto encontrado no banco de dados
+							</h3>
+							<p id="modal-dados-locais-description" class="text-base-content/70 mt-1 text-sm">
+								Este produto já está cadastrado. Deseja usar essas informações?
+							</p>
+						</div>
+					</div>
+					<button
+						type="button"
+						class="btn btn-sm btn-circle btn-ghost hover:bg-base-300 transition-colors"
+						onclick={descartarDadosLocais}
+						aria-label="Fechar modal"
+					>
+						<X class="h-5 w-5" />
+					</button>
+				</div>
+
+				<!-- Content -->
+				<div class="modal-scroll flex-1 overflow-y-auto px-6 py-6">
+					<div class="space-y-6">
+						<!-- Imagem do Produto -->
+						{#if dadosLocais.imagemBase64}
+							<div class="form-control">
+								<label class="label pb-3">
+									<span class="label-text text-base font-semibold">Imagem do Produto</span>
+								</label>
+								<div
+									class="border-base-300 from-base-200 to-base-300 flex justify-center rounded-xl border-2 bg-gradient-to-br p-6 shadow-inner"
+								>
+									<img
+										src={dadosLocais.imagemBase64}
+										alt="Imagem do produto encontrado"
+										class="max-h-72 max-w-full rounded-lg object-contain shadow-lg"
+										loading="lazy"
+										onerror={(e) => {
+											(e.target as HTMLImageElement).style.display = 'none';
+										}}
+									/>
+								</div>
+							</div>
+						{/if}
+
+						<!-- Grid de Informações -->
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<!-- Código -->
+							<div class="form-control">
+								<label class="label pb-2">
+									<span class="label-text font-semibold">Código</span>
+								</label>
+								<div
+									class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+								>
+									{dadosLocais.codigo}
+								</div>
+							</div>
+
+							<!-- Nome -->
+							<div class="form-control">
+								<label class="label pb-2">
+									<span class="label-text font-semibold">Nome</span>
+								</label>
+								<div
+									class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+								>
+									{dadosLocais.nome}
+								</div>
+							</div>
+
+							<!-- Categoria -->
+							<div class="form-control">
+								<label class="label pb-2">
+									<span class="label-text font-semibold">Categoria</span>
+								</label>
+								<div
+									class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+								>
+									{dadosLocais.categoria}
+								</div>
+							</div>
+
+							<!-- Unidade de Medida -->
+							<div class="form-control">
+								<label class="label pb-2">
+									<span class="label-text font-semibold">Unidade de Medida</span>
+								</label>
+								<div
+									class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+								>
+									{dadosLocais.unidadeMedida}
+								</div>
+							</div>
+
+							<!-- Estoque Mínimo -->
+							<div class="form-control">
+								<label class="label pb-2">
+									<span class="label-text font-semibold">Estoque Mínimo</span>
+								</label>
+								<div
+									class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+								>
+									{dadosLocais.estoqueMinimo}
+									{dadosLocais.unidadeMedida}
+								</div>
+							</div>
+
+							<!-- Estoque Atual -->
+							<div class="form-control">
+								<label class="label pb-2">
+									<span class="label-text font-semibold">Estoque Atual</span>
+								</label>
+								<div
+									class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+								>
+									{dadosLocais.estoqueAtual}
+									{dadosLocais.unidadeMedida}
+								</div>
+							</div>
+
+							<!-- Localização -->
+							{#if dadosLocais.localizacao}
+								<div class="form-control">
+									<label class="label pb-2">
+										<span class="label-text font-semibold">Localização</span>
+									</label>
+									<div
+										class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+									>
+										{dadosLocais.localizacao}
+									</div>
+								</div>
+							{/if}
+
+							<!-- Fornecedor -->
+							{#if dadosLocais.fornecedor}
+								<div class="form-control">
+									<label class="label pb-2">
+										<span class="label-text font-semibold">Fornecedor</span>
+									</label>
+									<div
+										class="input input-bordered bg-base-200/80 text-base-content/90 border-base-300"
+									>
+										{dadosLocais.fornecedor}
+									</div>
+								</div>
+							{/if}
+
+							<!-- Descrição -->
+							{#if dadosLocais.descricao}
+								<div class="form-control md:col-span-2">
+									<label class="label pb-2">
+										<span class="label-text font-semibold">Descrição</span>
+									</label>
+									<div
+										class="textarea textarea-bordered bg-base-200/80 text-base-content/90 border-base-300 min-h-[100px] whitespace-pre-wrap"
+									>
+										{dadosLocais.descricao}
+									</div>
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				<!-- Footer -->
+				<div
+					class="border-base-300 bg-base-200/30 flex flex-shrink-0 justify-end gap-3 border-t px-6 py-4"
+				>
+					<button type="button" class="btn btn-ghost gap-2" onclick={descartarDadosLocais}>
+						<X class="h-5 w-5" />
+						Descartar
+					</button>
+					<button type="button" class="btn btn-primary gap-2 shadow-lg" onclick={usarDadosLocais}>
+						<Check class="h-5 w-5" />
+						Usar Estes Dados
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
 	<!-- Modal de Busca em Andamento -->
 	{#if modalBuscando}
 		<div
@@ -996,17 +1408,17 @@
 
 			<!-- Modal Box -->
 			<div
-				class="pointer-events-auto absolute left-1/2 top-1/2 z-10 flex max-h-[90vh] w-full max-w-md transform -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-3xl bg-base-100 shadow-2xl transition-all duration-300"
+				class="bg-base-100 pointer-events-auto absolute top-1/2 left-1/2 z-10 flex max-h-[90vh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 transform flex-col overflow-hidden rounded-3xl shadow-2xl transition-all duration-300"
 				style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
 				onclick={(e) => e.stopPropagation()}
 			>
 				<!-- Header -->
 				<div
-					class="border-base-300 from-info/10 via-info/5 to-transparent flex flex-shrink-0 items-center justify-between border-b bg-gradient-to-r px-6 py-5"
+					class="border-base-300 from-info/10 via-info/5 flex flex-shrink-0 items-center justify-between border-b bg-gradient-to-r to-transparent px-6 py-5"
 				>
 					<div class="flex items-center gap-4">
-						<div class="rounded-2xl bg-info/20 p-3 shadow-lg">
-							<Loader2 class="h-6 w-6 animate-spin text-info" strokeWidth={2.5} />
+						<div class="bg-info/20 rounded-2xl p-3 shadow-lg">
+							<Loader2 class="text-info h-6 w-6 animate-spin" strokeWidth={2.5} />
 						</div>
 						<div>
 							<h3 id="modal-buscando-title" class="text-base-content text-xl font-bold">
@@ -1022,21 +1434,23 @@
 				<!-- Content -->
 				<div class="flex-1 px-6 py-8">
 					<div class="flex flex-col items-center justify-center gap-6">
-						<div class="text-center space-y-4">
-							<div class="inline-flex items-center justify-center rounded-full bg-info/10 p-4">
-								<Loader2 class="h-8 w-8 animate-spin text-info" strokeWidth={2.5} />
+						<div class="space-y-4 text-center">
+							<div class="bg-info/10 inline-flex items-center justify-center rounded-full p-4">
+								<Loader2 class="text-info h-8 w-8 animate-spin" strokeWidth={2.5} />
 							</div>
 							<div class="space-y-2">
 								<p class="text-base-content/90 text-base font-medium">
-									Código: <span class="font-mono font-semibold text-primary">{codigoBarrasBuscado}</span>
+									Código: <span class="text-primary font-mono font-semibold"
+										>{codigoBarrasBuscado}</span
+									>
 								</p>
 								{#if !buscandoExterno}
-									<div class="flex items-center justify-center gap-2 text-sm text-base-content/70">
+									<div class="text-base-content/70 flex items-center justify-center gap-2 text-sm">
 										<span class="loading loading-spinner loading-sm text-info"></span>
 										<span>Buscando no banco de dados...</span>
 									</div>
 								{:else}
-									<div class="flex items-center justify-center gap-2 text-sm text-base-content/70">
+									<div class="text-base-content/70 flex items-center justify-center gap-2 text-sm">
 										<span class="loading loading-spinner loading-sm text-info"></span>
 										<span>Buscando em base externa...</span>
 									</div>
@@ -1068,17 +1482,17 @@
 
 			<!-- Modal Box -->
 			<div
-				class="pointer-events-auto absolute left-1/2 top-1/2 z-10 flex max-h-[90vh] w-full max-w-md transform -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-3xl bg-base-100 shadow-2xl transition-all duration-300"
+				class="bg-base-100 pointer-events-auto absolute top-1/2 left-1/2 z-10 flex max-h-[90vh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 transform flex-col overflow-hidden rounded-3xl shadow-2xl transition-all duration-300"
 				style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
 				onclick={(e) => e.stopPropagation()}
 			>
 				<!-- Header -->
 				<div
-					class="border-base-300 from-warning/10 via-warning/5 to-transparent flex flex-shrink-0 items-center justify-between border-b bg-gradient-to-r px-6 py-5"
+					class="border-base-300 from-warning/10 via-warning/5 flex flex-shrink-0 items-center justify-between border-b bg-gradient-to-r to-transparent px-6 py-5"
 				>
 					<div class="flex items-center gap-4">
-						<div class="rounded-2xl bg-warning/20 p-3 shadow-lg">
-							<AlertCircle class="h-6 w-6 text-warning" strokeWidth={2.5} />
+						<div class="bg-warning/20 rounded-2xl p-3 shadow-lg">
+							<AlertCircle class="text-warning h-6 w-6" strokeWidth={2.5} />
 						</div>
 						<div class="flex-1">
 							<h3 id="modal-nao-encontrado-title" class="text-base-content text-xl font-bold">
@@ -1102,21 +1516,25 @@
 				<!-- Content -->
 				<div class="modal-scroll flex-1 overflow-y-auto px-6 py-6">
 					<div class="alert alert-info border-info/30 bg-info/5 shadow-md">
-						<Info class="h-5 w-5 shrink-0 text-info" strokeWidth={2} />
+						<Info class="text-info h-5 w-5 shrink-0" strokeWidth={2} />
 						<div class="flex-1 space-y-2">
 							<p class="text-base-content/90 text-sm font-semibold">
-								Código de barras: <span class="font-mono font-bold text-primary">{codigoBarrasBuscado}</span>
+								Código de barras: <span class="text-primary font-mono font-bold"
+									>{codigoBarrasBuscado}</span
+								>
 							</p>
 							<p class="text-base-content/80 text-sm leading-relaxed">
-								Este produto não foi encontrado no banco de dados local nem em bases externas.
-								Por favor, preencha as informações manualmente.
+								Este produto não foi encontrado no banco de dados local nem em bases externas. Por
+								favor, preencha as informações manualmente.
 							</p>
 						</div>
 					</div>
 				</div>
 
 				<!-- Footer -->
-				<div class="border-base-300 flex flex-shrink-0 justify-end border-t bg-base-200/30 px-6 py-4">
+				<div
+					class="border-base-300 bg-base-200/30 flex flex-shrink-0 justify-end border-t px-6 py-4"
+				>
 					<button
 						type="button"
 						class="btn btn-primary gap-2 shadow-lg"
@@ -1181,7 +1599,7 @@
 
 	/* Melhorias de acessibilidade e responsividade */
 	@media (max-width: 640px) {
-		:global([role="dialog"]) > div:last-child {
+		:global([role='dialog']) > div:last-child {
 			max-width: calc(100vw - 2rem);
 			margin: 1rem;
 		}
@@ -1192,5 +1610,3 @@
 		overflow: hidden;
 	}
 </style>
-
-
diff --git a/apps/web/src/routes/(dashboard)/almoxarifado/movimentacoes/+page.svelte b/apps/web/src/routes/(dashboard)/almoxarifado/movimentacoes/+page.svelte
index 263bc68..f7716ec 100644
--- a/apps/web/src/routes/(dashboard)/almoxarifado/movimentacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/almoxarifado/movimentacoes/+page.svelte
@@ -4,6 +4,7 @@
 	import { useConvexClient, useQuery } from 'convex-svelte';
 	import { resolve } from '$app/paths';
 	import { ArrowLeftRight, ArrowDown, ArrowUp, Settings, History, Package, FileText, User, Building2, AlertCircle } from 'lucide-svelte';
+	import BarcodeScanner from '$lib/components/almoxarifado/BarcodeScanner.svelte';
 
 	const client = useConvexClient();
 
@@ -16,6 +17,8 @@
 	let entradaDocumento = $state('');
 	let entradaObservacoes = $state('');
 	let entradaLoading = $state(false);
+	let entradaScannerEnabled = $state(false);
+	let entradaBuscandoMaterial = $state(false);
 
 	// Estados do formulário de saída
 	let saidaMaterialId = $state<Id<'materiais'> | ''>('');
@@ -25,6 +28,8 @@
 	let saidaSetorId = $state<Id<'setores'> | ''>('');
 	let saidaObservacoes = $state('');
 	let saidaLoading = $state(false);
+	let saidaScannerEnabled = $state(false);
+	let saidaBuscandoMaterial = $state(false);
 
 	// Estados do formulário de ajuste
 	let ajusteMaterialId = $state<Id<'materiais'> | ''>('');
@@ -68,6 +73,60 @@
 		}, 5000);
 	}
 
+	// Função para buscar material por código de barras (entrada)
+	async function buscarMaterialPorCodigoBarrasEntrada(codigoBarras: string) {
+		if (!codigoBarras.trim() || codigoBarras.trim().length < 8) {
+			mostrarMensagem('error', 'Código de barras inválido');
+			return;
+		}
+
+		entradaBuscandoMaterial = true;
+		try {
+			const material = await client.query(api.almoxarifado.buscarMaterialPorCodigoBarras, {
+				codigoBarras: codigoBarras.trim()
+			});
+
+			if (material) {
+				entradaMaterialId = material._id;
+				mostrarMensagem('success', `Material encontrado: ${material.nome}`);
+			} else {
+				mostrarMensagem('error', 'Material não encontrado com este código de barras');
+			}
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao buscar material';
+			mostrarMensagem('error', message);
+		} finally {
+			entradaBuscandoMaterial = false;
+		}
+	}
+
+	// Função para buscar material por código de barras (saída)
+	async function buscarMaterialPorCodigoBarrasSaida(codigoBarras: string) {
+		if (!codigoBarras.trim() || codigoBarras.trim().length < 8) {
+			mostrarMensagem('error', 'Código de barras inválido');
+			return;
+		}
+
+		saidaBuscandoMaterial = true;
+		try {
+			const material = await client.query(api.almoxarifado.buscarMaterialPorCodigoBarras, {
+				codigoBarras: codigoBarras.trim()
+			});
+
+			if (material) {
+				saidaMaterialId = material._id;
+				mostrarMensagem('success', `Material encontrado: ${material.nome}`);
+			} else {
+				mostrarMensagem('error', 'Material não encontrado com este código de barras');
+			}
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao buscar material';
+			mostrarMensagem('error', message);
+		} finally {
+			saidaBuscandoMaterial = false;
+		}
+	}
+
 	async function registrarEntrada() {
 		if (!entradaMaterialId || entradaQuantidade <= 0 || !entradaMotivo.trim()) {
 			mostrarMensagem('error', 'Preencha todos os campos obrigatórios');
@@ -249,6 +308,15 @@
 					<h2 class="text-2xl font-bold text-base-content">Registrar Entrada de Material</h2>
 				</div>
 				<form onsubmit={(e) => { e.preventDefault(); registrarEntrada(); }}>
+					<!-- Leitor de Código de Barras -->
+					<div class="mb-6 rounded-xl border border-base-300 bg-base-200/50 p-4">
+						<BarcodeScanner
+							enabled={entradaScannerEnabled}
+							onScan={buscarMaterialPorCodigoBarrasEntrada}
+							onError={(error) => mostrarMensagem('error', error)}
+						/>
+					</div>
+
 					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 						<!-- Material -->
 						<div class="form-control md:col-span-2">
@@ -256,9 +324,12 @@
 								<span class="label-text font-semibold flex items-center gap-2">
 									<Package class="h-4 w-4" />
 									Material <span class="text-error">*</span>
+									{#if entradaBuscandoMaterial}
+										<span class="loading loading-spinner loading-xs"></span>
+									{/if}
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={entradaMaterialId} required>
+							<select class="select select-bordered w-full focus:select-primary transition-colors h-12 {entradaBuscandoMaterial ? 'input-info' : ''}" bind:value={entradaMaterialId} required>
 								<option value="">Selecione um material</option>
 								{#if materiaisQuery.data}
 									{#each materiaisQuery.data as material}
@@ -268,6 +339,15 @@
 									{/each}
 								{/if}
 							</select>
+							<label class="label pt-1">
+								<span class="label-text-alt text-base-content/60">
+									{#if entradaBuscandoMaterial}
+										<span class="text-info">Buscando material...</span>
+									{:else}
+										Selecione manualmente ou use o leitor de código de barras acima
+									{/if}
+								</span>
+							</label>
 						</div>
 
 						<!-- Quantidade -->
@@ -371,6 +451,15 @@
 					<h2 class="text-2xl font-bold text-base-content">Registrar Saída de Material</h2>
 				</div>
 				<form onsubmit={(e) => { e.preventDefault(); registrarSaida(); }}>
+					<!-- Leitor de Código de Barras -->
+					<div class="mb-6 rounded-xl border border-base-300 bg-base-200/50 p-4">
+						<BarcodeScanner
+							enabled={saidaScannerEnabled}
+							onScan={buscarMaterialPorCodigoBarrasSaida}
+							onError={(error) => mostrarMensagem('error', error)}
+						/>
+					</div>
+
 					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 						<!-- Material -->
 						<div class="form-control md:col-span-2">
@@ -378,9 +467,12 @@
 								<span class="label-text font-semibold flex items-center gap-2">
 									<Package class="h-4 w-4" />
 									Material <span class="text-error">*</span>
+									{#if saidaBuscandoMaterial}
+										<span class="loading loading-spinner loading-xs"></span>
+									{/if}
 								</span>
 							</label>
-							<select class="select select-bordered w-full focus:select-primary transition-colors h-12" bind:value={saidaMaterialId} required>
+							<select class="select select-bordered w-full focus:select-primary transition-colors h-12 {saidaBuscandoMaterial ? 'input-info' : ''}" bind:value={saidaMaterialId} required>
 								<option value="">Selecione um material</option>
 								{#if materiaisQuery.data}
 									{#each materiaisQuery.data as material}
@@ -390,6 +482,15 @@
 									{/each}
 								{/if}
 							</select>
+							<label class="label pt-1">
+								<span class="label-text-alt text-base-content/60">
+									{#if saidaBuscandoMaterial}
+										<span class="text-info">Buscando material...</span>
+									{:else}
+										Selecione manualmente ou use o leitor de código de barras acima
+									{/if}
+								</span>
+							</label>
 						</div>
 
 						<!-- Quantidade -->
diff --git a/apps/web/src/routes/(dashboard)/almoxarifado/relatorios/+page.svelte b/apps/web/src/routes/(dashboard)/almoxarifado/relatorios/+page.svelte
index cecbe11..512dbe0 100644
--- a/apps/web/src/routes/(dashboard)/almoxarifado/relatorios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/almoxarifado/relatorios/+page.svelte
@@ -784,7 +784,7 @@
 				<h2 class="text-xl font-bold text-base-content">Estatísticas Gerais</h2>
 			</div>
 			<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-			<div class="card bg-gradient-to-br from-primary/10 via-primary/5 to-base-100 border border-primary/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
+				<div class="card bg-gradient-to-br from-primary/10 via-primary/5 to-base-100 border border-primary/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
 				<div class="card-body">
 					<div class="flex items-center justify-between">
 						<div class="flex-1">
@@ -844,6 +844,7 @@
 				</div>
 			</div>
 		</div>
+	</div>
 	{/if}
 
 	<!-- Relatórios Disponíveis -->
diff --git a/packages/backend/convex/_generated/api.d.ts b/packages/backend/convex/_generated/api.d.ts
index 3ed25b2..5d8de54 100644
--- a/packages/backend/convex/_generated/api.d.ts
+++ b/packages/backend/convex/_generated/api.d.ts
@@ -10,6 +10,7 @@
 
 import type * as acoes from "../acoes.js";
 import type * as actions_buscarInfoProduto from "../actions/buscarInfoProduto.js";
+import type * as actions_downloadImage from "../actions/downloadImage.js";
 import type * as actions_email from "../actions/email.js";
 import type * as actions_linkPreview from "../actions/linkPreview.js";
 import type * as actions_pushNotifications from "../actions/pushNotifications.js";
@@ -109,6 +110,7 @@ import type {
 declare const fullApi: ApiFromModules<{
   acoes: typeof acoes;
   "actions/buscarInfoProduto": typeof actions_buscarInfoProduto;
+  "actions/downloadImage": typeof actions_downloadImage;
   "actions/email": typeof actions_email;
   "actions/linkPreview": typeof actions_linkPreview;
   "actions/pushNotifications": typeof actions_pushNotifications;
diff --git a/packages/backend/convex/actions/downloadImage.ts b/packages/backend/convex/actions/downloadImage.ts
new file mode 100644
index 0000000..f30249c
--- /dev/null
+++ b/packages/backend/convex/actions/downloadImage.ts
@@ -0,0 +1,137 @@
+'use node';
+
+import { action } from '../_generated/server';
+import { v } from 'convex/values';
+
+/**
+ * Baixa uma imagem de uma URL externa e converte para base64.
+ *
+ * Esta action roda no servidor (Node.js), então não tem restrições de CORS
+ * do navegador. Pode baixar imagens de qualquer domínio.
+ *
+ * @param url - URL da imagem a ser baixada
+ * @returns String base64 da imagem (data URL) ou null se falhar
+ */
+export const downloadImageAsBase64 = action({
+	args: {
+		url: v.string()
+	},
+	returns: v.union(v.string(), v.null()),
+	handler: async (ctx, args): Promise<string | null> => {
+		const { url } = args;
+
+		try {
+			// Validar URL
+			let urlObj: URL;
+			try {
+				urlObj = new URL(url);
+			} catch {
+				console.error('URL inválida:', url);
+				return null;
+			}
+
+			// Verificar se é uma URL HTTP/HTTPS
+			if (!['http:', 'https:'].includes(urlObj.protocol)) {
+				console.error('Protocolo não suportado:', urlObj.protocol);
+				return null;
+			}
+
+			// Baixar a imagem (server-side não tem CORS)
+			// Tentar múltiplas estratégias para evitar bloqueios (403) de CDNs
+			type HeadersStrategy = Record<string, string>;
+
+			const estrategias: Array<{ name: string; headers: HeadersStrategy }> = [
+				// Estratégia 1: Headers completos de navegador moderno
+				{
+					name: 'headers-completos',
+					headers: {
+						'User-Agent':
+							'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+						Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
+						'Accept-Language': 'pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7',
+						'Accept-Encoding': 'gzip, deflate, br',
+						Referer: urlObj.origin + '/',
+						'Sec-Fetch-Dest': 'image',
+						'Sec-Fetch-Mode': 'no-cors',
+						'Sec-Fetch-Site': 'cross-site',
+						'Cache-Control': 'no-cache'
+					} as HeadersStrategy
+				},
+				// Estratégia 2: Headers mínimos mas realistas
+				{
+					name: 'headers-minimos',
+					headers: {
+						'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+						Accept: 'image/*',
+						Referer: urlObj.origin + '/'
+					} as HeadersStrategy
+				},
+				// Estratégia 3: Apenas User-Agent básico
+				{
+					name: 'user-agent-basico',
+					headers: {
+						'User-Agent': 'Mozilla/5.0'
+					} as HeadersStrategy
+				},
+				// Estratégia 4: Sem headers (máximo compatibilidade)
+				{
+					name: 'sem-headers',
+					headers: {} as HeadersStrategy
+				}
+			];
+
+			let ultimoErro: { status?: number; statusText?: string; message?: string } | null = null;
+
+			for (const estrategia of estrategias) {
+				try {
+					const response = await fetch(url, {
+						headers: estrategia.headers,
+						signal: AbortSignal.timeout(10000) // Timeout de 10 segundos
+					});
+
+					if (response.ok) {
+						// Verificar Content-Type
+						const contentType = response.headers.get('content-type');
+						if (contentType && contentType.startsWith('image/')) {
+							const arrayBuffer = await response.arrayBuffer();
+							const buffer = Buffer.from(arrayBuffer);
+							const base64 = buffer.toString('base64');
+							const dataUrl = `data:${contentType};base64,${base64}`;
+							console.log(
+								`✅ Imagem baixada usando estratégia "${estrategia.name}": ${url} (${buffer.length} bytes)`
+							);
+							return dataUrl;
+						} else {
+							console.warn(`Estratégia "${estrategia.name}": Content-Type inválido:`, contentType);
+						}
+					} else {
+						ultimoErro = {
+							status: response.status,
+							statusText: response.statusText
+						};
+						console.warn(
+							`Estratégia "${estrategia.name}" falhou: ${response.status} ${response.statusText}`
+						);
+					}
+				} catch (error) {
+					const errorMessage = error instanceof Error ? error.message : String(error);
+					ultimoErro = { message: errorMessage };
+					console.warn(`Estratégia "${estrategia.name}" lançou exceção:`, errorMessage);
+				}
+			}
+
+			// Se todas as estratégias falharam, logar erro detalhado
+			console.error(
+				'❌ Todas as estratégias falharam ao baixar imagem:',
+				url,
+				'Último erro:',
+				ultimoErro
+			);
+			return null;
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			console.error('Erro ao baixar imagem de URL:', url, errorMessage);
+			return null;
+		}
+	}
+});