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

@@ -23,38 +23,41 @@
 		       details.match(/^\d+\./); // Começa com número (lista numerada)
 	});
 
-	let modalRef: HTMLDialogElement;
-
 	function handleClose() {
 		open = false;
 		onClose();
 	}
-
-	$effect(() => {
-		if (open && modalRef) {
-			modalRef.showModal();
-		} else if (!open && modalRef) {
-			modalRef.close();
-		}
-	});
 </script>
 
 {#if open}
-	<dialog
-		bind:this={modalRef}
-		class="modal"
-		onclick={(e) => e.target === e.currentTarget && handleClose()}
+	<div 
+		class="fixed inset-0 z-50 flex items-center justify-center p-4"
+		style="animation: fadeIn 0.2s ease-out;"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="modal-error-title"
 	>
-		<div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
-			<!-- Header -->
-			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
-				<h2 id="modal-title" class="text-error flex items-center gap-2 text-xl font-bold">
+		<!-- Backdrop -->
+		<div 
+			class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-200"
+			onclick={handleClose}
+		></div>
+		
+		<!-- Modal Box -->
+		<div 
+			class="relative bg-base-100 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col z-10 transform transition-all duration-300"
+			style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<!-- Header fixo -->
+			<div class="flex items-center justify-between px-6 py-4 border-b border-base-300 flex-shrink-0">
+				<h2 id="modal-error-title" class="text-error flex items-center gap-2 text-xl font-bold">
 					<AlertCircle class="h-6 w-6" strokeWidth={2.5} />
 					{title}
 				</h2>
 				<button
 					type="button"
-					class="btn btn-sm btn-circle btn-ghost"
+					class="btn btn-sm btn-circle btn-ghost hover:bg-base-300"
 					onclick={handleClose}
 					aria-label="Fechar"
 				>
@@ -62,8 +65,8 @@
 				</button>
 			</div>
 
-			<!-- Content -->
-			<div class="px-6 py-6">
+			<!-- Content com rolagem -->
+			<div class="flex-1 overflow-y-auto px-6 py-6 modal-scroll">
 				<!-- Mensagem principal -->
 				<div class="mb-6">
 					<p class="text-base-content text-base leading-relaxed font-medium">{message}</p>
@@ -96,14 +99,59 @@
 				{/if}
 			</div>
 
-			<!-- Footer -->
-			<div class="modal-action border-base-300 border-t px-6 pb-6 pt-4">
-				<button class="btn btn-primary btn-md" onclick={handleClose}> Entendi, obrigado </button>
+			<!-- Footer fixo -->
+			<div class="flex justify-end px-6 py-4 border-t border-base-300 flex-shrink-0">
+				<button class="btn btn-primary" onclick={handleClose}>Entendi, obrigado</button>
 			</div>
 		</div>
-
-		<form method="dialog" class="modal-backdrop">
-			<button type="button" onclick={handleClose}>fechar</button>
-		</form>
-	</dialog>
+	</div>
 {/if}
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	/* Scrollbar customizada para os modais */
+	:global(.modal-scroll) {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--bc) / 0.3) transparent;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar) {
+		width: 8px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-track) {
+		background: transparent;
+		border-radius: 4px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb) {
+		background-color: hsl(var(--bc) / 0.3);
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb:hover) {
+		background-color: hsl(var(--bc) / 0.5);
+	}
+</style>