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/RelogioSincronizado.svelte

@@ -113,13 +113,28 @@
 	});
 </script>
 
-<div class="flex flex-col items-center gap-2">
-	<div class="text-4xl font-bold font-mono text-primary">{horaFormatada}</div>
-	<div class="text-sm text-base-content/70 capitalize">{dataFormatada}</div>
-	<div class="flex items-center gap-2 text-xs">
+<div class="flex flex-col items-center gap-4 w-full">
+	<!-- Hora -->
+	<div class="text-5xl font-black font-mono text-primary tracking-tight drop-shadow-sm">
+		{horaFormatada}
+	</div>
+	
+	<!-- Data -->
+	<div class="text-base font-semibold text-base-content/80 capitalize">
+		{dataFormatada}
+	</div>
+	
+	<!-- Status de Sincronização -->
+	<div class="flex items-center gap-2 px-4 py-2 rounded-full {
+		sincronizado 
+			? 'bg-success/20 text-success border border-success/30' 
+			: erro 
+				? 'bg-warning/20 text-warning border border-warning/30' 
+				: 'bg-base-300/50 text-base-content/60 border border-base-300'
+	}">
 		{#if sincronizado}
-			<CheckCircle2 class="h-4 w-4 text-success" />
-			<span class="text-success">
+			<CheckCircle2 class="h-4 w-4" strokeWidth={2.5} />
+			<span class="text-sm font-semibold">
 				{#if usandoServidorExterno}
 					Sincronizado com servidor NTP
 				{:else}
@@ -127,11 +142,11 @@
 				{/if}
 			</span>
 		{:else if erro}
-			<AlertCircle class="h-4 w-4 text-warning" />
-			<span class="text-warning">{erro}</span>
+			<AlertCircle class="h-4 w-4" strokeWidth={2.5} />
+			<span class="text-sm font-semibold">{erro}</span>
 		{:else}
-			<Clock class="h-4 w-4 text-base-content/50" />
-			<span class="text-base-content/50">Usando relógio do PC</span>
+			<Clock class="h-4 w-4" strokeWidth={2.5} />
+			<span class="text-sm font-semibold">Usando relógio do PC</span>
 		{/if}
 	</div>
 </div>