From fc4b5c5ba56c282d50be1fa7e03d1395294a3259 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 19:32:05 -0300
Subject: [PATCH 1/9] feat: add date formatting utility and enhance filtering
 in registro-pontos

- Introduced a new utility function `formatarDataDDMMAAAA` to format dates in DD/MM/AAAA format, supporting various input types.
- Updated the `registro-pontos` page to utilize the new date formatting function for displaying dates consistently.
- Implemented advanced filtering options for status and location, allowing users to filter records based on their criteria.
- Enhanced CSV export functionality to include formatted dates and additional filtering capabilities, improving data management for users.
---
 .../components/ponto/LocalizacaoIcon.svelte   |  26 ++
 .../components/ponto/SaldoDiarioBadge.svelte  |  36 +++
 apps/web/src/lib/utils/ponto.ts               |  34 +++
 .../registro-pontos/+page.svelte              | 275 ++++++++++++++----
 4 files changed, 322 insertions(+), 49 deletions(-)
 create mode 100644 apps/web/src/lib/components/ponto/LocalizacaoIcon.svelte
 create mode 100644 apps/web/src/lib/components/ponto/SaldoDiarioBadge.svelte

diff --git a/apps/web/src/lib/components/ponto/LocalizacaoIcon.svelte b/apps/web/src/lib/components/ponto/LocalizacaoIcon.svelte
new file mode 100644
index 0000000..2687903
--- /dev/null
+++ b/apps/web/src/lib/components/ponto/LocalizacaoIcon.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { MapPin, AlertCircle, HelpCircle } from 'lucide-svelte';
+
+	interface Props {
+		dentroRaioPermitido: boolean | null | undefined;
+		showTooltip?: boolean;
+	}
+
+	let { dentroRaioPermitido, showTooltip = true }: Props = $props();
+</script>
+
+{#if dentroRaioPermitido === true}
+	<div class="tooltip tooltip-top" data-tip={showTooltip ? 'Dentro do Raio' : ''}>
+		<MapPin class="h-5 w-5 text-success" strokeWidth={2.5} />
+	</div>
+{:else if dentroRaioPermitido === false}
+	<div class="tooltip tooltip-top" data-tip={showTooltip ? 'Fora do Raio' : ''}>
+		<AlertCircle class="h-5 w-5 text-error" strokeWidth={2.5} />
+	</div>
+{:else}
+	<div class="tooltip tooltip-top" data-tip={showTooltip ? 'Não Validado' : ''}>
+		<HelpCircle class="h-5 w-5 text-base-content/40" strokeWidth={2.5} />
+	</div>
+{/if}
+
+
diff --git a/apps/web/src/lib/components/ponto/SaldoDiarioBadge.svelte b/apps/web/src/lib/components/ponto/SaldoDiarioBadge.svelte
new file mode 100644
index 0000000..f7c5217
--- /dev/null
+++ b/apps/web/src/lib/components/ponto/SaldoDiarioBadge.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	interface Props {
+		saldo?: {
+			saldoMinutos: number;
+			horas: number;
+			minutos: number;
+			positivo: boolean;
+		} | null;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let { saldo, size = 'md' }: Props = $props();
+
+	function formatarSaldo(saldo: NonNullable<Props['saldo']>): string {
+		const sinal = saldo.positivo ? '+' : '-';
+		return `${sinal}${saldo.horas}h ${saldo.minutos}min`;
+	}
+
+	const sizeClasses = {
+		sm: 'badge-sm',
+		md: 'badge-lg',
+		lg: 'badge-xl'
+	};
+</script>
+
+{#if saldo}
+	<span
+		class="badge font-semibold shadow-sm {sizeClasses[size]} {saldo.positivo
+			? 'badge-success'
+			: 'badge-error'}"
+	>
+		{formatarSaldo(saldo)}
+	</span>
+{:else}
+	<span class="badge badge-ghost {sizeClasses[size]}">-</span>
+{/if}
diff --git a/apps/web/src/lib/utils/ponto.ts b/apps/web/src/lib/utils/ponto.ts
index 0015069..d6384c3 100644
--- a/apps/web/src/lib/utils/ponto.ts
+++ b/apps/web/src/lib/utils/ponto.ts
@@ -122,3 +122,37 @@ export function getProximoTipoRegistro(
 	}
 }
 
+/**
+ * Formata data no formato DD/MM/AAAA
+ * Suporta strings ISO (YYYY-MM-DD), objetos Date, e timestamps
+ */
+export function formatarDataDDMMAAAA(data: string | Date | number): string {
+	if (!data) return '';
+	
+	let dataObj: Date;
+	
+	if (typeof data === 'string') {
+		// Se for string no formato ISO (YYYY-MM-DD), adicionar hora para evitar problemas de timezone
+		if (data.match(/^\d{4}-\d{2}-\d{2}$/)) {
+			dataObj = new Date(data + 'T12:00:00');
+		} else {
+			dataObj = new Date(data);
+		}
+	} else if (typeof data === 'number') {
+		dataObj = new Date(data);
+	} else {
+		dataObj = data;
+	}
+	
+	// Verificar se a data é válida
+	if (isNaN(dataObj.getTime())) {
+		return '';
+	}
+	
+	const dia = dataObj.getDate().toString().padStart(2, '0');
+	const mes = (dataObj.getMonth() + 1).toString().padStart(2, '0');
+	const ano = dataObj.getFullYear();
+	
+	return `${dia}/${mes}/${ano}`;
+}
+
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 5a9cbca..03b9e4f 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -4,13 +4,16 @@
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import { Clock, Filter, Download, Printer, BarChart3, Users, CheckCircle2, XCircle, TrendingUp, TrendingDown, FileText } from 'lucide-svelte';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
-	import { formatarHoraPonto, getTipoRegistroLabel } from '$lib/utils/ponto';
+	import { formatarHoraPonto, getTipoRegistroLabel, formatarDataDDMMAAAA } from '$lib/utils/ponto';
+	import LocalizacaoIcon from '$lib/components/ponto/LocalizacaoIcon.svelte';
+	import SaldoDiarioBadge from '$lib/components/ponto/SaldoDiarioBadge.svelte';
 	import jsPDF from 'jspdf';
 	import autoTable from 'jspdf-autotable';
 	import logoGovPE from '$lib/assets/logo_governo_PE.png';
 	import PrintPontoModal from '$lib/components/ponto/PrintPontoModal.svelte';
 	import { toast } from 'svelte-sonner';
 	import { Chart, registerables } from 'chart.js';
+	import Papa from 'papaparse';
 	
 	Chart.register(...registerables);
 
@@ -20,6 +23,8 @@
 	let dataInicio = $state(new Date().toISOString().split('T')[0]!);
 	let dataFim = $state(new Date().toISOString().split('T')[0]!);
 	let funcionarioIdFiltro = $state<Id<'funcionarios'> | ''>('');
+	let statusFiltro = $state<'todos' | 'dentro' | 'fora'>('todos');
+	let localizacaoFiltro = $state<'todos' | 'dentro' | 'fora'>('todos');
 	let carregando = $state(false);
 	let mostrarModalImpressao = $state(false);
 	let funcionarioParaImprimir = $state<Id<'funcionarios'> | ''>('');
@@ -209,6 +214,33 @@
 		}
 	});
 
+	// Filtrar registros com base nos filtros avançados
+	const registrosFiltrados = $derived.by(() => {
+		if (!registros || registros.length === 0) return [];
+		
+		let resultado = [...registros];
+		
+		// Filtro de status (Dentro/Fora do Prazo)
+		if (statusFiltro !== 'todos') {
+			resultado = resultado.filter(r => {
+				if (statusFiltro === 'dentro') return r.dentroDoPrazo === true;
+				if (statusFiltro === 'fora') return r.dentroDoPrazo === false;
+				return true;
+			});
+		}
+		
+		// Filtro de localização (Dentro/Fora do Raio)
+		if (localizacaoFiltro !== 'todos') {
+			resultado = resultado.filter(r => {
+				if (localizacaoFiltro === 'dentro') return r.dentroRaioPermitido === true;
+				if (localizacaoFiltro === 'fora') return r.dentroRaioPermitido === false;
+				return true;
+			});
+		}
+		
+		return resultado;
+	});
+
 	// Agrupar registros por funcionário e data
 	const registrosAgrupados = $derived.by(() => {
 		const agrupados: Record<
@@ -230,12 +262,15 @@
 		// Usar Set para evitar registros duplicados
 		const registrosProcessados = new Set<string>();
 
+		// Usar registros filtrados ao invés de registros originais
+		const registrosParaAgrupar = registrosFiltrados;
+		
 		// Verificar se registros é um array válido
-		if (!Array.isArray(registros) || registros.length === 0) {
+		if (!Array.isArray(registrosParaAgrupar) || registrosParaAgrupar.length === 0) {
 			return [];
 		}
 
-		for (const registro of registros) {
+		for (const registro of registrosParaAgrupar) {
 			// Verificar se o registro tem os campos necessários
 			if (!registro || !registro._id || !registro.funcionarioId || !registro.data) {
 				console.warn('⚠️ [DEBUG] Registro inválido ignorado:', registro);
@@ -345,16 +380,7 @@
 		return `${sinal}${saldo.horas}h ${saldo.minutos}min`;
 	}
 
-	// Função para formatar data em português
-	function formatarData(data: string): string {
-		if (!data) return '';
-		const dataObj = new Date(data + 'T00:00:00');
-		return dataObj.toLocaleDateString('pt-BR', {
-			day: '2-digit',
-			month: '2-digit',
-			year: 'numeric'
-		});
-	}
+	// Usar função centralizada formatarDataDDMMAAAA da lib/utils/ponto.ts
 
 	// Obter nome do funcionário selecionado
 	const funcionarioSelecionadoNome = $derived.by(() => {
@@ -407,6 +433,93 @@
 		mostrarModalImpressao = true;
 	}
 
+	// Função para limpar todos os filtros
+	function limparFiltros() {
+		dataInicio = new Date().toISOString().split('T')[0]!;
+		dataFim = new Date().toISOString().split('T')[0]!;
+		funcionarioIdFiltro = '';
+		statusFiltro = 'todos';
+		localizacaoFiltro = 'todos';
+		toast.success('Filtros limpos com sucesso!');
+	}
+
+	// Função para exportar registros para CSV
+	async function exportarCSV() {
+		try {
+			const registrosParaExportar = registrosFiltrados;
+			
+			if (!registrosParaExportar || registrosParaExportar.length === 0) {
+				toast.error('Nenhum registro para exportar');
+				return;
+			}
+
+			// Preparar dados para CSV
+			const csvData = registrosParaExportar.map((registro) => {
+				const funcionarioNome = registro.funcionario?.nome || 'N/A';
+				const funcionarioMatricula = registro.funcionario?.matricula || 'N/A';
+				const tipo = config
+					? getTipoRegistroLabel(registro.tipo, {
+							nomeEntrada: config.nomeEntrada,
+							nomeSaidaAlmoco: config.nomeSaidaAlmoco,
+							nomeRetornoAlmoco: config.nomeRetornoAlmoco,
+							nomeSaida: config.nomeSaida,
+						})
+					: getTipoRegistroLabel(registro.tipo);
+				
+				const horario = formatarHoraPonto(registro.hora, registro.minuto);
+				const status = registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo';
+				const localizacao = registro.dentroRaioPermitido === true 
+					? 'Dentro do Raio' 
+					: registro.dentroRaioPermitido === false 
+					? 'Fora do Raio' 
+					: 'Não Validado';
+				
+				return {
+					'Data': formatarDataDDMMAAAA(registro.data),
+					'Funcionário': funcionarioNome,
+					'Matrícula': funcionarioMatricula,
+					'Tipo': tipo,
+					'Horário': horario,
+					'Status': status,
+					'Localização': localizacao,
+					'IP': registro.ipAddress || 'N/A',
+					'Dispositivo': registro.deviceType || 'N/A',
+				};
+			});
+
+			// Gerar CSV usando Papa Parse
+			const csv = Papa.unparse(csvData, {
+				header: true,
+				delimiter: ';',
+				encoding: 'UTF-8',
+			});
+
+			// Adicionar BOM para Excel reconhecer UTF-8 corretamente
+			const BOM = '\uFEFF';
+			const csvComBOM = BOM + csv;
+
+			// Criar blob e download
+			const blob = new Blob([csvComBOM], { type: 'text/csv;charset=utf-8;' });
+			const link = document.createElement('a');
+			const url = URL.createObjectURL(blob);
+			link.setAttribute('href', url);
+			link.setAttribute(
+				'download',
+				`registros-ponto-${formatarDataDDMMAAAA(dataInicio)}-${formatarDataDDMMAAAA(dataFim)}.csv`
+			);
+			link.style.visibility = 'hidden';
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+			URL.revokeObjectURL(url);
+
+			toast.success('CSV exportado com sucesso!');
+		} catch (error) {
+			console.error('Erro ao exportar CSV:', error);
+			toast.error('Erro ao exportar CSV. Tente novamente.');
+		}
+	}
+
 	async function gerarPDFComSelecao(sections: {
 		dadosFuncionario: boolean;
 		registrosPonto: boolean;
@@ -497,10 +610,8 @@
 				}
 
 				yPosition += 5;
-				// Formatar período para exibição
-				const dataInicioParts = dataInicio.split('-');
-				const dataFimParts = dataFim.split('-');
-				const periodoFormatado = `${dataInicioParts[2]}/${dataInicioParts[1]}/${dataInicioParts[0]} a ${dataFimParts[2]}/${dataFimParts[1]}/${dataFimParts[0]}`;
+				// Formatar período para exibição usando função centralizada
+				const periodoFormatado = `${formatarDataDDMMAAAA(dataInicio)} a ${formatarDataDDMMAAAA(dataFim)}`;
 				doc.text(`Período: ${periodoFormatado}`, 15, yPosition);
 				yPosition += 10;
 			}
@@ -571,6 +682,7 @@
 						hora: number;
 						minuto: number;
 						dentroDoPrazo: boolean;
+						dentroRaioPermitido: boolean | null | undefined;
 					}>
 				> = {};
 
@@ -585,14 +697,14 @@
 						hora: r.hora,
 						minuto: r.minuto,
 						dentroDoPrazo: r.dentroDoPrazo,
+						dentroRaioPermitido: r.dentroRaioPermitido,
 					});
 				}
 
 				// Criar dados da tabela com saldo diário
 				for (const [data, regs] of Object.entries(registrosPorData)) {
-					// Formatar data para exibição (DD/MM/YYYY)
-					const dataParts = data.split('-');
-					const dataFormatada = `${dataParts[2]}/${dataParts[1]}/${dataParts[0]}`;
+					// Formatar data para exibição usando função centralizada (DD/MM/AAAA)
+					const dataFormatada = formatarDataDDMMAAAA(data);
 					
 					// Calcular saldo diário como diferença entre saída e entrada
 					const saldoDiarioDia = calcularSaldoDiario(regs);
@@ -621,6 +733,15 @@
 							}
 						}
 
+						// Adicionar localização (geofencing)
+						if (reg.dentroRaioPermitido === true) {
+							linha.push('✅ Dentro do Raio');
+						} else if (reg.dentroRaioPermitido === false) {
+							linha.push('⚠️ Fora do Raio');
+						} else {
+							linha.push('❓ Não Validado');
+						}
+
 						linha.push(reg.dentroDoPrazo ? 'Sim' : 'Não');
 
 						tableData.push(linha);
@@ -631,6 +752,7 @@
 				if (sections.saldoDiario) {
 					headers.push('Saldo Diário');
 				}
+				headers.push('Localização');
 				headers.push('Dentro do Prazo');
 
 				// Salvar a posição Y antes da tabela
@@ -740,9 +862,8 @@
 				yPosition += 10;
 
 				const homologacoesData = homologacoes.map((h) => {
-					// Formatar data de criação
-					const dataCriacao = new Date(h.criadoEm);
-					const dataFormatada = `${dataCriacao.getDate().toString().padStart(2, '0')}/${(dataCriacao.getMonth() + 1).toString().padStart(2, '0')}/${dataCriacao.getFullYear()}`;
+					// Formatar data de criação usando função centralizada (DD/MM/AAAA)
+					const dataFormatada = formatarDataDDMMAAAA(h.criadoEm);
 					
 					if (h.registroId && h.horaAnterior !== undefined) {
 						return [
@@ -804,13 +925,9 @@
 				yPosition += 10;
 
 				const dispensasData = dispensas.map((d) => {
-					// Formatar data de início
-					const dataInicioParts = d.dataInicio.split('-');
-					const dataInicioFormatada = `${dataInicioParts[2]}/${dataInicioParts[1]}/${dataInicioParts[0]}`;
-					
-					// Formatar data de fim
-					const dataFimParts = d.dataFim.split('-');
-					const dataFimFormatada = `${dataFimParts[2]}/${dataFimParts[1]}/${dataFimParts[0]}`;
+					// Formatar data de início e fim usando função centralizada (DD/MM/AAAA)
+					const dataInicioFormatada = formatarDataDDMMAAAA(d.dataInicio);
+					const dataFimFormatada = formatarDataDDMMAAAA(d.dataFim);
 					
 					return [
 						`${dataInicioFormatada} ${d.horaInicio.toString().padStart(2, '0')}:${d.minutoInicio.toString().padStart(2, '0')}`,
@@ -1805,13 +1922,34 @@
 	<!-- Filtros -->
 	<div class="card bg-base-100/90 backdrop-blur-sm border border-base-300 shadow-xl mb-8">
 		<div class="card-body">
-			<div class="flex items-center gap-3 mb-6">
-				<div class="p-2 bg-secondary/10 rounded-lg">
-					<Filter class="h-5 w-5 text-secondary" strokeWidth={2.5} />
+			<div class="flex items-center justify-between mb-6">
+				<div class="flex items-center gap-3">
+					<div class="p-2 bg-secondary/10 rounded-lg">
+						<Filter class="h-5 w-5 text-secondary" strokeWidth={2.5} />
+					</div>
+					<h2 class="card-title text-2xl mb-0">Filtros de Busca</h2>
+				</div>
+				<div class="flex items-center gap-3">
+					<button
+						type="button"
+						class="btn btn-outline btn-secondary gap-2 shadow-md hover:shadow-lg transition-all"
+						onclick={limparFiltros}
+					>
+						<Filter class="h-4 w-4" />
+						Limpar Filtros
+					</button>
+					<button
+						type="button"
+						class="btn btn-primary gap-2 shadow-md hover:shadow-lg transition-all"
+						onclick={exportarCSV}
+						disabled={registrosFiltrados.length === 0}
+					>
+						<Download class="h-4 w-4" />
+						Exportar CSV
+					</button>
 				</div>
-				<h2 class="card-title text-2xl mb-0">Filtros de Busca</h2>
 			</div>
-			<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
 				<div class="form-control">
 					<label class="label" for="data-inicio">
 						<span class="label-text font-semibold">Data Início</span>
@@ -1851,7 +1989,51 @@
 						{/each}
 					</select>
 				</div>
+
+				<div class="form-control">
+					<label class="label" for="status">
+						<span class="label-text font-semibold">Status</span>
+					</label>
+					<select
+						id="status"
+						bind:value={statusFiltro}
+						class="select select-bordered select-primary focus:select-primary focus:ring-2 focus:ring-primary/20"
+					>
+						<option value="todos">Todos</option>
+						<option value="dentro">Dentro do Prazo</option>
+						<option value="fora">Fora do Prazo</option>
+					</select>
+				</div>
+
+				<div class="form-control">
+					<label class="label" for="localizacao">
+						<span class="label-text font-semibold">Localização</span>
+					</label>
+					<select
+						id="localizacao"
+						bind:value={localizacaoFiltro}
+						class="select select-bordered select-primary focus:select-primary focus:ring-2 focus:ring-primary/20"
+					>
+						<option value="todos">Todas</option>
+						<option value="dentro">Dentro do Raio</option>
+						<option value="fora">Fora do Raio</option>
+					</select>
+				</div>
 			</div>
+			
+			<!-- Indicador de registros filtrados -->
+			{#if statusFiltro !== 'todos' || localizacaoFiltro !== 'todos'}
+				<div class="mt-4 p-3 bg-info/10 border border-info/20 rounded-lg">
+					<p class="text-sm text-base-content/80">
+						<strong>{registrosFiltrados.length}</strong> registro(s) encontrado(s) com os filtros aplicados
+						{#if registros.length !== registrosFiltrados.length}
+							<span class="text-xs text-base-content/60">
+								(de {registros.length} total)
+							</span>
+						{/if}
+					</p>
+				</div>
+			{/if}
 		</div>
 	</div>
 
@@ -1878,13 +2060,13 @@
 						{#if dataInicio}
 							<div class="badge badge-info badge-lg gap-2 px-4 py-3">
 								<Clock class="h-4 w-4" />
-								De: {formatarData(dataInicio)}
+								De: {formatarDataDDMMAAAA(dataInicio)}
 							</div>
 						{/if}
 						{#if dataFim}
 							<div class="badge badge-info badge-lg gap-2 px-4 py-3">
 								<Clock class="h-4 w-4" />
-								Até: {formatarData(dataFim)}
+								Até: {formatarDataDDMMAAAA(dataFim)}
 							</div>
 						{/if}
 					</div>
@@ -1916,7 +2098,7 @@
 					<div class="flex-1">
 						<h3 class="font-bold text-base-content">Nenhum registro encontrado</h3>
 						<div class="text-sm mt-2 opacity-80">
-							<p>Período: <span class="font-semibold">{formatarData(dataInicio)} até {formatarData(dataFim)}</span></p>
+							<p>Período: <span class="font-semibold">{formatarDataDDMMAAAA(dataInicio)} até {formatarDataDDMMAAAA(dataFim)}</span></p>
 							{#if funcionarioIdFiltro && funcionarioSelecionadoNome}
 								<p class="mt-1">Funcionário: <span class="font-semibold">{funcionarioSelecionadoNome}</span></p>
 							{/if}
@@ -2011,6 +2193,7 @@
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Tipo</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Horário</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Saldo Diário</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Localização</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Status</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Ações</th>
 											</tr>
@@ -2018,8 +2201,7 @@
 										<tbody>
 											{#each Object.values(grupo.registrosPorData) as grupoData}
 												{@const totalRegistros = grupoData.registros.length}
-												{@const dataParts = grupoData.data.split('-')}
-												{@const dataFormatada = `${dataParts[2]}/${dataParts[1]}/${dataParts[0]}`}
+												{@const dataFormatada = formatarDataDDMMAAAA(grupoData.data)}
 												{#each grupoData.registros as registro, index}
 													<tr>
 														<td class="whitespace-nowrap">{dataFormatada}</td>
@@ -2036,17 +2218,12 @@
 														<td class="whitespace-nowrap">{formatarHoraPonto(registro.hora, registro.minuto)}</td>
 														{#if index === 0}
 															<td class="whitespace-nowrap" rowspan={totalRegistros}>
-																{#if grupoData.saldoDiario}
-																	<span
-																		class="badge badge-lg font-semibold {grupoData.saldoDiario.positivo ? 'badge-success shadow-sm' : 'badge-error shadow-sm'}"
-																	>
-																		{formatarSaldoDiario(grupoData.saldoDiario)}
-																	</span>
-																{:else}
-																	<span class="badge badge-ghost badge-lg">-</span>
-																{/if}
+																<SaldoDiarioBadge saldo={grupoData.saldoDiario} size="md" />
 															</td>
 														{/if}
+														<td class="whitespace-nowrap">
+															<LocalizacaoIcon dentroRaioPermitido={registro.dentroRaioPermitido} />
+														</td>
 														<td class="whitespace-nowrap">
 															<span
 																class="badge badge-lg font-semibold {registro.dentroDoPrazo ? 'badge-success shadow-sm' : 'badge-error shadow-sm'}"

From f818756efc073a4e18ab9b006a2239bcce93fbf5 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 20:49:52 -0300
Subject: [PATCH 2/9] feat: enhance call and point registration features with
 sensor data integration

- Updated the CallWindow component to include connection quality states and reconnection attempts, improving user experience during calls.
- Enhanced the ChatWindow to allow starting audio and video calls in a new window, providing users with more flexibility.
- Integrated accelerometer and gyroscope data collection in the RegistroPonto component, enabling validation of point registration authenticity.
- Improved error handling and user feedback for sensor permissions and data validation, ensuring a smoother registration process.
- Updated backend logic to validate sensor data and adjust confidence scores for point registration, enhancing security against spoofing.
---
 .../src/lib/components/call/CallWindow.svelte | 538 ++++++++++++++----
 .../src/lib/components/chat/ChatWindow.svelte | 161 +++++-
 .../lib/components/ponto/RegistroPonto.svelte | 114 +++-
 .../ti/SystemMonitorCardLocal.svelte          | 216 ++++++-
 apps/web/src/lib/stores/callStore.ts          |   5 +-
 apps/web/src/lib/types/jitsi.d.ts             | 331 +++++++++++
 apps/web/src/lib/utils/callWindowManager.ts   | 200 +++++++
 apps/web/src/lib/utils/deviceInfo.ts          | 170 +++++-
 .../registro-pontos/+page.svelte              | 203 ++++++-
 .../(dashboard)/ti/cibersecurity/+page.svelte |  12 +-
 apps/web/src/routes/call/+page.svelte         |  90 +++
 .../backend/convex/actions/jitsiServer.ts     |  10 +-
 .../backend/convex/configuracaoRelogio.ts     | 152 +++--
 packages/backend/convex/pontos.ts             | 160 +++++-
 packages/backend/convex/schema.ts             |  13 +
 15 files changed, 2100 insertions(+), 275 deletions(-)
 create mode 100644 apps/web/src/lib/types/jitsi.d.ts
 create mode 100644 apps/web/src/lib/utils/callWindowManager.ts
 create mode 100644 apps/web/src/routes/call/+page.svelte

diff --git a/apps/web/src/lib/components/call/CallWindow.svelte b/apps/web/src/lib/components/call/CallWindow.svelte
index 8ebe538..d13b9da 100644
--- a/apps/web/src/lib/components/call/CallWindow.svelte
+++ b/apps/web/src/lib/components/call/CallWindow.svelte
@@ -5,69 +5,14 @@
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { X, GripVertical, GripHorizontal } from 'lucide-svelte';
-	
-	// Tipos para Jitsi (evitando 'any')
-	interface JitsiConnection {
-		connect(): void;
-		disconnect(): void;
-		addEventListener(event: string, handler: (data?: unknown) => void): void;
-		initJitsiConference(roomName: string, options: Record<string, unknown>): JitsiConference;
-	}
-
-	interface JitsiConference {
-		join(): void;
-		leave(): void;
-		on(event: string, handler: (...args: unknown[]) => void): void;
-		removeEventListener(event: string, handler: (...args: unknown[]) => void): void;
-		muteAudio(): void;
-		unmuteAudio(): void;
-		muteVideo(): void;
-		unmuteVideo(): void;
-		getParticipants(): Map<string, unknown>;
-		getLocalTracks(): JitsiTrack[];
-		setDisplayName(name: string): void;
-		addTrack(track: JitsiTrack): Promise<void>;
-	}
-
-	interface JitsiTrack {
-		getType(): 'audio' | 'video';
-		isMuted(): boolean;
-		mute(): Promise<void>;
-		unmute(): Promise<void>;
-		attach(element: HTMLElement): void;
-		detach(element: HTMLElement): void;
-		dispose(): Promise<void>;
-		getParticipantId(): string;
-		track: MediaStreamTrack;
-	}
-
-	interface JitsiMeetJSLib {
-		JitsiConnection: new (appId: string | null, token: string | null, options: Record<string, unknown>) => JitsiConnection;
-		constants: {
-			events: {
-				connection: {
-					CONNECTION_ESTABLISHED: string;
-					CONNECTION_FAILED: string;
-					CONNECTION_DISCONNECTED: string;
-				};
-				conference: {
-					USER_JOINED: string;
-					USER_LEFT: string;
-					TRACK_ADDED: string;
-					TRACK_REMOVED: string;
-					TRACK_MUTE_CHANGED: string;
-					CONFERENCE_JOINED: string;
-					CONFERENCE_LEFT: string;
-				};
-			};
-			logLevels: {
-				ERROR: number;
-			};
-		};
-		init(options: Record<string, unknown>): void;
-		setLogLevel(level: number): void;
-		createLocalTracks(options: Record<string, unknown>): Promise<JitsiTrack[]>;
-	}
+	import type {
+		JitsiConnection,
+		JitsiConference,
+		JitsiTrack,
+		JitsiMeetJSLib,
+		JitsiConnectionOptions,
+		WindowWithBlobBuilder
+	} from '$lib/types/jitsi';
 	
 	// Importação dinâmica do Jitsi apenas no cliente
 	let JitsiMeetJS: JitsiMeetJSLib | null = $state(null);
@@ -149,6 +94,12 @@
 	let errorMessage = $state('');
 	let errorDetails = $state<string | undefined>(undefined);
 
+	// Estados de conexão e qualidade
+	let qualidadeConexao = $state<'excelente' | 'boa' | 'regular' | 'ruim' | 'desconhecida'>('desconhecida');
+	let tentativasReconexao = $state(0);
+	const MAX_TENTATIVAS_RECONEXAO = 3;
+	let reconectando = $state(false);
+
 	// Queries
 	const chamadaQuery = useQuery(api.chamadas.obterChamada, { chamadaId });
 	const chamada = $derived(chamadaQuery?.data);
@@ -161,12 +112,29 @@
 	// Configuração Jitsi (busca do backend primeiro, depois fallback para env vars)
 	const configJitsi = $derived.by(() => obterConfiguracaoJitsi(configJitsiBackend?.data || null));
 
-	// Handler de erro
-	function handleError(message: string, details?: string): void {
+	// Handler de erro melhorado
+	function handleError(message: string, details?: string, podeReconectar: boolean = false): void {
 		const erroTraduzido = traduzirErro(new Error(message));
 		errorTitle = erroTraduzido.titulo;
 		errorMessage = erroTraduzido.mensagem;
-		errorDetails = details || erroTraduzido.instrucoes;
+		
+		// Adicionar sugestões de solução baseadas no tipo de erro
+		let sugestoes = '';
+		if (message.includes('conectar') || message.includes('servidor')) {
+			sugestoes = '\n\nSugestões:\n• Verifique sua conexão com a internet\n• Verifique se o servidor Jitsi está acessível\n• Tente recarregar a página';
+		} else if (message.includes('permissão') || message.includes('microfone') || message.includes('câmera')) {
+			sugestoes = '\n\nSugestões:\n• Verifique as permissões do navegador para microfone e câmera\n• Certifique-se de que nenhum outro aplicativo está usando os dispositivos\n• Tente recarregar a página e permitir novamente';
+		} else if (message.includes('certificado') || message.includes('SSL')) {
+			sugestoes = '\n\nSugestões:\n• Se estiver em desenvolvimento local, aceite o certificado autoassinado\n• Verifique as configurações de segurança do navegador';
+		}
+
+		errorDetails = (details || erroTraduzido.instrucoes) + sugestoes;
+		
+		// Se pode reconectar e ainda há tentativas
+		if (podeReconectar && tentativasReconexao < MAX_TENTATIVAS_RECONEXAO) {
+			errorDetails += `\n\nTentando reconectar automaticamente... (${tentativasReconexao + 1}/${MAX_TENTATIVAS_RECONEXAO})`;
+		}
+		
 		showErrorModal = true;
 		console.error(message, details);
 	}
@@ -180,13 +148,37 @@
 			
 			// Polyfill BlobBuilder já deve estar disponível via app.html
 			// Verificar se está disponível antes de carregar a biblioteca
-			if (typeof (window as any).BlobBuilder === 'undefined') {
+			const windowWithBlobBuilder = window as WindowWithBlobBuilder;
+			if (
+				typeof windowWithBlobBuilder.BlobBuilder === 'undefined' &&
+				typeof windowWithBlobBuilder.webkitBlobBuilder === 'undefined' &&
+				typeof windowWithBlobBuilder.MozBlobBuilder === 'undefined'
+			) {
 				console.warn('⚠️ Polyfill BlobBuilder não encontrado, pode causar erros');
 			}
 			
 			// Tentar carregar o módulo lib-jitsi-meet dinamicamente
 			// Usar import dinâmico para evitar problemas de SSR e permitir carregamento apenas no browser
-			const module = await import('lib-jitsi-meet');
+			let module;
+			try {
+				module = await import('lib-jitsi-meet');
+			} catch (importError) {
+				const importErrorMessage = importError instanceof Error ? importError.message : String(importError);
+				console.error('❌ Erro ao importar lib-jitsi-meet:', importError);
+				
+				// Verificar se é um erro de módulo não encontrado
+				if (importErrorMessage.includes('Failed to fetch') || 
+				    importErrorMessage.includes('Cannot find module') ||
+				    importErrorMessage.includes('Failed to resolve') ||
+				    importErrorMessage.includes('Dynamic import')) {
+					throw new Error(
+						'A biblioteca Jitsi não pôde ser carregada. ' +
+						'Verifique se o pacote "lib-jitsi-meet" está instalado corretamente. ' +
+						'Se o problema persistir, tente limpar o cache do navegador e recarregar a página.'
+					);
+				}
+				throw importError;
+			}
 			
 			console.log('📦 Módulo carregado, verificando exportações...', {
 				hasDefault: !!module.default,
@@ -267,7 +259,11 @@
 			});
 			
 			// Verificar se é um erro de módulo não encontrado
-			if (errorMessage.includes('Failed to fetch') || errorMessage.includes('Cannot find module')) {
+			if (errorMessage.includes('Failed to fetch') || 
+			    errorMessage.includes('Cannot find module') ||
+			    errorMessage.includes('Failed to resolve') ||
+			    errorMessage.includes('Dynamic import') ||
+			    errorMessage.includes('biblioteca Jitsi não pôde ser carregada')) {
 				handleError(
 					'Biblioteca de vídeo não encontrada',
 					'A biblioteca Jitsi não pôde ser encontrada. Verifique se o pacote "lib-jitsi-meet" está instalado. Se o problema persistir, tente limpar o cache do navegador e recarregar a página.'
@@ -320,26 +316,54 @@
 			const { host, porta } = obterHostEPorta(config.domain);
 			const protocol = config.useHttps ? 'https' : 'http';
 			
-			// Para Docker Jitsi local, a configuração deve ser:
-			// - domain: apenas o host (sem porta)
-			// - serviceUrl: URL completa com porta para BOSH
-			// - muc: geralmente conference.host ou apenas host
-			const options: Record<string, unknown> = {
+			// Configuração conforme documentação oficial do Jitsi Meet
+			// https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ljm-api/
+			const baseUrl = `${protocol}://${host}${porta && porta !== (config.useHttps ? 443 : 80) ? `:${porta}` : ''}`;
+			const boshUrl = `${baseUrl}/http-bind`;
+			
+			// Determinar MUC baseado no host
+			// Para localhost, usar conference.localhost
+			// Para domínios reais, usar conference.{host}
+			const mucDomain = host === 'localhost' || host.startsWith('127.0.0.1') 
+				? `conference.${host}` 
+				: `conference.${host}`;
+			
+			const options: JitsiConnectionOptions = {
 				hosts: {
-					domain: host, // Apenas o host para o domain
-					muc: `conference.${host}` // MUC no mesmo domínio
+					domain: host,
+					muc: mucDomain,
+					focus: `focus.${host}`
 				},
-				serviceUrl: `${protocol}://${host}:${porta}/http-bind`, // BOSH endpoint com porta
-				bosh: `${protocol}://${host}:${porta}/http-bind`, // BOSH alternativo
-				clientNode: config.appId
+				serviceUrl: boshUrl,
+				bosh: boshUrl,
+				clientNode: config.appId,
+				// Opções de performance recomendadas
+				enableLayerSuspension: true,
+				enableLipSync: false,
+				disableAudioLevels: false,
+				disableSimulcast: false,
+				enableRemb: true,
+				enableTcc: true,
+				useStunTurn: true,
+				// Configurações de codec
+				preferredVideoCodec: 'VP8',
+				disableVP8: false,
+				disableVP9: false,
+				disableH264: false,
+				// Configurações de áudio
+				stereo: false,
+				enableOpusRed: true,
+				enableDtmf: true
 			};
 
-			console.log('🔧 Configurando conexão Jitsi:', {
+			console.log('🔧 Configurando conexão Jitsi (conforme documentação oficial):', {
 				host,
 				porta,
 				protocol,
+				baseUrl,
 				serviceUrl: options.serviceUrl,
-				muc: options.hosts.muc
+				muc: options.hosts?.muc,
+				focus: options.hosts?.focus
 			});
 
 			const connection = new JitsiMeetJS.JitsiConnection(null, null, options);
@@ -350,15 +374,34 @@
 			connection.addEventListener(JitsiMeetJS.constants.events.connection.CONNECTION_ESTABLISHED, () => {
 				console.log('✅ Conexão estabelecida');
 				atualizarStatusConexao(true);
+				tentativasReconexao = 0; // Resetar contador de tentativas
+				reconectando = false;
+				qualidadeConexao = 'boa'; // Inicial como boa
 				
 				// Iniciar chamada no backend
 				client.mutation(api.chamadas.iniciarChamada, { chamadaId });
 
-				// Criar conferência
+				// Criar conferência com opções recomendadas pela documentação oficial
 				const estadoAtual = get(callState);
 				const conferenceOptions: Record<string, unknown> = {
 					startAudioMuted: !estadoAtual.audioHabilitado,
-					startVideoMuted: !estadoAtual.videoHabilitado
+					startVideoMuted: !estadoAtual.videoHabilitado,
+					// Opções de P2P (peer-to-peer) para melhor performance
+					p2p: {
+						enabled: true,
+						stunServers: [
+							{ urls: 'stun:stun.l.google.com:19302' },
+							{ urls: 'stun:stun1.l.google.com:19302' }
+						]
+					},
+					// Configurações de qualidade de vídeo
+					resolution: 720,
+					maxBitrate: 2500000, // 2.5 Mbps
+					// Configurações de áudio
+					audioQuality: {
+						stereo: false,
+						opusMaxAverageBitrate: 64000
+					}
 				};
 
 				const conference = connection.initJitsiConference(roomName, conferenceOptions);
@@ -377,15 +420,41 @@
 				atualizarStatusConexao(false);
 				
 				const errorMsg = error instanceof Error ? error.message : String(error);
-				handleError(
-					'Erro ao conectar com servidor de vídeo',
-					`Não foi possível conectar ao servidor Jitsi. Verifique se o servidor está rodando e acessível.\n\nErro: ${errorMsg}`
-				);
+				
+				// Tentar reconectar se ainda houver tentativas
+				if (tentativasReconexao < MAX_TENTATIVAS_RECONEXAO) {
+					tentativasReconexao++;
+					reconectando = true;
+					
+					setTimeout(() => {
+						console.log(`🔄 Tentativa de reconexão ${tentativasReconexao}/${MAX_TENTATIVAS_RECONEXAO}...`);
+						connection.connect();
+					}, 2000 * tentativasReconexao); // Backoff exponencial
+				} else {
+					reconectando = false;
+					handleError(
+						'Erro ao conectar com servidor de vídeo',
+						`Não foi possível conectar ao servidor Jitsi após ${MAX_TENTATIVAS_RECONEXAO} tentativas.\n\nErro: ${errorMsg}`,
+						false
+					);
+				}
 			});
 
 			connection.addEventListener(JitsiMeetJS.constants.events.connection.CONNECTION_DISCONNECTED, () => {
 				console.log('🔌 Conexão desconectada');
 				atualizarStatusConexao(false);
+				qualidadeConexao = 'desconhecida';
+				
+				// Tentar reconectar automaticamente se não foi intencional
+				if (tentativasReconexao < MAX_TENTATIVAS_RECONEXAO && !reconectando) {
+					tentativasReconexao++;
+					reconectando = true;
+					
+					setTimeout(() => {
+						console.log(`🔄 Tentando reconectar após desconexão (${tentativasReconexao}/${MAX_TENTATIVAS_RECONEXAO})...`);
+						connection.connect();
+					}, 3000);
+				}
 			});
 
 			// Conectar
@@ -411,7 +480,12 @@
 		conference.on(JitsiMeetJS.constants.events.conference.USER_JOINED, (id: unknown, user: unknown) => {
 			console.log('👤 Participante entrou:', id, user);
 			// Atualizar lista de participantes
-			atualizarListaParticipantes();
+			atualizarListaParticipantes().then(() => {
+				// Atualizar nomes nos overlays
+				if (typeof id === 'string') {
+					atualizarNomeParticipante(id);
+				}
+			});
 		});
 
 		// Participante saiu
@@ -420,22 +494,17 @@
 			atualizarListaParticipantes();
 		});
 
-		// Áudio mutado/desmutado
+		// Áudio/vídeo mutado/desmutado
 		conference.on(JitsiMeetJS.constants.events.conference.TRACK_MUTE_CHANGED, (track: unknown) => {
 			const jitsiTrack = track as JitsiTrack;
 			console.log('🎤 Mute mudou:', jitsiTrack);
-			if (jitsiTrack.getType() === 'audio') {
-				// Atualizar estado do participante
-				atualizarListaParticipantes();
-			}
-		});
-
-		// Vídeo mutado/desmutado
-		conference.on(JitsiMeetJS.constants.events.conference.TRACK_MUTE_CHANGED, (track: unknown) => {
-			const jitsiTrack = track as JitsiTrack;
-			if (jitsiTrack.getType() === 'video') {
-				atualizarListaParticipantes();
-			}
+			const participantId = jitsiTrack.getParticipantId();
+			
+			// Atualizar estado do participante
+			atualizarListaParticipantes().then(() => {
+				// Atualizar indicadores visuais
+				atualizarIndicadoresParticipante(participantId);
+			});
 		});
 
 		// Novo track remoto
@@ -458,9 +527,34 @@
 			}
 		);
 
+		// Monitorar qualidade de conexão (se disponível)
+		if ('getConnectionQuality' in conference && typeof conference.getConnectionQuality === 'function') {
+			setInterval(() => {
+				try {
+					// Tentar obter estatísticas de conexão
+					const stats = (conference as unknown as { getConnectionQuality(): string }).getConnectionQuality();
+					if (stats === 'high' || stats === 'veryhigh') {
+						qualidadeConexao = 'excelente';
+					} else if (stats === 'medium') {
+						qualidadeConexao = 'boa';
+					} else if (stats === 'low') {
+						qualidadeConexao = 'regular';
+					} else {
+						qualidadeConexao = 'ruim';
+					}
+				} catch {
+					// Se não disponível, manter como boa
+					if (qualidadeConexao === 'desconhecida') {
+						qualidadeConexao = 'boa';
+					}
+				}
+			}, 5000); // Verificar a cada 5 segundos
+		}
+
 		// Conferência iniciada - criar tracks locais
 		conference.on(JitsiMeetJS.constants.events.conference.CONFERENCE_JOINED, async () => {
 			console.log('🎉 Conferência iniciada! Criando tracks locais...');
+			qualidadeConexao = 'boa'; // Inicializar como boa ao entrar na conferência
 			
 			try {
 				const estadoAtual = get(callState);
@@ -522,7 +616,13 @@
 				}
 				
 				// Atualizar lista de participantes
-				atualizarListaParticipantes();
+				atualizarListaParticipantes().then(() => {
+					// Atualizar todos os nomes e indicadores
+					remoteVideoElements.forEach((_, participantId) => {
+						atualizarNomeParticipante(participantId);
+						atualizarIndicadoresParticipante(participantId);
+					});
+				});
 			} catch (error) {
 				console.error('Erro ao criar tracks locais:', error);
 				handleError(
@@ -543,11 +643,30 @@
 			});
 			localTracks = [];
 			
+			// Limpar elementos remotos
+			remoteVideoElements.forEach((data) => {
+				const videoElement = data.element.querySelector('video');
+				if (videoElement) {
+					data.track.detach(videoElement);
+				}
+				data.element.remove();
+			});
+			remoteVideoElements.clear();
+
+			remoteAudioElements.forEach((audioElement) => {
+				audioElement.remove();
+			});
+			remoteAudioElements.clear();
+			
 			setStreamLocal(null);
 			finalizarChamadaStore();
 		});
 	}
 
+	// Mapa para rastrear elementos de vídeo remotos
+	let remoteVideoElements = $state<Map<string, { element: HTMLElement; track: JitsiTrack }>>(new Map());
+	let remoteAudioElements = $state<Map<string, HTMLAudioElement>>(new Map());
+
 	// Adicionar track remoto ao container
 	function adicionarTrackRemoto(track: JitsiTrack): void {
 		if (!videoContainer) return;
@@ -557,6 +676,11 @@
 		
 		// Para áudio, criar elemento de áudio invisível
 		if (trackType === 'audio') {
+			// Verificar se já existe
+			if (remoteAudioElements.has(participantId)) {
+				return;
+			}
+
 			const audioElement = document.createElement('audio');
 			audioElement.id = `remote-audio-${participantId}`;
 			audioElement.autoplay = true;
@@ -565,19 +689,115 @@
 			
 			track.attach(audioElement);
 			videoContainer.appendChild(audioElement);
+			remoteAudioElements.set(participantId, audioElement);
 			return;
 		}
 		
-		// Para vídeo, criar elemento de vídeo
+		// Para vídeo, criar elemento de vídeo com container melhorado
 		if (trackType === 'video') {
+			// Verificar se já existe
+			if (remoteVideoElements.has(participantId)) {
+				return;
+			}
+
+			// Criar container para o vídeo com indicadores
+			const container = document.createElement('div');
+			container.id = `remote-video-container-${participantId}`;
+			container.className = 'relative aspect-video w-full rounded-lg bg-base-200 overflow-hidden shadow-lg transition-all duration-300';
+
+			// Criar elemento de vídeo
 			const videoElement = document.createElement('video');
 			videoElement.id = `remote-video-${participantId}`;
 			videoElement.autoplay = true;
 			videoElement.playsInline = true;
-			videoElement.className = 'h-full w-full object-cover rounded-lg';
+			videoElement.className = 'h-full w-full object-cover';
+
+			// Criar overlay com nome do participante
+			const overlay = document.createElement('div');
+			overlay.className = 'absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2';
+			
+			const nomeParticipante = document.createElement('div');
+			nomeParticipante.className = 'text-white text-sm font-medium';
+			nomeParticipante.textContent = 'Participante';
+			
+			// Criar indicadores de áudio/vídeo
+			const indicators = document.createElement('div');
+			indicators.className = 'absolute top-2 right-2 flex gap-1';
+			
+			// Indicador de áudio
+			const audioIndicator = document.createElement('div');
+			audioIndicator.id = `audio-indicator-${participantId}`;
+			audioIndicator.className = 'bg-base-300 opacity-80 rounded-full p-1';
+			audioIndicator.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.617.793L4.383 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.383l4-3.617a1 1 0 011.617.793zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z"/></svg>';
+			
+			// Indicador de vídeo
+			const videoIndicator = document.createElement('div');
+			videoIndicator.id = `video-indicator-${participantId}`;
+			videoIndicator.className = 'bg-base-300 opacity-80 rounded-full p-1';
+			videoIndicator.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/></svg>';
+
+			indicators.appendChild(audioIndicator);
+			indicators.appendChild(videoIndicator);
+			overlay.appendChild(nomeParticipante);
+			
+			container.appendChild(videoElement);
+			container.appendChild(overlay);
+			container.appendChild(indicators);
 
 			track.attach(videoElement);
-			videoContainer.appendChild(videoElement);
+			videoContainer.appendChild(container);
+			remoteVideoElements.set(participantId, { element: container, track });
+
+			// Atualizar nome do participante se disponível
+			atualizarNomeParticipante(participantId);
+		}
+	}
+
+	// Atualizar nome do participante no overlay
+	function atualizarNomeParticipante(participantId: string): void {
+		const container = remoteVideoElements.get(participantId);
+		if (!container) return;
+
+		const overlay = container.element.querySelector('.absolute.bottom-0');
+		if (!overlay) return;
+
+		const nomeElement = overlay.querySelector('.text-white');
+		if (!nomeElement) return;
+
+		// Buscar nome do participante no estado
+		const participante = estadoChamada.participantes.find(
+			p => p.participantId === participantId
+		);
+		
+		if (participante) {
+			nomeElement.textContent = participante.nome;
+		}
+	}
+
+	// Atualizar indicadores de áudio/vídeo
+	function atualizarIndicadoresParticipante(participantId: string): void {
+		const container = remoteVideoElements.get(participantId);
+		if (!container) return;
+
+		const participante = estadoChamada.participantes.find(
+			p => p.participantId === participantId
+		);
+
+		if (!participante) return;
+
+		const audioIndicator = container.element.querySelector(`#audio-indicator-${participantId}`);
+		const videoIndicator = container.element.querySelector(`#video-indicator-${participantId}`);
+
+		if (audioIndicator) {
+			audioIndicator.className = participante.audioHabilitado
+				? 'bg-success opacity-80 rounded-full p-1'
+				: 'bg-error opacity-80 rounded-full p-1';
+		}
+
+		if (videoIndicator) {
+			videoIndicator.className = participante.videoHabilitado
+				? 'bg-success opacity-80 rounded-full p-1'
+				: 'bg-error opacity-80 rounded-full p-1';
 		}
 	}
 
@@ -587,14 +807,24 @@
 		
 		const participantId = track.getParticipantId();
 		const trackType = track.getType();
-		const elementId = trackType === 'audio' 
-			? `remote-audio-${participantId}`
-			: `remote-video-${participantId}`;
 		
-		const element = document.getElementById(elementId);
-		if (element) {
-			track.detach(element);
-			element.remove();
+		if (trackType === 'audio') {
+			const audioElement = remoteAudioElements.get(participantId);
+			if (audioElement) {
+				track.detach(audioElement);
+				audioElement.remove();
+				remoteAudioElements.delete(participantId);
+			}
+		} else if (trackType === 'video') {
+			const videoData = remoteVideoElements.get(participantId);
+			if (videoData) {
+				const videoElement = videoData.element.querySelector('video');
+				if (videoElement) {
+					track.detach(videoElement);
+				}
+				videoData.element.remove();
+				remoteVideoElements.delete(participantId);
+			}
 		}
 	}
 
@@ -605,13 +835,13 @@
 		const participants = jitsiConference.getParticipants();
 		// Mapear participantes para o formato esperado
 		// Isso pode ser expandido para buscar informações do backend
-		const participantesAtualizados = Array.from(participants.values()).map((p: unknown) => {
-			const participant = p as { getId(): string; getDisplayName(): string; isAudioMuted(): boolean; isVideoMuted(): boolean };
+		const participantesAtualizados = Array.from(participants.values()).map((participant) => {
 			return {
 				usuarioId: participant.getId() as Id<'usuarios'>,
 				nome: participant.getDisplayName() || 'Participante',
 				audioHabilitado: !participant.isAudioMuted(),
-				videoHabilitado: !participant.isVideoMuted()
+				videoHabilitado: !participant.isVideoMuted(),
+				participantId: participant.getId()
 			};
 		});
 
@@ -937,7 +1167,12 @@
 		
 		// Polyfill BlobBuilder já deve estar disponível via app.html
 		// Verificar se está disponível
-		if (typeof (window as any).BlobBuilder === 'undefined') {
+		const windowWithBlobBuilder = window as WindowWithBlobBuilder;
+		if (
+			typeof windowWithBlobBuilder.BlobBuilder === 'undefined' &&
+			typeof windowWithBlobBuilder.webkitBlobBuilder === 'undefined' &&
+			typeof windowWithBlobBuilder.MozBlobBuilder === 'undefined'
+		) {
 			console.warn('⚠️ Polyfill BlobBuilder não encontrado no onMount');
 		}
 		
@@ -1004,12 +1239,24 @@
 	{/if}
 
 	<!-- Container de vídeo -->
-	<div
-		bind:this={videoContainer}
-		class="bg-base-300 flex flex-1 flex-wrap gap-2 p-4"
-	>
+	{#if true}
+		{@const numVideosRemotos = remoteVideoElements.size}
+		{@const temVideoLocal = tipo === 'video' && estadoChamada.videoHabilitado && localVideo}
+		{@const totalVideos = (temVideoLocal ? 1 : 0) + numVideosRemotos}
+		{@const usarGrid = estadoChamada.estaConectado && totalVideos > 0}
+		{@const numColunas = totalVideos === 1 ? 1 : totalVideos <= 4 ? 2 : 3}
+		<div
+			bind:this={videoContainer}
+			class="bg-base-300 flex-1 gap-4 p-4 overflow-auto"
+			class:grid={usarGrid}
+			class:flex={!usarGrid}
+			class:flex-wrap={!usarGrid}
+			class:grid-cols-1={usarGrid && numColunas === 1}
+			class:grid-cols-2={usarGrid && numColunas === 2}
+			class:grid-cols-3={usarGrid && numColunas === 3}
+		>
 		{#if !estadoChamada.estaConectado}
-			<div class="flex h-full w-full items-center justify-center">
+			<div class="flex h-full w-full items-center justify-center col-span-full">
 				<div class="text-center">
 					<span class="loading loading-spinner loading-lg text-primary"></span>
 					<p class="mt-4 text-lg font-medium">Conectando à chamada...</p>
@@ -1021,19 +1268,62 @@
 		{:else}
 			<!-- Vídeo Local -->
 			{#if tipo === 'video' && estadoChamada.videoHabilitado && localVideo}
-				<div class="aspect-video w-full rounded-lg bg-base-200 overflow-hidden">
+				<div class="relative aspect-video w-full rounded-lg bg-base-200 overflow-hidden shadow-lg transition-all duration-300">
 					<video
 						bind:this={localVideo}
 						autoplay
 						muted
 						playsinline
-						class="h-full w-full object-cover rounded-lg"
+						class="h-full w-full object-cover"
 					></video>
+					<!-- Overlay com nome local -->
+					<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2">
+						<div class="text-white text-sm font-medium">
+							{meuPerfil?.data?.nome || 'Você'}
+						</div>
+					</div>
+					<!-- Indicadores locais -->
+					<div class="absolute top-2 right-2 flex gap-1">
+						<div
+							class="rounded-full p-1 opacity-80"
+							class:bg-success={estadoChamada.audioHabilitado}
+							class:bg-error={!estadoChamada.audioHabilitado}
+						>
+							<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+								<path d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.617.793L4.383 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.383l4-3.617a1 1 0 011.617.793zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z"/>
+							</svg>
+						</div>
+						<div
+							class="rounded-full p-1 opacity-80"
+							class:bg-success={estadoChamada.videoHabilitado}
+							class:bg-error={!estadoChamada.videoHabilitado}
+						>
+							<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+								<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
+							</svg>
+						</div>
+					</div>
+				</div>
+			{:else if tipo === 'audio'}
+				<!-- Placeholder para chamada de áudio -->
+				<div class="flex h-full w-full items-center justify-center col-span-full">
+					<div class="text-center">
+						<div class="bg-primary/20 rounded-full p-8 mx-auto w-32 h-32 flex items-center justify-center mb-4">
+							<svg class="w-16 h-16 text-primary" fill="currentColor" viewBox="0 0 20 20">
+								<path d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.617.793L4.383 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.383l4-3.617a1 1 0 011.617.793zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z"/>
+							</svg>
+						</div>
+						<p class="text-lg font-medium">Chamada de Áudio</p>
+						<p class="text-sm text-base-content/70 mt-2">
+							{estadoChamada.participantes.length} participante{estadoChamada.participantes.length !== 1 ? 's' : ''}
+						</p>
+					</div>
 				</div>
 			{/if}
 			<!-- Vídeos remotos serão adicionados dinamicamente pelo JavaScript -->
 		{/if}
-	</div>
+		</div>
+	{/if}
 
 	<!-- Controles do anfitrião -->
 	{#if ehAnfitriao && estadoChamada.participantes.length > 0}
diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte
index 17a37d2..20f1053 100644
--- a/apps/web/src/lib/components/chat/ChatWindow.svelte
+++ b/apps/web/src/lib/components/chat/ChatWindow.svelte
@@ -145,7 +145,7 @@
 	}
 
 	// Funções para chamadas
-	async function iniciarChamada(tipo: 'audio' | 'video'): Promise<void> {
+	async function iniciarChamada(tipo: 'audio' | 'video', abrirEmNovaJanela: boolean = false): Promise<void> {
 		if (chamadaAtual) {
 			errorTitle = 'Chamada já em andamento';
 			errorMessage =
@@ -165,6 +165,45 @@
 				videoHabilitado: tipo === 'video'
 			});
 
+			// Se deve abrir em nova janela
+			if (abrirEmNovaJanela && browser) {
+				const { abrirCallWindowEmPopup, verificarSuportePopup } = await import('$lib/utils/callWindowManager');
+				
+				if (!verificarSuportePopup()) {
+					errorTitle = 'Popups bloqueados';
+					errorMessage = 'Seu navegador está bloqueando popups. Por favor, permita popups para este site e tente novamente.';
+					errorInstructions = 'Verifique as configurações do seu navegador para permitir popups.';
+					showErrorModal = true;
+					return;
+				}
+
+				// Buscar informações da chamada para obter roomName
+				const chamadaInfo = await client.query(api.chamadas.obterChamada, { chamadaId });
+				
+				if (!chamadaInfo) {
+					throw new Error('Chamada não encontrada');
+				}
+
+				const meuPerfil = await client.query(api.auth.getCurrentUser, {});
+				const ehAnfitriao = chamadaInfo.criadoPor === meuPerfil?._id;
+
+				// Abrir em popup
+				const popup = abrirCallWindowEmPopup({
+					chamadaId: chamadaId as string,
+					conversaId: conversaId as string,
+					tipo,
+					roomName: chamadaInfo.roomName,
+					ehAnfitriao
+				});
+
+				if (!popup) {
+					throw new Error('Não foi possível abrir a janela de chamada');
+				}
+
+				// Não definir chamadaAtiva aqui, pois será gerenciada pela janela popup
+				return;
+			}
+
 			chamadaAtiva = chamadaId;
 		} catch (error) {
 			console.error('Erro ao iniciar chamada:', error);
@@ -316,33 +355,99 @@
 		<!-- Botões de ação -->
 		<div class="flex items-center gap-1">
 			<!-- Botões de Chamada -->
-			{#if !chamadaAtual}
-				<button
-					type="button"
-					class="btn btn-sm btn-circle btn-primary"
-					onclick={(e) => {
-						e.stopPropagation();
-						iniciarChamada('audio');
-					}}
-					disabled={iniciandoChamada}
-					aria-label="Ligação de áudio"
-					title="Iniciar ligação de áudio"
-				>
-					<Phone class="h-5 w-5" strokeWidth={2} />
-				</button>
-				<button
-					type="button"
-					class="btn btn-sm btn-circle btn-primary"
-					onclick={(e) => {
-						e.stopPropagation();
-						iniciarChamada('video');
-					}}
-					disabled={iniciandoChamada}
-					aria-label="Ligação de vídeo"
-					title="Iniciar ligação de vídeo"
-				>
-					<Video class="h-5 w-5" strokeWidth={2} />
-				</button>
+			{#if !chamadaAtual && !chamadaAtiva}
+				<div class="dropdown dropdown-end">
+					<button
+						type="button"
+						class="btn btn-sm btn-circle btn-primary"
+						onclick={(e) => {
+							e.stopPropagation();
+							iniciarChamada('audio', false);
+						}}
+						disabled={iniciandoChamada}
+						aria-label="Ligação de áudio"
+						title="Iniciar ligação de áudio"
+					>
+						<Phone class="h-5 w-5" strokeWidth={2} />
+					</button>
+					<ul
+						tabindex="0"
+						class="dropdown-content menu bg-base-100 rounded-box z-[100] w-52 p-2 shadow-lg border border-base-300"
+					>
+						<li>
+							<button
+								type="button"
+								onclick={(e) => {
+									e.stopPropagation();
+									iniciarChamada('audio', false);
+								}}
+								disabled={iniciandoChamada}
+							>
+								<Phone class="h-4 w-4" />
+								Áudio (nesta janela)
+							</button>
+						</li>
+						<li>
+							<button
+								type="button"
+								onclick={(e) => {
+									e.stopPropagation();
+									iniciarChamada('audio', true);
+								}}
+								disabled={iniciandoChamada}
+							>
+								<Phone class="h-4 w-4" />
+								Áudio (nova janela)
+							</button>
+						</li>
+					</ul>
+				</div>
+				<div class="dropdown dropdown-end">
+					<button
+						type="button"
+						class="btn btn-sm btn-circle btn-primary"
+						onclick={(e) => {
+							e.stopPropagation();
+							iniciarChamada('video', false);
+						}}
+						disabled={iniciandoChamada}
+						aria-label="Ligação de vídeo"
+						title="Iniciar ligação de vídeo"
+					>
+						<Video class="h-5 w-5" strokeWidth={2} />
+					</button>
+					<ul
+						tabindex="0"
+						class="dropdown-content menu bg-base-100 rounded-box z-[100] w-52 p-2 shadow-lg border border-base-300"
+					>
+						<li>
+							<button
+								type="button"
+								onclick={(e) => {
+									e.stopPropagation();
+									iniciarChamada('video', false);
+								}}
+								disabled={iniciandoChamada}
+							>
+								<Video class="h-4 w-4" />
+								Vídeo (nesta janela)
+							</button>
+						</li>
+						<li>
+							<button
+								type="button"
+								onclick={(e) => {
+									e.stopPropagation();
+									iniciarChamada('video', true);
+								}}
+								disabled={iniciandoChamada}
+							>
+								<Video class="h-4 w-4" />
+								Vídeo (nova janela)
+							</button>
+						</li>
+					</ul>
+				</div>
 			{/if}
 
 			<!-- Botão Sair (apenas para grupos e salas de reunião) -->
diff --git a/apps/web/src/lib/components/ponto/RegistroPonto.svelte b/apps/web/src/lib/components/ponto/RegistroPonto.svelte
index 8a16bc1..d06a0fc 100644
--- a/apps/web/src/lib/components/ponto/RegistroPonto.svelte
+++ b/apps/web/src/lib/components/ponto/RegistroPonto.svelte
@@ -108,9 +108,14 @@
 	}
 
 	// Verificar permissões de localização e webcam
-	async function verificarPermissoes(): Promise<{ localizacao: boolean; webcam: boolean }> {
+	async function verificarPermissoes(): Promise<{ 
+		localizacao: boolean; 
+		webcam: boolean;
+		permissoesNecessarias: string[];
+	}> {
 		let localizacaoAutorizada = false;
 		let webcamAutorizada = false;
+		const permissoesNecessarias: string[] = [];
 
 		// Verificar permissão de geolocalização
 		if (navigator.geolocation) {
@@ -126,8 +131,11 @@
 							localizacaoAutorizada = true;
 							resolve();
 						},
-						() => {
+						(error) => {
 							clearTimeout(timeoutId);
+							if (error.code === error.PERMISSION_DENIED) {
+								permissoesNecessarias.push('localização');
+							}
 							reject(new Error('Permissão de localização negada'));
 						},
 						{ timeout: 5000, maximumAge: 0, enableHighAccuracy: false }
@@ -147,10 +155,11 @@
 				stream.getTracks().forEach(track => track.stop());
 			} catch (error) {
 				console.warn('Permissão de webcam não concedida:', error);
+				permissoesNecessarias.push('câmera');
 			}
 		}
 
-		return { localizacao: localizacaoAutorizada, webcam: webcamAutorizada };
+		return { localizacao: localizacaoAutorizada, webcam: webcamAutorizada, permissoesNecessarias };
 	}
 
 	async function registrarPonto() {
@@ -176,7 +185,8 @@
 		const permissoes = await verificarPermissoes();
 		if (!permissoes.localizacao || !permissoes.webcam) {
 			mensagemErroModal = 'Permissões necessárias';
-			detalhesErroModal = 'Para registrar o ponto, é necessário autorizar o compartilhamento de localização e a captura de foto.';
+			const permissoesLista = permissoes.permissoesNecessarias.join(', ');
+			detalhesErroModal = `Para registrar o ponto, é necessário autorizar o compartilhamento de localização e a captura de foto.\n\nPermissões negadas: ${permissoesLista || 'localização e/ou câmera'}`;
 			mostrarModalErro = true;
 			return;
 		}
@@ -188,6 +198,8 @@
 		try {
 			// Coletar informações do dispositivo
 			const informacoesDispositivo = await obterInformacoesDispositivo();
+			// Nota: A permissão de sensor não é impeditiva - apenas câmera e localização são obrigatórias
+			
 			coletandoInfo = false;
 
 			// Obter tempo sincronizado e aplicar GMT offset (igual ao relógio)
@@ -278,30 +290,80 @@
 			}, 1000);
 		} catch (error) {
 			console.error('Erro ao registrar ponto:', error);
-			const mensagemErro = error instanceof Error ? error.message : 'Erro ao registrar ponto';
+			let mensagemErro = 'Erro desconhecido ao registrar ponto';
+			let detalhesErro = 'Tente novamente em alguns instantes.';
 			
-			// Verificar se é erro de registro duplicado
-			if (
-				mensagemErro.includes('Já existe um registro neste minuto') ||
-				mensagemErro.includes('já existe um registro')
-			) {
-				mensagemErroModal = 'Registro de ponto duplicado';
-				const tipoLabelErro = config
-					? getTipoRegistroLabel(proximoTipo, {
-							nomeEntrada: config.nomeEntrada,
-							nomeSaidaAlmoco: config.nomeSaidaAlmoco,
-							nomeRetornoAlmoco: config.nomeRetornoAlmoco,
-							nomeSaida: config.nomeSaida,
-						})
-					: getTipoRegistroLabel(proximoTipo);
-				detalhesErroModal = `Não é possível registrar o ponto no mesmo minuto.\n\nVocê já possui um registro de ${tipoLabelErro} para este minuto.\n\nPor favor, aguarde pelo menos 1 minuto antes de tentar registrar novamente.`;
-				mostrarModalErro = true;
-			} else {
-				// Outros erros também mostram no modal
-				mensagemErroModal = 'Erro ao registrar ponto';
-				detalhesErroModal = mensagemErro;
-				mostrarModalErro = true;
+			if (error instanceof Error) {
+				const erroMessage = error.message || '';
+				
+				// Erro de registro duplicado
+				if (
+					erroMessage.includes('Já existe um registro neste minuto') ||
+					erroMessage.includes('já existe um registro')
+				) {
+					mensagemErro = 'Registro de ponto duplicado';
+					const tipoLabelErro = config
+						? getTipoRegistroLabel(proximoTipo, {
+								nomeEntrada: config.nomeEntrada,
+								nomeSaidaAlmoco: config.nomeSaidaAlmoco,
+								nomeRetornoAlmoco: config.nomeRetornoAlmoco,
+								nomeSaida: config.nomeSaida,
+							})
+						: getTipoRegistroLabel(proximoTipo);
+					detalhesErro = `Não é possível registrar o ponto no mesmo minuto.\n\nVocê já possui um registro de ${tipoLabelErro} para este minuto.\n\nPor favor, aguarde pelo menos 1 minuto antes de tentar registrar novamente.`;
+				}
+				// Erro de validação de argumentos
+				else if (
+					erroMessage.includes('ArgumentValidationError') ||
+					erroMessage.includes('Object contains extra field') ||
+					erroMessage.includes('validation')
+				) {
+					mensagemErro = 'Erro na validação dos dados';
+					detalhesErro = 'Ocorreu um erro ao validar as informações do dispositivo.\n\nPor favor, tente novamente ou recarregue a página.';
+				}
+				// Erro de autenticação
+				else if (
+					erroMessage.includes('não autenticado') ||
+					erroMessage.includes('autenticado') ||
+					erroMessage.includes('auth')
+				) {
+					mensagemErro = 'Erro de autenticação';
+					detalhesErro = 'Sua sessão pode ter expirado. Por favor, faça login novamente.';
+				}
+				// Erro de permissão/validação de localização
+				else if (
+					erroMessage.includes('localização') ||
+					erroMessage.includes('Localização') ||
+					erroMessage.includes('location')
+				) {
+					mensagemErro = 'Erro na validação de localização';
+					detalhesErro = 'Não foi possível validar sua localização.\n\nPor favor, verifique se você autorizou o compartilhamento de localização e tente novamente.';
+				}
+				// Erro genérico do servidor
+				else if (erroMessage.includes('Server Error') || erroMessage.includes('Server')) {
+					mensagemErro = 'Erro no servidor';
+					detalhesErro = 'Ocorreu um erro no servidor ao processar seu registro.\n\nPor favor, tente novamente em alguns instantes.';
+				}
+				// Outros erros - mostrar mensagem simplificada
+				else {
+					mensagemErro = 'Erro ao registrar ponto';
+					// Se a mensagem de erro for muito técnica, mostrar mensagem genérica
+					if (
+						erroMessage.includes('Error:') ||
+						erroMessage.includes('TypeError') ||
+						erroMessage.includes('ReferenceError') ||
+						erroMessage.length > 200
+					) {
+						detalhesErro = 'Ocorreu um erro ao processar o registro.\n\nPor favor, tente novamente ou recarregue a página.';
+					} else {
+						detalhesErro = erroMessage;
+					}
+				}
 			}
+			
+			mensagemErroModal = mensagemErro;
+			detalhesErroModal = detalhesErro;
+			mostrarModalErro = true;
 		} finally {
 			registrando = false;
 			coletandoInfo = false;
diff --git a/apps/web/src/lib/components/ti/SystemMonitorCardLocal.svelte b/apps/web/src/lib/components/ti/SystemMonitorCardLocal.svelte
index 766e9ae..bf35e9f 100644
--- a/apps/web/src/lib/components/ti/SystemMonitorCardLocal.svelte
+++ b/apps/web/src/lib/components/ti/SystemMonitorCardLocal.svelte
@@ -9,6 +9,7 @@
 	import AreaChart from './charts/AreaChart.svelte';
 	import DoughnutChart from './charts/DoughnutChart.svelte';
 	import BarChart from './charts/BarChart.svelte';
+	import { obterInformacoesDispositivo } from '$lib/utils/deviceInfo';
 
 	const client = useConvexClient();
 
@@ -45,6 +46,18 @@
 		serviceWorkerStatus: string;
 		domNodes: number;
 		jsHeapSize: number;
+		// GPS
+		latitude?: number;
+		longitude?: number;
+		gpsPrecision?: number;
+		gpsConfidence?: number;
+		// Acelerômetro
+		accelerometerX?: number;
+		accelerometerY?: number;
+		accelerometerZ?: number;
+		movementDetected?: boolean;
+		movementMagnitude?: number;
+		sensorAvailable?: boolean;
 	};
 
 	type NetworkInformationEx = {
@@ -548,7 +561,8 @@
 			usuariosOnline,
 			tempoRespostaMedio,
 			batteryInfo,
-			indexedDBSize
+			indexedDBSize,
+			deviceInfo
 		] = await Promise.all([
 			estimateCPU(),
 			Promise.resolve(getMemoryUsage()),
@@ -557,14 +571,15 @@
 			getUsuariosOnline(),
 			getResponseTime(),
 			getBatteryInfo(),
-			getIndexedDBSize()
+			getIndexedDBSize(),
+			obterInformacoesDispositivo().catch(() => ({}) as Record<string, unknown>) // Capturar erro se falhar
 		]);
 
 		const browserInfo = getBrowserInfo();
 		const networkInfo = getNetworkInfo();
 		const wsInfo = getWebSocketStatus();
 
-		const newMetrics = {
+		const newMetrics: Metrics = {
 			timestamp: Date.now(),
 			cpuUsage,
 			memoryUsage,
@@ -594,7 +609,19 @@
 			indexedDBSize,
 			serviceWorkerStatus: getServiceWorkerStatus(),
 			domNodes: getDOMNodeCount(),
-			jsHeapSize: getJSHeapSize()
+			jsHeapSize: getJSHeapSize(),
+			// GPS
+			latitude: deviceInfo.latitude,
+			longitude: deviceInfo.longitude,
+			gpsPrecision: deviceInfo.precisao,
+			gpsConfidence: deviceInfo.confiabilidadeGPS,
+			// Acelerômetro
+			accelerometerX: deviceInfo.acelerometro?.x,
+			accelerometerY: deviceInfo.acelerometro?.y,
+			accelerometerZ: deviceInfo.acelerometro?.z,
+			movementDetected: deviceInfo.acelerometro?.movimentoDetectado,
+			movementMagnitude: deviceInfo.acelerometro?.magnitude,
+			sensorAvailable: deviceInfo.sensorDisponivel
 		};
 
 		// Resetar contadores
@@ -1445,6 +1472,181 @@
 			</div>
 		</div>
 
+		<!-- Seção de GPS e Sensores -->
+		<div class="mt-8">
+			<div class="divider">
+				<h2 class="text-primary flex items-center gap-3 text-2xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+						/>
+					</svg>
+					GPS e Sensores
+				</h2>
+			</div>
+
+			<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+				<!-- Latitude -->
+				{#if metrics.latitude !== undefined}
+					<div
+						class="stat bg-base-100 border-primary/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Latitude</div>
+						<div class="stat-value text-primary text-2xl">{metrics.latitude.toFixed(6)}</div>
+						<div class="stat-desc mt-2">
+							<div class="badge badge-primary badge-sm">GPS</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Longitude -->
+				{#if metrics.longitude !== undefined}
+					<div
+						class="stat bg-base-100 border-primary/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Longitude</div>
+						<div class="stat-value text-primary text-2xl">{metrics.longitude.toFixed(6)}</div>
+						<div class="stat-desc mt-2">
+							<div class="badge badge-primary badge-sm">GPS</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Precisão GPS -->
+				{#if metrics.gpsPrecision !== undefined}
+					<div
+						class="stat bg-base-100 border-info/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Precisão GPS</div>
+						<div class="stat-value text-info text-2xl">{metrics.gpsPrecision.toFixed(2)}m</div>
+						<div class="stat-desc mt-2">
+							<div class="badge badge-info badge-sm">Precisão</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Confiança GPS -->
+				{#if metrics.gpsConfidence !== undefined}
+					<div
+						class="stat bg-base-100 border-success/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Confiança GPS</div>
+						<div class="stat-value text-success text-2xl">
+							{(metrics.gpsConfidence * 100).toFixed(1)}%
+						</div>
+						<div class="stat-desc mt-2">
+							<div class="badge badge-success badge-sm">Confiança</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Acelerômetro X -->
+				{#if metrics.accelerometerX !== undefined}
+					<div
+						class="stat bg-base-100 border-warning/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Acelerômetro X</div>
+						<div class="stat-value text-warning text-2xl">{metrics.accelerometerX.toFixed(3)}</div>
+						<div class="stat-desc mt-2">
+							<div class="badge badge-warning badge-sm">m/s²</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Acelerômetro Y -->
+				{#if metrics.accelerometerY !== undefined}
+					<div
+						class="stat bg-base-100 border-warning/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Acelerômetro Y</div>
+						<div class="stat-value text-warning text-2xl">{metrics.accelerometerY.toFixed(3)}</div>
+						<div class="stat-desc mt-2">
+							<div class="badge badge-warning badge-sm">m/s²</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Acelerômetro Z -->
+				{#if metrics.accelerometerZ !== undefined}
+					<div
+						class="stat bg-base-100 border-warning/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Acelerômetro Z</div>
+						<div class="stat-value text-warning text-2xl">{metrics.accelerometerZ.toFixed(3)}</div>
+						<div class="stat-desc mt-2">
+							<div class="badge badge-warning badge-sm">m/s²</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Magnitude de Movimento -->
+				{#if metrics.movementMagnitude !== undefined}
+					<div
+						class="stat bg-base-100 border-error/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Magnitude de Movimento</div>
+						<div class="stat-value text-error text-2xl">{metrics.movementMagnitude.toFixed(3)}</div>
+						<div class="stat-desc mt-2">
+							<div class="badge badge-error badge-sm">m/s²</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Movimento Detectado -->
+				{#if metrics.movementDetected !== undefined}
+					<div
+						class="stat bg-base-100 border-accent/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Movimento Detectado</div>
+						<div class="stat-value text-accent text-3xl">
+							{metrics.movementDetected ? 'Sim' : 'Não'}
+						</div>
+						<div class="stat-desc mt-2">
+							<div
+								class="badge {metrics.movementDetected ? 'badge-success' : 'badge-warning'} badge-sm"
+							>
+								{metrics.movementDetected ? 'Ativo' : 'Inativo'}
+							</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Status do Sensor -->
+				{#if metrics.sensorAvailable !== undefined}
+					<div
+						class="stat bg-base-100 border-secondary/10 rounded-2xl border shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+					>
+						<div class="stat-title font-semibold">Sensor Disponível</div>
+						<div class="stat-value text-secondary text-3xl">
+							{metrics.sensorAvailable ? 'Sim' : 'Não'}
+						</div>
+						<div class="stat-desc mt-2">
+							<div
+								class="badge {metrics.sensorAvailable ? 'badge-success' : 'badge-ghost'} badge-sm"
+							>
+								{metrics.sensorAvailable ? 'Disponível' : 'Indisponível'}
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		</div>
+
 		<!-- Seção de Gráficos Interativos -->
 		{#if metricsHistory.length > 5}
 			<div class="mt-8">
@@ -1608,14 +1810,16 @@
 			</svg>
 			<div>
 				<h3 class="font-bold">
-					Monitoramento Ativo (Modo Local) - 23 Métricas Técnicas + 4 Gráficos Interativos
+					Monitoramento Ativo (Modo Local) - Métricas Técnicas + GPS + Sensores + 4 Gráficos Interativos
 				</h3>
 				<div class="text-xs">
 					<strong>Sistema:</strong> CPU, RAM, Latência, Storage |
 					<strong>Aplicação:</strong> Usuários, Mensagens, Tempo Resposta, Erros, HTTP Requests |
 					<strong>Performance:</strong> FPS, Conexão, Navegador, Tela |
 					<strong>Hardware:</strong> RAM Física, Núcleos CPU, Cache, Bateria, Uptime |
-					<strong>Avançado:</strong> WebSocket, IndexedDB, Service Worker, DOM Nodes, JS Heap
+					<strong>Avançado:</strong> WebSocket, IndexedDB, Service Worker, DOM Nodes, JS Heap |
+					<strong>GPS:</strong> Latitude, Longitude, Precisão, Confiança |
+					<strong>Sensores:</strong> Acelerômetro (X, Y, Z), Magnitude, Movimento Detectado
 					<br />
 					<strong>Gráficos:</strong> Linha (Recursos), Área (Atividade), Donut (Distribuição),
 					Barras (Métricas)
diff --git a/apps/web/src/lib/stores/callStore.ts b/apps/web/src/lib/stores/callStore.ts
index 6fe5022..adc2bf5 100644
--- a/apps/web/src/lib/stores/callStore.ts
+++ b/apps/web/src/lib/stores/callStore.ts
@@ -4,6 +4,7 @@
 
 import { writable, derived, get } from 'svelte/store';
 import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+import type { JitsiApi } from '$lib/types/jitsi';
 
 export interface ParticipanteChamada {
 	usuarioId: Id<'usuarios'>;
@@ -32,7 +33,7 @@ export interface EstadoChamada {
 		cameraId: string | null;
 		speakerId: string | null;
 	};
-	jitsiApi: any | null;
+	jitsiApi: JitsiApi;
 	streamLocal: MediaStream | null;
 }
 
@@ -282,7 +283,7 @@ export function atualizarDispositivos(dispositivos: {
 /**
  * Definir API Jitsi
  */
-export function setJitsiApi(api: any | null): void {
+export function setJitsiApi(api: JitsiApi): void {
 	callState.update((state) => ({
 		...state,
 		jitsiApi: api
diff --git a/apps/web/src/lib/types/jitsi.d.ts b/apps/web/src/lib/types/jitsi.d.ts
new file mode 100644
index 0000000..c202b6d
--- /dev/null
+++ b/apps/web/src/lib/types/jitsi.d.ts
@@ -0,0 +1,331 @@
+/**
+ * Definições de tipo para lib-jitsi-meet
+ * Baseado na documentação oficial do Jitsi Meet
+ */
+
+export interface JitsiConnection {
+	connect(): void;
+	disconnect(): void;
+	addEventListener(event: string, handler: (data?: unknown) => void): void;
+	removeEventListener(event: string, handler: (data?: unknown) => void): void;
+	initJitsiConference(roomName: string, options: Record<string, unknown>): JitsiConference;
+}
+
+export interface JitsiConference {
+	join(): void;
+	leave(): void;
+	on(event: string, handler: (...args: unknown[]) => void): void;
+	off(event: string, handler: (...args: unknown[]) => void): void;
+	removeEventListener(event: string, handler: (...args: unknown[]) => void): void;
+	muteAudio(): void;
+	unmuteAudio(): void;
+	muteVideo(): void;
+	unmuteVideo(): void;
+	getParticipants(): Map<string, JitsiParticipant>;
+	getLocalTracks(): JitsiTrack[];
+	setDisplayName(name: string): void;
+	addTrack(track: JitsiTrack): Promise<void>;
+	removeTrack(track: JitsiTrack): Promise<void>;
+	getLocalVideoTrack(): JitsiTrack | null;
+	getLocalAudioTrack(): JitsiTrack | null;
+}
+
+export interface JitsiTrack {
+	getType(): 'audio' | 'video';
+	isMuted(): boolean;
+	mute(): Promise<void>;
+	unmute(): Promise<void>;
+	attach(element: HTMLElement): void;
+	detach(element: HTMLElement): void;
+	dispose(): Promise<void>;
+	getParticipantId(): string;
+	track: MediaStreamTrack;
+	isLocal(): boolean;
+	getVideoType(): 'camera' | 'desktop' | undefined;
+}
+
+export interface JitsiParticipant {
+	getId(): string;
+	getDisplayName(): string;
+	isAudioMuted(): boolean;
+	isVideoMuted(): boolean;
+	getRole(): string;
+}
+
+export interface JitsiMeetJSLib {
+	JitsiConnection: new (
+		appId: string | null,
+		token: string | null,
+		options: JitsiConnectionOptions
+	) => JitsiConnection;
+	constants: {
+		events: {
+			connection: {
+				CONNECTION_ESTABLISHED: string;
+				CONNECTION_FAILED: string;
+				CONNECTION_DISCONNECTED: string;
+				WRONG_STATE: string;
+			};
+			conference: {
+				USER_JOINED: string;
+				USER_LEFT: string;
+				TRACK_ADDED: string;
+				TRACK_REMOVED: string;
+				TRACK_MUTE_CHANGED: string;
+				CONFERENCE_JOINED: string;
+				CONFERENCE_LEFT: string;
+				CONFERENCE_ERROR: string;
+				DISPLAY_NAME_CHANGED: string;
+				DOMINANT_SPEAKER_CHANGED: string;
+			};
+		};
+		logLevels: {
+			ERROR: number;
+			WARN: number;
+			INFO: number;
+			DEBUG: number;
+		};
+	};
+	init(options: JitsiInitOptions): void;
+	setLogLevel(level: number): void;
+	createLocalTracks(
+		options: MediaStreamConstraints,
+		advancedOptions?: JitsiLocalTrackOptions
+	): Promise<JitsiTrack[]>;
+	mediaDevices: {
+		enumerateDevices(): Promise<MediaDeviceInfo[]>;
+		isDeviceChangeAvailable(type: 'audio' | 'video'): Promise<boolean>;
+	};
+}
+
+export interface JitsiConnectionOptions {
+	hosts?: {
+		domain?: string;
+		muc?: string;
+		focus?: string;
+	};
+	serviceUrl?: string;
+	bosh?: string;
+	websocket?: string;
+	clientNode?: string;
+	useStunTurn?: boolean;
+	iceServers?: RTCIceServer[];
+	enableLayerSuspension?: boolean;
+	enableLipSync?: boolean;
+	disableAudioLevels?: boolean;
+	disableSimulcast?: boolean;
+	enableRemb?: boolean;
+	enableTcc?: boolean;
+	useRoomAsSharedDocumentName?: boolean;
+	enableStatsID?: boolean;
+	channelLastN?: number;
+	startBitrate?: number;
+	stereo?: boolean;
+	forcedVideoCodec?: string;
+	preferredVideoCodec?: string;
+	disableH264?: boolean;
+	disableVP8?: boolean;
+	disableVP9?: boolean;
+	enableOpusRed?: boolean;
+	enableDtmf?: boolean;
+	openBridgeChannel?: string | boolean;
+}
+
+export interface JitsiInitOptions {
+	disableAudioLevels?: boolean;
+	disableSimulcast?: boolean;
+	enableWindowOnErrorHandler?: boolean;
+	enableRemb?: boolean;
+	enableTcc?: boolean;
+	disableThirdPartyRequests?: boolean;
+	useStunTurn?: boolean;
+	iceServers?: RTCIceServer[];
+}
+
+export interface JitsiLocalTrackOptions {
+	devices?: string[];
+	cameraDeviceId?: string;
+	micDeviceId?: string;
+	facingMode?: 'user' | 'environment';
+	resolution?: number;
+	frameRate?: number;
+}
+
+// Extensão do Window para BlobBuilder (polyfill)
+export interface WindowWithBlobBuilder extends Window {
+	BlobBuilder?: {
+		new (): {
+			append(data: Blob | string): void;
+			getBlob(type?: string): Blob;
+		};
+	};
+	webkitBlobBuilder?: {
+		new (): {
+			append(data: Blob | string): void;
+			getBlob(type?: string): Blob;
+		};
+	};
+	MozBlobBuilder?: {
+		new (): {
+			append(data: Blob | string): void;
+			getBlob(type?: string): Blob;
+		};
+	};
+}
+
+// Tipo para API Jitsi (pode ser Connection ou Conference)
+export type JitsiApi = JitsiConnection | JitsiConference | null;
+
+// Declaração de módulo para lib-jitsi-meet
+declare module 'lib-jitsi-meet' {
+	export interface JitsiConnection {
+		connect(): void;
+		disconnect(): void;
+		addEventListener(event: string, handler: (data?: unknown) => void): void;
+		removeEventListener(event: string, handler: (data?: unknown) => void): void;
+		initJitsiConference(roomName: string, options: Record<string, unknown>): JitsiConference;
+	}
+
+	export interface JitsiConference {
+		join(): void;
+		leave(): void;
+		on(event: string, handler: (...args: unknown[]) => void): void;
+		off(event: string, handler: (...args: unknown[]) => void): void;
+		removeEventListener(event: string, handler: (...args: unknown[]) => void): void;
+		muteAudio(): void;
+		unmuteAudio(): void;
+		muteVideo(): void;
+		unmuteVideo(): void;
+		getParticipants(): Map<string, JitsiParticipant>;
+		getLocalTracks(): JitsiTrack[];
+		setDisplayName(name: string): void;
+		addTrack(track: JitsiTrack): Promise<void>;
+		removeTrack(track: JitsiTrack): Promise<void>;
+		getLocalVideoTrack(): JitsiTrack | null;
+		getLocalAudioTrack(): JitsiTrack | null;
+	}
+
+	export interface JitsiTrack {
+		getType(): 'audio' | 'video';
+		isMuted(): boolean;
+		mute(): Promise<void>;
+		unmute(): Promise<void>;
+		attach(element: HTMLElement): void;
+		detach(element: HTMLElement): void;
+		dispose(): Promise<void>;
+		getParticipantId(): string;
+		track: MediaStreamTrack;
+		isLocal(): boolean;
+		getVideoType(): 'camera' | 'desktop' | undefined;
+	}
+
+	export interface JitsiParticipant {
+		getId(): string;
+		getDisplayName(): string;
+		isAudioMuted(): boolean;
+		isVideoMuted(): boolean;
+		getRole(): string;
+	}
+
+	export interface JitsiMeetJSLib {
+		JitsiConnection: new (
+			appId: string | null,
+			token: string | null,
+			options: JitsiConnectionOptions
+		) => JitsiConnection;
+		constants: {
+			events: {
+				connection: {
+					CONNECTION_ESTABLISHED: string;
+					CONNECTION_FAILED: string;
+					CONNECTION_DISCONNECTED: string;
+					WRONG_STATE: string;
+				};
+				conference: {
+					USER_JOINED: string;
+					USER_LEFT: string;
+					TRACK_ADDED: string;
+					TRACK_REMOVED: string;
+					TRACK_MUTE_CHANGED: string;
+					CONFERENCE_JOINED: string;
+					CONFERENCE_LEFT: string;
+					CONFERENCE_ERROR: string;
+					DISPLAY_NAME_CHANGED: string;
+					DOMINANT_SPEAKER_CHANGED: string;
+				};
+			};
+			logLevels: {
+				ERROR: number;
+				WARN: number;
+				INFO: number;
+				DEBUG: number;
+			};
+		};
+		init(options: JitsiInitOptions): void;
+		setLogLevel(level: number): void;
+		createLocalTracks(
+			options: MediaStreamConstraints,
+			advancedOptions?: JitsiLocalTrackOptions
+		): Promise<JitsiTrack[]>;
+		mediaDevices: {
+			enumerateDevices(): Promise<MediaDeviceInfo[]>;
+			isDeviceChangeAvailable(type: 'audio' | 'video'): Promise<boolean>;
+		};
+	}
+
+	export interface JitsiConnectionOptions {
+		hosts?: {
+			domain?: string;
+			muc?: string;
+			focus?: string;
+		};
+		serviceUrl?: string;
+		bosh?: string;
+		websocket?: string;
+		clientNode?: string;
+		useStunTurn?: boolean;
+		iceServers?: RTCIceServer[];
+		enableLayerSuspension?: boolean;
+		enableLipSync?: boolean;
+		disableAudioLevels?: boolean;
+		disableSimulcast?: boolean;
+		enableRemb?: boolean;
+		enableTcc?: boolean;
+		useRoomAsSharedDocumentName?: boolean;
+		enableStatsID?: boolean;
+		channelLastN?: number;
+		startBitrate?: number;
+		stereo?: boolean;
+		forcedVideoCodec?: string;
+		preferredVideoCodec?: string;
+		disableH264?: boolean;
+		disableVP8?: boolean;
+		disableVP9?: boolean;
+		enableOpusRed?: boolean;
+		enableDtmf?: boolean;
+		openBridgeChannel?: string | boolean;
+	}
+
+	export interface JitsiInitOptions {
+		disableAudioLevels?: boolean;
+		disableSimulcast?: boolean;
+		enableWindowOnErrorHandler?: boolean;
+		enableRemb?: boolean;
+		enableTcc?: boolean;
+		disableThirdPartyRequests?: boolean;
+		useStunTurn?: boolean;
+		iceServers?: RTCIceServer[];
+	}
+
+	export interface JitsiLocalTrackOptions {
+		devices?: string[];
+		cameraDeviceId?: string;
+		micDeviceId?: string;
+		facingMode?: 'user' | 'environment';
+		resolution?: number;
+		frameRate?: number;
+	}
+
+	const JitsiMeetJS: JitsiMeetJSLib;
+	export default JitsiMeetJS;
+}
diff --git a/apps/web/src/lib/utils/callWindowManager.ts b/apps/web/src/lib/utils/callWindowManager.ts
new file mode 100644
index 0000000..4bb36ae
--- /dev/null
+++ b/apps/web/src/lib/utils/callWindowManager.ts
@@ -0,0 +1,200 @@
+/**
+ * Utilitário para gerenciar abertura de CallWindow em nova janela
+ */
+
+export interface CallWindowOptions {
+	width?: number;
+	height?: number;
+	left?: number;
+	top?: number;
+	features?: string;
+}
+
+export interface CallWindowData {
+	chamadaId: string;
+	conversaId: string;
+	tipo: 'audio' | 'video';
+	roomName: string;
+	ehAnfitriao: boolean;
+}
+
+const DEFAULT_OPTIONS: Required<CallWindowOptions> = {
+	width: 1280,
+	height: 720,
+	left: undefined,
+	top: undefined,
+	features: 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
+};
+
+/**
+ * Calcular posição centralizada da janela
+ */
+function calcularPosicaoCentralizada(width: number, height: number): { left: number; top: number } {
+	const left = window.screenX + (window.outerWidth - width) / 2;
+	const top = window.screenY + (window.outerHeight - height) / 2;
+	return { left, top };
+}
+
+/**
+ * Abrir CallWindow em nova janela do navegador
+ */
+export function abrirCallWindowEmPopup(
+	data: CallWindowData,
+	options: CallWindowOptions = {}
+): Window | null {
+	const opts = { ...DEFAULT_OPTIONS, ...options };
+	
+	// Calcular posição se não fornecida
+	let left = opts.left;
+	let top = opts.top;
+	
+	if (left === undefined || top === undefined) {
+		const posicao = calcularPosicaoCentralizada(opts.width, opts.height);
+		left = left ?? posicao.left;
+		top = top ?? posicao.top;
+	}
+
+	// Construir features da janela
+	const features = [
+		`width=${opts.width}`,
+		`height=${opts.height}`,
+		`left=${left}`,
+		`top=${top}`,
+		opts.features
+	].join(',');
+
+	// Criar URL com dados da chamada
+	const url = new URL('/call', window.location.origin);
+	url.searchParams.set('chamadaId', data.chamadaId);
+	url.searchParams.set('conversaId', data.conversaId);
+	url.searchParams.set('tipo', data.tipo);
+	url.searchParams.set('roomName', data.roomName);
+	url.searchParams.set('ehAnfitriao', String(data.ehAnfitriao));
+
+	// Abrir janela
+	const popup = window.open(url.toString(), `call-${data.chamadaId}`, features);
+
+	if (!popup) {
+		console.error('Falha ao abrir popup. Verifique se o bloqueador de popups está desabilitado.');
+		return null;
+	}
+
+	// Focar na nova janela
+	popup.focus();
+
+	// Configurar comunicação via postMessage
+	configurarComunicacaoPopup(popup, data);
+
+	return popup;
+}
+
+/**
+ * Configurar comunicação entre janelas usando postMessage
+ */
+function configurarComunicacaoPopup(popup: Window, data: CallWindowData): void {
+	// Listener para mensagens da janela popup
+	const messageHandler = (event: MessageEvent) => {
+		// Verificar origem
+		if (event.origin !== window.location.origin) {
+			return;
+		}
+
+		// Verificar se a mensagem é da janela popup
+		if (event.data?.source === 'call-window-popup') {
+			switch (event.data.type) {
+				case 'ready':
+					console.log('CallWindow popup está pronto');
+					break;
+				case 'closed':
+					console.log('CallWindow popup foi fechado');
+					window.removeEventListener('message', messageHandler);
+					break;
+				case 'error':
+					console.error('Erro na CallWindow popup:', event.data.error);
+					break;
+			}
+		}
+	};
+
+	window.addEventListener('message', messageHandler);
+
+	// Detectar quando a janela é fechada
+	const checkClosed = setInterval(() => {
+		if (popup.closed) {
+			clearInterval(checkClosed);
+			window.removeEventListener('message', messageHandler);
+			console.log('CallWindow popup foi fechado pelo usuário');
+		}
+	}, 1000);
+}
+
+/**
+ * Verificar se popups estão habilitados
+ */
+export function verificarSuportePopup(): boolean {
+	if (typeof window === 'undefined') {
+		return false;
+	}
+
+	// Tentar abrir um popup de teste
+	const testPopup = window.open('about:blank', '_blank', 'width=1,height=1');
+	
+	if (!testPopup) {
+		return false;
+	}
+
+	// Fechar popup de teste
+	testPopup.close();
+	return true;
+}
+
+/**
+ * Obter dados da chamada da URL (para uso na página de popup)
+ */
+export function obterDadosChamadaDaUrl(): CallWindowData | null {
+	if (typeof window === 'undefined') {
+		return null;
+	}
+
+	const params = new URLSearchParams(window.location.search);
+	const chamadaId = params.get('chamadaId');
+	const conversaId = params.get('conversaId');
+	const tipo = params.get('tipo');
+	const roomName = params.get('roomName');
+	const ehAnfitriao = params.get('ehAnfitriao');
+
+	if (!chamadaId || !conversaId || !tipo || !roomName) {
+		return null;
+	}
+
+	if (tipo !== 'audio' && tipo !== 'video') {
+		return null;
+	}
+
+	return {
+		chamadaId,
+		conversaId,
+		tipo,
+		roomName,
+		ehAnfitriao: ehAnfitriao === 'true'
+	};
+}
+
+/**
+ * Notificar janela pai sobre eventos
+ */
+export function notificarJanelaPai(type: string, data?: unknown): void {
+	if (typeof window === 'undefined' || !window.opener) {
+		return;
+	}
+
+	window.opener.postMessage(
+		{
+			source: 'call-window-popup',
+			type,
+			data
+		},
+		window.location.origin
+	);
+}
+
diff --git a/apps/web/src/lib/utils/deviceInfo.ts b/apps/web/src/lib/utils/deviceInfo.ts
index ed3526a..6213454 100644
--- a/apps/web/src/lib/utils/deviceInfo.ts
+++ b/apps/web/src/lib/utils/deviceInfo.ts
@@ -1,5 +1,21 @@
 import { getLocalIP } from './browserInfo';
 
+export interface DadosAcelerometro {
+	x: number;
+	y: number;
+	z: number;
+	movimentoDetectado: boolean;
+	magnitude: number;
+	variacao: number; // Variância entre leituras
+	timestamp: number;
+}
+
+export interface DadosGiroscopio {
+	alpha: number;
+	beta: number;
+	gamma: number;
+}
+
 export interface InformacoesDispositivo {
 	ipAddress?: string;
 	ipPublico?: string;
@@ -37,6 +53,10 @@ export interface InformacoesDispositivo {
 	isDesktop?: boolean;
 	connectionType?: string;
 	memoryInfo?: string;
+	acelerometro?: DadosAcelerometro;
+	giroscopio?: DadosGiroscopio;
+	sensorDisponivel?: boolean; // Indica se o sensor está disponível no dispositivo
+	permissaoNegada?: boolean; // Indica se a permissão foi negada pelo usuário
 }
 
 /**
@@ -637,6 +657,145 @@ async function obterIPPublico(): Promise<string | undefined> {
 	return undefined;
 }
 
+/**
+ * Solicita permissão para acesso aos sensores de movimento (iOS 13+)
+ */
+async function solicitarPermissaoSensor(): Promise<PermissionState> {
+	if (typeof DeviceMotionEvent === 'undefined' || typeof (DeviceMotionEvent as { requestPermission?: () => Promise<PermissionState> }).requestPermission !== 'function') {
+		// Permissão não necessária ou já concedida (navegadores modernos)
+		return 'granted';
+	}
+
+	try {
+		const requestPermission = (DeviceMotionEvent as { requestPermission: () => Promise<PermissionState> }).requestPermission;
+		const resultado = await requestPermission();
+		return resultado;
+	} catch (error) {
+		console.warn('Erro ao solicitar permissão de sensor:', error);
+		return 'denied';
+	}
+}
+
+/**
+ * Obtém dados de acelerômetro e giroscópio durante um período
+ * @param duracaoMs Duração da coleta em milissegundos (padrão: 5000ms = 5 segundos)
+ */
+async function obterDadosAcelerometro(duracaoMs: number = 5000): Promise<{
+	acelerometro?: DadosAcelerometro;
+	giroscopio?: DadosGiroscopio;
+	sensorDisponivel: boolean;
+	permissaoNegada: boolean;
+}> {
+	// Verificar se DeviceMotionEvent está disponível
+	if (typeof DeviceMotionEvent === 'undefined' || typeof DeviceOrientationEvent === 'undefined') {
+		return {
+			sensorDisponivel: false,
+			permissaoNegada: false
+		};
+	}
+
+	// Solicitar permissão (especialmente necessário no iOS 13+)
+	const permissao = await solicitarPermissaoSensor();
+	
+	if (permissao === 'denied') {
+		return {
+			sensorDisponivel: true,
+			permissaoNegada: true
+		};
+	}
+
+	return new Promise((resolve) => {
+		const leiturasAcelerometro: Array<{ x: number; y: number; z: number; timestamp: number }> = [];
+		const leiturasGiroscopio: Array<{ alpha: number; beta: number; gamma: number; timestamp: number }> = [];
+		
+		const timeoutId = setTimeout(() => {
+			window.removeEventListener('devicemotion', handleDeviceMotion);
+			window.removeEventListener('deviceorientation', handleDeviceOrientation);
+			
+			// Processar dados de acelerômetro
+			let acelerometro: DadosAcelerometro | undefined;
+			if (leiturasAcelerometro.length > 0) {
+				const ultimaLeitura = leiturasAcelerometro[leiturasAcelerometro.length - 1]!;
+				
+				// Calcular magnitude média
+				const magnitudes = leiturasAcelerometro.map(l => 
+					Math.sqrt(l.x * l.x + l.y * l.y + l.z * l.z)
+				);
+				const magnitude = magnitudes.reduce((sum, m) => sum + m, 0) / magnitudes.length;
+				
+				// Calcular variância para detectar movimento
+				const mediaX = leiturasAcelerometro.reduce((sum, l) => sum + l.x, 0) / leiturasAcelerometro.length;
+				const mediaY = leiturasAcelerometro.reduce((sum, l) => sum + l.y, 0) / leiturasAcelerometro.length;
+				const mediaZ = leiturasAcelerometro.reduce((sum, l) => sum + l.z, 0) / leiturasAcelerometro.length;
+				
+				const variacoes = leiturasAcelerometro.map(l => 
+					Math.pow(l.x - mediaX, 2) + Math.pow(l.y - mediaY, 2) + Math.pow(l.z - mediaZ, 2)
+				);
+				const variacao = variacoes.reduce((sum, v) => sum + v, 0) / variacoes.length;
+				
+				// Detectar movimento: se variância > 0.01, há movimento
+				const movimentoDetectado = variacao > 0.01;
+				
+				acelerometro = {
+					x: ultimaLeitura.x,
+					y: ultimaLeitura.y,
+					z: ultimaLeitura.z,
+					movimentoDetectado,
+					magnitude,
+					variacao,
+					timestamp: ultimaLeitura.timestamp
+				};
+			}
+			
+			// Processar dados de giroscópio
+			let giroscopio: DadosGiroscopio | undefined;
+			if (leiturasGiroscopio.length > 0) {
+				const ultimaLeitura = leiturasGiroscopio[leiturasGiroscopio.length - 1]!;
+				giroscopio = {
+					alpha: ultimaLeitura.alpha || 0,
+					beta: ultimaLeitura.beta || 0,
+					gamma: ultimaLeitura.gamma || 0
+				};
+			}
+			
+			resolve({
+				acelerometro,
+				giroscopio,
+				sensorDisponivel: true,
+				permissaoNegada: false
+			});
+		}, duracaoMs);
+		
+		function handleDeviceMotion(event: DeviceMotionEvent) {
+			if (event.accelerationIncludingGravity) {
+				const acc = event.accelerationIncludingGravity;
+				if (acc.x !== null && acc.y !== null && acc.z !== null) {
+					leiturasAcelerometro.push({
+						x: acc.x,
+						y: acc.y,
+						z: acc.z,
+						timestamp: Date.now()
+					});
+				}
+			}
+		}
+		
+		function handleDeviceOrientation(event: DeviceOrientationEvent) {
+			if (event.alpha !== null && event.beta !== null && event.gamma !== null) {
+				leiturasGiroscopio.push({
+					alpha: event.alpha,
+					beta: event.beta,
+					gamma: event.gamma,
+					timestamp: Date.now()
+				});
+			}
+		}
+		
+		window.addEventListener('devicemotion', handleDeviceMotion);
+		window.addEventListener('deviceorientation', handleDeviceOrientation);
+	});
+}
+
 /**
  * Obtém todas as informações do dispositivo
  */
@@ -675,13 +834,14 @@ export async function obterInformacoesDispositivo(): Promise<InformacoesDisposit
 	informacoes.screenResolution = tela.screenResolution;
 	informacoes.coresTela = tela.coresTela;
 
-	// Informações de conexão e memória (assíncronas)
-	const [connectionType, memoryInfo, ipPublico, ipLocal, localizacao] = await Promise.all([
+	// Informações de conexão, memória e localização (assíncronas)
+	const [connectionType, memoryInfo, ipPublico, ipLocal, localizacao, dadosSensores] = await Promise.all([
 		obterInformacoesConexao(),
 		Promise.resolve(obterInformacoesMemoria()),
 		obterIPPublico(),
 		getLocalIP(),
 		obterLocalizacao(),
+		obterDadosAcelerometro(5000), // Coletar dados por 5 segundos
 	]);
 
 	informacoes.connectionType = connectionType;
@@ -703,6 +863,12 @@ export async function obterInformacoesDispositivo(): Promise<InformacoesDisposit
 	informacoes.estado = localizacao.estado;
 	informacoes.pais = localizacao.pais;
 
+	// Dados de sensores
+	informacoes.acelerometro = dadosSensores.acelerometro;
+	informacoes.giroscopio = dadosSensores.giroscopio;
+	informacoes.sensorDisponivel = dadosSensores.sensorDisponivel;
+	informacoes.permissaoNegada = dadosSensores.permissaoNegada;
+
 	// IP address (usar público se disponível, senão local)
 	informacoes.ipAddress = ipPublico || ipLocal;
 
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 03b9e4f..f663bdd 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -28,6 +28,8 @@
 	let carregando = $state(false);
 	let mostrarModalImpressao = $state(false);
 	let funcionarioParaImprimir = $state<Id<'funcionarios'> | ''>('');
+	let mostrarModalDetalhes = $state(false);
+	let registroDetalhesId = $state<Id<'registrosPonto'> | ''>('');
 	let chartCanvas: HTMLCanvasElement;
 	let chartInstance: Chart | null = null;
 
@@ -190,8 +192,12 @@
 			
 			// Aguardar um pouco para garantir que o canvas está renderizado
 			const timeoutId = setTimeout(() => {
-				criarGrafico();
-			}, 100);
+				try {
+					criarGrafico();
+				} catch (error) {
+					console.error('Erro ao criar gráfico no effect:', error);
+				}
+			}, 200);
 
 			return () => {
 				clearTimeout(timeoutId);
@@ -201,11 +207,20 @@
 
 	// Também tentar criar quando o canvas for montado
 	onMount(() => {
-		if (chartCanvas && estatisticas && chartData) {
-			setTimeout(() => {
-				criarGrafico();
-			}, 200);
-		}
+		// Tentar criar o gráfico após um pequeno delay para garantir que tudo está renderizado
+		const timeoutId = setTimeout(() => {
+			if (chartCanvas && estatisticas && chartData && !chartInstance) {
+				try {
+					criarGrafico();
+				} catch (error) {
+					console.error('Erro ao criar gráfico no onMount:', error);
+				}
+			}
+		}, 500);
+
+		return () => {
+			clearTimeout(timeoutId);
+		};
 	});
 
 	onDestroy(() => {
@@ -683,6 +698,12 @@
 						minuto: number;
 						dentroDoPrazo: boolean;
 						dentroRaioPermitido: boolean | null | undefined;
+						acelerometroX?: number | undefined;
+						acelerometroY?: number | undefined;
+						acelerometroZ?: number | undefined;
+						movimentoDetectado?: boolean | undefined;
+						magnitudeMovimento?: number | undefined;
+						sensorDisponivel?: boolean | undefined;
 					}>
 				> = {};
 
@@ -698,6 +719,12 @@
 						minuto: r.minuto,
 						dentroDoPrazo: r.dentroDoPrazo,
 						dentroRaioPermitido: r.dentroRaioPermitido,
+						acelerometroX: r.acelerometroX,
+						acelerometroY: r.acelerometroY,
+						acelerometroZ: r.acelerometroZ,
+						movimentoDetectado: r.movimentoDetectado,
+						magnitudeMovimento: r.magnitudeMovimento,
+						sensorDisponivel: r.sensorDisponivel,
 					});
 				}
 
@@ -744,6 +771,21 @@
 
 						linha.push(reg.dentroDoPrazo ? 'Sim' : 'Não');
 
+						// Adicionar dados de acelerômetro (se disponível)
+						if (reg.acelerometroX !== undefined || reg.sensorDisponivel !== undefined) {
+							if (reg.sensorDisponivel === false && !reg.acelerometroX) {
+								linha.push('Sensor: Não disponível');
+							} else if (reg.acelerometroX !== undefined) {
+								const movimento = reg.movimentoDetectado ? 'Sim' : 'Não';
+								const magnitude = reg.magnitudeMovimento !== undefined ? reg.magnitudeMovimento.toFixed(2) : 'N/A';
+								linha.push(`Mov: ${movimento} | Mag: ${magnitude} m/s²`);
+							} else {
+								linha.push('Sensor: N/A');
+							}
+						} else {
+							linha.push('-');
+						}
+
 						tableData.push(linha);
 					}
 				}
@@ -754,6 +796,7 @@
 				}
 				headers.push('Localização');
 				headers.push('Dentro do Prazo');
+				headers.push('Acelerômetro');
 
 				// Salvar a posição Y antes da tabela
 				const yPosAntesTabela = yPosition;
@@ -985,6 +1028,20 @@
 		}
 	}
 
+	function abrirModalDetalhes(registroId: Id<'registrosPonto'>) {
+		if (!registroId) {
+			console.error('Erro: registroId inválido');
+			return;
+		}
+		registroDetalhesId = registroId;
+		mostrarModalDetalhes = true;
+	}
+
+	function fecharModalDetalhes() {
+		mostrarModalDetalhes = false;
+		registroDetalhesId = '';
+	}
+
 	async function imprimirDetalhesRegistro(registroId: Id<'registrosPonto'>) {
 		try {
 			// Buscar dados completos do registro
@@ -1909,12 +1966,7 @@
 					</div>
 				{:else}
 					<canvas bind:this={chartCanvas} class="w-full h-full"></canvas>
-					{#if !chartInstance && estatisticas && chartData}
-						<div class="absolute inset-0 flex items-center justify-center bg-base-200/30 rounded-xl">
-							<span class="loading loading-spinner loading-lg text-primary"></span>
-						</div>
-					{/if}
-					{/if}
+				{/if}
 				</div>
 			</div>
 		</div>
@@ -2234,8 +2286,8 @@
 														<td class="whitespace-nowrap">
 															<button
 																class="btn btn-sm btn-outline btn-primary gap-2 hover:btn-primary hover:shadow-md transition-all"
-																onclick={() => imprimirDetalhesRegistro(registro._id)}
-																title="Imprimir Detalhes"
+																onclick={() => abrirModalDetalhes(registro._id)}
+																title="Ver Detalhes"
 															>
 																<FileText class="h-4 w-4" />
 																Detalhes
@@ -2267,3 +2319,124 @@
 	/>
 {/if}
 
+<!-- Modal de Detalhes do Registro -->
+{#if mostrarModalDetalhes && registroDetalhesId}
+	{@const registroDetalhesQuery = useQuery(api.pontos.obterRegistro, registroDetalhesId ? { registroId: registroDetalhesId } : 'skip')}
+	{@const registroDetalhes = registroDetalhesQuery?.data}
+	
+	<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && fecharModalDetalhes()}>
+		<div class="modal-box max-w-4xl max-h-[90vh] overflow-hidden flex flex-col" onclick={(e) => e.stopPropagation()}>
+			<div class="flex items-center justify-between mb-4 pb-4 border-b border-base-300 flex-shrink-0">
+				<h3 class="font-bold text-xl">Detalhes do Registro de Ponto</h3>
+				<button class="btn btn-sm btn-circle btn-ghost" onclick={fecharModalDetalhes}>✕</button>
+			</div>
+			
+			<div class="flex-1 overflow-y-auto pr-2">
+				{#if registroDetalhesQuery === undefined || registroDetalhesQuery?.isLoading}
+					<div class="flex items-center justify-center py-8">
+						<span class="loading loading-spinner loading-lg text-primary"></span>
+						<span class="ml-4">Carregando detalhes...</span>
+					</div>
+				{:else if registroDetalhesQuery?.error}
+					<div class="alert alert-error">
+						<XCircle class="h-6 w-6" />
+						<div>
+							<h3 class="font-bold">Erro ao carregar detalhes</h3>
+							<div class="text-sm mt-1">{registroDetalhesQuery.error?.message || String(registroDetalhesQuery.error) || 'Erro desconhecido'}</div>
+						</div>
+					</div>
+				{:else if !registroDetalhes}
+					<div class="alert alert-warning">
+						<FileText class="h-6 w-6" />
+						<span>Registro não encontrado</span>
+					</div>
+				{:else}
+					<!-- Informações Básicas -->
+					<div class="card bg-base-200 mb-4">
+						<div class="card-body">
+							<h4 class="font-bold mb-2">Informações do Registro</h4>
+							{#if registroDetalhes.funcionario}
+								<p><strong>Funcionário:</strong> {registroDetalhes.funcionario.nome}</p>
+								{#if registroDetalhes.funcionario.matricula}
+									<p><strong>Matrícula:</strong> {registroDetalhes.funcionario.matricula}</p>
+								{/if}
+							{/if}
+							<p><strong>Data:</strong> {formatarDataDDMMAAAA(registroDetalhes.data)}</p>
+							<p><strong>Horário:</strong> {formatarHoraPonto(registroDetalhes.hora, registroDetalhes.minuto)}</p>
+							<p><strong>Status:</strong> <span class="badge {registroDetalhes.dentroDoPrazo ? 'badge-success' : 'badge-error'}">{registroDetalhes.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}</span></p>
+						</div>
+					</div>
+
+					<!-- Localização GPS -->
+					{#if registroDetalhes.latitude !== undefined && registroDetalhes.longitude !== undefined}
+						<div class="card bg-base-200 mb-4">
+							<div class="card-body">
+								<h4 class="font-bold mb-2">Localização GPS</h4>
+								<p><strong>Latitude:</strong> {registroDetalhes.latitude.toFixed(6)}</p>
+								<p><strong>Longitude:</strong> {registroDetalhes.longitude.toFixed(6)}</p>
+								{#if registroDetalhes.precisao !== undefined}
+									<p><strong>Precisão:</strong> {registroDetalhes.precisao.toFixed(2)}m</p>
+								{/if}
+								{#if registroDetalhes.endereco || registroDetalhes.cidade}
+									<p><strong>Endereço:</strong> {registroDetalhes.endereco || ''} {registroDetalhes.cidade ? `, ${registroDetalhes.cidade}` : ''} {registroDetalhes.estado ? ` - ${registroDetalhes.estado}` : ''}</p>
+								{/if}
+								{#if registroDetalhes.confiabilidadeGPS !== undefined}
+									<p><strong>Confiabilidade GPS:</strong> {(registroDetalhes.confiabilidadeGPS * 100).toFixed(1)}%</p>
+								{/if}
+								{#if registroDetalhes.scoreConfiancaBackend !== undefined}
+									<p><strong>Score de Confiança:</strong> {(registroDetalhes.scoreConfiancaBackend * 100).toFixed(1)}%</p>
+								{/if}
+							</div>
+						</div>
+					{/if}
+
+					<!-- Dados de Sensores (Acelerômetro) -->
+					{#if registroDetalhes.acelerometroX !== undefined || registroDetalhes.sensorDisponivel !== undefined}
+						<div class="card bg-base-200 mb-4">
+							<div class="card-body">
+								<h4 class="font-bold mb-2">Dados de Sensores</h4>
+								{#if registroDetalhes.sensorDisponivel === false && registroDetalhes.isDesktop !== true}
+									<p class="text-warning"><strong>Sensor:</strong> Não disponível neste dispositivo</p>
+								{:else if registroDetalhes.permissaoSensorNegada === true}
+									<p class="text-error"><strong>Sensor:</strong> Permissão negada</p>
+								{:else if registroDetalhes.acelerometroX !== undefined}
+									<p><strong>Sensor:</strong> Disponível</p>
+									<p><strong>Acelerômetro X:</strong> {registroDetalhes.acelerometroX.toFixed(3)} m/s²</p>
+									{#if registroDetalhes.acelerometroY !== undefined}
+										<p><strong>Acelerômetro Y:</strong> {registroDetalhes.acelerometroY.toFixed(3)} m/s²</p>
+									{/if}
+									{#if registroDetalhes.acelerometroZ !== undefined}
+										<p><strong>Acelerômetro Z:</strong> {registroDetalhes.acelerometroZ.toFixed(3)} m/s²</p>
+									{/if}
+									{#if registroDetalhes.magnitudeMovimento !== undefined}
+										<p><strong>Magnitude:</strong> {registroDetalhes.magnitudeMovimento.toFixed(3)} m/s²</p>
+									{/if}
+									{#if registroDetalhes.movimentoDetectado !== undefined}
+										<p><strong>Movimento Detectado:</strong> <span class="badge {registroDetalhes.movimentoDetectado ? 'badge-success' : 'badge-warning'}">{registroDetalhes.movimentoDetectado ? 'Sim' : 'Não'}</span></p>
+									{/if}
+									{#if registroDetalhes.variacaoAcelerometro !== undefined}
+										<p><strong>Variação:</strong> {registroDetalhes.variacaoAcelerometro.toFixed(6)}</p>
+									{/if}
+								{:else if registroDetalhes.isDesktop === true}
+									<p class="text-info"><strong>Sensor:</strong> Não disponível em desktop (normal)</p>
+								{/if}
+							</div>
+						</div>
+					{/if}
+				{/if}
+			</div>
+
+			<div class="flex justify-end gap-2 pt-4 mt-4 border-t border-base-300 flex-shrink-0">
+				{#if registroDetalhes}
+					<button class="btn btn-primary gap-2" onclick={() => imprimirDetalhesRegistro(registroDetalhesId)}>
+						<Printer class="h-4 w-4" />
+						Imprimir PDF
+					</button>
+				{/if}
+				<button class="btn btn-outline" onclick={fecharModalDetalhes}>Fechar</button>
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop" onclick={fecharModalDetalhes}></form>
+	</dialog>
+{/if}
+
diff --git a/apps/web/src/routes/(dashboard)/ti/cibersecurity/+page.svelte b/apps/web/src/routes/(dashboard)/ti/cibersecurity/+page.svelte
index 4867b19..1a88d00 100644
--- a/apps/web/src/routes/(dashboard)/ti/cibersecurity/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/cibersecurity/+page.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
-	import { browser } from '$app/environment';
-	import type { ConstructorOfATypedSvelteComponent } from 'svelte/types/runtime/component';
 	import CybersecurityWizcard from '$lib/components/ti/CybersecurityWizcard.svelte';
-	// Usar tipo amplo para evitar conflitos de tipagem do import dinâmico no build
-	let Comp: ConstructorOfATypedSvelteComponent<typeof CybersecurityWizcard> | null = null;
 </script>
 
 <svelte:head>
@@ -27,11 +23,5 @@
 		<a href={resolve('/ti')} class="btn btn-outline btn-primary">Voltar para TI</a>
 	</header>
 
-	{#if browser && Comp}
-		<svelte:component this={Comp} />
-	{:else}
-		<div class="alert">
-			<span>Carregando módulo de cibersegurança…</span>
-		</div>
-	{/if}
+	<CybersecurityWizcard />
 </section>
diff --git a/apps/web/src/routes/call/+page.svelte b/apps/web/src/routes/call/+page.svelte
new file mode 100644
index 0000000..9e278ab
--- /dev/null
+++ b/apps/web/src/routes/call/+page.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import CallWindow from '$lib/components/call/CallWindow.svelte';
+	import { obterDadosChamadaDaUrl, notificarJanelaPai } from '$lib/utils/callWindowManager';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+
+	let dadosChamada = $state<{
+		chamadaId: Id<'chamadas'>;
+		conversaId: Id<'conversas'>;
+		tipo: 'audio' | 'video';
+		roomName: string;
+		ehAnfitriao: boolean;
+	} | null>(null);
+
+	let erro = $state<string | null>(null);
+
+	onMount(() => {
+		if (!browser) return;
+
+		// Obter dados da URL
+		const dados = obterDadosChamadaDaUrl();
+
+		if (!dados) {
+			erro = 'Dados da chamada não encontrados na URL.';
+			return;
+		}
+
+		dadosChamada = {
+			chamadaId: dados.chamadaId as Id<'chamadas'>,
+			conversaId: dados.conversaId as Id<'conversas'>,
+			tipo: dados.tipo,
+			roomName: dados.roomName,
+			ehAnfitriao: dados.ehAnfitriao
+		};
+
+		// Notificar janela pai que está pronto
+		notificarJanelaPai('ready');
+
+		// Detectar fechamento da janela
+		window.addEventListener('beforeunload', () => {
+			notificarJanelaPai('closed');
+		});
+	});
+
+	function handleClose(): void {
+		notificarJanelaPai('closed');
+		window.close();
+	}
+</script>
+
+<div class="h-screen w-screen bg-base-100">
+	{#if erro}
+		<div class="flex h-full w-full items-center justify-center">
+			<div class="text-center">
+				<div class="alert alert-error max-w-md">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<span>{erro}</span>
+				</div>
+				<button class="btn btn-primary mt-4" onclick={handleClose}>Fechar</button>
+			</div>
+		</div>
+	{:else if dadosChamada}
+		<CallWindow
+			chamadaId={dadosChamada.chamadaId}
+			conversaId={dadosChamada.conversaId}
+			tipo={dadosChamada.tipo}
+			roomName={dadosChamada.roomName}
+			ehAnfitriao={dadosChamada.ehAnfitriao}
+			onClose={handleClose}
+		/>
+	{:else}
+		<div class="flex h-full w-full items-center justify-center">
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
+	{/if}
+</div>
+
diff --git a/packages/backend/convex/actions/jitsiServer.ts b/packages/backend/convex/actions/jitsiServer.ts
index 3159eb8..3c47439 100644
--- a/packages/backend/convex/actions/jitsiServer.ts
+++ b/packages/backend/convex/actions/jitsiServer.ts
@@ -242,28 +242,36 @@ JWT_APP_SECRET=
 				detalhes.push(`✓ Arquivo .env atualizado: ${envPath}`);
 			}
 
-			// 2. Atualizar configuração do Prosody
+			// 2. Atualizar configuração do Prosody (conforme documentação oficial)
 			const prosodyConfigPath = `${basePath}/prosody/config/${host}.cfg.lua`;
 			const prosodyContent = `-- Configuração Prosody para ${host}
 -- Gerada automaticamente pelo SGSE
+-- Baseado na documentação oficial do Jitsi Meet
 
 VirtualHost "${host}"
     authentication = "anonymous"
     modules_enabled = {
         "bosh";
+        "websocket";
         "ping";
         "speakerstats";
         "turncredentials";
         "presence";
         "conference_duration";
+        "stats";
     }
     c2s_require_encryption = false
     allow_anonymous_s2s = false
+    bosh_max_inactivity = 60
+    bosh_max_polling = 5
+    bosh_max_stanzas = 5
 
 Component "conference.${host}" "muc"
     storage = "memory"
     muc_room_locking = false
     muc_room_default_public_jids = true
+    muc_room_cache_size = 1000
+    muc_log_presences = true
 
 Component "jitsi-videobridge.${host}"
     component_secret = ""
diff --git a/packages/backend/convex/configuracaoRelogio.ts b/packages/backend/convex/configuracaoRelogio.ts
index 41c9640..7b2a60e 100644
--- a/packages/backend/convex/configuracaoRelogio.ts
+++ b/packages/backend/convex/configuracaoRelogio.ts
@@ -4,12 +4,25 @@ import { getCurrentUserFunction } from './auth';
 import type { Id } from './_generated/dataModel';
 import { api, internal } from './_generated/api';
 
+/**
+ * Tipo de retorno da configuração do relógio
+ */
+type ConfiguracaoRelogioRetorno = {
+	servidorNTP?: string | undefined;
+	portaNTP?: number | undefined;
+	usarServidorExterno: boolean;
+	fallbackParaPC: boolean;
+	ultimaSincronizacao: number | null;
+	offsetSegundos: number | null;
+	gmtOffset: number;
+};
+
 /**
  * Obtém a configuração do relógio
  */
 export const obterConfiguracao = query({
 	args: {},
-	handler: async (ctx) => {
+	handler: async (ctx): Promise<ConfiguracaoRelogioRetorno> => {
 		// Buscar todas as configurações e pegar a mais recente (por atualizadoEm)
 		const configs = await ctx.db
 			.query('configuracaoRelogio')
@@ -35,6 +48,46 @@ export const obterConfiguracao = query({
 
 		return {
 			...config,
+			ultimaSincronizacao: config.ultimaSincronizacao ?? null, // Converter undefined para null
+			offsetSegundos: config.offsetSegundos ?? null, // Converter undefined para null
+			gmtOffset: config.gmtOffset ?? -3, // Padrão GMT-3 para Brasília se não configurado
+		};
+	},
+});
+
+/**
+ * Obtém a configuração do relógio (internal) - usado por actions para evitar referência circular
+ */
+export const obterConfiguracaoInternal = internalQuery({
+	args: {},
+	handler: async (ctx): Promise<ConfiguracaoRelogioRetorno> => {
+		// Buscar todas as configurações e pegar a mais recente (por atualizadoEm)
+		const configs = await ctx.db
+			.query('configuracaoRelogio')
+			.collect();
+		
+		// Pegar a configuração mais recente (ordenar por atualizadoEm desc)
+		const config = configs.length > 0 
+			? configs.sort((a, b) => (b.atualizadoEm || 0) - (a.atualizadoEm || 0))[0]
+			: null;
+
+		if (!config) {
+			// Retornar configuração padrão (GMT-3 para Brasília)
+			return {
+				servidorNTP: 'pool.ntp.org',
+				portaNTP: 123,
+				usarServidorExterno: false,
+				fallbackParaPC: true,
+				ultimaSincronizacao: null,
+				offsetSegundos: null,
+				gmtOffset: -3, // GMT-3 para Brasília
+			};
+		}
+
+		return {
+			...config,
+			ultimaSincronizacao: config.ultimaSincronizacao ?? null, // Converter undefined para null
+			offsetSegundos: config.offsetSegundos ?? null, // Converter undefined para null
 			gmtOffset: config.gmtOffset ?? -3, // Padrão GMT-3 para Brasília se não configurado
 		};
 	},
@@ -119,15 +172,26 @@ export const obterTempoServidor = query({
 	},
 });
 
+/**
+ * Tipo de retorno da sincronização
+ */
+type SincronizacaoRetorno = {
+	sucesso: boolean;
+	timestamp: number;
+	usandoServidorExterno: boolean;
+	offsetSegundos: number;
+	aviso?: string;
+};
+
 /**
  * Sincroniza tempo com servidor NTP (via action)
  * Nota: NTP real requer biblioteca específica, aqui fazemos uma aproximação
  */
 export const sincronizarTempo = action({
 	args: {},
-	handler: async (ctx) => {
-		// Buscar configuração diretamente do banco usando query pública
-		const config = await ctx.runQuery(api.configuracaoRelogio.obterConfiguracao, {});
+	handler: async (ctx): Promise<SincronizacaoRetorno> => {
+		// Buscar configuração usando query interna para evitar referência circular
+		const config: ConfiguracaoRelogioRetorno = await ctx.runQuery(internal.configuracaoRelogio.obterConfiguracaoInternal, {});
 
 		if (!config.usarServidorExterno) {
 			return {
@@ -145,66 +209,42 @@ export const sincronizarTempo = action({
 			const servidorNTP = config.servidorNTP || 'pool.ntp.org';
 			let serverTime: number;
 			
-			// Mapear servidores NTP conhecidos para APIs HTTP que retornam UTC
-			// Todos os servidores NTP retornam UTC, então usamos APIs que retornam UTC
-			if (servidorNTP.includes('pool.ntp.org') || servidorNTP.includes('ntp.org') || servidorNTP.includes('ntp.br')) {
-				// pool.ntp.org e servidores .org/.br - usar API que retorna UTC
-				const response = await fetch('https://worldtimeapi.org/api/timezone/Etc/UTC');
-				if (!response.ok) {
-					throw new Error('Falha ao obter tempo do servidor');
-				}
-				const data = (await response.json()) as { unixtime: number; datetime: string };
-				// unixtime está em segundos, converter para milissegundos
-				serverTime = data.unixtime * 1000;
-			} else if (servidorNTP.includes('time.google.com') || servidorNTP.includes('google')) {
-				// Google NTP - usar API que retorna UTC
+			// Se o servidor configurado for uma URL HTTP/HTTPS, tentar usar diretamente
+			if (servidorNTP.startsWith('http://') || servidorNTP.startsWith('https://')) {
 				try {
-					const response = await fetch('https://worldtimeapi.org/api/timezone/Etc/UTC');
+					const response = await fetch(servidorNTP);
 					if (!response.ok) {
-						throw new Error('Falha ao obter tempo');
+						throw new Error('Falha ao obter tempo do servidor configurado');
 					}
-					const data = (await response.json()) as { unixtime: number };
-					serverTime = data.unixtime * 1000;
-				} catch {
-					// Fallback para outra API UTC
+					const data = (await response.json()) as { unixtime?: number; unixTime?: number; unixtimestamp?: number };
+					// Tentar diferentes formatos de resposta
+					if (data.unixtime) {
+						serverTime = data.unixtime * 1000; // Converter segundos para milissegundos
+					} else if (data.unixTime) {
+						serverTime = data.unixTime * 1000;
+					} else if (data.unixtimestamp) {
+						serverTime = data.unixtimestamp * 1000;
+					} else {
+						throw new Error('Formato de resposta não reconhecido');
+					}
+				} catch (error) {
+					// Se falhar, tentar APIs genéricas como fallback
+					throw new Error(`Falha ao usar servidor configurado: ${error}`);
+				}
+			} else {
+				// Para servidores NTP tradicionais (sem HTTP), usar APIs genéricas que retornam UTC
+				// Não usar worldtimeapi.org hardcoded - usar timeapi.io como primeira opção
+				try {
 					const response = await fetch('https://timeapi.io/api/Time/current/zone?timeZone=UTC');
 					if (!response.ok) {
-						throw new Error('Falha ao obter tempo do servidor');
+						throw new Error('Falha ao obter tempo');
 					}
 					const data = (await response.json()) as { unixTime: number };
 					serverTime = data.unixTime * 1000;
-				}
-			} else if (servidorNTP.includes('time.windows.com') || servidorNTP.includes('windows')) {
-				// Windows NTP - usar API que retorna UTC
-				const response = await fetch('https://worldtimeapi.org/api/timezone/Etc/UTC');
-				if (!response.ok) {
-					throw new Error('Falha ao obter tempo do servidor');
-				}
-				const data = (await response.json()) as { unixtime: number };
-				serverTime = data.unixtime * 1000;
-			} else {
-				// Para outros servidores NTP, usar API genérica que retorna UTC
-				// Tentar worldtimeapi primeiro
-				try {
-					const response = await fetch('https://worldtimeapi.org/api/timezone/Etc/UTC');
-					if (!response.ok) {
-						throw new Error('Falha ao obter tempo');
-					}
-					const data = (await response.json()) as { unixtime: number };
-					serverTime = data.unixtime * 1000;
 				} catch {
-					// Fallback para timeapi.io
-					try {
-						const response = await fetch('https://timeapi.io/api/Time/current/zone?timeZone=UTC');
-						if (!response.ok) {
-							throw new Error('Falha ao obter tempo');
-						}
-						const data = (await response.json()) as { unixTime: number };
-						serverTime = data.unixTime * 1000;
-					} catch {
-						// Último fallback: usar tempo do servidor Convex (já está em UTC)
-						serverTime = Date.now();
-					}
+					// Fallback: usar tempo do servidor Convex (já está em UTC)
+					// Não usar worldtimeapi.org como fallback automático
+					serverTime = Date.now();
 				}
 			}
 
@@ -234,7 +274,7 @@ export const sincronizarTempo = action({
 		} catch (error) {
 			// Sempre usar fallback como última opção, mesmo se desabilitado
 			// Isso evita que o sistema trave completamente se o servidor externo não estiver disponível
-			const aviso = config.fallbackParaPC
+			const aviso: string = config.fallbackParaPC
 				? 'Falha ao sincronizar com servidor externo, usando relógio do PC'
 				: 'Falha ao sincronizar com servidor externo. Fallback desabilitado, mas usando relógio do PC como última opção.';
 			
diff --git a/packages/backend/convex/pontos.ts b/packages/backend/convex/pontos.ts
index 36299b6..0c79c80 100644
--- a/packages/backend/convex/pontos.ts
+++ b/packages/backend/convex/pontos.ts
@@ -223,6 +223,92 @@ async function validarLocalizacao(
 	};
 }
 
+/**
+ * Valida dados de acelerômetro para detectar autenticidade do registro
+ * Retorna informações de validação sem bloquear o registro
+ */
+function validarAcelerometro(
+	isDesktop: boolean | undefined,
+	sensorDisponivel: boolean | undefined,
+	permissaoSensorNegada: boolean | undefined,
+	acelerometroX: number | undefined,
+	acelerometroY: number | undefined,
+	acelerometroZ: number | undefined,
+	movimentoDetectado: boolean | undefined,
+	magnitudeMovimento: number | undefined,
+	variacaoAcelerometro: number | undefined
+): {
+	valida: boolean;
+	motivo?: string;
+	scoreConfianca: number; // 0-1
+	avisos: string[];
+} {
+	const avisos: string[] = [];
+	let scoreConfianca = 1.0;
+
+	// Se for desktop, ausência de sensor não é suspeito
+	if (isDesktop === true) {
+		if (sensorDisponivel === false || !acelerometroX) {
+			// Desktop não tem sensor - isso é normal, não reduzir confiança
+			return {
+				valida: true,
+				scoreConfianca: 1.0,
+				avisos: []
+			};
+		}
+	}
+
+	// Se permissão foi negada, apenas reduzir score de confiança (não bloqueia registro)
+	if (permissaoSensorNegada === true) {
+		scoreConfianca *= 0.9;
+		avisos.push('Permissão de sensor negada pelo usuário (não bloqueia registro)');
+		// Continuar validação normalmente
+	}
+
+	// Se sensor não está disponível e não é desktop, pode ser suspeito (mas não bloqueia)
+	if (sensorDisponivel === false && isDesktop !== true) {
+		scoreConfianca *= 0.8;
+		avisos.push('Sensor de movimento não disponível no dispositivo móvel');
+	}
+
+	// Se sensor está disponível mas não há dados, pode ser suspeito
+	if (sensorDisponivel === true && (!acelerometroX || !acelerometroY || !acelerometroZ)) {
+		scoreConfianca *= 0.7;
+		avisos.push('Sensor disponível mas dados de acelerômetro não coletados');
+	}
+
+	// Se há dados de acelerômetro, validar
+	if (acelerometroX !== undefined && acelerometroY !== undefined && acelerometroZ !== undefined) {
+		// Verificar se valores são realistas (aceleração geralmente entre -20 e +20 m/s² em uso normal)
+		const magnitude = magnitudeMovimento || Math.sqrt(acelerometroX * acelerometroX + acelerometroY * acelerometroY + acelerometroZ * acelerometroZ);
+		
+		if (magnitude > 50) {
+			// Aceleração muito alta pode indicar leitura errada ou emulador
+			scoreConfianca *= 0.6;
+			avisos.push(`Magnitude de movimento muito alta (${magnitude.toFixed(2)} m/s²). Pode indicar leitura incorreta.`);
+		}
+
+		// Se não há movimento detectado quando deveria haver (em móvel), pode ser suspeito
+		if (isDesktop !== true && movimentoDetectado === false && variacaoAcelerometro !== undefined && variacaoAcelerometro < 0.001) {
+			// Variância muito baixa pode indicar que o dispositivo está parado ou emulador
+			scoreConfianca *= 0.9;
+			avisos.push('Nenhum movimento detectado durante o registro. Pode ser normal se o dispositivo estava parado.');
+		}
+
+		// Se há movimento, aumenta confiança
+		if (movimentoDetectado === true) {
+			scoreConfianca = Math.min(scoreConfianca * 1.1, 1.0);
+		}
+	}
+
+	return {
+		valida: true, // Sempre retorna true - não bloqueia registro, apenas informa através do score
+		motivo: avisos.length > 0 ? avisos[0] : undefined,
+		scoreConfianca: Math.max(0, Math.min(1, scoreConfianca)),
+		avisos
+	};
+}
+
 /**
  * Gera URL para upload de imagem do ponto
  */
@@ -337,6 +423,27 @@ export const registrarPonto = mutation({
 				isDesktop: v.optional(v.boolean()),
 				connectionType: v.optional(v.string()),
 				memoryInfo: v.optional(v.string()),
+				// Campos de sensores (acelerômetro e giroscópio)
+				sensorDisponivel: v.optional(v.boolean()),
+				permissaoNegada: v.optional(v.boolean()),
+				acelerometro: v.optional(
+					v.object({
+						x: v.number(),
+						y: v.number(),
+						z: v.number(),
+						movimentoDetectado: v.boolean(),
+						magnitude: v.number(),
+						variacao: v.number(),
+						timestamp: v.number(),
+					})
+				),
+				giroscopio: v.optional(
+					v.object({
+						alpha: v.number(),
+						beta: v.number(),
+						gamma: v.number(),
+					})
+				),
 			})
 		),
 		timestamp: v.number(),
@@ -564,6 +671,39 @@ export const registrarPonto = mutation({
 			}
 		}
 
+		// Validar dados de acelerômetro (não bloqueia registro - apenas informa)
+		const validacaoAcelerometro = validarAcelerometro(
+			args.informacoesDispositivo?.isDesktop,
+			args.informacoesDispositivo?.sensorDisponivel,
+			args.informacoesDispositivo?.permissaoNegada,
+			args.informacoesDispositivo?.acelerometro?.x,
+			args.informacoesDispositivo?.acelerometro?.y,
+			args.informacoesDispositivo?.acelerometro?.z,
+			args.informacoesDispositivo?.acelerometro?.movimentoDetectado,
+			args.informacoesDispositivo?.acelerometro?.magnitude,
+			args.informacoesDispositivo?.acelerometro?.variacao
+		);
+
+		// Nota: A validação de acelerômetro não bloqueia o registro - apenas reduz o score de confiança
+		// Apenas câmera e localização são obrigatórias para registrar ponto
+
+		// Combinar avisos de validação de localização e acelerômetro
+		const todosAvisos = [
+			...(validacaoLocalizacao?.avisos || []),
+			...(validacaoAcelerometro.avisos || [])
+		];
+
+		// Combinar scores de confiança (média ponderada)
+		let scoreFinalConfianca = 1.0;
+		if (validacaoLocalizacao && validacaoAcelerometro) {
+			// GPS tem peso 0.7, acelerômetro tem peso 0.3
+			scoreFinalConfianca = (validacaoLocalizacao.scoreConfianca * 0.7) + (validacaoAcelerometro.scoreConfianca * 0.3);
+		} else if (validacaoLocalizacao) {
+			scoreFinalConfianca = validacaoLocalizacao.scoreConfianca;
+		} else if (validacaoAcelerometro) {
+			scoreFinalConfianca = validacaoAcelerometro.scoreConfianca;
+		}
+
 		// Criar registro
 		const registroId = await ctx.db.insert('registrosPonto', {
 			funcionarioId: usuario.funcionarioId,
@@ -597,11 +737,11 @@ export const registrarPonto = mutation({
 			heading: args.informacoesDispositivo?.heading,
 			speed: args.informacoesDispositivo?.speed,
 			confiabilidadeGPS: args.informacoesDispositivo?.confiabilidadeGPS,
-			scoreConfiancaBackend: validacaoLocalizacao?.scoreConfianca,
-			suspeitaSpoofing: args.informacoesDispositivo?.suspeitaSpoofing || (validacaoLocalizacao ? validacaoLocalizacao.scoreConfianca < 0.5 || !validacaoLocalizacao.valida : undefined),
-			motivoSuspeita: args.informacoesDispositivo?.motivoSuspeita || validacaoLocalizacao?.motivo || (validacaoLocalizacao && validacaoLocalizacao.avisos.length > 0 ? validacaoLocalizacao.avisos.join('; ') : undefined),
+			scoreConfiancaBackend: scoreFinalConfianca,
+			suspeitaSpoofing: args.informacoesDispositivo?.suspeitaSpoofing || (validacaoLocalizacao ? validacaoLocalizacao.scoreConfianca < 0.5 || !validacaoLocalizacao.valida : undefined) || (validacaoAcelerometro ? validacaoAcelerometro.scoreConfianca < 0.5 || !validacaoAcelerometro.valida : undefined),
+			motivoSuspeita: args.informacoesDispositivo?.motivoSuspeita || validacaoLocalizacao?.motivo || validacaoAcelerometro?.motivo || (todosAvisos.length > 0 ? todosAvisos.join('; ') : undefined),
 			// Informações detalhadas de validação (sempre salvar quando houver validação)
-			avisosValidacao: validacaoLocalizacao && validacaoLocalizacao.avisos.length > 0 ? validacaoLocalizacao.avisos : undefined,
+			avisosValidacao: todosAvisos.length > 0 ? todosAvisos : undefined,
 			// Informações de Geofencing
 			enderecoMarcacaoEsperado: validacaoGeofencing?.enderecoMaisProximo,
 			distanciaEnderecoEsperado: validacaoGeofencing?.distanciaMetros,
@@ -623,6 +763,18 @@ export const registrarPonto = mutation({
 			isDesktop: args.informacoesDispositivo?.isDesktop,
 			connectionType: args.informacoesDispositivo?.connectionType,
 			memoryInfo: args.informacoesDispositivo?.memoryInfo,
+			// Dados de sensores (Acelerômetro e Giroscópio)
+			acelerometroX: args.informacoesDispositivo?.acelerometro?.x,
+			acelerometroY: args.informacoesDispositivo?.acelerometro?.y,
+			acelerometroZ: args.informacoesDispositivo?.acelerometro?.z,
+			movimentoDetectado: args.informacoesDispositivo?.acelerometro?.movimentoDetectado,
+			magnitudeMovimento: args.informacoesDispositivo?.acelerometro?.magnitude,
+			variacaoAcelerometro: args.informacoesDispositivo?.acelerometro?.variacao,
+			giroscopioAlpha: args.informacoesDispositivo?.giroscopio?.alpha,
+			giroscopioBeta: args.informacoesDispositivo?.giroscopio?.beta,
+			giroscopioGamma: args.informacoesDispositivo?.giroscopio?.gamma,
+			sensorDisponivel: args.informacoesDispositivo?.sensorDisponivel,
+			permissaoSensorNegada: args.informacoesDispositivo?.permissaoNegada,
 			criadoEm: Date.now(),
 		});
 
diff --git a/packages/backend/convex/schema.ts b/packages/backend/convex/schema.ts
index 9e02da5..f1cfc70 100644
--- a/packages/backend/convex/schema.ts
+++ b/packages/backend/convex/schema.ts
@@ -1517,6 +1517,19 @@ export default defineSchema({
     connectionType: v.optional(v.string()),
     memoryInfo: v.optional(v.string()),
     
+    // Informações de Sensores (Acelerômetro e Giroscópio)
+    acelerometroX: v.optional(v.number()),
+    acelerometroY: v.optional(v.number()),
+    acelerometroZ: v.optional(v.number()),
+    movimentoDetectado: v.optional(v.boolean()),
+    magnitudeMovimento: v.optional(v.number()),
+    variacaoAcelerometro: v.optional(v.number()),
+    giroscopioAlpha: v.optional(v.number()),
+    giroscopioBeta: v.optional(v.number()),
+    giroscopioGamma: v.optional(v.number()),
+    sensorDisponivel: v.optional(v.boolean()),
+    permissaoSensorNegada: v.optional(v.boolean()),
+    
     // Justificativa opcional para o registro
     justificativa: v.optional(v.string()),
     

From 80fc8bc82cd2af7ec25126a0161800bf0354193f Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 20:55:03 -0300
Subject: [PATCH 3/9] feat: implement partial balance calculation and enhance
 UI for point registration

- Added a new function `calcularSaldosParciais` to compute partial balances between entry and exit records, returning a map of balances indexed by record.
- Improved the UI to display partial balances in the registro-pontos table, enhancing user visibility of time management.
- Updated the header section for better layout and information presentation regarding employee details.
---
 .../registro-pontos/+page.svelte              | 118 +++++++++++++++---
 1 file changed, 99 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index f663bdd..c3ee514 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -404,6 +404,70 @@
 	});
 
 	// Função para calcular saldo diário como diferença entre saída e entrada
+	/**
+	 * Calcula saldos parciais entre cada par entrada/saída
+	 * Retorna um mapa com o índice do registro e seu saldo parcial
+	 */
+	function calcularSaldosParciais(registros: Array<{ tipo: string; hora: number; minuto: number; _id?: any }>): Map<number, { saldoMinutos: number; horas: number; minutos: number; positivo: boolean; parNumero: number }> {
+		const saldos = new Map<number, { saldoMinutos: number; horas: number; minutos: number; positivo: boolean; parNumero: number }>();
+		if (registros.length === 0) return saldos;
+
+		// Criar array com índices originais
+		const registrosComIndice = registros.map((r, idx) => ({ ...r, originalIndex: idx }));
+		
+		// Ordenar registros por hora e minuto para processar em ordem cronológica
+		const registrosOrdenados = [...registrosComIndice].sort((a, b) => {
+			if (a.hora !== b.hora) {
+				return a.hora - b.hora;
+			}
+			return a.minuto - b.minuto;
+		});
+
+		// Identificar pares entrada/saída
+		// Par 1: entrada -> saida_almoco
+		// Par 2: retorno_almoco -> saida
+		let entradaAtual: typeof registrosComIndice[0] | null = null;
+		let parNumero = 1;
+
+		for (let i = 0; i < registrosOrdenados.length; i++) {
+			const registro = registrosOrdenados[i];
+			
+			// Considerar entrada ou retorno_almoco como início de um período
+			if (registro.tipo === 'entrada' || registro.tipo === 'retorno_almoco') {
+				entradaAtual = registro;
+			} else if (entradaAtual) {
+				// Qualquer saída (saida_almoco ou saida) fecha o período atual
+				if (registro.tipo === 'saida_almoco' || registro.tipo === 'saida') {
+					// Calcular diferença entre saída e entrada
+					const minutosEntrada = entradaAtual.hora * 60 + entradaAtual.minuto;
+					const minutosSaida = registro.hora * 60 + registro.minuto;
+					
+					let saldoMinutos = minutosSaida - minutosEntrada;
+					if (saldoMinutos < 0) {
+						saldoMinutos += 24 * 60; // Adicionar um dia em minutos
+					}
+
+					const horas = Math.floor(saldoMinutos / 60);
+					const minutos = saldoMinutos % 60;
+
+					// Salvar saldo no índice original do registro de saída
+					saldos.set(registro.originalIndex, {
+						saldoMinutos,
+						horas,
+						minutos,
+						positivo: true,
+						parNumero
+					});
+
+					entradaAtual = null; // Resetar para próximo par
+					parNumero++;
+				}
+			}
+		}
+
+		return saldos;
+	}
+
 	function calcularSaldoDiario(registros: Array<{ tipo: string; hora: number; minuto: number }>): { saldoMinutos: number; horas: number; minutos: number; positivo: boolean } | null {
 		if (registros.length === 0) return null;
 
@@ -2173,27 +2237,31 @@
 					{#each registrosAgrupados as grupo}
 						<div class="card bg-gradient-to-br from-base-100 to-base-200/50 border border-base-300 shadow-lg hover:shadow-xl transition-all duration-300">
 							<div class="card-body p-6">
-								<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 mb-6">
-									<div class="flex-1">
-										<div class="flex items-center gap-3 mb-2">
-											<div class="p-2 bg-primary/10 rounded-lg">
-												<Users class="h-5 w-5 text-primary" strokeWidth={2.5} />
+								<!-- Cabeçalho melhorado -->
+								<div class="mb-6 pb-4 border-b border-base-300">
+									<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
+										<div class="flex-1">
+											<div class="flex items-center gap-3 mb-3">
+												<div class="p-2 bg-primary/10 rounded-lg">
+													<Users class="h-5 w-5 text-primary" strokeWidth={2.5} />
+												</div>
+												<div>
+													<h3 class="font-bold text-xl text-base-content">
+														{grupo.funcionario?.nome || 'Funcionário não encontrado'}
+													</h3>
+													{#if grupo.funcionario?.matricula}
+														<p class="text-sm text-base-content/70 mt-1">
+															Matrícula: <span class="font-semibold">{grupo.funcionario.matricula}</span>
+														</p>
+													{/if}
+												</div>
 											</div>
-											<h3 class="font-bold text-xl text-base-content">
-												{grupo.funcionario?.nome || 'Funcionário não encontrado'}
-											</h3>
+											{#if grupo.funcionario?.descricaoCargo}
+												<p class="text-sm text-base-content/60 ml-11">
+													{grupo.funcionario.descricaoCargo}
+												</p>
+											{/if}
 										</div>
-										{#if grupo.funcionario?.matricula}
-											<p class="text-sm text-base-content/70 ml-11">
-												Matrícula: <span class="font-semibold">{grupo.funcionario.matricula}</span>
-											</p>
-										{/if}
-										{#if grupo.funcionario?.descricaoCargo}
-											<p class="text-sm text-base-content/60 ml-11">
-												{grupo.funcionario.descricaoCargo}
-											</p>
-										{/if}
-									</div>
 									
 									<div class="flex items-center gap-3 flex-wrap">
 										<!-- Banco de Horas -->
@@ -2244,6 +2312,7 @@
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Data</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Tipo</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Horário</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Saldo Parcial</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Saldo Diário</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Localização</th>
 												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Status</th>
@@ -2254,7 +2323,9 @@
 											{#each Object.values(grupo.registrosPorData) as grupoData}
 												{@const totalRegistros = grupoData.registros.length}
 												{@const dataFormatada = formatarDataDDMMAAAA(grupoData.data)}
+												{@const saldosParciais = calcularSaldosParciais(grupoData.registros)}
 												{#each grupoData.registros as registro, index}
+													{@const saldoParcial = saldosParciais.get(index)}
 													<tr>
 														<td class="whitespace-nowrap">{dataFormatada}</td>
 														<td class="whitespace-nowrap">
@@ -2268,6 +2339,15 @@
 																: getTipoRegistroLabel(registro.tipo)}
 														</td>
 														<td class="whitespace-nowrap">{formatarHoraPonto(registro.hora, registro.minuto)}</td>
+														<td class="whitespace-nowrap">
+															{#if saldoParcial}
+																<span class="badge badge-info badge-sm font-semibold">
+																	Par {saldoParcial.parNumero}: +{saldoParcial.horas}h {saldoParcial.minutos}min
+																</span>
+															{:else}
+																<span class="text-base-content/40">-</span>
+															{/if}
+														</td>
 														{#if index === 0}
 															<td class="whitespace-nowrap" rowspan={totalRegistros}>
 																<SaldoDiarioBadge saldo={grupoData.saldoDiario} size="md" />

From dc799504f6411ab4d31c43ca378287d842352322 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 20:58:12 -0300
Subject: [PATCH 4/9] fix: correct layout issue in registro-pontos page

- Added a missing closing div tag to ensure proper structure and rendering of the UI elements in the registro-pontos page.
---
 .../(dashboard)/recursos-humanos/registro-pontos/+page.svelte    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index c3ee514..9778a74 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -2303,6 +2303,7 @@
 											Imprimir Ficha
 										</button>
 									</div>
+									</div>
 								</div>
 
 								<div class="overflow-x-auto max-h-[600px] overflow-y-auto border border-base-300 rounded-xl shadow-inner bg-base-100/50">

From 58ac3a4f1b700dce8a721bdd1f26264b73e93ce2 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 21:01:27 -0300
Subject: [PATCH 5/9] feat: implement user authentication checks for queries in
 registro-pontos page

- Added authentication verification to conditionally execute queries for fetching employees, point records, statistics, and configuration settings based on user authentication status.
- Introduced a derived variable to manage the authenticated state of the user, enhancing security and ensuring that data is only accessible to logged-in users.
---
 .../registro-pontos/+page.svelte              | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 9778a74..7567fc1 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -33,6 +33,10 @@
 	let chartCanvas: HTMLCanvasElement;
 	let chartInstance: Chart | null = null;
 
+	// Verificar autenticação primeiro
+	const currentUserQuery = useQuery(api.auth.getCurrentUser, {});
+	const usuarioAutenticado = $derived(currentUserQuery?.data !== null && currentUserQuery?.data !== undefined);
+
 	// Parâmetros reativos para queries
 	const registrosParams = $derived({
 		funcionarioId: funcionarioIdFiltro && funcionarioIdFiltro !== '' ? funcionarioIdFiltro : undefined,
@@ -45,11 +49,23 @@
 		funcionarioId: funcionarioIdFiltro && funcionarioIdFiltro !== '' ? funcionarioIdFiltro : undefined,
 	});
 
-	// Queries
-	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
-	const registrosQuery = useQuery(api.pontos.listarRegistrosPeriodo, registrosParams);
-	const estatisticasQuery = useQuery(api.pontos.obterEstatisticas, estatisticasParams);
-	const configQuery = useQuery(api.configuracaoPonto.obterConfiguracao, {});
+	// Queries condicionais - só executar se usuário estiver autenticado
+	const funcionariosQuery = useQuery(
+		api.funcionarios.getAll,
+		usuarioAutenticado ? {} : 'skip'
+	);
+	const registrosQuery = useQuery(
+		api.pontos.listarRegistrosPeriodo,
+		usuarioAutenticado ? registrosParams : 'skip'
+	);
+	const estatisticasQuery = useQuery(
+		api.pontos.obterEstatisticas,
+		usuarioAutenticado ? estatisticasParams : 'skip'
+	);
+	const configQuery = useQuery(
+		api.configuracaoPonto.obterConfiguracao,
+		usuarioAutenticado ? {} : 'skip'
+	);
 
 	const funcionarios = $derived(funcionariosQuery?.data || []);
 	const registros = $derived(registrosQuery?.data || []);

From 37d7318d5aa9c405ecd06b19e0aaa08843a53b74 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 22:05:52 -0300
Subject: [PATCH 6/9] feat: implement theme customization and user preferences

- Added support for user-selected themes, allowing users to customize the appearance of the application.
- Introduced a new `temaPreferido` field in the user schema to store the preferred theme.
- Updated various components to apply the selected theme dynamically based on user preferences.
- Enhanced the UI to include a theme selection interface, enabling users to preview and save their theme choices.
- Implemented a polyfill for BlobBuilder to ensure compatibility across browsers, improving the functionality of the application.
---
 RELATORIO_TESTES_TEMAS.md                     | 117 +++++++
 VALIDACAO_TEMAS.md                            |  89 +++++
 apps/web/src/app.css                          | 314 ++++++++++++++++++
 apps/web/src/app.html                         | 131 ++++++--
 apps/web/src/lib/components/Sidebar.svelte    |   3 +
 .../src/lib/components/call/CallWindow.svelte |  78 +++--
 apps/web/src/lib/utils/temas.ts               | 194 +++++++++++
 .../routes/(dashboard)/perfil/+page.svelte    | 215 +++++++++++-
 .../registro-pontos/+page.svelte              |  26 +-
 apps/web/src/routes/+layout.svelte            |  28 ++
 packages/backend/convex/schema.ts             |   1 +
 packages/backend/convex/usuarios.ts           |  27 +-
 12 files changed, 1149 insertions(+), 74 deletions(-)
 create mode 100644 RELATORIO_TESTES_TEMAS.md
 create mode 100644 VALIDACAO_TEMAS.md
 create mode 100644 apps/web/src/lib/utils/temas.ts

diff --git a/RELATORIO_TESTES_TEMAS.md b/RELATORIO_TESTES_TEMAS.md
new file mode 100644
index 0000000..6b22f29
--- /dev/null
+++ b/RELATORIO_TESTES_TEMAS.md
@@ -0,0 +1,117 @@
+# Relatório de Testes - Sistema de Temas Personalizados
+
+## Data: 2025-01-27
+
+## Resumo Executivo
+Foram testados todos os 10 temas disponíveis no sistema SGSE através da aba "Aparência" na página de perfil. Cada tema foi selecionado e validado visualmente através de screenshots.
+
+## Temas Testados
+
+### 1. ✅ Tema Roxo (Purple)
+- **Status**: Funcionando
+- **Descrição**: Tema padrão com cores roxa e azul
+- **Screenshot**: `tema-roxo.png`
+- **Observações**: Tema aplicado corretamente, interface exibe cores roxas/azuis
+
+### 2. ✅ Tema Azul (Blue)
+- **Status**: Funcionando
+- **Descrição**: Tema azul clássico e profissional
+- **Screenshot**: `tema-azul.png`
+- **Observações**: Tema aplicado corretamente, interface exibe tons de azul
+
+### 3. ✅ Tema Verde (Green)
+- **Status**: Funcionando
+- **Descrição**: Tema verde natural e harmonioso
+- **Screenshot**: `tema-verde.png`
+- **Observações**: Tema aplicado corretamente, interface exibe tons de verde
+
+### 4. ✅ Tema Laranja (Orange)
+- **Status**: Funcionando
+- **Descrição**: Tema laranja vibrante e energético
+- **Screenshot**: `tema-laranja.png`
+- **Observações**: Tema aplicado corretamente, interface exibe tons de laranja
+
+### 5. ✅ Tema Vermelho (Red)
+- **Status**: Funcionando
+- **Descrição**: Tema vermelho intenso e impactante
+- **Screenshot**: `tema-vermelho.png`
+- **Observações**: Tema aplicado corretamente, interface exibe tons de vermelho
+
+### 6. ✅ Tema Rosa (Pink)
+- **Status**: Funcionando
+- **Descrição**: Tema rosa suave e elegante
+- **Screenshot**: `tema-rosa.png`
+- **Observações**: Tema aplicado corretamente, interface exibe tons de rosa
+
+### 7. ✅ Tema Verde-água (Teal)
+- **Status**: Funcionando
+- **Descrição**: Tema verde-água refrescante
+- **Screenshot**: `tema-verde-agua.png`
+- **Observações**: Tema aplicado corretamente, interface exibe tons de verde-água
+
+### 8. ✅ Tema Escuro (Dark)
+- **Status**: Funcionando
+- **Descrição**: Tema escuro para uso noturno
+- **Screenshot**: `tema-escuro.png`
+- **Observações**: Tema aplicado corretamente, interface exibe fundo escuro
+
+### 9. ✅ Tema Claro (Light)
+- **Status**: Funcionando
+- **Descrição**: Tema claro e minimalista
+- **Screenshot**: `tema-claro.png`
+- **Observações**: Tema aplicado corretamente, interface exibe fundo claro
+
+### 10. ✅ Tema Corporativo (Corporate)
+- **Status**: Funcionando
+- **Descrição**: Tema corporativo azul escuro
+- **Screenshot**: `tema-corporativo.png`
+- **Observações**: Tema aplicado corretamente, interface exibe tons corporativos
+
+## Funcionalidades Testadas
+
+### ✅ Seleção de Temas
+- Todos os 10 temas podem ser selecionados através dos botões na interface
+- A seleção é visualmente indicada com "Tema Ativo"
+- A mudança de tema é aplicada imediatamente na interface
+
+### ✅ Interface de Seleção
+- A aba "Aparência" está acessível na página de perfil
+- Todos os 10 temas são exibidos em cards com preview visual
+- Cada card mostra o nome, descrição e um gradiente de cores representativo
+
+### ✅ Aplicação de Temas
+- Os temas são aplicados dinamicamente ao elemento `<html>` via atributo `data-theme`
+- As cores são alteradas em toda a interface (sidebar, header, botões, etc.)
+- A mudança é instantânea, sem necessidade de recarregar a página
+
+## Screenshots Capturados
+
+Todos os screenshots foram salvos com os seguintes nomes:
+- `tema-verde-agua-atual.png` - Estado inicial (tema verde-água)
+- `tema-roxo.png`
+- `tema-azul.png`
+- `tema-verde.png`
+- `tema-laranja.png`
+- `tema-vermelho.png`
+- `tema-rosa.png`
+- `tema-verde-agua.png`
+- `tema-escuro.png`
+- `tema-claro.png`
+- `tema-corporativo.png`
+
+## Conclusão
+
+✅ **Todos os 10 temas estão funcionando corretamente!**
+
+- Cada tema altera a aparência da interface conforme esperado
+- As cores são aplicadas consistentemente em todos os componentes
+- A seleção de temas funciona de forma intuitiva e responsiva
+- O sistema está pronto para uso em produção
+
+## Próximos Passos Recomendados
+
+1. Testar a persistência do tema salvo no banco de dados
+2. Validar que o tema é aplicado automaticamente ao fazer login
+3. Verificar que o tema padrão (roxo) é aplicado ao fazer logout
+4. Testar com diferentes usuários para garantir isolamento de preferências
+
diff --git a/VALIDACAO_TEMAS.md b/VALIDACAO_TEMAS.md
new file mode 100644
index 0000000..9e4d418
--- /dev/null
+++ b/VALIDACAO_TEMAS.md
@@ -0,0 +1,89 @@
+# Validação e Correções do Sistema de Temas
+
+## Correções Implementadas
+
+### 1. Temas Customizados Melhorados
+- Adicionadas todas as variáveis CSS necessárias do DaisyUI para cada tema customizado
+- Incluídas variáveis de arredondamento, animação e bordas
+- Adicionado `color-scheme` para temas claros/escuros
+
+### 2. Estrutura Padronizada
+- Todos os temas customizados seguem o mesmo padrão de variáveis CSS
+- Temas nativos do DaisyUI (purple/aqua, dark, light) mantidos
+- Temas customizados (sgse-blue, sgse-green, etc.) com variáveis completas
+
+### 3. Aplicação de Temas
+- Função `aplicarTema()` atualizada para aplicar corretamente no elemento HTML
+- Removido localStorage - tema salvo apenas no banco de dados
+- Tema padrão aplicado ao fazer logout
+
+## Como Testar Manualmente
+
+1. **Fazer Login:**
+   - Email: `dfw@poli.br` / Senha: `Admin@2025`
+   - OU Email: `kilder@kilder.com.br` / Senha: `Mudar@123`
+
+2. **Acessar Página de Perfil:**
+   - Clique no avatar do usuário no canto superior direito
+   - Selecione "Meu Perfil"
+   - OU acesse diretamente: `/perfil`
+
+3. **Testar Cada Tema:**
+   - Clique na aba "Aparência"
+   - Teste cada um dos 10 temas:
+     - **Roxo** (purple/aqua) - Padrão
+     - **Azul** (sgse-blue)
+     - **Verde** (sgse-green)
+     - **Laranja** (sgse-orange)
+     - **Vermelho** (sgse-red)
+     - **Rosa** (sgse-pink)
+     - **Verde-água** (sgse-teal)
+     - **Escuro** (dark)
+     - **Claro** (light)
+     - **Corporativo** (sgse-corporate)
+
+4. **Validar Mudanças:**
+   - Ao clicar em um tema, a interface deve mudar imediatamente
+   - Verificar cores em:
+     - Sidebar
+     - Botões
+     - Cards
+     - Badges
+     - Links
+     - Backgrounds
+
+5. **Salvar Tema:**
+   - Clique em "Salvar Tema" após selecionar
+   - Faça logout e login novamente
+   - O tema salvo deve ser aplicado automaticamente
+
+6. **Testar Logout:**
+   - Ao fazer logout, o tema deve voltar ao padrão (roxo)
+
+## Problemas Identificados e Corrigidos
+
+1. ✅ Variáveis CSS incompletas nos temas customizados
+2. ✅ Falta de `color-scheme` nos temas
+3. ✅ localStorage removido (tema apenas no banco)
+4. ✅ Tema padrão aplicado ao logout
+5. ✅ Estrutura padronizada de todos os temas
+
+## Próximos Passos para Validação
+
+Se algum tema não estiver funcionando:
+
+1. Verificar no console do navegador (F12) se há erros
+2. Verificar o atributo `data-theme` no elemento `<html>` (deve mudar ao selecionar tema)
+3. Verificar se as variáveis CSS estão sendo aplicadas (DevTools > Elements > Computed)
+4. Testar em modo anônimo para garantir que não há cache
+
+## Arquivos Modificados
+
+- `apps/web/src/app.css` - Temas customizados melhorados
+- `apps/web/src/lib/utils/temas.ts` - Funções de aplicação de temas
+- `apps/web/src/routes/+layout.svelte` - Aplicação automática do tema
+- `apps/web/src/routes/(dashboard)/perfil/+page.svelte` - Interface de seleção
+- `apps/web/src/lib/components/Sidebar.svelte` - Reset de tema no logout
+- `packages/backend/convex/schema.ts` - Campo temaPreferido
+- `packages/backend/convex/usuarios.ts` - Função atualizarTema
+
diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index a436e88..cacf989 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -74,4 +74,318 @@
 :where(.card, .card-hover) > * {
   position: relative;
   z-index: 2;
+}
+
+/* Tema Aqua (padrão roxo/azul) - customizado para garantir funcionamento */
+html[data-theme="aqua"],
+html[data-theme="aqua"] body,
+[data-theme="aqua"] {
+  color-scheme: light;
+  --p: 217 91% 60%;
+  --pf: 217 91% 50%;
+  --pc: 0 0% 100%;
+  --s: 217 91% 60%;
+  --sf: 217 91% 50%;
+  --sc: 0 0% 100%;
+  --a: 217 91% 60%;
+  --af: 217 91% 50%;
+  --ac: 0 0% 100%;
+  --n: 217 20% 17%;
+  --nf: 217 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 217 20% 95%;
+  --b3: 217 20% 90%;
+  --bc: 217 20% 17%;
+  --in: 217 91% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+/* Temas customizados para SGSE - Azul */
+html[data-theme="sgse-blue"],
+html[data-theme="sgse-blue"] body,
+[data-theme="sgse-blue"] {
+  color-scheme: light;
+  --p: 217 91% 60%;
+  --pf: 217 91% 50%;
+  --pc: 0 0% 100%;
+  --s: 217 91% 60%;
+  --sf: 217 91% 50%;
+  --sc: 0 0% 100%;
+  --a: 217 91% 60%;
+  --af: 217 91% 50%;
+  --ac: 0 0% 100%;
+  --n: 217 20% 17%;
+  --nf: 217 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 217 20% 95%;
+  --b3: 217 20% 90%;
+  --bc: 217 20% 17%;
+  --in: 217 91% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+html[data-theme="sgse-green"],
+html[data-theme="sgse-green"] body,
+[data-theme="sgse-green"] {
+  color-scheme: light;
+  --p: 142 76% 36%;
+  --pf: 142 76% 26%;
+  --pc: 0 0% 100%;
+  --s: 142 76% 36%;
+  --sf: 142 76% 26%;
+  --sc: 0 0% 100%;
+  --a: 142 76% 36%;
+  --af: 142 76% 26%;
+  --ac: 0 0% 100%;
+  --n: 142 20% 17%;
+  --nf: 142 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 142 20% 95%;
+  --b3: 142 20% 90%;
+  --bc: 142 20% 17%;
+  --in: 142 76% 36%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+html[data-theme="sgse-orange"],
+html[data-theme="sgse-orange"] body,
+[data-theme="sgse-orange"] {
+  color-scheme: light;
+  --p: 25 95% 53%;
+  --pf: 25 95% 43%;
+  --pc: 0 0% 100%;
+  --s: 25 95% 53%;
+  --sf: 25 95% 43%;
+  --sc: 0 0% 100%;
+  --a: 25 95% 53%;
+  --af: 25 95% 43%;
+  --ac: 0 0% 100%;
+  --n: 25 20% 17%;
+  --nf: 25 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 25 20% 95%;
+  --b3: 25 20% 90%;
+  --bc: 25 20% 17%;
+  --in: 25 95% 53%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+html[data-theme="sgse-red"],
+html[data-theme="sgse-red"] body,
+[data-theme="sgse-red"] {
+  color-scheme: light;
+  --p: 0 84% 60%;
+  --pf: 0 84% 50%;
+  --pc: 0 0% 100%;
+  --s: 0 84% 60%;
+  --sf: 0 84% 50%;
+  --sc: 0 0% 100%;
+  --a: 0 84% 60%;
+  --af: 0 84% 50%;
+  --ac: 0 0% 100%;
+  --n: 0 20% 17%;
+  --nf: 0 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 0 20% 95%;
+  --b3: 0 20% 90%;
+  --bc: 0 20% 17%;
+  --in: 0 84% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+html[data-theme="sgse-pink"],
+html[data-theme="sgse-pink"] body,
+[data-theme="sgse-pink"] {
+  color-scheme: light;
+  --p: 330 81% 60%;
+  --pf: 330 81% 50%;
+  --pc: 0 0% 100%;
+  --s: 330 81% 60%;
+  --sf: 330 81% 50%;
+  --sc: 0 0% 100%;
+  --a: 330 81% 60%;
+  --af: 330 81% 50%;
+  --ac: 0 0% 100%;
+  --n: 330 20% 17%;
+  --nf: 330 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 330 20% 95%;
+  --b3: 330 20% 90%;
+  --bc: 330 20% 17%;
+  --in: 330 81% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+html[data-theme="sgse-teal"],
+html[data-theme="sgse-teal"] body,
+[data-theme="sgse-teal"] {
+  color-scheme: light;
+  --p: 173 80% 40%;
+  --pf: 173 80% 30%;
+  --pc: 0 0% 100%;
+  --s: 173 80% 40%;
+  --sf: 173 80% 30%;
+  --sc: 0 0% 100%;
+  --a: 173 80% 40%;
+  --af: 173 80% 30%;
+  --ac: 0 0% 100%;
+  --n: 173 20% 17%;
+  --nf: 173 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 173 20% 95%;
+  --b3: 173 20% 90%;
+  --bc: 173 20% 17%;
+  --in: 173 80% 40%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+html[data-theme="sgse-corporate"],
+html[data-theme="sgse-corporate"] body,
+[data-theme="sgse-corporate"] {
+  color-scheme: dark;
+  --p: 217 91% 60%;
+  --pf: 217 91% 50%;
+  --pc: 0 0% 100%;
+  --s: 217 91% 60%;
+  --sf: 217 91% 50%;
+  --sc: 0 0% 100%;
+  --a: 217 91% 60%;
+  --af: 217 91% 50%;
+  --ac: 0 0% 100%;
+  --n: 217 30% 15%;
+  --nf: 217 30% 8%;
+  --nc: 0 0% 100%;
+  --b1: 217 30% 10%;
+  --b2: 217 30% 15%;
+  --b3: 217 30% 20%;
+  --bc: 217 10% 90%;
+  --in: 217 91% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
 }
\ No newline at end of file
diff --git a/apps/web/src/app.html b/apps/web/src/app.html
index b66466c..7732350 100644
--- a/apps/web/src/app.html
+++ b/apps/web/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="aqua">
+<html lang="en" id="html-theme">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@@ -10,43 +10,112 @@
 		<script>
 			// Executar IMEDIATAMENTE, de forma síncrona e bloqueante
 			// Não usar IIFE assíncrona, executar direto no escopo global
-			if (typeof window !== 'undefined') {
-				// Verificar se já foi adicionado
-				if (!window.__blobBuilderPolyfillAdded) {
-					// Implementar BlobBuilder usando Blob moderno
-					function BlobBuilder() {
-						this.parts = [];
+			(function() {
+				'use strict';
+				
+				// Implementar BlobBuilder usando Blob moderno
+				function BlobBuilderPolyfill() {
+					if (!(this instanceof BlobBuilderPolyfill)) {
+						return new BlobBuilderPolyfill();
 					}
-					BlobBuilder.prototype.append = function(data) {
+					this.parts = [];
+				}
+				
+				BlobBuilderPolyfill.prototype.append = function(data) {
+					if (data instanceof Blob) {
 						this.parts.push(data);
-					};
-					BlobBuilder.prototype.getBlob = function(contentType) {
-						return new Blob(this.parts, contentType ? { type: contentType } : undefined);
-					};
-					
-					// Adicionar em TODOS os locais possíveis, SEM verificação
-					// (sobrescrever se necessário para garantir que esteja disponível)
-					window.BlobBuilder = BlobBuilder;
-					window.WebKitBlobBuilder = BlobBuilder;
-					window.MozBlobBuilder = BlobBuilder;
-					window.MSBlobBuilder = BlobBuilder;
-					
-					// Adicionar no globalThis também
-					if (typeof globalThis !== 'undefined') {
-						globalThis.BlobBuilder = BlobBuilder;
-						globalThis.WebKitBlobBuilder = BlobBuilder;
-						globalThis.MozBlobBuilder = BlobBuilder;
+					} else if (typeof data === 'string') {
+						this.parts.push(data);
+					} else {
+						this.parts.push(new Blob([data]));
+					}
+				};
+				
+				BlobBuilderPolyfill.prototype.getBlob = function(contentType) {
+					return new Blob(this.parts, contentType ? { type: contentType } : undefined);
+				};
+				
+				// Função para aplicar o polyfill em todos os contextos possíveis
+				function aplicarPolyfillBlobBuilder() {
+					// Aplicar no window (se disponível)
+					if (typeof window !== 'undefined') {
+						if (!window.BlobBuilder) {
+							window.BlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!window.WebKitBlobBuilder) {
+							window.WebKitBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!window.MozBlobBuilder) {
+							window.MozBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!window.MSBlobBuilder) {
+							window.MSBlobBuilder = BlobBuilderPolyfill;
+						}
 					}
 					
-					// Marcar como adicionado
-					window.__blobBuilderPolyfillAdded = true;
+					// Aplicar no globalThis (se disponível)
+					if (typeof globalThis !== 'undefined') {
+						if (!globalThis.BlobBuilder) {
+							globalThis.BlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!globalThis.WebKitBlobBuilder) {
+							globalThis.WebKitBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!globalThis.MozBlobBuilder) {
+							globalThis.MozBlobBuilder = BlobBuilderPolyfill;
+						}
+					}
 					
-					// Log apenas se console está disponível
-					if (console && console.log) {
-						console.log('✅ Polyfill BlobBuilder adicionado globalmente (via app.html)');
+					// Aplicar no self (para workers)
+					if (typeof self !== 'undefined') {
+						if (!self.BlobBuilder) {
+							self.BlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!self.WebKitBlobBuilder) {
+							self.WebKitBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!self.MozBlobBuilder) {
+							self.MozBlobBuilder = BlobBuilderPolyfill;
+						}
+					}
+					
+					// Aplicar no global (Node.js)
+					if (typeof global !== 'undefined') {
+						if (!global.BlobBuilder) {
+							global.BlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!global.WebKitBlobBuilder) {
+							global.WebKitBlobBuilder = BlobBuilderPolyfill;
+						}
+						if (!global.MozBlobBuilder) {
+							global.MozBlobBuilder = BlobBuilderPolyfill;
+						}
 					}
 				}
-			}
+				
+				// Aplicar imediatamente
+				aplicarPolyfillBlobBuilder();
+				
+				// Aplicar também quando o DOM estiver pronto (caso window não esteja disponível ainda)
+				if (typeof document !== 'undefined' && document.readyState === 'loading') {
+					document.addEventListener('DOMContentLoaded', aplicarPolyfillBlobBuilder, { once: true });
+				}
+				
+				// Log apenas se console está disponível
+				if (typeof console !== 'undefined' && console.log) {
+					console.log('✅ Polyfill BlobBuilder adicionado globalmente (via app.html)');
+				}
+			})();
+			
+			// Aplicar tema padrão imediatamente se não houver tema definido
+			(function() {
+				if (typeof document !== 'undefined') {
+					var html = document.documentElement;
+					if (!html.getAttribute('data-theme')) {
+						html.setAttribute('data-theme', 'aqua');
+					}
+				}
+			})();
 		</script>
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index bc99b9f..0fc941d 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -147,6 +147,9 @@
 		if (result.error) {
 			console.error('Sign out error:', result.error);
 		}
+		// Resetar tema para padrão ao fazer logout
+		const { aplicarTemaPadrao } = await import('$lib/utils/temas');
+		aplicarTemaPadrao();
 		goto(resolve('/'));
 	}
 </script>
diff --git a/apps/web/src/lib/components/call/CallWindow.svelte b/apps/web/src/lib/components/call/CallWindow.svelte
index d13b9da..5580ec0 100644
--- a/apps/web/src/lib/components/call/CallWindow.svelte
+++ b/apps/web/src/lib/components/call/CallWindow.svelte
@@ -139,6 +139,60 @@
 		console.error(message, details);
 	}
 
+	// Garantir que BlobBuilder está disponível antes de importar lib-jitsi-meet
+	function garantirBlobBuilderPolyfill(): void {
+		if (!browser) return;
+		
+		const windowWithBlobBuilder = window as WindowWithBlobBuilder;
+		
+		// Verificar se já existe
+		if (
+			typeof windowWithBlobBuilder.BlobBuilder !== 'undefined' ||
+			typeof windowWithBlobBuilder.webkitBlobBuilder !== 'undefined' ||
+			typeof windowWithBlobBuilder.MozBlobBuilder !== 'undefined'
+		) {
+			return; // Já está disponível
+		}
+		
+		// Criar polyfill inline se não estiver disponível
+		console.log('🔧 Criando polyfill BlobBuilder inline...');
+		
+		function BlobBuilderPolyfill() {
+			if (!(this instanceof BlobBuilderPolyfill)) {
+				return new BlobBuilderPolyfill();
+			}
+			this.parts = [];
+		}
+		
+		BlobBuilderPolyfill.prototype.append = function(data: Blob | string) {
+			if (data instanceof Blob) {
+				this.parts.push(data);
+			} else if (typeof data === 'string') {
+				this.parts.push(data);
+			} else {
+				this.parts.push(new Blob([data]));
+			}
+		};
+		
+		BlobBuilderPolyfill.prototype.getBlob = function(contentType?: string) {
+			return new Blob(this.parts, contentType ? { type: contentType } : undefined);
+		};
+		
+		// Aplicar em todos os locais possíveis
+		(window as unknown as Record<string, unknown>).BlobBuilder = BlobBuilderPolyfill;
+		(window as unknown as Record<string, unknown>).WebKitBlobBuilder = BlobBuilderPolyfill;
+		(window as unknown as Record<string, unknown>).MozBlobBuilder = BlobBuilderPolyfill;
+		(window as unknown as Record<string, unknown>).MSBlobBuilder = BlobBuilderPolyfill;
+		
+		if (typeof globalThis !== 'undefined') {
+			(globalThis as unknown as Record<string, unknown>).BlobBuilder = BlobBuilderPolyfill;
+			(globalThis as unknown as Record<string, unknown>).WebKitBlobBuilder = BlobBuilderPolyfill;
+			(globalThis as unknown as Record<string, unknown>).MozBlobBuilder = BlobBuilderPolyfill;
+		}
+		
+		console.log('✅ Polyfill BlobBuilder aplicado inline');
+	}
+
 	// Carregar Jitsi dinamicamente
 	async function carregarJitsi(): Promise<void> {
 		if (!browser || JitsiMeetJS) return;
@@ -146,16 +200,8 @@
 		try {
 			console.log('🔄 Tentando carregar lib-jitsi-meet...');
 			
-			// Polyfill BlobBuilder já deve estar disponível via app.html
-			// Verificar se está disponível antes de carregar a biblioteca
-			const windowWithBlobBuilder = window as WindowWithBlobBuilder;
-			if (
-				typeof windowWithBlobBuilder.BlobBuilder === 'undefined' &&
-				typeof windowWithBlobBuilder.webkitBlobBuilder === 'undefined' &&
-				typeof windowWithBlobBuilder.MozBlobBuilder === 'undefined'
-			) {
-				console.warn('⚠️ Polyfill BlobBuilder não encontrado, pode causar erros');
-			}
+			// Garantir que BlobBuilder está disponível ANTES de importar
+			garantirBlobBuilderPolyfill();
 			
 			// Tentar carregar o módulo lib-jitsi-meet dinamicamente
 			// Usar import dinâmico para evitar problemas de SSR e permitir carregamento apenas no browser
@@ -1165,16 +1211,8 @@
 	onMount(async () => {
 		if (!browser) return;
 		
-		// Polyfill BlobBuilder já deve estar disponível via app.html
-		// Verificar se está disponível
-		const windowWithBlobBuilder = window as WindowWithBlobBuilder;
-		if (
-			typeof windowWithBlobBuilder.BlobBuilder === 'undefined' &&
-			typeof windowWithBlobBuilder.webkitBlobBuilder === 'undefined' &&
-			typeof windowWithBlobBuilder.MozBlobBuilder === 'undefined'
-		) {
-			console.warn('⚠️ Polyfill BlobBuilder não encontrado no onMount');
-		}
+		// Garantir que BlobBuilder está disponível antes de qualquer coisa
+		garantirBlobBuilderPolyfill();
 		
 		// Inicializar store primeiro
 		inicializarStore();
diff --git a/apps/web/src/lib/utils/temas.ts b/apps/web/src/lib/utils/temas.ts
new file mode 100644
index 0000000..4b7975e
--- /dev/null
+++ b/apps/web/src/lib/utils/temas.ts
@@ -0,0 +1,194 @@
+/**
+ * Utilitário para gerenciamento de temas personalizados do SGSE
+ */
+
+export type TemaId =
+	| 'purple'
+	| 'blue'
+	| 'green'
+	| 'orange'
+	| 'red'
+	| 'pink'
+	| 'teal'
+	| 'dark'
+	| 'light'
+	| 'corporate';
+
+export interface Tema {
+	id: TemaId;
+	nome: string;
+	descricao: string;
+	corPrimaria: string;
+	corSecundaria: string;
+	corGradiente: string;
+}
+
+/**
+ * Lista de temas disponíveis
+ */
+export const temasDisponiveis: Tema[] = [
+	{
+		id: 'purple',
+		nome: 'Roxo',
+		descricao: 'Tema padrão com cores roxas e azuis',
+		corPrimaria: '#764ba2',
+		corSecundaria: '#667eea',
+		corGradiente: 'from-purple-600 via-blue-600 to-indigo-700'
+	},
+	{
+		id: 'blue',
+		nome: 'Azul',
+		descricao: 'Tema azul clássico e profissional',
+		corPrimaria: '#2563eb',
+		corSecundaria: '#3b82f6',
+		corGradiente: 'from-blue-500 via-blue-600 to-blue-700'
+	},
+	{
+		id: 'green',
+		nome: 'Verde',
+		descricao: 'Tema verde natural e harmonioso',
+		corPrimaria: '#10b981',
+		corSecundaria: '#059669',
+		corGradiente: 'from-green-500 via-emerald-600 to-teal-700'
+	},
+	{
+		id: 'orange',
+		nome: 'Laranja',
+		descricao: 'Tema laranja vibrante e energético',
+		corPrimaria: '#f97316',
+		corSecundaria: '#ea580c',
+		corGradiente: 'from-orange-500 via-amber-600 to-orange-700'
+	},
+	{
+		id: 'red',
+		nome: 'Vermelho',
+		descricao: 'Tema vermelho intenso e impactante',
+		corPrimaria: '#ef4444',
+		corSecundaria: '#dc2626',
+		corGradiente: 'from-red-500 via-rose-600 to-red-700'
+	},
+	{
+		id: 'pink',
+		nome: 'Rosa',
+		descricao: 'Tema rosa suave e elegante',
+		corPrimaria: '#ec4899',
+		corSecundaria: '#db2777',
+		corGradiente: 'from-pink-500 via-rose-600 to-fuchsia-700'
+	},
+	{
+		id: 'teal',
+		nome: 'Verde-água',
+		descricao: 'Tema verde-água refrescante',
+		corPrimaria: '#14b8a6',
+		corSecundaria: '#0d9488',
+		corGradiente: 'from-teal-500 via-cyan-600 to-teal-700'
+	},
+	{
+		id: 'dark',
+		nome: 'Escuro',
+		descricao: 'Tema escuro para uso noturno',
+		corPrimaria: '#1e293b',
+		corSecundaria: '#0f172a',
+		corGradiente: 'from-slate-800 via-gray-900 to-slate-900'
+	},
+	{
+		id: 'light',
+		nome: 'Claro',
+		descricao: 'Tema claro e minimalista',
+		corPrimaria: '#f8fafc',
+		corSecundaria: '#e2e8f0',
+		corGradiente: 'from-gray-100 via-slate-200 to-gray-300'
+	},
+	{
+		id: 'corporate',
+		nome: 'Corporativo',
+		descricao: 'Tema corporativo azul escuro',
+		corPrimaria: '#1e40af',
+		corSecundaria: '#1e3a8a',
+		corGradiente: 'from-blue-800 via-indigo-900 to-blue-900'
+	}
+];
+
+/**
+ * Mapeamento de temas para nomes do DaisyUI
+ * Usamos temas nativos do DaisyUI quando disponíveis, ou temas customizados SGSE
+ */
+export const temaParaDaisyUI: Record<TemaId, string> = {
+	purple: 'aqua', // Tema padrão atual (roxo/azul) - nativo DaisyUI
+	blue: 'sgse-blue', // Azul - customizado
+	green: 'sgse-green', // Verde - customizado
+	orange: 'sgse-orange', // Laranja - customizado
+	red: 'sgse-red', // Vermelho - customizado
+	pink: 'sgse-pink', // Rosa - customizado
+	teal: 'sgse-teal', // Verde-água - customizado
+	dark: 'dark', // Escuro - nativo DaisyUI
+	light: 'light', // Claro - nativo DaisyUI
+	corporate: 'sgse-corporate' // Corporativo - customizado
+};
+
+/**
+ * Obter tema por ID
+ */
+export function obterTema(id: TemaId | string | null | undefined): Tema | null {
+	if (!id) return null;
+	return temasDisponiveis.find((t) => t.id === id) || null;
+}
+
+/**
+ * Obter nome do tema DaisyUI correspondente
+ */
+export function obterNomeDaisyUI(id: TemaId | string | null | undefined): string {
+	if (!id) return 'aqua'; // Tema padrão
+	const tema = obterTema(id);
+	if (!tema) return 'aqua';
+	return temaParaDaisyUI[tema.id] || 'aqua';
+}
+
+/**
+ * Aplicar tema ao documento HTML
+ * NÃO salva no localStorage - apenas no banco de dados do usuário
+ */
+export function aplicarTema(temaId: TemaId | string | null | undefined): void {
+	if (typeof document === 'undefined') return;
+
+	const nomeDaisyUI = obterNomeDaisyUI(temaId || 'purple');
+	const htmlElement = document.documentElement;
+	const bodyElement = document.body;
+
+	if (htmlElement) {
+		// Remover todos os atributos data-theme existentes primeiro
+		htmlElement.removeAttribute('data-theme');
+		if (bodyElement) {
+			bodyElement.removeAttribute('data-theme');
+		}
+		
+		// Aplicar o novo tema
+		htmlElement.setAttribute('data-theme', nomeDaisyUI);
+		if (bodyElement) {
+			bodyElement.setAttribute('data-theme', nomeDaisyUI);
+		}
+		
+		// Forçar reflow para garantir que o CSS seja aplicado
+		void htmlElement.offsetHeight;
+		
+		// Disparar evento customizado para notificar mudança de tema
+		if (typeof window !== 'undefined') {
+			window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: nomeDaisyUI } }));
+		}
+	}
+}
+
+/**
+ * Aplicar tema padrão (roxo)
+ */
+export function aplicarTemaPadrao(): void {
+	aplicarTema('purple');
+}
+
+/**
+ * Obter tema padrão
+ */
+export function obterTemaPadrao(): Tema {
+	return temasDisponiveis[0]; // Purple
+}
+
diff --git a/apps/web/src/routes/(dashboard)/perfil/+page.svelte b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
index 4227d09..b9c4a02 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -29,7 +29,8 @@
 		CheckCircle,
 		ListChecks,
 		Info,
-		Fingerprint
+		Fingerprint,
+		Palette
 	} from 'lucide-svelte';
 	import RegistroPonto from '$lib/components/ponto/RegistroPonto.svelte';
 	import TicketCard from '$lib/components/chamados/TicketCard.svelte';
@@ -44,6 +45,7 @@
 	} from '$lib/utils/chamados';
 	import { useConvexWithAuth } from '$lib/hooks/useConvexWithAuth';
 	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { temasDisponiveis, aplicarTema, type Tema } from '$lib/utils/temas';
 
 	const client = useConvexClient();
 	// @ts-expect-error - Convex types issue with getCurrentUser
@@ -66,6 +68,7 @@
 		| 'aprovar-ferias'
 		| 'aprovar-ausencias'
 		| 'meu-ponto'
+		| 'aparencia'
 	>('meu-perfil');
 
 	let periodoSelecionado = $state<Id<'ferias'> | null>(null);
@@ -98,6 +101,12 @@
 	let erroMensagemChamado = $state<string | null>(null);
 	let sucessoMensagemChamado = $state<string | null>(null);
 
+	// Estados para Aparência
+	let temaSelecionado = $state<string | null>(null);
+	let salvandoTema = $state(false);
+	let sucessoSalvarTema = $state<string | null>(null);
+	let erroSalvarTema = $state<string | null>(null);
+
 	// Avatares padrão disponíveis
 	const defaultAvatars = [
 		'/avatars/avatar-1.png',
@@ -530,6 +539,57 @@
 		modoFoto = 'avatar';
 		mostrarModalFoto = true;
 	}
+
+	// Inicializar tema selecionado com o tema atual do usuário
+	$effect(() => {
+		if (currentUser?.data?.temaPreferido && !temaSelecionado) {
+			temaSelecionado = currentUser.data.temaPreferido;
+		} else if (!temaSelecionado && currentUser !== undefined) {
+			// Só definir padrão se o usuário já foi carregado (mesmo que seja null)
+			temaSelecionado = 'purple'; // Tema padrão
+		}
+	});
+
+	// Função para selecionar e aplicar tema
+	async function selecionarTema(temaId: string) {
+		temaSelecionado = temaId;
+		erroSalvarTema = null;
+		sucessoSalvarTema = null;
+
+		// Aplicar tema imediatamente (sem salvar ainda)
+		aplicarTema(temaId);
+	}
+
+	// Função para salvar tema preferido
+	async function salvarTema() {
+		if (!temaSelecionado) return;
+
+		try {
+			salvandoTema = true;
+			erroSalvarTema = null;
+			sucessoSalvarTema = null;
+
+			await client.mutation(api.usuarios.atualizarTema, {
+				temaPreferido: temaSelecionado
+			});
+
+			// Garantir que o tema continue aplicado após salvar
+			aplicarTema(temaSelecionado);
+
+			sucessoSalvarTema = 'Tema salvo com sucesso! Sua preferência será aplicada em acessos futuros.';
+			
+			// Limpar mensagem após 3 segundos
+			setTimeout(() => {
+				sucessoSalvarTema = null;
+			}, 3000);
+		} catch (error) {
+			const mensagemErro =
+				error instanceof Error ? error.message : 'Erro ao salvar tema. Tente novamente.';
+			erroSalvarTema = mensagemErro;
+		} finally {
+			salvandoTema = false;
+		}
+	}
 </script>
 
 <ProtectedRoute>
@@ -797,6 +857,16 @@
 					<Fingerprint class="h-5 w-5" strokeWidth={2} />
 					Meu Ponto
 				</button>
+
+				<button
+					type="button"
+					role="tab"
+					class={`tab tab-lg gap-2 font-semibold transition-all duration-300 ${abaAtiva === 'aparencia' ? 'tab-active scale-105 bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg' : 'hover:bg-base-100'}`}
+					onclick={() => (abaAtiva = 'aparencia')}
+				>
+					<Palette class="h-5 w-5" strokeWidth={2} />
+					Aparência
+				</button>
 			</div>
 
 			<!-- Conteúdo das Abas -->
@@ -2283,6 +2353,149 @@
 						{/if}
 					</div>
 				</div>
+			{:else if abaAtiva === 'aparencia'}
+				<!-- Aparência -->
+				<div class="space-y-6">
+					<!-- Header -->
+					<div
+						class="card from-base-100 to-base-200 overflow-hidden border-t-4 border-purple-500 bg-gradient-to-br shadow-2xl"
+					>
+						<div class="card-body p-6">
+							<div class="mb-6 flex items-center justify-between">
+								<div class="flex items-center gap-3">
+									<div
+										class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-pink-600 shadow-lg ring-2 ring-purple-500/20"
+									>
+										<Palette class="h-6 w-6 text-white" strokeWidth={2.5} />
+									</div>
+									<div>
+										<h2 class="text-base-content flex items-center gap-2 text-2xl font-bold">
+											Personalizar Aparência
+										</h2>
+										<p class="text-base-content/60 mt-0.5 text-sm">
+											Escolha um tema para personalizar a interface do SGSE
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Mensagens de Sucesso/Erro -->
+					{#if sucessoSalvarTema}
+						<div class="alert alert-success shadow-lg">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<span>{sucessoSalvarTema}</span>
+						</div>
+					{/if}
+
+					{#if erroSalvarTema}
+						<div class="alert alert-error shadow-lg">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<span>{erroSalvarTema}</span>
+						</div>
+					{/if}
+
+					<!-- Grid de Temas -->
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+						{#each temasDisponiveis as tema (tema.id)}
+							<button
+								type="button"
+								class={`card from-base-100 to-base-200 hover:shadow-3xl overflow-hidden border-2 bg-gradient-to-br shadow-xl transition-all duration-300 hover:scale-105 ${
+									temaSelecionado === tema.id
+										? 'border-primary ring-4 ring-primary/20 scale-105'
+										: 'border-base-300 hover:border-primary/50'
+								}`}
+								onclick={() => selecionarTema(tema.id)}
+							>
+								<div class="card-body p-6">
+									<!-- Preview do Tema -->
+									<div
+										class="mb-4 h-24 w-full rounded-lg shadow-lg"
+										style="background: linear-gradient(135deg, {tema.corPrimaria} 0%, {tema.corSecundaria} 100%);"
+									>
+										<div class="flex h-full items-center justify-center">
+											<div
+												class="h-12 w-12 rounded-full bg-white/20 backdrop-blur-sm"
+											></div>
+										</div>
+									</div>
+
+									<!-- Informações do Tema -->
+									<div class="text-center">
+										<h3 class="text-base-content mb-1 text-lg font-bold">
+											{tema.nome}
+										</h3>
+										<p class="text-base-content/60 text-sm">{tema.descricao}</p>
+									</div>
+
+									<!-- Indicador de Seleção -->
+									{#if temaSelecionado === tema.id}
+										<div class="mt-4 flex items-center justify-center gap-2">
+											<CheckCircle class="text-primary h-5 w-5" strokeWidth={2} />
+											<span class="text-primary text-sm font-semibold">Tema Ativo</span>
+										</div>
+									{/if}
+								</div>
+							</button>
+						{/each}
+					</div>
+
+					<!-- Botão Salvar -->
+					<div class="flex justify-end">
+						<button
+							type="button"
+							class="btn btn-primary btn-lg gap-2 shadow-lg"
+							onclick={salvarTema}
+							disabled={salvandoTema || !temaSelecionado}
+						>
+							{#if salvandoTema}
+								<span class="loading loading-spinner loading-sm"></span>
+								Salvando...
+							{:else}
+								<CheckCircle class="h-5 w-5" strokeWidth={2} />
+								Salvar Tema
+							{/if}
+						</button>
+					</div>
+
+					<!-- Informação Adicional -->
+					<div class="alert alert-info shadow-lg">
+						<Info class="h-6 w-6 shrink-0" strokeWidth={2} />
+						<div>
+							<h3 class="font-bold">Como funciona?</h3>
+							<p class="text-sm">
+								Clique em um tema para visualizar a prévia. O tema será aplicado
+								imediatamente, mas você precisa clicar em "Salvar Tema" para que a
+								preferência seja mantida em acessos futuros.
+							</p>
+						</div>
+					</div>
+				</div>
 			{/if}
 		</div>
 
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 7567fc1..9778a74 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -33,10 +33,6 @@
 	let chartCanvas: HTMLCanvasElement;
 	let chartInstance: Chart | null = null;
 
-	// Verificar autenticação primeiro
-	const currentUserQuery = useQuery(api.auth.getCurrentUser, {});
-	const usuarioAutenticado = $derived(currentUserQuery?.data !== null && currentUserQuery?.data !== undefined);
-
 	// Parâmetros reativos para queries
 	const registrosParams = $derived({
 		funcionarioId: funcionarioIdFiltro && funcionarioIdFiltro !== '' ? funcionarioIdFiltro : undefined,
@@ -49,23 +45,11 @@
 		funcionarioId: funcionarioIdFiltro && funcionarioIdFiltro !== '' ? funcionarioIdFiltro : undefined,
 	});
 
-	// Queries condicionais - só executar se usuário estiver autenticado
-	const funcionariosQuery = useQuery(
-		api.funcionarios.getAll,
-		usuarioAutenticado ? {} : 'skip'
-	);
-	const registrosQuery = useQuery(
-		api.pontos.listarRegistrosPeriodo,
-		usuarioAutenticado ? registrosParams : 'skip'
-	);
-	const estatisticasQuery = useQuery(
-		api.pontos.obterEstatisticas,
-		usuarioAutenticado ? estatisticasParams : 'skip'
-	);
-	const configQuery = useQuery(
-		api.configuracaoPonto.obterConfiguracao,
-		usuarioAutenticado ? {} : 'skip'
-	);
+	// Queries
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+	const registrosQuery = useQuery(api.pontos.listarRegistrosPeriodo, registrosParams);
+	const estatisticasQuery = useQuery(api.pontos.obterEstatisticas, estatisticasParams);
+	const configQuery = useQuery(api.configuracaoPonto.obterConfiguracao, {});
 
 	const funcionarios = $derived(funcionariosQuery?.data || []);
 	const registros = $derived(registrosQuery?.data || []);
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index 6bf3c46..ccab3a2 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -5,10 +5,38 @@
   import { authClient } from "$lib/auth";
   // Importar polyfill ANTES de qualquer outro código que possa usar Jitsi
   import "$lib/utils/jitsiPolyfill";
+  import { useQuery } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { aplicarTema, aplicarTemaPadrao } from "$lib/utils/temas";
 
   const { children } = $props();
 
   createSvelteAuthClient({ authClient });
+
+  // Buscar usuário atual para aplicar tema
+  const currentUser = useQuery(api.auth.getCurrentUser, {});
+
+  // Aplicar tema quando o usuário for carregado
+  $effect(() => {
+    if (currentUser?.data?.temaPreferido) {
+      // Usuário logado com tema preferido - aplicar tema salvo
+      aplicarTema(currentUser.data.temaPreferido);
+    } else if (currentUser?.data === null || (currentUser !== undefined && !currentUser.data)) {
+      // Usuário não está logado - aplicar tema padrão (roxo)
+      aplicarTemaPadrao();
+    }
+  });
+
+  // Aplicar tema padrão imediatamente ao carregar (antes de verificar usuário)
+  $effect(() => {
+    if (typeof document !== 'undefined') {
+      // Se não há tema aplicado ainda, aplicar o padrão
+      const htmlElement = document.documentElement;
+      if (!htmlElement.getAttribute('data-theme')) {
+        aplicarTemaPadrao();
+      }
+    }
+  });
 </script>
 
 <div>
diff --git a/packages/backend/convex/schema.ts b/packages/backend/convex/schema.ts
index f1cfc70..c0563fd 100644
--- a/packages/backend/convex/schema.ts
+++ b/packages/backend/convex/schema.ts
@@ -552,6 +552,7 @@ export default defineSchema({
     ultimaAtividade: v.optional(v.number()), // timestamp
     notificacoesAtivadas: v.optional(v.boolean()),
     somNotificacao: v.optional(v.boolean()),
+    temaPreferido: v.optional(v.string()), // tema de aparência escolhido pelo usuário
   })
     .index("by_email", ["email"])
     .index("by_role", ["roleId"])
diff --git a/packages/backend/convex/usuarios.ts b/packages/backend/convex/usuarios.ts
index 3eb6c8d..6d26d45 100644
--- a/packages/backend/convex/usuarios.ts
+++ b/packages/backend/convex/usuarios.ts
@@ -494,7 +494,8 @@ export const atualizarPerfil = mutation({
 			)
 		),
 		notificacoesAtivadas: v.optional(v.boolean()),
-		somNotificacao: v.optional(v.boolean())
+		somNotificacao: v.optional(v.boolean()),
+		temaPreferido: v.optional(v.string())
 	},
 	returns: v.null(),
 	handler: async (ctx, args) => {
@@ -522,6 +523,7 @@ export const atualizarPerfil = mutation({
 		if (args.notificacoesAtivadas !== undefined)
 			updates.notificacoesAtivadas = args.notificacoesAtivadas;
 		if (args.somNotificacao !== undefined) updates.somNotificacao = args.somNotificacao;
+		if (args.temaPreferido !== undefined) updates.temaPreferido = args.temaPreferido;
 
 		await ctx.db.patch(usuarioAtual._id, updates);
 
@@ -529,6 +531,29 @@ export const atualizarPerfil = mutation({
 	}
 });
 
+/**
+ * Atualizar tema preferido do usuário
+ */
+export const atualizarTema = mutation({
+	args: {
+		temaPreferido: v.string()
+	},
+	returns: v.object({ sucesso: v.boolean() }),
+	handler: async (ctx, args) => {
+		const usuarioAtual = await getCurrentUserFunction(ctx);
+		if (!usuarioAtual) {
+			throw new Error('Usuário não encontrado');
+		}
+
+		await ctx.db.patch(usuarioAtual._id, {
+			temaPreferido: args.temaPreferido,
+			atualizadoEm: Date.now()
+		});
+
+		return { sucesso: true };
+	}
+});
+
 /**
  * Obter perfil do usuário atual
  */

From 031552c836f060e8fcf47488688b970db859decc Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 22:10:52 -0300
Subject: [PATCH 7/9] feat: enhance sidebar and theme utilities for improved UI
 consistency

- Updated the Sidebar component styles to utilize theme-based classes for better visual consistency.
- Added new utility functions to retrieve and convert theme colors for use in components, enhancing theming capabilities.
- Improved layout logic to ensure the default theme is applied correctly based on user preferences and document readiness.
---
 apps/web/src/lib/components/Sidebar.svelte    |  9 +-
 apps/web/src/lib/utils/temas.ts               | 86 +++++++++++++++++++
 .../(dashboard)/ti/notificacoes/+page.svelte  |  5 +-
 apps/web/src/routes/+layout.svelte            | 27 ++++--
 4 files changed, 110 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 0fc941d..22a158e 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -161,8 +161,7 @@
 	<div class="flex-none lg:hidden">
 		<label
 			for="my-drawer-3"
-			class="group relative flex h-14 w-14 cursor-pointer items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
-			style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
+			class="group relative flex h-14 w-14 cursor-pointer items-center justify-center overflow-hidden rounded-2xl bg-primary shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl"
 			aria-label="Abrir menu"
 		>
 			<!-- Efeito de brilho no hover -->
@@ -182,8 +181,7 @@
 		<!-- Logo MODERNO do Governo -->
 		<div class="avatar">
 			<div
-				class="group relative w-16 overflow-hidden rounded-2xl p-2 shadow-xl transition-all duration-300 hover:scale-105 lg:w-20"
-				style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);"
+				class="group relative w-16 overflow-hidden rounded-2xl p-2 bg-base-100 border-2 border-primary/20 shadow-xl transition-all duration-300 hover:scale-105 lg:w-20"
 			>
 				<!-- Efeito de brilho no hover -->
 				<div
@@ -229,8 +227,7 @@
 				<button
 					type="button"
 					tabindex="0"
-					class="group relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
-					style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
+					class="group relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl bg-primary shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl"
 					aria-label="Menu do usuário"
 				>
 					<!-- Efeito de brilho no hover -->
diff --git a/apps/web/src/lib/utils/temas.ts b/apps/web/src/lib/utils/temas.ts
index 4b7975e..9e9d43e 100644
--- a/apps/web/src/lib/utils/temas.ts
+++ b/apps/web/src/lib/utils/temas.ts
@@ -192,3 +192,89 @@ export function obterTemaPadrao(): Tema {
 	return temasDisponiveis[0]; // Purple
 }
 
+/**
+ * Obter cores CSS do tema atual para usar em gráficos e componentes
+ */
+export function obterCoresDoTema(): {
+	primary: string;
+	success: string;
+	error: string;
+	warning: string;
+	info: string;
+	baseContent: string;
+	base100: string;
+	base200: string;
+	base300: string;
+} {
+	if (typeof window === 'undefined' || typeof document === 'undefined') {
+		// Valores padrão para SSR
+		return {
+			primary: '#667eea',
+			success: '#10b981',
+			error: '#ef4444',
+			warning: '#f59e0b',
+			info: '#3b82f6',
+			baseContent: '#1f2937',
+			base100: '#ffffff',
+			base200: '#f3f4f6',
+			base300: '#e5e7eb'
+		};
+	}
+
+	const htmlElement = document.documentElement;
+	const getComputedStyle = (varName: string): string => {
+		return getComputedStyle(htmlElement).getPropertyValue(varName).trim() || '';
+	};
+
+	// Tentar obter variáveis CSS do DaisyUI
+	const primary = getComputedStyle('--p') || '#667eea';
+	const success = getComputedStyle('--suc') || '#10b981';
+	const error = getComputedStyle('--er') || '#ef4444';
+	const warning = getComputedStyle('--wa') || '#f59e0b';
+	const info = getComputedStyle('--in') || '#3b82f6';
+	const baseContent = getComputedStyle('--bc') || '#1f2937';
+	const base100 = getComputedStyle('--b1') || '#ffffff';
+	const base200 = getComputedStyle('--b2') || '#f3f4f6';
+	const base300 = getComputedStyle('--b3') || '#e5e7eb';
+
+	return {
+		primary: primary || '#667eea',
+		success: success || '#10b981',
+		error: error || '#ef4444',
+		warning: warning || '#f59e0b',
+		info: info || '#3b82f6',
+		baseContent: baseContent || '#1f2937',
+		base100: base100 || '#ffffff',
+		base200: base200 || '#f3f4f6',
+		base300: base300 || '#e5e7eb'
+	};
+}
+
+/**
+ * Converter cor hex para rgba
+ */
+export function hexToRgba(hex: string, alpha: number = 1): string {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+	if (!result) return `rgba(102, 126, 234, ${alpha})`;
+
+	const r = parseInt(result[1], 16);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * Converter cor hex para rgb
+ */
+export function hexToRgb(hex: string): string {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+	if (!result) return 'rgb(102, 126, 234)';
+
+	const r = parseInt(result[1], 16);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+
+	return `rgb(${r}, ${g}, ${b})`;
+}
+
diff --git a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
index 703ce53..498b105 100644
--- a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
@@ -1467,9 +1467,8 @@
 					</div>
 					<div
 						bind:this={terminalScrollRef}
-						class="bg-neutral text-neutral-content max-h-64 overflow-y-auto rounded-lg p-4 font-mono text-sm"
-						style="background-color: #1a1a1a; color: #e5e5e5;"
-					>
+					class="bg-base-200 text-base-content max-h-64 overflow-y-auto rounded-lg p-4 font-mono text-sm border border-base-300"
+				>
 						{#if logsEnvio.length === 0}
 							<div class="text-neutral-content/60 italic">Aguardando envio de notificação...</div>
 						{:else}
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index ccab3a2..2115aba 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -18,19 +18,30 @@
 
   // Aplicar tema quando o usuário for carregado
   $effect(() => {
-    if (currentUser?.data?.temaPreferido) {
-      // Usuário logado com tema preferido - aplicar tema salvo
-      aplicarTema(currentUser.data.temaPreferido);
-    } else if (currentUser?.data === null || (currentUser !== undefined && !currentUser.data)) {
-      // Usuário não está logado - aplicar tema padrão (roxo)
-      aplicarTemaPadrao();
-    }
+    if (typeof document === 'undefined') return;
+    
+    const htmlElement = document.documentElement;
+    
+    // Aguardar um pouco para garantir que o DOM está pronto
+    const timeoutId = setTimeout(() => {
+      if (currentUser?.data?.temaPreferido) {
+        // Usuário logado com tema preferido - aplicar tema salvo
+        aplicarTema(currentUser.data.temaPreferido);
+      } else if (currentUser !== undefined) {
+        // Se a query terminou (mesmo que não haja usuário), aplicar tema padrão
+        if (!htmlElement.getAttribute('data-theme')) {
+          aplicarTemaPadrao();
+        }
+      }
+    }, 50);
+
+    return () => clearTimeout(timeoutId);
   });
 
   // Aplicar tema padrão imediatamente ao carregar (antes de verificar usuário)
   $effect(() => {
     if (typeof document !== 'undefined') {
-      // Se não há tema aplicado ainda, aplicar o padrão
+      // Se não há tema aplicado ainda, aplicar o padrão imediatamente
       const htmlElement = document.documentElement;
       if (!htmlElement.getAttribute('data-theme')) {
         aplicarTemaPadrao();

From aeaa3c903f6149aaaaa7f1b35a16d2444e169ed9 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 22:25:40 -0300
Subject: [PATCH 8/9] feat: implement user authentication checks in
 PresenceManager and perfil pages

- Added authentication verification in the PresenceManager component to manage user presence status based on authentication state.
- Updated the perfil page to conditionally execute queries only if the user is authenticated, enhancing security and performance.
- Introduced derived variables to track user authentication status, ensuring that presence management and data fetching are only performed for logged-in users.
---
 .../components/chat/PresenceManager.svelte    | 39 +++++++++++++++----
 .../routes/(dashboard)/perfil/+page.svelte    | 20 ++++++++--
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/lib/components/chat/PresenceManager.svelte b/apps/web/src/lib/components/chat/PresenceManager.svelte
index cb26218..7c84e6b 100644
--- a/apps/web/src/lib/components/chat/PresenceManager.svelte
+++ b/apps/web/src/lib/components/chat/PresenceManager.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
   import { useConvexClient } from "convex-svelte";
+  import { useQuery } from "convex-svelte";
   import { api } from "@sgse-app/backend/convex/_generated/api";
   import { onMount } from "svelte";
 
   const client = useConvexClient();
   
+  // Verificar se o usuário está autenticado antes de gerenciar presença
+  const currentUser = useQuery(api.auth.getCurrentUser, {});
+  const usuarioAutenticado = $derived(currentUser?.data !== null && currentUser?.data !== undefined);
+
   // Token é passado automaticamente via interceptadores em +layout.svelte
 
   let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
@@ -13,6 +18,8 @@
 
   // Detectar atividade do usuário
   function handleActivity() {
+    if (!usuarioAutenticado) return;
+    
     lastActivity = Date.now();
     
     // Limpar timeout de inatividade anterior
@@ -22,16 +29,29 @@
 
     // Configurar novo timeout (5 minutos)
     inactivityTimeout = setTimeout(() => {
-      client.mutation(api.chat.atualizarStatusPresenca, { status: "ausente" });
+      if (usuarioAutenticado) {
+        client.mutation(api.chat.atualizarStatusPresenca, { status: "ausente" });
+      }
     }, 5 * 60 * 1000);
   }
 
   onMount(() => {
-    // Configurar como online ao montar
+    // Só configurar presença se usuário estiver autenticado
+    if (!usuarioAutenticado) return;
+
+    // Configurar como online ao montar (apenas se autenticado)
     client.mutation(api.chat.atualizarStatusPresenca, { status: "online" });
 
-    // Heartbeat a cada 30 segundos
+    // Heartbeat a cada 30 segundos (apenas se autenticado)
     heartbeatInterval = setInterval(() => {
+      if (!usuarioAutenticado) {
+        if (heartbeatInterval) {
+          clearInterval(heartbeatInterval);
+          heartbeatInterval = null;
+        }
+        return;
+      }
+      
       const timeSinceLastActivity = Date.now() - lastActivity;
       
       // Se houve atividade nos últimos 5 minutos, manter online
@@ -47,10 +67,14 @@
     });
 
     // Configurar timeout inicial de inatividade
-    handleActivity();
+    if (usuarioAutenticado) {
+      handleActivity();
+    }
 
     // Detectar quando a aba fica inativa/ativa
     function handleVisibilityChange() {
+      if (!usuarioAutenticado) return;
+      
       if (document.hidden) {
         // Aba ficou inativa
         client.mutation(api.chat.atualizarStatusPresenca, { status: "ausente" });
@@ -65,8 +89,10 @@
 
     // Cleanup
     return () => {
-      // Marcar como offline ao desmontar
-      client.mutation(api.chat.atualizarStatusPresenca, { status: "offline" });
+      // Marcar como offline ao desmontar (apenas se autenticado)
+      if (usuarioAutenticado) {
+        client.mutation(api.chat.atualizarStatusPresenca, { status: "offline" });
+      }
 
       if (heartbeatInterval) {
         clearInterval(heartbeatInterval);
@@ -86,4 +112,3 @@
 </script>
 
 <!-- Componente invisível - apenas lógica -->
-
diff --git a/apps/web/src/routes/(dashboard)/perfil/+page.svelte b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
index b9c4a02..a93655c 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -125,11 +125,23 @@
 	const funcionarioIdDisponivel = $derived(currentUser?.data?.funcionarioId ?? null);
 	const gestorIdDisponivel = $derived(currentUser?.data?._id ?? null);
 
-	// ✅ CORRIGIDO: Queries no nível superior (sem argumentos) sempre criadas
+	// Verificar autenticação antes de executar queries
+	const usuarioAutenticado = $derived(currentUser?.data !== null && currentUser?.data !== undefined);
+
+	// ✅ CORRIGIDO: Queries condicionais - só executar se usuário estiver autenticado
 	// Queries que não requerem argumentos são criadas uma vez
-	const funcionarioQuery = useQuery(api.funcionarios.getCurrent, {});
-	const timesSubordinadosQuery = useQuery(api.times.listarSubordinadosDoGestorAtual, {});
-	const chamadosQuery = useQuery(api.chamados.listarChamadosUsuario, {});
+	const funcionarioQuery = useQuery(
+		api.funcionarios.getCurrent,
+		usuarioAutenticado ? {} : 'skip'
+	);
+	const timesSubordinadosQuery = useQuery(
+		api.times.listarSubordinadosDoGestorAtual,
+		usuarioAutenticado ? {} : 'skip'
+	);
+	const chamadosQuery = useQuery(
+		api.chamados.listarChamadosUsuario,
+		usuarioAutenticado ? {} : 'skip'
+	);
 
 	// ✅ CORRIGIDO: Queries com argumentos obrigatórios usando $derived.by para estabilidade
 	// Usamos uma chave estável baseada no ID para evitar recriação desnecessária

From 5b41d35b6fd72fd552a07fef1a3f118052757031 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 22:33:44 -0300
Subject: [PATCH 9/9] feat: add user authentication and validation checks in
 query handlers

- Implemented user authentication checks in the `getAll` and `listarRegistrosPeriodo` query handlers, returning empty arrays for unauthenticated users.
- Enhanced date validation in `listarRegistrosPeriodo` to ensure correct date formats before processing.
- Updated the `obterEstatisticas` query to return zeroed statistics for unauthenticated users, improving data security and user experience.
---
 packages/backend/convex/funcionarios.ts | 21 ++++++++++---
 packages/backend/convex/pontos.ts       | 42 +++++++++++++++++++------
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/packages/backend/convex/funcionarios.ts b/packages/backend/convex/funcionarios.ts
index 1244366..e84ed71 100644
--- a/packages/backend/convex/funcionarios.ts
+++ b/packages/backend/convex/funcionarios.ts
@@ -47,11 +47,24 @@ const regimeTrabalhoValidator = v.optional(
 export const getAll = query({
 	args: {},
 	handler: async (ctx) => {
+		// Verificar autenticação primeiro
+		const usuario = await getCurrentUserFunction(ctx);
+		if (!usuario) {
+			// Retornar array vazio quando não autenticado
+			return [];
+		}
+
 		// Autorização: listar funcionários
-		await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
-			recurso: 'funcionarios',
-			acao: 'listar'
-		});
+		try {
+			await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
+				recurso: 'funcionarios',
+				acao: 'listar'
+			});
+		} catch (error) {
+			// Se não tiver permissão, retornar array vazio
+			return [];
+		}
+
 		const funcionarios = await ctx.db.query('funcionarios').collect();
 		// Retornar apenas os campos necessários para listagem
 		return funcionarios.map((f) => ({
diff --git a/packages/backend/convex/pontos.ts b/packages/backend/convex/pontos.ts
index 0c79c80..c05c7e8 100644
--- a/packages/backend/convex/pontos.ts
+++ b/packages/backend/convex/pontos.ts
@@ -862,15 +862,24 @@ export const listarRegistrosPeriodo = query({
 	handler: async (ctx, args) => {
 		const usuario = await getCurrentUserFunction(ctx);
 		if (!usuario) {
-			throw new Error('Usuário não autenticado');
+			// Retornar array vazio quando não autenticado
+			return [];
 		}
 
 		// Verificar permissão (RH ou TI)
 		// Por enquanto, permitir se tiver funcionarioId ou for admin
 		// TODO: Implementar verificação de permissão adequada
 
-		const dataFim = new Date(args.dataFim);
-		dataFim.setHours(23, 59, 59, 999);
+		// Validar formato das datas
+		if (!args.dataInicio || !args.dataFim) {
+			return [];
+		}
+
+		// Validar formato YYYY-MM-DD
+		const dataInicioRegex = /^\d{4}-\d{2}-\d{2}$/;
+		if (!dataInicioRegex.test(args.dataInicio) || !dataInicioRegex.test(args.dataFim)) {
+			return [];
+		}
 
 		let registrosFiltrados;
 		
@@ -885,19 +894,26 @@ export const listarRegistrosPeriodo = query({
 				.withIndex('by_funcionario_data', (q) => q.eq('funcionarioId', funcionarioId))
 				.collect();
 			
-			// Filtrar por período de data
+			// Filtrar por período de data usando comparação de strings (formato YYYY-MM-DD)
 			registrosFiltrados = todosRegistrosFuncionario.filter((r) => {
-				const dataRegistro = new Date(r.data);
-				return dataRegistro >= new Date(args.dataInicio) && dataRegistro <= dataFim;
+				// Comparação de strings funciona para formato YYYY-MM-DD
+				return r.data >= args.dataInicio && r.data <= args.dataFim;
 			});
 		} else {
 			// Se não há funcionário especificado, buscar todos e filtrar (menos eficiente, mas necessário)
+			// Usar comparação de strings diretamente para datas no formato YYYY-MM-DD
 			const registros = await ctx.db
 				.query('registrosPonto')
-				.withIndex('by_data', (q) => q.gte('data', args.dataInicio).lte('data', args.dataFim))
+				.withIndex('by_data', (q) => 
+					q.gte('data', args.dataInicio).lte('data', args.dataFim)
+				)
 				.collect();
 			
-			registrosFiltrados = registros;
+			// Garantir que as datas estão no formato correto e filtrar novamente para garantir
+			registrosFiltrados = registros.filter((r) => {
+				// Comparação de strings funciona para formato YYYY-MM-DD
+				return r.data >= args.dataInicio && r.data <= args.dataFim;
+			});
 		}
 
 		// Buscar informações dos funcionários
@@ -964,7 +980,15 @@ export const obterEstatisticas = query({
 	handler: async (ctx, args) => {
 		const usuario = await getCurrentUserFunction(ctx);
 		if (!usuario) {
-			throw new Error('Usuário não autenticado');
+			// Retornar estatísticas zeradas quando não autenticado
+			return {
+				totalRegistros: 0,
+				dentroDoPrazo: 0,
+				foraDoPrazo: 0,
+				totalFuncionarios: 0,
+				funcionariosDentroPrazo: 0,
+				funcionariosForaPrazo: 0,
+			};
 		}
 
 		// TODO: Verificar permissão (RH ou TI)