refactor: update ErrorModal and RegistroPonto components for improved UI and functionality

- Refactored ErrorModal to use a div-based layout with enhanced animations and accessibility features.
- Updated RegistroPonto to include a new loading state and improved modal handling for webcam capture.
- Enhanced styling for better visual consistency and user experience across modals and registration cards.
- Introduced comparative balance calculations in RegistroPonto for better visibility of time discrepancies.

apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	interface Props {
+		saldo?: {
+			trabalhadoMinutos: number;
+			esperadoMinutos: number;
+			diferencaMinutos: number;
+		} | null;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let { saldo, size = 'md' }: Props = $props();
+
+	function formatarMinutos(minutos: number): { horas: number; minutos: number } {
+		const horas = Math.floor(Math.abs(minutos) / 60);
+		const mins = Math.abs(minutos) % 60;
+		return { horas, minutos: mins };
+	}
+
+	const sizeClasses = {
+		sm: 'text-xs px-2 py-1',
+		md: 'text-sm px-3 py-1.5',
+		lg: 'text-base px-4 py-2'
+	};
+</script>
+
+{#if saldo}
+	{@const trabalhado = formatarMinutos(saldo.trabalhadoMinutos)}
+	{@const diferenca = formatarMinutos(saldo.diferencaMinutos)}
+	{@const sinalDiferenca = saldo.diferencaMinutos >= 0 ? '+' : '-'}
+	{@const isNegativo = saldo.diferencaMinutos < 0}
+	
+	<div class="inline-flex items-center gap-1.5 {sizeClasses[size]} rounded-lg font-semibold shadow-sm border {
+		isNegativo 
+			? 'bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400' 
+			: 'bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-400'
+	}">
+		<span class="font-bold">+{trabalhado.horas}h {trabalhado.minutos}min</span>
+		<span class="text-base-content/50">/</span>
+		<span class={isNegativo ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}>
+			{sinalDiferenca}{diferenca.horas}h {diferenca.minutos}min
+		</span>
+	</div>
+{:else}
+	<span class="badge badge-ghost {sizeClasses[size]}">-</span>
+{/if}
+