diff --git a/apps/web/src/lib/components/AprovarAusencias.svelte b/apps/web/src/lib/components/AprovarAusencias.svelte
index 49b6072..7dc5b55 100644
--- a/apps/web/src/lib/components/AprovarAusencias.svelte
+++ b/apps/web/src/lib/components/AprovarAusencias.svelte
@@ -1,426 +1,414 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ErrorModal from "./ErrorModal.svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+	import ErrorModal from './ErrorModal.svelte';
 
-  type SolicitacaoAusencia = Doc<"solicitacoesAusencias"> & {
-    funcionario?: Doc<"funcionarios"> | null;
-    gestor?: Doc<"usuarios"> | null;
-    time?: Doc<"times"> | null;
-  };
+	type SolicitacaoAusencia = Doc<'solicitacoesAusencias'> & {
+		funcionario?: Doc<'funcionarios'> | null;
+		gestor?: Doc<'usuarios'> | null;
+		time?: Doc<'times'> | null;
+	};
 
-  interface Props {
-    solicitacao: SolicitacaoAusencia;
-    gestorId: Id<"usuarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		solicitacao: SolicitacaoAusencia;
+		gestorId: Id<'usuarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
+	let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let motivoReprovacao = $state("");
-  let processando = $state(false);
-  let erro = $state("");
-  let mostrarModalErro = $state(false);
-  let mensagemErroModal = $state("");
+	let motivoReprovacao = $state('');
+	let processando = $state(false);
+	let erro = $state('');
+	let mostrarModalErro = $state(false);
+	let mensagemErroModal = $state('');
 
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diff = fim.getTime() - inicio.getTime();
-    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-  }
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+		const diff = fim.getTime() - inicio.getTime();
+		return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  const totalDias = $derived(
-    calcularDias(solicitacao.dataInicio, solicitacao.dataFim),
-  );
+	const totalDias = $derived(calcularDias(solicitacao.dataInicio, solicitacao.dataFim));
 
-  async function aprovar() {
-    try {
-      processando = true;
-      erro = "";
-      mostrarModalErro = false;
+	async function aprovar() {
+		try {
+			processando = true;
+			erro = '';
+			mostrarModalErro = false;
 
-      await client.mutation(api.ausencias.aprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-      });
+			await client.mutation(api.ausencias.aprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId
+			});
 
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      const mensagemErro = e instanceof Error ? e.message : String(e);
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			const mensagemErro = e instanceof Error ? e.message : String(e);
 
-      // Verificar se é erro de permissão
-      if (
-        mensagemErro.includes("permissão") ||
-        mensagemErro.includes("permission") ||
-        mensagemErro.includes("Você não tem permissão")
-      ) {
-        mensagemErroModal =
-          "Você não tem permissão para aprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.";
-        mostrarModalErro = true;
-      } else {
-        erro = mensagemErro;
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			// Verificar se é erro de permissão
+			if (
+				mensagemErro.includes('permissão') ||
+				mensagemErro.includes('permission') ||
+				mensagemErro.includes('Você não tem permissão')
+			) {
+				mensagemErroModal =
+					'Você não tem permissão para aprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.';
+				mostrarModalErro = true;
+			} else {
+				erro = mensagemErro;
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  async function reprovar() {
-    if (!motivoReprovacao.trim()) {
-      erro = "Informe o motivo da reprovação";
-      return;
-    }
+	async function reprovar() {
+		if (!motivoReprovacao.trim()) {
+			erro = 'Informe o motivo da reprovação';
+			return;
+		}
 
-    try {
-      processando = true;
-      erro = "";
-      mostrarModalErro = false;
+		try {
+			processando = true;
+			erro = '';
+			mostrarModalErro = false;
 
-      await client.mutation(api.ausencias.reprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        motivoReprovacao: motivoReprovacao.trim(),
-      });
+			await client.mutation(api.ausencias.reprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId,
+				motivoReprovacao: motivoReprovacao.trim()
+			});
 
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      const mensagemErro = e instanceof Error ? e.message : String(e);
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			const mensagemErro = e instanceof Error ? e.message : String(e);
 
-      // Verificar se é erro de permissão
-      if (
-        mensagemErro.includes("permissão") ||
-        mensagemErro.includes("permission") ||
-        mensagemErro.includes("Você não tem permissão")
-      ) {
-        mensagemErroModal =
-          "Você não tem permissão para reprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.";
-        mostrarModalErro = true;
-      } else {
-        erro = mensagemErro;
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			// Verificar se é erro de permissão
+			if (
+				mensagemErro.includes('permissão') ||
+				mensagemErro.includes('permission') ||
+				mensagemErro.includes('Você não tem permissão')
+			) {
+				mensagemErroModal =
+					'Você não tem permissão para reprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.';
+				mostrarModalErro = true;
+			} else {
+				erro = mensagemErro;
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalErro() {
-    mostrarModalErro = false;
-    mensagemErroModal = "";
-  }
+	function fecharModalErro() {
+		mostrarModalErro = false;
+		mensagemErroModal = '';
+	}
 
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-    };
-    return badges[status] || "badge-neutral";
-  }
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error'
+		};
+		return badges[status] || 'badge-neutral';
+	}
 
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando Aprovação",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-    };
-    return textos[status] || status;
-  }
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando Aprovação',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado'
+		};
+		return textos[status] || status;
+	}
 </script>
 
 <div class="aprovar-ausencia">
-  <!-- Header -->
-  <div class="mb-6">
-    <h2 class="text-3xl font-bold text-primary mb-2">
-      Aprovar/Reprovar Ausência
-    </h2>
-    <p class="text-base-content/70">Analise a solicitação e tome uma decisão</p>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<h2 class="text-primary mb-2 text-3xl font-bold">Aprovar/Reprovar Ausência</h2>
+		<p class="text-base-content/70">Analise a solicitação e tome uma decisão</p>
+	</div>
 
-  <!-- Card Principal -->
-  <div class="card bg-base-100 shadow-2xl border-t-4 border-orange-500">
-    <div class="card-body">
-      <!-- Informações do Funcionário -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-            />
-          </svg>
-          Funcionário
-        </h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <p class="text-sm text-base-content/70">Nome</p>
-            <p class="font-bold text-lg">
-              {solicitacao.funcionario?.nome || "N/A"}
-            </p>
-          </div>
-          {#if solicitacao.time}
-            <div>
-              <p class="text-sm text-base-content/70">Time</p>
-              <div
-                class="badge badge-lg font-semibold"
-                style="background-color: {solicitacao.time
-                  .cor}20; border-color: {solicitacao.time
-                  .cor}; color: {solicitacao.time.cor}"
-              >
-                {solicitacao.time.nome}
-              </div>
-            </div>
-          {/if}
-        </div>
-      </div>
+	<!-- Card Principal -->
+	<div class="card bg-base-100 border-t-4 border-orange-500 shadow-2xl">
+		<div class="card-body">
+			<!-- Informações do Funcionário -->
+			<div class="mb-6">
+				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+						/>
+					</svg>
+					Funcionário
+				</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+					<div>
+						<p class="text-base-content/70 text-sm">Nome</p>
+						<p class="text-lg font-bold">
+							{solicitacao.funcionario?.nome || 'N/A'}
+						</p>
+					</div>
+					{#if solicitacao.time}
+						<div>
+							<p class="text-base-content/70 text-sm">Time</p>
+							<div
+								class="badge badge-lg font-semibold"
+								style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time
+									.cor}; color: {solicitacao.time.cor}"
+							>
+								{solicitacao.time.nome}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
 
-      <div class="divider"></div>
+			<div class="divider"></div>
 
-      <!-- Período da Ausência -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-            />
-          </svg>
-          Período da Ausência
-        </h3>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div
-            class="stat bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30"
-          >
-            <div class="stat-title">Data Início</div>
-            <div
-              class="stat-value text-orange-600 dark:text-orange-400 text-2xl"
-            >
-              {new Date(solicitacao.dataInicio).toLocaleDateString("pt-BR")}
-            </div>
-          </div>
-          <div
-            class="stat bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30"
-          >
-            <div class="stat-title">Data Fim</div>
-            <div
-              class="stat-value text-orange-600 dark:text-orange-400 text-2xl"
-            >
-              {new Date(solicitacao.dataFim).toLocaleDateString("pt-BR")}
-            </div>
-          </div>
-          <div
-            class="stat bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30"
-          >
-            <div class="stat-title">Total de Dias</div>
-            <div
-              class="stat-value text-orange-600 dark:text-orange-400 text-3xl"
-            >
-              {totalDias}
-            </div>
-            <div class="stat-desc">dias corridos</div>
-          </div>
-        </div>
-      </div>
+			<!-- Período da Ausência -->
+			<div class="mb-6">
+				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+					Período da Ausência
+				</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+					<div
+						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+					>
+						<div class="stat-title">Data Início</div>
+						<div class="stat-value text-2xl text-orange-600 dark:text-orange-400">
+							{new Date(solicitacao.dataInicio).toLocaleDateString('pt-BR')}
+						</div>
+					</div>
+					<div
+						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+					>
+						<div class="stat-title">Data Fim</div>
+						<div class="stat-value text-2xl text-orange-600 dark:text-orange-400">
+							{new Date(solicitacao.dataFim).toLocaleDateString('pt-BR')}
+						</div>
+					</div>
+					<div
+						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+					>
+						<div class="stat-title">Total de Dias</div>
+						<div class="stat-value text-3xl text-orange-600 dark:text-orange-400">
+							{totalDias}
+						</div>
+						<div class="stat-desc">dias corridos</div>
+					</div>
+				</div>
+			</div>
 
-      <div class="divider"></div>
+			<div class="divider"></div>
 
-      <!-- Motivo -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-          Motivo da Ausência
-        </h3>
-        <div class="card bg-base-200">
-          <div class="card-body">
-            <p class="whitespace-pre-wrap">{solicitacao.motivo}</p>
-          </div>
-        </div>
-      </div>
+			<!-- Motivo -->
+			<div class="mb-6">
+				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+					Motivo da Ausência
+				</h3>
+				<div class="card bg-base-200">
+					<div class="card-body">
+						<p class="whitespace-pre-wrap">{solicitacao.motivo}</p>
+					</div>
+				</div>
+			</div>
 
-      <!-- Status Atual -->
-      <div class="mb-6">
-        <div class="flex items-center gap-2">
-          <span class="text-sm font-semibold">Status:</span>
-          <div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}>
-            {getStatusTexto(solicitacao.status)}
-          </div>
-        </div>
-      </div>
+			<!-- Status Atual -->
+			<div class="mb-6">
+				<div class="flex items-center gap-2">
+					<span class="text-sm font-semibold">Status:</span>
+					<div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}>
+						{getStatusTexto(solicitacao.status)}
+					</div>
+				</div>
+			</div>
 
-      <!-- Erro -->
-      {#if erro}
-        <div class="alert alert-error mb-4">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            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>
-      {/if}
+			<!-- Erro -->
+			{#if erro}
+				<div class="alert alert-error mb-4">
+					<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>
+			{/if}
 
-      <!-- Ações -->
-      {#if solicitacao.status === "aguardando_aprovacao"}
-        <div class="card-actions justify-end gap-4 mt-6">
-          <button
-            type="button"
-            class="btn btn-error btn-lg gap-2"
-            onclick={reprovar}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            {/if}
-            Reprovar
-          </button>
-          <button
-            type="button"
-            class="btn btn-success btn-lg gap-2"
-            onclick={aprovar}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-            {/if}
-            Aprovar
-          </button>
-        </div>
+			<!-- Ações -->
+			{#if solicitacao.status === 'aguardando_aprovacao'}
+				<div class="card-actions mt-6 justify-end gap-4">
+					<button
+						type="button"
+						class="btn btn-error btn-lg gap-2"
+						onclick={reprovar}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner"></span>
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						{/if}
+						Reprovar
+					</button>
+					<button
+						type="button"
+						class="btn btn-success btn-lg gap-2"
+						onclick={aprovar}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner"></span>
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+						{/if}
+						Aprovar
+					</button>
+				</div>
 
-        <!-- Modal de Reprovação -->
-        {#if motivoReprovacao !== undefined}
-          <div class="mt-4">
-            <div class="form-control">
-              <label class="label" for="motivo-reprovacao">
-                <span class="label-text font-bold">Motivo da Reprovação</span>
-              </label>
-              <textarea
-                id="motivo-reprovacao"
-                class="textarea textarea-bordered h-24"
-                placeholder="Informe o motivo da reprovação..."
-                bind:value={motivoReprovacao}
-              ></textarea>
-            </div>
-          </div>
-        {/if}
-      {:else}
-        <div class="alert alert-info">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="stroke-current shrink-0 w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <span>Esta solicitação já foi processada.</span>
-        </div>
-      {/if}
+				<!-- Modal de Reprovação -->
+				{#if motivoReprovacao !== undefined}
+					<div class="mt-4">
+						<div class="form-control">
+							<label class="label" for="motivo-reprovacao">
+								<span class="label-text font-bold">Motivo da Reprovação</span>
+							</label>
+							<textarea
+								id="motivo-reprovacao"
+								class="textarea textarea-bordered h-24"
+								placeholder="Informe o motivo da reprovação..."
+								bind:value={motivoReprovacao}
+							></textarea>
+						</div>
+					</div>
+				{/if}
+			{:else}
+				<div class="alert alert-info">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="h-6 w-6 shrink-0 stroke-current"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+					<span>Esta solicitação já foi processada.</span>
+				</div>
+			{/if}
 
-      <!-- Botão Cancelar -->
-      <div class="mt-4 text-center">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={() => {
-            if (onCancelar) onCancelar();
-          }}
-          disabled={processando}
-        >
-          Fechar
-        </button>
-      </div>
-    </div>
-  </div>
+			<!-- Botão Cancelar -->
+			<div class="mt-4 text-center">
+				<button
+					type="button"
+					class="btn"
+					onclick={() => {
+						if (onCancelar) onCancelar();
+					}}
+					disabled={processando}
+				>
+					Fechar
+				</button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  open={mostrarModalErro}
-  title="Erro de Permissão"
-  message={mensagemErroModal ||
-    "Você não tem permissão para realizar esta ação."}
-  onClose={fecharModalErro}
+	open={mostrarModalErro}
+	title="Erro de Permissão"
+	message={mensagemErroModal || 'Você não tem permissão para realizar esta ação.'}
+	onClose={fecharModalErro}
 />
 
 <style>
-  .aprovar-ausencia {
-    max-width: 900px;
-    margin: 0 auto;
-  }
+	.aprovar-ausencia {
+		max-width: 900px;
+		margin: 0 auto;
+	}
 </style>
diff --git a/apps/web/src/lib/components/AprovarFerias.svelte b/apps/web/src/lib/components/AprovarFerias.svelte
index f15afe9..7dc924e 100644
--- a/apps/web/src/lib/components/AprovarFerias.svelte
+++ b/apps/web/src/lib/components/AprovarFerias.svelte
@@ -1,384 +1,462 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
-  
-  interface Periodo {
-    dataInicio: string;
-    dataFim: string;
-    diasCorridos: number;
-  }
-  
-  type SolicitacaoFerias = Doc<"solicitacoesFerias"> & {
-    funcionario?: Doc<"funcionarios"> | null;
-    gestor?: Doc<"usuarios"> | null;
-  };
-  
-  interface Props {
-    solicitacao: SolicitacaoFerias;
-    gestorId: Id<"usuarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
-  
-  let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
-  
-  const client = useConvexClient();
-  
-  let modoAjuste = $state(false);
-  let periodos = $state<Periodo[]>([]);
-  let motivoReprovacao = $state("");
-  let processando = $state(false);
-  let erro = $state("");
-  
-  $effect(() => {
-    if (modoAjuste && periodos.length === 0) {
-      periodos = solicitacao.periodos.map((p) => ({...p}));
-    }
-  });
-  
-  function calcularDias(periodo: Periodo) {
-    if (!periodo.dataInicio || !periodo.dataFim) {
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const inicio = new Date(periodo.dataInicio);
-    const fim = new Date(periodo.dataFim);
-    
-    if (fim < inicio) {
-      erro = "Data final não pode ser anterior à data inicial";
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const diff = fim.getTime() - inicio.getTime();
-    const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-    periodo.diasCorridos = dias;
-    erro = "";
-  }
-  
-  async function aprovar() {
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.aprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  async function reprovar() {
-    if (!motivoReprovacao.trim()) {
-      erro = "Informe o motivo da reprovação";
-      return;
-    }
-    
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.reprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        motivoReprovacao,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  async function ajustarEAprovar() {
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.ajustarEAprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        novosPeriodos: periodos,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-      data_ajustada_aprovada: "badge-info",
-    };
-    return badges[status] || "badge-neutral";
-  }
-  
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando Aprovação",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-      data_ajustada_aprovada: "Data Ajustada e Aprovada",
-    };
-    return textos[status] || status;
-  }
-  
-  function formatarData(data: number) {
-    return new Date(data).toLocaleString("pt-BR");
-  }
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+
+	interface Periodo {
+		dataInicio: string;
+		dataFim: string;
+		diasCorridos: number;
+	}
+
+	type SolicitacaoFerias = Doc<'solicitacoesFerias'> & {
+		funcionario?: Doc<'funcionarios'> | null;
+		gestor?: Doc<'usuarios'> | null;
+	};
+
+	interface Props {
+		solicitacao: SolicitacaoFerias;
+		gestorId: Id<'usuarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
+
+	let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
+
+	const client = useConvexClient();
+
+	let modoAjuste = $state(false);
+	let periodos = $state<Periodo[]>([]);
+	let motivoReprovacao = $state('');
+	let processando = $state(false);
+	let erro = $state('');
+
+	$effect(() => {
+		if (modoAjuste && periodos.length === 0) {
+			periodos = solicitacao.periodos.map((p) => ({ ...p }));
+		}
+	});
+
+	function calcularDias(periodo: Periodo) {
+		if (!periodo.dataInicio || !periodo.dataFim) {
+			periodo.diasCorridos = 0;
+			return;
+		}
+
+		const inicio = new Date(periodo.dataInicio);
+		const fim = new Date(periodo.dataFim);
+
+		if (fim < inicio) {
+			erro = 'Data final não pode ser anterior à data inicial';
+			periodo.diasCorridos = 0;
+			return;
+		}
+
+		const diff = fim.getTime() - inicio.getTime();
+		const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+		periodo.diasCorridos = dias;
+		erro = '';
+	}
+
+	async function aprovar() {
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.aprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function reprovar() {
+		if (!motivoReprovacao.trim()) {
+			erro = 'Informe o motivo da reprovação';
+			return;
+		}
+
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.reprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId,
+				motivoReprovacao
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function ajustarEAprovar() {
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.ajustarEAprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId,
+				novosPeriodos: periodos
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error',
+			data_ajustada_aprovada: 'badge-info'
+		};
+		return badges[status] || 'badge-neutral';
+	}
+
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando Aprovação',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado',
+			data_ajustada_aprovada: 'Data Ajustada e Aprovada'
+		};
+		return textos[status] || status;
+	}
+
+	function formatarData(data: number) {
+		return new Date(data).toLocaleString('pt-BR');
+	}
 </script>
 
 <div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <div class="flex items-start justify-between mb-4">
-      <div>
-        <h2 class="card-title text-2xl">
-          {solicitacao.funcionario?.nome || "Funcionário"}
-        </h2>
-        <p class="text-sm text-base-content/70 mt-1">
-          Ano de Referência: {solicitacao.anoReferencia}
-        </p>
-      </div>
-      <div class={`badge ${getStatusBadge(solicitacao.status)} badge-lg`}>
-        {getStatusTexto(solicitacao.status)}
-      </div>
-    </div>
-    
-    <!-- Períodos Solicitados -->
-    <div class="mt-4">
-      <h3 class="font-semibold text-lg mb-3">Períodos Solicitados</h3>
-      <div class="space-y-2">
-        {#each solicitacao.periodos as periodo, index}
-          <div class="flex items-center gap-4 p-3 bg-base-200 rounded-lg">
-            <div class="badge badge-primary">{index + 1}</div>
-            <div class="flex-1 grid grid-cols-3 gap-2 text-sm">
-              <div>
-                <span class="text-base-content/70">Início:</span>
-                <span class="font-semibold ml-1">{new Date(periodo.dataInicio).toLocaleDateString("pt-BR")}</span>
-              </div>
-              <div>
-                <span class="text-base-content/70">Fim:</span>
-                <span class="font-semibold ml-1">{new Date(periodo.dataFim).toLocaleDateString("pt-BR")}</span>
-              </div>
-              <div>
-                <span class="text-base-content/70">Dias:</span>
-                <span class="font-bold ml-1 text-primary">{periodo.diasCorridos}</span>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-    
-    <!-- Observações -->
-    {#if solicitacao.observacao}
-      <div class="mt-4">
-        <h3 class="font-semibold mb-2">Observações</h3>
-        <div class="p-3 bg-base-200 rounded-lg text-sm">
-          {solicitacao.observacao}
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Histórico -->
-    {#if solicitacao.historicoAlteracoes && solicitacao.historicoAlteracoes.length > 0}
-      <div class="mt-4">
-        <h3 class="font-semibold mb-2">Histórico</h3>
-        <div class="space-y-1">
-          {#each solicitacao.historicoAlteracoes as hist}
-            <div class="text-xs text-base-content/70 flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <span>{formatarData(hist.data)}</span>
-              <span>-</span>
-              <span>{hist.acao}</span>
-            </div>
-          {/each}
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Ações (apenas para status aguardando_aprovacao) -->
-    {#if solicitacao.status === "aguardando_aprovacao"}
-      <div class="divider mt-6"></div>
-      
-      {#if !modoAjuste}
-        <!-- Modo Normal -->
-        <div class="space-y-4">
-          <div class="flex flex-wrap gap-2">
-            <button
-              type="button"
-              class="btn btn-success gap-2"
-              onclick={aprovar}
-              disabled={processando}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
-              Aprovar
-            </button>
-            
-            <button
-              type="button"
-              class="btn btn-info gap-2"
-              onclick={() => modoAjuste = true}
-              disabled={processando}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-              </svg>
-              Ajustar Datas e Aprovar
-            </button>
-          </div>
-          
-          <!-- Reprovar -->
-          <div class="card bg-base-200">
-            <div class="card-body p-4">
-              <h4 class="font-semibold text-sm mb-2">Reprovar Solicitação</h4>
-              <textarea
-                class="textarea textarea-bordered textarea-sm mb-2"
-                placeholder="Motivo da reprovação..."
-                bind:value={motivoReprovacao}
-                rows="2"
-              ></textarea>
-              <button
-                type="button"
-                class="btn btn-error btn-sm gap-2"
-                onclick={reprovar}
-                disabled={processando || !motivoReprovacao.trim()}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Reprovar
-              </button>
-            </div>
-          </div>
-        </div>
-      {:else}
-        <!-- Modo Ajuste -->
-        <div class="space-y-4">
-          <h4 class="font-semibold">Ajustar Períodos</h4>
-          {#each periodos as periodo, index}
-            <div class="card bg-base-200">
-              <div class="card-body p-4">
-                <h5 class="font-medium mb-2">Período {index + 1}</h5>
-                <div class="grid grid-cols-3 gap-3">
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-inicio-${index}`}>
-                      <span class="label-text text-xs">Início</span>
-                    </label>
-                    <input
-                      id={`ajuste-inicio-${index}`}
-                      type="date"
-                      class="input input-bordered input-sm"
-                      bind:value={periodo.dataInicio}
-                      onchange={() => calcularDias(periodo)}
-                    />
-                  </div>
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-fim-${index}`}>
-                      <span class="label-text text-xs">Fim</span>
-                    </label>
-                    <input
-                      id={`ajuste-fim-${index}`}
-                      type="date"
-                      class="input input-bordered input-sm"
-                      bind:value={periodo.dataFim}
-                      onchange={() => calcularDias(periodo)}
-                    />
-                  </div>
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-dias-${index}`}>
-                      <span class="label-text text-xs">Dias</span>
-                    </label>
-                    <div id={`ajuste-dias-${index}`} class="flex items-center h-9 px-3 bg-base-300 rounded-lg" role="textbox" aria-readonly="true">
-                      <span class="font-bold">{periodo.diasCorridos}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/each}
-          
-          <div class="flex gap-2">
-            <button
-              type="button"
-              class="btn btn-ghost btn-sm"
-              onclick={() => modoAjuste = false}
-              disabled={processando}
-            >
-              Cancelar Ajuste
-            </button>
-            <button
-              type="button"
-              class="btn btn-primary btn-sm gap-2"
-              onclick={ajustarEAprovar}
-              disabled={processando}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
-              Confirmar e Aprovar
-            </button>
-          </div>
-        </div>
-      {/if}
-    {/if}
-    
-    <!-- Motivo Reprovação (se reprovado) -->
-    {#if solicitacao.status === "reprovado" && solicitacao.motivoReprovacao}
-      <div class="alert alert-error mt-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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>
-        <div>
-          <div class="font-bold">Motivo da Reprovação:</div>
-          <div class="text-sm">{solicitacao.motivoReprovacao}</div>
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Erro -->
-    {#if erro}
-      <div class="alert alert-error mt-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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>
-    {/if}
-    
-    <!-- Botão Fechar -->
-    {#if onCancelar}
-      <div class="card-actions justify-end mt-4">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={onCancelar}
-          disabled={processando}
-        >
-          Fechar
-        </button>
-      </div>
-    {/if}
-  </div>
-</div>
+	<div class="card-body">
+		<div class="mb-4 flex items-start justify-between">
+			<div>
+				<h2 class="card-title text-2xl">
+					{solicitacao.funcionario?.nome || 'Funcionário'}
+				</h2>
+				<p class="text-base-content/70 mt-1 text-sm">
+					Ano de Referência: {solicitacao.anoReferencia}
+				</p>
+			</div>
+			<div class={`badge ${getStatusBadge(solicitacao.status)} badge-lg`}>
+				{getStatusTexto(solicitacao.status)}
+			</div>
+		</div>
 
+		<!-- Períodos Solicitados -->
+		<div class="mt-4">
+			<h3 class="mb-3 text-lg font-semibold">Períodos Solicitados</h3>
+			<div class="space-y-2">
+				{#each solicitacao.periodos as periodo, index}
+					<div class="bg-base-200 flex items-center gap-4 rounded-lg p-3">
+						<div class="badge badge-primary">{index + 1}</div>
+						<div class="grid flex-1 grid-cols-3 gap-2 text-sm">
+							<div>
+								<span class="text-base-content/70">Início:</span>
+								<span class="ml-1 font-semibold"
+									>{new Date(periodo.dataInicio).toLocaleDateString('pt-BR')}</span
+								>
+							</div>
+							<div>
+								<span class="text-base-content/70">Fim:</span>
+								<span class="ml-1 font-semibold"
+									>{new Date(periodo.dataFim).toLocaleDateString('pt-BR')}</span
+								>
+							</div>
+							<div>
+								<span class="text-base-content/70">Dias:</span>
+								<span class="text-primary ml-1 font-bold">{periodo.diasCorridos}</span>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Observações -->
+		{#if solicitacao.observacao}
+			<div class="mt-4">
+				<h3 class="mb-2 font-semibold">Observações</h3>
+				<div class="bg-base-200 rounded-lg p-3 text-sm">
+					{solicitacao.observacao}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Histórico -->
+		{#if solicitacao.historicoAlteracoes && solicitacao.historicoAlteracoes.length > 0}
+			<div class="mt-4">
+				<h3 class="mb-2 font-semibold">Histórico</h3>
+				<div class="space-y-1">
+					{#each solicitacao.historicoAlteracoes as hist}
+						<div class="text-base-content/70 flex items-center gap-2 text-xs">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-3 w-3"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<span>{formatarData(hist.data)}</span>
+							<span>-</span>
+							<span>{hist.acao}</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Ações (apenas para status aguardando_aprovacao) -->
+		{#if solicitacao.status === 'aguardando_aprovacao'}
+			<div class="divider mt-6"></div>
+
+			{#if !modoAjuste}
+				<!-- Modo Normal -->
+				<div class="space-y-4">
+					<div class="flex flex-wrap gap-2">
+						<button
+							type="button"
+							class="btn btn-success gap-2"
+							onclick={aprovar}
+							disabled={processando}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Aprovar
+						</button>
+
+						<button
+							type="button"
+							class="btn btn-info gap-2"
+							onclick={() => (modoAjuste = true)}
+							disabled={processando}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+								/>
+							</svg>
+							Ajustar Datas e Aprovar
+						</button>
+					</div>
+
+					<!-- Reprovar -->
+					<div class="card bg-base-200">
+						<div class="card-body p-4">
+							<h4 class="mb-2 text-sm font-semibold">Reprovar Solicitação</h4>
+							<textarea
+								class="textarea textarea-bordered textarea-sm mb-2"
+								placeholder="Motivo da reprovação..."
+								bind:value={motivoReprovacao}
+								rows="2"
+							></textarea>
+							<button
+								type="button"
+								class="btn btn-error btn-sm gap-2"
+								onclick={reprovar}
+								disabled={processando || !motivoReprovacao.trim()}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Reprovar
+							</button>
+						</div>
+					</div>
+				</div>
+			{:else}
+				<!-- Modo Ajuste -->
+				<div class="space-y-4">
+					<h4 class="font-semibold">Ajustar Períodos</h4>
+					{#each periodos as periodo, index}
+						<div class="card bg-base-200">
+							<div class="card-body p-4">
+								<h5 class="mb-2 font-medium">Período {index + 1}</h5>
+								<div class="grid grid-cols-3 gap-3">
+									<div class="form-control">
+										<label class="label" for={`ajuste-inicio-${index}`}>
+											<span class="label-text text-xs">Início</span>
+										</label>
+										<input
+											id={`ajuste-inicio-${index}`}
+											type="date"
+											class="input input-bordered input-sm"
+											bind:value={periodo.dataInicio}
+											onchange={() => calcularDias(periodo)}
+										/>
+									</div>
+									<div class="form-control">
+										<label class="label" for={`ajuste-fim-${index}`}>
+											<span class="label-text text-xs">Fim</span>
+										</label>
+										<input
+											id={`ajuste-fim-${index}`}
+											type="date"
+											class="input input-bordered input-sm"
+											bind:value={periodo.dataFim}
+											onchange={() => calcularDias(periodo)}
+										/>
+									</div>
+									<div class="form-control">
+										<label class="label" for={`ajuste-dias-${index}`}>
+											<span class="label-text text-xs">Dias</span>
+										</label>
+										<div
+											id={`ajuste-dias-${index}`}
+											class="bg-base-300 flex h-9 items-center rounded-lg px-3"
+											role="textbox"
+											aria-readonly="true"
+										>
+											<span class="font-bold">{periodo.diasCorridos}</span>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/each}
+
+					<div class="flex gap-2">
+						<button
+							type="button"
+							class="btn btn-sm"
+							onclick={() => (modoAjuste = false)}
+							disabled={processando}
+						>
+							Cancelar Ajuste
+						</button>
+						<button
+							type="button"
+							class="btn btn-primary btn-sm gap-2"
+							onclick={ajustarEAprovar}
+							disabled={processando}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Confirmar e Aprovar
+						</button>
+					</div>
+				</div>
+			{/if}
+		{/if}
+
+		<!-- Motivo Reprovação (se reprovado) -->
+		{#if solicitacao.status === 'reprovado' && solicitacao.motivoReprovacao}
+			<div class="alert alert-error mt-4">
+				<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>
+				<div>
+					<div class="font-bold">Motivo da Reprovação:</div>
+					<div class="text-sm">{solicitacao.motivoReprovacao}</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Erro -->
+		{#if erro}
+			<div class="alert alert-error mt-4">
+				<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>
+		{/if}
+
+		<!-- Botão Fechar -->
+		{#if onCancelar}
+			<div class="card-actions mt-4 justify-end">
+				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
+					Fechar
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/apps/web/src/lib/components/ErrorModal.svelte b/apps/web/src/lib/components/ErrorModal.svelte
index ba035d8..5ccc653 100644
--- a/apps/web/src/lib/components/ErrorModal.svelte
+++ b/apps/web/src/lib/components/ErrorModal.svelte
@@ -1,82 +1,73 @@
 <script lang="ts">
-  import { AlertCircle, X } from "lucide-svelte";
-  
-  interface Props {
-    open: boolean;
-    title?: string;
-    message: string;
-    details?: string;
-    onClose: () => void;
-  }
+	import { AlertCircle, X } from 'lucide-svelte';
 
-  let {
-    open = $bindable(false),
-    title = "Erro",
-    message,
-    details,
-    onClose,
-  }: Props = $props();
+	interface Props {
+		open: boolean;
+		title?: string;
+		message: string;
+		details?: string;
+		onClose: () => void;
+	}
 
-  let modalRef: HTMLDialogElement;
+	let { open = $bindable(false), title = 'Erro', message, details, onClose }: Props = $props();
 
-  function handleClose() {
-    open = false;
-    onClose();
-  }
+	let modalRef: HTMLDialogElement;
 
-  $effect(() => {
-    if (open && modalRef) {
-      modalRef.showModal();
-    } else if (!open && modalRef) {
-      modalRef.close();
-    }
-  });
+	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="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
-      <!-- Header -->
-      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
-        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2 text-error">
-          <AlertCircle class="w-5 h-5" strokeWidth={2} />
-          {title}
-        </h2>
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm btn-circle"
-          onclick={handleClose}
-          aria-label="Fechar"
-        >
-          <X class="w-5 h-5" />
-        </button>
-      </div>
+	<dialog
+		bind:this={modalRef}
+		class="modal"
+		onclick={(e) => e.target === e.currentTarget && handleClose()}
+	>
+		<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">
+					<AlertCircle class="h-5 w-5" strokeWidth={2} />
+					{title}
+				</h2>
+				<button
+					type="button"
+					class="btn btn-sm btn-circle"
+					onclick={handleClose}
+					aria-label="Fechar"
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
 
-      <!-- Content -->
-      <div class="px-6 py-6">
-        <p class="text-base-content mb-4">{message}</p>
-        {#if details}
-          <div class="bg-base-200 rounded-lg p-4 mb-4">
-            <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
-          </div>
-        {/if}
-      </div>
+			<!-- Content -->
+			<div class="px-6 py-6">
+				<p class="text-base-content mb-4">{message}</p>
+				{#if details}
+					<div class="bg-base-200 mb-4 rounded-lg p-4">
+						<p class="text-base-content/70 text-sm whitespace-pre-line">{details}</p>
+					</div>
+				{/if}
+			</div>
 
-      <!-- Footer -->
-      <div class="modal-action px-6 pb-6">
-        <button class="btn btn-primary" onclick={handleClose}>
-          Fechar
-        </button>
-      </div>
-    </div>
+			<!-- Footer -->
+			<div class="modal-action px-6 pb-6">
+				<button class="btn btn-primary" onclick={handleClose}> Fechar </button>
+			</div>
+		</div>
 
-    <form method="dialog" class="modal-backdrop">
-      <button type="button" onclick={handleClose}>fechar</button>
-    </form>
-  </dialog>
+		<form method="dialog" class="modal-backdrop">
+			<button type="button" onclick={handleClose}>fechar</button>
+		</form>
+	</dialog>
 {/if}
-
diff --git a/apps/web/src/lib/components/FuncionarioSelect.svelte b/apps/web/src/lib/components/FuncionarioSelect.svelte
index 544dcd4..7355f18 100644
--- a/apps/web/src/lib/components/FuncionarioSelect.svelte
+++ b/apps/web/src/lib/components/FuncionarioSelect.svelte
@@ -1,189 +1,187 @@
 <script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  interface Props {
-    value?: string; // Id do funcionário selecionado
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-  }
+	interface Props {
+		value?: string; // Id do funcionário selecionado
+		placeholder?: string;
+		disabled?: boolean;
+		required?: boolean;
+	}
 
-  let {
-    value = $bindable(),
-    placeholder = "Selecione um funcionário",
-    disabled = false,
-    required = false,
-  }: Props = $props();
+	let {
+		value = $bindable(),
+		placeholder = 'Selecione um funcionário',
+		disabled = false,
+		required = false
+	}: Props = $props();
 
-  let busca = $state("");
-  let mostrarDropdown = $state(false);
+	let busca = $state('');
+	let mostrarDropdown = $state(false);
 
-  // Buscar funcionários
-  const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+	// Buscar funcionários
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
 
-  const funcionarios = $derived(
-    funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []
-  );
+	const funcionarios = $derived(funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []);
 
-  // Filtrar funcionários baseado na busca
-  const funcionariosFiltrados = $derived.by(() => {
-    if (!busca.trim()) return funcionarios;
+	// Filtrar funcionários baseado na busca
+	const funcionariosFiltrados = $derived.by(() => {
+		if (!busca.trim()) return funcionarios;
 
-    const termo = busca.toLowerCase().trim();
-    return funcionarios.filter((f) => {
-      const nomeMatch = f.nome?.toLowerCase().includes(termo);
-      const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
-      const cpfMatch = f.cpf?.replace(/\D/g, "").includes(termo.replace(/\D/g, ""));
-      return nomeMatch || matriculaMatch || cpfMatch;
-    });
-  });
+		const termo = busca.toLowerCase().trim();
+		return funcionarios.filter((f) => {
+			const nomeMatch = f.nome?.toLowerCase().includes(termo);
+			const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
+			const cpfMatch = f.cpf?.replace(/\D/g, '').includes(termo.replace(/\D/g, ''));
+			return nomeMatch || matriculaMatch || cpfMatch;
+		});
+	});
 
-  // Funcionário selecionado
-  const funcionarioSelecionado = $derived.by(() => {
-    if (!value) return null;
-    return funcionarios.find((f) => f._id === value);
-  });
+	// Funcionário selecionado
+	const funcionarioSelecionado = $derived.by(() => {
+		if (!value) return null;
+		return funcionarios.find((f) => f._id === value);
+	});
 
-  function selecionarFuncionario(funcionarioId: string) {
-    value = funcionarioId;
-    const funcionario = funcionarios.find((f) => f._id === funcionarioId);
-    busca = funcionario?.nome || "";
-    mostrarDropdown = false;
-  }
+	function selecionarFuncionario(funcionarioId: string) {
+		value = funcionarioId;
+		const funcionario = funcionarios.find((f) => f._id === funcionarioId);
+		busca = funcionario?.nome || '';
+		mostrarDropdown = false;
+	}
 
-  function limpar() {
-    value = undefined;
-    busca = "";
-    mostrarDropdown = false;
-  }
+	function limpar() {
+		value = undefined;
+		busca = '';
+		mostrarDropdown = false;
+	}
 
-  // Atualizar busca quando funcionário selecionado mudar externamente
-  $effect(() => {
-    if (value && !busca) {
-      const funcionario = funcionarios.find((f) => f._id === value);
-      busca = funcionario?.nome || "";
-    }
-  });
+	// Atualizar busca quando funcionário selecionado mudar externamente
+	$effect(() => {
+		if (value && !busca) {
+			const funcionario = funcionarios.find((f) => f._id === value);
+			busca = funcionario?.nome || '';
+		}
+	});
 
-  function handleFocus() {
-    if (!disabled) {
-      mostrarDropdown = true;
-    }
-  }
+	function handleFocus() {
+		if (!disabled) {
+			mostrarDropdown = true;
+		}
+	}
 
-  function handleBlur() {
-    // Delay para permitir click no dropdown
-    setTimeout(() => {
-      mostrarDropdown = false;
-    }, 200);
-  }
+	function handleBlur() {
+		// Delay para permitir click no dropdown
+		setTimeout(() => {
+			mostrarDropdown = false;
+		}, 200);
+	}
 </script>
 
-<div class="form-control w-full relative">
-  <label class="label">
-    <span class="label-text font-medium">
-      Funcionário
-      {#if required}
-        <span class="text-error">*</span>
-      {/if}
-    </span>
-  </label>
+<div class="form-control relative w-full">
+	<label class="label">
+		<span class="label-text font-medium">
+			Funcionário
+			{#if required}
+				<span class="text-error">*</span>
+			{/if}
+		</span>
+	</label>
 
-  <div class="relative">
-    <input
-      type="text"
-      bind:value={busca}
-      {placeholder}
-      {disabled}
-      onfocus={handleFocus}
-      onblur={handleBlur}
-      class="input input-bordered w-full pr-10"
-      autocomplete="off"
-    />
+	<div class="relative">
+		<input
+			type="text"
+			bind:value={busca}
+			{placeholder}
+			{disabled}
+			onfocus={handleFocus}
+			onblur={handleBlur}
+			class="input input-bordered w-full pr-10"
+			autocomplete="off"
+		/>
 
-    {#if value}
-      <button
-        type="button"
-        onclick={limpar}
-        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle"
-        disabled={disabled}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
-    {:else}
-      <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5 text-base-content/40"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-          />
-        </svg>
-      </div>
-    {/if}
+		{#if value}
+			<button
+				type="button"
+				onclick={limpar}
+				class="btn btn-xs btn-circle absolute top-1/2 right-2 -translate-y-1/2"
+				{disabled}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		{:else}
+			<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-base-content/40 h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+			</div>
+		{/if}
 
-    {#if mostrarDropdown && funcionariosFiltrados.length > 0}
-      <div
-        class="absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto"
-      >
-        {#each funcionariosFiltrados as funcionario}
-          <button
-            type="button"
-            onclick={() => selecionarFuncionario(funcionario._id)}
-            class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors border-b border-base-200 last:border-b-0"
-          >
-            <div class="font-medium">{funcionario.nome}</div>
-            <div class="text-sm text-base-content/60">
-              {#if funcionario.matricula}
-                Matrícula: {funcionario.matricula}
-              {/if}
-              {#if funcionario.descricaoCargo}
-                {funcionario.matricula ? " • " : ""}
-                {funcionario.descricaoCargo}
-              {/if}
-            </div>
-          </button>
-        {/each}
-      </div>
-    {/if}
+		{#if mostrarDropdown && funcionariosFiltrados.length > 0}
+			<div
+				class="bg-base-100 border-base-300 absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border shadow-lg"
+			>
+				{#each funcionariosFiltrados as funcionario}
+					<button
+						type="button"
+						onclick={() => selecionarFuncionario(funcionario._id)}
+						class="hover:bg-base-200 border-base-200 w-full border-b px-4 py-3 text-left transition-colors last:border-b-0"
+					>
+						<div class="font-medium">{funcionario.nome}</div>
+						<div class="text-base-content/60 text-sm">
+							{#if funcionario.matricula}
+								Matrícula: {funcionario.matricula}
+							{/if}
+							{#if funcionario.descricaoCargo}
+								{funcionario.matricula ? ' • ' : ''}
+								{funcionario.descricaoCargo}
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+		{/if}
 
-    {#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
-      <div
-        class="absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg p-4 text-center text-base-content/60"
-      >
-        Nenhum funcionário encontrado
-      </div>
-    {/if}
-  </div>
+		{#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
+			<div
+				class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg"
+			>
+				Nenhum funcionário encontrado
+			</div>
+		{/if}
+	</div>
 
-  {#if funcionarioSelecionado}
-    <div class="text-xs text-base-content/60 mt-1">
-      Selecionado: {funcionarioSelecionado.nome}
-      {#if funcionarioSelecionado.matricula}
-        - {funcionarioSelecionado.matricula}
-      {/if}
-    </div>
-  {/if}
+	{#if funcionarioSelecionado}
+		<div class="text-base-content/60 mt-1 text-xs">
+			Selecionado: {funcionarioSelecionado.nome}
+			{#if funcionarioSelecionado.matricula}
+				- {funcionarioSelecionado.matricula}
+			{/if}
+		</div>
+	{/if}
 </div>
diff --git a/apps/web/src/lib/components/PrintModal.svelte b/apps/web/src/lib/components/PrintModal.svelte
index 566f550..283edd7 100644
--- a/apps/web/src/lib/components/PrintModal.svelte
+++ b/apps/web/src/lib/components/PrintModal.svelte
@@ -1,458 +1,515 @@
 <script lang="ts">
-  import jsPDF from 'jspdf';
-  import autoTable from 'jspdf-autotable';
-  import { maskCPF, maskCEP, maskPhone } from "$lib/utils/masks";
-  import { 
-    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
-    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS
-  } from "$lib/utils/constants";
-  import logoGovPE from "$lib/assets/logo_governo_PE.png";
-  import { CheckCircle2, X, Printer } from "lucide-svelte";
+	import jsPDF from 'jspdf';
+	import autoTable from 'jspdf-autotable';
+	import { maskCPF, maskCEP, maskPhone } from '$lib/utils/masks';
+	import {
+		SEXO_OPTIONS,
+		ESTADO_CIVIL_OPTIONS,
+		GRAU_INSTRUCAO_OPTIONS,
+		GRUPO_SANGUINEO_OPTIONS,
+		FATOR_RH_OPTIONS,
+		APOSENTADO_OPTIONS
+	} from '$lib/utils/constants';
+	import logoGovPE from '$lib/assets/logo_governo_PE.png';
+	import { CheckCircle2, X, Printer } from 'lucide-svelte';
 
-  interface Props {
-    funcionario: any;
-    onClose: () => void;
-  }
+	interface Props {
+		funcionario: any;
+		onClose: () => void;
+	}
 
-  let { funcionario, onClose }: Props = $props();
+	let { funcionario, onClose }: Props = $props();
 
-  let modalRef: HTMLDialogElement;
-  let generating = $state(false);
+	let modalRef: HTMLDialogElement;
+	let generating = $state(false);
 
-  // Seções selecionáveis
-  let sections = $state({
-    dadosPessoais: true,
-    filiacao: true,
-    naturalidade: true,
-    documentos: true,
-    formacao: true,
-    saude: true,
-    endereco: true,
-    contato: true,
-    cargo: true,
-    bancario: true,
-  });
+	// Seções selecionáveis
+	let sections = $state({
+		dadosPessoais: true,
+		filiacao: true,
+		naturalidade: true,
+		documentos: true,
+		formacao: true,
+		saude: true,
+		endereco: true,
+		contato: true,
+		cargo: true,
+		bancario: true
+	});
 
-  function getLabelFromOptions(value: string | undefined, options: Array<{value: string, label: string}>): string {
-    if (!value) return "-";
-    return options.find(opt => opt.value === value)?.label || value;
-  }
+	function getLabelFromOptions(
+		value: string | undefined,
+		options: Array<{ value: string; label: string }>
+	): string {
+		if (!value) return '-';
+		return options.find((opt) => opt.value === value)?.label || value;
+	}
 
-  function selectAll() {
-    Object.keys(sections).forEach(key => {
-      sections[key as keyof typeof sections] = true;
-    });
-  }
+	function selectAll() {
+		Object.keys(sections).forEach((key) => {
+			sections[key as keyof typeof sections] = true;
+		});
+	}
 
-  function deselectAll() {
-    Object.keys(sections).forEach(key => {
-      sections[key as keyof typeof sections] = false;
-    });
-  }
+	function deselectAll() {
+		Object.keys(sections).forEach((key) => {
+			sections[key as keyof typeof sections] = false;
+		});
+	}
 
-  async function gerarPDF() {
-    try {
-      generating = true;
+	async function gerarPDF() {
+		try {
+			generating = true;
 
-      const doc = new jsPDF();
+			const doc = new jsPDF();
 
-      // Logo no canto superior esquerdo (proporcional)
-      let yPosition = 20;
-      try {
-        const logoImg = new Image();
-        logoImg.src = logoGovPE;
-        await new Promise<void>((resolve, reject) => {
-          logoImg.onload = () => resolve();
-          logoImg.onerror = () => reject();
-          setTimeout(() => reject(), 3000); // timeout após 3s
-        });
-        
-        // Logo proporcional: largura 25mm, altura ajustada automaticamente
-        const logoWidth = 25;
-        const aspectRatio = logoImg.height / logoImg.width;
-        const logoHeight = logoWidth * aspectRatio;
-        
-        doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
-        
-        // Ajustar posição inicial do texto para ficar ao lado da logo
-        yPosition = Math.max(20, 10 + logoHeight / 2);
-      } catch (err) {
-        console.warn('Não foi possível carregar a logo:', err);
-      }
+			// Logo no canto superior esquerdo (proporcional)
+			let yPosition = 20;
+			try {
+				const logoImg = new Image();
+				logoImg.src = logoGovPE;
+				await new Promise<void>((resolve, reject) => {
+					logoImg.onload = () => resolve();
+					logoImg.onerror = () => reject();
+					setTimeout(() => reject(), 3000); // timeout após 3s
+				});
 
-      // Cabeçalho (alinhado com a logo)
-      doc.setFontSize(16);
-      doc.setFont('helvetica', 'bold');
-      doc.text('Secretaria de Esportes', 50, yPosition);
-      doc.setFontSize(12);
-      doc.setFont('helvetica', 'normal');
-      doc.text('Governo de Pernambuco', 50, yPosition + 7);
-      
-      yPosition = Math.max(45, yPosition + 25);
-      
-      // Título da ficha
-      doc.setFontSize(18);
-      doc.setFont('helvetica', 'bold');
-      doc.text('FICHA CADASTRAL DE FUNCIONÁRIO', 105, yPosition, { align: 'center' });
-      
-      yPosition += 8;
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 105, yPosition, { align: 'center' });
-      
-      yPosition += 12;
+				// Logo proporcional: largura 25mm, altura ajustada automaticamente
+				const logoWidth = 25;
+				const aspectRatio = logoImg.height / logoImg.width;
+				const logoHeight = logoWidth * aspectRatio;
 
-      // Dados Pessoais
-      if (sections.dadosPessoais) {
-        const dadosPessoais: any[] = [
-          ['Nome', funcionario.nome],
-          ['Matrícula', funcionario.matricula],
-          ['CPF', maskCPF(funcionario.cpf)],
-          ['RG', funcionario.rg],
-          ['Data Nascimento', funcionario.nascimento],
-        ];
+				doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
 
-        if (funcionario.rgOrgaoExpedidor) dadosPessoais.push(['Órgão Expedidor RG', funcionario.rgOrgaoExpedidor]);
-        if (funcionario.rgDataEmissao) dadosPessoais.push(['Data Emissão RG', funcionario.rgDataEmissao]);
-        if (funcionario.sexo) dadosPessoais.push(['Sexo', getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)]);
-        if (funcionario.estadoCivil) dadosPessoais.push(['Estado Civil', getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)]);
-        if (funcionario.nacionalidade) dadosPessoais.push(['Nacionalidade', funcionario.nacionalidade]);
+				// Ajustar posição inicial do texto para ficar ao lado da logo
+				yPosition = Math.max(20, 10 + logoHeight / 2);
+			} catch (err) {
+				console.warn('Não foi possível carregar a logo:', err);
+			}
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['DADOS PESSOAIS', '']],
-          body: dadosPessoais,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+			// Cabeçalho (alinhado com a logo)
+			doc.setFontSize(16);
+			doc.setFont('helvetica', 'bold');
+			doc.text('Secretaria de Esportes', 50, yPosition);
+			doc.setFontSize(12);
+			doc.setFont('helvetica', 'normal');
+			doc.text('Governo de Pernambuco', 50, yPosition + 7);
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			yPosition = Math.max(45, yPosition + 25);
 
-      // Filiação
-      if (sections.filiacao && (funcionario.nomePai || funcionario.nomeMae)) {
-        const filiacao: any[] = [];
-        if (funcionario.nomePai) filiacao.push(['Nome do Pai', funcionario.nomePai]);
-        if (funcionario.nomeMae) filiacao.push(['Nome da Mãe', funcionario.nomeMae]);
+			// Título da ficha
+			doc.setFontSize(18);
+			doc.setFont('helvetica', 'bold');
+			doc.text('FICHA CADASTRAL DE FUNCIONÁRIO', 105, yPosition, { align: 'center' });
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['FILIAÇÃO', '']],
-          body: filiacao,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+			yPosition += 8;
+			doc.setFontSize(10);
+			doc.setFont('helvetica', 'normal');
+			doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 105, yPosition, {
+				align: 'center'
+			});
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			yPosition += 12;
 
-      // Naturalidade
-      if (sections.naturalidade && (funcionario.naturalidade || funcionario.naturalidadeUF)) {
-        const naturalidade: any[] = [];
-        if (funcionario.naturalidade) naturalidade.push(['Cidade', funcionario.naturalidade]);
-        if (funcionario.naturalidadeUF) naturalidade.push(['UF', funcionario.naturalidadeUF]);
+			// Dados Pessoais
+			if (sections.dadosPessoais) {
+				const dadosPessoais: any[] = [
+					['Nome', funcionario.nome],
+					['Matrícula', funcionario.matricula],
+					['CPF', maskCPF(funcionario.cpf)],
+					['RG', funcionario.rg],
+					['Data Nascimento', funcionario.nascimento]
+				];
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['NATURALIDADE', '']],
-          body: naturalidade,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				if (funcionario.rgOrgaoExpedidor)
+					dadosPessoais.push(['Órgão Expedidor RG', funcionario.rgOrgaoExpedidor]);
+				if (funcionario.rgDataEmissao)
+					dadosPessoais.push(['Data Emissão RG', funcionario.rgDataEmissao]);
+				if (funcionario.sexo)
+					dadosPessoais.push(['Sexo', getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)]);
+				if (funcionario.estadoCivil)
+					dadosPessoais.push([
+						'Estado Civil',
+						getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)
+					]);
+				if (funcionario.nacionalidade)
+					dadosPessoais.push(['Nacionalidade', funcionario.nacionalidade]);
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['DADOS PESSOAIS', '']],
+					body: dadosPessoais,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Documentos
-      if (sections.documentos) {
-        const documentosData: any[] = [];
-        
-        if (funcionario.carteiraProfissionalNumero) {
-          documentosData.push(['Cart. Profissional', `Nº ${funcionario.carteiraProfissionalNumero}${funcionario.carteiraProfissionalSerie ? ' - Série: ' + funcionario.carteiraProfissionalSerie : ''}`]);
-        }
-        if (funcionario.reservistaNumero) {
-          documentosData.push(['Reservista', `Nº ${funcionario.reservistaNumero}${funcionario.reservistaSerie ? ' - Série: ' + funcionario.reservistaSerie : ''}`]);
-        }
-        if (funcionario.tituloEleitorNumero) {
-          let titulo = `Nº ${funcionario.tituloEleitorNumero}`;
-          if (funcionario.tituloEleitorZona) titulo += ` - Zona: ${funcionario.tituloEleitorZona}`;
-          if (funcionario.tituloEleitorSecao) titulo += ` - Seção: ${funcionario.tituloEleitorSecao}`;
-          documentosData.push(['Título Eleitor', titulo]);
-        }
-        if (funcionario.pisNumero) documentosData.push(['PIS/PASEP', funcionario.pisNumero]);
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        if (documentosData.length > 0) {
-          autoTable(doc, {
-            startY: yPosition,
-            head: [['DOCUMENTOS', '']],
-            body: documentosData,
-            theme: 'grid',
-            headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-            styles: { fontSize: 9 },
-          });
+			// Filiação
+			if (sections.filiacao && (funcionario.nomePai || funcionario.nomeMae)) {
+				const filiacao: any[] = [];
+				if (funcionario.nomePai) filiacao.push(['Nome do Pai', funcionario.nomePai]);
+				if (funcionario.nomeMae) filiacao.push(['Nome da Mãe', funcionario.nomeMae]);
 
-          yPosition = (doc as any).lastAutoTable.finalY + 10;
-        }
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['FILIAÇÃO', '']],
+					body: filiacao,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Formação
-      if (sections.formacao && (funcionario.grauInstrucao || funcionario.formacao)) {
-        const formacaoData: any[] = [];
-        if (funcionario.grauInstrucao) formacaoData.push(['Grau Instrução', getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)]);
-        if (funcionario.formacao) formacaoData.push(['Formação', funcionario.formacao]);
-        if (funcionario.formacaoRegistro) formacaoData.push(['Registro Nº', funcionario.formacaoRegistro]);
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['FORMAÇÃO', '']],
-          body: formacaoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+			// Naturalidade
+			if (sections.naturalidade && (funcionario.naturalidade || funcionario.naturalidadeUF)) {
+				const naturalidade: any[] = [];
+				if (funcionario.naturalidade) naturalidade.push(['Cidade', funcionario.naturalidade]);
+				if (funcionario.naturalidadeUF) naturalidade.push(['UF', funcionario.naturalidadeUF]);
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['NATURALIDADE', '']],
+					body: naturalidade,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Saúde
-      if (sections.saude && (funcionario.grupoSanguineo || funcionario.fatorRH)) {
-        const saudeData: any[] = [];
-        if (funcionario.grupoSanguineo) saudeData.push(['Grupo Sanguíneo', funcionario.grupoSanguineo]);
-        if (funcionario.fatorRH) saudeData.push(['Fator RH', getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)]);
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['SAÚDE', '']],
-          body: saudeData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+			// Documentos
+			if (sections.documentos) {
+				const documentosData: any[] = [];
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				if (funcionario.carteiraProfissionalNumero) {
+					documentosData.push([
+						'Cart. Profissional',
+						`Nº ${funcionario.carteiraProfissionalNumero}${funcionario.carteiraProfissionalSerie ? ' - Série: ' + funcionario.carteiraProfissionalSerie : ''}`
+					]);
+				}
+				if (funcionario.reservistaNumero) {
+					documentosData.push([
+						'Reservista',
+						`Nº ${funcionario.reservistaNumero}${funcionario.reservistaSerie ? ' - Série: ' + funcionario.reservistaSerie : ''}`
+					]);
+				}
+				if (funcionario.tituloEleitorNumero) {
+					let titulo = `Nº ${funcionario.tituloEleitorNumero}`;
+					if (funcionario.tituloEleitorZona) titulo += ` - Zona: ${funcionario.tituloEleitorZona}`;
+					if (funcionario.tituloEleitorSecao)
+						titulo += ` - Seção: ${funcionario.tituloEleitorSecao}`;
+					documentosData.push(['Título Eleitor', titulo]);
+				}
+				if (funcionario.pisNumero) documentosData.push(['PIS/PASEP', funcionario.pisNumero]);
 
-      // Endereço
-      if (sections.endereco) {
-        const enderecoData: any[] = [
-          ['Endereço', funcionario.endereco],
-          ['Cidade', funcionario.cidade],
-          ['UF', funcionario.uf],
-          ['CEP', maskCEP(funcionario.cep)],
-        ];
+				if (documentosData.length > 0) {
+					autoTable(doc, {
+						startY: yPosition,
+						head: [['DOCUMENTOS', '']],
+						body: documentosData,
+						theme: 'grid',
+						headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+						styles: { fontSize: 9 }
+					});
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['ENDEREÇO', '']],
-          body: enderecoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+					yPosition = (doc as any).lastAutoTable.finalY + 10;
+				}
+			}
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			// Formação
+			if (sections.formacao && (funcionario.grauInstrucao || funcionario.formacao)) {
+				const formacaoData: any[] = [];
+				if (funcionario.grauInstrucao)
+					formacaoData.push([
+						'Grau Instrução',
+						getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)
+					]);
+				if (funcionario.formacao) formacaoData.push(['Formação', funcionario.formacao]);
+				if (funcionario.formacaoRegistro)
+					formacaoData.push(['Registro Nº', funcionario.formacaoRegistro]);
 
-      // Contato
-      if (sections.contato) {
-        const contatoData: any[] = [
-          ['E-mail', funcionario.email],
-          ['Telefone', maskPhone(funcionario.telefone)],
-        ];
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['FORMAÇÃO', '']],
+					body: formacaoData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['CONTATO', '']],
-          body: contatoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			// Saúde
+			if (sections.saude && (funcionario.grupoSanguineo || funcionario.fatorRH)) {
+				const saudeData: any[] = [];
+				if (funcionario.grupoSanguineo)
+					saudeData.push(['Grupo Sanguíneo', funcionario.grupoSanguineo]);
+				if (funcionario.fatorRH)
+					saudeData.push(['Fator RH', getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)]);
 
-      // Nova página para cargo
-      if (yPosition > 200) {
-        doc.addPage();
-        yPosition = 20;
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['SAÚDE', '']],
+					body: saudeData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Cargo e Vínculo
-      if (sections.cargo) {
-        const cargoData: any[] = [
-          ['Tipo', funcionario.simboloTipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'],
-        ];
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        if (funcionario.simbolo) {
-          cargoData.push(['Símbolo', funcionario.simbolo.nome]);
-        }
-        if (funcionario.descricaoCargo) cargoData.push(['Descrição', funcionario.descricaoCargo]);
-        if (funcionario.admissaoData) cargoData.push(['Data Admissão', funcionario.admissaoData]);
-        if (funcionario.nomeacaoPortaria) cargoData.push(['Portaria', funcionario.nomeacaoPortaria]);
-        if (funcionario.nomeacaoData) cargoData.push(['Data Nomeação', funcionario.nomeacaoData]);
-        if (funcionario.nomeacaoDOE) cargoData.push(['DOE', funcionario.nomeacaoDOE]);
-        if (funcionario.pertenceOrgaoPublico) {
-          cargoData.push(['Pertence Órgão Público', 'Sim']);
-          if (funcionario.orgaoOrigem) cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
-        }
-        if (funcionario.aposentado && funcionario.aposentado !== 'nao') {
-          cargoData.push(['Aposentado', getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)]);
-        }
+			// Endereço
+			if (sections.endereco) {
+				const enderecoData: any[] = [
+					['Endereço', funcionario.endereco],
+					['Cidade', funcionario.cidade],
+					['UF', funcionario.uf],
+					['CEP', maskCEP(funcionario.cep)]
+				];
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['CARGO E VÍNCULO', '']],
-          body: cargoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['ENDEREÇO', '']],
+					body: enderecoData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-      // Dados Bancários
-      if (sections.bancario && funcionario.contaBradescoNumero) {
-        const bancarioData: any[] = [
-          ['Conta', `${funcionario.contaBradescoNumero}${funcionario.contaBradescoDV ? '-' + funcionario.contaBradescoDV : ''}`],
-        ];
-        if (funcionario.contaBradescoAgencia) bancarioData.push(['Agência', funcionario.contaBradescoAgencia]);
+			// Contato
+			if (sections.contato) {
+				const contatoData: any[] = [
+					['E-mail', funcionario.email],
+					['Telefone', maskPhone(funcionario.telefone)]
+				];
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['DADOS BANCÁRIOS - BRADESCO', '']],
-          body: bancarioData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['CONTATO', '']],
+					body: contatoData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-      // Adicionar rodapé em todas as páginas
-      const pageCount = (doc as any).internal.getNumberOfPages();
-      for (let i = 1; i <= pageCount; i++) {
-        doc.setPage(i);
-        doc.setFontSize(9);
-        doc.setFont('helvetica', 'normal');
-        doc.setTextColor(128, 128, 128);
-        doc.text('SGSE - Sistema de Gerenciamento da Secretaria de Esportes', 105, 285, { align: 'center' });
-        doc.text(`Página ${i} de ${pageCount}`, 195, 285, { align: 'right' });
-      }
+			// Nova página para cargo
+			if (yPosition > 200) {
+				doc.addPage();
+				yPosition = 20;
+			}
 
-      // Salvar PDF
-      doc.save(`Ficha_${funcionario.nome.replace(/ /g, '_')}_${new Date().getTime()}.pdf`);
+			// Cargo e Vínculo
+			if (sections.cargo) {
+				const cargoData: any[] = [
+					[
+						'Tipo',
+						funcionario.simboloTipo === 'cargo_comissionado'
+							? 'Cargo Comissionado'
+							: 'Função Gratificada'
+					]
+				];
 
-      onClose();
-    } catch (error) {
-      console.error('Erro ao gerar PDF:', error);
-      alert('Erro ao gerar PDF. Verifique o console para mais detalhes.');
-    } finally {
-      generating = false;
-    }
-  }
+				if (funcionario.simbolo) {
+					cargoData.push(['Símbolo', funcionario.simbolo.nome]);
+				}
+				if (funcionario.descricaoCargo) cargoData.push(['Descrição', funcionario.descricaoCargo]);
+				if (funcionario.admissaoData) cargoData.push(['Data Admissão', funcionario.admissaoData]);
+				if (funcionario.nomeacaoPortaria)
+					cargoData.push(['Portaria', funcionario.nomeacaoPortaria]);
+				if (funcionario.nomeacaoData) cargoData.push(['Data Nomeação', funcionario.nomeacaoData]);
+				if (funcionario.nomeacaoDOE) cargoData.push(['DOE', funcionario.nomeacaoDOE]);
+				if (funcionario.pertenceOrgaoPublico) {
+					cargoData.push(['Pertence Órgão Público', 'Sim']);
+					if (funcionario.orgaoOrigem) cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
+				}
+				if (funcionario.aposentado && funcionario.aposentado !== 'nao') {
+					cargoData.push([
+						'Aposentado',
+						getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)
+					]);
+				}
 
-  $effect(() => {
-    if (modalRef) {
-      modalRef.showModal();
-    }
-  });
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['CARGO E VÍNCULO', '']],
+					body: cargoData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
+
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
+
+			// Dados Bancários
+			if (sections.bancario && funcionario.contaBradescoNumero) {
+				const bancarioData: any[] = [
+					[
+						'Conta',
+						`${funcionario.contaBradescoNumero}${funcionario.contaBradescoDV ? '-' + funcionario.contaBradescoDV : ''}`
+					]
+				];
+				if (funcionario.contaBradescoAgencia)
+					bancarioData.push(['Agência', funcionario.contaBradescoAgencia]);
+
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['DADOS BANCÁRIOS - BRADESCO', '']],
+					body: bancarioData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
+
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
+
+			// Adicionar rodapé em todas as páginas
+			const pageCount = (doc as any).internal.getNumberOfPages();
+			for (let i = 1; i <= pageCount; i++) {
+				doc.setPage(i);
+				doc.setFontSize(9);
+				doc.setFont('helvetica', 'normal');
+				doc.setTextColor(128, 128, 128);
+				doc.text('SGSE - Sistema de Gerenciamento da Secretaria de Esportes', 105, 285, {
+					align: 'center'
+				});
+				doc.text(`Página ${i} de ${pageCount}`, 195, 285, { align: 'right' });
+			}
+
+			// Salvar PDF
+			doc.save(`Ficha_${funcionario.nome.replace(/ /g, '_')}_${new Date().getTime()}.pdf`);
+
+			onClose();
+		} catch (error) {
+			console.error('Erro ao gerar PDF:', error);
+			alert('Erro ao gerar PDF. Verifique o console para mais detalhes.');
+		} finally {
+			generating = false;
+		}
+	}
+
+	$effect(() => {
+		if (modalRef) {
+			modalRef.showModal();
+		}
+	});
 </script>
 
 <dialog bind:this={modalRef} class="modal">
-  <div class="modal-box max-w-4xl">
-    <h3 class="font-bold text-2xl mb-4">Imprimir Ficha Cadastral</h3>
-    <p class="text-sm text-base-content/70 mb-6">Selecione as seções que deseja incluir no PDF</p>
+	<div class="modal-box max-w-4xl">
+		<h3 class="mb-4 text-2xl font-bold">Imprimir Ficha Cadastral</h3>
+		<p class="text-base-content/70 mb-6 text-sm">Selecione as seções que deseja incluir no PDF</p>
 
-    <!-- Botões de seleção -->
-    <div class="flex gap-2 mb-6">
-      <button type="button" class="btn btn-sm btn-outline" onclick={selectAll}>
-        <CheckCircle2 class="h-4 w-4" strokeWidth={2} />
-        Selecionar Todos
-      </button>
-      <button type="button" class="btn btn-sm btn-outline" onclick={deselectAll}>
-        <X class="h-4 w-4" strokeWidth={2} />
-        Desmarcar Todos
-      </button>
-    </div>
+		<!-- Botões de seleção -->
+		<div class="mb-6 flex gap-2">
+			<button type="button" class="btn btn-sm btn-outline" onclick={selectAll}>
+				<CheckCircle2 class="h-4 w-4" strokeWidth={2} />
+				Selecionar Todos
+			</button>
+			<button type="button" class="btn btn-sm btn-outline" onclick={deselectAll}>
+				<X class="h-4 w-4" strokeWidth={2} />
+				Desmarcar Todos
+			</button>
+		</div>
 
-    <!-- Grid de checkboxes -->
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6 max-h-96 overflow-y-auto p-2 border rounded-lg bg-base-200">
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.dadosPessoais} />
-        <span class="label-text">Dados Pessoais</span>
-      </label>
+		<!-- Grid de checkboxes -->
+		<div
+			class="bg-base-200 mb-6 grid max-h-96 grid-cols-2 gap-4 overflow-y-auto rounded-lg border p-2 md:grid-cols-3"
+		>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-primary"
+					bind:checked={sections.dadosPessoais}
+				/>
+				<span class="label-text">Dados Pessoais</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.filiacao} />
-        <span class="label-text">Filiação</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.filiacao} />
+				<span class="label-text">Filiação</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.naturalidade} />
-        <span class="label-text">Naturalidade</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-primary"
+					bind:checked={sections.naturalidade}
+				/>
+				<span class="label-text">Naturalidade</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.documentos} />
-        <span class="label-text">Documentos</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-primary"
+					bind:checked={sections.documentos}
+				/>
+				<span class="label-text">Documentos</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.formacao} />
-        <span class="label-text">Formação</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.formacao} />
+				<span class="label-text">Formação</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.saude} />
-        <span class="label-text">Saúde</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.saude} />
+				<span class="label-text">Saúde</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.endereco} />
-        <span class="label-text">Endereço</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.endereco} />
+				<span class="label-text">Endereço</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.contato} />
-        <span class="label-text">Contato</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.contato} />
+				<span class="label-text">Contato</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.cargo} />
-        <span class="label-text">Cargo e Vínculo</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.cargo} />
+				<span class="label-text">Cargo e Vínculo</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.bancario} />
-        <span class="label-text">Dados Bancários</span>
-      </label>
-    </div>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.bancario} />
+				<span class="label-text">Dados Bancários</span>
+			</label>
+		</div>
 
-    <!-- Ações -->
-    <div class="modal-action">
-      <button type="button" class="btn btn-ghost" onclick={onClose} disabled={generating}>
-        Cancelar
-      </button>
-      <button type="button" class="btn btn-primary gap-2" onclick={gerarPDF} disabled={generating}>
-        {#if generating}
-          <span class="loading loading-spinner loading-sm"></span>
-          Gerando PDF...
-        {:else}
-          <Printer class="h-5 w-5" strokeWidth={2} />
-          Gerar PDF
-        {/if}
-      </button>
-    </div>
-  </div>
+		<!-- Ações -->
+		<div class="modal-action">
+			<button type="button" class="btn" onclick={onClose} disabled={generating}> Cancelar </button>
+			<button type="button" class="btn btn-primary gap-2" onclick={gerarPDF} disabled={generating}>
+				{#if generating}
+					<span class="loading loading-spinner loading-sm"></span>
+					Gerando PDF...
+				{:else}
+					<Printer class="h-5 w-5" strokeWidth={2} />
+					Gerar PDF
+				{/if}
+			</button>
+		</div>
+	</div>
 
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>
-
diff --git a/apps/web/src/lib/components/SolicitarFerias.svelte b/apps/web/src/lib/components/SolicitarFerias.svelte
index c61f7bc..84334d7 100644
--- a/apps/web/src/lib/components/SolicitarFerias.svelte
+++ b/apps/web/src/lib/components/SolicitarFerias.svelte
@@ -1,304 +1,353 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  
-  interface Periodo {
-    id: string;
-    dataInicio: string;
-    dataFim: string;
-    diasCorridos: number;
-  }
-  
-  interface Props {
-    funcionarioId: string;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
-  
-  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
-  
-  const client = useConvexClient();
-  
-  let anoReferencia = $state(new Date().getFullYear());
-  let observacao = $state("");
-  let periodos = $state<Periodo[]>([]);
-  let processando = $state(false);
-  let erro = $state("");
-  
-  // Adicionar primeiro período ao carregar
-  $effect(() => {
-    if (periodos.length === 0) {
-      adicionarPeriodo();
-    }
-  });
-  
-  function adicionarPeriodo() {
-    if (periodos.length >= 3) {
-      erro = "Máximo de 3 períodos permitidos";
-      return;
-    }
-    
-    periodos.push({
-      id: crypto.randomUUID(),
-      dataInicio: "",
-      dataFim: "",
-      diasCorridos: 0,
-    });
-  }
-  
-  function removerPeriodo(id: string) {
-    periodos = periodos.filter(p => p.id !== id);
-  }
-  
-  function calcularDias(periodo: Periodo) {
-    if (!periodo.dataInicio || !periodo.dataFim) {
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const inicio = new Date(periodo.dataInicio);
-    const fim = new Date(periodo.dataFim);
-    
-    if (fim < inicio) {
-      erro = "Data final não pode ser anterior à data inicial";
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const diff = fim.getTime() - inicio.getTime();
-    const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-    periodo.diasCorridos = dias;
-    erro = "";
-  }
-  
-  function validarPeriodos(): boolean {
-    if (periodos.length === 0) {
-      erro = "Adicione pelo menos 1 período";
-      return false;
-    }
-    
-    for (const periodo of periodos) {
-      if (!periodo.dataInicio || !periodo.dataFim) {
-        erro = "Preencha as datas de todos os períodos";
-        return false;
-      }
-      
-      if (periodo.diasCorridos <= 0) {
-        erro = "Todos os períodos devem ter pelo menos 1 dia";
-        return false;
-      }
-    }
-    
-    // Verificar sobreposição de períodos
-    for (let i = 0; i < periodos.length; i++) {
-      for (let j = i + 1; j < periodos.length; j++) {
-        const p1Inicio = new Date(periodos[i].dataInicio);
-        const p1Fim = new Date(periodos[i].dataFim);
-        const p2Inicio = new Date(periodos[j].dataInicio);
-        const p2Fim = new Date(periodos[j].dataFim);
-        
-        if (
-          (p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
-          (p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
-          (p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
-        ) {
-          erro = "Os períodos não podem se sobrepor";
-          return false;
-        }
-      }
-    }
-    
-    return true;
-  }
-  
-  async function enviarSolicitacao() {
-    if (!validarPeriodos()) return;
-    
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.criarSolicitacao, {
-        funcionarioId: funcionarioId as any,
-        anoReferencia,
-        periodos: periodos.map(p => ({
-          dataInicio: p.dataInicio,
-          dataFim: p.dataFim,
-          diasCorridos: p.diasCorridos,
-        })),
-        observacao: observacao || undefined,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e: any) {
-      erro = e.message || "Erro ao enviar solicitação";
-    } finally {
-      processando = false;
-    }
-  }
-  
-  $effect(() => {
-    periodos.forEach(p => calcularDias(p));
-  });
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+
+	interface Periodo {
+		id: string;
+		dataInicio: string;
+		dataFim: string;
+		diasCorridos: number;
+	}
+
+	interface Props {
+		funcionarioId: string;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
+
+	let { funcionarioId, onSucesso, onCancelar }: Props = $props();
+
+	const client = useConvexClient();
+
+	let anoReferencia = $state(new Date().getFullYear());
+	let observacao = $state('');
+	let periodos = $state<Periodo[]>([]);
+	let processando = $state(false);
+	let erro = $state('');
+
+	// Adicionar primeiro período ao carregar
+	$effect(() => {
+		if (periodos.length === 0) {
+			adicionarPeriodo();
+		}
+	});
+
+	function adicionarPeriodo() {
+		if (periodos.length >= 3) {
+			erro = 'Máximo de 3 períodos permitidos';
+			return;
+		}
+
+		periodos.push({
+			id: crypto.randomUUID(),
+			dataInicio: '',
+			dataFim: '',
+			diasCorridos: 0
+		});
+	}
+
+	function removerPeriodo(id: string) {
+		periodos = periodos.filter((p) => p.id !== id);
+	}
+
+	function calcularDias(periodo: Periodo) {
+		if (!periodo.dataInicio || !periodo.dataFim) {
+			periodo.diasCorridos = 0;
+			return;
+		}
+
+		const inicio = new Date(periodo.dataInicio);
+		const fim = new Date(periodo.dataFim);
+
+		if (fim < inicio) {
+			erro = 'Data final não pode ser anterior à data inicial';
+			periodo.diasCorridos = 0;
+			return;
+		}
+
+		const diff = fim.getTime() - inicio.getTime();
+		const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+		periodo.diasCorridos = dias;
+		erro = '';
+	}
+
+	function validarPeriodos(): boolean {
+		if (periodos.length === 0) {
+			erro = 'Adicione pelo menos 1 período';
+			return false;
+		}
+
+		for (const periodo of periodos) {
+			if (!periodo.dataInicio || !periodo.dataFim) {
+				erro = 'Preencha as datas de todos os períodos';
+				return false;
+			}
+
+			if (periodo.diasCorridos <= 0) {
+				erro = 'Todos os períodos devem ter pelo menos 1 dia';
+				return false;
+			}
+		}
+
+		// Verificar sobreposição de períodos
+		for (let i = 0; i < periodos.length; i++) {
+			for (let j = i + 1; j < periodos.length; j++) {
+				const p1Inicio = new Date(periodos[i].dataInicio);
+				const p1Fim = new Date(periodos[i].dataFim);
+				const p2Inicio = new Date(periodos[j].dataInicio);
+				const p2Fim = new Date(periodos[j].dataFim);
+
+				if (
+					(p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
+					(p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
+					(p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
+				) {
+					erro = 'Os períodos não podem se sobrepor';
+					return false;
+				}
+			}
+		}
+
+		return true;
+	}
+
+	async function enviarSolicitacao() {
+		if (!validarPeriodos()) return;
+
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.criarSolicitacao, {
+				funcionarioId: funcionarioId as any,
+				anoReferencia,
+				periodos: periodos.map((p) => ({
+					dataInicio: p.dataInicio,
+					dataFim: p.dataFim,
+					diasCorridos: p.diasCorridos
+				})),
+				observacao: observacao || undefined
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e: any) {
+			erro = e.message || 'Erro ao enviar solicitação';
+		} finally {
+			processando = false;
+		}
+	}
+
+	$effect(() => {
+		periodos.forEach((p) => calcularDias(p));
+	});
 </script>
 
 <div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <h2 class="card-title text-2xl mb-4">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-      </svg>
-      Solicitar Férias
-    </h2>
-    
-    <!-- Ano de Referência -->
-    <div class="form-control">
-      <label class="label" for="ano-referencia">
-        <span class="label-text font-semibold">Ano de Referência</span>
-      </label>
-      <input
-        id="ano-referencia"
-        type="number"
-        class="input input-bordered w-full max-w-xs"
-        bind:value={anoReferencia}
-        min={new Date().getFullYear()}
-        max={new Date().getFullYear() + 2}
-      />
-    </div>
-    
-    <!-- Períodos -->
-    <div class="mt-6">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="font-semibold text-lg">Períodos ({periodos.length}/3)</h3>
-        {#if periodos.length < 3}
-          <button
-            type="button"
-            class="btn btn-sm btn-primary gap-2"
-            onclick={adicionarPeriodo}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-            </svg>
-            Adicionar Período
-          </button>
-        {/if}
-      </div>
-      
-      <div class="space-y-4">
-        {#each periodos as periodo, index}
-          <div class="card bg-base-200 border border-base-300">
-            <div class="card-body p-4">
-              <div class="flex items-center justify-between mb-3">
-                <h4 class="font-medium">Período {index + 1}</h4>
-                {#if periodos.length > 1}
-                  <button
-                    type="button"
-                    class="btn btn-xs btn-error btn-square"
-                    aria-label="Remover período"
-                    onclick={() => removerPeriodo(periodo.id)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                {/if}
-              </div>
-              
-              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div class="form-control">
-                  <label class="label" for={`inicio-${periodo.id}`}>
-                    <span class="label-text">Data Início</span>
-                  </label>
-                  <input
-                    id={`inicio-${periodo.id}`}
-                    type="date"
-                    class="input input-bordered input-sm"
-                    bind:value={periodo.dataInicio}
-                    onchange={() => calcularDias(periodo)}
-                  />
-                </div>
-                
-                <div class="form-control">
-                  <label class="label" for={`fim-${periodo.id}`}>
-                    <span class="label-text">Data Fim</span>
-                  </label>
-                  <input
-                    id={`fim-${periodo.id}`}
-                    type="date"
-                    class="input input-bordered input-sm"
-                    bind:value={periodo.dataFim}
-                    onchange={() => calcularDias(periodo)}
-                  />
-                </div>
-                
-                <div class="form-control">
-                  <label class="label" for={`dias-${periodo.id}`}>
-                    <span class="label-text">Dias Corridos</span>
-                  </label>
-                  <div id={`dias-${periodo.id}`} class="flex items-center h-9 px-3 bg-base-300 rounded-lg" role="textbox" aria-readonly="true">
-                    <span class="font-bold text-lg">{periodo.diasCorridos}</span>
-                    <span class="ml-1 text-sm">dias</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-    
-    <!-- Observações -->
-    <div class="form-control mt-6">
-      <label class="label" for="observacao">
-        <span class="label-text font-semibold">Observações (opcional)</span>
-      </label>
-      <textarea
-        id="observacao"
-        class="textarea textarea-bordered h-24"
-        placeholder="Adicione observações sobre sua solicitação..."
-        bind:value={observacao}
-      ></textarea>
-    </div>
-    
-    <!-- Erro -->
-    {#if erro}
-      <div class="alert alert-error mt-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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>
-    {/if}
-    
-    <!-- Ações -->
-    <div class="card-actions justify-end mt-6">
-      {#if onCancelar}
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={onCancelar}
-          disabled={processando}
-        >
-          Cancelar
-        </button>
-      {/if}
-      <button
-        type="button"
-        class="btn btn-primary gap-2"
-        onclick={enviarSolicitacao}
-        disabled={processando}
-      >
-        {#if processando}
-          <span class="loading loading-spinner loading-sm"></span>
-          Enviando...
-        {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg>
-          Enviar Solicitação
-        {/if}
-      </button>
-    </div>
-  </div>
-</div>
+	<div class="card-body">
+		<h2 class="card-title mb-4 text-2xl">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+				/>
+			</svg>
+			Solicitar Férias
+		</h2>
 
+		<!-- Ano de Referência -->
+		<div class="form-control">
+			<label class="label" for="ano-referencia">
+				<span class="label-text font-semibold">Ano de Referência</span>
+			</label>
+			<input
+				id="ano-referencia"
+				type="number"
+				class="input input-bordered w-full max-w-xs"
+				bind:value={anoReferencia}
+				min={new Date().getFullYear()}
+				max={new Date().getFullYear() + 2}
+			/>
+		</div>
+
+		<!-- Períodos -->
+		<div class="mt-6">
+			<div class="mb-3 flex items-center justify-between">
+				<h3 class="text-lg font-semibold">Períodos ({periodos.length}/3)</h3>
+				{#if periodos.length < 3}
+					<button type="button" class="btn btn-sm btn-primary gap-2" onclick={adicionarPeriodo}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Adicionar Período
+					</button>
+				{/if}
+			</div>
+
+			<div class="space-y-4">
+				{#each periodos as periodo, index}
+					<div class="card bg-base-200 border-base-300 border">
+						<div class="card-body p-4">
+							<div class="mb-3 flex items-center justify-between">
+								<h4 class="font-medium">Período {index + 1}</h4>
+								{#if periodos.length > 1}
+									<button
+										type="button"
+										class="btn btn-xs btn-error btn-square"
+										aria-label="Remover período"
+										onclick={() => removerPeriodo(periodo.id)}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-3 w-3"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M6 18L18 6M6 6l12 12"
+											/>
+										</svg>
+									</button>
+								{/if}
+							</div>
+
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+								<div class="form-control">
+									<label class="label" for={`inicio-${periodo.id}`}>
+										<span class="label-text">Data Início</span>
+									</label>
+									<input
+										id={`inicio-${periodo.id}`}
+										type="date"
+										class="input input-bordered input-sm"
+										bind:value={periodo.dataInicio}
+										onchange={() => calcularDias(periodo)}
+									/>
+								</div>
+
+								<div class="form-control">
+									<label class="label" for={`fim-${periodo.id}`}>
+										<span class="label-text">Data Fim</span>
+									</label>
+									<input
+										id={`fim-${periodo.id}`}
+										type="date"
+										class="input input-bordered input-sm"
+										bind:value={periodo.dataFim}
+										onchange={() => calcularDias(periodo)}
+									/>
+								</div>
+
+								<div class="form-control">
+									<label class="label" for={`dias-${periodo.id}`}>
+										<span class="label-text">Dias Corridos</span>
+									</label>
+									<div
+										id={`dias-${periodo.id}`}
+										class="bg-base-300 flex h-9 items-center rounded-lg px-3"
+										role="textbox"
+										aria-readonly="true"
+									>
+										<span class="text-lg font-bold">{periodo.diasCorridos}</span>
+										<span class="ml-1 text-sm">dias</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Observações -->
+		<div class="form-control mt-6">
+			<label class="label" for="observacao">
+				<span class="label-text font-semibold">Observações (opcional)</span>
+			</label>
+			<textarea
+				id="observacao"
+				class="textarea textarea-bordered h-24"
+				placeholder="Adicione observações sobre sua solicitação..."
+				bind:value={observacao}
+			></textarea>
+		</div>
+
+		<!-- Erro -->
+		{#if erro}
+			<div class="alert alert-error mt-4">
+				<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>
+		{/if}
+
+		<!-- Ações -->
+		<div class="card-actions mt-6 justify-end">
+			{#if onCancelar}
+				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
+					Cancelar
+				</button>
+			{/if}
+			<button
+				type="button"
+				class="btn btn-primary gap-2"
+				onclick={enviarSolicitacao}
+				disabled={processando}
+			>
+				{#if processando}
+					<span class="loading loading-spinner loading-sm"></span>
+					Enviando...
+				{:else}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 13l4 4L19 7"
+						/>
+					</svg>
+					Enviar Solicitação
+				{/if}
+			</button>
+		</div>
+	</div>
+</div>
diff --git a/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte b/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
index 5ce13b6..67a8b81 100644
--- a/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
+++ b/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
@@ -1,503 +1,486 @@
 <script lang="ts">
-  import { useConvexClient, useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import CalendarioAusencias from "./CalendarioAusencias.svelte";
-  import ErrorModal from "../ErrorModal.svelte";
-  import { toast } from "svelte-sonner";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import CalendarioAusencias from './CalendarioAusencias.svelte';
+	import ErrorModal from '../ErrorModal.svelte';
+	import { toast } from 'svelte-sonner';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  interface Props {
-    funcionarioId: Id<"funcionarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		funcionarioId: Id<'funcionarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
+	let { funcionarioId, onSucesso, onCancelar }: Props = $props();
 
-  // Cliente Convex
-  const client = useConvexClient();
+	// Cliente Convex
+	const client = useConvexClient();
 
-  // Estado do wizard
-  let passoAtual = $state(1);
-  const totalPassos = 2;
+	// Estado do wizard
+	let passoAtual = $state(1);
+	const totalPassos = 2;
 
-  // Dados da solicitação
-  let dataInicio = $state<string>("");
-  let dataFim = $state<string>("");
-  let motivo = $state("");
-  let processando = $state(false);
+	// Dados da solicitação
+	let dataInicio = $state<string>('');
+	let dataFim = $state<string>('');
+	let motivo = $state('');
+	let processando = $state(false);
 
-  // Estados para modal de erro
-  let mostrarModalErro = $state(false);
-  let mensagemErroModal = $state("");
-  let detalhesErroModal = $state("");
+	// Estados para modal de erro
+	let mostrarModalErro = $state(false);
+	let mensagemErroModal = $state('');
+	let detalhesErroModal = $state('');
 
-  // Buscar ausências existentes para exibir no calendário
-  const ausenciasExistentesQuery = useQuery(
-    api.ausencias.listarMinhasSolicitacoes,
-    {
-      funcionarioId,
-    },
-  );
+	// Buscar ausências existentes para exibir no calendário
+	const ausenciasExistentesQuery = useQuery(api.ausencias.listarMinhasSolicitacoes, {
+		funcionarioId
+	});
 
-  // Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
-  const ausenciasExistentes = $derived(
-    (ausenciasExistentesQuery?.data || [])
-      .filter(
-        (a) => a.status === "aprovado" || a.status === "aguardando_aprovacao",
-      )
-      .map((a) => ({
-        dataInicio: a.dataInicio,
-        dataFim: a.dataFim,
-        status: a.status as "aguardando_aprovacao" | "aprovado",
-      })),
-  );
+	// Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
+	const ausenciasExistentes = $derived(
+		(ausenciasExistentesQuery?.data || [])
+			.filter((a) => a.status === 'aprovado' || a.status === 'aguardando_aprovacao')
+			.map((a) => ({
+				dataInicio: a.dataInicio,
+				dataFim: a.dataFim,
+				status: a.status as 'aguardando_aprovacao' | 'aprovado'
+			}))
+	);
 
-  // Calcular dias selecionados
-  function calcularDias(inicio: string, fim: string): number {
-    if (!inicio || !fim) return 0;
-    const dInicio = new Date(inicio);
-    const dFim = new Date(fim);
-    const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
-    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
-  }
+	// Calcular dias selecionados
+	function calcularDias(inicio: string, fim: string): number {
+		if (!inicio || !fim) return 0;
+		const dInicio = new Date(inicio);
+		const dFim = new Date(fim);
+		const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
+		return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  const totalDias = $derived(calcularDias(dataInicio, dataFim));
+	const totalDias = $derived(calcularDias(dataInicio, dataFim));
 
-  // Funções de navegação
-  function proximoPasso() {
-    if (passoAtual === 1) {
-      if (!dataInicio || !dataFim) {
-        toast.error("Selecione o período de ausência no calendário");
-        return;
-      }
+	// Funções de navegação
+	function proximoPasso() {
+		if (passoAtual === 1) {
+			if (!dataInicio || !dataFim) {
+				toast.error('Selecione o período de ausência no calendário');
+				return;
+			}
 
-      const hoje = new Date();
-      hoje.setHours(0, 0, 0, 0);
-      const inicio = new Date(dataInicio);
+			const hoje = new Date();
+			hoje.setHours(0, 0, 0, 0);
+			const inicio = new Date(dataInicio);
 
-      if (inicio < hoje) {
-        toast.error("A data de início não pode ser no passado");
-        return;
-      }
+			if (inicio < hoje) {
+				toast.error('A data de início não pode ser no passado');
+				return;
+			}
 
-      if (new Date(dataFim) < new Date(dataInicio)) {
-        toast.error("A data de fim deve ser maior ou igual à data de início");
-        return;
-      }
-    }
+			if (new Date(dataFim) < new Date(dataInicio)) {
+				toast.error('A data de fim deve ser maior ou igual à data de início');
+				return;
+			}
+		}
 
-    if (passoAtual < totalPassos) {
-      passoAtual++;
-    }
-  }
+		if (passoAtual < totalPassos) {
+			passoAtual++;
+		}
+	}
 
-  function passoAnterior() {
-    if (passoAtual > 1) {
-      passoAtual--;
-    }
-  }
+	function passoAnterior() {
+		if (passoAtual > 1) {
+			passoAtual--;
+		}
+	}
 
-  async function enviarSolicitacao() {
-    if (!dataInicio || !dataFim) {
-      toast.error("Selecione o período de ausência");
-      return;
-    }
+	async function enviarSolicitacao() {
+		if (!dataInicio || !dataFim) {
+			toast.error('Selecione o período de ausência');
+			return;
+		}
 
-    if (!motivo.trim() || motivo.trim().length < 10) {
-      toast.error("O motivo deve ter no mínimo 10 caracteres");
-      return;
-    }
+		if (!motivo.trim() || motivo.trim().length < 10) {
+			toast.error('O motivo deve ter no mínimo 10 caracteres');
+			return;
+		}
 
-    try {
-      processando = true;
-      mostrarModalErro = false;
-      mensagemErroModal = "";
+		try {
+			processando = true;
+			mostrarModalErro = false;
+			mensagemErroModal = '';
 
-      await client.mutation(api.ausencias.criarSolicitacao, {
-        funcionarioId,
-        dataInicio,
-        dataFim,
-        motivo: motivo.trim(),
-      });
+			await client.mutation(api.ausencias.criarSolicitacao, {
+				funcionarioId,
+				dataInicio,
+				dataFim,
+				motivo: motivo.trim()
+			});
 
-      toast.success("Solicitação de ausência criada com sucesso!");
+			toast.success('Solicitação de ausência criada com sucesso!');
 
-      if (onSucesso) {
-        onSucesso();
-      }
-    } catch (error) {
-      console.error("Erro ao criar solicitação:", error);
-      const mensagemErro =
-        error instanceof Error ? error.message : String(error);
+			if (onSucesso) {
+				onSucesso();
+			}
+		} catch (error) {
+			console.error('Erro ao criar solicitação:', error);
+			const mensagemErro = error instanceof Error ? error.message : String(error);
 
-      // Verificar se é erro de sobreposição de período
-      if (
-        mensagemErro.includes("Já existe uma solicitação") ||
-        mensagemErro.includes("já existe") ||
-        mensagemErro.includes("solicitação aprovada ou pendente")
-      ) {
-        mensagemErroModal = "Não é possível criar esta solicitação.";
-        detalhesErroModal = `Já existe uma solicitação aprovada ou pendente para o período selecionado:\n\nPeríodo selecionado: ${new Date(dataInicio).toLocaleDateString("pt-BR")} até ${new Date(dataFim).toLocaleDateString("pt-BR")}\n\nPor favor, escolha um período diferente ou aguarde a resposta da solicitação existente.`;
-        mostrarModalErro = true;
-      } else {
-        // Outros erros continuam usando toast
-        toast.error(mensagemErro);
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			// Verificar se é erro de sobreposição de período
+			if (
+				mensagemErro.includes('Já existe uma solicitação') ||
+				mensagemErro.includes('já existe') ||
+				mensagemErro.includes('solicitação aprovada ou pendente')
+			) {
+				mensagemErroModal = 'Não é possível criar esta solicitação.';
+				detalhesErroModal = `Já existe uma solicitação aprovada ou pendente para o período selecionado:\n\nPeríodo selecionado: ${new Date(dataInicio).toLocaleDateString('pt-BR')} até ${new Date(dataFim).toLocaleDateString('pt-BR')}\n\nPor favor, escolha um período diferente ou aguarde a resposta da solicitação existente.`;
+				mostrarModalErro = true;
+			} else {
+				// Outros erros continuam usando toast
+				toast.error(mensagemErro);
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalErro() {
-    mostrarModalErro = false;
-    mensagemErroModal = "";
-    detalhesErroModal = "";
-  }
+	function fecharModalErro() {
+		mostrarModalErro = false;
+		mensagemErroModal = '';
+		detalhesErroModal = '';
+	}
 
-  function handlePeriodoSelecionado(periodo: {
-    dataInicio: string;
-    dataFim: string;
-  }) {
-    dataInicio = periodo.dataInicio;
-    dataFim = periodo.dataFim;
-  }
+	function handlePeriodoSelecionado(periodo: { dataInicio: string; dataFim: string }) {
+		dataInicio = periodo.dataInicio;
+		dataFim = periodo.dataFim;
+	}
 </script>
 
 <div class="wizard-ausencia">
-  <!-- Header -->
-  <div class="mb-6">
-    <p class="text-base-content/70">
-      Solicite uma ausência para assuntos particulares
-    </p>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<p class="text-base-content/70">Solicite uma ausência para assuntos particulares</p>
+	</div>
 
-  <!-- Indicador de progresso -->
-  <div class="steps mb-8">
-    <div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
-      <div class="step-item">
-        <div class="step-marker">
-          {#if passoAtual > 1}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          {:else}
-            {passoAtual}
-          {/if}
-        </div>
-        <div class="step-content">
-          <div class="step-title">Selecionar Período</div>
-          <div class="step-description">Escolha as datas no calendário</div>
-        </div>
-      </div>
-    </div>
-    <div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
-      <div class="step-item">
-        <div class="step-marker">
-          {#if passoAtual > 2}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          {:else}
-            2
-          {/if}
-        </div>
-        <div class="step-content">
-          <div class="step-title">Informar Motivo</div>
-          <div class="step-description">Descreva o motivo da ausência</div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Indicador de progresso -->
+	<div class="steps mb-8">
+		<div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
+			<div class="step-item">
+				<div class="step-marker">
+					{#if passoAtual > 1}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					{:else}
+						{passoAtual}
+					{/if}
+				</div>
+				<div class="step-content">
+					<div class="step-title">Selecionar Período</div>
+					<div class="step-description">Escolha as datas no calendário</div>
+				</div>
+			</div>
+		</div>
+		<div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
+			<div class="step-item">
+				<div class="step-marker">
+					{#if passoAtual > 2}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					{:else}
+						2
+					{/if}
+				</div>
+				<div class="step-content">
+					<div class="step-title">Informar Motivo</div>
+					<div class="step-description">Descreva o motivo da ausência</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Conteúdo dos passos -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      {#if passoAtual === 1}
-        <!-- Passo 1: Selecionar Período -->
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-2xl font-bold mb-2">Selecione o Período</h3>
-            <p class="text-base-content/70">
-              Clique e arraste no calendário para selecionar o período de
-              ausência
-            </p>
-          </div>
+	<!-- Conteúdo dos passos -->
+	<div class="card bg-base-100 shadow-xl">
+		<div class="card-body">
+			{#if passoAtual === 1}
+				<!-- Passo 1: Selecionar Período -->
+				<div class="space-y-6">
+					<div>
+						<h3 class="mb-2 text-2xl font-bold">Selecione o Período</h3>
+						<p class="text-base-content/70">
+							Clique e arraste no calendário para selecionar o período de ausência
+						</p>
+					</div>
 
-          {#if ausenciasExistentesQuery === undefined}
-            <div class="flex items-center justify-center py-12">
-              <span class="loading loading-spinner loading-lg"></span>
-              <span class="ml-4 text-base-content/70"
-                >Carregando ausências existentes...</span
-              >
-            </div>
-          {:else}
-            <CalendarioAusencias
-              {dataInicio}
-              {dataFim}
-              {ausenciasExistentes}
-              onPeriodoSelecionado={handlePeriodoSelecionado}
-            />
-          {/if}
+					{#if ausenciasExistentesQuery === undefined}
+						<div class="flex items-center justify-center py-12">
+							<span class="loading loading-spinner loading-lg"></span>
+							<span class="text-base-content/70 ml-4">Carregando ausências existentes...</span>
+						</div>
+					{:else}
+						<CalendarioAusencias
+							{dataInicio}
+							{dataFim}
+							{ausenciasExistentes}
+							onPeriodoSelecionado={handlePeriodoSelecionado}
+						/>
+					{/if}
 
-          {#if dataInicio && dataFim}
-            <div class="alert alert-success shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                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>
-              <div>
-                <h4 class="font-bold">Período selecionado!</h4>
-                <p>
-                  De {new Date(dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                  {new Date(dataFim).toLocaleDateString("pt-BR")} ({totalDias} dias)
-                </p>
-              </div>
-            </div>
-          {/if}
-        </div>
-      {:else if passoAtual === 2}
-        <!-- Passo 2: Informar Motivo -->
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-2xl font-bold mb-2">Informe o Motivo</h3>
-            <p class="text-base-content/70">
-              Descreva o motivo da sua solicitação de ausência (mínimo 10
-              caracteres)
-            </p>
-          </div>
+					{#if dataInicio && dataFim}
+						<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>
+							<div>
+								<h4 class="font-bold">Período selecionado!</h4>
+								<p>
+									De {new Date(dataInicio).toLocaleDateString('pt-BR')} até{' '}
+									{new Date(dataFim).toLocaleDateString('pt-BR')} ({totalDias} dias)
+								</p>
+							</div>
+						</div>
+					{/if}
+				</div>
+			{:else if passoAtual === 2}
+				<!-- Passo 2: Informar Motivo -->
+				<div class="space-y-6">
+					<div>
+						<h3 class="mb-2 text-2xl font-bold">Informe o Motivo</h3>
+						<p class="text-base-content/70">
+							Descreva o motivo da sua solicitação de ausência (mínimo 10 caracteres)
+						</p>
+					</div>
 
-          <!-- Resumo do período -->
-          {#if dataInicio && dataFim}
-            <div
-              class="card bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 border-2 border-orange-500/30"
-            >
-              <div class="card-body">
-                <h4 class="card-title text-orange-700 dark:text-orange-400">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
-                  Resumo do Período
-                </h4>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
-                  <div>
-                    <p class="text-sm text-base-content/70">Data Início</p>
-                    <p class="font-bold">
-                      {new Date(dataInicio).toLocaleDateString("pt-BR")}
-                    </p>
-                  </div>
-                  <div>
-                    <p class="text-sm text-base-content/70">Data Fim</p>
-                    <p class="font-bold">
-                      {new Date(dataFim).toLocaleDateString("pt-BR")}
-                    </p>
-                  </div>
-                  <div>
-                    <p class="text-sm text-base-content/70">Total de Dias</p>
-                    <p
-                      class="font-bold text-xl text-orange-600 dark:text-orange-400"
-                    >
-                      {totalDias} dias
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/if}
+					<!-- Resumo do período -->
+					{#if dataInicio && dataFim}
+						<div
+							class="card border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+						>
+							<div class="card-body">
+								<h4 class="card-title text-orange-700 dark:text-orange-400">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
+									</svg>
+									Resumo do Período
+								</h4>
+								<div class="mt-2 grid grid-cols-1 gap-4 md:grid-cols-3">
+									<div>
+										<p class="text-base-content/70 text-sm">Data Início</p>
+										<p class="font-bold">
+											{new Date(dataInicio).toLocaleDateString('pt-BR')}
+										</p>
+									</div>
+									<div>
+										<p class="text-base-content/70 text-sm">Data Fim</p>
+										<p class="font-bold">
+											{new Date(dataFim).toLocaleDateString('pt-BR')}
+										</p>
+									</div>
+									<div>
+										<p class="text-base-content/70 text-sm">Total de Dias</p>
+										<p class="text-xl font-bold text-orange-600 dark:text-orange-400">
+											{totalDias} dias
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/if}
 
-          <!-- Campo de motivo -->
-          <div class="form-control">
-            <label class="label" for="motivo">
-              <span class="label-text font-bold">Motivo da Ausência</span>
-              <span class="label-text-alt">
-                {motivo.trim().length}/10 caracteres mínimos
-              </span>
-            </label>
-            <textarea
-              id="motivo"
-              class="textarea textarea-bordered h-32 text-lg"
-              placeholder="Descreva o motivo da sua solicitação de ausência..."
-              bind:value={motivo}
-              maxlength={500}
-            ></textarea>
-            <label class="label">
-              <span class="label-text-alt text-base-content/70">
-                Mínimo 10 caracteres. Seja claro e objetivo.
-              </span>
-            </label>
-          </div>
+					<!-- Campo de motivo -->
+					<div class="form-control">
+						<label class="label" for="motivo">
+							<span class="label-text font-bold">Motivo da Ausência</span>
+							<span class="label-text-alt">
+								{motivo.trim().length}/10 caracteres mínimos
+							</span>
+						</label>
+						<textarea
+							id="motivo"
+							class="textarea textarea-bordered h-32 text-lg"
+							placeholder="Descreva o motivo da sua solicitação de ausência..."
+							bind:value={motivo}
+							maxlength={500}
+						></textarea>
+						<label class="label">
+							<span class="label-text-alt text-base-content/70">
+								Mínimo 10 caracteres. Seja claro e objetivo.
+							</span>
+						</label>
+					</div>
 
-          {#if motivo.trim().length > 0 && motivo.trim().length < 10}
-            <div class="alert alert-warning shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
-              <span>O motivo deve ter no mínimo 10 caracteres</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
+					{#if motivo.trim().length > 0 && motivo.trim().length < 10}
+						<div class="alert alert-warning 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+								/>
+							</svg>
+							<span>O motivo deve ter no mínimo 10 caracteres</span>
+						</div>
+					{/if}
+				</div>
+			{/if}
 
-      <!-- Botões de navegação -->
-      <div class="card-actions justify-between mt-6">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={passoAnterior}
-          disabled={passoAtual === 1 || processando}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 mr-2"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
-          Voltar
-        </button>
+			<!-- Botões de navegação -->
+			<div class="card-actions mt-6 justify-between">
+				<button
+					type="button"
+					class="btn"
+					onclick={passoAnterior}
+					disabled={passoAtual === 1 || processando}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="mr-2 h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+					Voltar
+				</button>
 
-        {#if passoAtual < totalPassos}
-          <button
-            type="button"
-            class="btn btn-primary"
-            onclick={proximoPasso}
-            disabled={processando}
-          >
-            Próximo
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 ml-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </button>
-        {:else}
-          <button
-            type="button"
-            class="btn btn-success"
-            onclick={enviarSolicitacao}
-            disabled={processando || motivo.trim().length < 10}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-              Enviando...
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 mr-2"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-              Enviar Solicitação
-            {/if}
-          </button>
-        {/if}
-      </div>
+				{#if passoAtual < totalPassos}
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={proximoPasso}
+						disabled={processando}
+					>
+						Próximo
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="ml-2 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</button>
+				{:else}
+					<button
+						type="button"
+						class="btn btn-success"
+						onclick={enviarSolicitacao}
+						disabled={processando || motivo.trim().length < 10}
+					>
+						{#if processando}
+							<span class="loading loading-spinner"></span>
+							Enviando...
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="mr-2 h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Enviar Solicitação
+						{/if}
+					</button>
+				{/if}
+			</div>
 
-      <!-- Botão cancelar -->
-      <div class="mt-4 text-center">
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm"
-          onclick={() => {
-            if (onCancelar) onCancelar();
-          }}
-          disabled={processando}
-        >
-          Cancelar
-        </button>
-      </div>
-    </div>
-  </div>
+			<!-- Botão cancelar -->
+			<div class="mt-4 text-center">
+				<button
+					type="button"
+					class="btn btn-sm"
+					onclick={() => {
+						if (onCancelar) onCancelar();
+					}}
+					disabled={processando}
+				>
+					Cancelar
+				</button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  open={mostrarModalErro}
-  title="Período Indisponível"
-  message={mensagemErroModal || "Já existe uma solicitação para este período."}
-  details={detalhesErroModal}
-  onClose={fecharModalErro}
+	open={mostrarModalErro}
+	title="Período Indisponível"
+	message={mensagemErroModal || 'Já existe uma solicitação para este período.'}
+	details={detalhesErroModal}
+	onClose={fecharModalErro}
 />
 
 <style>
-  .wizard-ausencia {
-    max-width: 1000px;
-    margin: 0 auto;
-  }
+	.wizard-ausencia {
+		max-width: 1000px;
+		margin: 0 auto;
+	}
 </style>
diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte
index 6bf9dad..14da539 100644
--- a/apps/web/src/lib/components/chat/ChatWindow.svelte
+++ b/apps/web/src/lib/components/chat/ChatWindow.svelte
@@ -416,7 +416,7 @@
 				</h2>
 				<button
 					type="button"
-					class="btn btn-ghost btn-sm btn-circle"
+					class="btn btn-sm btn-circle"
 					onclick={() => (showNotificacaoModal = false)}
 				>
 					<X class="h-5 w-5" />
@@ -480,11 +480,7 @@
 						></textarea>
 					</div>
 					<div class="flex gap-2">
-						<button
-							type="button"
-							class="btn btn-ghost flex-1"
-							onclick={() => (showNotificacaoModal = false)}
-						>
+						<button type="button" class="btn flex-1" onclick={() => (showNotificacaoModal = false)}>
 							Cancelar
 						</button>
 						<button type="submit" class="btn btn-primary flex-1"> Enviar </button>
diff --git a/apps/web/src/lib/components/chat/NewConversationModal.svelte b/apps/web/src/lib/components/chat/NewConversationModal.svelte
index 0fb65a8..6adb2cc 100644
--- a/apps/web/src/lib/components/chat/NewConversationModal.svelte
+++ b/apps/web/src/lib/components/chat/NewConversationModal.svelte
@@ -97,6 +97,8 @@
 	}
 
 	async function handleCriarGrupo() {
+		console.log('selectedUsers', selectedUsers);
+
 		if (selectedUsers.length < 2) {
 			alert('Selecione pelo menos 2 participantes');
 			return;
@@ -323,7 +325,7 @@
 									{usuario.nome}
 								</p>
 								<p class="text-base-content/60 truncate text-sm">
-									{usuario.setor || usuario.email || usuario.matricula || 'Sem informações'}
+									{usuario.email || usuario.matricula || 'Sem informações'}
 								</p>
 							</div>
 
@@ -334,7 +336,11 @@
 										type="checkbox"
 										class="checkbox checkbox-primary checkbox-lg"
 										checked={isSelected}
-										readonly
+										tabindex="-1"
+										onclick={(e) => {
+											e.stopPropagation();
+											if (!loading) toggleUserSelection(usuario._id);
+										}}
 									/>
 								</div>
 							{:else}
diff --git a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
index fed2242..b813bdc 100644
--- a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
+++ b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
@@ -1,487 +1,435 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import UserAvatar from "./UserAvatar.svelte";
-  import UserStatusBadge from "./UserStatusBadge.svelte";
-  import {
-    X,
-    Users,
-    UserPlus,
-    ArrowUp,
-    ArrowDown,
-    Trash2,
-    Search,
-  } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import UserAvatar from './UserAvatar.svelte';
+	import UserStatusBadge from './UserStatusBadge.svelte';
+	import { X, Users, UserPlus, ArrowUp, ArrowDown, Trash2, Search } from 'lucide-svelte';
 
-  interface Props {
-    conversaId: Id<"conversas">;
-    isAdmin: boolean;
-    onClose: () => void;
-  }
+	interface Props {
+		conversaId: Id<'conversas'>;
+		isAdmin: boolean;
+		onClose: () => void;
+	}
 
-  let { conversaId, isAdmin, onClose }: Props = $props();
+	let { conversaId, isAdmin, onClose }: Props = $props();
 
-  const client = useConvexClient();
-  const conversas = useQuery(api.chat.listarConversas, {});
-  const todosUsuariosQuery = useQuery(api.chat.listarTodosUsuarios, {});
+	const client = useConvexClient();
+	const conversas = useQuery(api.chat.listarConversas, {});
+	const todosUsuariosQuery = useQuery(api.chat.listarTodosUsuarios, {});
 
-  let activeTab = $state<"participantes" | "adicionar">("participantes");
-  let searchQuery = $state("");
-  let loading = $state<string | null>(null);
-  let error = $state<string | null>(null);
+	let activeTab = $state<'participantes' | 'adicionar'>('participantes');
+	let searchQuery = $state('');
+	let loading = $state<string | null>(null);
+	let error = $state<string | null>(null);
 
-  const conversa = $derived(() => {
-    if (!conversas?.data) return null;
-    return conversas.data.find((c: any) => c._id === conversaId);
-  });
+	const conversa = $derived(() => {
+		if (!conversas?.data) return null;
+		return conversas.data.find((c: any) => c._id === conversaId);
+	});
 
-  const todosUsuarios = $derived(() => {
-    return todosUsuariosQuery?.data || [];
-  });
+	const todosUsuarios = $derived(() => {
+		return todosUsuariosQuery?.data || [];
+	});
 
-  const participantes = $derived(() => {
-    try {
-      const conv = conversa();
-      const usuarios = todosUsuarios();
-      if (!conv || !usuarios || usuarios.length === 0) return [];
+	const participantes = $derived(() => {
+		try {
+			const conv = conversa();
+			const usuarios = todosUsuarios();
+			if (!conv || !usuarios || usuarios.length === 0) return [];
 
-      const participantesInfo = conv.participantesInfo || [];
-      if (!Array.isArray(participantesInfo) || participantesInfo.length === 0)
-        return [];
+			const participantesInfo = conv.participantesInfo || [];
+			if (!Array.isArray(participantesInfo) || participantesInfo.length === 0) return [];
 
-      return participantesInfo
-        .map((p: any) => {
-          try {
-            // p pode ser um objeto com _id ou apenas um ID
-            const participanteId = p?._id || p;
-            if (!participanteId) return null;
+			return participantesInfo
+				.map((p: any) => {
+					try {
+						// p pode ser um objeto com _id ou apenas um ID
+						const participanteId = p?._id || p;
+						if (!participanteId) return null;
 
-            const usuario = usuarios.find((u: any) => {
-              try {
-                return String(u?._id) === String(participanteId);
-              } catch {
-                return false;
-              }
-            });
-            if (!usuario) return null;
+						const usuario = usuarios.find((u: any) => {
+							try {
+								return String(u?._id) === String(participanteId);
+							} catch {
+								return false;
+							}
+						});
+						if (!usuario) return null;
 
-            // Combinar dados do usuário com dados do participante (se p for objeto)
-            return {
-              ...usuario,
-              ...(typeof p === "object" && p !== null && p !== undefined
-                ? p
-                : {}),
-              // Garantir que _id existe e priorizar o do usuario
-              _id: usuario._id,
-            };
-          } catch (err) {
-            console.error("Erro ao processar participante:", err, p);
-            return null;
-          }
-        })
-        .filter((p: any) => p !== null && p._id);
-    } catch (err) {
-      console.error("Erro ao calcular participantes:", err);
-      return [];
-    }
-  });
+						// Combinar dados do usuário com dados do participante (se p for objeto)
+						return {
+							...usuario,
+							...(typeof p === 'object' && p !== null && p !== undefined ? p : {}),
+							// Garantir que _id existe e priorizar o do usuario
+							_id: usuario._id
+						};
+					} catch (err) {
+						console.error('Erro ao processar participante:', err, p);
+						return null;
+					}
+				})
+				.filter((p: any) => p !== null && p._id);
+		} catch (err) {
+			console.error('Erro ao calcular participantes:', err);
+			return [];
+		}
+	});
 
-  const administradoresIds = $derived(() => {
-    return conversa()?.administradores || [];
-  });
+	const administradoresIds = $derived(() => {
+		return conversa()?.administradores || [];
+	});
 
-  const usuariosDisponiveis = $derived(() => {
-    const usuarios = todosUsuarios();
-    if (!usuarios || usuarios.length === 0) return [];
-    const participantesIds = conversa()?.participantes || [];
-    return usuarios.filter(
-      (u: any) =>
-        !participantesIds.some((pid: any) => String(pid) === String(u._id)),
-    );
-  });
+	const usuariosDisponiveis = $derived(() => {
+		const usuarios = todosUsuarios();
+		if (!usuarios || usuarios.length === 0) return [];
+		const participantesIds = conversa()?.participantes || [];
+		return usuarios.filter(
+			(u: any) => !participantesIds.some((pid: any) => String(pid) === String(u._id))
+		);
+	});
 
-  const usuariosFiltrados = $derived(() => {
-    const disponiveis = usuariosDisponiveis();
-    if (!searchQuery.trim()) return disponiveis;
-    const query = searchQuery.toLowerCase();
-    return disponiveis.filter(
-      (u: any) =>
-        (u.nome || "").toLowerCase().includes(query) ||
-        (u.email || "").toLowerCase().includes(query) ||
-        (u.matricula || "").toLowerCase().includes(query),
-    );
-  });
+	const usuariosFiltrados = $derived(() => {
+		const disponiveis = usuariosDisponiveis();
+		if (!searchQuery.trim()) return disponiveis;
+		const query = searchQuery.toLowerCase();
+		return disponiveis.filter(
+			(u: any) =>
+				(u.nome || '').toLowerCase().includes(query) ||
+				(u.email || '').toLowerCase().includes(query) ||
+				(u.matricula || '').toLowerCase().includes(query)
+		);
+	});
 
-  function isParticipanteAdmin(usuarioId: string): boolean {
-    const admins = administradoresIds();
-    return admins.some((adminId: any) => String(adminId) === String(usuarioId));
-  }
+	function isParticipanteAdmin(usuarioId: string): boolean {
+		const admins = administradoresIds();
+		return admins.some((adminId: any) => String(adminId) === String(usuarioId));
+	}
 
-  function isCriador(usuarioId: string): boolean {
-    const criadoPor = conversa()?.criadoPor;
-    return criadoPor ? String(criadoPor) === String(usuarioId) : false;
-  }
+	function isCriador(usuarioId: string): boolean {
+		const criadoPor = conversa()?.criadoPor;
+		return criadoPor ? String(criadoPor) === String(usuarioId) : false;
+	}
 
-  async function removerParticipante(participanteId: string) {
-    if (!confirm("Tem certeza que deseja remover este participante?")) return;
+	async function removerParticipante(participanteId: string) {
+		if (!confirm('Tem certeza que deseja remover este participante?')) return;
 
-    try {
-      loading = `remover-${participanteId}`;
-      error = null;
-      const resultado = await client.mutation(
-        api.chat.removerParticipanteSala,
-        {
-          conversaId,
-          participanteId: participanteId as any,
-        },
-      );
+		try {
+			loading = `remover-${participanteId}`;
+			error = null;
+			const resultado = await client.mutation(api.chat.removerParticipanteSala, {
+				conversaId,
+				participanteId: participanteId as any
+			});
 
-      if (!resultado.sucesso) {
-        error = resultado.erro || "Erro ao remover participante";
-      }
-    } catch (err: any) {
-      error = err.message || "Erro ao remover participante";
-    } finally {
-      loading = null;
-    }
-  }
+			if (!resultado.sucesso) {
+				error = resultado.erro || 'Erro ao remover participante';
+			}
+		} catch (err: any) {
+			error = err.message || 'Erro ao remover participante';
+		} finally {
+			loading = null;
+		}
+	}
 
-  async function promoverAdmin(participanteId: string) {
-    if (!confirm("Promover este participante a administrador?")) return;
+	async function promoverAdmin(participanteId: string) {
+		if (!confirm('Promover este participante a administrador?')) return;
 
-    try {
-      loading = `promover-${participanteId}`;
-      error = null;
-      const resultado = await client.mutation(api.chat.promoverAdministrador, {
-        conversaId,
-        participanteId: participanteId as any,
-      });
+		try {
+			loading = `promover-${participanteId}`;
+			error = null;
+			const resultado = await client.mutation(api.chat.promoverAdministrador, {
+				conversaId,
+				participanteId: participanteId as any
+			});
 
-      if (!resultado.sucesso) {
-        error = resultado.erro || "Erro ao promover administrador";
-      }
-    } catch (err: any) {
-      error = err.message || "Erro ao promover administrador";
-    } finally {
-      loading = null;
-    }
-  }
+			if (!resultado.sucesso) {
+				error = resultado.erro || 'Erro ao promover administrador';
+			}
+		} catch (err: any) {
+			error = err.message || 'Erro ao promover administrador';
+		} finally {
+			loading = null;
+		}
+	}
 
-  async function rebaixarAdmin(participanteId: string) {
-    if (!confirm("Rebaixar este administrador a participante?")) return;
+	async function rebaixarAdmin(participanteId: string) {
+		if (!confirm('Rebaixar este administrador a participante?')) return;
 
-    try {
-      loading = `rebaixar-${participanteId}`;
-      error = null;
-      const resultado = await client.mutation(api.chat.rebaixarAdministrador, {
-        conversaId,
-        participanteId: participanteId as any,
-      });
+		try {
+			loading = `rebaixar-${participanteId}`;
+			error = null;
+			const resultado = await client.mutation(api.chat.rebaixarAdministrador, {
+				conversaId,
+				participanteId: participanteId as any
+			});
 
-      if (!resultado.sucesso) {
-        error = resultado.erro || "Erro ao rebaixar administrador";
-      }
-    } catch (err: any) {
-      error = err.message || "Erro ao rebaixar administrador";
-    } finally {
-      loading = null;
-    }
-  }
+			if (!resultado.sucesso) {
+				error = resultado.erro || 'Erro ao rebaixar administrador';
+			}
+		} catch (err: any) {
+			error = err.message || 'Erro ao rebaixar administrador';
+		} finally {
+			loading = null;
+		}
+	}
 
-  async function adicionarParticipante(usuarioId: string) {
-    try {
-      loading = `adicionar-${usuarioId}`;
-      error = null;
-      const resultado = await client.mutation(
-        api.chat.adicionarParticipanteSala,
-        {
-          conversaId,
-          participanteId: usuarioId as any,
-        },
-      );
+	async function adicionarParticipante(usuarioId: string) {
+		try {
+			loading = `adicionar-${usuarioId}`;
+			error = null;
+			const resultado = await client.mutation(api.chat.adicionarParticipanteSala, {
+				conversaId,
+				participanteId: usuarioId as any
+			});
 
-      if (!resultado.sucesso) {
-        error = resultado.erro || "Erro ao adicionar participante";
-      } else {
-        searchQuery = "";
-      }
-    } catch (err: any) {
-      error = err.message || "Erro ao adicionar participante";
-    } finally {
-      loading = null;
-    }
-  }
+			if (!resultado.sucesso) {
+				error = resultado.erro || 'Erro ao adicionar participante';
+			} else {
+				searchQuery = '';
+			}
+		} catch (err: any) {
+			error = err.message || 'Erro ao adicionar participante';
+		} finally {
+			loading = null;
+		}
+	}
 </script>
 
-<dialog
-  class="modal modal-open"
-  onclick={(e) => e.target === e.currentTarget && onClose()}
->
-  <div
-    class="modal-box max-w-2xl max-h-[80vh] flex flex-col p-0"
-    onclick={(e) => e.stopPropagation()}
-  >
-    <!-- Header -->
-    <div
-      class="flex items-center justify-between px-6 py-4 border-b border-base-300"
-    >
-      <div>
-        <h2 class="text-xl font-semibold flex items-center gap-2">
-          <Users class="w-5 h-5 text-primary" />
-          Gerenciar Sala de Reunião
-        </h2>
-        <p class="text-sm text-base-content/60">
-          {conversa()?.nome || "Sem nome"}
-        </p>
-      </div>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-circle"
-        onclick={onClose}
-        aria-label="Fechar"
-      >
-        <X class="w-5 h-5" />
-      </button>
-    </div>
+<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
+	<div
+		class="modal-box flex max-h-[80vh] max-w-2xl flex-col p-0"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Header -->
+		<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+			<div>
+				<h2 class="flex items-center gap-2 text-xl font-semibold">
+					<Users class="text-primary h-5 w-5" />
+					Gerenciar Sala de Reunião
+				</h2>
+				<p class="text-base-content/60 text-sm">
+					{conversa()?.nome || 'Sem nome'}
+				</p>
+			</div>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
+			</button>
+		</div>
 
-    <!-- Tabs -->
-    {#if isAdmin}
-      <div class="tabs tabs-boxed p-4">
-        <button
-          type="button"
-          class={`tab flex items-center gap-2 ${activeTab === "participantes" ? "tab-active" : ""}`}
-          onclick={() => (activeTab = "participantes")}
-        >
-          <Users class="w-4 h-4" />
-          Participantes
-        </button>
-        <button
-          type="button"
-          class={`tab flex items-center gap-2 ${activeTab === "adicionar" ? "tab-active" : ""}`}
-          onclick={() => (activeTab = "adicionar")}
-        >
-          <UserPlus class="w-4 h-4" />
-          Adicionar Participante
-        </button>
-      </div>
-    {/if}
+		<!-- Tabs -->
+		{#if isAdmin}
+			<div class="tabs tabs-boxed p-4">
+				<button
+					type="button"
+					class={`tab flex items-center gap-2 ${activeTab === 'participantes' ? 'tab-active' : ''}`}
+					onclick={() => (activeTab = 'participantes')}
+				>
+					<Users class="h-4 w-4" />
+					Participantes
+				</button>
+				<button
+					type="button"
+					class={`tab flex items-center gap-2 ${activeTab === 'adicionar' ? 'tab-active' : ''}`}
+					onclick={() => (activeTab = 'adicionar')}
+				>
+					<UserPlus class="h-4 w-4" />
+					Adicionar Participante
+				</button>
+			</div>
+		{/if}
 
-    <!-- Error Message -->
-    {#if error}
-      <div class="mx-6 mt-2 alert alert-error">
-        <span>{error}</span>
-        <button
-          type="button"
-          class="btn btn-sm btn-ghost"
-          onclick={() => (error = null)}
-        >
-          <X class="w-4 h-4" />
-        </button>
-      </div>
-    {/if}
+		<!-- Error Message -->
+		{#if error}
+			<div class="alert alert-error mx-6 mt-2">
+				<span>{error}</span>
+				<button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>
+					<X class="h-4 w-4" />
+				</button>
+			</div>
+		{/if}
 
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto px-6">
-      {#if !conversas?.data}
-        <!-- Loading conversas -->
-        <div class="flex items-center justify-center py-8">
-          <span class="loading loading-spinner loading-lg"></span>
-          <span class="ml-2 text-sm text-base-content/60"
-            >Carregando conversa...</span
-          >
-        </div>
-      {:else if !todosUsuariosQuery?.data}
-        <!-- Loading usuários -->
-        <div class="flex items-center justify-center py-8">
-          <span class="loading loading-spinner loading-lg"></span>
-          <span class="ml-2 text-sm text-base-content/60"
-            >Carregando usuários...</span
-          >
-        </div>
-      {:else if activeTab === "participantes"}
-        <!-- Lista de Participantes -->
-        <div class="space-y-2 py-2">
-          {#if participantes().length > 0}
-            {#each participantes() as participante (String(participante._id))}
-              {@const participanteId = String(participante._id)}
-              {@const ehAdmin = isParticipanteAdmin(participanteId)}
-              {@const ehCriador = isCriador(participanteId)}
-              {@const isLoading = loading?.includes(participanteId)}
-              <div
-                class="flex items-center gap-3 p-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors"
-              >
-                <!-- Avatar -->
-                <div class="relative shrink-0">
-                  <UserAvatar
-                    avatar={participante.avatar}
-                    fotoPerfilUrl={participante.fotoPerfilUrl ||
-                      participante.fotoPerfil}
-                    nome={participante.nome || "Usuário"}
-                    size="sm"
-                  />
-                  <div class="absolute bottom-0 right-0">
-                    <UserStatusBadge
-                      status={participante.statusPresenca || "offline"}
-                      size="sm"
-                    />
-                  </div>
-                </div>
+		<!-- Content -->
+		<div class="flex-1 overflow-y-auto px-6">
+			{#if !conversas?.data}
+				<!-- Loading conversas -->
+				<div class="flex items-center justify-center py-8">
+					<span class="loading loading-spinner loading-lg"></span>
+					<span class="text-base-content/60 ml-2 text-sm">Carregando conversa...</span>
+				</div>
+			{:else if !todosUsuariosQuery?.data}
+				<!-- Loading usuários -->
+				<div class="flex items-center justify-center py-8">
+					<span class="loading loading-spinner loading-lg"></span>
+					<span class="text-base-content/60 ml-2 text-sm">Carregando usuários...</span>
+				</div>
+			{:else if activeTab === 'participantes'}
+				<!-- Lista de Participantes -->
+				<div class="space-y-2 py-2">
+					{#if participantes().length > 0}
+						{#each participantes() as participante (String(participante._id))}
+							{@const participanteId = String(participante._id)}
+							{@const ehAdmin = isParticipanteAdmin(participanteId)}
+							{@const ehCriador = isCriador(participanteId)}
+							{@const isLoading = loading?.includes(participanteId)}
+							<div
+								class="border-base-300 hover:bg-base-200 flex items-center gap-3 rounded-lg border p-3 transition-colors"
+							>
+								<!-- Avatar -->
+								<div class="relative shrink-0">
+									<UserAvatar
+										avatar={participante.avatar}
+										fotoPerfilUrl={participante.fotoPerfilUrl || participante.fotoPerfil}
+										nome={participante.nome || 'Usuário'}
+										size="sm"
+									/>
+									<div class="absolute right-0 bottom-0">
+										<UserStatusBadge status={participante.statusPresenca || 'offline'} size="sm" />
+									</div>
+								</div>
 
-                <!-- Info -->
-                <div class="flex-1 min-w-0">
-                  <div class="flex items-center gap-2">
-                    <p class="font-medium text-base-content truncate">
-                      {participante.nome || "Usuário"}
-                    </p>
-                    {#if ehAdmin}
-                      <span class="badge badge-primary badge-sm">Admin</span>
-                    {/if}
-                    {#if ehCriador}
-                      <span class="badge badge-secondary badge-sm">Criador</span
-                      >
-                    {/if}
-                  </div>
-                  <p class="text-sm text-base-content/60 truncate">
-                    {participante.setor || participante.email || ""}
-                  </p>
-                </div>
+								<!-- Info -->
+								<div class="min-w-0 flex-1">
+									<div class="flex items-center gap-2">
+										<p class="text-base-content truncate font-medium">
+											{participante.nome || 'Usuário'}
+										</p>
+										{#if ehAdmin}
+											<span class="badge badge-primary badge-sm">Admin</span>
+										{/if}
+										{#if ehCriador}
+											<span class="badge badge-secondary badge-sm">Criador</span>
+										{/if}
+									</div>
+									<p class="text-base-content/60 truncate text-sm">
+										{participante.setor || participante.email || ''}
+									</p>
+								</div>
 
-                <!-- Ações (apenas para admins) -->
-                {#if isAdmin && !ehCriador}
-                  <div class="flex items-center gap-1">
-                    {#if ehAdmin}
-                      <button
-                        type="button"
-                        class="btn btn-xs btn-ghost"
-                        onclick={() => rebaixarAdmin(participanteId)}
-                        disabled={isLoading}
-                        title="Rebaixar administrador"
-                      >
-                        {#if isLoading && loading?.includes("rebaixar")}
-                          <span class="loading loading-spinner loading-xs"
-                          ></span>
-                        {:else}
-                          <ArrowDown class="w-4 h-4" />
-                        {/if}
-                      </button>
-                    {:else}
-                      <button
-                        type="button"
-                        class="btn btn-xs btn-ghost"
-                        onclick={() => promoverAdmin(participanteId)}
-                        disabled={isLoading}
-                        title="Promover a administrador"
-                      >
-                        {#if isLoading && loading?.includes("promover")}
-                          <span class="loading loading-spinner loading-xs"
-                          ></span>
-                        {:else}
-                          <ArrowUp class="w-4 h-4" />
-                        {/if}
-                      </button>
-                    {/if}
-                    <button
-                      type="button"
-                      class="btn btn-xs btn-error btn-ghost"
-                      onclick={() => removerParticipante(participanteId)}
-                      disabled={isLoading}
-                      title="Remover participante"
-                    >
-                      {#if isLoading && loading?.includes("remover")}
-                        <span class="loading loading-spinner loading-xs"></span>
-                      {:else}
-                        <Trash2 class="w-4 h-4" />
-                      {/if}
-                    </button>
-                  </div>
-                {/if}
-              </div>
-            {/each}
-          {:else}
-            <div class="text-center py-8 text-base-content/50">
-              Nenhum participante encontrado
-            </div>
-          {/if}
-        </div>
-      {:else if activeTab === "adicionar" && isAdmin}
-        <!-- Adicionar Participante -->
-        <div class="mb-4 relative">
-          <input
-            type="text"
-            placeholder="Buscar usuários..."
-            class="input input-bordered w-full pl-10"
-            bind:value={searchQuery}
-          />
-          <Search
-            class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40"
-          />
-        </div>
+								<!-- Ações (apenas para admins) -->
+								{#if isAdmin && !ehCriador}
+									<div class="flex items-center gap-1">
+										{#if ehAdmin}
+											<button
+												type="button"
+												class="btn btn-xs btn-ghost"
+												onclick={() => rebaixarAdmin(participanteId)}
+												disabled={isLoading}
+												title="Rebaixar administrador"
+											>
+												{#if isLoading && loading?.includes('rebaixar')}
+													<span class="loading loading-spinner loading-xs"></span>
+												{:else}
+													<ArrowDown class="h-4 w-4" />
+												{/if}
+											</button>
+										{:else}
+											<button
+												type="button"
+												class="btn btn-xs btn-ghost"
+												onclick={() => promoverAdmin(participanteId)}
+												disabled={isLoading}
+												title="Promover a administrador"
+											>
+												{#if isLoading && loading?.includes('promover')}
+													<span class="loading loading-spinner loading-xs"></span>
+												{:else}
+													<ArrowUp class="h-4 w-4" />
+												{/if}
+											</button>
+										{/if}
+										<button
+											type="button"
+											class="btn btn-xs btn-error btn-ghost"
+											onclick={() => removerParticipante(participanteId)}
+											disabled={isLoading}
+											title="Remover participante"
+										>
+											{#if isLoading && loading?.includes('remover')}
+												<span class="loading loading-spinner loading-xs"></span>
+											{:else}
+												<Trash2 class="h-4 w-4" />
+											{/if}
+										</button>
+									</div>
+								{/if}
+							</div>
+						{/each}
+					{:else}
+						<div class="text-base-content/50 py-8 text-center">Nenhum participante encontrado</div>
+					{/if}
+				</div>
+			{:else if activeTab === 'adicionar' && isAdmin}
+				<!-- Adicionar Participante -->
+				<div class="relative mb-4">
+					<input
+						type="text"
+						placeholder="Buscar usuários..."
+						class="input input-bordered w-full pl-10"
+						bind:value={searchQuery}
+					/>
+					<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
+				</div>
 
-        <div class="space-y-2">
-          {#if usuariosFiltrados().length > 0}
-            {#each usuariosFiltrados() as usuario (String(usuario._id))}
-              {@const usuarioId = String(usuario._id)}
-              {@const isLoading = loading?.includes(usuarioId)}
-              <button
-                type="button"
-                class="w-full text-left px-4 py-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors flex items-center gap-3"
-                onclick={() => adicionarParticipante(usuarioId)}
-                disabled={isLoading}
-              >
-                <!-- Avatar -->
-                <div class="relative shrink-0">
-                  <UserAvatar
-                    avatar={usuario.avatar}
-                    fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.fotoPerfil}
-                    nome={usuario.nome || "Usuário"}
-                    size="sm"
-                  />
-                  <div class="absolute bottom-0 right-0">
-                    <UserStatusBadge
-                      status={usuario.statusPresenca || "offline"}
-                      size="sm"
-                    />
-                  </div>
-                </div>
+				<div class="space-y-2">
+					{#if usuariosFiltrados().length > 0}
+						{#each usuariosFiltrados() as usuario (String(usuario._id))}
+							{@const usuarioId = String(usuario._id)}
+							{@const isLoading = loading?.includes(usuarioId)}
+							<button
+								type="button"
+								class="border-base-300 hover:bg-base-200 flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors"
+								onclick={() => adicionarParticipante(usuarioId)}
+								disabled={isLoading}
+							>
+								<!-- Avatar -->
+								<div class="relative shrink-0">
+									<UserAvatar
+										avatar={usuario.avatar}
+										fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.fotoPerfil}
+										nome={usuario.nome || 'Usuário'}
+										size="sm"
+									/>
+									<div class="absolute right-0 bottom-0">
+										<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
+									</div>
+								</div>
 
-                <!-- Info -->
-                <div class="flex-1 min-w-0">
-                  <p class="font-medium text-base-content truncate">
-                    {usuario.nome || "Usuário"}
-                  </p>
-                  <p class="text-sm text-base-content/60 truncate">
-                    {usuario.setor || usuario.email || ""}
-                  </p>
-                </div>
+								<!-- Info -->
+								<div class="min-w-0 flex-1">
+									<p class="text-base-content truncate font-medium">
+										{usuario.nome || 'Usuário'}
+									</p>
+									<p class="text-base-content/60 truncate text-sm">
+										{usuario.setor || usuario.email || ''}
+									</p>
+								</div>
 
-                <!-- Botão Adicionar -->
-                {#if isLoading}
-                  <span class="loading loading-spinner loading-sm"></span>
-                {:else}
-                  <UserPlus class="w-5 h-5 text-primary" />
-                {/if}
-              </button>
-            {/each}
-          {:else}
-            <div class="text-center py-8 text-base-content/50">
-              {searchQuery.trim()
-                ? "Nenhum usuário encontrado"
-                : "Todos os usuários já são participantes"}
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
+								<!-- Botão Adicionar -->
+								{#if isLoading}
+									<span class="loading loading-spinner loading-sm"></span>
+								{:else}
+									<UserPlus class="text-primary h-5 w-5" />
+								{/if}
+							</button>
+						{/each}
+					{:else}
+						<div class="text-base-content/50 py-8 text-center">
+							{searchQuery.trim()
+								? 'Nenhum usuário encontrado'
+								: 'Todos os usuários já são participantes'}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
 
-    <!-- Footer -->
-    <div class="px-6 py-4 border-t border-base-300">
-      <button type="button" class="btn btn-block" onclick={onClose}>
-        Fechar
-      </button>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+		<!-- Footer -->
+		<div class="border-base-300 border-t px-6 py-4">
+			<button type="button" class="btn btn-block" onclick={onClose}> Fechar </button>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>
diff --git a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
index 0ceddd2..8a9363b 100644
--- a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
+++ b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
@@ -1,288 +1,269 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import { Clock, X, Trash2 } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import { Clock, X, Trash2 } from 'lucide-svelte';
 
-  interface Props {
-    conversaId: Id<"conversas">;
-    onClose: () => void;
-  }
+	interface Props {
+		conversaId: Id<'conversas'>;
+		onClose: () => void;
+	}
 
-  let { conversaId, onClose }: Props = $props();
+	let { conversaId, onClose }: Props = $props();
 
-  const client = useConvexClient();
-  const mensagensAgendadas = useQuery(api.chat.obterMensagensAgendadas, {
-    conversaId,
-  });
+	const client = useConvexClient();
+	const mensagensAgendadas = useQuery(api.chat.obterMensagensAgendadas, {
+		conversaId
+	});
 
-  let mensagem = $state("");
-  let data = $state("");
-  let hora = $state("");
-  let loading = $state(false);
+	let mensagem = $state('');
+	let data = $state('');
+	let hora = $state('');
+	let loading = $state(false);
 
-  // Rastrear mudanças nas mensagens agendadas
-  $effect(() => {
-    console.log(
-      "📅 [ScheduleModal] Mensagens agendadas atualizadas:",
-      mensagensAgendadas?.data,
-    );
-  });
+	// Rastrear mudanças nas mensagens agendadas
+	$effect(() => {
+		console.log('📅 [ScheduleModal] Mensagens agendadas atualizadas:', mensagensAgendadas?.data);
+	});
 
-  // Definir data/hora mínima (agora)
-  const now = new Date();
-  const minDate = format(now, "yyyy-MM-dd");
-  const minTime = format(now, "HH:mm");
+	// Definir data/hora mínima (agora)
+	const now = new Date();
+	const minDate = format(now, 'yyyy-MM-dd');
+	const minTime = format(now, 'HH:mm');
 
-  function getPreviewText(): string {
-    if (!data || !hora) return "";
+	function getPreviewText(): string {
+		if (!data || !hora) return '';
 
-    try {
-      const dataHora = new Date(`${data}T${hora}`);
-      return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
-    } catch {
-      return "";
-    }
-  }
+		try {
+			const dataHora = new Date(`${data}T${hora}`);
+			return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
+		} catch {
+			return '';
+		}
+	}
 
-  async function handleAgendar() {
-    if (!mensagem.trim() || !data || !hora) {
-      alert("Preencha todos os campos");
-      return;
-    }
+	async function handleAgendar() {
+		if (!mensagem.trim() || !data || !hora) {
+			alert('Preencha todos os campos');
+			return;
+		}
 
-    try {
-      loading = true;
-      const dataHora = new Date(`${data}T${hora}`);
+		try {
+			loading = true;
+			const dataHora = new Date(`${data}T${hora}`);
 
-      // Validar data futura
-      if (dataHora.getTime() <= Date.now()) {
-        alert("A data e hora devem ser futuras");
-        return;
-      }
+			// Validar data futura
+			if (dataHora.getTime() <= Date.now()) {
+				alert('A data e hora devem ser futuras');
+				return;
+			}
 
-      await client.mutation(api.chat.agendarMensagem, {
-        conversaId,
-        conteudo: mensagem.trim(),
-        agendadaPara: dataHora.getTime(),
-      });
+			await client.mutation(api.chat.agendarMensagem, {
+				conversaId,
+				conteudo: mensagem.trim(),
+				agendadaPara: dataHora.getTime()
+			});
 
-      mensagem = "";
-      data = "";
-      hora = "";
+			mensagem = '';
+			data = '';
+			hora = '';
 
-      // Dar tempo para o Convex processar e recarregar a lista
-      setTimeout(() => {
-        alert("Mensagem agendada com sucesso!");
-      }, 500);
-    } catch (error) {
-      console.error("Erro ao agendar mensagem:", error);
-      alert("Erro ao agendar mensagem");
-    } finally {
-      loading = false;
-    }
-  }
+			// Dar tempo para o Convex processar e recarregar a lista
+			setTimeout(() => {
+				alert('Mensagem agendada com sucesso!');
+			}, 500);
+		} catch (error) {
+			console.error('Erro ao agendar mensagem:', error);
+			alert('Erro ao agendar mensagem');
+		} finally {
+			loading = false;
+		}
+	}
 
-  async function handleCancelar(mensagemId: string) {
-    if (!confirm("Deseja cancelar esta mensagem agendada?")) return;
+	async function handleCancelar(mensagemId: string) {
+		if (!confirm('Deseja cancelar esta mensagem agendada?')) return;
 
-    try {
-      await client.mutation(api.chat.cancelarMensagemAgendada, {
-        mensagemId: mensagemId as any,
-      });
-    } catch (error) {
-      console.error("Erro ao cancelar mensagem:", error);
-      alert("Erro ao cancelar mensagem");
-    }
-  }
+		try {
+			await client.mutation(api.chat.cancelarMensagemAgendada, {
+				mensagemId: mensagemId as any
+			});
+		} catch (error) {
+			console.error('Erro ao cancelar mensagem:', error);
+			alert('Erro ao cancelar mensagem');
+		}
+	}
 
-  function formatarDataHora(timestamp: number): string {
-    try {
-      return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
-        locale: ptBR,
-      });
-    } catch {
-      return "Data inválida";
-    }
-  }
+	function formatarDataHora(timestamp: number): string {
+		try {
+			return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
+				locale: ptBR
+			});
+		} catch {
+			return 'Data inválida';
+		}
+	}
 </script>
 
-<dialog
-  class="modal modal-open"
-  onclick={(e) => e.target === e.currentTarget && onClose()}
->
-  <div
-    class="modal-box max-w-2xl max-h-[90vh] flex flex-col p-0"
-    onclick={(e) => e.stopPropagation()}
-  >
-    <!-- Header -->
-    <div
-      class="flex items-center justify-between px-6 py-4 border-b border-base-300"
-    >
-      <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2">
-        <Clock class="w-5 h-5 text-primary" />
-        Agendar Mensagem
-      </h2>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-circle"
-        onclick={onClose}
-        aria-label="Fechar"
-      >
-        <X class="w-5 h-5" />
-      </button>
-    </div>
+<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
+	<div
+		class="modal-box flex max-h-[90vh] max-w-2xl flex-col p-0"
+		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="flex items-center gap-2 text-xl font-bold">
+				<Clock class="text-primary h-5 w-5" />
+				Agendar Mensagem
+			</h2>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
+			</button>
+		</div>
 
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto p-6 space-y-6">
-      <!-- Formulário de Agendamento -->
-      <div class="card bg-base-200">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
+		<!-- Content -->
+		<div class="flex-1 space-y-6 overflow-y-auto p-6">
+			<!-- Formulário de Agendamento -->
+			<div class="card bg-base-200">
+				<div class="card-body">
+					<h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
 
-          <div class="form-control">
-            <label class="label" for="mensagem-input">
-              <span class="label-text">Mensagem</span>
-            </label>
-            <textarea
-              id="mensagem-input"
-              class="textarea textarea-bordered h-24"
-              placeholder="Digite a mensagem..."
-              bind:value={mensagem}
-              maxlength="500"
-              aria-describedby="char-count"
-            ></textarea>
-            <div class="label">
-              <span id="char-count" class="label-text-alt"
-                >{mensagem.length}/500</span
-              >
-            </div>
-          </div>
+					<div class="form-control">
+						<label class="label" for="mensagem-input">
+							<span class="label-text">Mensagem</span>
+						</label>
+						<textarea
+							id="mensagem-input"
+							class="textarea textarea-bordered h-24"
+							placeholder="Digite a mensagem..."
+							bind:value={mensagem}
+							maxlength="500"
+							aria-describedby="char-count"
+						></textarea>
+						<div class="label">
+							<span id="char-count" class="label-text-alt">{mensagem.length}/500</span>
+						</div>
+					</div>
 
-          <div class="grid md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label" for="data-input">
-                <span class="label-text">Data</span>
-              </label>
-              <input
-                id="data-input"
-                type="date"
-                class="input input-bordered"
-                bind:value={data}
-                min={minDate}
-              />
-            </div>
+					<div class="grid gap-4 md:grid-cols-2">
+						<div class="form-control">
+							<label class="label" for="data-input">
+								<span class="label-text">Data</span>
+							</label>
+							<input
+								id="data-input"
+								type="date"
+								class="input input-bordered"
+								bind:value={data}
+								min={minDate}
+							/>
+						</div>
 
-            <div class="form-control">
-              <label class="label" for="hora-input">
-                <span class="label-text">Hora</span>
-              </label>
-              <input
-                id="hora-input"
-                type="time"
-                class="input input-bordered"
-                bind:value={hora}
-                min={data === minDate ? minTime : undefined}
-              />
-            </div>
-          </div>
+						<div class="form-control">
+							<label class="label" for="hora-input">
+								<span class="label-text">Hora</span>
+							</label>
+							<input
+								id="hora-input"
+								type="time"
+								class="input input-bordered"
+								bind:value={hora}
+								min={data === minDate ? minTime : undefined}
+							/>
+						</div>
+					</div>
 
-          {#if getPreviewText()}
-            <div class="alert alert-info">
-              <Clock class="w-6 h-6" />
-              <span>{getPreviewText()}</span>
-            </div>
-          {/if}
+					{#if getPreviewText()}
+						<div class="alert alert-info">
+							<Clock class="h-6 w-6" />
+							<span>{getPreviewText()}</span>
+						</div>
+					{/if}
 
-          <div class="card-actions justify-end">
-            <!-- Botão AGENDAR ultra moderno -->
-            <button
-              type="button"
-              class="relative px-6 py-3 rounded-xl font-bold text-white overflow-hidden transition-all duration-300 group disabled:opacity-50 disabled:cursor-not-allowed"
-              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
-              onclick={handleAgendar}
-              disabled={loading || !mensagem.trim() || !data || !hora}
-            >
-              <!-- Efeito de brilho no hover -->
-              <div
-                class="absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors duration-300"
-              ></div>
+					<div class="card-actions justify-end">
+						<!-- Botão AGENDAR ultra moderno -->
+						<button
+							type="button"
+							class="group relative overflow-hidden rounded-xl px-6 py-3 font-bold text-white transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50"
+							style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
+							onclick={handleAgendar}
+							disabled={loading || !mensagem.trim() || !data || !hora}
+						>
+							<!-- Efeito de brilho no hover -->
+							<div
+								class="absolute inset-0 bg-white/0 transition-colors duration-300 group-hover:bg-white/10"
+							></div>
 
-              <div class="relative z-10 flex items-center gap-2">
-                {#if loading}
-                  <span class="loading loading-spinner loading-sm"></span>
-                  <span>Agendando...</span>
-                {:else}
-                  <Clock
-                    class="w-5 h-5 group-hover:scale-110 transition-transform"
-                  />
-                  <span class="group-hover:scale-105 transition-transform"
-                    >Agendar</span
-                  >
-                {/if}
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
+							<div class="relative z-10 flex items-center gap-2">
+								{#if loading}
+									<span class="loading loading-spinner loading-sm"></span>
+									<span>Agendando...</span>
+								{:else}
+									<Clock class="h-5 w-5 transition-transform group-hover:scale-110" />
+									<span class="transition-transform group-hover:scale-105">Agendar</span>
+								{/if}
+							</div>
+						</button>
+					</div>
+				</div>
+			</div>
 
-      <!-- Lista de Mensagens Agendadas -->
-      <div class="card bg-base-200">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Mensagens Agendadas</h3>
+			<!-- Lista de Mensagens Agendadas -->
+			<div class="card bg-base-200">
+				<div class="card-body">
+					<h3 class="card-title text-lg">Mensagens Agendadas</h3>
 
-          {#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
-            <div class="space-y-3">
-              {#each mensagensAgendadas.data as msg (msg._id)}
-                <div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg">
-                  <div class="shrink-0 mt-1">
-                    <Clock class="w-5 h-5 text-primary" />
-                  </div>
+					{#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
+						<div class="space-y-3">
+							{#each mensagensAgendadas.data as msg (msg._id)}
+								<div class="bg-base-100 flex items-start gap-3 rounded-lg p-3">
+									<div class="mt-1 shrink-0">
+										<Clock class="text-primary h-5 w-5" />
+									</div>
 
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-base-content/80">
-                      {formatarDataHora(msg.agendadaPara || 0)}
-                    </p>
-                    <p class="text-sm text-base-content mt-1 line-clamp-2">
-                      {msg.conteudo}
-                    </p>
-                  </div>
+									<div class="min-w-0 flex-1">
+										<p class="text-base-content/80 text-sm font-medium">
+											{formatarDataHora(msg.agendadaPara || 0)}
+										</p>
+										<p class="text-base-content mt-1 line-clamp-2 text-sm">
+											{msg.conteudo}
+										</p>
+									</div>
 
-                  <!-- Botão cancelar moderno -->
-                  <button
-                    type="button"
-                    class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
-                    style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
-                    onclick={() => handleCancelar(msg._id)}
-                    aria-label="Cancelar"
-                  >
-                    <div
-                      class="absolute inset-0 bg-error/0 group-hover:bg-error/20 transition-colors duration-300"
-                    ></div>
-                    <Trash2
-                      class="w-5 h-5 text-error relative z-10 group-hover:scale-110 transition-transform"
-                    />
-                  </button>
-                </div>
-              {/each}
-            </div>
-          {:else if !mensagensAgendadas?.data}
-            <div class="flex items-center justify-center py-8">
-              <span class="loading loading-spinner loading-lg"></span>
-            </div>
-          {:else}
-            <div class="text-center py-8 text-base-content/50">
-              <Clock class="w-12 h-12 mx-auto mb-2 opacity-50" />
-              <p class="text-sm">Nenhuma mensagem agendada</p>
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+									<!-- Botão cancelar moderno -->
+									<button
+										type="button"
+										class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
+										style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
+										onclick={() => handleCancelar(msg._id)}
+										aria-label="Cancelar"
+									>
+										<div
+											class="bg-error/0 group-hover:bg-error/20 absolute inset-0 transition-colors duration-300"
+										></div>
+										<Trash2
+											class="text-error relative z-10 h-5 w-5 transition-transform group-hover:scale-110"
+										/>
+									</button>
+								</div>
+							{/each}
+						</div>
+					{:else if !mensagensAgendadas?.data}
+						<div class="flex items-center justify-center py-8">
+							<span class="loading loading-spinner loading-lg"></span>
+						</div>
+					{:else}
+						<div class="text-base-content/50 py-8 text-center">
+							<Clock class="mx-auto mb-2 h-12 w-12 opacity-50" />
+							<p class="text-sm">Nenhuma mensagem agendada</p>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>
diff --git a/apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte b/apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte
index 7fb1a4f..085145c 100644
--- a/apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte
+++ b/apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte
@@ -1,729 +1,694 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import CalendarioFerias from "./CalendarioFerias.svelte";
-  import { toast } from "svelte-sonner";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import CalendarioFerias from './CalendarioFerias.svelte';
+	import { toast } from 'svelte-sonner';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  interface Props {
-    funcionarioId: Id<"funcionarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		funcionarioId: Id<'funcionarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
+	let { funcionarioId, onSucesso, onCancelar }: Props = $props();
 
-  // Cliente Convex
-  const client = useConvexClient();
+	// Cliente Convex
+	const client = useConvexClient();
 
-  // Estado do wizard
-  let passoAtual = $state(1);
-  const totalPassos = 3;
+	// Estado do wizard
+	let passoAtual = $state(1);
+	const totalPassos = 3;
 
-  // Dados da solicitação
-  let anoSelecionado = $state(new Date().getFullYear());
-  let periodosFerias: Array<{
-    dataInicio: string;
-    dataFim: string;
-    dias: number;
-  }> = $state([]);
-  let observacao = $state("");
-  let processando = $state(false);
+	// Dados da solicitação
+	let anoSelecionado = $state(new Date().getFullYear());
+	let periodosFerias: Array<{
+		dataInicio: string;
+		dataFim: string;
+		dias: number;
+	}> = $state([]);
+	let observacao = $state('');
+	let processando = $state(false);
 
-  // Queries
-  const saldoQuery = $derived(
-    useQuery(api.saldoFerias.obterSaldo, {
-      funcionarioId,
-      anoReferencia: anoSelecionado,
-    }),
-  );
+	// Queries
+	const saldoQuery = $derived(
+		useQuery(api.saldoFerias.obterSaldo, {
+			funcionarioId,
+			anoReferencia: anoSelecionado
+		})
+	);
 
-  const validacaoQuery = $derived(
-    periodosFerias.length > 0
-      ? useQuery(api.saldoFerias.validarSolicitacao, {
-          funcionarioId,
-          anoReferencia: anoSelecionado,
-          periodos: periodosFerias.map((p) => ({
-            dataInicio: p.dataInicio,
-            dataFim: p.dataFim,
-          })),
-        })
-      : { data: null },
-  );
+	const validacaoQuery = $derived(
+		periodosFerias.length > 0
+			? useQuery(api.saldoFerias.validarSolicitacao, {
+					funcionarioId,
+					anoReferencia: anoSelecionado,
+					periodos: periodosFerias.map((p) => ({
+						dataInicio: p.dataInicio,
+						dataFim: p.dataFim
+					}))
+				})
+			: { data: null }
+	);
 
-  // Derivados
-  const saldo = $derived(saldoQuery.data);
-  const validacao = $derived(validacaoQuery.data);
-  const totalDiasSelecionados = $derived(
-    periodosFerias.reduce((acc, p) => acc + p.dias, 0),
-  );
+	// Derivados
+	const saldo = $derived(saldoQuery.data);
+	const validacao = $derived(validacaoQuery.data);
+	const totalDiasSelecionados = $derived(periodosFerias.reduce((acc, p) => acc + p.dias, 0));
 
-  // Anos disponíveis (últimos 3 anos + próximo ano)
-  const anosDisponiveis = $derived.by(() => {
-    const anoAtual = new Date().getFullYear();
-    return [anoAtual - 1, anoAtual, anoAtual + 1];
-  });
+	// Anos disponíveis (últimos 3 anos + próximo ano)
+	const anosDisponiveis = $derived.by(() => {
+		const anoAtual = new Date().getFullYear();
+		return [anoAtual - 1, anoAtual, anoAtual + 1];
+	});
 
-  // Configurações do calendário (baseado no saldo/regime)
-  const maxPeriodos = $derived(
-    saldo?.regimeTrabalho?.includes("Servidor") ? 2 : 3,
-  );
-  const minDiasPorPeriodo = $derived(
-    saldo?.regimeTrabalho?.includes("Servidor") ? 10 : 5,
-  );
+	// Configurações do calendário (baseado no saldo/regime)
+	const maxPeriodos = $derived(saldo?.regimeTrabalho?.includes('Servidor') ? 2 : 3);
+	const minDiasPorPeriodo = $derived(saldo?.regimeTrabalho?.includes('Servidor') ? 10 : 5);
 
-  // Funções
-  function proximoPasso() {
-    if (passoAtual === 1 && !saldo) {
-      toast.error("Selecione um ano com saldo disponível");
-      return;
-    }
+	// Funções
+	function proximoPasso() {
+		if (passoAtual === 1 && !saldo) {
+			toast.error('Selecione um ano com saldo disponível');
+			return;
+		}
 
-    if (passoAtual === 2 && periodosFerias.length === 0) {
-      toast.error("Selecione pelo menos 1 período de férias");
-      return;
-    }
+		if (passoAtual === 2 && periodosFerias.length === 0) {
+			toast.error('Selecione pelo menos 1 período de férias');
+			return;
+		}
 
-    if (passoAtual === 2 && validacao && !validacao.valido) {
-      toast.error("Corrija os erros antes de continuar");
-      return;
-    }
+		if (passoAtual === 2 && validacao && !validacao.valido) {
+			toast.error('Corrija os erros antes de continuar');
+			return;
+		}
 
-    if (passoAtual < totalPassos) {
-      passoAtual++;
-    }
-  }
+		if (passoAtual < totalPassos) {
+			passoAtual++;
+		}
+	}
 
-  function passoAnterior() {
-    if (passoAtual > 1) {
-      passoAtual--;
-    }
-  }
+	function passoAnterior() {
+		if (passoAtual > 1) {
+			passoAtual--;
+		}
+	}
 
-  async function enviarSolicitacao() {
-    if (!validacao || !validacao.valido) {
-      toast.error("Valide os períodos antes de enviar");
-      return;
-    }
+	async function enviarSolicitacao() {
+		if (!validacao || !validacao.valido) {
+			toast.error('Valide os períodos antes de enviar');
+			return;
+		}
 
-    processando = true;
+		processando = true;
 
-    try {
-      await client.mutation(api.ferias.criarSolicitacao, {
-        funcionarioId,
-        anoReferencia: anoSelecionado,
-        periodos: periodosFerias.map((p) => ({
-          dataInicio: p.dataInicio,
-          dataFim: p.dataFim,
-          diasCorridos: p.dias,
-        })),
-        observacao: observacao || undefined,
-      });
+		try {
+			await client.mutation(api.ferias.criarSolicitacao, {
+				funcionarioId,
+				anoReferencia: anoSelecionado,
+				periodos: periodosFerias.map((p) => ({
+					dataInicio: p.dataInicio,
+					dataFim: p.dataFim,
+					diasCorridos: p.dias
+				})),
+				observacao: observacao || undefined
+			});
 
-      toast.success("Solicitação de férias enviada com sucesso! 🎉");
-      if (onSucesso) onSucesso();
-    } catch (error: any) {
-      toast.error(error.message || "Erro ao enviar solicitação");
-    } finally {
-      processando = false;
-    }
-  }
+			toast.success('Solicitação de férias enviada com sucesso! 🎉');
+			if (onSucesso) onSucesso();
+		} catch (error: any) {
+			toast.error(error.message || 'Erro ao enviar solicitação');
+		} finally {
+			processando = false;
+		}
+	}
 
-  function handlePeriodoAdicionado(periodo: {
-    dataInicio: string;
-    dataFim: string;
-    dias: number;
-  }) {
-    periodosFerias = [...periodosFerias, periodo];
-    toast.success(`Período de ${periodo.dias} dias adicionado! ✅`);
-  }
+	function handlePeriodoAdicionado(periodo: { dataInicio: string; dataFim: string; dias: number }) {
+		periodosFerias = [...periodosFerias, periodo];
+		toast.success(`Período de ${periodo.dias} dias adicionado! ✅`);
+	}
 
-  function handlePeriodoRemovido(index: number) {
-    const removido = periodosFerias[index];
-    periodosFerias = periodosFerias.filter((_, i) => i !== index);
-    toast.info(`Período de ${removido.dias} dias removido`);
-  }
+	function handlePeriodoRemovido(index: number) {
+		const removido = periodosFerias[index];
+		periodosFerias = periodosFerias.filter((_, i) => i !== index);
+		toast.info(`Período de ${removido.dias} dias removido`);
+	}
 </script>
 
 <div class="wizard-ferias-container">
-  <!-- Progress Bar -->
-  <div class="mb-8">
-    <div class="flex justify-between items-center">
-      {#each Array(totalPassos) as _, i}
-        <div class="flex items-center flex-1">
-          <!-- Círculo do passo -->
-          <div
-            class="relative flex items-center justify-center w-12 h-12 rounded-full font-bold transition-all duration-300"
-            class:bg-primary={passoAtual > i + 1}
-            class:text-white={passoAtual > i + 1}
-            class:border-4={passoAtual === i + 1}
-            class:border-primary={passoAtual === i + 1}
-            class:bg-base-200={passoAtual < i + 1}
-            class:text-base-content={passoAtual < i + 1}
-            style:box-shadow={passoAtual === i + 1
-              ? "0 0 20px rgba(102, 126, 234, 0.5)"
-              : "none"}
-          >
-            {#if passoAtual > i + 1}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="3"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-            {:else}
-              {i + 1}
-            {/if}
-          </div>
+	<!-- Progress Bar -->
+	<div class="mb-8">
+		<div class="flex items-center justify-between">
+			{#each Array(totalPassos) as _, i}
+				<div class="flex flex-1 items-center">
+					<!-- Círculo do passo -->
+					<div
+						class="relative flex h-12 w-12 items-center justify-center rounded-full font-bold transition-all duration-300"
+						class:bg-primary={passoAtual > i + 1}
+						class:text-white={passoAtual > i + 1}
+						class:border-4={passoAtual === i + 1}
+						class:border-primary={passoAtual === i + 1}
+						class:bg-base-200={passoAtual < i + 1}
+						class:text-base-content={passoAtual < i + 1}
+						style:box-shadow={passoAtual === i + 1 ? '0 0 20px rgba(102, 126, 234, 0.5)' : 'none'}
+					>
+						{#if passoAtual > i + 1}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="3"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+						{:else}
+							{i + 1}
+						{/if}
+					</div>
 
-          <!-- Linha conectora -->
-          {#if i < totalPassos - 1}
-            <div
-              class="flex-1 h-1 mx-2 transition-all duration-300"
-              class:bg-primary={passoAtual > i + 1}
-              class:bg-base-300={passoAtual <= i + 1}
-            ></div>
-          {/if}
-        </div>
-      {/each}
-    </div>
+					<!-- Linha conectora -->
+					{#if i < totalPassos - 1}
+						<div
+							class="mx-2 h-1 flex-1 transition-all duration-300"
+							class:bg-primary={passoAtual > i + 1}
+							class:bg-base-300={passoAtual <= i + 1}
+						></div>
+					{/if}
+				</div>
+			{/each}
+		</div>
 
-    <!-- Labels dos passos -->
-    <div class="flex justify-between mt-4 px-1">
-      <div class="text-center flex-1">
-        <p class="text-sm font-semibold" class:text-primary={passoAtual === 1}>
-          Ano & Saldo
-        </p>
-      </div>
-      <div class="text-center flex-1">
-        <p class="text-sm font-semibold" class:text-primary={passoAtual === 2}>
-          Períodos
-        </p>
-      </div>
-      <div class="text-center flex-1">
-        <p class="text-sm font-semibold" class:text-primary={passoAtual === 3}>
-          Confirmação
-        </p>
-      </div>
-    </div>
-  </div>
+		<!-- Labels dos passos -->
+		<div class="mt-4 flex justify-between px-1">
+			<div class="flex-1 text-center">
+				<p class="text-sm font-semibold" class:text-primary={passoAtual === 1}>Ano & Saldo</p>
+			</div>
+			<div class="flex-1 text-center">
+				<p class="text-sm font-semibold" class:text-primary={passoAtual === 2}>Períodos</p>
+			</div>
+			<div class="flex-1 text-center">
+				<p class="text-sm font-semibold" class:text-primary={passoAtual === 3}>Confirmação</p>
+			</div>
+		</div>
+	</div>
 
-  <!-- Conteúdo dos Passos -->
-  <div class="wizard-content">
-    <!-- PASSO 1: Ano & Saldo -->
-    {#if passoAtual === 1}
-      <div class="passo-content animate-fadeIn">
-        <h2
-          class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
-        >
-          Escolha o Ano de Referência
-        </h2>
+	<!-- Conteúdo dos Passos -->
+	<div class="wizard-content">
+		<!-- PASSO 1: Ano & Saldo -->
+		{#if passoAtual === 1}
+			<div class="passo-content animate-fadeIn">
+				<h2
+					class="from-primary to-secondary mb-6 bg-linear-to-r bg-clip-text text-center text-3xl font-bold text-transparent"
+				>
+					Escolha o Ano de Referência
+				</h2>
 
-        <!-- Seletor de Ano -->
-        <div class="grid grid-cols-3 gap-4 mb-8">
-          {#each anosDisponiveis as ano}
-            <button
-              type="button"
-              class="btn btn-lg transition-all duration-300 hover:scale-105"
-              class:btn-primary={anoSelecionado === ano}
-              class:btn-outline={anoSelecionado !== ano}
-              onclick={() => (anoSelecionado = ano)}
-            >
-              {ano}
-            </button>
-          {/each}
-        </div>
+				<!-- Seletor de Ano -->
+				<div class="mb-8 grid grid-cols-3 gap-4">
+					{#each anosDisponiveis as ano}
+						<button
+							type="button"
+							class="btn btn-lg transition-all duration-300 hover:scale-105"
+							class:btn-primary={anoSelecionado === ano}
+							class:btn-outline={anoSelecionado !== ano}
+							onclick={() => (anoSelecionado = ano)}
+						>
+							{ano}
+						</button>
+					{/each}
+				</div>
 
-        <!-- Card de Saldo -->
-        {#if saldoQuery.isLoading}
-          <div class="skeleton h-64 w-full rounded-2xl"></div>
-        {:else if saldo}
-          <div
-            class="card bg-linear-to-br from-primary/10 to-secondary/10 shadow-2xl border-2 border-primary/20"
-          >
-            <div class="card-body">
-              <h3 class="card-title text-2xl mb-4">
-                📊 Saldo de Férias {anoSelecionado}
-              </h3>
+				<!-- Card de Saldo -->
+				{#if saldoQuery.isLoading}
+					<div class="skeleton h-64 w-full rounded-2xl"></div>
+				{:else if saldo}
+					<div
+						class="card from-primary/10 to-secondary/10 border-primary/20 border-2 bg-linear-to-br shadow-2xl"
+					>
+						<div class="card-body">
+							<h3 class="card-title mb-4 text-2xl">
+								📊 Saldo de Férias {anoSelecionado}
+							</h3>
 
-              <div
-                class="stats stats-vertical lg:stats-horizontal shadow-lg w-full"
-              >
-                <div class="stat">
-                  <div class="stat-figure text-primary">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      class="inline-block w-8 h-8 stroke-current"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M13 10V3L4 14h7v7l9-11h-7z"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div class="stat-title">Total Direito</div>
-                  <div class="stat-value text-primary">{saldo.diasDireito}</div>
-                  <div class="stat-desc">dias no ano</div>
-                </div>
+							<div class="stats stats-vertical lg:stats-horizontal w-full shadow-lg">
+								<div class="stat">
+									<div class="stat-figure text-primary">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											class="inline-block h-8 w-8 stroke-current"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M13 10V3L4 14h7v7l9-11h-7z"
+											></path>
+										</svg>
+									</div>
+									<div class="stat-title">Total Direito</div>
+									<div class="stat-value text-primary">{saldo.diasDireito}</div>
+									<div class="stat-desc">dias no ano</div>
+								</div>
 
-                <div class="stat">
-                  <div class="stat-figure text-success">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      class="inline-block w-8 h-8 stroke-current"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M5 13l4 4L19 7"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div class="stat-title">Disponível</div>
-                  <div class="stat-value text-success">
-                    {saldo.diasDisponiveis}
-                  </div>
-                  <div class="stat-desc">para usar</div>
-                </div>
+								<div class="stat">
+									<div class="stat-figure text-success">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											class="inline-block h-8 w-8 stroke-current"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M5 13l4 4L19 7"
+											></path>
+										</svg>
+									</div>
+									<div class="stat-title">Disponível</div>
+									<div class="stat-value text-success">
+										{saldo.diasDisponiveis}
+									</div>
+									<div class="stat-desc">para usar</div>
+								</div>
 
-                <div class="stat">
-                  <div class="stat-figure text-warning">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      class="inline-block w-8 h-8 stroke-current"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div class="stat-title">Usado</div>
-                  <div class="stat-value text-warning">{saldo.diasUsados}</div>
-                  <div class="stat-desc">até agora</div>
-                </div>
-              </div>
+								<div class="stat">
+									<div class="stat-figure text-warning">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											class="inline-block h-8 w-8 stroke-current"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+											></path>
+										</svg>
+									</div>
+									<div class="stat-title">Usado</div>
+									<div class="stat-value text-warning">{saldo.diasUsados}</div>
+									<div class="stat-desc">até agora</div>
+								</div>
+							</div>
 
-              <!-- Informações do Regime -->
-              <div class="alert alert-info mt-4">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  class="stroke-current shrink-0 w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <div>
-                  <h4 class="font-bold">{saldo.regimeTrabalho}</h4>
-                  <p class="text-sm">
-                    Período aquisitivo: {new Date(
-                      saldo.dataInicio,
-                    ).toLocaleDateString("pt-BR")}
-                    a {new Date(saldo.dataFim).toLocaleDateString("pt-BR")}
-                  </p>
-                </div>
-              </div>
+							<!-- Informações do Regime -->
+							<div class="alert alert-info mt-4">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									class="h-6 w-6 shrink-0 stroke-current"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									></path>
+								</svg>
+								<div>
+									<h4 class="font-bold">{saldo.regimeTrabalho}</h4>
+									<p class="text-sm">
+										Período aquisitivo: {new Date(saldo.dataInicio).toLocaleDateString('pt-BR')}
+										a {new Date(saldo.dataFim).toLocaleDateString('pt-BR')}
+									</p>
+								</div>
+							</div>
 
-              {#if saldo.diasDisponiveis === 0}
-                <div class="alert alert-warning mt-4">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="stroke-current shrink-0 h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                    />
-                  </svg>
-                  <span>Você não tem saldo disponível para este ano.</span>
-                </div>
-              {/if}
-            </div>
-          </div>
-        {:else}
-          <div class="alert alert-warning">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="stroke-current shrink-0 h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-            <span>Nenhum saldo encontrado para este ano.</span>
-          </div>
-        {/if}
-      </div>
-    {/if}
+							{#if saldo.diasDisponiveis === 0}
+								<div class="alert alert-warning mt-4">
+									<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+										/>
+									</svg>
+									<span>Você não tem saldo disponível para este ano.</span>
+								</div>
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="alert alert-warning">
+						<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+							/>
+						</svg>
+						<span>Nenhum saldo encontrado para este ano.</span>
+					</div>
+				{/if}
+			</div>
+		{/if}
 
-    <!-- PASSO 2: Seleção de Períodos -->
-    {#if passoAtual === 2}
-      <div class="passo-content animate-fadeIn">
-        <h2
-          class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
-        >
-          Selecione os Períodos de Férias
-        </h2>
+		<!-- PASSO 2: Seleção de Períodos -->
+		{#if passoAtual === 2}
+			<div class="passo-content animate-fadeIn">
+				<h2
+					class="from-primary to-secondary mb-6 bg-linear-to-r bg-clip-text text-center text-3xl font-bold text-transparent"
+				>
+					Selecione os Períodos de Férias
+				</h2>
 
-        <!-- Resumo rápido -->
-        <div class="alert bg-base-200 mb-6">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="stroke-info shrink-0 w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <div>
-            <p>
-              <strong>Saldo disponível:</strong>
-              {saldo?.diasDisponiveis || 0} dias |
-              <strong>Selecionados:</strong>
-              {totalDiasSelecionados} dias | <strong>Restante:</strong>
-              {(saldo?.diasDisponiveis || 0) - totalDiasSelecionados} dias
-            </p>
-          </div>
-        </div>
+				<!-- Resumo rápido -->
+				<div class="alert bg-base-200 mb-6">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="stroke-info h-6 w-6 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+					<div>
+						<p>
+							<strong>Saldo disponível:</strong>
+							{saldo?.diasDisponiveis || 0} dias |
+							<strong>Selecionados:</strong>
+							{totalDiasSelecionados} dias | <strong>Restante:</strong>
+							{(saldo?.diasDisponiveis || 0) - totalDiasSelecionados} dias
+						</p>
+					</div>
+				</div>
 
-        <!-- Calendário -->
-        <CalendarioFerias
-          periodosExistentes={periodosFerias}
-          onPeriodoAdicionado={handlePeriodoAdicionado}
-          onPeriodoRemovido={handlePeriodoRemovido}
-          {maxPeriodos}
-          {minDiasPorPeriodo}
-          modoVisualizacao="month"
-        ></CalendarioFerias>
+				<!-- Calendário -->
+				<CalendarioFerias
+					periodosExistentes={periodosFerias}
+					onPeriodoAdicionado={handlePeriodoAdicionado}
+					onPeriodoRemovido={handlePeriodoRemovido}
+					{maxPeriodos}
+					{minDiasPorPeriodo}
+					modoVisualizacao="month"
+				></CalendarioFerias>
 
-        <!-- Validações -->
-        {#if validacao && periodosFerias.length > 0}
-          <div class="mt-6">
-            {#if validacao.valido}
-              <div class="alert alert-success">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="stroke-current shrink-0 h-6 w-6"
-                  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
-                  >✅ Períodos válidos! Total: {validacao.totalDias} dias</span
-                >
-              </div>
-            {:else}
-              <div class="alert alert-error">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="stroke-current shrink-0 h-6 w-6"
-                  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>
-                <div>
-                  <p class="font-bold">Erros encontrados:</p>
-                  <ul class="list-disc list-inside">
-                    {#each validacao.erros as erro}
-                      <li>{erro}</li>
-                    {/each}
-                  </ul>
-                </div>
-              </div>
-            {/if}
+				<!-- Validações -->
+				{#if validacao && periodosFerias.length > 0}
+					<div class="mt-6">
+						{#if validacao.valido}
+							<div class="alert alert-success">
+								<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>✅ Períodos válidos! Total: {validacao.totalDias} dias</span>
+							</div>
+						{:else}
+							<div class="alert alert-error">
+								<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>
+								<div>
+									<p class="font-bold">Erros encontrados:</p>
+									<ul class="list-inside list-disc">
+										{#each validacao.erros as erro}
+											<li>{erro}</li>
+										{/each}
+									</ul>
+								</div>
+							</div>
+						{/if}
 
-            {#if validacao.avisos.length > 0}
-              <div class="alert alert-warning mt-4">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="stroke-current shrink-0 h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                  />
-                </svg>
-                <div>
-                  <p class="font-bold">Avisos:</p>
-                  <ul class="list-disc list-inside">
-                    {#each validacao.avisos as aviso}
-                      <li>{aviso}</li>
-                    {/each}
-                  </ul>
-                </div>
-              </div>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    {/if}
+						{#if validacao.avisos.length > 0}
+							<div class="alert alert-warning mt-4">
+								<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+									/>
+								</svg>
+								<div>
+									<p class="font-bold">Avisos:</p>
+									<ul class="list-inside list-disc">
+										{#each validacao.avisos as aviso}
+											<li>{aviso}</li>
+										{/each}
+									</ul>
+								</div>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/if}
 
-    <!-- PASSO 3: Confirmação -->
-    {#if passoAtual === 3}
-      <div class="passo-content animate-fadeIn">
-        <h2
-          class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
-        >
-          Confirme sua Solicitação
-        </h2>
+		<!-- PASSO 3: Confirmação -->
+		{#if passoAtual === 3}
+			<div class="passo-content animate-fadeIn">
+				<h2
+					class="from-primary to-secondary mb-6 bg-linear-to-r bg-clip-text text-center text-3xl font-bold text-transparent"
+				>
+					Confirme sua Solicitação
+				</h2>
 
-        <!-- Resumo Final -->
-        <div class="card bg-base-100 shadow-2xl">
-          <div class="card-body">
-            <h3 class="card-title text-xl mb-4">📝 Resumo da Solicitação</h3>
+				<!-- Resumo Final -->
+				<div class="card bg-base-100 shadow-2xl">
+					<div class="card-body">
+						<h3 class="card-title mb-4 text-xl">📝 Resumo da Solicitação</h3>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-              <div class="stat bg-base-200 rounded-lg">
-                <div class="stat-title">Ano de Referência</div>
-                <div class="stat-value text-primary">{anoSelecionado}</div>
-              </div>
+						<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div class="stat bg-base-200 rounded-lg">
+								<div class="stat-title">Ano de Referência</div>
+								<div class="stat-value text-primary">{anoSelecionado}</div>
+							</div>
 
-              <div class="stat bg-base-200 rounded-lg">
-                <div class="stat-title">Total de Dias</div>
-                <div class="stat-value text-success">
-                  {totalDiasSelecionados}
-                </div>
-              </div>
-            </div>
+							<div class="stat bg-base-200 rounded-lg">
+								<div class="stat-title">Total de Dias</div>
+								<div class="stat-value text-success">
+									{totalDiasSelecionados}
+								</div>
+							</div>
+						</div>
 
-            <h4 class="font-bold text-lg mb-2">Períodos Selecionados:</h4>
-            <div class="space-y-3">
-              {#each periodosFerias as periodo, index}
-                <div class="flex items-center gap-4 p-4 bg-base-200 rounded-lg">
-                  <div
-                    class="badge badge-lg badge-primary font-bold text-white w-12 h-12 flex items-center justify-center"
-                  >
-                    {index + 1}
-                  </div>
-                  <div class="flex-1">
-                    <p class="font-semibold">
-                      {new Date(periodo.dataInicio).toLocaleDateString(
-                        "pt-BR",
-                        {
-                          day: "2-digit",
-                          month: "long",
-                          year: "numeric",
-                        },
-                      )}
-                      até
-                      {new Date(periodo.dataFim).toLocaleDateString("pt-BR", {
-                        day: "2-digit",
-                        month: "long",
-                        year: "numeric",
-                      })}
-                    </p>
-                    <p class="text-sm text-base-content/70">
-                      {periodo.dias} dias corridos
-                    </p>
-                  </div>
-                </div>
-              {/each}
-            </div>
+						<h4 class="mb-2 text-lg font-bold">Períodos Selecionados:</h4>
+						<div class="space-y-3">
+							{#each periodosFerias as periodo, index}
+								<div class="bg-base-200 flex items-center gap-4 rounded-lg p-4">
+									<div
+										class="badge badge-lg badge-primary flex h-12 w-12 items-center justify-center font-bold text-white"
+									>
+										{index + 1}
+									</div>
+									<div class="flex-1">
+										<p class="font-semibold">
+											{new Date(periodo.dataInicio).toLocaleDateString('pt-BR', {
+												day: '2-digit',
+												month: 'long',
+												year: 'numeric'
+											})}
+											até
+											{new Date(periodo.dataFim).toLocaleDateString('pt-BR', {
+												day: '2-digit',
+												month: 'long',
+												year: 'numeric'
+											})}
+										</p>
+										<p class="text-base-content/70 text-sm">
+											{periodo.dias} dias corridos
+										</p>
+									</div>
+								</div>
+							{/each}
+						</div>
 
-            <!-- Campo de Observação -->
-            <div class="form-control mt-6">
-              <label for="observacao" class="label">
-                <span class="label-text font-semibold"
-                  >Observações (opcional)</span
-                >
-              </label>
-              <textarea
-                id="observacao"
-                class="textarea textarea-bordered h-24"
-                placeholder="Adicione alguma observação ou justificativa..."
-                bind:value={observacao}
-              ></textarea>
-            </div>
-          </div>
-        </div>
-      </div>
-    {/if}
-  </div>
+						<!-- Campo de Observação -->
+						<div class="form-control mt-6">
+							<label for="observacao" class="label">
+								<span class="label-text font-semibold">Observações (opcional)</span>
+							</label>
+							<textarea
+								id="observacao"
+								class="textarea textarea-bordered h-24"
+								placeholder="Adicione alguma observação ou justificativa..."
+								bind:value={observacao}
+							></textarea>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
 
-  <!-- Botões de Navegação -->
-  <div class="flex justify-between mt-8">
-    <div>
-      {#if passoAtual > 1}
-        <button
-          type="button"
-          class="btn btn-outline btn-lg gap-2"
-          onclick={passoAnterior}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
-          Voltar
-        </button>
-      {:else if onCancelar}
-        <button type="button" class="btn btn-ghost btn-lg" onclick={onCancelar}>
-          Cancelar
-        </button>
-      {/if}
-    </div>
+	<!-- Botões de Navegação -->
+	<div class="mt-8 flex justify-between">
+		<div>
+			{#if passoAtual > 1}
+				<button type="button" class="btn btn-outline btn-lg gap-2" onclick={passoAnterior}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+					Voltar
+				</button>
+			{:else if onCancelar}
+				<button type="button" class="btn btn-lg" onclick={onCancelar}> Cancelar </button>
+			{/if}
+		</div>
 
-    <div>
-      {#if passoAtual < totalPassos}
-        <button
-          type="button"
-          class="btn btn-primary btn-lg gap-2"
-          onclick={proximoPasso}
-          disabled={passoAtual === 1 && (!saldo || saldo.diasDisponiveis === 0)}
-        >
-          Próximo
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
-        </button>
-      {:else}
-        <button
-          type="button"
-          class="btn btn-success btn-lg gap-2"
-          onclick={enviarSolicitacao}
-          disabled={processando}
-        >
-          {#if processando}
-            <span class="loading loading-spinner"></span>
-            Enviando...
-          {:else}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-            Enviar Solicitação
-          {/if}
-        </button>
-      {/if}
-    </div>
-  </div>
+		<div>
+			{#if passoAtual < totalPassos}
+				<button
+					type="button"
+					class="btn btn-primary btn-lg gap-2"
+					onclick={proximoPasso}
+					disabled={passoAtual === 1 && (!saldo || saldo.diasDisponiveis === 0)}
+				>
+					Próximo
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7"
+						/>
+					</svg>
+				</button>
+			{:else}
+				<button
+					type="button"
+					class="btn btn-success btn-lg gap-2"
+					onclick={enviarSolicitacao}
+					disabled={processando}
+				>
+					{#if processando}
+						<span class="loading loading-spinner"></span>
+						Enviando...
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						Enviar Solicitação
+					{/if}
+				</button>
+			{/if}
+		</div>
+	</div>
 </div>
 
 <style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  .animate-fadeIn {
-    animation: fadeIn 0.5s ease-out;
-  }
+	.animate-fadeIn {
+		animation: fadeIn 0.5s ease-out;
+	}
 
-  .wizard-ferias-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-  }
+	.wizard-ferias-container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 2rem;
+	}
 
-  .passo-content {
-    min-height: 500px;
-  }
+	.passo-content {
+		min-height: 500px;
+	}
 
-  /* Gradiente no texto */
-  .bg-clip-text {
-    -webkit-background-clip: text;
-    background-clip: text;
-  }
+	/* Gradiente no texto */
+	.bg-clip-text {
+		-webkit-background-clip: text;
+		background-clip: text;
+	}
 
-  /* Responsive */
-  @media (max-width: 768px) {
-    .wizard-ferias-container {
-      padding: 1rem;
-    }
+	/* Responsive */
+	@media (max-width: 768px) {
+		.wizard-ferias-container {
+			padding: 1rem;
+		}
 
-    .passo-content {
-      min-height: 400px;
-    }
-  }
+		.passo-content {
+			min-height: 400px;
+		}
+	}
 </style>
diff --git a/apps/web/src/lib/components/ti/AlertConfigModal.svelte b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
index 76df517..db33da4 100644
--- a/apps/web/src/lib/components/ti/AlertConfigModal.svelte
+++ b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
@@ -286,7 +286,7 @@
 
 					<!-- Botões -->
 					<div class="card-actions mt-4 justify-end">
-						<button type="button" class="btn btn-ghost" onclick={resetForm} disabled={saving}>
+						<button type="button" class="btn" onclick={resetForm} disabled={saving}>
 							Cancelar
 						</button>
 						<button
@@ -404,7 +404,7 @@
 										<button
 											title="Editar Alerta"
 											type="button"
-											class="btn btn-ghost btn-xs"
+											class="btn btn-xs"
 											onclick={() => editAlert(alerta)}
 										>
 											<svg
@@ -425,7 +425,7 @@
 										<button
 											title="Deletar Alerta"
 											type="button"
-											class="btn btn-ghost btn-xs text-error"
+											class="btn btn-xs text-error"
 											onclick={() => deleteAlert(alerta._id)}
 										>
 											<svg
diff --git a/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte b/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
index fde48a7..11ca82d 100644
--- a/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
@@ -1,512 +1,495 @@
 <script lang="ts">
-  import { useConvexClient, useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { authStore } from "$lib/stores/auth.svelte";
-  import { goto } from "$app/navigation";
-  import { onMount } from "svelte";
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
 
-  const convex = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const convex = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  let senhaAtual = $state("");
-  let novaSenha = $state("");
-  let confirmarSenha = $state("");
-  let carregando = $state(false);
-  let notice = $state<{ type: "success" | "error"; message: string } | null>(
-    null,
-  );
-  let mostrarSenhaAtual = $state(false);
-  let mostrarNovaSenha = $state(false);
-  let mostrarConfirmarSenha = $state(false);
+	let senhaAtual = $state('');
+	let novaSenha = $state('');
+	let confirmarSenha = $state('');
+	let carregando = $state(false);
+	let notice = $state<{ type: 'success' | 'error'; message: string } | null>(null);
+	let mostrarSenhaAtual = $state(false);
+	let mostrarNovaSenha = $state(false);
+	let mostrarConfirmarSenha = $state(false);
 
-  onMount(() => {
-    if (!currentUser?.data) {
-      goto("/");
-    }
-  });
+	onMount(() => {
+		if (!currentUser?.data) {
+			goto('/');
+		}
+	});
 
-  function validarSenha(senha: string): { valido: boolean; erros: string[] } {
-    const erros: string[] = [];
+	function validarSenha(senha: string): { valido: boolean; erros: string[] } {
+		const erros: string[] = [];
 
-    if (senha.length < 8) {
-      erros.push("A senha deve ter no mínimo 8 caracteres");
-    }
-    if (!/[A-Z]/.test(senha)) {
-      erros.push("A senha deve conter pelo menos uma letra maiúscula");
-    }
-    if (!/[a-z]/.test(senha)) {
-      erros.push("A senha deve conter pelo menos uma letra minúscula");
-    }
-    if (!/[0-9]/.test(senha)) {
-      erros.push("A senha deve conter pelo menos um número");
-    }
-    if (!/[!@#$%^&*(),.?":{}|<>]/.test(senha)) {
-      erros.push("A senha deve conter pelo menos um caractere especial");
-    }
+		if (senha.length < 8) {
+			erros.push('A senha deve ter no mínimo 8 caracteres');
+		}
+		if (!/[A-Z]/.test(senha)) {
+			erros.push('A senha deve conter pelo menos uma letra maiúscula');
+		}
+		if (!/[a-z]/.test(senha)) {
+			erros.push('A senha deve conter pelo menos uma letra minúscula');
+		}
+		if (!/[0-9]/.test(senha)) {
+			erros.push('A senha deve conter pelo menos um número');
+		}
+		if (!/[!@#$%^&*(),.?":{}|<>]/.test(senha)) {
+			erros.push('A senha deve conter pelo menos um caractere especial');
+		}
 
-    return {
-      valido: erros.length === 0,
-      erros,
-    };
-  }
+		return {
+			valido: erros.length === 0,
+			erros
+		};
+	}
 
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
-    notice = null;
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		notice = null;
 
-    // Validações
-    if (!senhaAtual || !novaSenha || !confirmarSenha) {
-      notice = {
-        type: "error",
-        message: "Todos os campos são obrigatórios",
-      };
-      return;
-    }
+		// Validações
+		if (!senhaAtual || !novaSenha || !confirmarSenha) {
+			notice = {
+				type: 'error',
+				message: 'Todos os campos são obrigatórios'
+			};
+			return;
+		}
 
-    if (novaSenha !== confirmarSenha) {
-      notice = {
-        type: "error",
-        message: "A nova senha e a confirmação não coincidem",
-      };
-      return;
-    }
+		if (novaSenha !== confirmarSenha) {
+			notice = {
+				type: 'error',
+				message: 'A nova senha e a confirmação não coincidem'
+			};
+			return;
+		}
 
-    if (senhaAtual === novaSenha) {
-      notice = {
-        type: "error",
-        message: "A nova senha deve ser diferente da senha atual",
-      };
-      return;
-    }
+		if (senhaAtual === novaSenha) {
+			notice = {
+				type: 'error',
+				message: 'A nova senha deve ser diferente da senha atual'
+			};
+			return;
+		}
 
-    const validacao = validarSenha(novaSenha);
-    if (!validacao.valido) {
-      notice = {
-        type: "error",
-        message: validacao.erros.join(". "),
-      };
-      return;
-    }
+		const validacao = validarSenha(novaSenha);
+		if (!validacao.valido) {
+			notice = {
+				type: 'error',
+				message: validacao.erros.join('. ')
+			};
+			return;
+		}
 
-    carregando = true;
+		carregando = true;
 
-    try {
-      if (!authStore.token) {
-        throw new Error("Token não encontrado");
-      }
+		try {
+			if (!authStore.token) {
+				throw new Error('Token não encontrado');
+			}
 
-      const resultado = await convex.mutation(api.autenticacao.alterarSenha, {
-        token: authStore.token,
-        senhaAtual: senhaAtual,
-        novaSenha: novaSenha,
-      });
+			const resultado = await convex.mutation(api.autenticacao.alterarSenha, {
+				token: authStore.token,
+				senhaAtual: senhaAtual,
+				novaSenha: novaSenha
+			});
 
-      if (resultado.sucesso) {
-        notice = {
-          type: "success",
-          message: "Senha alterada com sucesso! Redirecionando...",
-        };
+			if (resultado.sucesso) {
+				notice = {
+					type: 'success',
+					message: 'Senha alterada com sucesso! Redirecionando...'
+				};
 
-        // Limpar campos
-        senhaAtual = "";
-        novaSenha = "";
-        confirmarSenha = "";
+				// Limpar campos
+				senhaAtual = '';
+				novaSenha = '';
+				confirmarSenha = '';
 
-        // Redirecionar após 2 segundos
-        setTimeout(() => {
-          goto("/");
-        }, 2000);
-      } else {
-        notice = {
-          type: "error",
-          message: resultado.erro || "Erro ao alterar senha",
-        };
-      }
-    } catch (error: any) {
-      notice = {
-        type: "error",
-        message: error.message || "Erro ao conectar com o servidor",
-      };
-    } finally {
-      carregando = false;
-    }
-  }
+				// Redirecionar após 2 segundos
+				setTimeout(() => {
+					goto('/');
+				}, 2000);
+			} else {
+				notice = {
+					type: 'error',
+					message: resultado.erro || 'Erro ao alterar senha'
+				};
+			}
+		} catch (error: any) {
+			notice = {
+				type: 'error',
+				message: error.message || 'Erro ao conectar com o servidor'
+			};
+		} finally {
+			carregando = false;
+		}
+	}
 
-  function cancelar() {
-    goto("/");
-  }
+	function cancelar() {
+		goto('/');
+	}
 </script>
 
-<main class="container mx-auto px-4 py-8 max-w-2xl">
-  <!-- Header -->
-  <div class="mb-8">
-    <div class="flex items-center gap-3 mb-2">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-10 w-10 text-primary"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-        />
-      </svg>
-      <h1 class="text-4xl font-bold text-primary">Alterar Senha</h1>
-    </div>
-    <p class="text-base-content/70 text-lg">
-      Atualize sua senha de acesso ao sistema
-    </p>
-  </div>
+<main class="container mx-auto max-w-2xl px-4 py-8">
+	<!-- Header -->
+	<div class="mb-8">
+		<div class="mb-2 flex items-center gap-3">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-primary h-10 w-10"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+				/>
+			</svg>
+			<h1 class="text-primary text-4xl font-bold">Alterar Senha</h1>
+		</div>
+		<p class="text-base-content/70 text-lg">Atualize sua senha de acesso ao sistema</p>
+	</div>
 
-  <!-- Breadcrumbs -->
-  <div class="text-sm breadcrumbs mb-6">
-    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li>Alterar Senha</li>
-    </ul>
-  </div>
+	<!-- Breadcrumbs -->
+	<div class="breadcrumbs mb-6 text-sm">
+		<ul>
+			<li><a href="/">Dashboard</a></li>
+			<li>Alterar Senha</li>
+		</ul>
+	</div>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div
-      class="alert {notice.type === 'success'
-        ? 'alert-success'
-        : 'alert-error'} mb-6 shadow-lg"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if notice.type === "success"}
-          <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"
-          />
-        {:else}
-          <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"
-          />
-        {/if}
-      </svg>
-      <span>{notice.message}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div class="alert {notice.type === 'success' ? 'alert-success' : 'alert-error'} mb-6 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"
+			>
+				{#if notice.type === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.message}</span>
+		</div>
+	{/if}
 
-  <!-- Formulário -->
-  <div class="card bg-base-100 shadow-xl border border-base-300">
-    <div class="card-body">
-      <form onsubmit={handleSubmit} class="space-y-6">
-        <!-- Senha Atual -->
-        <div class="form-control">
-          <label class="label" for="senha-atual">
-            <span class="label-text font-semibold">Senha Atual</span>
-            <span class="label-text-alt text-error">*</span>
-          </label>
-          <div class="relative">
-            <input
-              id="senha-atual"
-              type={mostrarSenhaAtual ? "text" : "password"}
-              placeholder="Digite sua senha atual"
-              class="input input-bordered input-primary w-full pr-12"
-              bind:value={senhaAtual}
-              required
-              disabled={carregando}
-            />
-            <button
-              type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
-              onclick={() => (mostrarSenhaAtual = !mostrarSenhaAtual)}
-            >
-              {#if mostrarSenhaAtual}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                  />
-                </svg>
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                  />
-                </svg>
-              {/if}
-            </button>
-          </div>
-        </div>
+	<!-- Formulário -->
+	<div class="card bg-base-100 border-base-300 border shadow-xl">
+		<div class="card-body">
+			<form onsubmit={handleSubmit} class="space-y-6">
+				<!-- Senha Atual -->
+				<div class="form-control">
+					<label class="label" for="senha-atual">
+						<span class="label-text font-semibold">Senha Atual</span>
+						<span class="label-text-alt text-error">*</span>
+					</label>
+					<div class="relative">
+						<input
+							id="senha-atual"
+							type={mostrarSenhaAtual ? 'text' : 'password'}
+							placeholder="Digite sua senha atual"
+							class="input input-bordered input-primary w-full pr-12"
+							bind:value={senhaAtual}
+							required
+							disabled={carregando}
+						/>
+						<button
+							type="button"
+							class="btn btn-sm btn-circle absolute top-1/2 right-3 -translate-y-1/2"
+							onclick={() => (mostrarSenhaAtual = !mostrarSenhaAtual)}
+						>
+							{#if mostrarSenhaAtual}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+									/>
+								</svg>
+							{/if}
+						</button>
+					</div>
+				</div>
 
-        <!-- Nova Senha -->
-        <div class="form-control">
-          <label class="label" for="nova-senha">
-            <span class="label-text font-semibold">Nova Senha</span>
-            <span class="label-text-alt text-error">*</span>
-          </label>
-          <div class="relative">
-            <input
-              id="nova-senha"
-              type={mostrarNovaSenha ? "text" : "password"}
-              placeholder="Digite sua nova senha"
-              class="input input-bordered input-primary w-full pr-12"
-              bind:value={novaSenha}
-              required
-              disabled={carregando}
-            />
-            <button
-              type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
-              onclick={() => (mostrarNovaSenha = !mostrarNovaSenha)}
-            >
-              {#if mostrarNovaSenha}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                  />
-                </svg>
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                  />
-                </svg>
-              {/if}
-            </button>
-          </div>
-          <div class="label">
-            <span class="label-text-alt text-base-content/60">
-              Mínimo 8 caracteres, com letras maiúsculas, minúsculas, números e
-              caracteres especiais
-            </span>
-          </div>
-        </div>
+				<!-- Nova Senha -->
+				<div class="form-control">
+					<label class="label" for="nova-senha">
+						<span class="label-text font-semibold">Nova Senha</span>
+						<span class="label-text-alt text-error">*</span>
+					</label>
+					<div class="relative">
+						<input
+							id="nova-senha"
+							type={mostrarNovaSenha ? 'text' : 'password'}
+							placeholder="Digite sua nova senha"
+							class="input input-bordered input-primary w-full pr-12"
+							bind:value={novaSenha}
+							required
+							disabled={carregando}
+						/>
+						<button
+							type="button"
+							class="btn btn-sm btn-circle absolute top-1/2 right-3 -translate-y-1/2"
+							onclick={() => (mostrarNovaSenha = !mostrarNovaSenha)}
+						>
+							{#if mostrarNovaSenha}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+									/>
+								</svg>
+							{/if}
+						</button>
+					</div>
+					<div class="label">
+						<span class="label-text-alt text-base-content/60">
+							Mínimo 8 caracteres, com letras maiúsculas, minúsculas, números e caracteres especiais
+						</span>
+					</div>
+				</div>
 
-        <!-- Confirmar Senha -->
-        <div class="form-control">
-          <label class="label" for="confirmar-senha">
-            <span class="label-text font-semibold">Confirmar Nova Senha</span>
-            <span class="label-text-alt text-error">*</span>
-          </label>
-          <div class="relative">
-            <input
-              id="confirmar-senha"
-              type={mostrarConfirmarSenha ? "text" : "password"}
-              placeholder="Digite novamente sua nova senha"
-              class="input input-bordered input-primary w-full pr-12"
-              bind:value={confirmarSenha}
-              required
-              disabled={carregando}
-            />
-            <button
-              type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
-              onclick={() => (mostrarConfirmarSenha = !mostrarConfirmarSenha)}
-            >
-              {#if mostrarConfirmarSenha}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                  />
-                </svg>
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                  />
-                </svg>
-              {/if}
-            </button>
-          </div>
-        </div>
+				<!-- Confirmar Senha -->
+				<div class="form-control">
+					<label class="label" for="confirmar-senha">
+						<span class="label-text font-semibold">Confirmar Nova Senha</span>
+						<span class="label-text-alt text-error">*</span>
+					</label>
+					<div class="relative">
+						<input
+							id="confirmar-senha"
+							type={mostrarConfirmarSenha ? 'text' : 'password'}
+							placeholder="Digite novamente sua nova senha"
+							class="input input-bordered input-primary w-full pr-12"
+							bind:value={confirmarSenha}
+							required
+							disabled={carregando}
+						/>
+						<button
+							type="button"
+							class="btn btn-sm btn-circle absolute top-1/2 right-3 -translate-y-1/2"
+							onclick={() => (mostrarConfirmarSenha = !mostrarConfirmarSenha)}
+						>
+							{#if mostrarConfirmarSenha}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+									/>
+								</svg>
+							{/if}
+						</button>
+					</div>
+				</div>
 
-        <!-- Requisitos de Senha -->
-        <div class="alert alert-info">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <div>
-            <h3 class="font-bold">Requisitos de Senha:</h3>
-            <ul class="text-sm list-disc list-inside mt-2 space-y-1">
-              <li>Mínimo de 8 caracteres</li>
-              <li>Pelo menos uma letra maiúscula (A-Z)</li>
-              <li>Pelo menos uma letra minúscula (a-z)</li>
-              <li>Pelo menos um número (0-9)</li>
-              <li>Pelo menos um caractere especial (!@#$%^&*...)</li>
-            </ul>
-          </div>
-        </div>
+				<!-- Requisitos de Senha -->
+				<div class="alert alert-info">
+					<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<div>
+						<h3 class="font-bold">Requisitos de Senha:</h3>
+						<ul class="mt-2 list-inside list-disc space-y-1 text-sm">
+							<li>Mínimo de 8 caracteres</li>
+							<li>Pelo menos uma letra maiúscula (A-Z)</li>
+							<li>Pelo menos uma letra minúscula (a-z)</li>
+							<li>Pelo menos um número (0-9)</li>
+							<li>Pelo menos um caractere especial (!@#$%^&*...)</li>
+						</ul>
+					</div>
+				</div>
 
-        <!-- Botões -->
-        <div class="flex gap-4 justify-end mt-8">
-          <button
-            type="button"
-            class="btn btn-ghost"
-            onclick={cancelar}
-            disabled={carregando}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-            Cancelar
-          </button>
-          <button type="submit" class="btn btn-primary" disabled={carregando}>
-            {#if carregando}
-              <span class="loading loading-spinner loading-sm"></span>
-              Alterando...
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-              Alterar Senha
-            {/if}
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
+				<!-- Botões -->
+				<div class="mt-8 flex justify-end gap-4">
+					<button type="button" class="btn" onclick={cancelar} disabled={carregando}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Cancelar
+					</button>
+					<button type="submit" class="btn btn-primary" disabled={carregando}>
+						{#if carregando}
+							<span class="loading loading-spinner loading-sm"></span>
+							Alterando...
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Alterar Senha
+						{/if}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
 
-  <!-- Dicas de Segurança -->
-  <div class="mt-6 card bg-base-200 shadow-lg">
-    <div class="card-body">
-      <h3 class="card-title text-lg">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 text-warning"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          />
-        </svg>
-        Dicas de Segurança
-      </h3>
-      <ul class="text-sm space-y-2 text-base-content/70">
-        <li>✅ Nunca compartilhe sua senha com ninguém</li>
-        <li>✅ Use uma senha única para cada sistema</li>
-        <li>✅ Altere sua senha regularmente</li>
-        <li>
-          ✅ Não use informações pessoais óbvias (nome, data de nascimento,
-          etc.)
-        </li>
-        <li>✅ Considere usar um gerenciador de senhas</li>
-      </ul>
-    </div>
-  </div>
+	<!-- Dicas de Segurança -->
+	<div class="card bg-base-200 mt-6 shadow-lg">
+		<div class="card-body">
+			<h3 class="card-title text-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-warning h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+					/>
+				</svg>
+				Dicas de Segurança
+			</h3>
+			<ul class="text-base-content/70 space-y-2 text-sm">
+				<li>✅ Nunca compartilhe sua senha com ninguém</li>
+				<li>✅ Use uma senha única para cada sistema</li>
+				<li>✅ Altere sua senha regularmente</li>
+				<li>✅ Não use informações pessoais óbvias (nome, data de nascimento, etc.)</li>
+				<li>✅ Considere usar um gerenciador de senhas</li>
+			</ul>
+		</div>
+	</div>
 </main>
diff --git a/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte b/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
index 2cedee5..9d85216 100644
--- a/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
@@ -1,264 +1,363 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
 
-  const convex = useConvexClient();
+	const convex = useConvexClient();
 
-  let matricula = $state("");
-  let email = $state("");
-  let carregando = $state(false);
-  let notice = $state<{ type: "success" | "error" | "info"; message: string } | null>(null);
-  let solicitacaoEnviada = $state(false);
+	let matricula = $state('');
+	let email = $state('');
+	let carregando = $state(false);
+	let notice = $state<{ type: 'success' | 'error' | 'info'; message: string } | null>(null);
+	let solicitacaoEnviada = $state(false);
 
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
-    notice = null;
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		notice = null;
 
-    if (!matricula || !email) {
-      notice = {
-        type: "error",
-        message: "Por favor, preencha todos os campos",
-      };
-      return;
-    }
+		if (!matricula || !email) {
+			notice = {
+				type: 'error',
+				message: 'Por favor, preencha todos os campos'
+			};
+			return;
+		}
 
-    carregando = true;
+		carregando = true;
 
-    try {
-      // Verificar se o usuário existe
-      const usuarios = await convex.query(api.usuarios.listar, {
-        matricula: matricula,
-      });
+		try {
+			// Verificar se o usuário existe
+			const usuarios = await convex.query(api.usuarios.listar, {
+				matricula: matricula
+			});
 
-      const usuario = usuarios.find(u => u.matricula === matricula && u.email === email);
+			const usuario = usuarios.find((u) => u.matricula === matricula && u.email === email);
 
-      if (!usuario) {
-        notice = {
-          type: "error",
-          message: "Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.",
-        };
-        carregando = false;
-        return;
-      }
+			if (!usuario) {
+				notice = {
+					type: 'error',
+					message: 'Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.'
+				};
+				carregando = false;
+				return;
+			}
 
-      // Simular envio de solicitação
-      solicitacaoEnviada = true;
-      notice = {
-        type: "success",
-        message: "Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.",
-      };
+			// Simular envio de solicitação
+			solicitacaoEnviada = true;
+			notice = {
+				type: 'success',
+				message: 'Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.'
+			};
 
-      // Limpar campos
-      matricula = "";
-      email = "";
-    } catch (error: any) {
-      notice = {
-        type: "error",
-        message: error.message || "Erro ao processar solicitação",
-      };
-    } finally {
-      carregando = false;
-    }
-  }
+			// Limpar campos
+			matricula = '';
+			email = '';
+		} catch (error: any) {
+			notice = {
+				type: 'error',
+				message: error.message || 'Erro ao processar solicitação'
+			};
+		} finally {
+			carregando = false;
+		}
+	}
 </script>
 
-<main class="container mx-auto px-4 py-8 max-w-2xl">
-  <!-- Header -->
-  <div class="mb-8">
-    <div class="flex items-center gap-3 mb-2">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      <h1 class="text-4xl font-bold text-primary">Esqueci Minha Senha</h1>
-    </div>
-    <p class="text-base-content/70 text-lg">
-      Solicite a recuperação da sua senha de acesso
-    </p>
-  </div>
+<main class="container mx-auto max-w-2xl px-4 py-8">
+	<!-- Header -->
+	<div class="mb-8">
+		<div class="mb-2 flex items-center gap-3">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-primary h-10 w-10"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			<h1 class="text-primary text-4xl font-bold">Esqueci Minha Senha</h1>
+		</div>
+		<p class="text-base-content/70 text-lg">Solicite a recuperação da sua senha de acesso</p>
+	</div>
 
-  <!-- Breadcrumbs -->
-  <div class="text-sm breadcrumbs mb-6">
-    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li>Esqueci Minha Senha</li>
-    </ul>
-  </div>
+	<!-- Breadcrumbs -->
+	<div class="breadcrumbs mb-6 text-sm">
+		<ul>
+			<li><a href="/">Dashboard</a></li>
+			<li>Esqueci Minha Senha</li>
+		</ul>
+	</div>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div class="alert {notice.type === 'success' ? 'alert-success' : notice.type === 'error' ? 'alert-error' : 'alert-info'} mb-6 shadow-lg">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if notice.type === "success"}
-          <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"
-          />
-        {:else if notice.type === "error"}
-          <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"
-          />
-        {:else}
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        {/if}
-      </svg>
-      <span>{notice.message}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div
+			class="alert {notice.type === 'success'
+				? 'alert-success'
+				: notice.type === 'error'
+					? 'alert-error'
+					: 'alert-info'} mb-6 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"
+			>
+				{#if notice.type === 'success'}
+					<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"
+					/>
+				{:else if notice.type === 'error'}
+					<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"
+					/>
+				{:else}
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.message}</span>
+		</div>
+	{/if}
 
-  {#if !solicitacaoEnviada}
-    <!-- Formulário -->
-    <div class="card bg-base-100 shadow-xl border border-base-300">
-      <div class="card-body">
-        <div class="alert alert-info mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          <div>
-            <h3 class="font-bold">Como funciona?</h3>
-            <p class="text-sm">
-              Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e entrará em contato para resetar sua senha.
-            </p>
-          </div>
-        </div>
+	{#if !solicitacaoEnviada}
+		<!-- Formulário -->
+		<div class="card bg-base-100 border-base-300 border shadow-xl">
+			<div class="card-body">
+				<div class="alert alert-info mb-6">
+					<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<div>
+						<h3 class="font-bold">Como funciona?</h3>
+						<p class="text-sm">
+							Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e
+							entrará em contato para resetar sua senha.
+						</p>
+					</div>
+				</div>
 
-        <form onsubmit={handleSubmit} class="space-y-6">
-          <!-- Matrícula -->
-          <div class="form-control">
-            <label class="label" for="matricula">
-              <span class="label-text font-semibold">Matrícula</span>
-              <span class="label-text-alt text-error">*</span>
-            </label>
-            <input
-              id="matricula"
-              type="text"
-              placeholder="Digite sua matrícula"
-              class="input input-bordered input-primary w-full"
-              bind:value={matricula}
-              required
-              disabled={carregando}
-            />
-          </div>
+				<form onsubmit={handleSubmit} class="space-y-6">
+					<!-- Matrícula -->
+					<div class="form-control">
+						<label class="label" for="matricula">
+							<span class="label-text font-semibold">Matrícula</span>
+							<span class="label-text-alt text-error">*</span>
+						</label>
+						<input
+							id="matricula"
+							type="text"
+							placeholder="Digite sua matrícula"
+							class="input input-bordered input-primary w-full"
+							bind:value={matricula}
+							required
+							disabled={carregando}
+						/>
+					</div>
 
-          <!-- E-mail -->
-          <div class="form-control">
-            <label class="label" for="email">
-              <span class="label-text font-semibold">E-mail</span>
-              <span class="label-text-alt text-error">*</span>
-            </label>
-            <input
-              id="email"
-              type="email"
-              placeholder="Digite seu e-mail cadastrado"
-              class="input input-bordered input-primary w-full"
-              bind:value={email}
-              required
-              disabled={carregando}
-            />
-            <label class="label">
-              <span class="label-text-alt text-base-content/60">
-                Use o e-mail cadastrado no sistema
-              </span>
-            </label>
-          </div>
+					<!-- E-mail -->
+					<div class="form-control">
+						<label class="label" for="email">
+							<span class="label-text font-semibold">E-mail</span>
+							<span class="label-text-alt text-error">*</span>
+						</label>
+						<input
+							id="email"
+							type="email"
+							placeholder="Digite seu e-mail cadastrado"
+							class="input input-bordered input-primary w-full"
+							bind:value={email}
+							required
+							disabled={carregando}
+						/>
+						<label class="label">
+							<span class="label-text-alt text-base-content/60">
+								Use o e-mail cadastrado no sistema
+							</span>
+						</label>
+					</div>
 
-          <!-- Botões -->
-          <div class="flex gap-4 justify-end mt-8">
-            <a href="/" class="btn btn-ghost" class:btn-disabled={carregando}>
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-              </svg>
-              Voltar
-            </a>
-            <button
-              type="submit"
-              class="btn btn-primary"
-              disabled={carregando}
-            >
-              {#if carregando}
-                <span class="loading loading-spinner loading-sm"></span>
-                Enviando...
-              {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                </svg>
-                Enviar Solicitação
-              {/if}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  {:else}
-    <!-- Mensagem de Sucesso -->
-    <div class="card bg-success/10 shadow-xl border border-success/30">
-      <div class="card-body text-center">
-        <div class="flex justify-center mb-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <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>
-        </div>
-        <h2 class="text-2xl font-bold text-success mb-4">Solicitação Enviada!</h2>
-        <p class="text-base-content/70 mb-6">
-          Sua solicitação de recuperação de senha foi enviada para a equipe de TI.
-          Você receberá um contato em breve com as instruções para resetar sua senha.
-        </p>
-        <div class="flex gap-4 justify-center">
-          <a href="/" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-            </svg>
-            Voltar ao Dashboard
-          </a>
-          <button type="button" class="btn btn-ghost" onclick={() => solicitacaoEnviada = false}>
-            Enviar Nova Solicitação
-          </button>
-        </div>
-      </div>
-    </div>
-  {/if}
+					<!-- Botões -->
+					<div class="mt-8 flex justify-end gap-4">
+						<a href="/" class="btn" class:btn-disabled={carregando}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M10 19l-7-7m0 0l7-7m-7 7h18"
+								/>
+							</svg>
+							Voltar
+						</a>
+						<button type="submit" class="btn btn-primary" disabled={carregando}>
+							{#if carregando}
+								<span class="loading loading-spinner loading-sm"></span>
+								Enviando...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+									/>
+								</svg>
+								Enviar Solicitação
+							{/if}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	{:else}
+		<!-- Mensagem de Sucesso -->
+		<div class="card bg-success/10 border-success/30 border shadow-xl">
+			<div class="card-body text-center">
+				<div class="mb-4 flex justify-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-success h-24 w-24"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<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>
+				</div>
+				<h2 class="text-success mb-4 text-2xl font-bold">Solicitação Enviada!</h2>
+				<p class="text-base-content/70 mb-6">
+					Sua solicitação de recuperação de senha foi enviada para a equipe de TI. Você receberá um
+					contato em breve com as instruções para resetar sua senha.
+				</p>
+				<div class="flex justify-center gap-4">
+					<a href="/" class="btn btn-primary">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+							/>
+						</svg>
+						Voltar ao Dashboard
+					</a>
+					<button type="button" class="btn" onclick={() => (solicitacaoEnviada = false)}>
+						Enviar Nova Solicitação
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 
-  <!-- Card de Contato -->
-  <div class="mt-6 card bg-base-200 shadow-lg">
-    <div class="card-body">
-      <h3 class="card-title text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        Precisa de Ajuda?
-      </h3>
-      <p class="text-sm text-base-content/70">
-        Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato diretamente com a equipe de TI:
-      </p>
-      <div class="mt-4 space-y-2">
-        <div class="flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-          <span class="text-sm">ti@sgse.pe.gov.br</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-          </svg>
-          <span class="text-sm">(81) 3183-8000</span>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Card de Contato -->
+	<div class="card bg-base-200 mt-6 shadow-lg">
+		<div class="card-body">
+			<h3 class="card-title text-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-info h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				Precisa de Ajuda?
+			</h3>
+			<p class="text-base-content/70 text-sm">
+				Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato
+				diretamente com a equipe de TI:
+			</p>
+			<div class="mt-4 space-y-2">
+				<div class="flex items-center gap-2">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+						/>
+					</svg>
+					<span class="text-sm">ti@sgse.pe.gov.br</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+						/>
+					</svg>
+					<span class="text-sm">(81) 3183-8000</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </main>
-
diff --git a/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte b/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte
index 9f54d61..774da20 100644
--- a/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte
@@ -1,419 +1,407 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import AprovarAusencias from "$lib/components/AprovarAusencias.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { goto } from '$app/navigation';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
-const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  // Buscar TODAS as solicitações de ausências
-  const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
+	// Buscar TODAS as solicitações de ausências
+	const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
 
-  let filtroStatus = $state<string>("todos");
-  let solicitacaoSelecionada = $state<Id<"solicitacoesAusencias"> | null>(null);
+	let filtroStatus = $state<string>('todos');
+	let solicitacaoSelecionada = $state<Id<'solicitacoesAusencias'> | null>(null);
 
-  const ausencias = $derived(todasAusenciasQuery?.data || []);
+	const ausencias = $derived(todasAusenciasQuery?.data || []);
 
-  // Filtrar solicitações
-  const ausenciasFiltradas = $derived(
-    ausencias.filter((a) => {
-      // Filtro de status
-      if (filtroStatus !== "todos" && a.status !== filtroStatus) return false;
-      return true;
-    })
-  );
+	// Filtrar solicitações
+	const ausenciasFiltradas = $derived(
+		ausencias.filter((a) => {
+			// Filtro de status
+			if (filtroStatus !== 'todos' && a.status !== filtroStatus) return false;
+			return true;
+		})
+	);
 
-  // Estatísticas gerais
-  const stats = $derived({
-    total: ausencias.length,
-    aguardando: ausencias.filter((a) => a.status === "aguardando_aprovacao").length,
-    aprovadas: ausencias.filter((a) => a.status === "aprovado").length,
-    reprovadas: ausencias.filter((a) => a.status === "reprovado").length,
-  });
+	// Estatísticas gerais
+	const stats = $derived({
+		total: ausencias.length,
+		aguardando: ausencias.filter((a) => a.status === 'aguardando_aprovacao').length,
+		aprovadas: ausencias.filter((a) => a.status === 'aprovado').length,
+		reprovadas: ausencias.filter((a) => a.status === 'reprovado').length
+	});
 
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-    };
-    return badges[status] || "badge-neutral";
-  }
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error'
+		};
+		return badges[status] || 'badge-neutral';
+	}
 
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-    };
-    return textos[status] || status;
-  }
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado'
+		};
+		return textos[status] || status;
+	}
 
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diff = fim.getTime() - inicio.getTime();
-    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-  }
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+		const diff = fim.getTime() - inicio.getTime();
+		return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  async function selecionarSolicitacao(solicitacaoId: Id<"solicitacoesAusencias">) {
-    solicitacaoSelecionada = solicitacaoId;
-  }
+	async function selecionarSolicitacao(solicitacaoId: Id<'solicitacoesAusencias'>) {
+		solicitacaoSelecionada = solicitacaoId;
+	}
 
-  async function recarregar() {
-    solicitacaoSelecionada = null;
-  }
+	async function recarregar() {
+		solicitacaoSelecionada = null;
+	}
 </script>
 
-<main class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/gestao-pessoas" class="text-primary hover:underline"
-          >Secretaria de Gestão de Pessoas</a
-        >
-      </li>
-      <li>Gestão de Ausências</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/gestao-pessoas" class="text-primary hover:underline"
+					>Secretaria de Gestão de Pessoas</a
+				>
+			</li>
+			<li>Gestão de Ausências</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-orange-500/20 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-orange-600"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Gestão de Ausências</h1>
-          <p class="text-base-content/70">
-            Visão geral de todas as solicitações de ausências
-          </p>
-        </div>
-      </div>
-      <button
-        class="btn btn-ghost gap-2"
-        onclick={() => goto("/gestao-pessoas")}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-orange-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-orange-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Gestão de Ausências</h1>
+					<p class="text-base-content/70">Visão geral de todas as solicitações de ausências</p>
+				</div>
+			</div>
+			<button class="btn gap-2" onclick={() => goto('/gestao-pessoas')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
 
-  <!-- Estatísticas -->
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-      <div class="stat-figure text-orange-500">
-        <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Total</div>
-      <div class="stat-value text-orange-500">{stats.total}</div>
-      <div class="stat-desc">Solicitações</div>
-    </div>
+	<!-- Estatísticas -->
+	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+		<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+			<div class="stat-figure text-orange-500">
+				<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Total</div>
+			<div class="stat-value text-orange-500">{stats.total}</div>
+			<div class="stat-desc">Solicitações</div>
+		</div>
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-warning/30">
-      <div class="stat-figure text-warning">
-        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Pendentes</div>
-      <div class="stat-value text-warning">{stats.aguardando}</div>
-      <div class="stat-desc">Aguardando</div>
-    </div>
+		<div class="stat bg-base-100 rounded-box border-warning/30 border shadow-lg">
+			<div class="stat-figure text-warning">
+				<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Pendentes</div>
+			<div class="stat-value text-warning">{stats.aguardando}</div>
+			<div class="stat-desc">Aguardando</div>
+		</div>
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-success/30">
-      <div class="stat-figure text-success">
-        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Aprovadas</div>
-      <div class="stat-value text-success">{stats.aprovadas}</div>
-      <div class="stat-desc">Deferidas</div>
-    </div>
+		<div class="stat bg-base-100 rounded-box border-success/30 border shadow-lg">
+			<div class="stat-figure text-success">
+				<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Aprovadas</div>
+			<div class="stat-value text-success">{stats.aprovadas}</div>
+			<div class="stat-desc">Deferidas</div>
+		</div>
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
-      <div class="stat-figure text-error">
-        <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Reprovadas</div>
-      <div class="stat-value text-error">{stats.reprovadas}</div>
-      <div class="stat-desc">Indeferidas</div>
-    </div>
-  </div>
+		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
+			<div class="stat-figure text-error">
+				<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Reprovadas</div>
+			<div class="stat-value text-error">{stats.reprovadas}</div>
+			<div class="stat-desc">Indeferidas</div>
+		</div>
+	</div>
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-lg mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">Filtros</h2>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="form-control">
-          <label class="label" for="filtro-status">
-            <span class="label-text">Status</span>
-          </label>
-          <select
-            id="filtro-status"
-            class="select select-bordered"
-            bind:value={filtroStatus}
-          >
-            <option value="todos">Todos</option>
-            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
-            <option value="aprovado">Aprovado</option>
-            <option value="reprovado">Reprovado</option>
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">Filtros</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<div class="form-control">
+					<label class="label" for="filtro-status">
+						<span class="label-text">Status</span>
+					</label>
+					<select id="filtro-status" class="select select-bordered" bind:value={filtroStatus}>
+						<option value="todos">Todos</option>
+						<option value="aguardando_aprovacao">Aguardando Aprovação</option>
+						<option value="aprovado">Aprovado</option>
+						<option value="reprovado">Reprovado</option>
+					</select>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Lista de Solicitações -->
-  <div class="card bg-base-100 shadow-lg">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        Todas as Solicitações ({ausenciasFiltradas.length})
-      </h2>
+	<!-- Lista de Solicitações -->
+	<div class="card bg-base-100 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				Todas as Solicitações ({ausenciasFiltradas.length})
+			</h2>
 
-      {#if ausenciasFiltradas.length === 0}
-        <div class="alert">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="stroke-info shrink-0 w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
-        </div>
-      {:else}
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>Funcionário</th>
-                <th>Time</th>
-                <th>Período</th>
-                <th>Dias</th>
-                <th>Motivo</th>
-                <th>Status</th>
-                <th>Solicitado em</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each ausenciasFiltradas as ausencia}
-                <tr>
-                  <td class="font-semibold">
-                    {ausencia.funcionario?.nome || "N/A"}
-                  </td>
-                  <td>
-                    {#if ausencia.time}
-                      <div
-                        class="badge badge-sm font-semibold"
-                        style="background-color: {ausencia.time.cor}20; border-color: {ausencia.time.cor}; color: {ausencia.time.cor}"
-                      >
-                        {ausencia.time.nome}
-                      </div>
-                    {:else}
-                      <span class="text-base-content/50">Sem time</span>
-                    {/if}
-                  </td>
-                  <td>
-                    {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                    {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
-                  </td>
-                  <td class="font-bold">
-                    {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
-                  </td>
-                  <td class="max-w-xs truncate" title={ausencia.motivo}>
-                    {ausencia.motivo}
-                  </td>
-                  <td>
-                    <div class={`badge ${getStatusBadge(ausencia.status)}`}>
-                      {getStatusTexto(ausencia.status)}
-                    </div>
-                  </td>
-                  <td class="text-xs">
-                    {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
-                  </td>
-                  <td>
-                    {#if ausencia.status === "aguardando_aprovacao"}
-                      <button
-                        type="button"
-                        class="btn btn-primary btn-sm gap-2"
-                        onclick={() => selecionarSolicitacao(ausencia._id)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
-                        Ver Detalhes
-                      </button>
-                    {:else}
-                      <button
-                        type="button"
-                        class="btn btn-ghost btn-sm gap-2"
-                        onclick={() => selecionarSolicitacao(ausencia._id)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
-                        Ver Detalhes
-                      </button>
-                    {/if}
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if ausenciasFiltradas.length === 0}
+				<div class="alert">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="stroke-info h-6 w-6 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+					<span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+				</div>
+			{:else}
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Funcionário</th>
+								<th>Time</th>
+								<th>Período</th>
+								<th>Dias</th>
+								<th>Motivo</th>
+								<th>Status</th>
+								<th>Solicitado em</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each ausenciasFiltradas as ausencia}
+								<tr>
+									<td class="font-semibold">
+										{ausencia.funcionario?.nome || 'N/A'}
+									</td>
+									<td>
+										{#if ausencia.time}
+											<div
+												class="badge badge-sm font-semibold"
+												style="background-color: {ausencia.time.cor}20; border-color: {ausencia.time
+													.cor}; color: {ausencia.time.cor}"
+											>
+												{ausencia.time.nome}
+											</div>
+										{:else}
+											<span class="text-base-content/50">Sem time</span>
+										{/if}
+									</td>
+									<td>
+										{new Date(ausencia.dataInicio).toLocaleDateString('pt-BR')} até{' '}
+										{new Date(ausencia.dataFim).toLocaleDateString('pt-BR')}
+									</td>
+									<td class="font-bold">
+										{calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
+									</td>
+									<td class="max-w-xs truncate" title={ausencia.motivo}>
+										{ausencia.motivo}
+									</td>
+									<td>
+										<div class={`badge ${getStatusBadge(ausencia.status)}`}>
+											{getStatusTexto(ausencia.status)}
+										</div>
+									</td>
+									<td class="text-xs">
+										{new Date(ausencia.criadoEm).toLocaleDateString('pt-BR')}
+									</td>
+									<td>
+										{#if ausencia.status === 'aguardando_aprovacao'}
+											<button
+												type="button"
+												class="btn btn-primary btn-sm gap-2"
+												onclick={() => selecionarSolicitacao(ausencia._id)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+													/>
+												</svg>
+												Ver Detalhes
+											</button>
+										{:else}
+											<button
+												type="button"
+												class="btn btn-sm gap-2"
+												onclick={() => selecionarSolicitacao(ausencia._id)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+													/>
+												</svg>
+												Ver Detalhes
+											</button>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		</div>
+	</div>
 </main>
 
 <!-- Modal de Aprovação -->
 {#if solicitacaoSelecionada && currentUser.data}
-  {#await client.query(api.ausencias.obterDetalhes, {
-    solicitacaoId: solicitacaoSelecionada,
-  }) then detalhes}
-    {#if detalhes}
-      <dialog class="modal modal-open">
-        <div class="modal-box max-w-4xl">
-          <AprovarAusencias
-            solicitacao={detalhes}
-            gestorId={currentUser.data._id}
-            onSucesso={recarregar}
-            onCancelar={() => (solicitacaoSelecionada = null)}
-          />
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button
-            type="button"
-            onclick={() => (solicitacaoSelecionada = null)}
-            aria-label="Fechar modal"
-            >Fechar</button
-          >
-        </form>
-      </dialog>
-    {/if}
-  {/await}
+	{#await client.query( api.ausencias.obterDetalhes, { solicitacaoId: solicitacaoSelecionada } ) then detalhes}
+		{#if detalhes}
+			<dialog class="modal modal-open">
+				<div class="modal-box max-w-4xl">
+					<AprovarAusencias
+						solicitacao={detalhes}
+						gestorId={currentUser.data._id}
+						onSucesso={recarregar}
+						onCancelar={() => (solicitacaoSelecionada = null)}
+					/>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button
+						type="button"
+						onclick={() => (solicitacaoSelecionada = null)}
+						aria-label="Fechar modal">Fechar</button
+					>
+				</form>
+			</dialog>
+		{/if}
+	{/await}
 {/if}
-
diff --git a/apps/web/src/routes/(dashboard)/perfil/+page.svelte b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
index 7e89fa1..e6fc3a0 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -1811,7 +1811,7 @@
 												{:else}
 													<button
 														type="button"
-														class="btn btn-ghost btn-sm gap-2"
+														class="btn btn-sm gap-2"
 														onclick={() => selecionarSolicitacao(solicitacao._id)}
 													>
 														<svg
@@ -1964,7 +1964,7 @@
 												{:else}
 													<button
 														type="button"
-														class="btn btn-ghost btn-sm gap-2"
+														class="btn btn-sm gap-2"
 														onclick={() => (solicitacaoAusenciaAprovar = ausencia._id)}
 													>
 														<svg
@@ -2300,7 +2300,7 @@
 				</h2>
 				<button
 					type="button"
-					class="btn btn-ghost btn-sm btn-circle"
+					class="btn btn-sm btn-circle"
 					onclick={() => (mostrarWizardAusencia = false)}
 					aria-label="Fechar"
 				>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
index a3ff1ad..a346d4b 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
@@ -1,1657 +1,1669 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { toast } from "svelte-sonner";
-  import FuncionarioSelect from "$lib/components/FuncionarioSelect.svelte";
-  import FileUpload from "$lib/components/FileUpload.svelte";
-  import ErrorModal from "$lib/components/ErrorModal.svelte";
-  import CalendarioAfastamentos from "$lib/components/CalendarioAfastamentos.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { goto } from '$app/navigation';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { toast } from 'svelte-sonner';
+	import FuncionarioSelect from '$lib/components/FuncionarioSelect.svelte';
+	import FileUpload from '$lib/components/FileUpload.svelte';
+	import ErrorModal from '$lib/components/ErrorModal.svelte';
+	import CalendarioAfastamentos from '$lib/components/CalendarioAfastamentos.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  // Estado da aba ativa
-  let abaAtiva = $state<"dashboard" | "atestado" | "declaracao" | "maternidade" | "paternidade">("dashboard");
+	// Estado da aba ativa
+	let abaAtiva = $state<'dashboard' | 'atestado' | 'declaracao' | 'maternidade' | 'paternidade'>(
+		'dashboard'
+	);
 
-  // Queries
-  const dadosQuery = useQuery(api.atestadosLicencas.listarTodos, {});
-  const statsQuery = useQuery(api.atestadosLicencas.obterEstatisticas, {});
-  const graficosQuery = useQuery(api.atestadosLicencas.obterDadosGraficos, {
-    periodo: 30,
-  });
-  const eventosQuery = useQuery(api.atestadosLicencas.obterEventosCalendario, {
-    tipoFiltro: "todos",
-  });
+	// Queries
+	const dadosQuery = useQuery(api.atestadosLicencas.listarTodos, {});
+	const statsQuery = useQuery(api.atestadosLicencas.obterEstatisticas, {});
+	const graficosQuery = useQuery(api.atestadosLicencas.obterDadosGraficos, {
+		periodo: 30
+	});
+	const eventosQuery = useQuery(api.atestadosLicencas.obterEventosCalendario, {
+		tipoFiltro: 'todos'
+	});
 
-  // Estados dos formulários
-  // Atestado Médico
-  let atestadoMedico = $state({
-    funcionarioId: "" as string | undefined,
-    dataInicio: "",
-    dataFim: "",
-    cid: "",
-    observacoes: "",
-    documentoId: "" as string | undefined,
-  });
+	// Estados dos formulários
+	// Atestado Médico
+	let atestadoMedico = $state({
+		funcionarioId: '' as string | undefined,
+		dataInicio: '',
+		dataFim: '',
+		cid: '',
+		observacoes: '',
+		documentoId: '' as string | undefined
+	});
 
-  // Declaração
-  let declaracao = $state({
-    funcionarioId: "" as string | undefined,
-    dataInicio: "",
-    dataFim: "",
-    observacoes: "",
-    documentoId: "" as string | undefined,
-  });
+	// Declaração
+	let declaracao = $state({
+		funcionarioId: '' as string | undefined,
+		dataInicio: '',
+		dataFim: '',
+		observacoes: '',
+		documentoId: '' as string | undefined
+	});
 
-  // Licença Maternidade
-  let licencaMaternidade = $state({
-    funcionarioId: "" as string | undefined,
-    dataInicio: "",
-    dataFim: "",
-    observacoes: "",
-    documentoId: "" as string | undefined,
-    ehProrrogacao: false,
-    licencaOriginalId: undefined as string | undefined,
-  });
+	// Licença Maternidade
+	let licencaMaternidade = $state({
+		funcionarioId: '' as string | undefined,
+		dataInicio: '',
+		dataFim: '',
+		observacoes: '',
+		documentoId: '' as string | undefined,
+		ehProrrogacao: false,
+		licencaOriginalId: undefined as string | undefined
+	});
 
-  // Licença Paternidade
-  let licencaPaternidade = $state({
-    funcionarioId: "" as string | undefined,
-    dataInicio: "",
-    dataFim: "",
-    observacoes: "",
-    documentoId: "" as string | undefined,
-  });
+	// Licença Paternidade
+	let licencaPaternidade = $state({
+		funcionarioId: '' as string | undefined,
+		dataInicio: '',
+		dataFim: '',
+		observacoes: '',
+		documentoId: '' as string | undefined
+	});
 
-  // Filtros
-  let filtroTipo = $state<string>("todos");
-  let filtroFuncionario = $state<string>("");
-  let filtroDataInicio = $state<string>("");
-  let filtroDataFim = $state<string>("");
+	// Filtros
+	let filtroTipo = $state<string>('todos');
+	let filtroFuncionario = $state<string>('');
+	let filtroDataInicio = $state<string>('');
+	let filtroDataFim = $state<string>('');
 
-  // Estados de loading
-  let salvandoAtestado = $state(false);
-  let salvandoDeclaracao = $state(false);
-  let salvandoMaternidade = $state(false);
-  let salvandoPaternidade = $state(false);
+	// Estados de loading
+	let salvandoAtestado = $state(false);
+	let salvandoDeclaracao = $state(false);
+	let salvandoMaternidade = $state(false);
+	let salvandoPaternidade = $state(false);
 
-  // Modal de erro
-  let erroModal = $state({
-    aberto: false,
-    titulo: "",
-    mensagem: "",
-    detalhes: "",
-  });
+	// Modal de erro
+	let erroModal = $state({
+		aberto: false,
+		titulo: '',
+		mensagem: '',
+		detalhes: ''
+	});
 
-  // Licenças maternidade para prorrogação (derivar dos dados já carregados)
-  const licencasMaternidade = $derived.by(() => {
-    const dados = dadosQuery?.data;
-    if (!dados) return [];
-    return dados.licencas.filter(
-      (l) => l.tipo === "maternidade" && !l.ehProrrogacao
-    );
-  });
+	// Licenças maternidade para prorrogação (derivar dos dados já carregados)
+	const licencasMaternidade = $derived.by(() => {
+		const dados = dadosQuery?.data;
+		if (!dados) return [];
+		return dados.licencas.filter((l) => l.tipo === 'maternidade' && !l.ehProrrogacao);
+	});
 
-  // Funções auxiliares
-  function formatarData(data: string) {
-    return new Date(data).toLocaleDateString("pt-BR");
-  }
+	// Funções auxiliares
+	function formatarData(data: string) {
+		return new Date(data).toLocaleDateString('pt-BR');
+	}
 
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diffTime = Math.abs(fim.getTime() - inicio.getTime());
-    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
-  }
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+		const diffTime = Math.abs(fim.getTime() - inicio.getTime());
+		return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  // Upload de documento
-  async function handleDocumentoUpload(
-    file: File
-  ): Promise<string | undefined> {
-    try {
-      const uploadUrl = await client.mutation(api.atestadosLicencas.generateUploadUrl, {});
-      const response = await fetch(uploadUrl, {
-        method: "POST",
-        headers: { "Content-Type": file.type },
-        body: file,
-      });
-      const result = await response.json();
-      return result.storageId;
-    } catch (error) {
-      console.error("Erro no upload:", error);
-      throw error;
-    }
-  }
+	// Upload de documento
+	async function handleDocumentoUpload(file: File): Promise<string | undefined> {
+		try {
+			const uploadUrl = await client.mutation(api.atestadosLicencas.generateUploadUrl, {});
+			const response = await fetch(uploadUrl, {
+				method: 'POST',
+				headers: { 'Content-Type': file.type },
+				body: file
+			});
+			const result = await response.json();
+			return result.storageId;
+		} catch (error) {
+			console.error('Erro no upload:', error);
+			throw error;
+		}
+	}
 
-  // Função para mostrar erro em modal
-  function mostrarErro(titulo: string, mensagem: string, detalhes?: string) {
-    erroModal = {
-      aberto: true,
-      titulo,
-      mensagem,
-      detalhes: detalhes || "",
-    };
-  }
+	// Função para mostrar erro em modal
+	function mostrarErro(titulo: string, mensagem: string, detalhes?: string) {
+		erroModal = {
+			aberto: true,
+			titulo,
+			mensagem,
+			detalhes: detalhes || ''
+		};
+	}
 
-  // Salvar Atestado Médico
-  async function salvarAtestadoMedico() {
-    if (!atestadoMedico.funcionarioId || !atestadoMedico.dataInicio || !atestadoMedico.dataFim || !atestadoMedico.cid) {
-      mostrarErro(
-        "Campos obrigatórios",
-        "Preencha todos os campos obrigatórios antes de salvar.",
-        "Campos obrigatórios: Funcionário, Data Início, Data Fim e CID"
-      );
-      return;
-    }
+	// Salvar Atestado Médico
+	async function salvarAtestadoMedico() {
+		if (
+			!atestadoMedico.funcionarioId ||
+			!atestadoMedico.dataInicio ||
+			!atestadoMedico.dataFim ||
+			!atestadoMedico.cid
+		) {
+			mostrarErro(
+				'Campos obrigatórios',
+				'Preencha todos os campos obrigatórios antes de salvar.',
+				'Campos obrigatórios: Funcionário, Data Início, Data Fim e CID'
+			);
+			return;
+		}
 
-    if (!atestadoMedico.documentoId) {
-      mostrarErro(
-        "Documento obrigatório",
-        "É necessário anexar o documento do atestado médico.",
-        "Por favor, faça o upload do arquivo PDF ou imagem do atestado antes de salvar."
-      );
-      return;
-    }
+		if (!atestadoMedico.documentoId) {
+			mostrarErro(
+				'Documento obrigatório',
+				'É necessário anexar o documento do atestado médico.',
+				'Por favor, faça o upload do arquivo PDF ou imagem do atestado antes de salvar.'
+			);
+			return;
+		}
 
-    try {
-      salvandoAtestado = true;
-      await client.mutation(api.atestadosLicencas.criarAtestadoMedico, {
-        funcionarioId: atestadoMedico.funcionarioId as Id<"funcionarios">,
-        dataInicio: atestadoMedico.dataInicio,
-        dataFim: atestadoMedico.dataFim,
-        cid: atestadoMedico.cid,
-        observacoes: atestadoMedico.observacoes || undefined,
-        documentoId: atestadoMedico.documentoId as Id<"_storage">,
-      });
+		try {
+			salvandoAtestado = true;
+			await client.mutation(api.atestadosLicencas.criarAtestadoMedico, {
+				funcionarioId: atestadoMedico.funcionarioId as Id<'funcionarios'>,
+				dataInicio: atestadoMedico.dataInicio,
+				dataFim: atestadoMedico.dataFim,
+				cid: atestadoMedico.cid,
+				observacoes: atestadoMedico.observacoes || undefined,
+				documentoId: atestadoMedico.documentoId as Id<'_storage'>
+			});
 
-      toast.success("Atestado médico registrado com sucesso!");
-      resetarFormularioAtestado();
-      abaAtiva = "dashboard";
-    } catch (error: any) {
-      const mensagemErro = error?.message || "Erro ao registrar atestado";
-      const detalhesErro = error?.data?.message || error?.toString() || "";
-      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
-    } finally {
-      salvandoAtestado = false;
-    }
-  }
+			toast.success('Atestado médico registrado com sucesso!');
+			resetarFormularioAtestado();
+			abaAtiva = 'dashboard';
+		} catch (error: any) {
+			const mensagemErro = error?.message || 'Erro ao registrar atestado';
+			const detalhesErro = error?.data?.message || error?.toString() || '';
+			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
+		} finally {
+			salvandoAtestado = false;
+		}
+	}
 
-  // Salvar Declaração
-  async function salvarDeclaracao() {
-    if (!declaracao.funcionarioId || !declaracao.dataInicio || !declaracao.dataFim) {
-      mostrarErro(
-        "Campos obrigatórios",
-        "Preencha todos os campos obrigatórios antes de salvar.",
-        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
-      );
-      return;
-    }
+	// Salvar Declaração
+	async function salvarDeclaracao() {
+		if (!declaracao.funcionarioId || !declaracao.dataInicio || !declaracao.dataFim) {
+			mostrarErro(
+				'Campos obrigatórios',
+				'Preencha todos os campos obrigatórios antes de salvar.',
+				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
+			);
+			return;
+		}
 
-    if (!declaracao.documentoId) {
-      mostrarErro(
-        "Documento obrigatório",
-        "É necessário anexar o documento da declaração.",
-        "Por favor, faça o upload do arquivo PDF ou imagem da declaração antes de salvar."
-      );
-      return;
-    }
+		if (!declaracao.documentoId) {
+			mostrarErro(
+				'Documento obrigatório',
+				'É necessário anexar o documento da declaração.',
+				'Por favor, faça o upload do arquivo PDF ou imagem da declaração antes de salvar.'
+			);
+			return;
+		}
 
-    try {
-      salvandoDeclaracao = true;
-      await client.mutation(api.atestadosLicencas.criarDeclaracaoComparecimento, {
-        funcionarioId: declaracao.funcionarioId as Id<"funcionarios">,
-        dataInicio: declaracao.dataInicio,
-        dataFim: declaracao.dataFim,
-        observacoes: declaracao.observacoes || undefined,
-        documentoId: declaracao.documentoId as Id<"_storage">,
-      });
+		try {
+			salvandoDeclaracao = true;
+			await client.mutation(api.atestadosLicencas.criarDeclaracaoComparecimento, {
+				funcionarioId: declaracao.funcionarioId as Id<'funcionarios'>,
+				dataInicio: declaracao.dataInicio,
+				dataFim: declaracao.dataFim,
+				observacoes: declaracao.observacoes || undefined,
+				documentoId: declaracao.documentoId as Id<'_storage'>
+			});
 
-      toast.success("Declaração registrada com sucesso!");
-      resetarFormularioDeclaracao();
-      abaAtiva = "dashboard";
-    } catch (error: any) {
-      const mensagemErro = error?.message || "Erro ao registrar declaração";
-      const detalhesErro = error?.data?.message || error?.toString() || "";
-      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
-    } finally {
-      salvandoDeclaracao = false;
-    }
-  }
+			toast.success('Declaração registrada com sucesso!');
+			resetarFormularioDeclaracao();
+			abaAtiva = 'dashboard';
+		} catch (error: any) {
+			const mensagemErro = error?.message || 'Erro ao registrar declaração';
+			const detalhesErro = error?.data?.message || error?.toString() || '';
+			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
+		} finally {
+			salvandoDeclaracao = false;
+		}
+	}
 
-  // Salvar Licença Maternidade
-  async function salvarLicencaMaternidade() {
-    if (!licencaMaternidade.funcionarioId || !licencaMaternidade.dataInicio || !licencaMaternidade.dataFim) {
-      mostrarErro(
-        "Campos obrigatórios",
-        "Preencha todos os campos obrigatórios antes de salvar.",
-        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
-      );
-      return;
-    }
+	// Salvar Licença Maternidade
+	async function salvarLicencaMaternidade() {
+		if (
+			!licencaMaternidade.funcionarioId ||
+			!licencaMaternidade.dataInicio ||
+			!licencaMaternidade.dataFim
+		) {
+			mostrarErro(
+				'Campos obrigatórios',
+				'Preencha todos os campos obrigatórios antes de salvar.',
+				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
+			);
+			return;
+		}
 
-    if (licencaMaternidade.ehProrrogacao && !licencaMaternidade.licencaOriginalId) {
-      mostrarErro(
-        "Licença original obrigatória",
-        "Para prorrogações, é necessário selecionar a licença original.",
-        "Selecione a licença de maternidade original no campo 'Licença Original'."
-      );
-      return;
-    }
+		if (licencaMaternidade.ehProrrogacao && !licencaMaternidade.licencaOriginalId) {
+			mostrarErro(
+				'Licença original obrigatória',
+				'Para prorrogações, é necessário selecionar a licença original.',
+				"Selecione a licença de maternidade original no campo 'Licença Original'."
+			);
+			return;
+		}
 
-    if (!licencaMaternidade.documentoId) {
-      mostrarErro(
-        "Documento obrigatório",
-        "É necessário anexar o documento da licença de maternidade.",
-        "Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar."
-      );
-      return;
-    }
+		if (!licencaMaternidade.documentoId) {
+			mostrarErro(
+				'Documento obrigatório',
+				'É necessário anexar o documento da licença de maternidade.',
+				'Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar.'
+			);
+			return;
+		}
 
-    try {
-      salvandoMaternidade = true;
-      
-      // Garantir que licencaOriginalId seja undefined quando não é prorrogação
-      const licencaOriginalId = licencaMaternidade.ehProrrogacao && licencaMaternidade.licencaOriginalId
-        ? (licencaMaternidade.licencaOriginalId as Id<"licencas">)
-        : undefined;
-      
-      await client.mutation(api.atestadosLicencas.criarLicencaMaternidade, {
-        funcionarioId: licencaMaternidade.funcionarioId as Id<"funcionarios">,
-        dataInicio: licencaMaternidade.dataInicio,
-        dataFim: licencaMaternidade.dataFim,
-        observacoes: licencaMaternidade.observacoes || undefined,
-        documentoId: licencaMaternidade.documentoId as Id<"_storage">,
-        licencaOriginalId,
-      });
+		try {
+			salvandoMaternidade = true;
 
-      toast.success("Licença maternidade registrada com sucesso!");
-      resetarFormularioMaternidade();
-      abaAtiva = "dashboard";
-    } catch (error: any) {
-      const mensagemErro = error?.message || "Erro ao registrar licença";
-      const detalhesErro = error?.data?.message || error?.toString() || "";
-      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
-    } finally {
-      salvandoMaternidade = false;
-    }
-  }
+			// Garantir que licencaOriginalId seja undefined quando não é prorrogação
+			const licencaOriginalId =
+				licencaMaternidade.ehProrrogacao && licencaMaternidade.licencaOriginalId
+					? (licencaMaternidade.licencaOriginalId as Id<'licencas'>)
+					: undefined;
 
-  // Salvar Licença Paternidade
-  async function salvarLicencaPaternidade() {
-    if (!licencaPaternidade.funcionarioId || !licencaPaternidade.dataInicio || !licencaPaternidade.dataFim) {
-      mostrarErro(
-        "Campos obrigatórios",
-        "Preencha todos os campos obrigatórios antes de salvar.",
-        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
-      );
-      return;
-    }
+			await client.mutation(api.atestadosLicencas.criarLicencaMaternidade, {
+				funcionarioId: licencaMaternidade.funcionarioId as Id<'funcionarios'>,
+				dataInicio: licencaMaternidade.dataInicio,
+				dataFim: licencaMaternidade.dataFim,
+				observacoes: licencaMaternidade.observacoes || undefined,
+				documentoId: licencaMaternidade.documentoId as Id<'_storage'>,
+				licencaOriginalId
+			});
 
-    if (!licencaPaternidade.documentoId) {
-      mostrarErro(
-        "Documento obrigatório",
-        "É necessário anexar o documento da licença de paternidade.",
-        "Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar."
-      );
-      return;
-    }
+			toast.success('Licença maternidade registrada com sucesso!');
+			resetarFormularioMaternidade();
+			abaAtiva = 'dashboard';
+		} catch (error: any) {
+			const mensagemErro = error?.message || 'Erro ao registrar licença';
+			const detalhesErro = error?.data?.message || error?.toString() || '';
+			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
+		} finally {
+			salvandoMaternidade = false;
+		}
+	}
 
-    try {
-      salvandoPaternidade = true;
-      await client.mutation(api.atestadosLicencas.criarLicencaPaternidade, {
-        funcionarioId: licencaPaternidade.funcionarioId as Id<"funcionarios">,
-        dataInicio: licencaPaternidade.dataInicio,
-        dataFim: licencaPaternidade.dataFim,
-        observacoes: licencaPaternidade.observacoes || undefined,
-        documentoId: licencaPaternidade.documentoId as Id<"_storage">,
-      });
+	// Salvar Licença Paternidade
+	async function salvarLicencaPaternidade() {
+		if (
+			!licencaPaternidade.funcionarioId ||
+			!licencaPaternidade.dataInicio ||
+			!licencaPaternidade.dataFim
+		) {
+			mostrarErro(
+				'Campos obrigatórios',
+				'Preencha todos os campos obrigatórios antes de salvar.',
+				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
+			);
+			return;
+		}
 
-      toast.success("Licença paternidade registrada com sucesso!");
-      resetarFormularioPaternidade();
-      abaAtiva = "dashboard";
-    } catch (error: any) {
-      const mensagemErro = error?.message || "Erro ao registrar licença";
-      const detalhesErro = error?.data?.message || error?.toString() || "";
-      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
-    } finally {
-      salvandoPaternidade = false;
-    }
-  }
+		if (!licencaPaternidade.documentoId) {
+			mostrarErro(
+				'Documento obrigatório',
+				'É necessário anexar o documento da licença de paternidade.',
+				'Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar.'
+			);
+			return;
+		}
 
-  // Resetar formulários
-  function resetarFormularioAtestado() {
-    atestadoMedico = {
-      funcionarioId: undefined,
-      dataInicio: "",
-      dataFim: "",
-      cid: "",
-      observacoes: "",
-      documentoId: undefined,
-    };
-  }
+		try {
+			salvandoPaternidade = true;
+			await client.mutation(api.atestadosLicencas.criarLicencaPaternidade, {
+				funcionarioId: licencaPaternidade.funcionarioId as Id<'funcionarios'>,
+				dataInicio: licencaPaternidade.dataInicio,
+				dataFim: licencaPaternidade.dataFim,
+				observacoes: licencaPaternidade.observacoes || undefined,
+				documentoId: licencaPaternidade.documentoId as Id<'_storage'>
+			});
 
-  function resetarFormularioDeclaracao() {
-    declaracao = {
-      funcionarioId: undefined,
-      dataInicio: "",
-      dataFim: "",
-      observacoes: "",
-      documentoId: undefined,
-    };
-  }
+			toast.success('Licença paternidade registrada com sucesso!');
+			resetarFormularioPaternidade();
+			abaAtiva = 'dashboard';
+		} catch (error: any) {
+			const mensagemErro = error?.message || 'Erro ao registrar licença';
+			const detalhesErro = error?.data?.message || error?.toString() || '';
+			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
+		} finally {
+			salvandoPaternidade = false;
+		}
+	}
 
-  function resetarFormularioMaternidade() {
-    licencaMaternidade = {
-      funcionarioId: undefined,
-      dataInicio: "",
-      dataFim: "",
-      observacoes: "",
-      documentoId: undefined,
-      ehProrrogacao: false,
-      licencaOriginalId: undefined,
-    };
-  }
+	// Resetar formulários
+	function resetarFormularioAtestado() {
+		atestadoMedico = {
+			funcionarioId: undefined,
+			dataInicio: '',
+			dataFim: '',
+			cid: '',
+			observacoes: '',
+			documentoId: undefined
+		};
+	}
 
-  function resetarFormularioPaternidade() {
-    licencaPaternidade = {
-      funcionarioId: undefined,
-      dataInicio: "",
-      dataFim: "",
-      observacoes: "",
-      documentoId: undefined,
-    };
-  }
+	function resetarFormularioDeclaracao() {
+		declaracao = {
+			funcionarioId: undefined,
+			dataInicio: '',
+			dataFim: '',
+			observacoes: '',
+			documentoId: undefined
+		};
+	}
 
-  // Limpar licencaOriginalId quando não é prorrogação
-  $effect(() => {
-    if (abaAtiva === "maternidade" && !licencaMaternidade.ehProrrogacao) {
-      licencaMaternidade.licencaOriginalId = undefined;
-    }
-  });
+	function resetarFormularioMaternidade() {
+		licencaMaternidade = {
+			funcionarioId: undefined,
+			dataInicio: '',
+			dataFim: '',
+			observacoes: '',
+			documentoId: undefined,
+			ehProrrogacao: false,
+			licencaOriginalId: undefined
+		};
+	}
 
-  // Calcular data fim automaticamente para licenças
-  $effect(() => {
-    if (abaAtiva === "maternidade" && licencaMaternidade.dataInicio && !licencaMaternidade.ehProrrogacao && !licencaMaternidade.dataFim) {
-      const inicio = new Date(licencaMaternidade.dataInicio);
-      if (!isNaN(inicio.getTime())) {
-        inicio.setDate(inicio.getDate() + 120); // 120 dias
-        licencaMaternidade.dataFim = inicio.toISOString().split("T")[0];
-      }
-    }
-  });
+	function resetarFormularioPaternidade() {
+		licencaPaternidade = {
+			funcionarioId: undefined,
+			dataInicio: '',
+			dataFim: '',
+			observacoes: '',
+			documentoId: undefined
+		};
+	}
 
-  $effect(() => {
-    if (abaAtiva === "paternidade" && licencaPaternidade.dataInicio && !licencaPaternidade.dataFim) {
-      const inicio = new Date(licencaPaternidade.dataInicio);
-      if (!isNaN(inicio.getTime())) {
-        inicio.setDate(inicio.getDate() + 20); // 20 dias
-        licencaPaternidade.dataFim = inicio.toISOString().split("T")[0];
-      }
-    }
-  });
+	// Limpar licencaOriginalId quando não é prorrogação
+	$effect(() => {
+		if (abaAtiva === 'maternidade' && !licencaMaternidade.ehProrrogacao) {
+			licencaMaternidade.licencaOriginalId = undefined;
+		}
+	});
 
-  // Excluir registro
-  async function excluirRegistro(tipo: "atestado" | "licenca", id: string) {
-    if (!confirm(`Tem certeza que deseja excluir este ${tipo}?`)) return;
+	// Calcular data fim automaticamente para licenças
+	$effect(() => {
+		if (
+			abaAtiva === 'maternidade' &&
+			licencaMaternidade.dataInicio &&
+			!licencaMaternidade.ehProrrogacao &&
+			!licencaMaternidade.dataFim
+		) {
+			const inicio = new Date(licencaMaternidade.dataInicio);
+			if (!isNaN(inicio.getTime())) {
+				inicio.setDate(inicio.getDate() + 120); // 120 dias
+				licencaMaternidade.dataFim = inicio.toISOString().split('T')[0];
+			}
+		}
+	});
 
-    try {
-      if (tipo === "atestado") {
-        await client.mutation(api.atestadosLicencas.excluirAtestado, { id: id as Id<"atestados"> });
-      } else {
-        await client.mutation(api.atestadosLicencas.excluirLicenca, { id: id as Id<"licencas"> });
-      }
-      toast.success("Registro excluído com sucesso!");
-    } catch (error: any) {
-      toast.error(error?.message || "Erro ao excluir registro");
-    }
-  }
+	$effect(() => {
+		if (
+			abaAtiva === 'paternidade' &&
+			licencaPaternidade.dataInicio &&
+			!licencaPaternidade.dataFim
+		) {
+			const inicio = new Date(licencaPaternidade.dataInicio);
+			if (!isNaN(inicio.getTime())) {
+				inicio.setDate(inicio.getDate() + 20); // 20 dias
+				licencaPaternidade.dataFim = inicio.toISOString().split('T')[0];
+			}
+		}
+	});
 
-  // Filtrar registros
-  const registrosFiltrados = $derived.by(() => {
-    const dados = dadosQuery?.data;
-    if (!dados) return { atestados: [], licencas: [] };
+	// Excluir registro
+	async function excluirRegistro(tipo: 'atestado' | 'licenca', id: string) {
+		if (!confirm(`Tem certeza que deseja excluir este ${tipo}?`)) return;
 
-    let atestados = dados.atestados;
-    let licencas = dados.licencas;
+		try {
+			if (tipo === 'atestado') {
+				await client.mutation(api.atestadosLicencas.excluirAtestado, { id: id as Id<'atestados'> });
+			} else {
+				await client.mutation(api.atestadosLicencas.excluirLicenca, { id: id as Id<'licencas'> });
+			}
+			toast.success('Registro excluído com sucesso!');
+		} catch (error: any) {
+			toast.error(error?.message || 'Erro ao excluir registro');
+		}
+	}
 
-    // Filtro por tipo
-    if (filtroTipo !== "todos") {
-      if (filtroTipo === "atestado_medico" || filtroTipo === "declaracao_comparecimento") {
-        atestados = atestados.filter((a) => a.tipo === filtroTipo);
-        licencas = [];
-      } else if (filtroTipo === "maternidade" || filtroTipo === "paternidade") {
-        atestados = [];
-        licencas = licencas.filter((l) => l.tipo === filtroTipo);
-      }
-    }
+	// Filtrar registros
+	const registrosFiltrados = $derived.by(() => {
+		const dados = dadosQuery?.data;
+		if (!dados) return { atestados: [], licencas: [] };
 
-    // Filtro por funcionário
-    if (filtroFuncionario) {
-      const termo = filtroFuncionario.toLowerCase();
-      atestados = atestados.filter((a) =>
-        a.funcionario?.nome?.toLowerCase().includes(termo)
-      );
-      licencas = licencas.filter((l) =>
-        l.funcionario?.nome?.toLowerCase().includes(termo)
-      );
-    }
+		let atestados = dados.atestados;
+		let licencas = dados.licencas;
 
-    // Filtro por período
-    if (filtroDataInicio && filtroDataFim) {
-      const inicio = new Date(filtroDataInicio);
-      const fim = new Date(filtroDataFim);
-      atestados = atestados.filter((a) => {
-        const aInicio = new Date(a.dataInicio);
-        const aFim = new Date(a.dataFim);
-        return (
-          (aInicio >= inicio && aInicio <= fim) ||
-          (aFim >= inicio && aFim <= fim) ||
-          (aInicio <= inicio && aFim >= fim)
-        );
-      });
-      licencas = licencas.filter((l) => {
-        const lInicio = new Date(l.dataInicio);
-        const lFim = new Date(l.dataFim);
-        return (
-          (lInicio >= inicio && lInicio <= fim) ||
-          (lFim >= inicio && lFim <= fim) ||
-          (lInicio <= inicio && lFim >= fim)
-        );
-      });
-    }
+		// Filtro por tipo
+		if (filtroTipo !== 'todos') {
+			if (filtroTipo === 'atestado_medico' || filtroTipo === 'declaracao_comparecimento') {
+				atestados = atestados.filter((a) => a.tipo === filtroTipo);
+				licencas = [];
+			} else if (filtroTipo === 'maternidade' || filtroTipo === 'paternidade') {
+				atestados = [];
+				licencas = licencas.filter((l) => l.tipo === filtroTipo);
+			}
+		}
 
-    return { atestados, licencas };
-  });
+		// Filtro por funcionário
+		if (filtroFuncionario) {
+			const termo = filtroFuncionario.toLowerCase();
+			atestados = atestados.filter((a) => a.funcionario?.nome?.toLowerCase().includes(termo));
+			licencas = licencas.filter((l) => l.funcionario?.nome?.toLowerCase().includes(termo));
+		}
 
-  // Limpar filtros
-  function limparFiltros() {
-    filtroTipo = "todos";
-    filtroFuncionario = "";
-    filtroDataInicio = "";
-    filtroDataFim = "";
-  }
+		// Filtro por período
+		if (filtroDataInicio && filtroDataFim) {
+			const inicio = new Date(filtroDataInicio);
+			const fim = new Date(filtroDataFim);
+			atestados = atestados.filter((a) => {
+				const aInicio = new Date(a.dataInicio);
+				const aFim = new Date(a.dataFim);
+				return (
+					(aInicio >= inicio && aInicio <= fim) ||
+					(aFim >= inicio && aFim <= fim) ||
+					(aInicio <= inicio && aFim >= fim)
+				);
+			});
+			licencas = licencas.filter((l) => {
+				const lInicio = new Date(l.dataInicio);
+				const lFim = new Date(l.dataFim);
+				return (
+					(lInicio >= inicio && lInicio <= fim) ||
+					(lFim >= inicio && lFim <= fim) ||
+					(lInicio <= inicio && lFim >= fim)
+				);
+			});
+		}
+
+		return { atestados, licencas };
+	});
+
+	// Limpar filtros
+	function limparFiltros() {
+		filtroTipo = 'todos';
+		filtroFuncionario = '';
+		filtroDataInicio = '';
+		filtroDataFim = '';
+	}
 </script>
 
 <svelte:head>
-  <title>Atestados & Licenças - Recursos Humanos</title>
+	<title>Atestados & Licenças - Recursos Humanos</title>
 </svelte:head>
 
-<main class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/recursos-humanos" class="text-primary hover:underline"
-          >Recursos Humanos</a
-        >
-      </li>
-      <li>Atestados & Licenças</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a>
+			</li>
+			<li>Atestados & Licenças</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center justify-between flex-wrap gap-4">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-purple-500/20 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-purple-600"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Atestados & Licenças</h1>
-          <p class="text-base-content/70">
-            Registro de atestados médicos e licenças
-          </p>
-        </div>
-      </div>
-      <button
-        class="btn btn-ghost gap-2"
-        onclick={() => goto("/recursos-humanos")}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex flex-wrap items-center justify-between gap-4">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-purple-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-purple-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Atestados & Licenças</h1>
+					<p class="text-base-content/70">Registro de atestados médicos e licenças</p>
+				</div>
+			</div>
+			<button class="btn gap-2" onclick={() => goto('/recursos-humanos')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
 
-  <!-- Tabs -->
-  <div class="tabs tabs-boxed mb-6 bg-base-100 shadow-lg p-2">
-    <button
-      class="tab {abaAtiva === 'dashboard' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "dashboard")}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5 mr-2"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-        />
-      </svg>
-      Dashboard
-    </button>
-    <button
-      class="tab {abaAtiva === 'atestado' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "atestado")}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5 mr-2"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-        />
-      </svg>
-      Atestado Médico
-    </button>
-    <button
-      class="tab {abaAtiva === 'declaracao' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "declaracao")}
-    >
-      Declaração
-    </button>
-    <button
-      class="tab {abaAtiva === 'maternidade' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "maternidade")}
-    >
-      Licença Maternidade
-    </button>
-    <button
-      class="tab {abaAtiva === 'paternidade' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "paternidade")}
-    >
-      Licença Paternidade
-    </button>
-  </div>
+	<!-- Tabs -->
+	<div class="tabs tabs-boxed bg-base-100 mb-6 p-2 shadow-lg">
+		<button
+			class="tab {abaAtiva === 'dashboard' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'dashboard')}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="mr-2 h-5 w-5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+				/>
+			</svg>
+			Dashboard
+		</button>
+		<button
+			class="tab {abaAtiva === 'atestado' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'atestado')}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="mr-2 h-5 w-5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				/>
+			</svg>
+			Atestado Médico
+		</button>
+		<button
+			class="tab {abaAtiva === 'declaracao' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'declaracao')}
+		>
+			Declaração
+		</button>
+		<button
+			class="tab {abaAtiva === 'maternidade' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'maternidade')}
+		>
+			Licença Maternidade
+		</button>
+		<button
+			class="tab {abaAtiva === 'paternidade' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'paternidade')}
+		>
+			Licença Paternidade
+		</button>
+	</div>
 
-  <!-- Conteúdo das Abas -->
-  {#if abaAtiva === "dashboard"}
-    <!-- Dashboard -->
-    <!-- Estatísticas -->
-    {#if statsQuery?.data}
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-        <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-          <div class="stat-figure text-error">
-            <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-              />
-            </svg>
-          </div>
-          <div class="stat-title">Atestados Ativos</div>
-          <div class="stat-value text-error">
-            {statsQuery.data.totalAtestadosAtivos}
-          </div>
-        </div>
+	<!-- Conteúdo das Abas -->
+	{#if abaAtiva === 'dashboard'}
+		<!-- Dashboard -->
+		<!-- Estatísticas -->
+		{#if statsQuery?.data}
+			<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+					<div class="stat-figure text-error">
+						<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Atestados Ativos</div>
+					<div class="stat-value text-error">
+						{statsQuery.data.totalAtestadosAtivos}
+					</div>
+				</div>
 
-        <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-          <div class="stat-figure text-secondary">
-            <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-          <div class="stat-title">Licenças Ativas</div>
-          <div class="stat-value text-secondary">
-            {statsQuery.data.totalLicencasAtivas}
-          </div>
-        </div>
+				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+					<div class="stat-figure text-secondary">
+						<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Licenças Ativas</div>
+					<div class="stat-value text-secondary">
+						{statsQuery.data.totalLicencasAtivas}
+					</div>
+				</div>
 
-        <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-          <div class="stat-figure text-warning">
-            <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 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-              />
-            </svg>
-          </div>
-          <div class="stat-title">Afastados Hoje</div>
-          <div class="stat-value text-warning">
-            {statsQuery.data.funcionariosAfastadosHoje}
-          </div>
-        </div>
+				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+					<div class="stat-figure text-warning">
+						<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 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Afastados Hoje</div>
+					<div class="stat-value text-warning">
+						{statsQuery.data.funcionariosAfastadosHoje}
+					</div>
+				</div>
 
-        <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-          <div class="stat-figure text-info">
-            <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-          <div class="stat-title">Dias no Mês</div>
-          <div class="stat-value text-info">
-            {statsQuery.data.totalDiasAfastamentoMes}
-          </div>
-        </div>
-      </div>
-    {/if}
+				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+					<div class="stat-figure text-info">
+						<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Dias no Mês</div>
+					<div class="stat-value text-info">
+						{statsQuery.data.totalDiasAfastamentoMes}
+					</div>
+				</div>
+			</div>
+		{/if}
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <h2 class="card-title mb-4">Filtros</h2>
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
-        <div class="form-control">
-          <label class="label cursor-pointer flex flex-col gap-2" for="filtro-tipo">
-            <span class="label-text">Tipo</span>
-            <select id="filtro-tipo" class="select select-bordered" bind:value={filtroTipo}>
-              <option value="todos">Todos</option>
-              <option value="atestado_medico">Atestado Médico</option>
-              <option value="declaracao_comparecimento">Declaração</option>
-              <option value="maternidade">Licença Maternidade</option>
-              <option value="paternidade">Licença Paternidade</option>
-            </select>
-          </label>
-        </div>
+		<!-- Filtros -->
+		<div class="card bg-base-100 mb-6 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Filtros</h2>
+				<div class="grid grid-cols-1 items-end gap-4 md:grid-cols-5">
+					<div class="form-control">
+						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-tipo">
+							<span class="label-text">Tipo</span>
+							<select id="filtro-tipo" class="select select-bordered" bind:value={filtroTipo}>
+								<option value="todos">Todos</option>
+								<option value="atestado_medico">Atestado Médico</option>
+								<option value="declaracao_comparecimento">Declaração</option>
+								<option value="maternidade">Licença Maternidade</option>
+								<option value="paternidade">Licença Paternidade</option>
+							</select>
+						</label>
+					</div>
 
-        <div class="form-control">
-          <label class="label cursor-pointer flex flex-col gap-2" for="filtro-funcionario">
-            <span class="label-text">Funcionário</span>
-            <input id="filtro-funcionario" class="input input-bordered" type="text" bind:value={filtroFuncionario} placeholder="Nome do colaborador" />
-          </label>
-        </div>
+					<div class="form-control">
+						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-funcionario">
+							<span class="label-text">Funcionário</span>
+							<input
+								id="filtro-funcionario"
+								class="input input-bordered"
+								type="text"
+								bind:value={filtroFuncionario}
+								placeholder="Nome do colaborador"
+							/>
+						</label>
+					</div>
 
-        <div class="form-control">
-          <label class="label cursor-pointer flex flex-col gap-2" for="filtro-data-inicio">
-            <span class="label-text">Data Início</span>
-            <input id="filtro-data-inicio" class="input input-bordered" type="date" bind:value={filtroDataInicio} />
-          </label>
-        </div>
+					<div class="form-control">
+						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-data-inicio">
+							<span class="label-text">Data Início</span>
+							<input
+								id="filtro-data-inicio"
+								class="input input-bordered"
+								type="date"
+								bind:value={filtroDataInicio}
+							/>
+						</label>
+					</div>
 
-        <div class="form-control">
-          <label class="label cursor-pointer flex flex-col gap-2" for="filtro-data-fim">
-            <span class="label-text">Data Fim</span>
-            <input id="filtro-data-fim" class="input input-bordered" type="date" bind:value={filtroDataFim} />
-          </label>
-        </div>
+					<div class="form-control">
+						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-data-fim">
+							<span class="label-text">Data Fim</span>
+							<input
+								id="filtro-data-fim"
+								class="input input-bordered"
+								type="date"
+								bind:value={filtroDataFim}
+							/>
+						</label>
+					</div>
 
-        <div class="flex gap-2 justify-end">
-          <button class="btn btn-outline" onclick={limparFiltros}>Limpar</button>
-        </div>
-      </div>
-    </div>
-  </div>
+					<div class="flex justify-end gap-2">
+						<button class="btn btn-outline" onclick={limparFiltros}>Limpar</button>
+					</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Calendário Interativo -->
-    {#if eventosQuery?.data}
-      <CalendarioAfastamentos eventos={eventosQuery.data} tipoFiltro={filtroTipo} />
-    {/if}
+		<!-- Calendário Interativo -->
+		{#if eventosQuery?.data}
+			<CalendarioAfastamentos eventos={eventosQuery.data} tipoFiltro={filtroTipo} />
+		{/if}
 
-    <!-- Gráficos -->
-    {#if graficosQuery?.data}
-      {@const dados = graficosQuery.data.totalDiasPorTipo}
-      {@const maxDias = Math.max(...dados.map((d) => d.dias), 1)}
-      {@const chartWidth = 800}
-      {@const chartHeight = 350}
-      {@const padding = { top: 20, right: 40, bottom: 80, left: 70 }}
-      {@const barWidth = (chartWidth - padding.left - padding.right) / dados.length - 10}
-      {@const innerHeight = chartHeight - padding.top - padding.bottom}
-      {@const tendencias = graficosQuery.data.tendenciasMensais}
-      {@const tipos = ["atestado_medico", "declaracao_comparecimento", "maternidade", "paternidade", "ferias"]}
-      {@const cores = ["#ef4444", "#f97316", "#ec4899", "#3b82f6", "#10b981"]}
-      {@const nomes = ["Atestado Médico", "Declaração", "Maternidade", "Paternidade", "Férias"]}
-      {@const maxValor = Math.max(
-        ...tendencias.flatMap((t) =>
-          tipos.map((tipo) => t[tipo as keyof typeof t] as number)
-        ),
-        1
-      )}
-      {@const chartWidth2 = 900}
-      {@const chartHeight2 = 400}
-      {@const padding2 = { top: 20, right: 40, bottom: 80, left: 70 }}
-      {@const innerWidth = chartWidth2 - padding2.left - padding2.right}
-      {@const innerHeight2 = chartHeight2 - padding2.top - padding2.bottom}
-      <!-- Gráfico 1: Total de Dias por Tipo (Gráfico de Barras) -->
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <h2 class="card-title mb-4">Total de Dias por Tipo</h2>
-          <div class="w-full overflow-x-auto bg-base-200/30 rounded-xl p-4">
+		<!-- Gráficos -->
+		{#if graficosQuery?.data}
+			{@const dados = graficosQuery.data.totalDiasPorTipo}
+			{@const maxDias = Math.max(...dados.map((d) => d.dias), 1)}
+			{@const chartWidth = 800}
+			{@const chartHeight = 350}
+			{@const padding = { top: 20, right: 40, bottom: 80, left: 70 }}
+			{@const barWidth = (chartWidth - padding.left - padding.right) / dados.length - 10}
+			{@const innerHeight = chartHeight - padding.top - padding.bottom}
+			{@const tendencias = graficosQuery.data.tendenciasMensais}
+			{@const tipos = [
+				'atestado_medico',
+				'declaracao_comparecimento',
+				'maternidade',
+				'paternidade',
+				'ferias'
+			]}
+			{@const cores = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981']}
+			{@const nomes = ['Atestado Médico', 'Declaração', 'Maternidade', 'Paternidade', 'Férias']}
+			{@const maxValor = Math.max(
+				...tendencias.flatMap((t) => tipos.map((tipo) => t[tipo as keyof typeof t] as number)),
+				1
+			)}
+			{@const chartWidth2 = 900}
+			{@const chartHeight2 = 400}
+			{@const padding2 = { top: 20, right: 40, bottom: 80, left: 70 }}
+			{@const innerWidth = chartWidth2 - padding2.left - padding2.right}
+			{@const innerHeight2 = chartHeight2 - padding2.top - padding2.bottom}
+			<!-- Gráfico 1: Total de Dias por Tipo (Gráfico de Barras) -->
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4">Total de Dias por Tipo</h2>
+					<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
+						<svg
+							width={chartWidth}
+							height={chartHeight}
+							class="w-full"
+							viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+						>
+							<!-- Grid lines -->
+							{#each [0, 1, 2, 3, 4, 5] as t}
+								{@const val = Math.round((maxDias / 5) * t)}
+								{@const y = chartHeight - padding.bottom - (val / maxDias) * innerHeight}
+								<line
+									x1={padding.left}
+									y1={y}
+									x2={chartWidth - padding.right}
+									y2={y}
+									stroke="currentColor"
+									stroke-opacity="0.1"
+									stroke-dasharray="4,4"
+								/>
+								<text x={padding.left - 8} y={y + 4} text-anchor="end" class="text-xs opacity-70">
+									{val}
+								</text>
+							{/each}
 
-            <svg width={chartWidth} height={chartHeight} class="w-full" viewBox={`0 0 ${chartWidth} ${chartHeight}`}>
-              <!-- Grid lines -->
-              {#each [0, 1, 2, 3, 4, 5] as t}
-                {@const val = Math.round((maxDias / 5) * t)}
-                {@const y = chartHeight - padding.bottom - (val / maxDias) * innerHeight}
-                <line
-                  x1={padding.left}
-                  y1={y}
-                  x2={chartWidth - padding.right}
-                  y2={y}
-                  stroke="currentColor"
-                  stroke-opacity="0.1"
-                  stroke-dasharray="4,4"
-                />
-                <text
-                  x={padding.left - 8}
-                  y={y + 4}
-                  text-anchor="end"
-                  class="text-xs opacity-70"
-                >
-                  {val}
-                </text>
-              {/each}
+							<!-- Eixos -->
+							<line
+								x1={padding.left}
+								y1={chartHeight - padding.bottom}
+								x2={chartWidth - padding.right}
+								y2={chartHeight - padding.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
+							<line
+								x1={padding.left}
+								y1={padding.top}
+								x2={padding.left}
+								y2={chartHeight - padding.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
 
-              <!-- Eixos -->
-              <line
-                x1={padding.left}
-                y1={chartHeight - padding.bottom}
-                x2={chartWidth - padding.right}
-                y2={chartHeight - padding.bottom}
-                stroke="currentColor"
-                stroke-opacity="0.3"
-                stroke-width="2"
-              />
-              <line
-                x1={padding.left}
-                y1={padding.top}
-                x2={padding.left}
-                y2={chartHeight - padding.bottom}
-                stroke="currentColor"
-                stroke-opacity="0.3"
-                stroke-width="2"
-              />
+							<!-- Barras -->
+							{#each dados as item, i}
+								{@const x = padding.left + i * (barWidth + 10) + 5}
+								{@const height = (item.dias / maxDias) * innerHeight}
+								{@const y = chartHeight - padding.bottom - height}
+								{@const colors = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981']}
 
-              <!-- Barras -->
-              {#each dados as item, i}
-                {@const x = padding.left + i * (barWidth + 10) + 5}
-                {@const height = (item.dias / maxDias) * innerHeight}
-                {@const y = chartHeight - padding.bottom - height}
-                {@const colors = ["#ef4444", "#f97316", "#ec4899", "#3b82f6", "#10b981"]}
+								<!-- Gradiente da barra -->
+								<defs>
+									<linearGradient id="gradient-{i}" x1="0%" y1="0%" x2="0%" y2="100%">
+										<stop
+											offset="0%"
+											style="stop-color:{colors[i % colors.length]};stop-opacity:0.9"
+										/>
+										<stop
+											offset="100%"
+											style="stop-color:{colors[i % colors.length]};stop-opacity:0.5"
+										/>
+									</linearGradient>
+								</defs>
 
-                <!-- Gradiente da barra -->
-                <defs>
-                  <linearGradient id="gradient-{i}" x1="0%" y1="0%" x2="0%" y2="100%">
-                    <stop offset="0%" style="stop-color:{colors[i % colors.length]};stop-opacity:0.9" />
-                    <stop offset="100%" style="stop-color:{colors[i % colors.length]};stop-opacity:0.5" />
-                  </linearGradient>
-                </defs>
+								<!-- Barra -->
+								<rect
+									{x}
+									{y}
+									width={barWidth}
+									{height}
+									fill="url(#gradient-{i})"
+									rx="4"
+									class="cursor-pointer transition-opacity hover:opacity-80"
+								/>
 
-                <!-- Barra -->
-                <rect
-                  x={x}
-                  y={y}
-                  width={barWidth}
-                  height={height}
-                  fill="url(#gradient-{i})"
-                  rx="4"
-                  class="hover:opacity-80 transition-opacity cursor-pointer"
-                />
+								<!-- Valor no topo da barra -->
+								{#if item.dias > 0}
+									<text
+										x={x + barWidth / 2}
+										y={y - 8}
+										text-anchor="middle"
+										class="fill-base-content text-xs font-semibold"
+									>
+										{item.dias}
+									</text>
+								{/if}
 
-                <!-- Valor no topo da barra -->
-                {#if item.dias > 0}
-                  <text
-                    x={x + barWidth / 2}
-                    y={y - 8}
-                    text-anchor="middle"
-                    class="text-xs font-semibold fill-base-content"
-                  >
-                    {item.dias}
-                  </text>
-                {/if}
+								<!-- Label do eixo X -->
+								<foreignObject
+									x={x - 30}
+									y={chartHeight - padding.bottom + 15}
+									width="80"
+									height="60"
+								>
+									<div class="flex items-center justify-center text-center">
+										<span
+											class="text-base-content/80 text-xs leading-tight font-medium"
+											style="word-wrap: break-word; hyphens: auto;"
+										>
+											{item.tipo}
+										</span>
+									</div>
+								</foreignObject>
+							{/each}
+						</svg>
+					</div>
+				</div>
+			</div>
 
-                <!-- Label do eixo X -->
-                <foreignObject
-                  x={x - 30}
-                  y={chartHeight - padding.bottom + 15}
-                  width="80"
-                  height="60"
-                >
-                  <div class="flex items-center justify-center text-center">
-                    <span
-                      class="text-xs font-medium text-base-content/80 leading-tight"
-                      style="word-wrap: break-word; hyphens: auto;"
-                    >
-                      {item.tipo}
-                    </span>
-                  </div>
-                </foreignObject>
-              {/each}
-            </svg>
-          </div>
-        </div>
-      </div>
+			<!-- Gráfico 2: Tendências Mensais (Gráfico de Linha em Camadas) -->
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4">Tendências Mensais (Últimos 6 Meses)</h2>
+					<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
+						<svg
+							width={chartWidth2}
+							height={chartHeight2}
+							class="w-full"
+							viewBox={`0 0 ${chartWidth2} ${chartHeight2}`}
+						>
+							<!-- Grid lines -->
+							{#each [0, 1, 2, 3, 4, 5] as t}
+								{@const val = Math.round((maxValor / 5) * t)}
+								{@const y = chartHeight2 - padding2.bottom - (val / maxValor) * innerHeight2}
+								<line
+									x1={padding2.left}
+									y1={y}
+									x2={chartWidth2 - padding2.right}
+									y2={y}
+									stroke="currentColor"
+									stroke-opacity="0.1"
+									stroke-dasharray="4,4"
+								/>
+								<text x={padding2.left - 8} y={y + 4} text-anchor="end" class="text-xs opacity-70">
+									{val}
+								</text>
+							{/each}
 
-      <!-- Gráfico 2: Tendências Mensais (Gráfico de Linha em Camadas) -->
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <h2 class="card-title mb-4">Tendências Mensais (Últimos 6 Meses)</h2>
-          <div class="w-full overflow-x-auto bg-base-200/30 rounded-xl p-4">
-            <svg width={chartWidth2} height={chartHeight2} class="w-full" viewBox={`0 0 ${chartWidth2} ${chartHeight2}`}>
-              <!-- Grid lines -->
-              {#each [0, 1, 2, 3, 4, 5] as t}
-                {@const val = Math.round((maxValor / 5) * t)}
-                {@const y = chartHeight2 - padding2.bottom - (val / maxValor) * innerHeight2}
-                <line
-                  x1={padding2.left}
-                  y1={y}
-                  x2={chartWidth2 - padding2.right}
-                  y2={y}
-                  stroke="currentColor"
-                  stroke-opacity="0.1"
-                  stroke-dasharray="4,4"
-                />
-                <text
-                  x={padding2.left - 8}
-                  y={y + 4}
-                  text-anchor="end"
-                  class="text-xs opacity-70"
-                >
-                  {val}
-                </text>
-              {/each}
+							<!-- Eixos -->
+							<line
+								x1={padding2.left}
+								y1={chartHeight2 - padding2.bottom}
+								x2={chartWidth2 - padding2.right}
+								y2={chartHeight2 - padding2.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
+							<line
+								x1={padding2.left}
+								y1={padding2.top}
+								x2={padding2.left}
+								y2={chartHeight2 - padding2.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
 
-              <!-- Eixos -->
-              <line
-                x1={padding2.left}
-                y1={chartHeight2 - padding2.bottom}
-                x2={chartWidth2 - padding2.right}
-                y2={chartHeight2 - padding2.bottom}
-                stroke="currentColor"
-                stroke-opacity="0.3"
-                stroke-width="2"
-              />
-              <line
-                x1={padding2.left}
-                y1={padding2.top}
-                x2={padding2.left}
-                y2={chartHeight2 - padding2.bottom}
-                stroke="currentColor"
-                stroke-opacity="0.3"
-                stroke-width="2"
-              />
+							<!-- Linhas para cada tipo (em camadas) -->
+							{#each tipos as tipo, tipoIdx}
+								{@const cor = cores[tipoIdx]}
 
-              <!-- Linhas para cada tipo (em camadas) -->
-              {#each tipos as tipo, tipoIdx}
-                {@const cor = cores[tipoIdx]}
-                
-                <!-- Área preenchida (camada) -->
-                <defs>
-                  <linearGradient id="gradient-{tipo}" x1="0%" y1="0%" x2="0%" y2="100%">
-                    <stop offset="0%" style="stop-color:{cor};stop-opacity:0.4" />
-                    <stop offset="100%" style="stop-color:{cor};stop-opacity:0.05" />
-                  </linearGradient>
-                </defs>
+								<!-- Área preenchida (camada) -->
+								<defs>
+									<linearGradient id="gradient-{tipo}" x1="0%" y1="0%" x2="0%" y2="100%">
+										<stop offset="0%" style="stop-color:{cor};stop-opacity:0.4" />
+										<stop offset="100%" style="stop-color:{cor};stop-opacity:0.05" />
+									</linearGradient>
+								</defs>
 
-                {@const pontos = tendencias.map((t, i) => {
-                  const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth;
-                  const valor = t[tipo as keyof typeof t] as number;
-                  const y = chartHeight2 - padding2.bottom - (valor / maxValor) * innerHeight2;
-                  return { x, y, valor };
-                })}
+								{@const pontos = tendencias.map((t, i) => {
+									const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth;
+									const valor = t[tipo as keyof typeof t] as number;
+									const y = chartHeight2 - padding2.bottom - (valor / maxValor) * innerHeight2;
+									return { x, y, valor };
+								})}
 
-                <!-- Área -->
-                {#if pontos.length > 0}
-                  {@const pathArea = `M ${pontos[0].x} ${chartHeight2 - padding2.bottom} ` + pontos.map(p => `L ${p.x} ${p.y}`).join(' ') + ` L ${pontos[pontos.length - 1].x} ${chartHeight2 - padding2.bottom} Z`}
-                  <path
-                    d={pathArea}
-                    fill="url(#gradient-{tipo})"
-                  />
-                {/if}
+								<!-- Área -->
+								{#if pontos.length > 0}
+									{@const pathArea =
+										`M ${pontos[0].x} ${chartHeight2 - padding2.bottom} ` +
+										pontos.map((p) => `L ${p.x} ${p.y}`).join(' ') +
+										` L ${pontos[pontos.length - 1].x} ${chartHeight2 - padding2.bottom} Z`}
+									<path d={pathArea} fill="url(#gradient-{tipo})" />
+								{/if}
 
-                <!-- Linha -->
-                {#if pontos.length > 1}
-                  <polyline
-                    points={pontos.map((p) => `${p.x},${p.y}`).join(' ')}
-                    fill="none"
-                    stroke={cor}
-                    stroke-width="3"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                {/if}
+								<!-- Linha -->
+								{#if pontos.length > 1}
+									<polyline
+										points={pontos.map((p) => `${p.x},${p.y}`).join(' ')}
+										fill="none"
+										stroke={cor}
+										stroke-width="3"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								{/if}
 
-                <!-- Pontos -->
-                {#each pontos as ponto, pontoIdx}
-                  <circle
-                    cx={ponto.x}
-                    cy={ponto.y}
-                    r="5"
-                    fill={cor}
-                    stroke="white"
-                    stroke-width="2"
-                    class="hover:r-7 transition-all cursor-pointer"
-                  />
-                  <!-- Tooltip no hover -->
-                  <title>{nomes[tipoIdx]}: {ponto.valor} dias em {tendencias[pontoIdx]?.mes || ""}</title>
-                {/each}
-              {/each}
+								<!-- Pontos -->
+								{#each pontos as ponto, pontoIdx}
+									<circle
+										cx={ponto.x}
+										cy={ponto.y}
+										r="5"
+										fill={cor}
+										stroke="white"
+										stroke-width="2"
+										class="hover:r-7 cursor-pointer transition-all"
+									/>
+									<!-- Tooltip no hover -->
+									<title
+										>{nomes[tipoIdx]}: {ponto.valor} dias em {tendencias[pontoIdx]?.mes ||
+											''}</title
+									>
+								{/each}
+							{/each}
 
-              <!-- Labels do eixo X -->
-              {#each tendencias as t, i}
-                {@const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth}
-                <foreignObject
-                  x={x - 40}
-                  y={chartHeight2 - padding2.bottom + 15}
-                  width="80"
-                  height="60"
-                >
-                  <div class="flex items-center justify-center text-center">
-                    <span class="text-xs font-medium text-base-content/80">
-                      {t.mes}
-                    </span>
-                  </div>
-                </foreignObject>
-              {/each}
-            </svg>
+							<!-- Labels do eixo X -->
+							{#each tendencias as t, i}
+								{@const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth}
+								<foreignObject
+									x={x - 40}
+									y={chartHeight2 - padding2.bottom + 15}
+									width="80"
+									height="60"
+								>
+									<div class="flex items-center justify-center text-center">
+										<span class="text-base-content/80 text-xs font-medium">
+											{t.mes}
+										</span>
+									</div>
+								</foreignObject>
+							{/each}
+						</svg>
 
-            <!-- Legenda -->
-            <div class="flex flex-wrap justify-center gap-4 mt-4 pt-4 border-t border-base-300">
-              {#each tipos as tipo, idx}
-                <div class="flex items-center gap-2">
-                  <div
-                    class="w-4 h-4 rounded"
-                    style="background-color: {cores[idx]}"
-                  ></div>
-                  <span class="text-sm text-base-content/70">{nomes[idx]}</span>
-                </div>
-              {/each}
-            </div>
-          </div>
-        </div>
-      </div>
+						<!-- Legenda -->
+						<div class="border-base-300 mt-4 flex flex-wrap justify-center gap-4 border-t pt-4">
+							{#each tipos as tipo, idx}
+								<div class="flex items-center gap-2">
+									<div class="h-4 w-4 rounded" style="background-color: {cores[idx]}"></div>
+									<span class="text-base-content/70 text-sm">{nomes[idx]}</span>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</div>
 
-      <!-- Lista de Funcionários Afastados -->
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <h2 class="card-title mb-4">Funcionários Atualmente Afastados</h2>
-          {#if graficosQuery.data.funcionariosAfastados.length > 0}
-            <div class="overflow-x-auto">
-              <table class="table table-zebra">
-                <thead>
-                  <tr>
-                    <th>Funcionário</th>
-                    <th>Tipo</th>
-                    <th>Data Início</th>
-                    <th>Data Fim</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {#each graficosQuery.data.funcionariosAfastados as item}
-                    <tr>
-                      <td>{item.funcionarioNome}</td>
-                      <td>
-                        <span
-                          class="badge {
-                            item.tipo === 'atestado_medico'
-                              ? 'badge-error'
-                              : item.tipo === 'declaracao_comparecimento'
-                              ? 'badge-warning'
-                              : item.tipo === 'maternidade'
-                              ? 'badge-secondary'
-                              : item.tipo === 'paternidade'
-                              ? 'badge-info'
-                              : 'badge-success'
-                          }"
-                        >
-                          {item.tipo === "atestado_medico"
-                            ? "Atestado Médico"
-                            : item.tipo === "declaracao_comparecimento"
-                            ? "Declaração"
-                            : item.tipo === "maternidade"
-                            ? "Licença Maternidade"
-                            : item.tipo === "paternidade"
-                            ? "Licença Paternidade"
-                            : item.tipo}
-                        </span>
-                      </td>
-                      <td>{formatarData(item.dataInicio)}</td>
-                      <td>{formatarData(item.dataFim)}</td>
-                    </tr>
-                  {/each}
-                </tbody>
-              </table>
-            </div>
-          {:else}
-            <div class="text-center py-10 text-base-content/60">
-              Nenhum funcionário afastado no momento
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/if}
+			<!-- Lista de Funcionários Afastados -->
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4">Funcionários Atualmente Afastados</h2>
+					{#if graficosQuery.data.funcionariosAfastados.length > 0}
+						<div class="overflow-x-auto">
+							<table class="table-zebra table">
+								<thead>
+									<tr>
+										<th>Funcionário</th>
+										<th>Tipo</th>
+										<th>Data Início</th>
+										<th>Data Fim</th>
+									</tr>
+								</thead>
+								<tbody>
+									{#each graficosQuery.data.funcionariosAfastados as item}
+										<tr>
+											<td>{item.funcionarioNome}</td>
+											<td>
+												<span
+													class="badge {item.tipo === 'atestado_medico'
+														? 'badge-error'
+														: item.tipo === 'declaracao_comparecimento'
+															? 'badge-warning'
+															: item.tipo === 'maternidade'
+																? 'badge-secondary'
+																: item.tipo === 'paternidade'
+																	? 'badge-info'
+																	: 'badge-success'}"
+												>
+													{item.tipo === 'atestado_medico'
+														? 'Atestado Médico'
+														: item.tipo === 'declaracao_comparecimento'
+															? 'Declaração'
+															: item.tipo === 'maternidade'
+																? 'Licença Maternidade'
+																: item.tipo === 'paternidade'
+																	? 'Licença Paternidade'
+																	: item.tipo}
+												</span>
+											</td>
+											<td>{formatarData(item.dataInicio)}</td>
+											<td>{formatarData(item.dataFim)}</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					{:else}
+						<div class="text-base-content/60 py-10 text-center">
+							Nenhum funcionário afastado no momento
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
 
-    <!-- Tabela de Registros -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registros</h2>
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>Funcionário</th>
-                <th>Tipo</th>
-                <th>Data Início</th>
-                <th>Data Fim</th>
-                <th>Dias</th>
-                <th>Status</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each registrosFiltrados.atestados as atestado}
-                <tr>
-                  <td>{atestado.funcionario?.nome || "-"}</td>
-                  <td>
-                    <span
-                      class="badge {atestado.tipo === 'atestado_medico' ? 'badge-error' : 'badge-warning'}"
-                    >
-                      {atestado.tipo === "atestado_medico"
-                        ? "Atestado Médico"
-                        : "Declaração"}
-                    </span>
-                  </td>
-                  <td class="whitespace-nowrap font-mono text-xs">{formatarData(atestado.dataInicio)}</td>
-                  <td class="whitespace-nowrap font-mono text-xs">{formatarData(atestado.dataFim)}</td>
-                  <td>{atestado.dias}</td>
-                  <td>
-                    <span
-                      class="badge {atestado.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
-                    >
-                      {atestado.status === "ativo" ? "Ativo" : "Finalizado"}
-                    </span>
-                  </td>
-                  <td>
-                    <div class="flex gap-2">
-                      {#if atestado.documentoId}
-                        <button
-                          class="btn btn-xs btn-ghost"
-                          onclick={async () => {
-                            try {
-                              const url = await client.query(api.atestadosLicencas.obterUrlDocumento, {
-                                storageId: atestado.documentoId as any,
-                              });
-                              if (url) {
-                                window.open(url, "_blank");
-                              } else {
-                                mostrarErro(
-                                  "Erro ao visualizar documento",
-                                  "Não foi possível obter a URL do documento.",
-                                  "O documento pode ter sido removido ou não existe mais."
-                                );
-                              }
-                            } catch (err: any) {
-                              console.error("Erro ao obter URL do documento:", err);
-                              mostrarErro(
-                                "Erro ao visualizar documento",
-                                "Não foi possível abrir o documento.",
-                                err?.message || err?.toString() || "Erro desconhecido"
-                              );
-                            }
-                          }}
-                        >
-                          Ver Doc
-                        </button>
-                      {/if}
-                      <button
-                        class="btn btn-xs btn-error"
-                        onclick={() =>
-                          excluirRegistro("atestado", atestado._id)}
-                      >
-                        Excluir
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              {/each}
-              {#each registrosFiltrados.licencas as licenca}
-                <tr>
-                  <td>{licenca.funcionario?.nome || "-"}</td>
-                  <td>
-                    <span
-                      class="badge {licenca.tipo === 'maternidade' ? 'badge-secondary' : 'badge-info'}"
-                    >
-                      Licença{" "}
-                      {licenca.tipo === "maternidade"
-                        ? "Maternidade"
-                        : "Paternidade"}
-                      {licenca.ehProrrogacao ? " (Prorrogação)" : ""}
-                    </span>
-                  </td>
-                  <td class="whitespace-nowrap font-mono text-xs">{formatarData(licenca.dataInicio)}</td>
-                  <td class="whitespace-nowrap font-mono text-xs">{formatarData(licenca.dataFim)}</td>
-                  <td>{licenca.dias}</td>
-                  <td>
-                    <span
-                      class="badge {licenca.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
-                    >
-                      {licenca.status === "ativo" ? "Ativo" : "Finalizado"}
-                    </span>
-                  </td>
-                  <td>
-                    <div class="flex gap-2">
-                      {#if licenca.documentoId}
-                        <button
-                          class="btn btn-xs btn-ghost"
-                          onclick={async () => {
-                            try {
-                              const url = await client.query(api.atestadosLicencas.obterUrlDocumento, {
-                                storageId: licenca.documentoId as any,
-                              });
-                              if (url) {
-                                window.open(url, "_blank");
-                              } else {
-                                mostrarErro(
-                                  "Erro ao visualizar documento",
-                                  "Não foi possível obter a URL do documento.",
-                                  "O documento pode ter sido removido ou não existe mais."
-                                );
-                              }
-                            } catch (err: any) {
-                              console.error("Erro ao obter URL do documento:", err);
-                              mostrarErro(
-                                "Erro ao visualizar documento",
-                                "Não foi possível abrir o documento.",
-                                err?.message || err?.toString() || "Erro desconhecido"
-                              );
-                            }
-                          }}
-                        >
-                          Ver Doc
-                        </button>
-                      {/if}
-                      <button
-                        class="btn btn-xs btn-error"
-                        onclick={() =>
-                          excluirRegistro("licenca", licenca._id)}
-                      >
-                        Excluir
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-          {#if registrosFiltrados.atestados.length === 0 && registrosFiltrados.licencas.length === 0}
-            <div class="text-center py-10 text-base-content/60">
-              Nenhum registro encontrado
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  {:else if abaAtiva === "atestado"}
-    <!-- Formulário Atestado Médico -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registrar Atestado Médico</h2>
+		<!-- Tabela de Registros -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registros</h2>
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Funcionário</th>
+								<th>Tipo</th>
+								<th>Data Início</th>
+								<th>Data Fim</th>
+								<th>Dias</th>
+								<th>Status</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each registrosFiltrados.atestados as atestado}
+								<tr>
+									<td>{atestado.funcionario?.nome || '-'}</td>
+									<td>
+										<span
+											class="badge {atestado.tipo === 'atestado_medico'
+												? 'badge-error'
+												: 'badge-warning'}"
+										>
+											{atestado.tipo === 'atestado_medico' ? 'Atestado Médico' : 'Declaração'}
+										</span>
+									</td>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(atestado.dataInicio)}</td
+									>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(atestado.dataFim)}</td
+									>
+									<td>{atestado.dias}</td>
+									<td>
+										<span
+											class="badge {atestado.status === 'ativo'
+												? 'badge-success'
+												: 'badge-neutral'}"
+										>
+											{atestado.status === 'ativo' ? 'Ativo' : 'Finalizado'}
+										</span>
+									</td>
+									<td>
+										<div class="flex gap-2">
+											{#if atestado.documentoId}
+												<button
+													class="btn btn-xs btn-ghost"
+													onclick={async () => {
+														try {
+															const url = await client.query(
+																api.atestadosLicencas.obterUrlDocumento,
+																{
+																	storageId: atestado.documentoId as any
+																}
+															);
+															if (url) {
+																window.open(url, '_blank');
+															} else {
+																mostrarErro(
+																	'Erro ao visualizar documento',
+																	'Não foi possível obter a URL do documento.',
+																	'O documento pode ter sido removido ou não existe mais.'
+																);
+															}
+														} catch (err: any) {
+															console.error('Erro ao obter URL do documento:', err);
+															mostrarErro(
+																'Erro ao visualizar documento',
+																'Não foi possível abrir o documento.',
+																err?.message || err?.toString() || 'Erro desconhecido'
+															);
+														}
+													}}
+												>
+													Ver Doc
+												</button>
+											{/if}
+											<button
+												class="btn btn-xs btn-error"
+												onclick={() => excluirRegistro('atestado', atestado._id)}
+											>
+												Excluir
+											</button>
+										</div>
+									</td>
+								</tr>
+							{/each}
+							{#each registrosFiltrados.licencas as licenca}
+								<tr>
+									<td>{licenca.funcionario?.nome || '-'}</td>
+									<td>
+										<span
+											class="badge {licenca.tipo === 'maternidade'
+												? 'badge-secondary'
+												: 'badge-info'}"
+										>
+											Licença{' '}
+											{licenca.tipo === 'maternidade' ? 'Maternidade' : 'Paternidade'}
+											{licenca.ehProrrogacao ? ' (Prorrogação)' : ''}
+										</span>
+									</td>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(licenca.dataInicio)}</td
+									>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(licenca.dataFim)}</td
+									>
+									<td>{licenca.dias}</td>
+									<td>
+										<span
+											class="badge {licenca.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
+										>
+											{licenca.status === 'ativo' ? 'Ativo' : 'Finalizado'}
+										</span>
+									</td>
+									<td>
+										<div class="flex gap-2">
+											{#if licenca.documentoId}
+												<button
+													class="btn btn-xs btn-ghost"
+													onclick={async () => {
+														try {
+															const url = await client.query(
+																api.atestadosLicencas.obterUrlDocumento,
+																{
+																	storageId: licenca.documentoId as any
+																}
+															);
+															if (url) {
+																window.open(url, '_blank');
+															} else {
+																mostrarErro(
+																	'Erro ao visualizar documento',
+																	'Não foi possível obter a URL do documento.',
+																	'O documento pode ter sido removido ou não existe mais.'
+																);
+															}
+														} catch (err: any) {
+															console.error('Erro ao obter URL do documento:', err);
+															mostrarErro(
+																'Erro ao visualizar documento',
+																'Não foi possível abrir o documento.',
+																err?.message || err?.toString() || 'Erro desconhecido'
+															);
+														}
+													}}
+												>
+													Ver Doc
+												</button>
+											{/if}
+											<button
+												class="btn btn-xs btn-error"
+												onclick={() => excluirRegistro('licenca', licenca._id)}
+											>
+												Excluir
+											</button>
+										</div>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+					{#if registrosFiltrados.atestados.length === 0 && registrosFiltrados.licencas.length === 0}
+						<div class="text-base-content/60 py-10 text-center">Nenhum registro encontrado</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{:else if abaAtiva === 'atestado'}
+		<!-- Formulário Atestado Médico -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registrar Atestado Médico</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FuncionarioSelect
-            bind:value={atestadoMedico.funcionarioId}
-            required={true}
-          />
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<FuncionarioSelect bind:value={atestadoMedico.funcionarioId} required={true} />
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={atestadoMedico.dataInicio}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium"
+								>Data Início <span class="text-error">*</span></span
+							>
+						</div>
+						<input
+							type="date"
+							bind:value={atestadoMedico.dataInicio}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={atestadoMedico.dataFim}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="date"
+							bind:value={atestadoMedico.dataFim}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">CID <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="text"
-              bind:value={atestadoMedico.cid}
-              placeholder="Ex: A00.0"
-              class="input input-bordered"
-              maxlength="10"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">CID <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="text"
+							bind:value={atestadoMedico.cid}
+							placeholder="Ex: A00.0"
+							class="input input-bordered"
+							maxlength="10"
+							required
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <FileUpload
-              label="Anexar Atestado (PDF ou Imagem)"
-              bind:value={atestadoMedico.documentoId}
-              required={true}
-              onUpload={async (file) => {
-                atestadoMedico.documentoId = await handleDocumentoUpload(
-                  file
-                );
-              }}
-              onRemove={async () => {
-                atestadoMedico.documentoId = undefined;
-              }}
-            />
-          </div>
+					<div class="form-control md:col-span-2">
+						<FileUpload
+							label="Anexar Atestado (PDF ou Imagem)"
+							bind:value={atestadoMedico.documentoId}
+							required={true}
+							onUpload={async (file) => {
+								atestadoMedico.documentoId = await handleDocumentoUpload(file);
+							}}
+							onRemove={async () => {
+								atestadoMedico.documentoId = undefined;
+							}}
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <div class="label">
-              <span class="label-text font-medium">Observações</span>
-            </div>
-            <textarea
-              bind:value={atestadoMedico.observacoes}
-              class="textarea textarea-bordered h-24"
-              placeholder="Observações adicionais..."
-            ></textarea>
-          </div>
-        </div>
+					<div class="form-control md:col-span-2">
+						<div class="label">
+							<span class="label-text font-medium">Observações</span>
+						</div>
+						<textarea
+							bind:value={atestadoMedico.observacoes}
+							class="textarea textarea-bordered h-24"
+							placeholder="Observações adicionais..."
+						></textarea>
+					</div>
+				</div>
 
-        <div class="card-actions justify-end mt-6">
-          <button
-            class="btn btn-ghost"
-            onclick={resetarFormularioAtestado}
-          >
-            Cancelar
-          </button>
-          <button
-            class="btn btn-primary"
-            onclick={salvarAtestadoMedico}
-            disabled={salvandoAtestado}
-          >
-            {#if salvandoAtestado}
-              <span class="loading loading-spinner loading-sm"></span>
-              Salvando...
-            {:else}
-              Salvar
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-  {:else if abaAtiva === "declaracao"}
-    <!-- Formulário Declaração -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registrar Declaração de Comparecimento</h2>
+				<div class="card-actions mt-6 justify-end">
+					<button class="btn" onclick={resetarFormularioAtestado}> Cancelar </button>
+					<button
+						class="btn btn-primary"
+						onclick={salvarAtestadoMedico}
+						disabled={salvandoAtestado}
+					>
+						{#if salvandoAtestado}
+							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
+						{:else}
+							Salvar
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else if abaAtiva === 'declaracao'}
+		<!-- Formulário Declaração -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registrar Declaração de Comparecimento</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FuncionarioSelect
-            bind:value={declaracao.funcionarioId}
-            required={true}
-          />
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<FuncionarioSelect bind:value={declaracao.funcionarioId} required={true} />
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={declaracao.dataInicio}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium"
+								>Data Início <span class="text-error">*</span></span
+							>
+						</div>
+						<input
+							type="date"
+							bind:value={declaracao.dataInicio}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={declaracao.dataFim}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="date"
+							bind:value={declaracao.dataFim}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <FileUpload
-              label="Anexar Documento (PDF ou Imagem)"
-              bind:value={declaracao.documentoId}
-              required={true}
-              onUpload={async (file) => {
-                declaracao.documentoId = await handleDocumentoUpload(file);
-              }}
-              onRemove={async () => {
-                declaracao.documentoId = undefined;
-              }}
-            />
-          </div>
+					<div class="form-control md:col-span-2">
+						<FileUpload
+							label="Anexar Documento (PDF ou Imagem)"
+							bind:value={declaracao.documentoId}
+							required={true}
+							onUpload={async (file) => {
+								declaracao.documentoId = await handleDocumentoUpload(file);
+							}}
+							onRemove={async () => {
+								declaracao.documentoId = undefined;
+							}}
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <div class="label">
-              <span class="label-text font-medium">Observações</span>
-            </div>
-            <textarea
-              bind:value={declaracao.observacoes}
-              class="textarea textarea-bordered h-24"
-              placeholder="Observações adicionais..."
-            ></textarea>
-          </div>
-        </div>
+					<div class="form-control md:col-span-2">
+						<div class="label">
+							<span class="label-text font-medium">Observações</span>
+						</div>
+						<textarea
+							bind:value={declaracao.observacoes}
+							class="textarea textarea-bordered h-24"
+							placeholder="Observações adicionais..."
+						></textarea>
+					</div>
+				</div>
 
-        <div class="card-actions justify-end mt-6">
-          <button
-            class="btn btn-ghost"
-            onclick={resetarFormularioDeclaracao}
-          >
-            Cancelar
-          </button>
-          <button
-            class="btn btn-primary"
-            onclick={salvarDeclaracao}
-            disabled={salvandoDeclaracao}
-          >
-            {#if salvandoDeclaracao}
-              <span class="loading loading-spinner loading-sm"></span>
-              Salvando...
-            {:else}
-              Salvar
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-  {:else if abaAtiva === "maternidade"}
-    <!-- Formulário Licença Maternidade -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registrar Licença Maternidade</h2>
+				<div class="card-actions mt-6 justify-end">
+					<button class="btn" onclick={resetarFormularioDeclaracao}> Cancelar </button>
+					<button class="btn btn-primary" onclick={salvarDeclaracao} disabled={salvandoDeclaracao}>
+						{#if salvandoDeclaracao}
+							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
+						{:else}
+							Salvar
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else if abaAtiva === 'maternidade'}
+		<!-- Formulário Licença Maternidade -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registrar Licença Maternidade</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FuncionarioSelect
-            bind:value={licencaMaternidade.funcionarioId}
-            required={true}
-          />
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<FuncionarioSelect bind:value={licencaMaternidade.funcionarioId} required={true} />
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={licencaMaternidade.dataInicio}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium"
+								>Data Início <span class="text-error">*</span></span
+							>
+						</div>
+						<input
+							type="date"
+							bind:value={licencaMaternidade.dataInicio}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={licencaMaternidade.dataFim}
-              class="input input-bordered"
-              required
-            />
-            <div class="label">
-              <span class="label-text-alt">Calculado automaticamente (120 dias)</span>
-            </div>
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="date"
+							bind:value={licencaMaternidade.dataFim}
+							class="input input-bordered"
+							required
+						/>
+						<div class="label">
+							<span class="label-text-alt">Calculado automaticamente (120 dias)</span>
+						</div>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <label class="label cursor-pointer">
-              <span class="label-text font-medium">Esta é uma prorrogação?</span>
-              <input
-                type="checkbox"
-                bind:checked={licencaMaternidade.ehProrrogacao}
-                class="checkbox checkbox-primary"
-              />
-            </label>
-          </div>
+					<div class="form-control md:col-span-2">
+						<label class="label cursor-pointer">
+							<span class="label-text font-medium">Esta é uma prorrogação?</span>
+							<input
+								type="checkbox"
+								bind:checked={licencaMaternidade.ehProrrogacao}
+								class="checkbox checkbox-primary"
+							/>
+						</label>
+					</div>
 
-          {#if licencaMaternidade.ehProrrogacao}
-            <div class="form-control md:col-span-2">
-              <div class="label">
-                <span class="label-text font-medium">Licença Original <span class="text-error">*</span></span>
-              </div>
-              <select
-                bind:value={licencaMaternidade.licencaOriginalId}
-                class="select select-bordered"
-                required
-              >
-                <option value="">Selecione a licença original</option>
-                {#each licencasMaternidade as licenca}
-                  <option value={licenca._id}>
-                    {licenca.funcionario?.nome} -{" "}
-                    {formatarData(licenca.dataInicio)} até{" "}
-                    {formatarData(licenca.dataFim)}
-                  </option>
-                {/each}
-              </select>
-            </div>
-          {/if}
+					{#if licencaMaternidade.ehProrrogacao}
+						<div class="form-control md:col-span-2">
+							<div class="label">
+								<span class="label-text font-medium"
+									>Licença Original <span class="text-error">*</span></span
+								>
+							</div>
+							<select
+								bind:value={licencaMaternidade.licencaOriginalId}
+								class="select select-bordered"
+								required
+							>
+								<option value="">Selecione a licença original</option>
+								{#each licencasMaternidade as licenca}
+									<option value={licenca._id}>
+										{licenca.funcionario?.nome} -{' '}
+										{formatarData(licenca.dataInicio)} até{' '}
+										{formatarData(licenca.dataFim)}
+									</option>
+								{/each}
+							</select>
+						</div>
+					{/if}
 
-          <div class="form-control md:col-span-2">
-            <FileUpload
-              label="Anexar Documento (PDF ou Imagem)"
-              bind:value={licencaMaternidade.documentoId}
-              required={true}
-              onUpload={async (file) => {
-                licencaMaternidade.documentoId = await handleDocumentoUpload(
-                  file
-                );
-              }}
-              onRemove={async () => {
-                licencaMaternidade.documentoId = undefined;
-              }}
-            />
-          </div>
+					<div class="form-control md:col-span-2">
+						<FileUpload
+							label="Anexar Documento (PDF ou Imagem)"
+							bind:value={licencaMaternidade.documentoId}
+							required={true}
+							onUpload={async (file) => {
+								licencaMaternidade.documentoId = await handleDocumentoUpload(file);
+							}}
+							onRemove={async () => {
+								licencaMaternidade.documentoId = undefined;
+							}}
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <div class="label">
-              <span class="label-text font-medium">Observações</span>
-            </div>
-            <textarea
-              bind:value={licencaMaternidade.observacoes}
-              class="textarea textarea-bordered h-24"
-              placeholder="Observações adicionais..."
-            ></textarea>
-          </div>
-        </div>
+					<div class="form-control md:col-span-2">
+						<div class="label">
+							<span class="label-text font-medium">Observações</span>
+						</div>
+						<textarea
+							bind:value={licencaMaternidade.observacoes}
+							class="textarea textarea-bordered h-24"
+							placeholder="Observações adicionais..."
+						></textarea>
+					</div>
+				</div>
 
-        <div class="card-actions justify-end mt-6">
-          <button
-            class="btn btn-ghost"
-            onclick={resetarFormularioMaternidade}
-          >
-            Cancelar
-          </button>
-          <button
-            class="btn btn-primary"
-            onclick={salvarLicencaMaternidade}
-            disabled={salvandoMaternidade}
-          >
-            {#if salvandoMaternidade}
-              <span class="loading loading-spinner loading-sm"></span>
-              Salvando...
-            {:else}
-              Salvar
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-  {:else if abaAtiva === "paternidade"}
-    <!-- Formulário Licença Paternidade -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registrar Licença Paternidade</h2>
+				<div class="card-actions mt-6 justify-end">
+					<button class="btn" onclick={resetarFormularioMaternidade}> Cancelar </button>
+					<button
+						class="btn btn-primary"
+						onclick={salvarLicencaMaternidade}
+						disabled={salvandoMaternidade}
+					>
+						{#if salvandoMaternidade}
+							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
+						{:else}
+							Salvar
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else if abaAtiva === 'paternidade'}
+		<!-- Formulário Licença Paternidade -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registrar Licença Paternidade</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FuncionarioSelect
-            bind:value={licencaPaternidade.funcionarioId}
-            required={true}
-          />
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<FuncionarioSelect bind:value={licencaPaternidade.funcionarioId} required={true} />
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={licencaPaternidade.dataInicio}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium"
+								>Data Início <span class="text-error">*</span></span
+							>
+						</div>
+						<input
+							type="date"
+							bind:value={licencaPaternidade.dataInicio}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={licencaPaternidade.dataFim}
-              class="input input-bordered"
-              required
-            />
-            <div class="label">
-              <span class="label-text-alt">Calculado automaticamente (20 dias)</span>
-            </div>
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="date"
+							bind:value={licencaPaternidade.dataFim}
+							class="input input-bordered"
+							required
+						/>
+						<div class="label">
+							<span class="label-text-alt">Calculado automaticamente (20 dias)</span>
+						</div>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <FileUpload
-              label="Anexar Documento (PDF ou Imagem)"
-              bind:value={licencaPaternidade.documentoId}
-              required={true}
-              onUpload={async (file) => {
-                licencaPaternidade.documentoId = await handleDocumentoUpload(
-                  file
-                );
-              }}
-              onRemove={async () => {
-                licencaPaternidade.documentoId = undefined;
-              }}
-            />
-          </div>
+					<div class="form-control md:col-span-2">
+						<FileUpload
+							label="Anexar Documento (PDF ou Imagem)"
+							bind:value={licencaPaternidade.documentoId}
+							required={true}
+							onUpload={async (file) => {
+								licencaPaternidade.documentoId = await handleDocumentoUpload(file);
+							}}
+							onRemove={async () => {
+								licencaPaternidade.documentoId = undefined;
+							}}
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <div class="label">
-              <span class="label-text font-medium">Observações</span>
-            </div>
-            <textarea
-              bind:value={licencaPaternidade.observacoes}
-              class="textarea textarea-bordered h-24"
-              placeholder="Observações adicionais..."
-            ></textarea>
-          </div>
-        </div>
+					<div class="form-control md:col-span-2">
+						<div class="label">
+							<span class="label-text font-medium">Observações</span>
+						</div>
+						<textarea
+							bind:value={licencaPaternidade.observacoes}
+							class="textarea textarea-bordered h-24"
+							placeholder="Observações adicionais..."
+						></textarea>
+					</div>
+				</div>
 
-        <div class="card-actions justify-end mt-6">
-          <button
-            class="btn btn-ghost"
-            onclick={resetarFormularioPaternidade}
-          >
-            Cancelar
-          </button>
-          <button
-            class="btn btn-primary"
-            onclick={salvarLicencaPaternidade}
-            disabled={salvandoPaternidade}
-          >
-            {#if salvandoPaternidade}
-              <span class="loading loading-spinner loading-sm"></span>
-              Salvando...
-            {:else}
-              Salvar
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-  {/if}
+				<div class="card-actions mt-6 justify-end">
+					<button class="btn" onclick={resetarFormularioPaternidade}> Cancelar </button>
+					<button
+						class="btn btn-primary"
+						onclick={salvarLicencaPaternidade}
+						disabled={salvandoPaternidade}
+					>
+						{#if salvandoPaternidade}
+							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
+						{:else}
+							Salvar
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 </main>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  bind:open={erroModal.aberto}
-  title={erroModal.titulo}
-  message={erroModal.mensagem}
-  details={erroModal.detalhes}
-  onClose={() => {
-    erroModal.aberto = false;
-  }}
+	bind:open={erroModal.aberto}
+	title={erroModal.titulo}
+	message={erroModal.mensagem}
+	details={erroModal.detalhes}
+	onClose={() => {
+		erroModal.aberto = false;
+	}}
 />
-
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
index cfd5744..829ff89 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
@@ -1,426 +1,405 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import AprovarAusencias from "$lib/components/AprovarAusencias.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { goto } from '$app/navigation';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  // Buscar TODAS as solicitações de ausências (Dashboard RH)
-  const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
+	// Buscar TODAS as solicitações de ausências (Dashboard RH)
+	const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
 
-  let filtroStatus = $state<string>("todos");
-  let solicitacaoSelecionada = $state<Id<"solicitacoesAusencias"> | null>(null);
+	let filtroStatus = $state<string>('todos');
+	let solicitacaoSelecionada = $state<Id<'solicitacoesAusencias'> | null>(null);
 
-  const ausencias = $derived(todasAusenciasQuery?.data || []);
+	const ausencias = $derived(todasAusenciasQuery?.data || []);
 
-  // Filtrar solicitações
-  const ausenciasFiltradas = $derived(
-    ausencias.filter((a) => {
-      // Filtro de status
-      if (filtroStatus !== "todos" && a.status !== filtroStatus) return false;
-      return true;
-    }),
-  );
+	// Filtrar solicitações
+	const ausenciasFiltradas = $derived(
+		ausencias.filter((a) => {
+			// Filtro de status
+			if (filtroStatus !== 'todos' && a.status !== filtroStatus) return false;
+			return true;
+		})
+	);
 
-  // Estatísticas gerais
-  const stats = $derived({
-    total: ausencias.length,
-    aguardando: ausencias.filter((a) => a.status === "aguardando_aprovacao")
-      .length,
-    aprovadas: ausencias.filter((a) => a.status === "aprovado").length,
-    reprovadas: ausencias.filter((a) => a.status === "reprovado").length,
-  });
+	// Estatísticas gerais
+	const stats = $derived({
+		total: ausencias.length,
+		aguardando: ausencias.filter((a) => a.status === 'aguardando_aprovacao').length,
+		aprovadas: ausencias.filter((a) => a.status === 'aprovado').length,
+		reprovadas: ausencias.filter((a) => a.status === 'reprovado').length
+	});
 
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-    };
-    return badges[status] || "badge-neutral";
-  }
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error'
+		};
+		return badges[status] || 'badge-neutral';
+	}
 
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-    };
-    return textos[status] || status;
-  }
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado'
+		};
+		return textos[status] || status;
+	}
 
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diff = fim.getTime() - inicio.getTime();
-    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-  }
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+		const diff = fim.getTime() - inicio.getTime();
+		return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  async function selecionarSolicitacao(
-    solicitacaoId: Id<"solicitacoesAusencias">,
-  ) {
-    solicitacaoSelecionada = solicitacaoId;
-  }
+	async function selecionarSolicitacao(solicitacaoId: Id<'solicitacoesAusencias'>) {
+		solicitacaoSelecionada = solicitacaoId;
+	}
 
-  async function recarregar() {
-    solicitacaoSelecionada = null;
-  }
+	async function recarregar() {
+		solicitacaoSelecionada = null;
+	}
 </script>
 
-<main class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/recursos-humanos" class="text-primary hover:underline"
-          >Recursos Humanos</a
-        >
-      </li>
-      <li>Gestão de Ausências</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a>
+			</li>
+			<li>Gestão de Ausências</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-orange-500/20 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-orange-600"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">
-            Dashboard de Ausências
-          </h1>
-          <p class="text-base-content/70">
-            Visão geral de todas as solicitações de ausências
-          </p>
-        </div>
-      </div>
-      <button
-        class="btn btn-ghost gap-2"
-        onclick={() => goto("/recursos-humanos")}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-orange-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-orange-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Dashboard de Ausências</h1>
+					<p class="text-base-content/70">Visão geral de todas as solicitações de ausências</p>
+				</div>
+			</div>
+			<button class="btn gap-2" onclick={() => goto('/recursos-humanos')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
 
-  <!-- Estatísticas -->
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-      <div class="stat-figure text-orange-500">
-        <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Total</div>
-      <div class="stat-value text-orange-500">{stats.total}</div>
-      <div class="stat-desc">Solicitações</div>
-    </div>
+	<!-- Estatísticas -->
+	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+		<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+			<div class="stat-figure text-orange-500">
+				<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Total</div>
+			<div class="stat-value text-orange-500">{stats.total}</div>
+			<div class="stat-desc">Solicitações</div>
+		</div>
 
-    <div
-      class="stat bg-base-100 shadow-lg rounded-box border border-warning/30"
-    >
-      <div class="stat-figure text-warning">
-        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Pendentes</div>
-      <div class="stat-value text-warning">{stats.aguardando}</div>
-      <div class="stat-desc">Aguardando</div>
-    </div>
+		<div class="stat bg-base-100 rounded-box border-warning/30 border shadow-lg">
+			<div class="stat-figure text-warning">
+				<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Pendentes</div>
+			<div class="stat-value text-warning">{stats.aguardando}</div>
+			<div class="stat-desc">Aguardando</div>
+		</div>
 
-    <div
-      class="stat bg-base-100 shadow-lg rounded-box border border-success/30"
-    >
-      <div class="stat-figure text-success">
-        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Aprovadas</div>
-      <div class="stat-value text-success">{stats.aprovadas}</div>
-      <div class="stat-desc">Deferidas</div>
-    </div>
+		<div class="stat bg-base-100 rounded-box border-success/30 border shadow-lg">
+			<div class="stat-figure text-success">
+				<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Aprovadas</div>
+			<div class="stat-value text-success">{stats.aprovadas}</div>
+			<div class="stat-desc">Deferidas</div>
+		</div>
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
-      <div class="stat-figure text-error">
-        <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Reprovadas</div>
-      <div class="stat-value text-error">{stats.reprovadas}</div>
-      <div class="stat-desc">Indeferidas</div>
-    </div>
-  </div>
+		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
+			<div class="stat-figure text-error">
+				<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Reprovadas</div>
+			<div class="stat-value text-error">{stats.reprovadas}</div>
+			<div class="stat-desc">Indeferidas</div>
+		</div>
+	</div>
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-lg mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">Filtros</h2>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="form-control">
-          <label class="label" for="filtro-status">
-            <span class="label-text">Status</span>
-          </label>
-          <select
-            id="filtro-status"
-            class="select select-bordered"
-            bind:value={filtroStatus}
-          >
-            <option value="todos">Todos</option>
-            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
-            <option value="aprovado">Aprovado</option>
-            <option value="reprovado">Reprovado</option>
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">Filtros</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<div class="form-control">
+					<label class="label" for="filtro-status">
+						<span class="label-text">Status</span>
+					</label>
+					<select id="filtro-status" class="select select-bordered" bind:value={filtroStatus}>
+						<option value="todos">Todos</option>
+						<option value="aguardando_aprovacao">Aguardando Aprovação</option>
+						<option value="aprovado">Aprovado</option>
+						<option value="reprovado">Reprovado</option>
+					</select>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Lista de Solicitações -->
-  <div class="card bg-base-100 shadow-lg">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        Todas as Solicitações ({ausenciasFiltradas.length})
-      </h2>
+	<!-- Lista de Solicitações -->
+	<div class="card bg-base-100 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				Todas as Solicitações ({ausenciasFiltradas.length})
+			</h2>
 
-      {#if ausenciasFiltradas.length === 0}
-        <div class="alert">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="stroke-info shrink-0 w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
-        </div>
-      {:else}
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>Funcionário</th>
-                <th>Time</th>
-                <th>Período</th>
-                <th>Dias</th>
-                <th>Motivo</th>
-                <th>Status</th>
-                <th>Solicitado em</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each ausenciasFiltradas as ausencia}
-                <tr>
-                  <td class="font-semibold">
-                    {ausencia.funcionario?.nome || "N/A"}
-                  </td>
-                  <td>
-                    {#if ausencia.time}
-                      <div
-                        class="badge badge-sm font-semibold"
-                        style="background-color: {ausencia.time
-                          .cor}20; border-color: {ausencia.time
-                          .cor}; color: {ausencia.time.cor}"
-                      >
-                        {ausencia.time.nome}
-                      </div>
-                    {:else}
-                      <span class="text-base-content/50">Sem time</span>
-                    {/if}
-                  </td>
-                  <td>
-                    {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                    {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
-                  </td>
-                  <td class="font-bold">
-                    {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
-                  </td>
-                  <td class="max-w-xs truncate" title={ausencia.motivo}>
-                    {ausencia.motivo}
-                  </td>
-                  <td>
-                    <div class={`badge ${getStatusBadge(ausencia.status)}`}>
-                      {getStatusTexto(ausencia.status)}
-                    </div>
-                  </td>
-                  <td class="text-xs">
-                    {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
-                  </td>
-                  <td>
-                    {#if ausencia.status === "aguardando_aprovacao"}
-                      <button
-                        type="button"
-                        class="btn btn-primary btn-sm gap-2"
-                        onclick={() => selecionarSolicitacao(ausencia._id)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
-                        Ver Detalhes
-                      </button>
-                    {:else}
-                      <button
-                        type="button"
-                        class="btn btn-ghost btn-sm gap-2"
-                        onclick={() => selecionarSolicitacao(ausencia._id)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
-                        Ver Detalhes
-                      </button>
-                    {/if}
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if ausenciasFiltradas.length === 0}
+				<div class="alert">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="stroke-info h-6 w-6 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+					<span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+				</div>
+			{:else}
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Funcionário</th>
+								<th>Time</th>
+								<th>Período</th>
+								<th>Dias</th>
+								<th>Motivo</th>
+								<th>Status</th>
+								<th>Solicitado em</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each ausenciasFiltradas as ausencia}
+								<tr>
+									<td class="font-semibold">
+										{ausencia.funcionario?.nome || 'N/A'}
+									</td>
+									<td>
+										{#if ausencia.time}
+											<div
+												class="badge badge-sm font-semibold"
+												style="background-color: {ausencia.time.cor}20; border-color: {ausencia.time
+													.cor}; color: {ausencia.time.cor}"
+											>
+												{ausencia.time.nome}
+											</div>
+										{:else}
+											<span class="text-base-content/50">Sem time</span>
+										{/if}
+									</td>
+									<td>
+										{new Date(ausencia.dataInicio).toLocaleDateString('pt-BR')} até{' '}
+										{new Date(ausencia.dataFim).toLocaleDateString('pt-BR')}
+									</td>
+									<td class="font-bold">
+										{calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
+									</td>
+									<td class="max-w-xs truncate" title={ausencia.motivo}>
+										{ausencia.motivo}
+									</td>
+									<td>
+										<div class={`badge ${getStatusBadge(ausencia.status)}`}>
+											{getStatusTexto(ausencia.status)}
+										</div>
+									</td>
+									<td class="text-xs">
+										{new Date(ausencia.criadoEm).toLocaleDateString('pt-BR')}
+									</td>
+									<td>
+										{#if ausencia.status === 'aguardando_aprovacao'}
+											<button
+												type="button"
+												class="btn btn-primary btn-sm gap-2"
+												onclick={() => selecionarSolicitacao(ausencia._id)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+													/>
+												</svg>
+												Ver Detalhes
+											</button>
+										{:else}
+											<button
+												type="button"
+												class="btn btn-sm gap-2"
+												onclick={() => selecionarSolicitacao(ausencia._id)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+													/>
+												</svg>
+												Ver Detalhes
+											</button>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		</div>
+	</div>
 </main>
 
 <!-- Modal de Aprovação -->
 {#if solicitacaoSelecionada && currentUser.data}
-  {#await client.query( api.ausencias.obterDetalhes, { solicitacaoId: solicitacaoSelecionada }, ) then detalhes}
-    {#if detalhes}
-      <dialog class="modal modal-open">
-        <div class="modal-box max-w-4xl">
-          <AprovarAusencias
-            solicitacao={detalhes}
-            gestorId={currentUser.data._id}
-            onSucesso={recarregar}
-            onCancelar={() => (solicitacaoSelecionada = null)}
-          />
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button
-            type="button"
-            onclick={() => (solicitacaoSelecionada = null)}
-            aria-label="Fechar modal">Fechar</button
-          >
-        </form>
-      </dialog>
-    {/if}
-  {/await}
+	{#await client.query( api.ausencias.obterDetalhes, { solicitacaoId: solicitacaoSelecionada } ) then detalhes}
+		{#if detalhes}
+			<dialog class="modal modal-open">
+				<div class="modal-box max-w-4xl">
+					<AprovarAusencias
+						solicitacao={detalhes}
+						gestorId={currentUser.data._id}
+						onSucesso={recarregar}
+						onCancelar={() => (solicitacaoSelecionada = null)}
+					/>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button
+						type="button"
+						onclick={() => (solicitacaoSelecionada = null)}
+						aria-label="Fechar modal">Fechar</button
+					>
+				</form>
+			</dialog>
+		{/if}
+	{/await}
 {/if}
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
index 73a9dd1..792d3e6 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
@@ -1,226 +1,313 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  
-  // Buscar TODAS as solicitações de férias (Dashboard RH)
-  const todasSolicitacoesQuery = useQuery(api.ferias.listarTodas, {});
-  
-  let filtroStatus = $state<string>("todos");
-  
-  const solicitacoes = $derived(todasSolicitacoesQuery?.data || []);
-  
-  // Filtrar solicitações
-  const solicitacoesFiltradas = $derived(
-    solicitacoes.filter((s: any) => {
-      // Filtro de status
-      if (filtroStatus !== "todos" && s.status !== filtroStatus) return false;
-      return true;
-    })
-  );
-  
-  // Estatísticas gerais
-  const stats = $derived({
-    total: solicitacoes.length,
-    aguardando: solicitacoes.filter((s: any) => s.status === "aguardando_aprovacao").length,
-    aprovadas: solicitacoes.filter((s: any) => s.status === "aprovado" || s.status === "data_ajustada_aprovada").length,
-    reprovadas: solicitacoes.filter((s: any) => s.status === "reprovado").length,
-  });
-  
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-      data_ajustada_aprovada: "badge-info",
-    };
-    return badges[status] || "badge-neutral";
-  }
-  
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-      data_ajustada_aprovada: "Ajustado",
-    };
-    return textos[status] || status;
-  }
-  
-  function formatarData(dataISO: string) {
-    return new Date(dataISO).toLocaleDateString("pt-BR");
-  }
+	import { goto } from '$app/navigation';
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+
+	// Buscar TODAS as solicitações de férias (Dashboard RH)
+	const todasSolicitacoesQuery = useQuery(api.ferias.listarTodas, {});
+
+	let filtroStatus = $state<string>('todos');
+
+	const solicitacoes = $derived(todasSolicitacoesQuery?.data || []);
+
+	// Filtrar solicitações
+	const solicitacoesFiltradas = $derived(
+		solicitacoes.filter((s: any) => {
+			// Filtro de status
+			if (filtroStatus !== 'todos' && s.status !== filtroStatus) return false;
+			return true;
+		})
+	);
+
+	// Estatísticas gerais
+	const stats = $derived({
+		total: solicitacoes.length,
+		aguardando: solicitacoes.filter((s: any) => s.status === 'aguardando_aprovacao').length,
+		aprovadas: solicitacoes.filter(
+			(s: any) => s.status === 'aprovado' || s.status === 'data_ajustada_aprovada'
+		).length,
+		reprovadas: solicitacoes.filter((s: any) => s.status === 'reprovado').length
+	});
+
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error',
+			data_ajustada_aprovada: 'badge-info'
+		};
+		return badges[status] || 'badge-neutral';
+	}
+
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado',
+			data_ajustada_aprovada: 'Ajustado'
+		};
+		return textos[status] || status;
+	}
+
+	function formatarData(dataISO: string) {
+		return new Date(dataISO).toLocaleDateString('pt-BR');
+	}
 </script>
 
-<main class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li>Gestão de Férias</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
+			<li>Gestão de Férias</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-purple-500/20 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Dashboard de Férias</h1>
-          <p class="text-base-content/70">Visão geral de todas as solicitações e funcionários</p>
-        </div>
-      </div>
-      <button class="btn btn-ghost gap-2" onclick={() => goto("/recursos-humanos")}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-purple-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-purple-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Dashboard de Férias</h1>
+					<p class="text-base-content/70">Visão geral de todas as solicitações e funcionários</p>
+				</div>
+			</div>
+			<button class="btn gap-2" onclick={() => goto('/recursos-humanos')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
 
-  <!-- Estatísticas -->
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-      <div class="stat-figure text-primary">
-        <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-      </div>
-      <div class="stat-title">Total</div>
-      <div class="stat-value text-primary">{stats.total}</div>
-      <div class="stat-desc">Solicitações</div>
-    </div>
+	<!-- Estatísticas -->
+	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+		<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+			<div class="stat-figure text-primary">
+				<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Total</div>
+			<div class="stat-value text-primary">{stats.total}</div>
+			<div class="stat-desc">Solicitações</div>
+		</div>
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-warning/30">
-      <div class="stat-figure text-warning">
-        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <div class="stat-title">Aguardando</div>
-      <div class="stat-value text-warning">{stats.aguardando}</div>
-      <div class="stat-desc">Pendentes</div>
-    </div>
+		<div class="stat bg-base-100 rounded-box border-warning/30 border shadow-lg">
+			<div class="stat-figure text-warning">
+				<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Aguardando</div>
+			<div class="stat-value text-warning">{stats.aguardando}</div>
+			<div class="stat-desc">Pendentes</div>
+		</div>
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-success/30">
-      <div class="stat-figure text-success">
-        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <div class="stat-title">Aprovadas</div>
-      <div class="stat-value text-success">{stats.aprovadas}</div>
-      <div class="stat-desc">Deferidas</div>
-    </div>
+		<div class="stat bg-base-100 rounded-box border-success/30 border shadow-lg">
+			<div class="stat-figure text-success">
+				<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Aprovadas</div>
+			<div class="stat-value text-success">{stats.aprovadas}</div>
+			<div class="stat-desc">Deferidas</div>
+		</div>
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
-      <div class="stat-figure text-error">
-        <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <div class="stat-title">Reprovadas</div>
-      <div class="stat-value text-error">{stats.reprovadas}</div>
-      <div class="stat-desc">Indeferidas</div>
-    </div>
-  </div>
+		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
+			<div class="stat-figure text-error">
+				<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Reprovadas</div>
+			<div class="stat-value text-error">{stats.reprovadas}</div>
+			<div class="stat-desc">Indeferidas</div>
+		</div>
+	</div>
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-lg mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">Filtros</h2>
-      <div class="grid grid-cols-1 md:grid-cols-1 gap-4">
-        <!-- Filtro Status -->
-        <div class="form-control">
-          <label class="label" for="status">
-            <span class="label-text">Status</span>
-          </label>
-          <select id="status" class="select select-bordered" bind:value={filtroStatus}>
-            <option value="todos">Todos</option>
-            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
-            <option value="aprovado">Aprovado</option>
-            <option value="reprovado">Reprovado</option>
-            <option value="data_ajustada_aprovada">Data Ajustada</option>
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">Filtros</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-1">
+				<!-- Filtro Status -->
+				<div class="form-control">
+					<label class="label" for="status">
+						<span class="label-text">Status</span>
+					</label>
+					<select id="status" class="select select-bordered" bind:value={filtroStatus}>
+						<option value="todos">Todos</option>
+						<option value="aguardando_aprovacao">Aguardando Aprovação</option>
+						<option value="aprovado">Aprovado</option>
+						<option value="reprovado">Reprovado</option>
+						<option value="data_ajustada_aprovada">Data Ajustada</option>
+					</select>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Lista de Solicitações -->
-  <div class="card bg-base-100 shadow-lg">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        Solicitações ({solicitacoesFiltradas.length})
-      </h2>
+	<!-- Lista de Solicitações -->
+	<div class="card bg-base-100 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				Solicitações ({solicitacoesFiltradas.length})
+			</h2>
 
-      {#if solicitacoesFiltradas.length === 0}
-        <div class="alert">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-          </svg>
-          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
-        </div>
-      {:else}
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>Funcionário</th>
-                <th>Time</th>
-                <th>Ano</th>
-                <th>Períodos</th>
-                <th>Total Dias</th>
-                <th>Status</th>
-                <th>Solicitado em</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each solicitacoesFiltradas as solicitacao}
-                <tr>
-                  <td>
-                    <div class="flex items-center gap-3">
-                      <div class="avatar placeholder">
-                        <div class="bg-primary text-primary-content rounded-full w-10">
-                          <span class="text-xs">{solicitacao.funcionario?.nome.substring(0, 2).toUpperCase()}</span>
-                        </div>
-                      </div>
-                      <div>
-                        <div class="font-bold">{solicitacao.funcionario?.nome}</div>
-                        <div class="text-xs opacity-50">{solicitacao.funcionario?.matricula || "S/N"}</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td>
-                    {#if solicitacao.time}
-                      <div class="badge badge-outline" style="border-color: {solicitacao.time.cor}">
-                        {solicitacao.time.nome}
-                      </div>
-                    {:else}
-                      <span class="text-base-content/50 text-xs">Sem time</span>
-                    {/if}
-                  </td>
-                  <td>{solicitacao.anoReferencia}</td>
-                  <td>{solicitacao.periodos.length} período(s)</td>
-                  <td class="font-bold">{solicitacao.periodos.reduce((acc: number, p: any) => acc + p.diasCorridos, 0)} dias</td>
-                  <td>
-                    <div class={`badge ${getStatusBadge(solicitacao.status)}`}>
-                      {getStatusTexto(solicitacao.status)}
-                    </div>
-                  </td>
-                  <td class="text-xs">{new Date(solicitacao._creationTime).toLocaleDateString("pt-BR")}</td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if solicitacoesFiltradas.length === 0}
+				<div class="alert">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="stroke-info h-6 w-6 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+					<span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+				</div>
+			{:else}
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Funcionário</th>
+								<th>Time</th>
+								<th>Ano</th>
+								<th>Períodos</th>
+								<th>Total Dias</th>
+								<th>Status</th>
+								<th>Solicitado em</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each solicitacoesFiltradas as solicitacao}
+								<tr>
+									<td>
+										<div class="flex items-center gap-3">
+											<div class="avatar placeholder">
+												<div class="bg-primary text-primary-content w-10 rounded-full">
+													<span class="text-xs"
+														>{solicitacao.funcionario?.nome.substring(0, 2).toUpperCase()}</span
+													>
+												</div>
+											</div>
+											<div>
+												<div class="font-bold">{solicitacao.funcionario?.nome}</div>
+												<div class="text-xs opacity-50">
+													{solicitacao.funcionario?.matricula || 'S/N'}
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>
+										{#if solicitacao.time}
+											<div class="badge badge-outline" style="border-color: {solicitacao.time.cor}">
+												{solicitacao.time.nome}
+											</div>
+										{:else}
+											<span class="text-base-content/50 text-xs">Sem time</span>
+										{/if}
+									</td>
+									<td>{solicitacao.anoReferencia}</td>
+									<td>{solicitacao.periodos.length} período(s)</td>
+									<td class="font-bold"
+										>{solicitacao.periodos.reduce((acc: number, p: any) => acc + p.diasCorridos, 0)}
+										dias</td
+									>
+									<td>
+										<div class={`badge ${getStatusBadge(solicitacao.status)}`}>
+											{getStatusTexto(solicitacao.status)}
+										</div>
+									</td>
+									<td class="text-xs"
+										>{new Date(solicitacao._creationTime).toLocaleDateString('pt-BR')}</td
+									>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		</div>
+	</div>
 </main>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
index 54a14f0..97abb91 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
@@ -1,236 +1,310 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
-  import PrintModal from "$lib/components/PrintModal.svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { goto } from '$app/navigation';
+	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
+	import PrintModal from '$lib/components/PrintModal.svelte';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let list: Array<any> = [];
-  let filtered: Array<any> = [];
-  let selectedId: string | null = null;
-  let openMenuId: string | null = null;
-  let funcionarioParaImprimir: any = null;
+	let list: Array<any> = [];
+	let filtered: Array<any> = [];
+	let selectedId: string | null = null;
+	let openMenuId: string | null = null;
+	let funcionarioParaImprimir: any = null;
 
-  let filtroNome = "";
-  let filtroCPF = "";
-  let filtroMatricula = "";
-  let filtroTipo: SimboloTipo | "" = "";
+	let filtroNome = '';
+	let filtroCPF = '';
+	let filtroMatricula = '';
+	let filtroTipo: SimboloTipo | '' = '';
 
-  function applyFilters() {
-    const nome = filtroNome.toLowerCase();
-    const cpf = filtroCPF.replace(/\D/g, "");
-    const mat = filtroMatricula.toLowerCase();
-    filtered = list.filter((f) => {
-      const okNome = !nome || (f.nome || "").toLowerCase().includes(nome);
-      const okCPF = !cpf || (f.cpf || "").includes(cpf);
-      const okMat = !mat || (f.matricula || "").toLowerCase().includes(mat);
-      const okTipo = !filtroTipo || f.simboloTipo === filtroTipo;
-      return okNome && okCPF && okMat && okTipo;
-    });
-  }
+	function applyFilters() {
+		const nome = filtroNome.toLowerCase();
+		const cpf = filtroCPF.replace(/\D/g, '');
+		const mat = filtroMatricula.toLowerCase();
+		filtered = list.filter((f) => {
+			const okNome = !nome || (f.nome || '').toLowerCase().includes(nome);
+			const okCPF = !cpf || (f.cpf || '').includes(cpf);
+			const okMat = !mat || (f.matricula || '').toLowerCase().includes(mat);
+			const okTipo = !filtroTipo || f.simboloTipo === filtroTipo;
+			return okNome && okCPF && okMat && okTipo;
+		});
+	}
 
-  async function load() {
-    list = await client.query(api.funcionarios.getAll, {} as any);
-    applyFilters();
-  }
+	async function load() {
+		list = await client.query(api.funcionarios.getAll, {} as any);
+		applyFilters();
+	}
 
-  function editSelected() {
-    if (selectedId) goto(`/recursos-humanos/funcionarios/${selectedId}/editar`);
-  }
+	function editSelected() {
+		if (selectedId) goto(`/recursos-humanos/funcionarios/${selectedId}/editar`);
+	}
 
-  async function openPrintModal(funcionarioId: string) {
-    try {
-      const data = await client.query(api.funcionarios.getFichaCompleta, { 
-        id: funcionarioId as any 
-      });
-      funcionarioParaImprimir = data;
-    } catch (err) {
-      console.error("Erro ao carregar funcionário:", err);
-      alert("Erro ao carregar dados para impressão");
-    }
-  }
+	async function openPrintModal(funcionarioId: string) {
+		try {
+			const data = await client.query(api.funcionarios.getFichaCompleta, {
+				id: funcionarioId as any
+			});
+			funcionarioParaImprimir = data;
+		} catch (err) {
+			console.error('Erro ao carregar funcionário:', err);
+			alert('Erro ao carregar dados para impressão');
+		}
+	}
 
-  function navCadastro() { goto("/recursos-humanos/funcionarios/cadastro"); }
+	function navCadastro() {
+		goto('/recursos-humanos/funcionarios/cadastro');
+	}
 
-  load();
+	load();
 
-  function toggleMenu(id: string) {
-    openMenuId = openMenuId === id ? null : id;
-  }
-  $: needsScroll = filtered.length > 8;
+	function toggleMenu(id: string) {
+		openMenuId = openMenuId === id ? null : id;
+	}
+	$: needsScroll = filtered.length > 8;
 </script>
 
 <main class="container mx-auto px-4 py-4">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li>Funcionários</li>
-    </ul>
-  </div>
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
+			<li>Funcionários</li>
+		</ul>
+	</div>
 
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-blue-500/20 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Funcionários Cadastrados</h1>
-          <p class="text-base-content/70">Gerencie os funcionários da secretaria</p>
-        </div>
-      </div>
-      <button class="btn btn-primary btn-lg gap-2" onclick={navCadastro}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
-        </svg>
-        Novo Funcionário
-      </button>
-    </div>
-  </div>
+	<!-- Cabeçalho -->
+	<div class="mb-6">
+		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-blue-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-blue-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Funcionários Cadastrados</h1>
+					<p class="text-base-content/70">Gerencie os funcionários da secretaria</p>
+				</div>
+			</div>
+			<button class="btn btn-primary btn-lg gap-2" onclick={navCadastro}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+				Novo Funcionário
+			</button>
+		</div>
+	</div>
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-        Filtros de Pesquisa
-      </h2>
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
-        <div class="form-control w-full">
-          <label class="label" for="func_nome">
-            <span class="label-text font-semibold">Nome</span>
-          </label>
-          <input 
-            id="func_nome" 
-            class="input input-bordered focus:input-primary w-full" 
-            placeholder="Buscar por nome..."
-            bind:value={filtroNome} 
-            oninput={applyFilters} 
-          />
-        </div>
-        <div class="form-control w-full">
-          <label class="label" for="func_cpf">
-            <span class="label-text font-semibold">CPF</span>
-          </label>
-          <input 
-            id="func_cpf" 
-            class="input input-bordered focus:input-primary w-full" 
-            placeholder="000.000.000-00"
-            bind:value={filtroCPF} 
-            oninput={applyFilters} 
-          />
-        </div>
-        <div class="form-control w-full">
-          <label class="label" for="func_matricula">
-            <span class="label-text font-semibold">Matrícula</span>
-          </label>
-          <input 
-            id="func_matricula" 
-            class="input input-bordered focus:input-primary w-full" 
-            placeholder="Buscar por matrícula..."
-            bind:value={filtroMatricula} 
-            oninput={applyFilters} 
-          />
-        </div>
-        <div class="form-control w-full">
-          <label class="label" for="func_tipo">
-            <span class="label-text font-semibold">Símbolo Tipo</span>
-          </label>
-          <select id="func_tipo" class="select select-bordered focus:select-primary w-full" bind:value={filtroTipo} oninput={applyFilters}>
-            <option value="">Todos os tipos</option>
-            <option value="cargo_comissionado">Cargo Comissionado</option>
-            <option value="funcao_gratificada">Função Gratificada</option>
-          </select>
-        </div>
-      </div>
-      {#if filtroNome || filtroCPF || filtroMatricula || filtroTipo}
-        <div class="mt-4">
-          <button 
-            class="btn btn-ghost btn-sm gap-2"
-            onclick={() => {
-              filtroNome = "";
-              filtroCPF = "";
-              filtroMatricula = "";
-              filtroTipo = "";
-              applyFilters();
-            }}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-            Limpar Filtros
-          </button>
-        </div>
-      {/if}
-    </div>
-  </div>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+					/>
+				</svg>
+				Filtros de Pesquisa
+			</h2>
+			<div class="grid grid-cols-1 items-end gap-4 md:grid-cols-4">
+				<div class="form-control w-full">
+					<label class="label" for="func_nome">
+						<span class="label-text font-semibold">Nome</span>
+					</label>
+					<input
+						id="func_nome"
+						class="input input-bordered focus:input-primary w-full"
+						placeholder="Buscar por nome..."
+						bind:value={filtroNome}
+						oninput={applyFilters}
+					/>
+				</div>
+				<div class="form-control w-full">
+					<label class="label" for="func_cpf">
+						<span class="label-text font-semibold">CPF</span>
+					</label>
+					<input
+						id="func_cpf"
+						class="input input-bordered focus:input-primary w-full"
+						placeholder="000.000.000-00"
+						bind:value={filtroCPF}
+						oninput={applyFilters}
+					/>
+				</div>
+				<div class="form-control w-full">
+					<label class="label" for="func_matricula">
+						<span class="label-text font-semibold">Matrícula</span>
+					</label>
+					<input
+						id="func_matricula"
+						class="input input-bordered focus:input-primary w-full"
+						placeholder="Buscar por matrícula..."
+						bind:value={filtroMatricula}
+						oninput={applyFilters}
+					/>
+				</div>
+				<div class="form-control w-full">
+					<label class="label" for="func_tipo">
+						<span class="label-text font-semibold">Símbolo Tipo</span>
+					</label>
+					<select
+						id="func_tipo"
+						class="select select-bordered focus:select-primary w-full"
+						bind:value={filtroTipo}
+						oninput={applyFilters}
+					>
+						<option value="">Todos os tipos</option>
+						<option value="cargo_comissionado">Cargo Comissionado</option>
+						<option value="funcao_gratificada">Função Gratificada</option>
+					</select>
+				</div>
+			</div>
+			{#if filtroNome || filtroCPF || filtroMatricula || filtroTipo}
+				<div class="mt-4">
+					<button
+						class="btn btn-sm gap-2"
+						onclick={() => {
+							filtroNome = '';
+							filtroCPF = '';
+							filtroMatricula = '';
+							filtroTipo = '';
+							applyFilters();
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Limpar Filtros
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  <!-- Tabela de Funcionários -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body p-0">
-      <div class="overflow-x-auto">
-        <div class="overflow-y-auto" style="max-height: {filtered.length > 8 ? '600px' : 'none'};">
-          <table class="table table-zebra w-full">
-            <thead class="sticky top-0 bg-base-200 z-10">
-              <tr>
-                <th class="font-bold">Nome</th>
-                <th class="font-bold">CPF</th>
-                <th class="font-bold">Matrícula</th>
-                <th class="font-bold">Tipo</th>
-                <th class="font-bold">Cidade</th>
-                <th class="font-bold">UF</th>
-                <th class="text-right font-bold">Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-        {#each filtered as f}
-          <tr class="hover">
-            <td class="font-medium">{f.nome}</td>
-            <td>{f.cpf}</td>
-            <td>{f.matricula}</td>
-            <td>{f.simboloTipo}</td>
-            <td>{f.cidade}</td>
-            <td>{f.uf}</td>
-            <td class="text-right">
-              <div class="dropdown dropdown-end" class:dropdown-open={openMenuId === f._id}>
-                <button type="button" aria-label="Abrir menu" class="btn btn-ghost btn-sm" onclick={() => toggleMenu(f._id)}>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/></svg>
-                </button>
-                <ul class="dropdown-content menu bg-base-100 rounded-box z-10 w-52 p-2 shadow-lg border border-base-300">
-                  <li><a href={`/recursos-humanos/funcionarios/${f._id}`}>Ver Detalhes</a></li>
-                  <li><a href={`/recursos-humanos/funcionarios/${f._id}/editar`}>Editar</a></li>
-                  <li><a href={`/recursos-humanos/funcionarios/${f._id}/documentos`}>Ver Documentos</a></li>
-                  <li><button onclick={() => openPrintModal(f._id)}>Imprimir Ficha</button></li>
-                </ul>
-              </div>
-            </td>
-          </tr>
-        {/each}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Tabela de Funcionários -->
+	<div class="card bg-base-100 shadow-xl">
+		<div class="card-body p-0">
+			<div class="overflow-x-auto">
+				<div class="overflow-y-auto" style="max-height: {filtered.length > 8 ? '600px' : 'none'};">
+					<table class="table-zebra table w-full">
+						<thead class="bg-base-200 sticky top-0 z-10">
+							<tr>
+								<th class="font-bold">Nome</th>
+								<th class="font-bold">CPF</th>
+								<th class="font-bold">Matrícula</th>
+								<th class="font-bold">Tipo</th>
+								<th class="font-bold">Cidade</th>
+								<th class="font-bold">UF</th>
+								<th class="text-right font-bold">Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each filtered as f}
+								<tr class="hover">
+									<td class="font-medium">{f.nome}</td>
+									<td>{f.cpf}</td>
+									<td>{f.matricula}</td>
+									<td>{f.simboloTipo}</td>
+									<td>{f.cidade}</td>
+									<td>{f.uf}</td>
+									<td class="text-right">
+										<div class="dropdown dropdown-end" class:dropdown-open={openMenuId === f._id}>
+											<button
+												type="button"
+												aria-label="Abrir menu"
+												class="btn btn-sm"
+												onclick={() => toggleMenu(f._id)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-5 w-5"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													><path
+														d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+													/></svg
+												>
+											</button>
+											<ul
+												class="dropdown-content menu bg-base-100 rounded-box border-base-300 z-10 w-52 border p-2 shadow-lg"
+											>
+												<li>
+													<a href={`/recursos-humanos/funcionarios/${f._id}`}>Ver Detalhes</a>
+												</li>
+												<li>
+													<a href={`/recursos-humanos/funcionarios/${f._id}/editar`}>Editar</a>
+												</li>
+												<li>
+													<a href={`/recursos-humanos/funcionarios/${f._id}/documentos`}
+														>Ver Documentos</a
+													>
+												</li>
+												<li>
+													<button onclick={() => openPrintModal(f._id)}>Imprimir Ficha</button>
+												</li>
+											</ul>
+										</div>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Informação sobre resultados -->
-  <div class="mt-4 text-sm text-base-content/70 text-center">
-    Exibindo {filtered.length} de {list.length} funcionário(s)
-  </div>
+	<!-- Informação sobre resultados -->
+	<div class="text-base-content/70 mt-4 text-center text-sm">
+		Exibindo {filtered.length} de {list.length} funcionário(s)
+	</div>
 
-  <!-- Modal de Impressão -->
-  {#if funcionarioParaImprimir}
-    <PrintModal 
-      funcionario={funcionarioParaImprimir} 
-      onClose={() => funcionarioParaImprimir = null} 
-    />
-  {/if}
+	<!-- Modal de Impressão -->
+	{#if funcionarioParaImprimir}
+		<PrintModal
+			funcionario={funcionarioParaImprimir}
+			onClose={() => (funcionarioParaImprimir = null)}
+		/>
+	{/if}
 </main>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
index 6f339f1..8cfab3d 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
@@ -1,1041 +1,981 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { page } from "$app/stores";
-  import { goto } from "$app/navigation";
-  import { maskCPF, maskCEP, maskPhone } from "$lib/utils/masks";
-  import { documentos, getDocumentoDefinicao } from "$lib/utils/documentos";
-  import {
-    SEXO_OPTIONS,
-    ESTADO_CIVIL_OPTIONS,
-    GRAU_INSTRUCAO_OPTIONS,
-    GRUPO_SANGUINEO_OPTIONS,
-    FATOR_RH_OPTIONS,
-    APOSENTADO_OPTIONS,
-  } from "$lib/utils/constants";
-  import PrintModal from "$lib/components/PrintModal.svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { maskCPF, maskCEP, maskPhone } from '$lib/utils/masks';
+	import { documentos, getDocumentoDefinicao } from '$lib/utils/documentos';
+	import {
+		SEXO_OPTIONS,
+		ESTADO_CIVIL_OPTIONS,
+		GRAU_INSTRUCAO_OPTIONS,
+		GRUPO_SANGUINEO_OPTIONS,
+		FATOR_RH_OPTIONS,
+		APOSENTADO_OPTIONS
+	} from '$lib/utils/constants';
+	import PrintModal from '$lib/components/PrintModal.svelte';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let funcionarioId = $derived($page.params.funcionarioId as string);
+	let funcionarioId = $derived($page.params.funcionarioId as string);
 
-  let funcionario = $state<any>(null);
-  let simbolo = $state<any>(null);
-  let cursos = $state<any[]>([]);
-  let documentosUrls = $state<Record<string, string | null>>({});
-  let loading = $state(true);
-  let showPrintModal = $state(false);
-  let showPrintFinanceiro = $state(false);
+	let funcionario = $state<any>(null);
+	let simbolo = $state<any>(null);
+	let cursos = $state<any[]>([]);
+	let documentosUrls = $state<Record<string, string | null>>({});
+	let loading = $state(true);
+	let showPrintModal = $state(false);
+	let showPrintFinanceiro = $state(false);
 
-  async function load() {
-    try {
-      loading = true;
-      const data = await client.query(api.funcionarios.getFichaCompleta, {
-        id: funcionarioId as any,
-      });
+	async function load() {
+		try {
+			loading = true;
+			const data = await client.query(api.funcionarios.getFichaCompleta, {
+				id: funcionarioId as any
+			});
 
-      if (!data) {
-        goto("/recursos-humanos/funcionarios");
-        return;
-      }
+			if (!data) {
+				goto('/recursos-humanos/funcionarios');
+				return;
+			}
 
-      funcionario = data;
-      simbolo = data.simbolo;
-      cursos = data.cursos || [];
+			funcionario = data;
+			simbolo = data.simbolo;
+			cursos = data.cursos || [];
 
-      // Carregar URLs dos documentos
-      try {
-        documentosUrls = await client.query(api.documentos.getDocumentosUrls, {
-          funcionarioId: funcionarioId as any,
-        });
-      } catch (err) {
-        console.error("Erro ao carregar documentos:", err);
-      }
-    } catch (err) {
-      console.error("Erro ao carregar funcionário:", err);
-      goto("/recursos-humanos/funcionarios");
-    } finally {
-      loading = false;
-    }
-  }
+			// Carregar URLs dos documentos
+			try {
+				documentosUrls = await client.query(api.documentos.getDocumentosUrls, {
+					funcionarioId: funcionarioId as any
+				});
+			} catch (err) {
+				console.error('Erro ao carregar documentos:', err);
+			}
+		} catch (err) {
+			console.error('Erro ao carregar funcionário:', err);
+			goto('/recursos-humanos/funcionarios');
+		} finally {
+			loading = false;
+		}
+	}
 
-  function getLabelFromOptions(
-    value: string | undefined,
-    options: Array<{ value: string; label: string }>,
-  ): string {
-    if (!value) return "-";
-    return options.find((opt) => opt.value === value)?.label || value;
-  }
+	function getLabelFromOptions(
+		value: string | undefined,
+		options: Array<{ value: string; label: string }>
+	): string {
+		if (!value) return '-';
+		return options.find((opt) => opt.value === value)?.label || value;
+	}
 
-  function downloadDocumento(url: string, nomeDoc: string) {
-    if (!url) return;
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = nomeDoc;
-    link.target = "_blank";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
+	function downloadDocumento(url: string, nomeDoc: string) {
+		if (!url) return;
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = nomeDoc;
+		link.target = '_blank';
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}
 
-  load();
+	load();
 </script>
 
 {#if loading}
-  <div class="flex items-center justify-center min-h-screen">
-    <span class="loading loading-spinner loading-lg"></span>
-  </div>
+	<div class="flex min-h-screen items-center justify-center">
+		<span class="loading loading-spinner loading-lg"></span>
+	</div>
 {:else if funcionario}
-  <main class="container mx-auto px-4 py-4 max-w-7xl">
-    <!-- Breadcrumb -->
-    <div class="text-sm breadcrumbs mb-4">
-      <ul>
-        <li>
-          <a href="/recursos-humanos" class="text-primary hover:underline"
-            >Recursos Humanos</a
-          >
-        </li>
-        <li>
-          <a
-            href="/recursos-humanos/funcionarios"
-            class="text-primary hover:underline">Funcionários</a
-          >
-        </li>
-        <li>Detalhes</li>
-      </ul>
-    </div>
+	<main class="container mx-auto max-w-7xl px-4 py-4">
+		<!-- Breadcrumb -->
+		<div class="breadcrumbs mb-4 text-sm">
+			<ul>
+				<li>
+					<a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a>
+				</li>
+				<li>
+					<a href="/recursos-humanos/funcionarios" class="text-primary hover:underline"
+						>Funcionários</a
+					>
+				</li>
+				<li>Detalhes</li>
+			</ul>
+		</div>
 
-    <!-- Cabeçalho -->
-    <div class="mb-6">
-      <div
-        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4"
-      >
-        <div class="flex items-center gap-4">
-          <div class="p-3 bg-blue-500/20 rounded-xl">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-8 w-8 text-blue-600"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-              />
-            </svg>
-          </div>
-          <div>
-            <h1 class="text-3xl font-bold text-primary">{funcionario.nome}</h1>
-            <p class="text-base-content/70">
-              Matrícula: {funcionario.matricula}
-            </p>
-          </div>
-        </div>
+		<!-- Cabeçalho -->
+		<div class="mb-6">
+			<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+				<div class="flex items-center gap-4">
+					<div class="rounded-xl bg-blue-500/20 p-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8 text-blue-600"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h1 class="text-primary text-3xl font-bold">{funcionario.nome}</h1>
+						<p class="text-base-content/70">
+							Matrícula: {funcionario.matricula}
+						</p>
+					</div>
+				</div>
 
-        <div class="flex flex-wrap gap-2">
-          <button
-            class="btn btn-primary gap-2"
-            onclick={() =>
-              goto(`/recursos-humanos/funcionarios/${funcionarioId}/editar`)}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-              />
-            </svg>
-            Editar
-          </button>
-          <button
-            class="btn btn-secondary gap-2"
-            onclick={() =>
-              goto(
-                `/recursos-humanos/funcionarios/${funcionarioId}/documentos`,
-              )}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-              />
-            </svg>
-            Ver Documentos
-          </button>
-          <button
-            class="btn btn-accent gap-2"
-            onclick={() => (showPrintModal = true)}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
-              />
-            </svg>
-            Imprimir Ficha
-          </button>
-          <button
-            class="btn btn-info gap-2"
-            onclick={() => (showPrintFinanceiro = true)}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            Imprimir Dados Financeiros
-          </button>
-        </div>
-      </div>
-    </div>
+				<div class="flex flex-wrap gap-2">
+					<button
+						class="btn btn-primary gap-2"
+						onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}/editar`)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+							/>
+						</svg>
+						Editar
+					</button>
+					<button
+						class="btn btn-secondary gap-2"
+						onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}/documentos`)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+							/>
+						</svg>
+						Ver Documentos
+					</button>
+					<button class="btn btn-accent gap-2" onclick={() => (showPrintModal = true)}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
+							/>
+						</svg>
+						Imprimir Ficha
+					</button>
+					<button class="btn btn-info gap-2" onclick={() => (showPrintFinanceiro = true)}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						Imprimir Dados Financeiros
+					</button>
+				</div>
+			</div>
+		</div>
 
-    <!-- Dados Financeiros - Destaque -->
-    {#if simbolo}
-      <div
-        class="card bg-linear-to-br from-success/10 to-success/20 shadow-xl mb-6 border border-success/30"
-      >
-        <div class="card-body">
-          <h3 class="card-title text-xl border-b pb-3 mb-4">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 text-success"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            Dados Financeiros
-          </h3>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="stat bg-base-100/50 rounded-lg p-4">
-              <div class="stat-title text-xs">Símbolo</div>
-              <div class="stat-value text-2xl">{simbolo.nome}</div>
-              <div class="stat-desc text-xs">
-                {simbolo.tipo === "cargo_comissionado"
-                  ? "Cargo Comissionado"
-                  : "Função Gratificada"}
-              </div>
-            </div>
-            {#if funcionario.simboloTipo === "cargo_comissionado"}
-              <div class="stat bg-base-100/50 rounded-lg p-4">
-                <div class="stat-title text-xs">Vencimento</div>
-                <div class="stat-value text-2xl text-info">
-                  R$ {simbolo.vencValor}
-                </div>
-                <div class="stat-desc text-xs">Valor base</div>
-              </div>
-              <div class="stat bg-base-100/50 rounded-lg p-4">
-                <div class="stat-title text-xs">Representação</div>
-                <div class="stat-value text-2xl text-warning">
-                  R$ {simbolo.repValor}
-                </div>
-                <div class="stat-desc text-xs">Adicional</div>
-              </div>
-            {/if}
-            <div
-              class="stat bg-success/20 rounded-lg p-4 border-2 border-success/40"
-            >
-              <div class="stat-title text-xs font-bold">Total</div>
-              <div class="stat-value text-3xl text-success">
-                R$ {simbolo.valor}
-              </div>
-              <div class="stat-desc text-xs">Remuneração total</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    {/if}
+		<!-- Dados Financeiros - Destaque -->
+		{#if simbolo}
+			<div
+				class="card from-success/10 to-success/20 border-success/30 mb-6 border bg-linear-to-br shadow-xl"
+			>
+				<div class="card-body">
+					<h3 class="card-title mb-4 border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-success h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						Dados Financeiros
+					</h3>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+						<div class="stat bg-base-100/50 rounded-lg p-4">
+							<div class="stat-title text-xs">Símbolo</div>
+							<div class="stat-value text-2xl">{simbolo.nome}</div>
+							<div class="stat-desc text-xs">
+								{simbolo.tipo === 'cargo_comissionado'
+									? 'Cargo Comissionado'
+									: 'Função Gratificada'}
+							</div>
+						</div>
+						{#if funcionario.simboloTipo === 'cargo_comissionado'}
+							<div class="stat bg-base-100/50 rounded-lg p-4">
+								<div class="stat-title text-xs">Vencimento</div>
+								<div class="stat-value text-info text-2xl">
+									R$ {simbolo.vencValor}
+								</div>
+								<div class="stat-desc text-xs">Valor base</div>
+							</div>
+							<div class="stat bg-base-100/50 rounded-lg p-4">
+								<div class="stat-title text-xs">Representação</div>
+								<div class="stat-value text-warning text-2xl">
+									R$ {simbolo.repValor}
+								</div>
+								<div class="stat-desc text-xs">Adicional</div>
+							</div>
+						{/if}
+						<div class="stat bg-success/20 border-success/40 rounded-lg border-2 p-4">
+							<div class="stat-title text-xs font-bold">Total</div>
+							<div class="stat-value text-success text-3xl">
+								R$ {simbolo.valor}
+							</div>
+							<div class="stat-desc text-xs">Remuneração total</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Status de Férias -->
-    <div
-      class="card bg-linear-to-br from-purple-500/10 to-purple-600/20 shadow-xl mb-6 border border-purple-500/30"
-    >
-      <div class="card-body">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <div class="p-3 bg-purple-500/20 rounded-xl">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6 text-purple-600"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                />
-              </svg>
-            </div>
-            <div>
-              <h3 class="font-bold text-lg">Status Atual</h3>
-              <div class="flex items-center gap-2 mt-1">
-                {#if funcionario.statusFerias === "em_ferias"}
-                  <div class="badge badge-warning badge-lg">🏖️ Em Férias</div>
-                {:else}
-                  <div class="badge badge-success badge-lg">✅ Ativo</div>
-                {/if}
-              </div>
-            </div>
-          </div>
-          <a
-            href="/recursos-humanos/ferias"
-            class="btn btn-primary btn-sm gap-2"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 4v16m8-8H4"
-              />
-            </svg>
-            Gerenciar Férias
-          </a>
-        </div>
-      </div>
-    </div>
+		<!-- Status de Férias -->
+		<div
+			class="card mb-6 border border-purple-500/30 bg-linear-to-br from-purple-500/10 to-purple-600/20 shadow-xl"
+		>
+			<div class="card-body">
+				<div class="flex items-center justify-between">
+					<div class="flex items-center gap-3">
+						<div class="rounded-xl bg-purple-500/20 p-3">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 text-purple-600"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<h3 class="text-lg font-bold">Status Atual</h3>
+							<div class="mt-1 flex items-center gap-2">
+								{#if funcionario.statusFerias === 'em_ferias'}
+									<div class="badge badge-warning badge-lg">🏖️ Em Férias</div>
+								{:else}
+									<div class="badge badge-success badge-lg">✅ Ativo</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+					<a href="/recursos-humanos/ferias" class="btn btn-primary btn-sm gap-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Gerenciar Férias
+					</a>
+				</div>
+			</div>
+		</div>
 
-    <!-- Grid de Cards -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-      <!-- Coluna 1: Dados Pessoais -->
-      <div class="space-y-6">
-        <!-- Informações Pessoais -->
-        <div class="card bg-base-100 shadow-xl">
-          <div class="card-body">
-            <h3 class="card-title text-lg border-b pb-2 mb-3">
-              Informações Pessoais
-            </h3>
-            <div class="space-y-2 text-sm">
-              <div>
-                <span class="font-semibold">CPF:</span>
-                {maskCPF(funcionario.cpf)}
-              </div>
-              <div><span class="font-semibold">RG:</span> {funcionario.rg}</div>
-              {#if funcionario.rgOrgaoExpedidor}
-                <div>
-                  <span class="font-semibold">Órgão Expedidor:</span>
-                  {funcionario.rgOrgaoExpedidor}
-                </div>
-              {/if}
-              {#if funcionario.rgDataEmissao}
-                <div>
-                  <span class="font-semibold">Data Emissão RG:</span>
-                  {funcionario.rgDataEmissao}
-                </div>
-              {/if}
-              <div>
-                <span class="font-semibold">Data Nascimento:</span>
-                {funcionario.nascimento}
-              </div>
-              {#if funcionario.sexo}
-                <div>
-                  <span class="font-semibold">Sexo:</span>
-                  {getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)}
-                </div>
-              {/if}
-              {#if funcionario.estadoCivil}
-                <div>
-                  <span class="font-semibold">Estado Civil:</span>
-                  {getLabelFromOptions(
-                    funcionario.estadoCivil,
-                    ESTADO_CIVIL_OPTIONS,
-                  )}
-                </div>
-              {/if}
-              {#if funcionario.nacionalidade}
-                <div>
-                  <span class="font-semibold">Nacionalidade:</span>
-                  {funcionario.nacionalidade}
-                </div>
-              {/if}
-            </div>
-          </div>
-        </div>
+		<!-- Grid de Cards -->
+		<div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
+			<!-- Coluna 1: Dados Pessoais -->
+			<div class="space-y-6">
+				<!-- Informações Pessoais -->
+				<div class="card bg-base-100 shadow-xl">
+					<div class="card-body">
+						<h3 class="card-title mb-3 border-b pb-2 text-lg">Informações Pessoais</h3>
+						<div class="space-y-2 text-sm">
+							<div>
+								<span class="font-semibold">CPF:</span>
+								{maskCPF(funcionario.cpf)}
+							</div>
+							<div><span class="font-semibold">RG:</span> {funcionario.rg}</div>
+							{#if funcionario.rgOrgaoExpedidor}
+								<div>
+									<span class="font-semibold">Órgão Expedidor:</span>
+									{funcionario.rgOrgaoExpedidor}
+								</div>
+							{/if}
+							{#if funcionario.rgDataEmissao}
+								<div>
+									<span class="font-semibold">Data Emissão RG:</span>
+									{funcionario.rgDataEmissao}
+								</div>
+							{/if}
+							<div>
+								<span class="font-semibold">Data Nascimento:</span>
+								{funcionario.nascimento}
+							</div>
+							{#if funcionario.sexo}
+								<div>
+									<span class="font-semibold">Sexo:</span>
+									{getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)}
+								</div>
+							{/if}
+							{#if funcionario.estadoCivil}
+								<div>
+									<span class="font-semibold">Estado Civil:</span>
+									{getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)}
+								</div>
+							{/if}
+							{#if funcionario.nacionalidade}
+								<div>
+									<span class="font-semibold">Nacionalidade:</span>
+									{funcionario.nacionalidade}
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
 
-        <!-- Filiação -->
-        {#if funcionario.nomePai || funcionario.nomeMae}
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h3 class="card-title text-lg border-b pb-2 mb-3">Filiação</h3>
-              <div class="space-y-2 text-sm">
-                {#if funcionario.nomePai}
-                  <div>
-                    <span class="font-semibold">Pai:</span>
-                    {funcionario.nomePai}
-                  </div>
-                {/if}
-                {#if funcionario.nomeMae}
-                  <div>
-                    <span class="font-semibold">Mãe:</span>
-                    {funcionario.nomeMae}
-                  </div>
-                {/if}
-              </div>
-            </div>
-          </div>
-        {/if}
+				<!-- Filiação -->
+				{#if funcionario.nomePai || funcionario.nomeMae}
+					<div class="card bg-base-100 shadow-xl">
+						<div class="card-body">
+							<h3 class="card-title mb-3 border-b pb-2 text-lg">Filiação</h3>
+							<div class="space-y-2 text-sm">
+								{#if funcionario.nomePai}
+									<div>
+										<span class="font-semibold">Pai:</span>
+										{funcionario.nomePai}
+									</div>
+								{/if}
+								{#if funcionario.nomeMae}
+									<div>
+										<span class="font-semibold">Mãe:</span>
+										{funcionario.nomeMae}
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+				{/if}
 
-        <!-- Naturalidade -->
-        {#if funcionario.naturalidade || funcionario.naturalidadeUF}
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h3 class="card-title text-lg border-b pb-2 mb-3">
-                Naturalidade
-              </h3>
-              <div class="space-y-2 text-sm">
-                {#if funcionario.naturalidade}
-                  <div>
-                    <span class="font-semibold">Cidade:</span>
-                    {funcionario.naturalidade}
-                  </div>
-                {/if}
-                {#if funcionario.naturalidadeUF}
-                  <div>
-                    <span class="font-semibold">UF:</span>
-                    {funcionario.naturalidadeUF}
-                  </div>
-                {/if}
-              </div>
-            </div>
-          </div>
-        {/if}
-      </div>
+				<!-- Naturalidade -->
+				{#if funcionario.naturalidade || funcionario.naturalidadeUF}
+					<div class="card bg-base-100 shadow-xl">
+						<div class="card-body">
+							<h3 class="card-title mb-3 border-b pb-2 text-lg">Naturalidade</h3>
+							<div class="space-y-2 text-sm">
+								{#if funcionario.naturalidade}
+									<div>
+										<span class="font-semibold">Cidade:</span>
+										{funcionario.naturalidade}
+									</div>
+								{/if}
+								{#if funcionario.naturalidadeUF}
+									<div>
+										<span class="font-semibold">UF:</span>
+										{funcionario.naturalidadeUF}
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
 
-      <!-- Coluna 2: Cargo, Formação e Cursos -->
-      <div class="space-y-6">
-        <!-- Cargo e Vínculo -->
-        <div class="card bg-base-100 shadow-xl">
-          <div class="card-body">
-            <h3 class="card-title text-lg border-b pb-2 mb-3">
-              Cargo e Vínculo
-            </h3>
-            <div class="space-y-2 text-sm">
-              <div>
-                <span class="font-semibold">Tipo:</span>
-                {funcionario.simboloTipo === "cargo_comissionado"
-                  ? "Cargo Comissionado"
-                  : "Função Gratificada"}
-              </div>
-              {#if simbolo}
-                <div>
-                  <span class="font-semibold">Símbolo:</span>
-                  {simbolo.nome}
-                </div>
-                <div class="text-xs text-base-content/70">
-                  {simbolo.descricao}
-                </div>
-              {/if}
-              {#if funcionario.descricaoCargo}
-                <div class="mt-2">
-                  <span class="font-semibold">Descrição:</span>
-                  {funcionario.descricaoCargo}
-                </div>
-              {/if}
-              {#if funcionario.admissaoData}
-                <div class="mt-2">
-                  <span class="font-semibold">Data Admissão:</span>
-                  {funcionario.admissaoData}
-                </div>
-              {/if}
-              {#if funcionario.nomeacaoPortaria}
-                <div>
-                  <span class="font-semibold">Portaria:</span>
-                  {funcionario.nomeacaoPortaria}
-                </div>
-              {/if}
-              {#if funcionario.nomeacaoData}
-                <div>
-                  <span class="font-semibold">Data Nomeação:</span>
-                  {funcionario.nomeacaoData}
-                </div>
-              {/if}
-              {#if funcionario.nomeacaoDOE}
-                <div>
-                  <span class="font-semibold">DOE:</span>
-                  {funcionario.nomeacaoDOE}
-                </div>
-              {/if}
-              {#if funcionario.pertenceOrgaoPublico}
-                <div class="mt-2">
-                  <span class="font-semibold">Pertence Órgão Público:</span> Sim
-                </div>
-                {#if funcionario.orgaoOrigem}
-                  <div>
-                    <span class="font-semibold">Órgão Origem:</span>
-                    {funcionario.orgaoOrigem}
-                  </div>
-                {/if}
-              {/if}
-              {#if funcionario.aposentado && funcionario.aposentado !== "nao"}
-                <div>
-                  <span class="font-semibold">Aposentado:</span>
-                  {getLabelFromOptions(
-                    funcionario.aposentado,
-                    APOSENTADO_OPTIONS,
-                  )}
-                </div>
-              {/if}
-            </div>
-          </div>
-        </div>
-        <!-- Documentos Pessoais -->
-        <div class="card bg-base-100 shadow-xl">
-          <div class="card-body">
-            <h3 class="card-title text-lg border-b pb-2 mb-3">
-              Documentos Pessoais
-            </h3>
-            <div class="space-y-2 text-sm">
-              {#if funcionario.carteiraProfissionalNumero}
-                <div>
-                  <span class="font-semibold">Cart. Profissional:</span>
-                  {funcionario.carteiraProfissionalNumero}
-                  {#if funcionario.carteiraProfissionalSerie}
-                    - Série: {funcionario.carteiraProfissionalSerie}
-                  {/if}
-                </div>
-              {/if}
-              {#if funcionario.reservistaNumero}
-                <div>
-                  <span class="font-semibold">Reservista:</span>
-                  {funcionario.reservistaNumero}
-                  {#if funcionario.reservistaSerie}
-                    - Série: {funcionario.reservistaSerie}
-                  {/if}
-                </div>
-              {/if}
-              {#if funcionario.tituloEleitorNumero}
-                <div>
-                  <span class="font-semibold">Título Eleitor:</span>
-                  {funcionario.tituloEleitorNumero}
-                </div>
-                {#if funcionario.tituloEleitorZona || funcionario.tituloEleitorSecao}
-                  <div class="ml-4 text-xs">
-                    {#if funcionario.tituloEleitorZona}Zona: {funcionario.tituloEleitorZona}{/if}
-                    {#if funcionario.tituloEleitorSecao}
-                      - Seção: {funcionario.tituloEleitorSecao}{/if}
-                  </div>
-                {/if}
-              {/if}
-              {#if funcionario.pisNumero}
-                <div>
-                  <span class="font-semibold">PIS/PASEP:</span>
-                  {funcionario.pisNumero}
-                </div>
-              {/if}
-            </div>
-          </div>
-        </div>
+			<!-- Coluna 2: Cargo, Formação e Cursos -->
+			<div class="space-y-6">
+				<!-- Cargo e Vínculo -->
+				<div class="card bg-base-100 shadow-xl">
+					<div class="card-body">
+						<h3 class="card-title mb-3 border-b pb-2 text-lg">Cargo e Vínculo</h3>
+						<div class="space-y-2 text-sm">
+							<div>
+								<span class="font-semibold">Tipo:</span>
+								{funcionario.simboloTipo === 'cargo_comissionado'
+									? 'Cargo Comissionado'
+									: 'Função Gratificada'}
+							</div>
+							{#if simbolo}
+								<div>
+									<span class="font-semibold">Símbolo:</span>
+									{simbolo.nome}
+								</div>
+								<div class="text-base-content/70 text-xs">
+									{simbolo.descricao}
+								</div>
+							{/if}
+							{#if funcionario.descricaoCargo}
+								<div class="mt-2">
+									<span class="font-semibold">Descrição:</span>
+									{funcionario.descricaoCargo}
+								</div>
+							{/if}
+							{#if funcionario.admissaoData}
+								<div class="mt-2">
+									<span class="font-semibold">Data Admissão:</span>
+									{funcionario.admissaoData}
+								</div>
+							{/if}
+							{#if funcionario.nomeacaoPortaria}
+								<div>
+									<span class="font-semibold">Portaria:</span>
+									{funcionario.nomeacaoPortaria}
+								</div>
+							{/if}
+							{#if funcionario.nomeacaoData}
+								<div>
+									<span class="font-semibold">Data Nomeação:</span>
+									{funcionario.nomeacaoData}
+								</div>
+							{/if}
+							{#if funcionario.nomeacaoDOE}
+								<div>
+									<span class="font-semibold">DOE:</span>
+									{funcionario.nomeacaoDOE}
+								</div>
+							{/if}
+							{#if funcionario.pertenceOrgaoPublico}
+								<div class="mt-2">
+									<span class="font-semibold">Pertence Órgão Público:</span> Sim
+								</div>
+								{#if funcionario.orgaoOrigem}
+									<div>
+										<span class="font-semibold">Órgão Origem:</span>
+										{funcionario.orgaoOrigem}
+									</div>
+								{/if}
+							{/if}
+							{#if funcionario.aposentado && funcionario.aposentado !== 'nao'}
+								<div>
+									<span class="font-semibold">Aposentado:</span>
+									{getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)}
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+				<!-- Documentos Pessoais -->
+				<div class="card bg-base-100 shadow-xl">
+					<div class="card-body">
+						<h3 class="card-title mb-3 border-b pb-2 text-lg">Documentos Pessoais</h3>
+						<div class="space-y-2 text-sm">
+							{#if funcionario.carteiraProfissionalNumero}
+								<div>
+									<span class="font-semibold">Cart. Profissional:</span>
+									{funcionario.carteiraProfissionalNumero}
+									{#if funcionario.carteiraProfissionalSerie}
+										- Série: {funcionario.carteiraProfissionalSerie}
+									{/if}
+								</div>
+							{/if}
+							{#if funcionario.reservistaNumero}
+								<div>
+									<span class="font-semibold">Reservista:</span>
+									{funcionario.reservistaNumero}
+									{#if funcionario.reservistaSerie}
+										- Série: {funcionario.reservistaSerie}
+									{/if}
+								</div>
+							{/if}
+							{#if funcionario.tituloEleitorNumero}
+								<div>
+									<span class="font-semibold">Título Eleitor:</span>
+									{funcionario.tituloEleitorNumero}
+								</div>
+								{#if funcionario.tituloEleitorZona || funcionario.tituloEleitorSecao}
+									<div class="ml-4 text-xs">
+										{#if funcionario.tituloEleitorZona}Zona: {funcionario.tituloEleitorZona}{/if}
+										{#if funcionario.tituloEleitorSecao}
+											- Seção: {funcionario.tituloEleitorSecao}{/if}
+									</div>
+								{/if}
+							{/if}
+							{#if funcionario.pisNumero}
+								<div>
+									<span class="font-semibold">PIS/PASEP:</span>
+									{funcionario.pisNumero}
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
 
-        <!-- Formação -->
-        {#if funcionario.grauInstrucao || funcionario.formacao}
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h3 class="card-title text-lg border-b pb-2 mb-3">Formação</h3>
-              <div class="space-y-2 text-sm">
-                {#if funcionario.grauInstrucao}
-                  <div>
-                    <span class="font-semibold">Grau Instrução:</span>
-                    {getLabelFromOptions(
-                      funcionario.grauInstrucao,
-                      GRAU_INSTRUCAO_OPTIONS,
-                    )}
-                  </div>
-                {/if}
-                {#if funcionario.formacao}
-                  <div>
-                    <span class="font-semibold">Formação:</span>
-                    {funcionario.formacao}
-                  </div>
-                {/if}
-                {#if funcionario.formacaoRegistro}
-                  <div>
-                    <span class="font-semibold">Registro Nº:</span>
-                    {funcionario.formacaoRegistro}
-                  </div>
-                {/if}
-              </div>
-            </div>
-          </div>
-        {/if}
+				<!-- Formação -->
+				{#if funcionario.grauInstrucao || funcionario.formacao}
+					<div class="card bg-base-100 shadow-xl">
+						<div class="card-body">
+							<h3 class="card-title mb-3 border-b pb-2 text-lg">Formação</h3>
+							<div class="space-y-2 text-sm">
+								{#if funcionario.grauInstrucao}
+									<div>
+										<span class="font-semibold">Grau Instrução:</span>
+										{getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)}
+									</div>
+								{/if}
+								{#if funcionario.formacao}
+									<div>
+										<span class="font-semibold">Formação:</span>
+										{funcionario.formacao}
+									</div>
+								{/if}
+								{#if funcionario.formacaoRegistro}
+									<div>
+										<span class="font-semibold">Registro Nº:</span>
+										{funcionario.formacaoRegistro}
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+				{/if}
 
-        <!-- Cursos e Treinamentos -->
-        {#if cursos && cursos.length > 0}
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h3 class="card-title text-lg border-b pb-2 mb-3">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-                  />
-                </svg>
-                Cursos e Treinamentos
-              </h3>
-              <div class="space-y-3">
-                {#each cursos as curso}
-                  <div
-                    class="flex items-start gap-3 p-3 bg-base-200 rounded-lg"
-                  >
-                    <div class="flex-1">
-                      <p class="font-semibold text-sm">{curso.descricao}</p>
-                      <p class="text-xs text-base-content/70 mt-1">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-3 w-3 inline mr-1"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                          />
-                        </svg>
-                        {curso.data}
-                      </p>
-                    </div>
-                    {#if curso.certificadoUrl}
-                      <a
-                        href={curso.certificadoUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="btn btn-xs btn-primary gap-1"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-3 w-3"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                          />
-                        </svg>
-                        Certificado
-                      </a>
-                    {/if}
-                  </div>
-                {/each}
-              </div>
-            </div>
-          </div>
-        {/if}
+				<!-- Cursos e Treinamentos -->
+				{#if cursos && cursos.length > 0}
+					<div class="card bg-base-100 shadow-xl">
+						<div class="card-body">
+							<h3 class="card-title mb-3 border-b pb-2 text-lg">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+									/>
+								</svg>
+								Cursos e Treinamentos
+							</h3>
+							<div class="space-y-3">
+								{#each cursos as curso}
+									<div class="bg-base-200 flex items-start gap-3 rounded-lg p-3">
+										<div class="flex-1">
+											<p class="text-sm font-semibold">{curso.descricao}</p>
+											<p class="text-base-content/70 mt-1 text-xs">
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="mr-1 inline h-3 w-3"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+													/>
+												</svg>
+												{curso.data}
+											</p>
+										</div>
+										{#if curso.certificadoUrl}
+											<a
+												href={curso.certificadoUrl}
+												target="_blank"
+												rel="noopener noreferrer"
+												class="btn btn-xs btn-primary gap-1"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-3 w-3"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+													/>
+												</svg>
+												Certificado
+											</a>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						</div>
+					</div>
+				{/if}
 
-        <!-- Saúde -->
-        {#if funcionario.grupoSanguineo || funcionario.fatorRH}
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h3 class="card-title text-lg border-b pb-2 mb-3">Saúde</h3>
-              <div class="space-y-2 text-sm">
-                {#if funcionario.grupoSanguineo}
-                  <div>
-                    <span class="font-semibold">Grupo Sanguíneo:</span>
-                    {funcionario.grupoSanguineo}
-                  </div>
-                {/if}
-                {#if funcionario.fatorRH}
-                  <div>
-                    <span class="font-semibold">Fator RH:</span>
-                    {getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)}
-                  </div>
-                {/if}
-              </div>
-            </div>
-          </div>
-        {/if}
+				<!-- Saúde -->
+				{#if funcionario.grupoSanguineo || funcionario.fatorRH}
+					<div class="card bg-base-100 shadow-xl">
+						<div class="card-body">
+							<h3 class="card-title mb-3 border-b pb-2 text-lg">Saúde</h3>
+							<div class="space-y-2 text-sm">
+								{#if funcionario.grupoSanguineo}
+									<div>
+										<span class="font-semibold">Grupo Sanguíneo:</span>
+										{funcionario.grupoSanguineo}
+									</div>
+								{/if}
+								{#if funcionario.fatorRH}
+									<div>
+										<span class="font-semibold">Fator RH:</span>
+										{getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)}
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+				{/if}
 
-        <!-- Contato -->
-        <div class="card bg-base-100 shadow-xl">
-          <div class="card-body">
-            <h3 class="card-title text-lg border-b pb-2 mb-3">Contato</h3>
-            <div class="space-y-2 text-sm">
-              <div>
-                <span class="font-semibold">E-mail:</span>
-                {funcionario.email}
-              </div>
-              <div>
-                <span class="font-semibold">Telefone:</span>
-                {maskPhone(funcionario.telefone)}
-              </div>
-            </div>
-          </div>
-        </div>
+				<!-- Contato -->
+				<div class="card bg-base-100 shadow-xl">
+					<div class="card-body">
+						<h3 class="card-title mb-3 border-b pb-2 text-lg">Contato</h3>
+						<div class="space-y-2 text-sm">
+							<div>
+								<span class="font-semibold">E-mail:</span>
+								{funcionario.email}
+							</div>
+							<div>
+								<span class="font-semibold">Telefone:</span>
+								{maskPhone(funcionario.telefone)}
+							</div>
+						</div>
+					</div>
+				</div>
 
-        <!-- Endereço -->
-        <div class="card bg-base-100 shadow-xl">
-          <div class="card-body">
-            <h3 class="card-title text-lg border-b pb-2 mb-3">Endereço</h3>
-            <div class="space-y-2 text-sm">
-              <div>{funcionario.endereco}</div>
-              <div>{funcionario.cidade} - {funcionario.uf}</div>
-              <div>
-                <span class="font-semibold">CEP:</span>
-                {maskCEP(funcionario.cep)}
-              </div>
-            </div>
-          </div>
-        </div>
+				<!-- Endereço -->
+				<div class="card bg-base-100 shadow-xl">
+					<div class="card-body">
+						<h3 class="card-title mb-3 border-b pb-2 text-lg">Endereço</h3>
+						<div class="space-y-2 text-sm">
+							<div>{funcionario.endereco}</div>
+							<div>{funcionario.cidade} - {funcionario.uf}</div>
+							<div>
+								<span class="font-semibold">CEP:</span>
+								{maskCEP(funcionario.cep)}
+							</div>
+						</div>
+					</div>
+				</div>
 
-        <!-- Dados Bancários -->
-        {#if funcionario.contaBradescoNumero}
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h3 class="card-title text-lg border-b pb-2 mb-3">
-                Dados Bancários - Bradesco
-              </h3>
-              <div class="space-y-2 text-sm">
-                <div>
-                  <span class="font-semibold">Conta:</span>
-                  {funcionario.contaBradescoNumero}
-                  {#if funcionario.contaBradescoDV}-{funcionario.contaBradescoDV}{/if}
-                </div>
-                {#if funcionario.contaBradescoAgencia}
-                  <div>
-                    <span class="font-semibold">Agência:</span>
-                    {funcionario.contaBradescoAgencia}
-                  </div>
-                {/if}
-              </div>
-            </div>
-          </div>
-        {/if}
-      </div>
-    </div>
+				<!-- Dados Bancários -->
+				{#if funcionario.contaBradescoNumero}
+					<div class="card bg-base-100 shadow-xl">
+						<div class="card-body">
+							<h3 class="card-title mb-3 border-b pb-2 text-lg">Dados Bancários - Bradesco</h3>
+							<div class="space-y-2 text-sm">
+								<div>
+									<span class="font-semibold">Conta:</span>
+									{funcionario.contaBradescoNumero}
+									{#if funcionario.contaBradescoDV}-{funcionario.contaBradescoDV}{/if}
+								</div>
+								{#if funcionario.contaBradescoAgencia}
+									<div>
+										<span class="font-semibold">Agência:</span>
+										{funcionario.contaBradescoAgencia}
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		</div>
 
-    <!-- Documentos Anexados -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h3 class="card-title text-xl border-b pb-3 mb-4">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-          Documentos Anexados
-        </h3>
+		<!-- Documentos Anexados -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h3 class="card-title mb-4 border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+					Documentos Anexados
+				</h3>
 
-        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-          {#each documentos as doc}
-            {@const temDocumento = documentosUrls[doc.campo]}
-            <div
-              class="card bg-base-200 shadow-sm border-2"
-              class:border-success={temDocumento}
-              class:border-base-300={!temDocumento}
-            >
-              <div class="card-body p-3">
-                <div class="flex items-start gap-2">
-                  <div
-                    class={`w-8 h-8 rounded flex items-center justify-center shrink-0 ${temDocumento ? "bg-success/20" : "bg-base-300"}`}
-                  >
-                    {#if temDocumento}
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-4 w-4 text-success"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M5 13l4 4L19 7"
-                        />
-                      </svg>
-                    {:else}
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-4 w-4 text-base-content/40"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M12 4v16m8-8H4"
-                        />
-                      </svg>
-                    {/if}
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <p class="text-xs font-medium line-clamp-2">{doc.nome}</p>
-                    <p class="text-xs text-base-content/60 mt-1">
-                      {temDocumento ? "Enviado" : "Pendente"}
-                    </p>
-                    {#if temDocumento}
-                      <button
-                        class="btn btn-xs btn-ghost mt-2 gap-1"
-                        onclick={() =>
-                          downloadDocumento(
-                            documentosUrls[doc.campo] || "",
-                            doc.nome,
-                          )}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-3 w-3"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                          />
-                        </svg>
-                        Baixar
-                      </button>
-                    {/if}
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/each}
-        </div>
+				<div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
+					{#each documentos as doc}
+						{@const temDocumento = documentosUrls[doc.campo]}
+						<div
+							class="card bg-base-200 border-2 shadow-sm"
+							class:border-success={temDocumento}
+							class:border-base-300={!temDocumento}
+						>
+							<div class="card-body p-3">
+								<div class="flex items-start gap-2">
+									<div
+										class={`flex h-8 w-8 shrink-0 items-center justify-center rounded ${temDocumento ? 'bg-success/20' : 'bg-base-300'}`}
+									>
+										{#if temDocumento}
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="text-success h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M5 13l4 4L19 7"
+												/>
+											</svg>
+										{:else}
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="text-base-content/40 h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M12 4v16m8-8H4"
+												/>
+											</svg>
+										{/if}
+									</div>
+									<div class="min-w-0 flex-1">
+										<p class="line-clamp-2 text-xs font-medium">{doc.nome}</p>
+										<p class="text-base-content/60 mt-1 text-xs">
+											{temDocumento ? 'Enviado' : 'Pendente'}
+										</p>
+										{#if temDocumento}
+											<button
+												class="btn btn-xs btn-ghost mt-2 gap-1"
+												onclick={() => downloadDocumento(documentosUrls[doc.campo] || '', doc.nome)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-3 w-3"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+													/>
+												</svg>
+												Baixar
+											</button>
+										{/if}
+									</div>
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
 
-        <div class="mt-4 text-center">
-          <button
-            class="btn btn-primary btn-sm gap-2"
-            onclick={() =>
-              goto(
-                `/recursos-humanos/funcionarios/${funcionarioId}/documentos`,
-              )}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              />
-            </svg>
-            Gerenciar Documentos
-          </button>
-        </div>
-      </div>
-    </div>
-  </main>
+				<div class="mt-4 text-center">
+					<button
+						class="btn btn-primary btn-sm gap-2"
+						onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}/documentos`)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+							/>
+						</svg>
+						Gerenciar Documentos
+					</button>
+				</div>
+			</div>
+		</div>
+	</main>
 
-  <!-- Modal de Impressão -->
-  {#if showPrintModal}
-    <PrintModal {funcionario} onClose={() => (showPrintModal = false)} />
-  {/if}
+	<!-- Modal de Impressão -->
+	{#if showPrintModal}
+		<PrintModal {funcionario} onClose={() => (showPrintModal = false)} />
+	{/if}
 
-  <!-- Modal de Impressão Dados Financeiros -->
-  {#if showPrintFinanceiro && simbolo}
-    <dialog class="modal modal-open">
-      <div class="modal-box max-w-2xl">
-        <h3 class="font-bold text-2xl mb-6 border-b pb-3">
-          Dados Financeiros - {funcionario.nome}
-        </h3>
+	<!-- Modal de Impressão Dados Financeiros -->
+	{#if showPrintFinanceiro && simbolo}
+		<dialog class="modal modal-open">
+			<div class="modal-box max-w-2xl">
+				<h3 class="mb-6 border-b pb-3 text-2xl font-bold">
+					Dados Financeiros - {funcionario.nome}
+				</h3>
 
-        <div class="space-y-4 print:space-y-2" id="dados-financeiros-print">
-          <!-- Informações Básicas -->
-          <div class="grid grid-cols-2 gap-4">
-            <div>
-              <p class="text-sm font-semibold text-base-content/70">Nome</p>
-              <p class="text-lg">{funcionario.nome}</p>
-            </div>
-            <div>
-              <p class="text-sm font-semibold text-base-content/70">
-                Matrícula
-              </p>
-              <p class="text-lg">{funcionario.matricula || "N/A"}</p>
-            </div>
-            <div>
-              <p class="text-sm font-semibold text-base-content/70">CPF</p>
-              <p class="text-lg">{maskCPF(funcionario.cpf)}</p>
-            </div>
-            <div>
-              <p class="text-sm font-semibold text-base-content/70">
-                Data Admissão
-              </p>
-              <p class="text-lg">{funcionario.admissaoData || "N/A"}</p>
-            </div>
-          </div>
+				<div class="space-y-4 print:space-y-2" id="dados-financeiros-print">
+					<!-- Informações Básicas -->
+					<div class="grid grid-cols-2 gap-4">
+						<div>
+							<p class="text-base-content/70 text-sm font-semibold">Nome</p>
+							<p class="text-lg">{funcionario.nome}</p>
+						</div>
+						<div>
+							<p class="text-base-content/70 text-sm font-semibold">Matrícula</p>
+							<p class="text-lg">{funcionario.matricula || 'N/A'}</p>
+						</div>
+						<div>
+							<p class="text-base-content/70 text-sm font-semibold">CPF</p>
+							<p class="text-lg">{maskCPF(funcionario.cpf)}</p>
+						</div>
+						<div>
+							<p class="text-base-content/70 text-sm font-semibold">Data Admissão</p>
+							<p class="text-lg">{funcionario.admissaoData || 'N/A'}</p>
+						</div>
+					</div>
 
-          <div class="divider"></div>
+					<div class="divider"></div>
 
-          <!-- Dados Financeiros -->
-          <div>
-            <h4 class="font-bold text-lg mb-3">Remuneração</h4>
-            <div class="space-y-2">
-              <div class="flex justify-between p-2 bg-base-200 rounded">
-                <span class="font-semibold">Símbolo:</span>
-                <span>{simbolo.nome}</span>
-              </div>
-              <div class="flex justify-between p-2 bg-base-200 rounded">
-                <span class="font-semibold">Tipo:</span>
-                <span
-                  >{simbolo.tipo === "cargo_comissionado"
-                    ? "Cargo Comissionado"
-                    : "Função Gratificada"}</span
-                >
-              </div>
-              {#if funcionario.simboloTipo === "cargo_comissionado"}
-                <div class="flex justify-between p-2 bg-info/10 rounded">
-                  <span class="font-semibold">Vencimento:</span>
-                  <span class="text-info font-bold">R$ {simbolo.vencValor}</span
-                  >
-                </div>
-                <div class="flex justify-between p-2 bg-warning/10 rounded">
-                  <span class="font-semibold">Representação:</span>
-                  <span class="text-warning font-bold"
-                    >R$ {simbolo.repValor}</span
-                  >
-                </div>
-              {/if}
-              <div
-                class="flex justify-between p-3 bg-success/20 rounded border-2 border-success/40"
-              >
-                <span class="font-bold text-lg">TOTAL:</span>
-                <span class="text-success font-bold text-2xl"
-                  >R$ {simbolo.valor}</span
-                >
-              </div>
-            </div>
-          </div>
+					<!-- Dados Financeiros -->
+					<div>
+						<h4 class="mb-3 text-lg font-bold">Remuneração</h4>
+						<div class="space-y-2">
+							<div class="bg-base-200 flex justify-between rounded p-2">
+								<span class="font-semibold">Símbolo:</span>
+								<span>{simbolo.nome}</span>
+							</div>
+							<div class="bg-base-200 flex justify-between rounded p-2">
+								<span class="font-semibold">Tipo:</span>
+								<span
+									>{simbolo.tipo === 'cargo_comissionado'
+										? 'Cargo Comissionado'
+										: 'Função Gratificada'}</span
+								>
+							</div>
+							{#if funcionario.simboloTipo === 'cargo_comissionado'}
+								<div class="bg-info/10 flex justify-between rounded p-2">
+									<span class="font-semibold">Vencimento:</span>
+									<span class="text-info font-bold">R$ {simbolo.vencValor}</span>
+								</div>
+								<div class="bg-warning/10 flex justify-between rounded p-2">
+									<span class="font-semibold">Representação:</span>
+									<span class="text-warning font-bold">R$ {simbolo.repValor}</span>
+								</div>
+							{/if}
+							<div
+								class="bg-success/20 border-success/40 flex justify-between rounded border-2 p-3"
+							>
+								<span class="text-lg font-bold">TOTAL:</span>
+								<span class="text-success text-2xl font-bold">R$ {simbolo.valor}</span>
+							</div>
+						</div>
+					</div>
 
-          {#if funcionario.contaBradescoNumero}
-            <div class="divider"></div>
-            <div>
-              <h4 class="font-bold text-lg mb-3">Dados Bancários</h4>
-              <div class="space-y-2">
-                <div class="flex justify-between p-2 bg-base-200 rounded">
-                  <span class="font-semibold">Banco:</span>
-                  <span>Bradesco</span>
-                </div>
-                <div class="flex justify-between p-2 bg-base-200 rounded">
-                  <span class="font-semibold">Agência:</span>
-                  <span>{funcionario.contaBradescoAgencia || "N/A"}</span>
-                </div>
-                <div class="flex justify-between p-2 bg-base-200 rounded">
-                  <span class="font-semibold">Conta:</span>
-                  <span
-                    >{funcionario.contaBradescoNumero}{funcionario.contaBradescoDV
-                      ? `-${funcionario.contaBradescoDV}`
-                      : ""}</span
-                  >
-                </div>
-              </div>
-            </div>
-          {/if}
-        </div>
+					{#if funcionario.contaBradescoNumero}
+						<div class="divider"></div>
+						<div>
+							<h4 class="mb-3 text-lg font-bold">Dados Bancários</h4>
+							<div class="space-y-2">
+								<div class="bg-base-200 flex justify-between rounded p-2">
+									<span class="font-semibold">Banco:</span>
+									<span>Bradesco</span>
+								</div>
+								<div class="bg-base-200 flex justify-between rounded p-2">
+									<span class="font-semibold">Agência:</span>
+									<span>{funcionario.contaBradescoAgencia || 'N/A'}</span>
+								</div>
+								<div class="bg-base-200 flex justify-between rounded p-2">
+									<span class="font-semibold">Conta:</span>
+									<span
+										>{funcionario.contaBradescoNumero}{funcionario.contaBradescoDV
+											? `-${funcionario.contaBradescoDV}`
+											: ''}</span
+									>
+								</div>
+							</div>
+						</div>
+					{/if}
+				</div>
 
-        <div class="modal-action">
-          <button class="btn btn-primary gap-2" onclick={() => window.print()}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
-              />
-            </svg>
-            Imprimir
-          </button>
-          <button
-            class="btn btn-ghost"
-            onclick={() => (showPrintFinanceiro = false)}>Fechar</button
-          >
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop">
-        <button
-          type="button"
-          onclick={() => (showPrintFinanceiro = false)}
-          aria-label="Fechar modal">Fechar</button
-        >
-      </form>
-    </dialog>
-  {/if}
+				<div class="modal-action">
+					<button class="btn btn-primary gap-2" onclick={() => window.print()}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
+							/>
+						</svg>
+						Imprimir
+					</button>
+					<button class="btn" onclick={() => (showPrintFinanceiro = false)}>Fechar</button>
+				</div>
+			</div>
+			<form method="dialog" class="modal-backdrop">
+				<button
+					type="button"
+					onclick={() => (showPrintFinanceiro = false)}
+					aria-label="Fechar modal">Fechar</button
+				>
+			</form>
+		</dialog>
+	{/if}
 {/if}
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/documentos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/documentos/+page.svelte
index 5e02825..f96c08b 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/documentos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/documentos/+page.svelte
@@ -1,277 +1,358 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { page } from "$app/stores";
-  import { goto } from "$app/navigation";
-  import FileUpload from "$lib/components/FileUpload.svelte";
-  import ModelosDeclaracoes from "$lib/components/ModelosDeclaracoes.svelte";
-  import { documentos, categoriasDocumentos, getDocumentosByCategoria } from "$lib/utils/documentos";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import FileUpload from '$lib/components/FileUpload.svelte';
+	import ModelosDeclaracoes from '$lib/components/ModelosDeclaracoes.svelte';
+	import {
+		documentos,
+		categoriasDocumentos,
+		getDocumentosByCategoria
+	} from '$lib/utils/documentos';
 
-  const client = useConvexClient();
-  
-  let funcionarioId = $derived($page.params.funcionarioId as string);
+	const client = useConvexClient();
 
-  let funcionario = $state<any>(null);
-  let documentosStorage = $state<Record<string, string | undefined>>({});
-  let loading = $state(true);
-  let filtro = $state<string>("todos"); // todos, enviados, pendentes
+	let funcionarioId = $derived($page.params.funcionarioId as string);
 
-  async function load() {
-    try {
-      loading = true;
-      
-      // Carregar dados do funcionário
-      const data = await client.query(api.funcionarios.getById, { 
-        id: funcionarioId as any 
-      });
-      
-      if (!data) {
-        goto("/recursos-humanos/funcionarios");
-        return;
-      }
-      
-      funcionario = data;
-      
-      // Mapear storage IDs dos documentos
-      documentos.forEach(doc => {
-        if ((data as any)[doc.campo]) {
-          documentosStorage[doc.campo] = (data as any)[doc.campo];
-        }
-      });
-    } catch (err) {
-      console.error("Erro ao carregar:", err);
-      goto("/recursos-humanos/funcionarios");
-    } finally {
-      loading = false;
-    }
-  }
+	let funcionario = $state<any>(null);
+	let documentosStorage = $state<Record<string, string | undefined>>({});
+	let loading = $state(true);
+	let filtro = $state<string>('todos'); // todos, enviados, pendentes
 
-  async function handleDocumentoUpload(campo: string, file: File) {
-    try {
-      // Gerar URL de upload
-      const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-      
-      // Fazer upload do arquivo
-      const result = await fetch(uploadUrl, {
-        method: "POST",
-        headers: { "Content-Type": file.type },
-        body: file,
-      });
-      
-      const { storageId } = await result.json();
-      
-      // Atualizar documento no funcionário
-      await client.mutation(api.documentos.updateDocumento, {
-        funcionarioId: funcionarioId as any,
-        campo,
-        storageId: storageId as any,
-      });
-      
-      // Atualizar localmente
-      documentosStorage[campo] = storageId;
-      
-      // Recarregar
-      await load();
-    } catch (err: any) {
-      throw new Error(err?.message || "Erro ao fazer upload");
-    }
-  }
+	async function load() {
+		try {
+			loading = true;
 
-  async function handleDocumentoRemove(campo: string) {
-    try {
-      // Atualizar documento no funcionário (set to null)
-      await client.mutation(api.documentos.updateDocumento, {
-        funcionarioId: funcionarioId as any,
-        campo,
-        storageId: null,
-      });
-      
-      // Atualizar localmente
-      documentosStorage[campo] = undefined;
-      
-      // Recarregar
-      await load();
-    } catch (err: any) {
-      alert("Erro ao remover documento: " + (err?.message || ""));
-    }
-  }
+			// Carregar dados do funcionário
+			const data = await client.query(api.funcionarios.getById, {
+				id: funcionarioId as any
+			});
 
-  function documentosFiltrados() {
-    return documentos.filter(doc => {
-      const temDocumento = !!documentosStorage[doc.campo];
-      if (filtro === "enviados") return temDocumento;
-      if (filtro === "pendentes") return !temDocumento;
-      return true; // todos
-    });
-  }
+			if (!data) {
+				goto('/recursos-humanos/funcionarios');
+				return;
+			}
 
-  function contarDocumentos() {
-    const total = documentos.length;
-    const enviados = documentos.filter(doc => !!documentosStorage[doc.campo]).length;
-    const pendentes = total - enviados;
-    return { total, enviados, pendentes };
-  }
+			funcionario = data;
 
-  load();
+			// Mapear storage IDs dos documentos
+			documentos.forEach((doc) => {
+				if ((data as any)[doc.campo]) {
+					documentosStorage[doc.campo] = (data as any)[doc.campo];
+				}
+			});
+		} catch (err) {
+			console.error('Erro ao carregar:', err);
+			goto('/recursos-humanos/funcionarios');
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function handleDocumentoUpload(campo: string, file: File) {
+		try {
+			// Gerar URL de upload
+			const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+
+			// Fazer upload do arquivo
+			const result = await fetch(uploadUrl, {
+				method: 'POST',
+				headers: { 'Content-Type': file.type },
+				body: file
+			});
+
+			const { storageId } = await result.json();
+
+			// Atualizar documento no funcionário
+			await client.mutation(api.documentos.updateDocumento, {
+				funcionarioId: funcionarioId as any,
+				campo,
+				storageId: storageId as any
+			});
+
+			// Atualizar localmente
+			documentosStorage[campo] = storageId;
+
+			// Recarregar
+			await load();
+		} catch (err: any) {
+			throw new Error(err?.message || 'Erro ao fazer upload');
+		}
+	}
+
+	async function handleDocumentoRemove(campo: string) {
+		try {
+			// Atualizar documento no funcionário (set to null)
+			await client.mutation(api.documentos.updateDocumento, {
+				funcionarioId: funcionarioId as any,
+				campo,
+				storageId: null
+			});
+
+			// Atualizar localmente
+			documentosStorage[campo] = undefined;
+
+			// Recarregar
+			await load();
+		} catch (err: any) {
+			alert('Erro ao remover documento: ' + (err?.message || ''));
+		}
+	}
+
+	function documentosFiltrados() {
+		return documentos.filter((doc) => {
+			const temDocumento = !!documentosStorage[doc.campo];
+			if (filtro === 'enviados') return temDocumento;
+			if (filtro === 'pendentes') return !temDocumento;
+			return true; // todos
+		});
+	}
+
+	function contarDocumentos() {
+		const total = documentos.length;
+		const enviados = documentos.filter((doc) => !!documentosStorage[doc.campo]).length;
+		const pendentes = total - enviados;
+		return { total, enviados, pendentes };
+	}
+
+	load();
 </script>
 
 {#if loading}
-  <div class="flex items-center justify-center min-h-screen">
-    <span class="loading loading-spinner loading-lg"></span>
-  </div>
+	<div class="flex min-h-screen items-center justify-center">
+		<span class="loading loading-spinner loading-lg"></span>
+	</div>
 {:else if funcionario}
-  <main class="container mx-auto px-4 py-4 max-w-7xl">
-    <!-- Breadcrumb -->
-    <div class="text-sm breadcrumbs mb-4">
-      <ul>
-        <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-        <li><a href="/recursos-humanos/funcionarios" class="text-primary hover:underline">Funcionários</a></li>
-        <li><a href={`/recursos-humanos/funcionarios/${funcionarioId}`} class="text-primary hover:underline">{funcionario.nome}</a></li>
-        <li>Documentos</li>
-      </ul>
-    </div>
+	<main class="container mx-auto max-w-7xl px-4 py-4">
+		<!-- Breadcrumb -->
+		<div class="breadcrumbs mb-4 text-sm">
+			<ul>
+				<li>
+					<a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a>
+				</li>
+				<li>
+					<a href="/recursos-humanos/funcionarios" class="text-primary hover:underline"
+						>Funcionários</a
+					>
+				</li>
+				<li>
+					<a
+						href={`/recursos-humanos/funcionarios/${funcionarioId}`}
+						class="text-primary hover:underline">{funcionario.nome}</a
+					>
+				</li>
+				<li>Documentos</li>
+			</ul>
+		</div>
 
-    <!-- Cabeçalho -->
-    <div class="mb-6">
-      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-        <div class="flex items-center gap-4">
-          <div class="p-3 bg-purple-500/20 rounded-xl">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-          </div>
-          <div>
-            <h1 class="text-3xl font-bold text-primary">Gerenciar Documentos</h1>
-            <p class="text-base-content/70">{funcionario.nome} - Matrícula: {funcionario.matricula}</p>
-          </div>
-        </div>
+		<!-- Cabeçalho -->
+		<div class="mb-6">
+			<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+				<div class="flex items-center gap-4">
+					<div class="rounded-xl bg-purple-500/20 p-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8 text-purple-600"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h1 class="text-primary text-3xl font-bold">Gerenciar Documentos</h1>
+						<p class="text-base-content/70">
+							{funcionario.nome} - Matrícula: {funcionario.matricula}
+						</p>
+					</div>
+				</div>
 
-        <button 
-          class="btn btn-ghost gap-2"
-          onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}`)}
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-          </svg>
-          Voltar aos Detalhes
-        </button>
-      </div>
-    </div>
+				<button
+					class="btn gap-2"
+					onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}`)}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 19l-7-7m0 0l7-7m-7 7h18"
+						/>
+					</svg>
+					Voltar aos Detalhes
+				</button>
+			</div>
+		</div>
 
-    <!-- Estatísticas -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-      <div class="stats shadow">
-        <div class="stat">
-          <div class="stat-figure text-primary">
-            <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-          </div>
-          <div class="stat-title">Total de Documentos</div>
-          <div class="stat-value text-primary">{contarDocumentos().total}</div>
-        </div>
-      </div>
+		<!-- Estatísticas -->
+		<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+			<div class="stats shadow">
+				<div class="stat">
+					<div class="stat-figure text-primary">
+						<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Total de Documentos</div>
+					<div class="stat-value text-primary">{contarDocumentos().total}</div>
+				</div>
+			</div>
 
-      <div class="stats shadow">
-        <div class="stat">
-          <div class="stat-figure text-success">
-            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <div class="stat-title">Documentos Enviados</div>
-          <div class="stat-value text-success">{contarDocumentos().enviados}</div>
-        </div>
-      </div>
+			<div class="stats shadow">
+				<div class="stat">
+					<div class="stat-figure text-success">
+						<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Documentos Enviados</div>
+					<div class="stat-value text-success">{contarDocumentos().enviados}</div>
+				</div>
+			</div>
 
-      <div class="stats shadow">
-        <div class="stat">
-          <div class="stat-figure text-warning">
-            <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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <div class="stat-title">Documentos Pendentes</div>
-          <div class="stat-value text-warning">{contarDocumentos().pendentes}</div>
-        </div>
-      </div>
-    </div>
+			<div class="stats shadow">
+				<div class="stat">
+					<div class="stat-figure text-warning">
+						<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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Documentos Pendentes</div>
+					<div class="stat-value text-warning">{contarDocumentos().pendentes}</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Modelos de Declarações -->
-    <div class="mb-6">
-      <ModelosDeclaracoes funcionario={funcionario} showPreencherButton={true} />
-    </div>
+		<!-- Modelos de Declarações -->
+		<div class="mb-6">
+			<ModelosDeclaracoes {funcionario} showPreencherButton={true} />
+		</div>
 
-    <!-- Filtros -->
-    <div class="card bg-base-100 shadow-xl mb-6">
-      <div class="card-body">
-        <div class="flex flex-wrap gap-2">
-          <button 
-            class="btn btn-sm"
-            class:btn-primary={filtro === "todos"}
-            onclick={() => filtro = "todos"}
-          >
-            Todos ({contarDocumentos().total})
-          </button>
-          <button 
-            class="btn btn-sm"
-            class:btn-success={filtro === "enviados"}
-            onclick={() => filtro = "enviados"}
-          >
-            Enviados ({contarDocumentos().enviados})
-          </button>
-          <button 
-            class="btn btn-sm"
-            class:btn-warning={filtro === "pendentes"}
-            onclick={() => filtro = "pendentes"}
-          >
-            Pendentes ({contarDocumentos().pendentes})
-          </button>
-        </div>
-      </div>
-    </div>
+		<!-- Filtros -->
+		<div class="card bg-base-100 mb-6 shadow-xl">
+			<div class="card-body">
+				<div class="flex flex-wrap gap-2">
+					<button
+						class="btn btn-sm"
+						class:btn-primary={filtro === 'todos'}
+						onclick={() => (filtro = 'todos')}
+					>
+						Todos ({contarDocumentos().total})
+					</button>
+					<button
+						class="btn btn-sm"
+						class:btn-success={filtro === 'enviados'}
+						onclick={() => (filtro = 'enviados')}
+					>
+						Enviados ({contarDocumentos().enviados})
+					</button>
+					<button
+						class="btn btn-sm"
+						class:btn-warning={filtro === 'pendentes'}
+						onclick={() => (filtro = 'pendentes')}
+					>
+						Pendentes ({contarDocumentos().pendentes})
+					</button>
+				</div>
+			</div>
+		</div>
 
-    <!-- Documentos por Categoria -->
-    {#each categoriasDocumentos as categoria}
-      {@const docsCategoria = getDocumentosByCategoria(categoria).filter(doc => {
-        const temDocumento = !!documentosStorage[doc.campo];
-        if (filtro === "enviados") return temDocumento;
-        if (filtro === "pendentes") return !temDocumento;
-        return true;
-      })}
-      
-      {#if docsCategoria.length > 0}
-        <div class="card bg-base-100 shadow-xl mb-6">
-          <div class="card-body">
-            <h2 class="card-title text-xl border-b pb-3 mb-4">
-              {categoria}
-              <div class="badge badge-primary ml-2">{docsCategoria.length}</div>
-            </h2>
+		<!-- Documentos por Categoria -->
+		{#each categoriasDocumentos as categoria}
+			{@const docsCategoria = getDocumentosByCategoria(categoria).filter((doc) => {
+				const temDocumento = !!documentosStorage[doc.campo];
+				if (filtro === 'enviados') return temDocumento;
+				if (filtro === 'pendentes') return !temDocumento;
+				return true;
+			})}
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {#each docsCategoria as doc}
-                <FileUpload
-                  label={doc.nome}
-                  helpUrl={doc.helpUrl}
-                  value={documentosStorage[doc.campo]}
-                  onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
-                  onRemove={() => handleDocumentoRemove(doc.campo)}
-                />
-              {/each}
-            </div>
-          </div>
-        </div>
-      {/if}
-    {/each}
+			{#if docsCategoria.length > 0}
+				<div class="card bg-base-100 mb-6 shadow-xl">
+					<div class="card-body">
+						<h2 class="card-title mb-4 border-b pb-3 text-xl">
+							{categoria}
+							<div class="badge badge-primary ml-2">{docsCategoria.length}</div>
+						</h2>
 
-    {#if documentosFiltrados().length === 0}
-      <div class="alert">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <span>Nenhum documento encontrado com o filtro selecionado.</span>
-      </div>
-    {/if}
-  </main>
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							{#each docsCategoria as doc}
+								<FileUpload
+									label={doc.nome}
+									helpUrl={doc.helpUrl}
+									value={documentosStorage[doc.campo]}
+									onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
+									onRemove={() => handleDocumentoRemove(doc.campo)}
+								/>
+							{/each}
+						</div>
+					</div>
+				</div>
+			{/if}
+		{/each}
+
+		{#if documentosFiltrados().length === 0}
+			<div class="alert">
+				<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<span>Nenhum documento encontrado com o filtro selecionado.</span>
+			</div>
+		{/if}
+	</main>
 {/if}
-
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
index 196dc19..ca420c2 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
@@ -1,1527 +1,1728 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-  import { page } from "$app/stores";
-  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
-  import FileUpload from "$lib/components/FileUpload.svelte";
-  import { 
-    maskCPF, maskCEP, maskPhone, maskDate, onlyDigits,
-    validateCPF, validateDate 
-  } from "$lib/utils/masks";
-  import { 
-    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
-    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS, UFS_BRASIL
-  } from "$lib/utils/constants";
-  import { documentos, categoriasDocumentos, getDocumentosByCategoria } from "$lib/utils/documentos";
-  import ModelosDeclaracoes from "$lib/components/ModelosDeclaracoes.svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
+	import FileUpload from '$lib/components/FileUpload.svelte';
+	import {
+		maskCPF,
+		maskCEP,
+		maskPhone,
+		maskDate,
+		onlyDigits,
+		validateCPF,
+		validateDate
+	} from '$lib/utils/masks';
+	import {
+		SEXO_OPTIONS,
+		ESTADO_CIVIL_OPTIONS,
+		GRAU_INSTRUCAO_OPTIONS,
+		GRUPO_SANGUINEO_OPTIONS,
+		FATOR_RH_OPTIONS,
+		APOSENTADO_OPTIONS,
+		UFS_BRASIL
+	} from '$lib/utils/constants';
+	import {
+		documentos,
+		categoriasDocumentos,
+		getDocumentosByCategoria
+	} from '$lib/utils/documentos';
+	import ModelosDeclaracoes from '$lib/components/ModelosDeclaracoes.svelte';
 
-  const client = useConvexClient();
-  
-  let funcionarioId = $derived($page.params.funcionarioId as string);
+	const client = useConvexClient();
 
-  let simbolos: Array<{
-    _id: string;
-    nome: string;
-    tipo: SimboloTipo;
-    descricao: string;
-  }> = $state([]);
+	let funcionarioId = $derived($page.params.funcionarioId as string);
 
-  let tipo = $state<SimboloTipo>("cargo_comissionado");
-  let loading = $state(false);
-  let loadingData = $state(true);
-  let notice = $state<{ kind: "success" | "error"; text: string } | null>(null);
-  
-  // Campos obrigatórios
-  let nome = $state("");
-  let matricula = $state("");
-  let cpf = $state("");
-  let rg = $state("");
-  let nascimento = $state("");
-  let email = $state("");
-  let telefone = $state("");
-  let endereco = $state("");
-  let cep = $state("");
-  let cidade = $state("");
-  let uf = $state("");
-  let simboloId = $state("");
-  let admissaoData = $state("");
-  
-  // Dados Pessoais Adicionais
-  let nomePai = $state("");
-  let nomeMae = $state("");
-  let naturalidade = $state("");
-  let naturalidadeUF = $state("");
-  let sexo = $state("");
-  let estadoCivil = $state("");
-  let nacionalidade = $state("Brasileira");
-  
-  // Documentos Pessoais
-  let rgOrgaoExpedidor = $state("");
-  let rgDataEmissao = $state("");
-  let carteiraProfissionalNumero = $state("");
-  let carteiraProfissionalSerie = $state("");
-  let carteiraProfissionalDataEmissao = $state("");
-  let reservistaNumero = $state("");
-  let reservistaSerie = $state("");
-  let tituloEleitorNumero = $state("");
-  let tituloEleitorZona = $state("");
-  let tituloEleitorSecao = $state("");
-  let pisNumero = $state("");
-  
-  // Formação e Saúde
-  let grauInstrucao = $state("");
-  let formacao = $state("");
-  let formacaoRegistro = $state("");
-  let grupoSanguineo = $state("");
-  let fatorRH = $state("");
-  
-  // Cargo e Vínculo
-  let descricaoCargo = $state("");
-  let nomeacaoPortaria = $state("");
-  let nomeacaoData = $state("");
-  let nomeacaoDOE = $state("");
-  let pertenceOrgaoPublico = $state(false);
-  let orgaoOrigem = $state("");
-  let aposentado = $state("nao");
-  
-  // Dados Bancários
-  let contaBradescoNumero = $state("");
-  let contaBradescoDV = $state("");
-  let contaBradescoAgencia = $state("");
-  
-  // Documentos (Storage IDs)
-  let documentosStorage: Record<string, string | undefined> = $state({});
-  
-  // Cursos e Treinamentos
-  interface Curso {
-    _id?: string;
-    id: string;
-    descricao: string;
-    data: string;
-    certificadoId?: string;
-    arquivo?: File;
-    marcadoParaExcluir?: boolean;
-  }
-  
-  let cursos = $state<Curso[]>([]);
-  let mostrarFormularioCurso = $state(false);
-  let cursoAtual = $state<Curso>({
-    id: crypto.randomUUID(),
-    descricao: "",
-    data: "",
-  });
+	let simbolos: Array<{
+		_id: string;
+		nome: string;
+		tipo: SimboloTipo;
+		descricao: string;
+	}> = $state([]);
 
-  async function loadSimbolos() {
-    const list = await client.query(api.simbolos.getAll, {} as any);
-    simbolos = list.map((s: any) => ({ 
-      _id: s._id, 
-      nome: s.nome, 
-      tipo: s.tipo, 
-      descricao: s.descricao 
-    }));
-  }
+	let tipo = $state<SimboloTipo>('cargo_comissionado');
+	let loading = $state(false);
+	let loadingData = $state(true);
+	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
 
-  async function loadFuncionario() {
-    try {
-      const func = await client.query(api.funcionarios.getById, { id: funcionarioId as any });
-      
-      // Preencher campos
-      nome = func.nome;
-      matricula = func.matricula;
-      cpf = maskCPF(func.cpf);
-      rg = func.rg;
-      nascimento = func.nascimento;
-      email = func.email;
-      telefone = maskPhone(func.telefone);
-      endereco = func.endereco;
-      cep = maskCEP(func.cep);
-      cidade = func.cidade;
-      uf = func.uf;
-      simboloId = func.simboloId;
-      tipo = func.simboloTipo;
-      admissaoData = func.admissaoData || "";
-      
-      // Dados adicionais
-      nomePai = func.nomePai || "";
-      nomeMae = func.nomeMae || "";
-      naturalidade = func.naturalidade || "";
-      naturalidadeUF = func.naturalidadeUF || "";
-      sexo = func.sexo || "";
-      estadoCivil = func.estadoCivil || "";
-      nacionalidade = func.nacionalidade || "Brasileira";
-      
-      rgOrgaoExpedidor = func.rgOrgaoExpedidor || "";
-      rgDataEmissao = func.rgDataEmissao || "";
-      carteiraProfissionalNumero = func.carteiraProfissionalNumero || "";
-      carteiraProfissionalSerie = func.carteiraProfissionalSerie || "";
-      carteiraProfissionalDataEmissao = func.carteiraProfissionalDataEmissao || "";
-      reservistaNumero = func.reservistaNumero || "";
-      reservistaSerie = func.reservistaSerie || "";
-      tituloEleitorNumero = func.tituloEleitorNumero || "";
-      tituloEleitorZona = func.tituloEleitorZona || "";
-      tituloEleitorSecao = func.tituloEleitorSecao || "";
-      pisNumero = func.pisNumero || "";
-      
-      grauInstrucao = func.grauInstrucao || "";
-      formacao = func.formacao || "";
-      formacaoRegistro = func.formacaoRegistro || "";
-      grupoSanguineo = func.grupoSanguineo || "";
-      fatorRH = func.fatorRH || "";
-      
-      descricaoCargo = func.descricaoCargo || "";
-      nomeacaoPortaria = func.nomeacaoPortaria || "";
-      nomeacaoData = func.nomeacaoData || "";
-      nomeacaoDOE = func.nomeacaoDOE || "";
-      pertenceOrgaoPublico = func.pertenceOrgaoPublico || false;
-      orgaoOrigem = func.orgaoOrigem || "";
-      aposentado = func.aposentado || "nao";
-      
-      contaBradescoNumero = func.contaBradescoNumero || "";
-      contaBradescoDV = func.contaBradescoDV || "";
-      contaBradescoAgencia = func.contaBradescoAgencia || "";
-      
-      // Documentos
-      documentosStorage = {};
-      documentos.forEach(doc => {
-        const storageId = (func as any)[doc.campo];
-        if (storageId) {
-          documentosStorage[doc.campo] = storageId;
-        }
-      });
-      
-      // Carregar cursos
-      try {
-        const cursosData = await client.query(api.cursos.listarPorFuncionario, {
-          funcionarioId: funcionarioId as any,
-        });
-        cursos = cursosData.map((c: any) => ({
-          _id: c._id,
-          id: c._id,
-          descricao: c.descricao,
-          data: c.data,
-          certificadoId: c.certificadoId,
-        }));
-      } catch (error) {
-        console.error("Erro ao carregar cursos:", error);
-      }
-    } catch (error) {
-      console.error("Erro ao carregar funcionário:", error);
-      notice = { kind: "error", text: "Erro ao carregar dados do funcionário" };
-    } finally {
-      loadingData = false;
-    }
-  }
+	// Campos obrigatórios
+	let nome = $state('');
+	let matricula = $state('');
+	let cpf = $state('');
+	let rg = $state('');
+	let nascimento = $state('');
+	let email = $state('');
+	let telefone = $state('');
+	let endereco = $state('');
+	let cep = $state('');
+	let cidade = $state('');
+	let uf = $state('');
+	let simboloId = $state('');
+	let admissaoData = $state('');
 
-  async function fillFromCEP(cepValue: string) {
-    const cepDigits = onlyDigits(cepValue);
-    if (cepDigits.length !== 8) return;
-    
-    try {
-      const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
-      const data = await res.json();
-      if (!data || data.erro) return;
-      
-      const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(", ");
-      endereco = enderecoFull;
-      cidade = data.localidade || "";
-      uf = data.uf || "";
-    } catch {}
-  }
-  
-  // Funções de Cursos
-  function adicionarCurso() {
-    if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
-      notice = { kind: "error", text: "Preencha a descrição e data do curso" };
-      return;
-    }
-    
-    if (cursos.filter(c => !c.marcadoParaExcluir).length >= 7) {
-      notice = { kind: "error", text: "Máximo de 7 cursos permitidos" };
-      return;
-    }
-    
-    cursos.push({ ...cursoAtual });
-    cursoAtual = {
-      id: crypto.randomUUID(),
-      descricao: "",
-      data: "",
-    };
-    mostrarFormularioCurso = false;
-  }
-  
-  function removerCurso(id: string) {
-    const curso = cursos.find(c => c.id === id);
-    if (curso && curso._id) {
-      // Marcar para excluir se já existe no banco
-      curso.marcadoParaExcluir = true;
-    } else {
-      // Remover diretamente se é novo
-      cursos = cursos.filter(c => c.id !== id);
-    }
-  }
-  
-  async function uploadCertificado(file: File): Promise<string> {
-    const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-    
-    const result = await fetch(uploadUrl, {
-      method: "POST",
-      headers: { "Content-Type": file.type },
-      body: file,
-    });
-    
-    const { storageId } = await result.json();
-    return storageId;
-  }
+	// Dados Pessoais Adicionais
+	let nomePai = $state('');
+	let nomeMae = $state('');
+	let naturalidade = $state('');
+	let naturalidadeUF = $state('');
+	let sexo = $state('');
+	let estadoCivil = $state('');
+	let nacionalidade = $state('Brasileira');
 
-  async function handleDocumentoUpload(campo: string, file: File) {
-    try {
-      const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-      
-      const result = await fetch(uploadUrl, {
-        method: "POST",
-        headers: { "Content-Type": file.type },
-        body: file,
-      });
-      
-      const { storageId } = await result.json();
-      documentosStorage[campo] = storageId;
-    } catch (err: any) {
-      throw new Error(err?.message || "Erro ao fazer upload");
-    }
-  }
+	// Documentos Pessoais
+	let rgOrgaoExpedidor = $state('');
+	let rgDataEmissao = $state('');
+	let carteiraProfissionalNumero = $state('');
+	let carteiraProfissionalSerie = $state('');
+	let carteiraProfissionalDataEmissao = $state('');
+	let reservistaNumero = $state('');
+	let reservistaSerie = $state('');
+	let tituloEleitorNumero = $state('');
+	let tituloEleitorZona = $state('');
+	let tituloEleitorSecao = $state('');
+	let pisNumero = $state('');
 
-  async function handleDocumentoRemove(campo: string) {
-    documentosStorage[campo] = undefined;
-  }
+	// Formação e Saúde
+	let grauInstrucao = $state('');
+	let formacao = $state('');
+	let formacaoRegistro = $state('');
+	let grupoSanguineo = $state('');
+	let fatorRH = $state('');
 
-  async function handleSubmit() {
-    if (!nome || !matricula || !cpf || !rg || !nascimento || !email || !telefone) {
-      notice = { kind: "error", text: "Preencha todos os campos obrigatórios" };
-      return;
-    }
-    
-    if (!validateCPF(cpf)) {
-      notice = { kind: "error", text: "CPF inválido" };
-      return;
-    }
-    
-    if (!validateDate(nascimento)) {
-      notice = { kind: "error", text: "Data de nascimento inválida" };
-      return;
-    }
-    
-    if (!simboloId) {
-      notice = { kind: "error", text: "Selecione um símbolo" };
-      return;
-    }
+	// Cargo e Vínculo
+	let descricaoCargo = $state('');
+	let nomeacaoPortaria = $state('');
+	let nomeacaoData = $state('');
+	let nomeacaoDOE = $state('');
+	let pertenceOrgaoPublico = $state(false);
+	let orgaoOrigem = $state('');
+	let aposentado = $state('nao');
 
-    try {
-      loading = true;
-      
-      const payload = {
-        nome,
-        matricula,
-        cpf: onlyDigits(cpf),
-        rg: onlyDigits(rg),
-        nascimento,
-        email,
-        telefone: onlyDigits(telefone),
-        endereco,
-        cep: onlyDigits(cep),
-        cidade,
-        uf: uf.toUpperCase(),
-        simboloId: simboloId as any,
-        simboloTipo: tipo,
-        admissaoData: admissaoData || undefined,
-        
-        nomePai: nomePai || undefined,
-        nomeMae: nomeMae || undefined,
-        naturalidade: naturalidade || undefined,
-        naturalidadeUF: naturalidadeUF ? naturalidadeUF.toUpperCase() : undefined,
-        sexo: sexo || undefined,
-        estadoCivil: estadoCivil || undefined,
-        nacionalidade: nacionalidade || undefined,
-        
-        rgOrgaoExpedidor: rgOrgaoExpedidor || undefined,
-        rgDataEmissao: rgDataEmissao || undefined,
-        carteiraProfissionalNumero: carteiraProfissionalNumero || undefined,
-        carteiraProfissionalSerie: carteiraProfissionalSerie || undefined,
-        carteiraProfissionalDataEmissao: carteiraProfissionalDataEmissao || undefined,
-        reservistaNumero: reservistaNumero || undefined,
-        reservistaSerie: reservistaSerie || undefined,
-        tituloEleitorNumero: tituloEleitorNumero || undefined,
-        tituloEleitorZona: tituloEleitorZona || undefined,
-        tituloEleitorSecao: tituloEleitorSecao || undefined,
-        pisNumero: pisNumero || undefined,
-        
-        grauInstrucao: grauInstrucao || undefined,
-        formacao: formacao || undefined,
-        formacaoRegistro: formacaoRegistro || undefined,
-        grupoSanguineo: grupoSanguineo || undefined,
-        fatorRH: fatorRH || undefined,
-        
-        descricaoCargo: descricaoCargo || undefined,
-        nomeacaoPortaria: nomeacaoPortaria || undefined,
-        nomeacaoData: nomeacaoData || undefined,
-        nomeacaoDOE: nomeacaoDOE || undefined,
-        pertenceOrgaoPublico: pertenceOrgaoPublico || undefined,
-        orgaoOrigem: orgaoOrigem || undefined,
-        aposentado: aposentado || undefined,
-        
-        contaBradescoNumero: contaBradescoNumero || undefined,
-        contaBradescoDV: contaBradescoDV || undefined,
-        contaBradescoAgencia: contaBradescoAgencia || undefined,
-        
-        ...Object.fromEntries(
-          Object.entries(documentosStorage).map(([key, value]) => [key, value as any])
-        ),
-      };
+	// Dados Bancários
+	let contaBradescoNumero = $state('');
+	let contaBradescoDV = $state('');
+	let contaBradescoAgencia = $state('');
 
-      await client.mutation(api.funcionarios.update, { id: funcionarioId as any, ...payload as any });
-      
-      // Salvar cursos
-      try {
-        // Excluir cursos marcados
-        for (const curso of cursos.filter(c => c.marcadoParaExcluir && c._id)) {
-          await client.mutation(api.cursos.excluir, { id: curso._id as any });
-        }
-        
-        // Adicionar/atualizar cursos
-        for (const curso of cursos.filter(c => !c.marcadoParaExcluir)) {
-          let certificadoId = curso.certificadoId;
-          
-          // Upload de certificado se houver arquivo novo
-          if (curso.arquivo) {
-            certificadoId = await uploadCertificado(curso.arquivo);
-          }
-          
-          if (curso._id) {
-            // Atualizar curso existente
-            await client.mutation(api.cursos.atualizar, {
-              id: curso._id as any,
-              descricao: curso.descricao,
-              data: curso.data,
-              certificadoId: certificadoId as any,
-            });
-          } else {
-            // Criar novo curso
-            await client.mutation(api.cursos.criar, {
-              funcionarioId: funcionarioId as any,
-              descricao: curso.descricao,
-              data: curso.data,
-              certificadoId: certificadoId as any,
-            });
-          }
-        }
-      } catch (error) {
-        console.error("Erro ao salvar cursos:", error);
-      }
-      
-      notice = { kind: "success", text: "Funcionário atualizado com sucesso!" };
-      setTimeout(() => goto("/recursos-humanos/funcionarios"), 600);
-    } catch (e: any) {
-      notice = { kind: "error", text: "Erro ao atualizar funcionário." };
-    } finally {
-      loading = false;
-    }
-  }
+	// Documentos (Storage IDs)
+	let documentosStorage: Record<string, string | undefined> = $state({});
 
-  async function init() {
-    await loadSimbolos();
-    await loadFuncionario();
-  }
+	// Cursos e Treinamentos
+	interface Curso {
+		_id?: string;
+		id: string;
+		descricao: string;
+		data: string;
+		certificadoId?: string;
+		arquivo?: File;
+		marcadoParaExcluir?: boolean;
+	}
 
-  $effect(() => {
-    if (funcionarioId) {
-      init();
-    }
-  });
+	let cursos = $state<Curso[]>([]);
+	let mostrarFormularioCurso = $state(false);
+	let cursoAtual = $state<Curso>({
+		id: crypto.randomUUID(),
+		descricao: '',
+		data: ''
+	});
 
-  // Resetar simboloId quando tipo mudar
-  $effect(() => {
-    tipo; // track tipo
-    simboloId = ""; // reset selection when tipo changes
-  });
+	async function loadSimbolos() {
+		const list = await client.query(api.simbolos.getAll, {} as any);
+		simbolos = list.map((s: any) => ({
+			_id: s._id,
+			nome: s.nome,
+			tipo: s.tipo,
+			descricao: s.descricao
+		}));
+	}
+
+	async function loadFuncionario() {
+		try {
+			const func = await client.query(api.funcionarios.getById, { id: funcionarioId as any });
+
+			// Preencher campos
+			nome = func.nome;
+			matricula = func.matricula;
+			cpf = maskCPF(func.cpf);
+			rg = func.rg;
+			nascimento = func.nascimento;
+			email = func.email;
+			telefone = maskPhone(func.telefone);
+			endereco = func.endereco;
+			cep = maskCEP(func.cep);
+			cidade = func.cidade;
+			uf = func.uf;
+			simboloId = func.simboloId;
+			tipo = func.simboloTipo;
+			admissaoData = func.admissaoData || '';
+
+			// Dados adicionais
+			nomePai = func.nomePai || '';
+			nomeMae = func.nomeMae || '';
+			naturalidade = func.naturalidade || '';
+			naturalidadeUF = func.naturalidadeUF || '';
+			sexo = func.sexo || '';
+			estadoCivil = func.estadoCivil || '';
+			nacionalidade = func.nacionalidade || 'Brasileira';
+
+			rgOrgaoExpedidor = func.rgOrgaoExpedidor || '';
+			rgDataEmissao = func.rgDataEmissao || '';
+			carteiraProfissionalNumero = func.carteiraProfissionalNumero || '';
+			carteiraProfissionalSerie = func.carteiraProfissionalSerie || '';
+			carteiraProfissionalDataEmissao = func.carteiraProfissionalDataEmissao || '';
+			reservistaNumero = func.reservistaNumero || '';
+			reservistaSerie = func.reservistaSerie || '';
+			tituloEleitorNumero = func.tituloEleitorNumero || '';
+			tituloEleitorZona = func.tituloEleitorZona || '';
+			tituloEleitorSecao = func.tituloEleitorSecao || '';
+			pisNumero = func.pisNumero || '';
+
+			grauInstrucao = func.grauInstrucao || '';
+			formacao = func.formacao || '';
+			formacaoRegistro = func.formacaoRegistro || '';
+			grupoSanguineo = func.grupoSanguineo || '';
+			fatorRH = func.fatorRH || '';
+
+			descricaoCargo = func.descricaoCargo || '';
+			nomeacaoPortaria = func.nomeacaoPortaria || '';
+			nomeacaoData = func.nomeacaoData || '';
+			nomeacaoDOE = func.nomeacaoDOE || '';
+			pertenceOrgaoPublico = func.pertenceOrgaoPublico || false;
+			orgaoOrigem = func.orgaoOrigem || '';
+			aposentado = func.aposentado || 'nao';
+
+			contaBradescoNumero = func.contaBradescoNumero || '';
+			contaBradescoDV = func.contaBradescoDV || '';
+			contaBradescoAgencia = func.contaBradescoAgencia || '';
+
+			// Documentos
+			documentosStorage = {};
+			documentos.forEach((doc) => {
+				const storageId = (func as any)[doc.campo];
+				if (storageId) {
+					documentosStorage[doc.campo] = storageId;
+				}
+			});
+
+			// Carregar cursos
+			try {
+				const cursosData = await client.query(api.cursos.listarPorFuncionario, {
+					funcionarioId: funcionarioId as any
+				});
+				cursos = cursosData.map((c: any) => ({
+					_id: c._id,
+					id: c._id,
+					descricao: c.descricao,
+					data: c.data,
+					certificadoId: c.certificadoId
+				}));
+			} catch (error) {
+				console.error('Erro ao carregar cursos:', error);
+			}
+		} catch (error) {
+			console.error('Erro ao carregar funcionário:', error);
+			notice = { kind: 'error', text: 'Erro ao carregar dados do funcionário' };
+		} finally {
+			loadingData = false;
+		}
+	}
+
+	async function fillFromCEP(cepValue: string) {
+		const cepDigits = onlyDigits(cepValue);
+		if (cepDigits.length !== 8) return;
+
+		try {
+			const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
+			const data = await res.json();
+			if (!data || data.erro) return;
+
+			const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(', ');
+			endereco = enderecoFull;
+			cidade = data.localidade || '';
+			uf = data.uf || '';
+		} catch {}
+	}
+
+	// Funções de Cursos
+	function adicionarCurso() {
+		if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
+			notice = { kind: 'error', text: 'Preencha a descrição e data do curso' };
+			return;
+		}
+
+		if (cursos.filter((c) => !c.marcadoParaExcluir).length >= 7) {
+			notice = { kind: 'error', text: 'Máximo de 7 cursos permitidos' };
+			return;
+		}
+
+		cursos.push({ ...cursoAtual });
+		cursoAtual = {
+			id: crypto.randomUUID(),
+			descricao: '',
+			data: ''
+		};
+		mostrarFormularioCurso = false;
+	}
+
+	function removerCurso(id: string) {
+		const curso = cursos.find((c) => c.id === id);
+		if (curso && curso._id) {
+			// Marcar para excluir se já existe no banco
+			curso.marcadoParaExcluir = true;
+		} else {
+			// Remover diretamente se é novo
+			cursos = cursos.filter((c) => c.id !== id);
+		}
+	}
+
+	async function uploadCertificado(file: File): Promise<string> {
+		const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+
+		const result = await fetch(uploadUrl, {
+			method: 'POST',
+			headers: { 'Content-Type': file.type },
+			body: file
+		});
+
+		const { storageId } = await result.json();
+		return storageId;
+	}
+
+	async function handleDocumentoUpload(campo: string, file: File) {
+		try {
+			const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+
+			const result = await fetch(uploadUrl, {
+				method: 'POST',
+				headers: { 'Content-Type': file.type },
+				body: file
+			});
+
+			const { storageId } = await result.json();
+			documentosStorage[campo] = storageId;
+		} catch (err: any) {
+			throw new Error(err?.message || 'Erro ao fazer upload');
+		}
+	}
+
+	async function handleDocumentoRemove(campo: string) {
+		documentosStorage[campo] = undefined;
+	}
+
+	async function handleSubmit() {
+		if (!nome || !matricula || !cpf || !rg || !nascimento || !email || !telefone) {
+			notice = { kind: 'error', text: 'Preencha todos os campos obrigatórios' };
+			return;
+		}
+
+		if (!validateCPF(cpf)) {
+			notice = { kind: 'error', text: 'CPF inválido' };
+			return;
+		}
+
+		if (!validateDate(nascimento)) {
+			notice = { kind: 'error', text: 'Data de nascimento inválida' };
+			return;
+		}
+
+		if (!simboloId) {
+			notice = { kind: 'error', text: 'Selecione um símbolo' };
+			return;
+		}
+
+		try {
+			loading = true;
+
+			const payload = {
+				nome,
+				matricula,
+				cpf: onlyDigits(cpf),
+				rg: onlyDigits(rg),
+				nascimento,
+				email,
+				telefone: onlyDigits(telefone),
+				endereco,
+				cep: onlyDigits(cep),
+				cidade,
+				uf: uf.toUpperCase(),
+				simboloId: simboloId as any,
+				simboloTipo: tipo,
+				admissaoData: admissaoData || undefined,
+
+				nomePai: nomePai || undefined,
+				nomeMae: nomeMae || undefined,
+				naturalidade: naturalidade || undefined,
+				naturalidadeUF: naturalidadeUF ? naturalidadeUF.toUpperCase() : undefined,
+				sexo: sexo || undefined,
+				estadoCivil: estadoCivil || undefined,
+				nacionalidade: nacionalidade || undefined,
+
+				rgOrgaoExpedidor: rgOrgaoExpedidor || undefined,
+				rgDataEmissao: rgDataEmissao || undefined,
+				carteiraProfissionalNumero: carteiraProfissionalNumero || undefined,
+				carteiraProfissionalSerie: carteiraProfissionalSerie || undefined,
+				carteiraProfissionalDataEmissao: carteiraProfissionalDataEmissao || undefined,
+				reservistaNumero: reservistaNumero || undefined,
+				reservistaSerie: reservistaSerie || undefined,
+				tituloEleitorNumero: tituloEleitorNumero || undefined,
+				tituloEleitorZona: tituloEleitorZona || undefined,
+				tituloEleitorSecao: tituloEleitorSecao || undefined,
+				pisNumero: pisNumero || undefined,
+
+				grauInstrucao: grauInstrucao || undefined,
+				formacao: formacao || undefined,
+				formacaoRegistro: formacaoRegistro || undefined,
+				grupoSanguineo: grupoSanguineo || undefined,
+				fatorRH: fatorRH || undefined,
+
+				descricaoCargo: descricaoCargo || undefined,
+				nomeacaoPortaria: nomeacaoPortaria || undefined,
+				nomeacaoData: nomeacaoData || undefined,
+				nomeacaoDOE: nomeacaoDOE || undefined,
+				pertenceOrgaoPublico: pertenceOrgaoPublico || undefined,
+				orgaoOrigem: orgaoOrigem || undefined,
+				aposentado: aposentado || undefined,
+
+				contaBradescoNumero: contaBradescoNumero || undefined,
+				contaBradescoDV: contaBradescoDV || undefined,
+				contaBradescoAgencia: contaBradescoAgencia || undefined,
+
+				...Object.fromEntries(
+					Object.entries(documentosStorage).map(([key, value]) => [key, value as any])
+				)
+			};
+
+			await client.mutation(api.funcionarios.update, {
+				id: funcionarioId as any,
+				...(payload as any)
+			});
+
+			// Salvar cursos
+			try {
+				// Excluir cursos marcados
+				for (const curso of cursos.filter((c) => c.marcadoParaExcluir && c._id)) {
+					await client.mutation(api.cursos.excluir, { id: curso._id as any });
+				}
+
+				// Adicionar/atualizar cursos
+				for (const curso of cursos.filter((c) => !c.marcadoParaExcluir)) {
+					let certificadoId = curso.certificadoId;
+
+					// Upload de certificado se houver arquivo novo
+					if (curso.arquivo) {
+						certificadoId = await uploadCertificado(curso.arquivo);
+					}
+
+					if (curso._id) {
+						// Atualizar curso existente
+						await client.mutation(api.cursos.atualizar, {
+							id: curso._id as any,
+							descricao: curso.descricao,
+							data: curso.data,
+							certificadoId: certificadoId as any
+						});
+					} else {
+						// Criar novo curso
+						await client.mutation(api.cursos.criar, {
+							funcionarioId: funcionarioId as any,
+							descricao: curso.descricao,
+							data: curso.data,
+							certificadoId: certificadoId as any
+						});
+					}
+				}
+			} catch (error) {
+				console.error('Erro ao salvar cursos:', error);
+			}
+
+			notice = { kind: 'success', text: 'Funcionário atualizado com sucesso!' };
+			setTimeout(() => goto('/recursos-humanos/funcionarios'), 600);
+		} catch (e: any) {
+			notice = { kind: 'error', text: 'Erro ao atualizar funcionário.' };
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function init() {
+		await loadSimbolos();
+		await loadFuncionario();
+	}
+
+	$effect(() => {
+		if (funcionarioId) {
+			init();
+		}
+	});
+
+	// Resetar simboloId quando tipo mudar
+	$effect(() => {
+		tipo; // track tipo
+		simboloId = ''; // reset selection when tipo changes
+	});
 </script>
 
 {#if loadingData}
-  <div class="flex items-center justify-center min-h-screen">
-    <span class="loading loading-spinner loading-lg"></span>
-  </div>
+	<div class="flex min-h-screen items-center justify-center">
+		<span class="loading loading-spinner loading-lg"></span>
+	</div>
 {:else}
-  <main class="container mx-auto px-4 py-4 max-w-7xl">
-    <!-- Breadcrumb -->
-    <div class="text-sm breadcrumbs mb-4">
-      <ul>
-        <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-        <li><a href="/recursos-humanos/funcionarios" class="text-primary hover:underline">Funcionários</a></li>
-        <li>Editar</li>
-      </ul>
-    </div>
-
-    <!-- Cabeçalho -->
-    <div class="mb-6">
-      <div class="flex items-center gap-4 mb-2">
-        <div class="p-3 bg-yellow-500/20 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Editar Funcionário</h1>
-          <p class="text-base-content/70">Atualize as informações do funcionário</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Alertas -->
-    {#if notice}
-      <div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          {#if notice.kind === "success"}
-            <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" />
-          {:else}
-            <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" />
-          {/if}
-        </svg>
-        <span>{notice.text}</span>
-      </div>
-    {/if}
-
-    <!-- Formulário de Edição -->
-    <form class="space-y-6" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
-    
-    <!-- Card 1: Informações Pessoais -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-          </svg>
-          Informações Pessoais
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <!-- Nome -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="nome">
-              <span class="label-text font-medium">Nome Completo <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="nome" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nome}
-              required 
-            />
-          </div>
-
-          <!-- Matrícula -->
-          <div class="form-control">
-            <label class="label" for="matricula">
-              <span class="label-text font-medium">Matrícula <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="matricula" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={matricula}
-              required 
-            />
-          </div>
-
-          <!-- CPF -->
-          <div class="form-control">
-            <label class="label" for="cpf">
-              <span class="label-text font-medium">CPF <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="cpf" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              value={cpf}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                cpf = maskCPF(target.value);
-                target.value = cpf;
-              }}
-              required 
-            />
-          </div>
-
-          <!-- RG -->
-          <div class="form-control">
-            <label class="label" for="rg">
-              <span class="label-text font-medium">RG <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="rg" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              value={rg}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                rg = onlyDigits(target.value);
-                target.value = rg;
-              }}
-              required 
-            />
-          </div>
-
-          <!-- Órgão Expedidor -->
-          <div class="form-control">
-            <label class="label" for="rgOrgaoExpedidor">
-              <span class="label-text font-medium">Órgão Expedidor</span>
-            </label>
-            <input 
-              id="rgOrgaoExpedidor" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={rgOrgaoExpedidor}
-              placeholder="Ex: SDS/PE"
-            />
-          </div>
-
-          <!-- Data Emissão RG -->
-          <div class="form-control">
-            <label class="label" for="rgDataEmissao">
-              <span class="label-text font-medium">Data Emissão RG</span>
-            </label>
-            <input 
-              id="rgDataEmissao" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={rgDataEmissao}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                rgDataEmissao = maskDate(target.value);
-                target.value = rgDataEmissao;
-              }}
-            />
-          </div>
-
-          <!-- Nome do Pai -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="nomePai">
-              <span class="label-text font-medium">Nome do Pai</span>
-            </label>
-            <input 
-              id="nomePai" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nomePai}
-            />
-          </div>
-
-          <!-- Nome da Mãe -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="nomeMae">
-              <span class="label-text font-medium">Nome da Mãe</span>
-            </label>
-            <input 
-              id="nomeMae" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nomeMae}
-            />
-          </div>
-
-          <!-- Data de Nascimento -->
-          <div class="form-control">
-            <label class="label" for="nascimento">
-              <span class="label-text font-medium">Data de Nascimento <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="nascimento" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={nascimento}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                nascimento = maskDate(target.value);
-                target.value = nascimento;
-              }}
-              required 
-            />
-          </div>
-
-          <!-- Naturalidade -->
-          <div class="form-control">
-            <label class="label" for="naturalidade">
-              <span class="label-text font-medium">Naturalidade</span>
-            </label>
-            <input 
-              id="naturalidade" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={naturalidade}
-              placeholder="Cidade de nascimento"
-            />
-          </div>
-
-          <!-- Naturalidade UF -->
-          <div class="form-control">
-            <label class="label" for="naturalidadeUF">
-              <span class="label-text font-medium">UF Naturalidade</span>
-            </label>
-            <select 
-              id="naturalidadeUF" 
-              class="select select-bordered w-full" 
-              bind:value={naturalidadeUF}
-            >
-              <option value="">Selecione...</option>
-              {#each UFS_BRASIL as ufOption}
-                <option value={ufOption}>{ufOption}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Sexo -->
-          <div class="form-control">
-            <label class="label" for="sexo">
-              <span class="label-text font-medium">Sexo</span>
-            </label>
-            <select 
-              id="sexo" 
-              class="select select-bordered w-full" 
-              bind:value={sexo}
-            >
-              <option value="">Selecione...</option>
-              {#each SEXO_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Estado Civil -->
-          <div class="form-control">
-            <label class="label" for="estadoCivil">
-              <span class="label-text font-medium">Estado Civil</span>
-            </label>
-            <select 
-              id="estadoCivil" 
-              class="select select-bordered w-full" 
-              bind:value={estadoCivil}
-            >
-              <option value="">Selecione...</option>
-              {#each ESTADO_CIVIL_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Nacionalidade -->
-          <div class="form-control">
-            <label class="label" for="nacionalidade">
-              <span class="label-text font-medium">Nacionalidade</span>
-            </label>
-            <input 
-              id="nacionalidade" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nacionalidade}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 2: Documentos Pessoais -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
-          </svg>
-          Documentos Pessoais
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <!-- Carteira Profissional -->
-          <div class="form-control">
-            <label class="label" for="carteiraProfissionalNumero">
-              <span class="label-text font-medium">Carteira Profissional Nº</span>
-            </label>
-            <input 
-              id="carteiraProfissionalNumero" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={carteiraProfissionalNumero}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="carteiraProfissionalSerie">
-              <span class="label-text font-medium">Série</span>
-            </label>
-            <input 
-              id="carteiraProfissionalSerie" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={carteiraProfissionalSerie}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="carteiraProfissionalDataEmissao">
-              <span class="label-text font-medium">Data Emissão</span>
-            </label>
-            <input 
-              id="carteiraProfissionalDataEmissao" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={carteiraProfissionalDataEmissao}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                carteiraProfissionalDataEmissao = maskDate(target.value);
-                target.value = carteiraProfissionalDataEmissao;
-              }}
-            />
-          </div>
-
-          <!-- Reservista -->
-          <div class="form-control">
-            <label class="label" for="reservistaNumero">
-              <span class="label-text font-medium">Reservista Nº</span>
-            </label>
-            <input 
-              id="reservistaNumero" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={reservistaNumero}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="reservistaSerie">
-              <span class="label-text font-medium">Série</span>
-            </label>
-            <input 
-              id="reservistaSerie" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={reservistaSerie}
-            />
-          </div>
-
-          <!-- Título de Eleitor -->
-          <div class="form-control">
-            <label class="label" for="tituloEleitorNumero">
-              <span class="label-text font-medium">Título de Eleitor Nº</span>
-            </label>
-            <input 
-              id="tituloEleitorNumero" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={tituloEleitorNumero}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="tituloEleitorZona">
-              <span class="label-text font-medium">Zona</span>
-            </label>
-            <input 
-              id="tituloEleitorZona" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              bind:value={tituloEleitorZona}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="tituloEleitorSecao">
-              <span class="label-text font-medium">Seção</span>
-            </label>
-            <input 
-              id="tituloEleitorSecao" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              bind:value={tituloEleitorSecao}
-            />
-          </div>
-
-          <!-- PIS/PASEP -->
-          <div class="form-control">
-            <label class="label" for="pisNumero">
-              <span class="label-text font-medium">PIS/PASEP Nº</span>
-            </label>
-            <input 
-              id="pisNumero" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={pisNumero}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 3: Formação e Saúde -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-          </svg>
-          Formação e Saúde
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <!-- Grau de Instrução -->
-          <div class="form-control">
-            <label class="label" for="grauInstrucao">
-              <span class="label-text font-medium">Grau de Instrução</span>
-            </label>
-            <select 
-              id="grauInstrucao" 
-              class="select select-bordered w-full" 
-              bind:value={grauInstrucao}
-            >
-              <option value="">Selecione...</option>
-              {#each GRAU_INSTRUCAO_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Formação -->
-          <div class="form-control">
-            <label class="label" for="formacao">
-              <span class="label-text font-medium">Formação/Curso</span>
-            </label>
-            <input 
-              id="formacao" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={formacao}
-              placeholder="Ex: Administração"
-            />
-          </div>
-
-          <!-- Registro Nº -->
-          <div class="form-control">
-            <label class="label" for="formacaoRegistro">
-              <span class="label-text font-medium">Registro Nº</span>
-            </label>
-            <input 
-              id="formacaoRegistro" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={formacaoRegistro}
-              placeholder="Nº do registro profissional"
-            />
-          </div>
-
-          <!-- Grupo Sanguíneo -->
-          <div class="form-control">
-            <label class="label" for="grupoSanguineo">
-              <span class="label-text font-medium">Grupo Sanguíneo</span>
-            </label>
-            <select 
-              id="grupoSanguineo" 
-              class="select select-bordered w-full" 
-              bind:value={grupoSanguineo}
-            >
-              <option value="">Selecione...</option>
-              {#each GRUPO_SANGUINEO_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Fator RH -->
-          <div class="form-control">
-            <label class="label" for="fatorRH">
-              <span class="label-text font-medium">Fator RH</span>
-            </label>
-            <select 
-              id="fatorRH" 
-              class="select select-bordered w-full" 
-              bind:value={fatorRH}
-            >
-              <option value="">Selecione...</option>
-              {#each FATOR_RH_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 4: Endereço e Contato -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
-          Endereço e Contato
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <!-- CEP -->
-          <div class="form-control">
-            <label class="label" for="cep">
-              <span class="label-text font-medium">CEP <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="cep" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              value={cep}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                cep = maskCEP(target.value);
-                target.value = cep;
-              }}
-              onblur={() => fillFromCEP(cep)}
-              required 
-            />
-          </div>
-
-          <!-- Cidade -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="cidade">
-              <span class="label-text font-medium">Cidade <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="cidade" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={cidade}
-              required 
-            />
-          </div>
-
-          <!-- UF -->
-          <div class="form-control">
-            <label class="label" for="uf">
-              <span class="label-text font-medium">UF <span class="text-error">*</span></span>
-            </label>
-            <select 
-              id="uf" 
-              class="select select-bordered w-full" 
-              bind:value={uf}
-              required
-            >
-              <option value="">Selecione...</option>
-              {#each UFS_BRASIL as ufOption}
-                <option value={ufOption}>{ufOption}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Endereço -->
-          <div class="form-control lg:col-span-4">
-            <label class="label" for="endereco">
-              <span class="label-text font-medium">Endereço <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="endereco" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={endereco}
-              required 
-            />
-          </div>
-
-          <!-- E-mail -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="email">
-              <span class="label-text font-medium">E-mail <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="email" 
-              type="email" 
-              class="input input-bordered w-full" 
-              bind:value={email}
-              required 
-            />
-          </div>
-
-          <!-- Telefone -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="telefone">
-              <span class="label-text font-medium">Telefone <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="telefone" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              value={telefone}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                telefone = maskPhone(target.value);
-                target.value = telefone;
-              }}
-              required 
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 5: Cargo e Vínculo -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-          Cargo e Vínculo
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <!-- Símbolo Tipo -->
-          <div class="form-control">
-            <label class="label" for="simboloTipo">
-              <span class="label-text font-medium">Símbolo Tipo <span class="text-error">*</span></span>
-            </label>
-            <select 
-              id="simboloTipo" 
-              class="select select-bordered w-full" 
-              bind:value={tipo}
-              required
-            >
-              <option value="cargo_comissionado">Cargo Comissionado</option>
-              <option value="funcao_gratificada">Função Gratificada</option>
-            </select>
-          </div>
-
-          <!-- Símbolo -->
-          <div class="form-control">
-            <label class="label" for="simboloId">
-              <span class="label-text font-medium">Símbolo <span class="text-error">*</span></span>
-            </label>
-            <select 
-              id="simboloId" 
-              class="select select-bordered w-full" 
-              bind:value={simboloId}
-              required
-            >
-              <option value="">Selecione...</option>
-              {#each simbolos.filter((s) => s.tipo === tipo) as s}
-                <option value={s._id}>{s.nome} — {s.descricao}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Descrição Cargo/Função -->
-          <div class="form-control lg:col-span-3">
-            <label class="label" for="descricaoCargo">
-              <span class="label-text font-medium">Descrição Cargo/Função</span>
-            </label>
-            <input 
-              id="descricaoCargo" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={descricaoCargo}
-              placeholder="Descreva as atribuições do cargo"
-            />
-          </div>
-
-          <!-- Nomeação/Portaria -->
-          <div class="form-control">
-            <label class="label" for="nomeacaoPortaria">
-              <span class="label-text font-medium">Nomeação/Portaria Nº</span>
-            </label>
-            <input 
-              id="nomeacaoPortaria" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nomeacaoPortaria}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="nomeacaoData">
-              <span class="label-text font-medium">Data</span>
-            </label>
-            <input 
-              id="nomeacaoData" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={nomeacaoData}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                nomeacaoData = maskDate(target.value);
-                target.value = nomeacaoData;
-              }}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="nomeacaoDOE">
-              <span class="label-text font-medium">DOE</span>
-            </label>
-            <input 
-              id="nomeacaoDOE" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={nomeacaoDOE}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                nomeacaoDOE = maskDate(target.value);
-                target.value = nomeacaoDOE;
-              }}
-            />
-          </div>
-
-          <!-- Data Admissão -->
-          <div class="form-control">
-            <label class="label" for="admissaoData">
-              <span class="label-text font-medium">Data Admissão</span>
-            </label>
-            <input 
-              id="admissaoData" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={admissaoData}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                admissaoData = maskDate(target.value);
-                target.value = admissaoData;
-              }}
-            />
-          </div>
-
-          <!-- Pertence a Órgão Público -->
-          <div class="form-control lg:col-span-3">
-            <label class="label cursor-pointer justify-start gap-4">
-              <input 
-                type="checkbox" 
-                class="checkbox checkbox-primary" 
-                bind:checked={pertenceOrgaoPublico}
-              />
-              <span class="label-text font-medium">Pertence a Órgão Público Federal, Estadual ou Municipal?</span>
-            </label>
-          </div>
-
-          <!-- Órgão de Origem -->
-          {#if pertenceOrgaoPublico}
-            <div class="form-control lg:col-span-2">
-              <label class="label" for="orgaoOrigem">
-                <span class="label-text font-medium">Órgão de Origem (para servidor extra-quadro)</span>
-              </label>
-              <input 
-                id="orgaoOrigem" 
-                type="text" 
-                class="input input-bordered w-full" 
-                bind:value={orgaoOrigem}
-              />
-            </div>
-          {/if}
-
-          <!-- Aposentado -->
-          <div class="form-control">
-            <label class="label" for="aposentado">
-              <span class="label-text font-medium">Se Aposentado</span>
-            </label>
-            <select 
-              id="aposentado" 
-              class="select select-bordered w-full" 
-              bind:value={aposentado}
-            >
-              {#each APOSENTADO_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 6: Dados Bancários -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-          </svg>
-          Dados Bancários - Bradesco
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <!-- Conta Corrente -->
-          <div class="form-control">
-            <label class="label" for="contaBradescoNumero">
-              <span class="label-text font-medium">Conta Corrente Nº</span>
-            </label>
-            <input 
-              id="contaBradescoNumero" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              bind:value={contaBradescoNumero}
-            />
-          </div>
-
-          <!-- DV -->
-          <div class="form-control">
-            <label class="label" for="contaBradescoDV">
-              <span class="label-text font-medium">DV</span>
-            </label>
-            <input 
-              id="contaBradescoDV" 
-              type="text" 
-              maxlength="2"
-              class="input input-bordered w-full" 
-              bind:value={contaBradescoDV}
-            />
-          </div>
-
-          <!-- Agência -->
-          <div class="form-control">
-            <label class="label" for="contaBradescoAgencia">
-              <span class="label-text font-medium">Agência</span>
-            </label>
-            <input 
-              id="contaBradescoAgencia" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              bind:value={contaBradescoAgencia}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Modelos de Declarações -->
-    {#if !loadingData}
-      <ModelosDeclaracoes 
-        funcionario={{
-          _id: funcionarioId,
-          nome,
-          cpf: onlyDigits(cpf),
-          rg: onlyDigits(rg),
-          nascimento,
-          email,
-          telefone: onlyDigits(telefone),
-          endereco,
-          cep: onlyDigits(cep),
-          cidade,
-          uf,
-          matricula,
-          descricaoCargo,
-          nomeacaoPortaria,
-          nomeacaoData,
-          nomeacaoDOE,
-          orgaoOrigem,
-          aposentado,
-          contaBradescoNumero,
-          contaBradescoDV,
-          contaBradescoAgencia
-        }}
-        showPreencherButton={true}
-      />
-    {/if}
-
-    <!-- Card 7: Documentação Anexa -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-6">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-          </svg>
-          Documentação Anexa
-        </h2>
-
-        <p class="text-sm text-base-content/70">
-          Anexe os documentos necessários em formato PDF ou imagem (máximo 10MB cada)
-        </p>
-
-        {#each categoriasDocumentos as categoria}
-          <div class="space-y-3">
-            <h3 class="text-lg font-semibold text-primary">{categoria}</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {#each getDocumentosByCategoria(categoria) as doc}
-                <FileUpload
-                  label={doc.nome}
-                  helpUrl={doc.helpUrl}
-                  value={documentosStorage[doc.campo]}
-                  onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
-                  onRemove={() => handleDocumentoRemove(doc.campo)}
-                  disabled={loading}
-                />
-              {/each}
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-
-    <!-- Card 7.5: Cursos e Treinamentos -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-          </svg>
-          Cursos e Treinamentos
-        </h2>
-
-        <p class="text-sm text-base-content/70">
-          Gerencie cursos e treinamentos do funcionário (até 7 cursos)
-        </p>
-
-        {#if cursos.filter(c => !c.marcadoParaExcluir).length > 0}
-          <div class="space-y-2">
-            <h3 class="font-semibold text-sm">Cursos cadastrados ({cursos.filter(c => !c.marcadoParaExcluir).length}/7)</h3>
-            {#each cursos.filter(c => !c.marcadoParaExcluir) as curso}
-              <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
-                <div class="flex-1">
-                  <p class="font-semibold text-sm">{curso.descricao}</p>
-                  <p class="text-xs text-base-content/70">{curso.data}</p>
-                  {#if curso.certificadoId}
-                    <p class="text-xs text-success">✓ Com certificado</p>
-                  {/if}
-                </div>
-                <button 
-                  type="button"
-                  class="btn btn-sm btn-error btn-square"
-                  aria-label="Remover curso"
-                  onclick={() => removerCurso(curso.id)}
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
-            {/each}
-          </div>
-        {/if}
-
-        {#if cursos.filter(c => !c.marcadoParaExcluir).length < 7}
-          <div class="collapse collapse-arrow border border-base-300 bg-base-200">
-            <input type="checkbox" bind:checked={mostrarFormularioCurso} />
-            <div class="collapse-title font-medium">
-              Adicionar Curso/Treinamento
-            </div>
-            <div class="collapse-content">
-              <div class="space-y-3 pt-2">
-                <div class="form-control">
-                  <label class="label" for="curso-descricao-edit">
-                    <span class="label-text font-medium">Descrição do Curso</span>
-                  </label>
-                  <input 
-                    id="curso-descricao-edit"
-                    type="text" 
-                    class="input input-bordered w-full" 
-                    bind:value={cursoAtual.descricao}
-                    placeholder="Ex: Gestão de Projetos"
-                  />
-                </div>
-
-                <div class="form-control">
-                  <label class="label" for="curso-data-edit">
-                    <span class="label-text font-medium">Data de Conclusão</span>
-                  </label>
-                  <input 
-                    id="curso-data-edit"
-                    type="text" 
-                    class="input input-bordered w-full" 
-                    bind:value={cursoAtual.data}
-                    placeholder="Ex: 01/2024"
-                    onchange={(e) => cursoAtual.data = maskDate(e.currentTarget.value)}
-                  />
-                </div>
-
-                <div class="form-control">
-                  <label class="label" for="curso-certificado-edit">
-                    <span class="label-text font-medium">Certificado/Diploma (opcional)</span>
-                  </label>
-                  <input 
-                    id="curso-certificado-edit"
-                    type="file" 
-                    class="file-input file-input-bordered w-full" 
-                    accept=".pdf,.jpg,.jpeg,.png"
-                    onchange={(e) => {
-                      const file = e.currentTarget.files?.[0];
-                      if (file) cursoAtual.arquivo = file;
-                    }}
-                  />
-                </div>
-
-                <button 
-                  type="button"
-                  class="btn btn-primary btn-sm gap-2 mt-2"
-                  onclick={adicionarCurso}
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                  </svg>
-                  Adicionar à Lista
-                </button>
-              </div>
-            </div>
-          </div>
-        {:else}
-          <div class="alert alert-info">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-            <span>Limite de 7 cursos atingido</span>
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Card 8: Ações -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <div class="flex flex-col sm:flex-row gap-3 justify-end">
-          <button 
-            type="button" 
-            class="btn btn-ghost btn-lg" 
-            disabled={loading}
-            onclick={() => goto("/recursos-humanos/funcionarios")}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-            Cancelar
-          </button>
-          <button 
-            type="submit" 
-            class="btn btn-primary btn-lg" 
-            disabled={loading}
-          >
-            {#if loading}
-              <span class="loading loading-spinner"></span>
-              Atualizando...
-            {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
-              Atualizar Funcionário
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-    </form>
-  </main>
-{/if}
\ No newline at end of file
+	<main class="container mx-auto max-w-7xl px-4 py-4">
+		<!-- Breadcrumb -->
+		<div class="breadcrumbs mb-4 text-sm">
+			<ul>
+				<li>
+					<a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a>
+				</li>
+				<li>
+					<a href="/recursos-humanos/funcionarios" class="text-primary hover:underline"
+						>Funcionários</a
+					>
+				</li>
+				<li>Editar</li>
+			</ul>
+		</div>
+
+		<!-- Cabeçalho -->
+		<div class="mb-6">
+			<div class="mb-2 flex items-center gap-4">
+				<div class="rounded-xl bg-yellow-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-yellow-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Editar Funcionário</h1>
+					<p class="text-base-content/70">Atualize as informações do funcionário</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Alertas -->
+		{#if notice}
+			<div
+				class="alert mb-6 shadow-lg"
+				class:alert-success={notice.kind === 'success'}
+				class:alert-error={notice.kind === 'error'}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					{#if notice.kind === 'success'}
+						<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"
+						/>
+					{:else}
+						<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"
+						/>
+					{/if}
+				</svg>
+				<span>{notice.text}</span>
+			</div>
+		{/if}
+
+		<!-- Formulário de Edição -->
+		<form
+			class="space-y-6"
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleSubmit();
+			}}
+		>
+			<!-- Card 1: Informações Pessoais -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body space-y-4">
+					<h2 class="card-title border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+							/>
+						</svg>
+						Informações Pessoais
+					</h2>
+
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<!-- Nome -->
+						<div class="form-control lg:col-span-2">
+							<label class="label" for="nome">
+								<span class="label-text font-medium"
+									>Nome Completo <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								id="nome"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={nome}
+								required
+							/>
+						</div>
+
+						<!-- Matrícula -->
+						<div class="form-control">
+							<label class="label" for="matricula">
+								<span class="label-text font-medium"
+									>Matrícula <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								id="matricula"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={matricula}
+								required
+							/>
+						</div>
+
+						<!-- CPF -->
+						<div class="form-control">
+							<label class="label" for="cpf">
+								<span class="label-text font-medium">CPF <span class="text-error">*</span></span>
+							</label>
+							<input
+								id="cpf"
+								type="text"
+								inputmode="numeric"
+								class="input input-bordered w-full"
+								value={cpf}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									cpf = maskCPF(target.value);
+									target.value = cpf;
+								}}
+								required
+							/>
+						</div>
+
+						<!-- RG -->
+						<div class="form-control">
+							<label class="label" for="rg">
+								<span class="label-text font-medium">RG <span class="text-error">*</span></span>
+							</label>
+							<input
+								id="rg"
+								type="text"
+								inputmode="numeric"
+								class="input input-bordered w-full"
+								value={rg}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									rg = onlyDigits(target.value);
+									target.value = rg;
+								}}
+								required
+							/>
+						</div>
+
+						<!-- Órgão Expedidor -->
+						<div class="form-control">
+							<label class="label" for="rgOrgaoExpedidor">
+								<span class="label-text font-medium">Órgão Expedidor</span>
+							</label>
+							<input
+								id="rgOrgaoExpedidor"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={rgOrgaoExpedidor}
+								placeholder="Ex: SDS/PE"
+							/>
+						</div>
+
+						<!-- Data Emissão RG -->
+						<div class="form-control">
+							<label class="label" for="rgDataEmissao">
+								<span class="label-text font-medium">Data Emissão RG</span>
+							</label>
+							<input
+								id="rgDataEmissao"
+								type="text"
+								inputmode="numeric"
+								placeholder="dd/mm/aaaa"
+								class="input input-bordered w-full"
+								value={rgDataEmissao}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									rgDataEmissao = maskDate(target.value);
+									target.value = rgDataEmissao;
+								}}
+							/>
+						</div>
+
+						<!-- Nome do Pai -->
+						<div class="form-control lg:col-span-2">
+							<label class="label" for="nomePai">
+								<span class="label-text font-medium">Nome do Pai</span>
+							</label>
+							<input
+								id="nomePai"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={nomePai}
+							/>
+						</div>
+
+						<!-- Nome da Mãe -->
+						<div class="form-control lg:col-span-2">
+							<label class="label" for="nomeMae">
+								<span class="label-text font-medium">Nome da Mãe</span>
+							</label>
+							<input
+								id="nomeMae"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={nomeMae}
+							/>
+						</div>
+
+						<!-- Data de Nascimento -->
+						<div class="form-control">
+							<label class="label" for="nascimento">
+								<span class="label-text font-medium"
+									>Data de Nascimento <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								id="nascimento"
+								type="text"
+								inputmode="numeric"
+								placeholder="dd/mm/aaaa"
+								class="input input-bordered w-full"
+								value={nascimento}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									nascimento = maskDate(target.value);
+									target.value = nascimento;
+								}}
+								required
+							/>
+						</div>
+
+						<!-- Naturalidade -->
+						<div class="form-control">
+							<label class="label" for="naturalidade">
+								<span class="label-text font-medium">Naturalidade</span>
+							</label>
+							<input
+								id="naturalidade"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={naturalidade}
+								placeholder="Cidade de nascimento"
+							/>
+						</div>
+
+						<!-- Naturalidade UF -->
+						<div class="form-control">
+							<label class="label" for="naturalidadeUF">
+								<span class="label-text font-medium">UF Naturalidade</span>
+							</label>
+							<select
+								id="naturalidadeUF"
+								class="select select-bordered w-full"
+								bind:value={naturalidadeUF}
+							>
+								<option value="">Selecione...</option>
+								{#each UFS_BRASIL as ufOption}
+									<option value={ufOption}>{ufOption}</option>
+								{/each}
+							</select>
+						</div>
+
+						<!-- Sexo -->
+						<div class="form-control">
+							<label class="label" for="sexo">
+								<span class="label-text font-medium">Sexo</span>
+							</label>
+							<select id="sexo" class="select select-bordered w-full" bind:value={sexo}>
+								<option value="">Selecione...</option>
+								{#each SEXO_OPTIONS as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						</div>
+
+						<!-- Estado Civil -->
+						<div class="form-control">
+							<label class="label" for="estadoCivil">
+								<span class="label-text font-medium">Estado Civil</span>
+							</label>
+							<select
+								id="estadoCivil"
+								class="select select-bordered w-full"
+								bind:value={estadoCivil}
+							>
+								<option value="">Selecione...</option>
+								{#each ESTADO_CIVIL_OPTIONS as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						</div>
+
+						<!-- Nacionalidade -->
+						<div class="form-control">
+							<label class="label" for="nacionalidade">
+								<span class="label-text font-medium">Nacionalidade</span>
+							</label>
+							<input
+								id="nacionalidade"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={nacionalidade}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Card 2: Documentos Pessoais -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body space-y-4">
+					<h2 class="card-title border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
+							/>
+						</svg>
+						Documentos Pessoais
+					</h2>
+
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<!-- Carteira Profissional -->
+						<div class="form-control">
+							<label class="label" for="carteiraProfissionalNumero">
+								<span class="label-text font-medium">Carteira Profissional Nº</span>
+							</label>
+							<input
+								id="carteiraProfissionalNumero"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={carteiraProfissionalNumero}
+							/>
+						</div>
+
+						<div class="form-control">
+							<label class="label" for="carteiraProfissionalSerie">
+								<span class="label-text font-medium">Série</span>
+							</label>
+							<input
+								id="carteiraProfissionalSerie"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={carteiraProfissionalSerie}
+							/>
+						</div>
+
+						<div class="form-control">
+							<label class="label" for="carteiraProfissionalDataEmissao">
+								<span class="label-text font-medium">Data Emissão</span>
+							</label>
+							<input
+								id="carteiraProfissionalDataEmissao"
+								type="text"
+								inputmode="numeric"
+								placeholder="dd/mm/aaaa"
+								class="input input-bordered w-full"
+								value={carteiraProfissionalDataEmissao}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									carteiraProfissionalDataEmissao = maskDate(target.value);
+									target.value = carteiraProfissionalDataEmissao;
+								}}
+							/>
+						</div>
+
+						<!-- Reservista -->
+						<div class="form-control">
+							<label class="label" for="reservistaNumero">
+								<span class="label-text font-medium">Reservista Nº</span>
+							</label>
+							<input
+								id="reservistaNumero"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={reservistaNumero}
+							/>
+						</div>
+
+						<div class="form-control">
+							<label class="label" for="reservistaSerie">
+								<span class="label-text font-medium">Série</span>
+							</label>
+							<input
+								id="reservistaSerie"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={reservistaSerie}
+							/>
+						</div>
+
+						<!-- Título de Eleitor -->
+						<div class="form-control">
+							<label class="label" for="tituloEleitorNumero">
+								<span class="label-text font-medium">Título de Eleitor Nº</span>
+							</label>
+							<input
+								id="tituloEleitorNumero"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={tituloEleitorNumero}
+							/>
+						</div>
+
+						<div class="form-control">
+							<label class="label" for="tituloEleitorZona">
+								<span class="label-text font-medium">Zona</span>
+							</label>
+							<input
+								id="tituloEleitorZona"
+								type="text"
+								inputmode="numeric"
+								class="input input-bordered w-full"
+								bind:value={tituloEleitorZona}
+							/>
+						</div>
+
+						<div class="form-control">
+							<label class="label" for="tituloEleitorSecao">
+								<span class="label-text font-medium">Seção</span>
+							</label>
+							<input
+								id="tituloEleitorSecao"
+								type="text"
+								inputmode="numeric"
+								class="input input-bordered w-full"
+								bind:value={tituloEleitorSecao}
+							/>
+						</div>
+
+						<!-- PIS/PASEP -->
+						<div class="form-control">
+							<label class="label" for="pisNumero">
+								<span class="label-text font-medium">PIS/PASEP Nº</span>
+							</label>
+							<input
+								id="pisNumero"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={pisNumero}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Card 3: Formação e Saúde -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body space-y-4">
+					<h2 class="card-title border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+							/>
+						</svg>
+						Formação e Saúde
+					</h2>
+
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<!-- Grau de Instrução -->
+						<div class="form-control">
+							<label class="label" for="grauInstrucao">
+								<span class="label-text font-medium">Grau de Instrução</span>
+							</label>
+							<select
+								id="grauInstrucao"
+								class="select select-bordered w-full"
+								bind:value={grauInstrucao}
+							>
+								<option value="">Selecione...</option>
+								{#each GRAU_INSTRUCAO_OPTIONS as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						</div>
+
+						<!-- Formação -->
+						<div class="form-control">
+							<label class="label" for="formacao">
+								<span class="label-text font-medium">Formação/Curso</span>
+							</label>
+							<input
+								id="formacao"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={formacao}
+								placeholder="Ex: Administração"
+							/>
+						</div>
+
+						<!-- Registro Nº -->
+						<div class="form-control">
+							<label class="label" for="formacaoRegistro">
+								<span class="label-text font-medium">Registro Nº</span>
+							</label>
+							<input
+								id="formacaoRegistro"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={formacaoRegistro}
+								placeholder="Nº do registro profissional"
+							/>
+						</div>
+
+						<!-- Grupo Sanguíneo -->
+						<div class="form-control">
+							<label class="label" for="grupoSanguineo">
+								<span class="label-text font-medium">Grupo Sanguíneo</span>
+							</label>
+							<select
+								id="grupoSanguineo"
+								class="select select-bordered w-full"
+								bind:value={grupoSanguineo}
+							>
+								<option value="">Selecione...</option>
+								{#each GRUPO_SANGUINEO_OPTIONS as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						</div>
+
+						<!-- Fator RH -->
+						<div class="form-control">
+							<label class="label" for="fatorRH">
+								<span class="label-text font-medium">Fator RH</span>
+							</label>
+							<select id="fatorRH" class="select select-bordered w-full" bind:value={fatorRH}>
+								<option value="">Selecione...</option>
+								{#each FATOR_RH_OPTIONS as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Card 4: Endereço e Contato -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body space-y-4">
+					<h2 class="card-title border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							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>
+						Endereço e Contato
+					</h2>
+
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+						<!-- CEP -->
+						<div class="form-control">
+							<label class="label" for="cep">
+								<span class="label-text font-medium">CEP <span class="text-error">*</span></span>
+							</label>
+							<input
+								id="cep"
+								type="text"
+								inputmode="numeric"
+								class="input input-bordered w-full"
+								value={cep}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									cep = maskCEP(target.value);
+									target.value = cep;
+								}}
+								onblur={() => fillFromCEP(cep)}
+								required
+							/>
+						</div>
+
+						<!-- Cidade -->
+						<div class="form-control lg:col-span-2">
+							<label class="label" for="cidade">
+								<span class="label-text font-medium">Cidade <span class="text-error">*</span></span>
+							</label>
+							<input
+								id="cidade"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={cidade}
+								required
+							/>
+						</div>
+
+						<!-- UF -->
+						<div class="form-control">
+							<label class="label" for="uf">
+								<span class="label-text font-medium">UF <span class="text-error">*</span></span>
+							</label>
+							<select id="uf" class="select select-bordered w-full" bind:value={uf} required>
+								<option value="">Selecione...</option>
+								{#each UFS_BRASIL as ufOption}
+									<option value={ufOption}>{ufOption}</option>
+								{/each}
+							</select>
+						</div>
+
+						<!-- Endereço -->
+						<div class="form-control lg:col-span-4">
+							<label class="label" for="endereco">
+								<span class="label-text font-medium"
+									>Endereço <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								id="endereco"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={endereco}
+								required
+							/>
+						</div>
+
+						<!-- E-mail -->
+						<div class="form-control lg:col-span-2">
+							<label class="label" for="email">
+								<span class="label-text font-medium">E-mail <span class="text-error">*</span></span>
+							</label>
+							<input
+								id="email"
+								type="email"
+								class="input input-bordered w-full"
+								bind:value={email}
+								required
+							/>
+						</div>
+
+						<!-- Telefone -->
+						<div class="form-control lg:col-span-2">
+							<label class="label" for="telefone">
+								<span class="label-text font-medium"
+									>Telefone <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								id="telefone"
+								type="text"
+								inputmode="numeric"
+								class="input input-bordered w-full"
+								value={telefone}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									telefone = maskPhone(target.value);
+									target.value = telefone;
+								}}
+								required
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Card 5: Cargo e Vínculo -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body space-y-4">
+					<h2 class="card-title border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+							/>
+						</svg>
+						Cargo e Vínculo
+					</h2>
+
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<!-- Símbolo Tipo -->
+						<div class="form-control">
+							<label class="label" for="simboloTipo">
+								<span class="label-text font-medium"
+									>Símbolo Tipo <span class="text-error">*</span></span
+								>
+							</label>
+							<select
+								id="simboloTipo"
+								class="select select-bordered w-full"
+								bind:value={tipo}
+								required
+							>
+								<option value="cargo_comissionado">Cargo Comissionado</option>
+								<option value="funcao_gratificada">Função Gratificada</option>
+							</select>
+						</div>
+
+						<!-- Símbolo -->
+						<div class="form-control">
+							<label class="label" for="simboloId">
+								<span class="label-text font-medium">Símbolo <span class="text-error">*</span></span
+								>
+							</label>
+							<select
+								id="simboloId"
+								class="select select-bordered w-full"
+								bind:value={simboloId}
+								required
+							>
+								<option value="">Selecione...</option>
+								{#each simbolos.filter((s) => s.tipo === tipo) as s}
+									<option value={s._id}>{s.nome} — {s.descricao}</option>
+								{/each}
+							</select>
+						</div>
+
+						<!-- Descrição Cargo/Função -->
+						<div class="form-control lg:col-span-3">
+							<label class="label" for="descricaoCargo">
+								<span class="label-text font-medium">Descrição Cargo/Função</span>
+							</label>
+							<input
+								id="descricaoCargo"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={descricaoCargo}
+								placeholder="Descreva as atribuições do cargo"
+							/>
+						</div>
+
+						<!-- Nomeação/Portaria -->
+						<div class="form-control">
+							<label class="label" for="nomeacaoPortaria">
+								<span class="label-text font-medium">Nomeação/Portaria Nº</span>
+							</label>
+							<input
+								id="nomeacaoPortaria"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={nomeacaoPortaria}
+							/>
+						</div>
+
+						<div class="form-control">
+							<label class="label" for="nomeacaoData">
+								<span class="label-text font-medium">Data</span>
+							</label>
+							<input
+								id="nomeacaoData"
+								type="text"
+								inputmode="numeric"
+								placeholder="dd/mm/aaaa"
+								class="input input-bordered w-full"
+								value={nomeacaoData}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									nomeacaoData = maskDate(target.value);
+									target.value = nomeacaoData;
+								}}
+							/>
+						</div>
+
+						<div class="form-control">
+							<label class="label" for="nomeacaoDOE">
+								<span class="label-text font-medium">DOE</span>
+							</label>
+							<input
+								id="nomeacaoDOE"
+								type="text"
+								inputmode="numeric"
+								placeholder="dd/mm/aaaa"
+								class="input input-bordered w-full"
+								value={nomeacaoDOE}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									nomeacaoDOE = maskDate(target.value);
+									target.value = nomeacaoDOE;
+								}}
+							/>
+						</div>
+
+						<!-- Data Admissão -->
+						<div class="form-control">
+							<label class="label" for="admissaoData">
+								<span class="label-text font-medium">Data Admissão</span>
+							</label>
+							<input
+								id="admissaoData"
+								type="text"
+								inputmode="numeric"
+								placeholder="dd/mm/aaaa"
+								class="input input-bordered w-full"
+								value={admissaoData}
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									admissaoData = maskDate(target.value);
+									target.value = admissaoData;
+								}}
+							/>
+						</div>
+
+						<!-- Pertence a Órgão Público -->
+						<div class="form-control lg:col-span-3">
+							<label class="label cursor-pointer justify-start gap-4">
+								<input
+									type="checkbox"
+									class="checkbox checkbox-primary"
+									bind:checked={pertenceOrgaoPublico}
+								/>
+								<span class="label-text font-medium"
+									>Pertence a Órgão Público Federal, Estadual ou Municipal?</span
+								>
+							</label>
+						</div>
+
+						<!-- Órgão de Origem -->
+						{#if pertenceOrgaoPublico}
+							<div class="form-control lg:col-span-2">
+								<label class="label" for="orgaoOrigem">
+									<span class="label-text font-medium"
+										>Órgão de Origem (para servidor extra-quadro)</span
+									>
+								</label>
+								<input
+									id="orgaoOrigem"
+									type="text"
+									class="input input-bordered w-full"
+									bind:value={orgaoOrigem}
+								/>
+							</div>
+						{/if}
+
+						<!-- Aposentado -->
+						<div class="form-control">
+							<label class="label" for="aposentado">
+								<span class="label-text font-medium">Se Aposentado</span>
+							</label>
+							<select id="aposentado" class="select select-bordered w-full" bind:value={aposentado}>
+								{#each APOSENTADO_OPTIONS as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Card 6: Dados Bancários -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body space-y-4">
+					<h2 class="card-title border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+							/>
+						</svg>
+						Dados Bancários - Bradesco
+					</h2>
+
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+						<!-- Conta Corrente -->
+						<div class="form-control">
+							<label class="label" for="contaBradescoNumero">
+								<span class="label-text font-medium">Conta Corrente Nº</span>
+							</label>
+							<input
+								id="contaBradescoNumero"
+								type="text"
+								inputmode="numeric"
+								class="input input-bordered w-full"
+								bind:value={contaBradescoNumero}
+							/>
+						</div>
+
+						<!-- DV -->
+						<div class="form-control">
+							<label class="label" for="contaBradescoDV">
+								<span class="label-text font-medium">DV</span>
+							</label>
+							<input
+								id="contaBradescoDV"
+								type="text"
+								maxlength="2"
+								class="input input-bordered w-full"
+								bind:value={contaBradescoDV}
+							/>
+						</div>
+
+						<!-- Agência -->
+						<div class="form-control">
+							<label class="label" for="contaBradescoAgencia">
+								<span class="label-text font-medium">Agência</span>
+							</label>
+							<input
+								id="contaBradescoAgencia"
+								type="text"
+								inputmode="numeric"
+								class="input input-bordered w-full"
+								bind:value={contaBradescoAgencia}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Modelos de Declarações -->
+			{#if !loadingData}
+				<ModelosDeclaracoes
+					funcionario={{
+						_id: funcionarioId,
+						nome,
+						cpf: onlyDigits(cpf),
+						rg: onlyDigits(rg),
+						nascimento,
+						email,
+						telefone: onlyDigits(telefone),
+						endereco,
+						cep: onlyDigits(cep),
+						cidade,
+						uf,
+						matricula,
+						descricaoCargo,
+						nomeacaoPortaria,
+						nomeacaoData,
+						nomeacaoDOE,
+						orgaoOrigem,
+						aposentado,
+						contaBradescoNumero,
+						contaBradescoDV,
+						contaBradescoAgencia
+					}}
+					showPreencherButton={true}
+				/>
+			{/if}
+
+			<!-- Card 7: Documentação Anexa -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body space-y-6">
+					<h2 class="card-title border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+							/>
+						</svg>
+						Documentação Anexa
+					</h2>
+
+					<p class="text-base-content/70 text-sm">
+						Anexe os documentos necessários em formato PDF ou imagem (máximo 10MB cada)
+					</p>
+
+					{#each categoriasDocumentos as categoria}
+						<div class="space-y-3">
+							<h3 class="text-primary text-lg font-semibold">{categoria}</h3>
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+								{#each getDocumentosByCategoria(categoria) as doc}
+									<FileUpload
+										label={doc.nome}
+										helpUrl={doc.helpUrl}
+										value={documentosStorage[doc.campo]}
+										onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
+										onRemove={() => handleDocumentoRemove(doc.campo)}
+										disabled={loading}
+									/>
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Card 7.5: Cursos e Treinamentos -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body space-y-4">
+					<h2 class="card-title border-b pb-3 text-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+							/>
+						</svg>
+						Cursos e Treinamentos
+					</h2>
+
+					<p class="text-base-content/70 text-sm">
+						Gerencie cursos e treinamentos do funcionário (até 7 cursos)
+					</p>
+
+					{#if cursos.filter((c) => !c.marcadoParaExcluir).length > 0}
+						<div class="space-y-2">
+							<h3 class="text-sm font-semibold">
+								Cursos cadastrados ({cursos.filter((c) => !c.marcadoParaExcluir).length}/7)
+							</h3>
+							{#each cursos.filter((c) => !c.marcadoParaExcluir) as curso}
+								<div class="bg-base-200 flex items-center gap-3 rounded-lg p-3">
+									<div class="flex-1">
+										<p class="text-sm font-semibold">{curso.descricao}</p>
+										<p class="text-base-content/70 text-xs">{curso.data}</p>
+										{#if curso.certificadoId}
+											<p class="text-success text-xs">✓ Com certificado</p>
+										{/if}
+									</div>
+									<button
+										type="button"
+										class="btn btn-sm btn-error btn-square"
+										aria-label="Remover curso"
+										onclick={() => removerCurso(curso.id)}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M6 18L18 6M6 6l12 12"
+											/>
+										</svg>
+									</button>
+								</div>
+							{/each}
+						</div>
+					{/if}
+
+					{#if cursos.filter((c) => !c.marcadoParaExcluir).length < 7}
+						<div class="collapse-arrow border-base-300 bg-base-200 collapse border">
+							<input type="checkbox" bind:checked={mostrarFormularioCurso} />
+							<div class="collapse-title font-medium">Adicionar Curso/Treinamento</div>
+							<div class="collapse-content">
+								<div class="space-y-3 pt-2">
+									<div class="form-control">
+										<label class="label" for="curso-descricao-edit">
+											<span class="label-text font-medium">Descrição do Curso</span>
+										</label>
+										<input
+											id="curso-descricao-edit"
+											type="text"
+											class="input input-bordered w-full"
+											bind:value={cursoAtual.descricao}
+											placeholder="Ex: Gestão de Projetos"
+										/>
+									</div>
+
+									<div class="form-control">
+										<label class="label" for="curso-data-edit">
+											<span class="label-text font-medium">Data de Conclusão</span>
+										</label>
+										<input
+											id="curso-data-edit"
+											type="text"
+											class="input input-bordered w-full"
+											bind:value={cursoAtual.data}
+											placeholder="Ex: 01/2024"
+											onchange={(e) => (cursoAtual.data = maskDate(e.currentTarget.value))}
+										/>
+									</div>
+
+									<div class="form-control">
+										<label class="label" for="curso-certificado-edit">
+											<span class="label-text font-medium">Certificado/Diploma (opcional)</span>
+										</label>
+										<input
+											id="curso-certificado-edit"
+											type="file"
+											class="file-input file-input-bordered w-full"
+											accept=".pdf,.jpg,.jpeg,.png"
+											onchange={(e) => {
+												const file = e.currentTarget.files?.[0];
+												if (file) cursoAtual.arquivo = file;
+											}}
+										/>
+									</div>
+
+									<button
+										type="button"
+										class="btn btn-primary btn-sm mt-2 gap-2"
+										onclick={adicionarCurso}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M12 4v16m8-8H4"
+											/>
+										</svg>
+										Adicionar à Lista
+									</button>
+								</div>
+							</div>
+						</div>
+					{:else}
+						<div class="alert alert-info">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								></path>
+							</svg>
+							<span>Limite de 7 cursos atingido</span>
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Card 8: Ações -->
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body">
+					<div class="flex flex-col justify-end gap-3 sm:flex-row">
+						<button
+							type="button"
+							class="btn btn-lg"
+							disabled={loading}
+							onclick={() => goto('/recursos-humanos/funcionarios')}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+							Cancelar
+						</button>
+						<button type="submit" class="btn btn-primary btn-lg" disabled={loading}>
+							{#if loading}
+								<span class="loading loading-spinner"></span>
+								Atualizando...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+								Atualizar Funcionário
+							{/if}
+						</button>
+					</div>
+				</div>
+			</div>
+		</form>
+	</main>
+{/if}
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte
index d7cde28..8611298 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte
@@ -1,1570 +1,1926 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
-  import FileUpload from "$lib/components/FileUpload.svelte";
-  import { 
-    maskCPF, maskCEP, maskPhone, maskDate, maskUF, onlyDigits,
-    validateCPF, validateDate 
-  } from "$lib/utils/masks";
-  import { 
-    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
-    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS, UFS_BRASIL
-  } from "$lib/utils/constants";
-  import { documentos, categoriasDocumentos, getDocumentosByCategoria } from "$lib/utils/documentos";
-  import ModelosDeclaracoes from "$lib/components/ModelosDeclaracoes.svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { goto } from '$app/navigation';
+	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
+	import FileUpload from '$lib/components/FileUpload.svelte';
+	import {
+		maskCPF,
+		maskCEP,
+		maskPhone,
+		maskDate,
+		maskUF,
+		onlyDigits,
+		validateCPF,
+		validateDate
+	} from '$lib/utils/masks';
+	import {
+		SEXO_OPTIONS,
+		ESTADO_CIVIL_OPTIONS,
+		GRAU_INSTRUCAO_OPTIONS,
+		GRUPO_SANGUINEO_OPTIONS,
+		FATOR_RH_OPTIONS,
+		APOSENTADO_OPTIONS,
+		UFS_BRASIL
+	} from '$lib/utils/constants';
+	import {
+		documentos,
+		categoriasDocumentos,
+		getDocumentosByCategoria
+	} from '$lib/utils/documentos';
+	import ModelosDeclaracoes from '$lib/components/ModelosDeclaracoes.svelte';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let simbolos: Array<{
-    _id: string;
-    nome: string;
-    tipo: SimboloTipo;
-    descricao: string;
-  }> = $state([]);
+	let simbolos: Array<{
+		_id: string;
+		nome: string;
+		tipo: SimboloTipo;
+		descricao: string;
+	}> = $state([]);
 
-  let tipo = $state<SimboloTipo>("cargo_comissionado");
-  let loading = $state(false);
-  let notice = $state<{ kind: "success" | "error"; text: string } | null>(null);
-  
-  // Campos obrigatórios
-  let nome = $state("");
-  let matricula = $state("");
-  let cpf = $state("");
-  let rg = $state("");
-  let nascimento = $state("");
-  let email = $state("");
-  let telefone = $state("");
-  let endereco = $state("");
-  let cep = $state("");
-  let cidade = $state("");
-  let uf = $state("");
-  let simboloId = $state("");
-  let admissaoData = $state("");
-  
-  // Dados Pessoais Adicionais
-  let nomePai = $state("");
-  let nomeMae = $state("");
-  let naturalidade = $state("");
-  let naturalidadeUF = $state("");
-  let sexo = $state("");
-  let estadoCivil = $state("");
-  let nacionalidade = $state("Brasileira");
-  
-  // Documentos Pessoais
-  let rgOrgaoExpedidor = $state("");
-  let rgDataEmissao = $state("");
-  let carteiraProfissionalNumero = $state("");
-  let carteiraProfissionalSerie = $state("");
-  let carteiraProfissionalDataEmissao = $state("");
-  let reservistaNumero = $state("");
-  let reservistaSerie = $state("");
-  let tituloEleitorNumero = $state("");
-  let tituloEleitorZona = $state("");
-  let tituloEleitorSecao = $state("");
-  let pisNumero = $state("");
-  
-  // Formação e Saúde
-  let grauInstrucao = $state("");
-  let formacao = $state("");
-  let formacaoRegistro = $state("");
-  let grupoSanguineo = $state("");
-  let fatorRH = $state("");
-  
-  // Cargo e Vínculo
-  let descricaoCargo = $state("");
-  let nomeacaoPortaria = $state("");
-  let nomeacaoData = $state("");
-  let nomeacaoDOE = $state("");
-  let pertenceOrgaoPublico = $state(false);
-  let orgaoOrigem = $state("");
-  let aposentado = $state("nao");
-  
-  // Dados Bancários
-  let contaBradescoNumero = $state("");
-  let contaBradescoDV = $state("");
-  let contaBradescoAgencia = $state("");
-  
-  // Documentos (Storage IDs)
-  let documentosStorage: Record<string, string | undefined> = $state({});
+	let tipo = $state<SimboloTipo>('cargo_comissionado');
+	let loading = $state(false);
+	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
 
-  // Cursos e Treinamentos
-  let cursos = $state<Array<{
-    id: string;
-    descricao: string;
-    data: string;
-    certificadoId?: string;
-  }>>([]);
-  let mostrarFormularioCurso = $state(false);
-  let cursoAtual = $state({ descricao: "", data: "", arquivo: null as File | null });
+	// Campos obrigatórios
+	let nome = $state('');
+	let matricula = $state('');
+	let cpf = $state('');
+	let rg = $state('');
+	let nascimento = $state('');
+	let email = $state('');
+	let telefone = $state('');
+	let endereco = $state('');
+	let cep = $state('');
+	let cidade = $state('');
+	let uf = $state('');
+	let simboloId = $state('');
+	let admissaoData = $state('');
 
-  // Dependentes
-  let dependentes = $state<Array<{ id: string; parentesco: string; nome: string; cpf: string; nascimento: string; documentoId?: string; salarioFamilia?: boolean; impostoRenda?: boolean }>>([]);
-  let mostrarFormularioDependente = $state(false);
-  let dependenteAtual = $state<{ parentesco: string; nome: string; cpf: string; nascimento: string; arquivo: File | null; documentoId?: string; salarioFamilia?: boolean; impostoRenda?: boolean }>({
-    parentesco: "",
-    nome: "",
-    cpf: "",
-    nascimento: "",
-    arquivo: null,
-    documentoId: undefined,
-    salarioFamilia: false,
-    impostoRenda: false,
-  });
+	// Dados Pessoais Adicionais
+	let nomePai = $state('');
+	let nomeMae = $state('');
+	let naturalidade = $state('');
+	let naturalidadeUF = $state('');
+	let sexo = $state('');
+	let estadoCivil = $state('');
+	let nacionalidade = $state('Brasileira');
 
-  function adicionarCurso() {
-    if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
-      alert("Preencha a descrição e a data do curso");
-      return;
-    }
-    cursos.push({
-      id: crypto.randomUUID(),
-      descricao: cursoAtual.descricao,
-      data: cursoAtual.data,
-      certificadoId: undefined
-    });
-    cursoAtual = { descricao: "", data: "", arquivo: null };
-  }
+	// Documentos Pessoais
+	let rgOrgaoExpedidor = $state('');
+	let rgDataEmissao = $state('');
+	let carteiraProfissionalNumero = $state('');
+	let carteiraProfissionalSerie = $state('');
+	let carteiraProfissionalDataEmissao = $state('');
+	let reservistaNumero = $state('');
+	let reservistaSerie = $state('');
+	let tituloEleitorNumero = $state('');
+	let tituloEleitorZona = $state('');
+	let tituloEleitorSecao = $state('');
+	let pisNumero = $state('');
 
-  function removerCurso(id: string) {
-    cursos = cursos.filter(c => c.id !== id);
-  }
+	// Formação e Saúde
+	let grauInstrucao = $state('');
+	let formacao = $state('');
+	let formacaoRegistro = $state('');
+	let grupoSanguineo = $state('');
+	let fatorRH = $state('');
 
-  async function uploadCertificado(file: File): Promise<string> {
-    const storageId = await client.mutation(api.documentos.generateUploadUrl, {});
-    const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-    const response = await fetch(uploadUrl, {
-      method: "POST",
-      headers: { "Content-Type": file.type },
-      body: file,
-    });
-    const result = await response.json();
-    return result.storageId;
-  }
+	// Cargo e Vínculo
+	let descricaoCargo = $state('');
+	let nomeacaoPortaria = $state('');
+	let nomeacaoData = $state('');
+	let nomeacaoDOE = $state('');
+	let pertenceOrgaoPublico = $state(false);
+	let orgaoOrigem = $state('');
+	let aposentado = $state('nao');
 
-  async function uploadDocumentoDependente(file: File): Promise<string> {
-    const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-    const response = await fetch(uploadUrl, {
-      method: "POST",
-      headers: { "Content-Type": file.type },
-      body: file,
-    });
-    const result = await response.json();
-    return result.storageId as string;
-  }
+	// Dados Bancários
+	let contaBradescoNumero = $state('');
+	let contaBradescoDV = $state('');
+	let contaBradescoAgencia = $state('');
 
-  function adicionarDependente() {
-    if (dependentes.length >= 10) {
-      alert("Limite de 10 dependentes atingido");
-      return;
-    }
-    if (!dependenteAtual.parentesco || !dependenteAtual.nome.trim() || !dependenteAtual.cpf.trim() || !dependenteAtual.nascimento.trim()) {
-      alert("Preencha Parentesco, Nome, CPF e Data de Nascimento do dependente");
-      return;
-    }
-    if (!validateCPF(dependenteAtual.cpf)) {
-      alert("CPF do dependente inválido");
-      return;
-    }
-    if (!validateDate(dependenteAtual.nascimento)) {
-      alert("Data de nascimento do dependente inválida");
-      return;
-    }
-    dependentes.push({
-      id: crypto.randomUUID(),
-      parentesco: dependenteAtual.parentesco,
-      nome: dependenteAtual.nome.trim(),
-      cpf: onlyDigits(dependenteAtual.cpf),
-      nascimento: dependenteAtual.nascimento,
-      documentoId: dependenteAtual.documentoId,
-      salarioFamilia: !!dependenteAtual.salarioFamilia,
-      impostoRenda: !!dependenteAtual.impostoRenda,
-    });
-    dependenteAtual = { parentesco: "", nome: "", cpf: "", nascimento: "", arquivo: null, documentoId: undefined, salarioFamilia: false, impostoRenda: false };
-  }
+	// Documentos (Storage IDs)
+	let documentosStorage: Record<string, string | undefined> = $state({});
 
-  function removerDependente(id: string) {
-    dependentes = dependentes.filter((d) => d.id !== id);
-  }
+	// Cursos e Treinamentos
+	let cursos = $state<
+		Array<{
+			id: string;
+			descricao: string;
+			data: string;
+			certificadoId?: string;
+		}>
+	>([]);
+	let mostrarFormularioCurso = $state(false);
+	let cursoAtual = $state({ descricao: '', data: '', arquivo: null as File | null });
 
-  async function loadSimbolos() {
-    const list = await client.query(api.simbolos.getAll, {} as any);
-    simbolos = list.map((s: any) => ({ 
-      _id: s._id, 
-      nome: s.nome, 
-      tipo: s.tipo, 
-      descricao: s.descricao 
-    }));
-  }
+	// Dependentes
+	let dependentes = $state<
+		Array<{
+			id: string;
+			parentesco: string;
+			nome: string;
+			cpf: string;
+			nascimento: string;
+			documentoId?: string;
+			salarioFamilia?: boolean;
+			impostoRenda?: boolean;
+		}>
+	>([]);
+	let mostrarFormularioDependente = $state(false);
+	let dependenteAtual = $state<{
+		parentesco: string;
+		nome: string;
+		cpf: string;
+		nascimento: string;
+		arquivo: File | null;
+		documentoId?: string;
+		salarioFamilia?: boolean;
+		impostoRenda?: boolean;
+	}>({
+		parentesco: '',
+		nome: '',
+		cpf: '',
+		nascimento: '',
+		arquivo: null,
+		documentoId: undefined,
+		salarioFamilia: false,
+		impostoRenda: false
+	});
 
-  async function fillFromCEP(cepValue: string) {
-    const cepDigits = onlyDigits(cepValue);
-    if (cepDigits.length !== 8) return;
-    
-    try {
-      const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
-      const data = await res.json();
-      if (!data || data.erro) return;
-      
-      const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(", ");
-      endereco = enderecoFull;
-      cidade = data.localidade || "";
-      uf = data.uf || "";
-    } catch {}
-  }
+	function adicionarCurso() {
+		if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
+			alert('Preencha a descrição e a data do curso');
+			return;
+		}
+		cursos.push({
+			id: crypto.randomUUID(),
+			descricao: cursoAtual.descricao,
+			data: cursoAtual.data,
+			certificadoId: undefined
+		});
+		cursoAtual = { descricao: '', data: '', arquivo: null };
+	}
 
-  async function handleDocumentoUpload(campo: string, file: File) {
-    try {
-      // Gerar URL de upload
-      const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-      
-      // Fazer upload do arquivo
-      const result = await fetch(uploadUrl, {
-        method: "POST",
-        headers: { "Content-Type": file.type },
-        body: file,
-      });
-      
-      const { storageId } = await result.json();
-      documentosStorage[campo] = storageId;
-    } catch (err: any) {
-      throw new Error(err?.message || "Erro ao fazer upload");
-    }
-  }
+	function removerCurso(id: string) {
+		cursos = cursos.filter((c) => c.id !== id);
+	}
 
-  async function handleDocumentoRemove(campo: string) {
-    documentosStorage[campo] = undefined;
-  }
+	async function uploadCertificado(file: File): Promise<string> {
+		const storageId = await client.mutation(api.documentos.generateUploadUrl, {});
+		const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+		const response = await fetch(uploadUrl, {
+			method: 'POST',
+			headers: { 'Content-Type': file.type },
+			body: file
+		});
+		const result = await response.json();
+		return result.storageId;
+	}
 
-  async function handleSubmit() {
-    // Validação básica
-    if (!nome || !cpf || !rg || !nascimento || !email || !telefone) {
-      notice = { kind: "error", text: "Preencha todos os campos obrigatórios" };
-      return;
-    }
-    
-    if (!validateCPF(cpf)) {
-      notice = { kind: "error", text: "CPF inválido" };
-      return;
-    }
-    
-    if (!validateDate(nascimento)) {
-      notice = { kind: "error", text: "Data de nascimento inválida" };
-      return;
-    }
-    
-    if (!simboloId) {
-      notice = { kind: "error", text: "Selecione um símbolo" };
-      return;
-    }
+	async function uploadDocumentoDependente(file: File): Promise<string> {
+		const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+		const response = await fetch(uploadUrl, {
+			method: 'POST',
+			headers: { 'Content-Type': file.type },
+			body: file
+		});
+		const result = await response.json();
+		return result.storageId as string;
+	}
 
-    try {
-      loading = true;
-      
-      const payload = {
-        nome,
-        matricula: matricula.trim() || undefined,
-        cpf: onlyDigits(cpf),
-        rg: onlyDigits(rg),
-        nascimento,
-        email,
-        telefone: onlyDigits(telefone),
-        endereco,
-        cep: onlyDigits(cep),
-        cidade,
-        uf: uf.toUpperCase(),
-        simboloId: simboloId as any,
-        simboloTipo: tipo,
-        admissaoData: admissaoData || undefined,
-        desligamentoData: undefined,
-        
-        // Dados Pessoais Adicionais
-        nomePai: nomePai || undefined,
-        nomeMae: nomeMae || undefined,
-        naturalidade: naturalidade || undefined,
-        naturalidadeUF: naturalidadeUF ? naturalidadeUF.toUpperCase() : undefined,
-        sexo: sexo || undefined,
-        estadoCivil: estadoCivil || undefined,
-        nacionalidade: nacionalidade || undefined,
-        
-        // Documentos Pessoais
-        rgOrgaoExpedidor: rgOrgaoExpedidor || undefined,
-        rgDataEmissao: rgDataEmissao || undefined,
-        carteiraProfissionalNumero: carteiraProfissionalNumero || undefined,
-        carteiraProfissionalSerie: carteiraProfissionalSerie || undefined,
-        carteiraProfissionalDataEmissao: carteiraProfissionalDataEmissao || undefined,
-        reservistaNumero: reservistaNumero || undefined,
-        reservistaSerie: reservistaSerie || undefined,
-        tituloEleitorNumero: tituloEleitorNumero || undefined,
-        tituloEleitorZona: tituloEleitorZona || undefined,
-        tituloEleitorSecao: tituloEleitorSecao || undefined,
-        pisNumero: pisNumero || undefined,
-        
-        // Formação e Saúde
-        grauInstrucao: grauInstrucao || undefined,
-        formacao: formacao || undefined,
-        formacaoRegistro: formacaoRegistro || undefined,
-        grupoSanguineo: grupoSanguineo || undefined,
-        fatorRH: fatorRH || undefined,
-        
-        // Cargo e Vínculo
-        descricaoCargo: descricaoCargo || undefined,
-        nomeacaoPortaria: nomeacaoPortaria || undefined,
-        nomeacaoData: nomeacaoData || undefined,
-        nomeacaoDOE: nomeacaoDOE || undefined,
-        pertenceOrgaoPublico: pertenceOrgaoPublico || undefined,
-        orgaoOrigem: orgaoOrigem || undefined,
-        aposentado: aposentado || undefined,
-        
-        // Dados Bancários
-        contaBradescoNumero: contaBradescoNumero || undefined,
-        contaBradescoDV: contaBradescoDV || undefined,
-        contaBradescoAgencia: contaBradescoAgencia || undefined,
-        
-        // Documentos
-        ...Object.fromEntries(
-          Object.entries(documentosStorage).map(([key, value]) => [key, value as any])
-        ),
-        // Dependentes (opcional)
-        dependentes: dependentes.length
-          ? dependentes.map((d) => ({
-              parentesco: d.parentesco,
-              nome: d.nome,
-              cpf: d.cpf,
-              nascimento: d.nascimento,
-              documentoId: d.documentoId as any,
-              salarioFamilia: !!d.salarioFamilia,
-              impostoRenda: !!d.impostoRenda,
-            }))
-          : undefined,
-      };
+	function adicionarDependente() {
+		if (dependentes.length >= 10) {
+			alert('Limite de 10 dependentes atingido');
+			return;
+		}
+		if (
+			!dependenteAtual.parentesco ||
+			!dependenteAtual.nome.trim() ||
+			!dependenteAtual.cpf.trim() ||
+			!dependenteAtual.nascimento.trim()
+		) {
+			alert('Preencha Parentesco, Nome, CPF e Data de Nascimento do dependente');
+			return;
+		}
+		if (!validateCPF(dependenteAtual.cpf)) {
+			alert('CPF do dependente inválido');
+			return;
+		}
+		if (!validateDate(dependenteAtual.nascimento)) {
+			alert('Data de nascimento do dependente inválida');
+			return;
+		}
+		dependentes.push({
+			id: crypto.randomUUID(),
+			parentesco: dependenteAtual.parentesco,
+			nome: dependenteAtual.nome.trim(),
+			cpf: onlyDigits(dependenteAtual.cpf),
+			nascimento: dependenteAtual.nascimento,
+			documentoId: dependenteAtual.documentoId,
+			salarioFamilia: !!dependenteAtual.salarioFamilia,
+			impostoRenda: !!dependenteAtual.impostoRenda
+		});
+		dependenteAtual = {
+			parentesco: '',
+			nome: '',
+			cpf: '',
+			nascimento: '',
+			arquivo: null,
+			documentoId: undefined,
+			salarioFamilia: false,
+			impostoRenda: false
+		};
+	}
 
-      const novoFuncionarioId = await client.mutation(api.funcionarios.create, payload as any);
-      
-      // Salvar cursos, se houver
-      for (const curso of cursos) {
-        let certificadoId = curso.certificadoId;
-        // Se houver arquivo para upload, fazer o upload
-        if (cursoAtual.arquivo && curso.id === cursos[cursos.length - 1].id) {
-          try {
-            certificadoId = await uploadCertificado(cursoAtual.arquivo);
-          } catch (err) {
-            console.error("Erro ao fazer upload do certificado:", err);
-          }
-        }
-        
-        await client.mutation(api.cursos.criar, {
-          funcionarioId: novoFuncionarioId,
-          descricao: curso.descricao,
-          data: curso.data,
-          certificadoId: certificadoId as any,
-        });
-      }
-      
-      notice = { kind: "success", text: "Funcionário cadastrado com sucesso!" };
-      setTimeout(() => goto("/recursos-humanos/funcionarios"), 600);
-    } catch (e: any) {
-      const msg = e?.message || String(e);
-      if (/CPF j[aá] cadastrado/i.test(msg)) {
-        notice = { kind: "error", text: "CPF já cadastrado." };
-      } else if (/Matr[ií]cula j[aá] cadastrada/i.test(msg)) {
-        notice = { kind: "error", text: "Matrícula já cadastrada." };
-      } else {
-        notice = { kind: "error", text: "Erro ao cadastrar funcionário." };
-      }
-    } finally {
-      loading = false;
-    }
-  }
+	function removerDependente(id: string) {
+		dependentes = dependentes.filter((d) => d.id !== id);
+	}
 
-  $effect(() => {
-    loadSimbolos();
-  });
+	async function loadSimbolos() {
+		const list = await client.query(api.simbolos.getAll, {} as any);
+		simbolos = list.map((s: any) => ({
+			_id: s._id,
+			nome: s.nome,
+			tipo: s.tipo,
+			descricao: s.descricao
+		}));
+	}
 
-  // Resetar simboloId quando tipo mudar
-  $effect(() => {
-    tipo; // track tipo
-    simboloId = ""; // reset selection when tipo changes
-  });
+	async function fillFromCEP(cepValue: string) {
+		const cepDigits = onlyDigits(cepValue);
+		if (cepDigits.length !== 8) return;
+
+		try {
+			const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
+			const data = await res.json();
+			if (!data || data.erro) return;
+
+			const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(', ');
+			endereco = enderecoFull;
+			cidade = data.localidade || '';
+			uf = data.uf || '';
+		} catch {}
+	}
+
+	async function handleDocumentoUpload(campo: string, file: File) {
+		try {
+			// Gerar URL de upload
+			const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+
+			// Fazer upload do arquivo
+			const result = await fetch(uploadUrl, {
+				method: 'POST',
+				headers: { 'Content-Type': file.type },
+				body: file
+			});
+
+			const { storageId } = await result.json();
+			documentosStorage[campo] = storageId;
+		} catch (err: any) {
+			throw new Error(err?.message || 'Erro ao fazer upload');
+		}
+	}
+
+	async function handleDocumentoRemove(campo: string) {
+		documentosStorage[campo] = undefined;
+	}
+
+	async function handleSubmit() {
+		// Validação básica
+		if (!nome || !cpf || !rg || !nascimento || !email || !telefone) {
+			notice = { kind: 'error', text: 'Preencha todos os campos obrigatórios' };
+			return;
+		}
+
+		if (!validateCPF(cpf)) {
+			notice = { kind: 'error', text: 'CPF inválido' };
+			return;
+		}
+
+		if (!validateDate(nascimento)) {
+			notice = { kind: 'error', text: 'Data de nascimento inválida' };
+			return;
+		}
+
+		if (!simboloId) {
+			notice = { kind: 'error', text: 'Selecione um símbolo' };
+			return;
+		}
+
+		try {
+			loading = true;
+
+			const payload = {
+				nome,
+				matricula: matricula.trim() || undefined,
+				cpf: onlyDigits(cpf),
+				rg: onlyDigits(rg),
+				nascimento,
+				email,
+				telefone: onlyDigits(telefone),
+				endereco,
+				cep: onlyDigits(cep),
+				cidade,
+				uf: uf.toUpperCase(),
+				simboloId: simboloId as any,
+				simboloTipo: tipo,
+				admissaoData: admissaoData || undefined,
+				desligamentoData: undefined,
+
+				// Dados Pessoais Adicionais
+				nomePai: nomePai || undefined,
+				nomeMae: nomeMae || undefined,
+				naturalidade: naturalidade || undefined,
+				naturalidadeUF: naturalidadeUF ? naturalidadeUF.toUpperCase() : undefined,
+				sexo: sexo || undefined,
+				estadoCivil: estadoCivil || undefined,
+				nacionalidade: nacionalidade || undefined,
+
+				// Documentos Pessoais
+				rgOrgaoExpedidor: rgOrgaoExpedidor || undefined,
+				rgDataEmissao: rgDataEmissao || undefined,
+				carteiraProfissionalNumero: carteiraProfissionalNumero || undefined,
+				carteiraProfissionalSerie: carteiraProfissionalSerie || undefined,
+				carteiraProfissionalDataEmissao: carteiraProfissionalDataEmissao || undefined,
+				reservistaNumero: reservistaNumero || undefined,
+				reservistaSerie: reservistaSerie || undefined,
+				tituloEleitorNumero: tituloEleitorNumero || undefined,
+				tituloEleitorZona: tituloEleitorZona || undefined,
+				tituloEleitorSecao: tituloEleitorSecao || undefined,
+				pisNumero: pisNumero || undefined,
+
+				// Formação e Saúde
+				grauInstrucao: grauInstrucao || undefined,
+				formacao: formacao || undefined,
+				formacaoRegistro: formacaoRegistro || undefined,
+				grupoSanguineo: grupoSanguineo || undefined,
+				fatorRH: fatorRH || undefined,
+
+				// Cargo e Vínculo
+				descricaoCargo: descricaoCargo || undefined,
+				nomeacaoPortaria: nomeacaoPortaria || undefined,
+				nomeacaoData: nomeacaoData || undefined,
+				nomeacaoDOE: nomeacaoDOE || undefined,
+				pertenceOrgaoPublico: pertenceOrgaoPublico || undefined,
+				orgaoOrigem: orgaoOrigem || undefined,
+				aposentado: aposentado || undefined,
+
+				// Dados Bancários
+				contaBradescoNumero: contaBradescoNumero || undefined,
+				contaBradescoDV: contaBradescoDV || undefined,
+				contaBradescoAgencia: contaBradescoAgencia || undefined,
+
+				// Documentos
+				...Object.fromEntries(
+					Object.entries(documentosStorage).map(([key, value]) => [key, value as any])
+				),
+				// Dependentes (opcional)
+				dependentes: dependentes.length
+					? dependentes.map((d) => ({
+							parentesco: d.parentesco,
+							nome: d.nome,
+							cpf: d.cpf,
+							nascimento: d.nascimento,
+							documentoId: d.documentoId as any,
+							salarioFamilia: !!d.salarioFamilia,
+							impostoRenda: !!d.impostoRenda
+						}))
+					: undefined
+			};
+
+			const novoFuncionarioId = await client.mutation(api.funcionarios.create, payload as any);
+
+			// Salvar cursos, se houver
+			for (const curso of cursos) {
+				let certificadoId = curso.certificadoId;
+				// Se houver arquivo para upload, fazer o upload
+				if (cursoAtual.arquivo && curso.id === cursos[cursos.length - 1].id) {
+					try {
+						certificadoId = await uploadCertificado(cursoAtual.arquivo);
+					} catch (err) {
+						console.error('Erro ao fazer upload do certificado:', err);
+					}
+				}
+
+				await client.mutation(api.cursos.criar, {
+					funcionarioId: novoFuncionarioId,
+					descricao: curso.descricao,
+					data: curso.data,
+					certificadoId: certificadoId as any
+				});
+			}
+
+			notice = { kind: 'success', text: 'Funcionário cadastrado com sucesso!' };
+			setTimeout(() => goto('/recursos-humanos/funcionarios'), 600);
+		} catch (e: any) {
+			const msg = e?.message || String(e);
+			if (/CPF j[aá] cadastrado/i.test(msg)) {
+				notice = { kind: 'error', text: 'CPF já cadastrado.' };
+			} else if (/Matr[ií]cula j[aá] cadastrada/i.test(msg)) {
+				notice = { kind: 'error', text: 'Matrícula já cadastrada.' };
+			} else {
+				notice = { kind: 'error', text: 'Erro ao cadastrar funcionário.' };
+			}
+		} finally {
+			loading = false;
+		}
+	}
+
+	$effect(() => {
+		loadSimbolos();
+	});
+
+	// Resetar simboloId quando tipo mudar
+	$effect(() => {
+		tipo; // track tipo
+		simboloId = ''; // reset selection when tipo changes
+	});
 </script>
 
-<main class="container mx-auto px-4 py-4 max-w-7xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li><a href="/recursos-humanos/funcionarios" class="text-primary hover:underline">Funcionários</a></li>
-      <li>Cadastrar</li>
-    </ul>
-  </div>
-
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-blue-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Cadastro de Funcionário</h1>
-        <p class="text-base-content/70">Preencha os campos abaixo para cadastrar um novo funcionário</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Alertas -->
-  {#if notice}
-    <div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        {#if notice.kind === "success"}
-          <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" />
-        {:else}
-          <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" />
-        {/if}
-      </svg>
-      <span>{notice.text}</span>
-    </div>
-  {/if}
-
-  <!-- Formulário -->
-  <form class="space-y-6" onsubmit={(e) => { e.preventDefault(); }}>
-    
-    <!-- Card 1: Informações Pessoais -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-          </svg>
-          Informações Pessoais
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <!-- Nome -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="nome">
-              <span class="label-text font-medium">Nome Completo <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="nome" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nome}
-              required 
-            />
-          </div>
-
-          <!-- Matrícula -->
-          <div class="form-control">
-            <label class="label" for="matricula">
-              <span class="label-text font-medium">Matrícula <span class="text-base-content/50 text-xs">(opcional)</span></span>
-            </label>
-            <input 
-              id="matricula" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={matricula}
-              placeholder="Deixe em branco se não tiver"
-            />
-          </div>
-
-          <!-- CPF -->
-          <div class="form-control">
-            <label class="label" for="cpf">
-              <span class="label-text font-medium">CPF <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="cpf" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              value={cpf}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                cpf = maskCPF(target.value);
-                target.value = cpf;
-              }}
-              required 
-            />
-          </div>
-
-          <!-- RG -->
-          <div class="form-control">
-            <label class="label" for="rg">
-              <span class="label-text font-medium">RG <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="rg" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              value={rg}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                rg = onlyDigits(target.value);
-                target.value = rg;
-              }}
-              required 
-            />
-          </div>
-
-          <!-- Órgão Expedidor -->
-          <div class="form-control">
-            <label class="label" for="rgOrgaoExpedidor">
-              <span class="label-text font-medium">Órgão Expedidor</span>
-            </label>
-            <input 
-              id="rgOrgaoExpedidor" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={rgOrgaoExpedidor}
-              placeholder="Ex: SDS/PE"
-            />
-          </div>
-
-          <!-- Data Emissão RG -->
-          <div class="form-control">
-            <label class="label" for="rgDataEmissao">
-              <span class="label-text font-medium">Data Emissão RG</span>
-            </label>
-            <input 
-              id="rgDataEmissao" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={rgDataEmissao}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                rgDataEmissao = maskDate(target.value);
-                target.value = rgDataEmissao;
-              }}
-            />
-          </div>
-
-          <!-- Nome do Pai -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="nomePai">
-              <span class="label-text font-medium">Nome do Pai</span>
-            </label>
-            <input 
-              id="nomePai" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nomePai}
-            />
-          </div>
-
-          <!-- Nome da Mãe -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="nomeMae">
-              <span class="label-text font-medium">Nome da Mãe</span>
-            </label>
-            <input 
-              id="nomeMae" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nomeMae}
-            />
-          </div>
-
-          <!-- Data de Nascimento -->
-          <div class="form-control">
-            <label class="label" for="nascimento">
-              <span class="label-text font-medium">Data de Nascimento <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="nascimento" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={nascimento}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                nascimento = maskDate(target.value);
-                target.value = nascimento;
-              }}
-              required 
-            />
-          </div>
-
-          <!-- Naturalidade -->
-          <div class="form-control">
-            <label class="label" for="naturalidade">
-              <span class="label-text font-medium">Naturalidade</span>
-            </label>
-            <input 
-              id="naturalidade" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={naturalidade}
-              placeholder="Cidade de nascimento"
-            />
-          </div>
-
-          <!-- Naturalidade UF -->
-          <div class="form-control">
-            <label class="label" for="naturalidadeUF">
-              <span class="label-text font-medium">UF Naturalidade</span>
-            </label>
-            <select 
-              id="naturalidadeUF" 
-              class="select select-bordered w-full" 
-              bind:value={naturalidadeUF}
-            >
-              <option value="">Selecione...</option>
-              {#each UFS_BRASIL as ufOption}
-                <option value={ufOption}>{ufOption}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Sexo -->
-          <div class="form-control">
-            <label class="label" for="sexo">
-              <span class="label-text font-medium">Sexo</span>
-            </label>
-            <select 
-              id="sexo" 
-              class="select select-bordered w-full" 
-              bind:value={sexo}
-            >
-              <option value="">Selecione...</option>
-              {#each SEXO_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Estado Civil -->
-          <div class="form-control">
-            <label class="label" for="estadoCivil">
-              <span class="label-text font-medium">Estado Civil</span>
-            </label>
-            <select 
-              id="estadoCivil" 
-              class="select select-bordered w-full" 
-              bind:value={estadoCivil}
-            >
-              <option value="">Selecione...</option>
-              {#each ESTADO_CIVIL_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Nacionalidade -->
-          <div class="form-control">
-            <label class="label" for="nacionalidade">
-              <span class="label-text font-medium">Nacionalidade</span>
-            </label>
-            <input 
-              id="nacionalidade" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nacionalidade}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 2: Documentos Pessoais -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
-          </svg>
-          Documentos Pessoais
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <!-- Carteira Profissional -->
-          <div class="form-control">
-            <label class="label" for="carteiraProfissionalNumero">
-              <span class="label-text font-medium">Carteira Profissional Nº</span>
-            </label>
-            <input 
-              id="carteiraProfissionalNumero" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={carteiraProfissionalNumero}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="carteiraProfissionalSerie">
-              <span class="label-text font-medium">Série</span>
-            </label>
-            <input 
-              id="carteiraProfissionalSerie" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={carteiraProfissionalSerie}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="carteiraProfissionalDataEmissao">
-              <span class="label-text font-medium">Data Emissão</span>
-            </label>
-            <input 
-              id="carteiraProfissionalDataEmissao" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={carteiraProfissionalDataEmissao}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                carteiraProfissionalDataEmissao = maskDate(target.value);
-                target.value = carteiraProfissionalDataEmissao;
-              }}
-            />
-          </div>
-
-          <!-- Reservista -->
-          <div class="form-control">
-            <label class="label" for="reservistaNumero">
-              <span class="label-text font-medium">Reservista Nº</span>
-            </label>
-            <input 
-              id="reservistaNumero" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={reservistaNumero}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="reservistaSerie">
-              <span class="label-text font-medium">Série</span>
-            </label>
-            <input 
-              id="reservistaSerie" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={reservistaSerie}
-            />
-          </div>
-
-          <!-- Título de Eleitor -->
-          <div class="form-control">
-            <label class="label" for="tituloEleitorNumero">
-              <span class="label-text font-medium">Título de Eleitor Nº</span>
-            </label>
-            <input 
-              id="tituloEleitorNumero" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={tituloEleitorNumero}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="tituloEleitorZona">
-              <span class="label-text font-medium">Zona</span>
-            </label>
-            <input 
-              id="tituloEleitorZona" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              bind:value={tituloEleitorZona}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="tituloEleitorSecao">
-              <span class="label-text font-medium">Seção</span>
-            </label>
-            <input 
-              id="tituloEleitorSecao" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              bind:value={tituloEleitorSecao}
-            />
-          </div>
-
-          <!-- PIS/PASEP -->
-          <div class="form-control">
-            <label class="label" for="pisNumero">
-              <span class="label-text font-medium">PIS/PASEP Nº</span>
-            </label>
-            <input 
-              id="pisNumero" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={pisNumero}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 3: Formação e Saúde -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-          </svg>
-          Formação e Saúde
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <!-- Grau de Instrução -->
-          <div class="form-control">
-            <label class="label" for="grauInstrucao">
-              <span class="label-text font-medium">Grau de Instrução</span>
-            </label>
-            <select 
-              id="grauInstrucao" 
-              class="select select-bordered w-full" 
-              bind:value={grauInstrucao}
-            >
-              <option value="">Selecione...</option>
-              {#each GRAU_INSTRUCAO_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Formação -->
-          <div class="form-control">
-            <label class="label" for="formacao">
-              <span class="label-text font-medium">Formação/Curso</span>
-            </label>
-            <input 
-              id="formacao" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={formacao}
-              placeholder="Ex: Administração"
-            />
-          </div>
-
-          <!-- Registro Nº -->
-          <div class="form-control">
-            <label class="label" for="formacaoRegistro">
-              <span class="label-text font-medium">Registro Nº</span>
-            </label>
-            <input 
-              id="formacaoRegistro" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={formacaoRegistro}
-              placeholder="Nº do registro profissional"
-            />
-          </div>
-
-          <!-- Grupo Sanguíneo -->
-          <div class="form-control">
-            <label class="label" for="grupoSanguineo">
-              <span class="label-text font-medium">Grupo Sanguíneo</span>
-            </label>
-            <select 
-              id="grupoSanguineo" 
-              class="select select-bordered w-full" 
-              bind:value={grupoSanguineo}
-            >
-              <option value="">Selecione...</option>
-              {#each GRUPO_SANGUINEO_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Fator RH -->
-          <div class="form-control">
-            <label class="label" for="fatorRH">
-              <span class="label-text font-medium">Fator RH</span>
-            </label>
-            <select 
-              id="fatorRH" 
-              class="select select-bordered w-full" 
-              bind:value={fatorRH}
-            >
-              <option value="">Selecione...</option>
-              {#each FATOR_RH_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 3.5: Cursos e Treinamentos -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-          </svg>
-          Cursos e Treinamentos
-        </h2>
-
-        <p class="text-sm text-base-content/70">
-          Adicione até 7 cursos ou treinamentos realizados pelo funcionário (opcional)
-        </p>
-
-        <!-- Lista de cursos adicionados -->
-        {#if cursos.length > 0}
-          <div class="space-y-2">
-            <h3 class="font-semibold text-sm">Cursos adicionados ({cursos.length}/7)</h3>
-            {#each cursos as curso}
-              <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
-                <div class="flex-1">
-                  <p class="font-semibold text-sm">{curso.descricao}</p>
-                  <p class="text-xs text-base-content/70">{curso.data}</p>
-                </div>
-                <button 
-                  type="button"
-                  class="btn btn-sm btn-error btn-square"
-                  aria-label="Remover curso"
-                  onclick={() => removerCurso(curso.id)}
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
-            {/each}
-          </div>
-        {/if}
-
-        <!-- Formulário para adicionar curso -->
-        {#if cursos.length < 7}
-          <div class="collapse collapse-arrow border border-base-300 bg-base-200">
-            <input type="checkbox" bind:checked={mostrarFormularioCurso} />
-            <div class="collapse-title font-medium">
-              Adicionar Curso/Treinamento
-            </div>
-            <div class="collapse-content">
-              <div class="space-y-3 pt-2">
-                <div class="form-control">
-                  <label class="label" for="curso-descricao">
-                    <span class="label-text font-medium">Descrição do Curso</span>
-                  </label>
-                  <input 
-                    id="curso-descricao"
-                    type="text" 
-                    class="input input-bordered w-full" 
-                    bind:value={cursoAtual.descricao}
-                    placeholder="Ex: Gestão de Projetos"
-                  />
-                </div>
-
-                <div class="form-control">
-                  <label class="label" for="curso-data">
-                    <span class="label-text font-medium">Data de Conclusão</span>
-                  </label>
-                  <input 
-                    id="curso-data"
-                    type="text" 
-                    class="input input-bordered w-full" 
-                    bind:value={cursoAtual.data}
-                    placeholder="Ex: 01/2024"
-                    onchange={(e) => cursoAtual.data = maskDate(e.currentTarget.value)}
-                  />
-                </div>
-
-                <div class="form-control">
-                  <label class="label" for="curso-certificado">
-                    <span class="label-text font-medium">Certificado/Diploma (opcional)</span>
-                  </label>
-                  <input 
-                    id="curso-certificado"
-                    type="file" 
-                    class="file-input file-input-bordered w-full" 
-                    accept=".pdf,.jpg,.jpeg,.png"
-                    onchange={(e) => {
-                      const file = e.currentTarget.files?.[0];
-                      if (file) cursoAtual.arquivo = file;
-                    }}
-                  />
-                </div>
-
-                <button 
-                  type="button"
-                  class="btn btn-primary btn-sm gap-2 mt-2"
-                  onclick={adicionarCurso}
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                  </svg>
-                  Adicionar à Lista
-                </button>
-              </div>
-            </div>
-          </div>
-        {:else}
-          <div class="alert alert-info">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-            <span>Limite de 7 cursos atingido</span>
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Card 4: Endereço e Contato -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
-          Endereço e Contato
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <!-- CEP -->
-          <div class="form-control">
-            <label class="label" for="cep">
-              <span class="label-text font-medium">CEP <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="cep" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              value={cep}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                cep = maskCEP(target.value);
-                target.value = cep;
-              }}
-              onblur={() => fillFromCEP(cep)}
-              required 
-            />
-          </div>
-
-          <!-- Cidade -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="cidade">
-              <span class="label-text font-medium">Cidade <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="cidade" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={cidade}
-              required 
-            />
-          </div>
-
-          <!-- UF -->
-          <div class="form-control">
-            <label class="label" for="uf">
-              <span class="label-text font-medium">UF <span class="text-error">*</span></span>
-            </label>
-            <select 
-              id="uf" 
-              class="select select-bordered w-full" 
-              bind:value={uf}
-              required
-            >
-              <option value="">Selecione...</option>
-              {#each UFS_BRASIL as ufOption}
-                <option value={ufOption}>{ufOption}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Endereço -->
-          <div class="form-control md:col-span-2">
-            <label class="label" for="endereco">
-              <span class="label-text font-medium">Endereço <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="endereco" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={endereco}
-              required 
-            />
-          </div>
-
-          <!-- E-mail -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="email">
-              <span class="label-text font-medium">E-mail <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="email" 
-              type="email" 
-              class="input input-bordered w-full" 
-              bind:value={email}
-              required 
-            />
-          </div>
-
-          <!-- Telefone -->
-          <div class="form-control lg:col-span-2">
-            <label class="label" for="telefone">
-              <span class="label-text font-medium">Telefone <span class="text-error">*</span></span>
-            </label>
-            <input 
-              id="telefone" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              value={telefone}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                telefone = maskPhone(target.value);
-                target.value = telefone;
-              }}
-              required 
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 4.5: Dependentes -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2a3 3 0 00-5.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2a3 3 0 015.356-1.857M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
-          </svg>
-          Dependentes
-        </h2>
-
-        {#if dependentes.length > 0}
-          <div class="space-y-2">
-            <h3 class="font-semibold text-sm">Dependentes adicionados ({dependentes.length}/10)</h3>
-            {#each dependentes as dep}
-              <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
-                <div class="flex-1 text-sm">
-                  <p class="font-semibold">{dep.nome} — {dep.parentesco}</p>
-                  <p class="text-xs text-base-content/70">CPF: {dep.cpf} • Nasc.: {dep.nascimento}</p>
-                  <div class="flex flex-wrap gap-4 mt-2">
-                    <label class="label cursor-pointer gap-2">
-                      <input type="checkbox" class="checkbox checkbox-xs checkbox-primary" bind:checked={dep.salarioFamilia} />
-                      <span class="label-text text-xs">Salário Família</span>
-                    </label>
-                    <label class="label cursor-pointer gap-2">
-                      <input type="checkbox" class="checkbox checkbox-xs checkbox-primary" bind:checked={dep.impostoRenda} />
-                      <span class="label-text text-xs">Imposto de Renda</span>
-                    </label>
-                  </div>
-                </div>
-                <button type="button" class="btn btn-sm btn-error btn-square" aria-label="Remover dependente" onclick={() => removerDependente(dep.id)}>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
-                </button>
-              </div>
-            {/each}
-          </div>
-        {/if}
-
-        {#if dependentes.length < 10}
-          <div class="collapse collapse-arrow border border-base-300 bg-base-200">
-            <input type="checkbox" bind:checked={mostrarFormularioDependente} />
-            <div class="collapse-title font-medium">Adicionar Dependente</div>
-            <div class="collapse-content">
-              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
-                <div class="form-control">
-                  <label class="label" for="dep-parentesco">
-                    <span class="label-text font-medium">Grau de Parentesco</span>
-                  </label>
-                  <select id="dep-parentesco" class="select select-bordered w-full" bind:value={dependenteAtual.parentesco}>
-                    <option value="">Selecione...</option>
-                    <option value="filho">Filho</option>
-                    <option value="filha">Filha</option>
-                    <option value="conjuge">Cônjuge</option>
-                    <option value="outro">Outros</option>
-                  </select>
-                </div>
-
-                <div class="form-control lg:col-span-2">
-                  <label class="label" for="dep-nome">
-                    <span class="label-text font-medium">Nome do Dependente</span>
-                  </label>
-                  <input id="dep-nome" type="text" class="input input-bordered w-full" bind:value={dependenteAtual.nome} />
-                </div>
-
-                <div class="form-control">
-                  <label class="label" for="dep-cpf">
-                    <span class="label-text font-medium">CPF do Dependente</span>
-                  </label>
-                  <input id="dep-cpf" type="text" inputmode="numeric" class="input input-bordered w-full" value={dependenteAtual.cpf}
-                    oninput={(e) => { const t = e.target as HTMLInputElement; dependenteAtual.cpf = maskCPF(t.value); t.value = dependenteAtual.cpf; }} />
-                </div>
-
-                <div class="form-control">
-                  <label class="label" for="dep-nascimento">
-                    <span class="label-text font-medium">Data de Nascimento</span>
-                  </label>
-                  <input id="dep-nascimento" type="text" inputmode="numeric" placeholder="dd/mm/aaaa" class="input input-bordered w-full" value={dependenteAtual.nascimento}
-                    oninput={(e) => { const t = e.target as HTMLInputElement; dependenteAtual.nascimento = maskDate(t.value); t.value = dependenteAtual.nascimento; }} />
-                </div>
-
-                <div class="form-control lg:col-span-3">
-                  <label class="label" for="dep-doc">
-                    <span class="label-text font-medium">Certidão de Nascimento/Casamento ou Outros (opcional)</span>
-                  </label>
-                  <input id="dep-doc" type="file" class="file-input file-input-bordered w-full" accept=".pdf,.jpg,.jpeg,.png"
-                    onchange={async (e) => { const file = e.currentTarget.files?.[0]; dependenteAtual.arquivo = file || null; if (file) { try { dependenteAtual.documentoId = await uploadDocumentoDependente(file); } catch { alert("Falha no upload do documento do dependente"); } } }} />
-                </div>
-
-              <!-- Checkboxes de benefícios por dependente -->
-              <div class="form-control">
-                <label class="label cursor-pointer justify-start gap-3">
-                  <input type="checkbox" class="checkbox checkbox-primary" bind:checked={dependenteAtual.salarioFamilia} />
-                  <span class="label-text">Salário Família</span>
-                </label>
-              </div>
-              <div class="form-control">
-                <label class="label cursor-pointer justify-start gap-3">
-                  <input type="checkbox" class="checkbox checkbox-primary" bind:checked={dependenteAtual.impostoRenda} />
-                  <span class="label-text">Imposto de Renda</span>
-                </label>
-              </div>
-
-                <div class="lg:col-span-3">
-                  <button type="button" class="btn btn-primary btn-sm gap-2" onclick={adicionarDependente}>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
-                    Adicionar Dependente
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Card 5: Cargo e Vínculo -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-          Cargo e Vínculo
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <!-- Símbolo Tipo -->
-          <div class="form-control">
-            <label class="label" for="simboloTipo">
-              <span class="label-text font-medium">Símbolo Tipo <span class="text-error">*</span></span>
-            </label>
-            <select 
-              id="simboloTipo" 
-              class="select select-bordered w-full" 
-              bind:value={tipo}
-              required
-            >
-              <option value="cargo_comissionado">Cargo Comissionado</option>
-              <option value="funcao_gratificada">Função Gratificada</option>
-            </select>
-          </div>
-
-          <!-- Símbolo -->
-          <div class="form-control">
-            <label class="label" for="simboloId">
-              <span class="label-text font-medium">Símbolo <span class="text-error">*</span></span>
-            </label>
-            <select 
-              id="simboloId" 
-              class="select select-bordered w-full" 
-              bind:value={simboloId}
-              required
-            >
-              <option value="">Selecione...</option>
-              {#each simbolos.filter((s) => s.tipo === tipo) as s}
-                <option value={s._id}>{s.nome} — {s.descricao}</option>
-              {/each}
-            </select>
-          </div>
-
-          <!-- Descrição Cargo/Função -->
-          <div class="form-control lg:col-span-3">
-            <label class="label" for="descricaoCargo">
-              <span class="label-text font-medium">Descrição Cargo/Função</span>
-            </label>
-            <input 
-              id="descricaoCargo" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={descricaoCargo}
-              placeholder="Descreva as atribuições do cargo"
-            />
-          </div>
-
-          <!-- Nomeação/Portaria -->
-          <div class="form-control">
-            <label class="label" for="nomeacaoPortaria">
-              <span class="label-text font-medium">Nomeação/Portaria Nº</span>
-            </label>
-            <input 
-              id="nomeacaoPortaria" 
-              type="text" 
-              class="input input-bordered w-full" 
-              bind:value={nomeacaoPortaria}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="nomeacaoData">
-              <span class="label-text font-medium">Data</span>
-            </label>
-            <input 
-              id="nomeacaoData" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={nomeacaoData}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                nomeacaoData = maskDate(target.value);
-                target.value = nomeacaoData;
-              }}
-            />
-          </div>
-
-          <div class="form-control">
-            <label class="label" for="nomeacaoDOE">
-              <span class="label-text font-medium">DOE</span>
-            </label>
-            <input 
-              id="nomeacaoDOE" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={nomeacaoDOE}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                nomeacaoDOE = maskDate(target.value);
-                target.value = nomeacaoDOE;
-              }}
-            />
-          </div>
-
-          <!-- Data Admissão -->
-          <div class="form-control">
-            <label class="label" for="admissaoData">
-              <span class="label-text font-medium">Data Admissão</span>
-            </label>
-            <input 
-              id="admissaoData" 
-              type="text" 
-              inputmode="numeric"
-              placeholder="dd/mm/aaaa"
-              class="input input-bordered w-full" 
-              value={admissaoData}
-              oninput={(e) => { 
-                const target = e.target as HTMLInputElement;
-                admissaoData = maskDate(target.value);
-                target.value = admissaoData;
-              }}
-            />
-          </div>
-
-          <!-- Pertence a Órgão Público -->
-          <div class="form-control lg:col-span-3">
-            <label class="label cursor-pointer justify-start gap-4">
-              <input 
-                type="checkbox" 
-                class="checkbox checkbox-primary" 
-                bind:checked={pertenceOrgaoPublico}
-              />
-              <span class="label-text font-medium">Pertence a Órgão Público Federal, Estadual ou Municipal?</span>
-            </label>
-          </div>
-
-          <!-- Órgão de Origem -->
-          {#if pertenceOrgaoPublico}
-            <div class="form-control lg:col-span-2">
-              <label class="label" for="orgaoOrigem">
-                <span class="label-text font-medium">Órgão de Origem (para servidor extra-quadro)</span>
-              </label>
-              <input 
-                id="orgaoOrigem" 
-                type="text" 
-                class="input input-bordered w-full" 
-                bind:value={orgaoOrigem}
-              />
-            </div>
-          {/if}
-
-          <!-- Aposentado -->
-          <div class="form-control">
-            <label class="label" for="aposentado">
-              <span class="label-text font-medium">Se Aposentado</span>
-            </label>
-            <select 
-              id="aposentado" 
-              class="select select-bordered w-full" 
-              bind:value={aposentado}
-            >
-              {#each APOSENTADO_OPTIONS as option}
-                <option value={option.value}>{option.label}</option>
-              {/each}
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Card 6: Dados Bancários -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-4">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-          </svg>
-          Dados Bancários - Bradesco
-        </h2>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <!-- Conta Corrente -->
-          <div class="form-control">
-            <label class="label" for="contaBradescoNumero">
-              <span class="label-text font-medium">Conta Corrente Nº</span>
-            </label>
-            <input 
-              id="contaBradescoNumero" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              bind:value={contaBradescoNumero}
-            />
-          </div>
-
-          <!-- DV -->
-          <div class="form-control">
-            <label class="label" for="contaBradescoDV">
-              <span class="label-text font-medium">DV</span>
-            </label>
-            <input 
-              id="contaBradescoDV" 
-              type="text" 
-              maxlength="2"
-              class="input input-bordered w-full" 
-              bind:value={contaBradescoDV}
-            />
-          </div>
-
-          <!-- Agência -->
-          <div class="form-control">
-            <label class="label" for="contaBradescoAgencia">
-              <span class="label-text font-medium">Agência</span>
-            </label>
-            <input 
-              id="contaBradescoAgencia" 
-              type="text" 
-              inputmode="numeric"
-              class="input input-bordered w-full" 
-              bind:value={contaBradescoAgencia}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Modelos de Declarações -->
-    <ModelosDeclaracoes />
-
-    <!-- Card 7: Documentação Anexa -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-6">
-        <h2 class="card-title text-xl border-b pb-3">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-          </svg>
-          Documentação Anexa
-        </h2>
-
-        <p class="text-sm text-base-content/70">
-          Anexe os documentos necessários em formato PDF ou imagem (máximo 10MB cada)
-        </p>
-
-        {#each categoriasDocumentos as categoria}
-          <div class="space-y-3">
-            <h3 class="text-lg font-semibold text-primary">{categoria}</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {#each getDocumentosByCategoria(categoria) as doc}
-                <FileUpload
-                  label={doc.nome}
-                  helpUrl={doc.helpUrl}
-                  value={documentosStorage[doc.campo]}
-                  onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
-                  onRemove={() => handleDocumentoRemove(doc.campo)}
-                  disabled={loading}
-                />
-              {/each}
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-
-    <!-- Card 8: Ações -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <div class="flex flex-col sm:flex-row gap-3 justify-end">
-          <button 
-            type="button" 
-            class="btn btn-ghost btn-lg" 
-            disabled={loading}
-            onclick={() => goto("/recursos-humanos/funcionarios")}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-            Cancelar
-          </button>
-          <button 
-            type="button" 
-            class="btn btn-primary btn-lg" 
-            disabled={loading}
-            onclick={() => (document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.showModal()}
-          >
-            {#if loading}
-              <span class="loading loading-spinner"></span>
-              Cadastrando...
-            {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
-              Cadastrar Funcionário
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Modal de Confirmação Legal -->
-    <dialog id="confirmar_cadastro_func" class="modal">
-      <div class="modal-box max-w-3xl">
-        <h3 class="font-bold text-lg mb-3">Declaração de Veracidade</h3>
-        <div class="prose text-sm max-w-none">
-          <p>
-            Declaro, sob as penas da lei (art. 299 do Código Penal Brasileiro, que trata do crime de falsidade ideológica, e demais cominações legais aplicáveis), a veracidade e autenticidade de todas as informações e documentos por mim prestados/enviados neste ato. Tenho ciência de que a falsidade das informações implicará nas penalidades cabíveis, podendo resultar na nulidade do ato.
-          </p>
-        </div>
-        <div class="modal-action">
-          <div class="flex gap-2">
-            <button type="button" class="btn" onclick={() => (document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.close()}>Cancelar</button>
-            <button type="button" class="btn btn-primary" onclick={() => { (document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.close(); handleSubmit(); }}>Ciente</button>
-          </div>
-        </div>
-      </div>
-    </dialog>
-  </form>
+<main class="container mx-auto max-w-7xl px-4 py-4">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
+			<li>
+				<a href="/recursos-humanos/funcionarios" class="text-primary hover:underline"
+					>Funcionários</a
+				>
+			</li>
+			<li>Cadastrar</li>
+		</ul>
+	</div>
+
+	<!-- Cabeçalho -->
+	<div class="mb-6">
+		<div class="mb-2 flex items-center gap-4">
+			<div class="rounded-xl bg-blue-500/20 p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8 text-blue-600"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+					/>
+				</svg>
+			</div>
+			<div>
+				<h1 class="text-primary text-3xl font-bold">Cadastro de Funcionário</h1>
+				<p class="text-base-content/70">
+					Preencha os campos abaixo para cadastrar um novo funcionário
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<!-- Alertas -->
+	{#if notice}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={notice.kind === 'success'}
+			class:alert-error={notice.kind === 'error'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.kind === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.text}</span>
+		</div>
+	{/if}
+
+	<!-- Formulário -->
+	<form
+		class="space-y-6"
+		onsubmit={(e) => {
+			e.preventDefault();
+		}}
+	>
+		<!-- Card 1: Informações Pessoais -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-4">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+						/>
+					</svg>
+					Informações Pessoais
+				</h2>
+
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+					<!-- Nome -->
+					<div class="form-control lg:col-span-2">
+						<label class="label" for="nome">
+							<span class="label-text font-medium"
+								>Nome Completo <span class="text-error">*</span></span
+							>
+						</label>
+						<input
+							id="nome"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={nome}
+							required
+						/>
+					</div>
+
+					<!-- Matrícula -->
+					<div class="form-control">
+						<label class="label" for="matricula">
+							<span class="label-text font-medium"
+								>Matrícula <span class="text-base-content/50 text-xs">(opcional)</span></span
+							>
+						</label>
+						<input
+							id="matricula"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={matricula}
+							placeholder="Deixe em branco se não tiver"
+						/>
+					</div>
+
+					<!-- CPF -->
+					<div class="form-control">
+						<label class="label" for="cpf">
+							<span class="label-text font-medium">CPF <span class="text-error">*</span></span>
+						</label>
+						<input
+							id="cpf"
+							type="text"
+							inputmode="numeric"
+							class="input input-bordered w-full"
+							value={cpf}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								cpf = maskCPF(target.value);
+								target.value = cpf;
+							}}
+							required
+						/>
+					</div>
+
+					<!-- RG -->
+					<div class="form-control">
+						<label class="label" for="rg">
+							<span class="label-text font-medium">RG <span class="text-error">*</span></span>
+						</label>
+						<input
+							id="rg"
+							type="text"
+							inputmode="numeric"
+							class="input input-bordered w-full"
+							value={rg}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								rg = onlyDigits(target.value);
+								target.value = rg;
+							}}
+							required
+						/>
+					</div>
+
+					<!-- Órgão Expedidor -->
+					<div class="form-control">
+						<label class="label" for="rgOrgaoExpedidor">
+							<span class="label-text font-medium">Órgão Expedidor</span>
+						</label>
+						<input
+							id="rgOrgaoExpedidor"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={rgOrgaoExpedidor}
+							placeholder="Ex: SDS/PE"
+						/>
+					</div>
+
+					<!-- Data Emissão RG -->
+					<div class="form-control">
+						<label class="label" for="rgDataEmissao">
+							<span class="label-text font-medium">Data Emissão RG</span>
+						</label>
+						<input
+							id="rgDataEmissao"
+							type="text"
+							inputmode="numeric"
+							placeholder="dd/mm/aaaa"
+							class="input input-bordered w-full"
+							value={rgDataEmissao}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								rgDataEmissao = maskDate(target.value);
+								target.value = rgDataEmissao;
+							}}
+						/>
+					</div>
+
+					<!-- Nome do Pai -->
+					<div class="form-control lg:col-span-2">
+						<label class="label" for="nomePai">
+							<span class="label-text font-medium">Nome do Pai</span>
+						</label>
+						<input
+							id="nomePai"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={nomePai}
+						/>
+					</div>
+
+					<!-- Nome da Mãe -->
+					<div class="form-control lg:col-span-2">
+						<label class="label" for="nomeMae">
+							<span class="label-text font-medium">Nome da Mãe</span>
+						</label>
+						<input
+							id="nomeMae"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={nomeMae}
+						/>
+					</div>
+
+					<!-- Data de Nascimento -->
+					<div class="form-control">
+						<label class="label" for="nascimento">
+							<span class="label-text font-medium"
+								>Data de Nascimento <span class="text-error">*</span></span
+							>
+						</label>
+						<input
+							id="nascimento"
+							type="text"
+							inputmode="numeric"
+							placeholder="dd/mm/aaaa"
+							class="input input-bordered w-full"
+							value={nascimento}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								nascimento = maskDate(target.value);
+								target.value = nascimento;
+							}}
+							required
+						/>
+					</div>
+
+					<!-- Naturalidade -->
+					<div class="form-control">
+						<label class="label" for="naturalidade">
+							<span class="label-text font-medium">Naturalidade</span>
+						</label>
+						<input
+							id="naturalidade"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={naturalidade}
+							placeholder="Cidade de nascimento"
+						/>
+					</div>
+
+					<!-- Naturalidade UF -->
+					<div class="form-control">
+						<label class="label" for="naturalidadeUF">
+							<span class="label-text font-medium">UF Naturalidade</span>
+						</label>
+						<select
+							id="naturalidadeUF"
+							class="select select-bordered w-full"
+							bind:value={naturalidadeUF}
+						>
+							<option value="">Selecione...</option>
+							{#each UFS_BRASIL as ufOption}
+								<option value={ufOption}>{ufOption}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Sexo -->
+					<div class="form-control">
+						<label class="label" for="sexo">
+							<span class="label-text font-medium">Sexo</span>
+						</label>
+						<select id="sexo" class="select select-bordered w-full" bind:value={sexo}>
+							<option value="">Selecione...</option>
+							{#each SEXO_OPTIONS as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Estado Civil -->
+					<div class="form-control">
+						<label class="label" for="estadoCivil">
+							<span class="label-text font-medium">Estado Civil</span>
+						</label>
+						<select id="estadoCivil" class="select select-bordered w-full" bind:value={estadoCivil}>
+							<option value="">Selecione...</option>
+							{#each ESTADO_CIVIL_OPTIONS as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Nacionalidade -->
+					<div class="form-control">
+						<label class="label" for="nacionalidade">
+							<span class="label-text font-medium">Nacionalidade</span>
+						</label>
+						<input
+							id="nacionalidade"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={nacionalidade}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Card 2: Documentos Pessoais -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-4">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
+						/>
+					</svg>
+					Documentos Pessoais
+				</h2>
+
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+					<!-- Carteira Profissional -->
+					<div class="form-control">
+						<label class="label" for="carteiraProfissionalNumero">
+							<span class="label-text font-medium">Carteira Profissional Nº</span>
+						</label>
+						<input
+							id="carteiraProfissionalNumero"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={carteiraProfissionalNumero}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label" for="carteiraProfissionalSerie">
+							<span class="label-text font-medium">Série</span>
+						</label>
+						<input
+							id="carteiraProfissionalSerie"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={carteiraProfissionalSerie}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label" for="carteiraProfissionalDataEmissao">
+							<span class="label-text font-medium">Data Emissão</span>
+						</label>
+						<input
+							id="carteiraProfissionalDataEmissao"
+							type="text"
+							inputmode="numeric"
+							placeholder="dd/mm/aaaa"
+							class="input input-bordered w-full"
+							value={carteiraProfissionalDataEmissao}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								carteiraProfissionalDataEmissao = maskDate(target.value);
+								target.value = carteiraProfissionalDataEmissao;
+							}}
+						/>
+					</div>
+
+					<!-- Reservista -->
+					<div class="form-control">
+						<label class="label" for="reservistaNumero">
+							<span class="label-text font-medium">Reservista Nº</span>
+						</label>
+						<input
+							id="reservistaNumero"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={reservistaNumero}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label" for="reservistaSerie">
+							<span class="label-text font-medium">Série</span>
+						</label>
+						<input
+							id="reservistaSerie"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={reservistaSerie}
+						/>
+					</div>
+
+					<!-- Título de Eleitor -->
+					<div class="form-control">
+						<label class="label" for="tituloEleitorNumero">
+							<span class="label-text font-medium">Título de Eleitor Nº</span>
+						</label>
+						<input
+							id="tituloEleitorNumero"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={tituloEleitorNumero}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label" for="tituloEleitorZona">
+							<span class="label-text font-medium">Zona</span>
+						</label>
+						<input
+							id="tituloEleitorZona"
+							type="text"
+							inputmode="numeric"
+							class="input input-bordered w-full"
+							bind:value={tituloEleitorZona}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label" for="tituloEleitorSecao">
+							<span class="label-text font-medium">Seção</span>
+						</label>
+						<input
+							id="tituloEleitorSecao"
+							type="text"
+							inputmode="numeric"
+							class="input input-bordered w-full"
+							bind:value={tituloEleitorSecao}
+						/>
+					</div>
+
+					<!-- PIS/PASEP -->
+					<div class="form-control">
+						<label class="label" for="pisNumero">
+							<span class="label-text font-medium">PIS/PASEP Nº</span>
+						</label>
+						<input
+							id="pisNumero"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={pisNumero}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Card 3: Formação e Saúde -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-4">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+						/>
+					</svg>
+					Formação e Saúde
+				</h2>
+
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+					<!-- Grau de Instrução -->
+					<div class="form-control">
+						<label class="label" for="grauInstrucao">
+							<span class="label-text font-medium">Grau de Instrução</span>
+						</label>
+						<select
+							id="grauInstrucao"
+							class="select select-bordered w-full"
+							bind:value={grauInstrucao}
+						>
+							<option value="">Selecione...</option>
+							{#each GRAU_INSTRUCAO_OPTIONS as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Formação -->
+					<div class="form-control">
+						<label class="label" for="formacao">
+							<span class="label-text font-medium">Formação/Curso</span>
+						</label>
+						<input
+							id="formacao"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={formacao}
+							placeholder="Ex: Administração"
+						/>
+					</div>
+
+					<!-- Registro Nº -->
+					<div class="form-control">
+						<label class="label" for="formacaoRegistro">
+							<span class="label-text font-medium">Registro Nº</span>
+						</label>
+						<input
+							id="formacaoRegistro"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={formacaoRegistro}
+							placeholder="Nº do registro profissional"
+						/>
+					</div>
+
+					<!-- Grupo Sanguíneo -->
+					<div class="form-control">
+						<label class="label" for="grupoSanguineo">
+							<span class="label-text font-medium">Grupo Sanguíneo</span>
+						</label>
+						<select
+							id="grupoSanguineo"
+							class="select select-bordered w-full"
+							bind:value={grupoSanguineo}
+						>
+							<option value="">Selecione...</option>
+							{#each GRUPO_SANGUINEO_OPTIONS as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Fator RH -->
+					<div class="form-control">
+						<label class="label" for="fatorRH">
+							<span class="label-text font-medium">Fator RH</span>
+						</label>
+						<select id="fatorRH" class="select select-bordered w-full" bind:value={fatorRH}>
+							<option value="">Selecione...</option>
+							{#each FATOR_RH_OPTIONS as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Card 3.5: Cursos e Treinamentos -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-4">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+						/>
+					</svg>
+					Cursos e Treinamentos
+				</h2>
+
+				<p class="text-base-content/70 text-sm">
+					Adicione até 7 cursos ou treinamentos realizados pelo funcionário (opcional)
+				</p>
+
+				<!-- Lista de cursos adicionados -->
+				{#if cursos.length > 0}
+					<div class="space-y-2">
+						<h3 class="text-sm font-semibold">Cursos adicionados ({cursos.length}/7)</h3>
+						{#each cursos as curso}
+							<div class="bg-base-200 flex items-center gap-3 rounded-lg p-3">
+								<div class="flex-1">
+									<p class="text-sm font-semibold">{curso.descricao}</p>
+									<p class="text-base-content/70 text-xs">{curso.data}</p>
+								</div>
+								<button
+									type="button"
+									class="btn btn-sm btn-error btn-square"
+									aria-label="Remover curso"
+									onclick={() => removerCurso(curso.id)}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18L18 6M6 6l12 12"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/each}
+					</div>
+				{/if}
+
+				<!-- Formulário para adicionar curso -->
+				{#if cursos.length < 7}
+					<div class="collapse-arrow border-base-300 bg-base-200 collapse border">
+						<input type="checkbox" bind:checked={mostrarFormularioCurso} />
+						<div class="collapse-title font-medium">Adicionar Curso/Treinamento</div>
+						<div class="collapse-content">
+							<div class="space-y-3 pt-2">
+								<div class="form-control">
+									<label class="label" for="curso-descricao">
+										<span class="label-text font-medium">Descrição do Curso</span>
+									</label>
+									<input
+										id="curso-descricao"
+										type="text"
+										class="input input-bordered w-full"
+										bind:value={cursoAtual.descricao}
+										placeholder="Ex: Gestão de Projetos"
+									/>
+								</div>
+
+								<div class="form-control">
+									<label class="label" for="curso-data">
+										<span class="label-text font-medium">Data de Conclusão</span>
+									</label>
+									<input
+										id="curso-data"
+										type="text"
+										class="input input-bordered w-full"
+										bind:value={cursoAtual.data}
+										placeholder="Ex: 01/2024"
+										onchange={(e) => (cursoAtual.data = maskDate(e.currentTarget.value))}
+									/>
+								</div>
+
+								<div class="form-control">
+									<label class="label" for="curso-certificado">
+										<span class="label-text font-medium">Certificado/Diploma (opcional)</span>
+									</label>
+									<input
+										id="curso-certificado"
+										type="file"
+										class="file-input file-input-bordered w-full"
+										accept=".pdf,.jpg,.jpeg,.png"
+										onchange={(e) => {
+											const file = e.currentTarget.files?.[0];
+											if (file) cursoAtual.arquivo = file;
+										}}
+									/>
+								</div>
+
+								<button
+									type="button"
+									class="btn btn-primary btn-sm mt-2 gap-2"
+									onclick={adicionarCurso}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 4v16m8-8H4"
+										/>
+									</svg>
+									Adicionar à Lista
+								</button>
+							</div>
+						</div>
+					</div>
+				{:else}
+					<div class="alert alert-info">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							></path>
+						</svg>
+						<span>Limite de 7 cursos atingido</span>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Card 4: Endereço e Contato -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-4">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						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>
+					Endereço e Contato
+				</h2>
+
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+					<!-- CEP -->
+					<div class="form-control">
+						<label class="label" for="cep">
+							<span class="label-text font-medium">CEP <span class="text-error">*</span></span>
+						</label>
+						<input
+							id="cep"
+							type="text"
+							inputmode="numeric"
+							class="input input-bordered w-full"
+							value={cep}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								cep = maskCEP(target.value);
+								target.value = cep;
+							}}
+							onblur={() => fillFromCEP(cep)}
+							required
+						/>
+					</div>
+
+					<!-- Cidade -->
+					<div class="form-control lg:col-span-2">
+						<label class="label" for="cidade">
+							<span class="label-text font-medium">Cidade <span class="text-error">*</span></span>
+						</label>
+						<input
+							id="cidade"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={cidade}
+							required
+						/>
+					</div>
+
+					<!-- UF -->
+					<div class="form-control">
+						<label class="label" for="uf">
+							<span class="label-text font-medium">UF <span class="text-error">*</span></span>
+						</label>
+						<select id="uf" class="select select-bordered w-full" bind:value={uf} required>
+							<option value="">Selecione...</option>
+							{#each UFS_BRASIL as ufOption}
+								<option value={ufOption}>{ufOption}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Endereço -->
+					<div class="form-control md:col-span-2">
+						<label class="label" for="endereco">
+							<span class="label-text font-medium">Endereço <span class="text-error">*</span></span>
+						</label>
+						<input
+							id="endereco"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={endereco}
+							required
+						/>
+					</div>
+
+					<!-- E-mail -->
+					<div class="form-control lg:col-span-2">
+						<label class="label" for="email">
+							<span class="label-text font-medium">E-mail <span class="text-error">*</span></span>
+						</label>
+						<input
+							id="email"
+							type="email"
+							class="input input-bordered w-full"
+							bind:value={email}
+							required
+						/>
+					</div>
+
+					<!-- Telefone -->
+					<div class="form-control lg:col-span-2">
+						<label class="label" for="telefone">
+							<span class="label-text font-medium">Telefone <span class="text-error">*</span></span>
+						</label>
+						<input
+							id="telefone"
+							type="text"
+							inputmode="numeric"
+							class="input input-bordered w-full"
+							value={telefone}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								telefone = maskPhone(target.value);
+								target.value = telefone;
+							}}
+							required
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Card 4.5: Dependentes -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-4">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2a3 3 0 00-5.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2a3 3 0 015.356-1.857M15 7a3 3 0 11-6 0 3 3 0 016 0z"
+						/>
+					</svg>
+					Dependentes
+				</h2>
+
+				{#if dependentes.length > 0}
+					<div class="space-y-2">
+						<h3 class="text-sm font-semibold">Dependentes adicionados ({dependentes.length}/10)</h3>
+						{#each dependentes as dep}
+							<div class="bg-base-200 flex items-center gap-3 rounded-lg p-3">
+								<div class="flex-1 text-sm">
+									<p class="font-semibold">{dep.nome} — {dep.parentesco}</p>
+									<p class="text-base-content/70 text-xs">
+										CPF: {dep.cpf} • Nasc.: {dep.nascimento}
+									</p>
+									<div class="mt-2 flex flex-wrap gap-4">
+										<label class="label cursor-pointer gap-2">
+											<input
+												type="checkbox"
+												class="checkbox checkbox-xs checkbox-primary"
+												bind:checked={dep.salarioFamilia}
+											/>
+											<span class="label-text text-xs">Salário Família</span>
+										</label>
+										<label class="label cursor-pointer gap-2">
+											<input
+												type="checkbox"
+												class="checkbox checkbox-xs checkbox-primary"
+												bind:checked={dep.impostoRenda}
+											/>
+											<span class="label-text text-xs">Imposto de Renda</span>
+										</label>
+									</div>
+								</div>
+								<button
+									type="button"
+									class="btn btn-sm btn-error btn-square"
+									aria-label="Remover dependente"
+									onclick={() => removerDependente(dep.id)}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+										><path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18L18 6M6 6l12 12"
+										/></svg
+									>
+								</button>
+							</div>
+						{/each}
+					</div>
+				{/if}
+
+				{#if dependentes.length < 10}
+					<div class="collapse-arrow border-base-300 bg-base-200 collapse border">
+						<input type="checkbox" bind:checked={mostrarFormularioDependente} />
+						<div class="collapse-title font-medium">Adicionar Dependente</div>
+						<div class="collapse-content">
+							<div class="grid grid-cols-1 gap-4 pt-2 md:grid-cols-2 lg:grid-cols-3">
+								<div class="form-control">
+									<label class="label" for="dep-parentesco">
+										<span class="label-text font-medium">Grau de Parentesco</span>
+									</label>
+									<select
+										id="dep-parentesco"
+										class="select select-bordered w-full"
+										bind:value={dependenteAtual.parentesco}
+									>
+										<option value="">Selecione...</option>
+										<option value="filho">Filho</option>
+										<option value="filha">Filha</option>
+										<option value="conjuge">Cônjuge</option>
+										<option value="outro">Outros</option>
+									</select>
+								</div>
+
+								<div class="form-control lg:col-span-2">
+									<label class="label" for="dep-nome">
+										<span class="label-text font-medium">Nome do Dependente</span>
+									</label>
+									<input
+										id="dep-nome"
+										type="text"
+										class="input input-bordered w-full"
+										bind:value={dependenteAtual.nome}
+									/>
+								</div>
+
+								<div class="form-control">
+									<label class="label" for="dep-cpf">
+										<span class="label-text font-medium">CPF do Dependente</span>
+									</label>
+									<input
+										id="dep-cpf"
+										type="text"
+										inputmode="numeric"
+										class="input input-bordered w-full"
+										value={dependenteAtual.cpf}
+										oninput={(e) => {
+											const t = e.target as HTMLInputElement;
+											dependenteAtual.cpf = maskCPF(t.value);
+											t.value = dependenteAtual.cpf;
+										}}
+									/>
+								</div>
+
+								<div class="form-control">
+									<label class="label" for="dep-nascimento">
+										<span class="label-text font-medium">Data de Nascimento</span>
+									</label>
+									<input
+										id="dep-nascimento"
+										type="text"
+										inputmode="numeric"
+										placeholder="dd/mm/aaaa"
+										class="input input-bordered w-full"
+										value={dependenteAtual.nascimento}
+										oninput={(e) => {
+											const t = e.target as HTMLInputElement;
+											dependenteAtual.nascimento = maskDate(t.value);
+											t.value = dependenteAtual.nascimento;
+										}}
+									/>
+								</div>
+
+								<div class="form-control lg:col-span-3">
+									<label class="label" for="dep-doc">
+										<span class="label-text font-medium"
+											>Certidão de Nascimento/Casamento ou Outros (opcional)</span
+										>
+									</label>
+									<input
+										id="dep-doc"
+										type="file"
+										class="file-input file-input-bordered w-full"
+										accept=".pdf,.jpg,.jpeg,.png"
+										onchange={async (e) => {
+											const file = e.currentTarget.files?.[0];
+											dependenteAtual.arquivo = file || null;
+											if (file) {
+												try {
+													dependenteAtual.documentoId = await uploadDocumentoDependente(file);
+												} catch {
+													alert('Falha no upload do documento do dependente');
+												}
+											}
+										}}
+									/>
+								</div>
+
+								<!-- Checkboxes de benefícios por dependente -->
+								<div class="form-control">
+									<label class="label cursor-pointer justify-start gap-3">
+										<input
+											type="checkbox"
+											class="checkbox checkbox-primary"
+											bind:checked={dependenteAtual.salarioFamilia}
+										/>
+										<span class="label-text">Salário Família</span>
+									</label>
+								</div>
+								<div class="form-control">
+									<label class="label cursor-pointer justify-start gap-3">
+										<input
+											type="checkbox"
+											class="checkbox checkbox-primary"
+											bind:checked={dependenteAtual.impostoRenda}
+										/>
+										<span class="label-text">Imposto de Renda</span>
+									</label>
+								</div>
+
+								<div class="lg:col-span-3">
+									<button
+										type="button"
+										class="btn btn-primary btn-sm gap-2"
+										onclick={adicionarDependente}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+											><path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M12 4v16m8-8H4"
+											/></svg
+										>
+										Adicionar Dependente
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Card 5: Cargo e Vínculo -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-4">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+						/>
+					</svg>
+					Cargo e Vínculo
+				</h2>
+
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+					<!-- Símbolo Tipo -->
+					<div class="form-control">
+						<label class="label" for="simboloTipo">
+							<span class="label-text font-medium"
+								>Símbolo Tipo <span class="text-error">*</span></span
+							>
+						</label>
+						<select
+							id="simboloTipo"
+							class="select select-bordered w-full"
+							bind:value={tipo}
+							required
+						>
+							<option value="cargo_comissionado">Cargo Comissionado</option>
+							<option value="funcao_gratificada">Função Gratificada</option>
+						</select>
+					</div>
+
+					<!-- Símbolo -->
+					<div class="form-control">
+						<label class="label" for="simboloId">
+							<span class="label-text font-medium">Símbolo <span class="text-error">*</span></span>
+						</label>
+						<select
+							id="simboloId"
+							class="select select-bordered w-full"
+							bind:value={simboloId}
+							required
+						>
+							<option value="">Selecione...</option>
+							{#each simbolos.filter((s) => s.tipo === tipo) as s}
+								<option value={s._id}>{s.nome} — {s.descricao}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Descrição Cargo/Função -->
+					<div class="form-control lg:col-span-3">
+						<label class="label" for="descricaoCargo">
+							<span class="label-text font-medium">Descrição Cargo/Função</span>
+						</label>
+						<input
+							id="descricaoCargo"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={descricaoCargo}
+							placeholder="Descreva as atribuições do cargo"
+						/>
+					</div>
+
+					<!-- Nomeação/Portaria -->
+					<div class="form-control">
+						<label class="label" for="nomeacaoPortaria">
+							<span class="label-text font-medium">Nomeação/Portaria Nº</span>
+						</label>
+						<input
+							id="nomeacaoPortaria"
+							type="text"
+							class="input input-bordered w-full"
+							bind:value={nomeacaoPortaria}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label" for="nomeacaoData">
+							<span class="label-text font-medium">Data</span>
+						</label>
+						<input
+							id="nomeacaoData"
+							type="text"
+							inputmode="numeric"
+							placeholder="dd/mm/aaaa"
+							class="input input-bordered w-full"
+							value={nomeacaoData}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								nomeacaoData = maskDate(target.value);
+								target.value = nomeacaoData;
+							}}
+						/>
+					</div>
+
+					<div class="form-control">
+						<label class="label" for="nomeacaoDOE">
+							<span class="label-text font-medium">DOE</span>
+						</label>
+						<input
+							id="nomeacaoDOE"
+							type="text"
+							inputmode="numeric"
+							placeholder="dd/mm/aaaa"
+							class="input input-bordered w-full"
+							value={nomeacaoDOE}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								nomeacaoDOE = maskDate(target.value);
+								target.value = nomeacaoDOE;
+							}}
+						/>
+					</div>
+
+					<!-- Data Admissão -->
+					<div class="form-control">
+						<label class="label" for="admissaoData">
+							<span class="label-text font-medium">Data Admissão</span>
+						</label>
+						<input
+							id="admissaoData"
+							type="text"
+							inputmode="numeric"
+							placeholder="dd/mm/aaaa"
+							class="input input-bordered w-full"
+							value={admissaoData}
+							oninput={(e) => {
+								const target = e.target as HTMLInputElement;
+								admissaoData = maskDate(target.value);
+								target.value = admissaoData;
+							}}
+						/>
+					</div>
+
+					<!-- Pertence a Órgão Público -->
+					<div class="form-control lg:col-span-3">
+						<label class="label cursor-pointer justify-start gap-4">
+							<input
+								type="checkbox"
+								class="checkbox checkbox-primary"
+								bind:checked={pertenceOrgaoPublico}
+							/>
+							<span class="label-text font-medium"
+								>Pertence a Órgão Público Federal, Estadual ou Municipal?</span
+							>
+						</label>
+					</div>
+
+					<!-- Órgão de Origem -->
+					{#if pertenceOrgaoPublico}
+						<div class="form-control lg:col-span-2">
+							<label class="label" for="orgaoOrigem">
+								<span class="label-text font-medium"
+									>Órgão de Origem (para servidor extra-quadro)</span
+								>
+							</label>
+							<input
+								id="orgaoOrigem"
+								type="text"
+								class="input input-bordered w-full"
+								bind:value={orgaoOrigem}
+							/>
+						</div>
+					{/if}
+
+					<!-- Aposentado -->
+					<div class="form-control">
+						<label class="label" for="aposentado">
+							<span class="label-text font-medium">Se Aposentado</span>
+						</label>
+						<select id="aposentado" class="select select-bordered w-full" bind:value={aposentado}>
+							{#each APOSENTADO_OPTIONS as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Card 6: Dados Bancários -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-4">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+						/>
+					</svg>
+					Dados Bancários - Bradesco
+				</h2>
+
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+					<!-- Conta Corrente -->
+					<div class="form-control">
+						<label class="label" for="contaBradescoNumero">
+							<span class="label-text font-medium">Conta Corrente Nº</span>
+						</label>
+						<input
+							id="contaBradescoNumero"
+							type="text"
+							inputmode="numeric"
+							class="input input-bordered w-full"
+							bind:value={contaBradescoNumero}
+						/>
+					</div>
+
+					<!-- DV -->
+					<div class="form-control">
+						<label class="label" for="contaBradescoDV">
+							<span class="label-text font-medium">DV</span>
+						</label>
+						<input
+							id="contaBradescoDV"
+							type="text"
+							maxlength="2"
+							class="input input-bordered w-full"
+							bind:value={contaBradescoDV}
+						/>
+					</div>
+
+					<!-- Agência -->
+					<div class="form-control">
+						<label class="label" for="contaBradescoAgencia">
+							<span class="label-text font-medium">Agência</span>
+						</label>
+						<input
+							id="contaBradescoAgencia"
+							type="text"
+							inputmode="numeric"
+							class="input input-bordered w-full"
+							bind:value={contaBradescoAgencia}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Modelos de Declarações -->
+		<ModelosDeclaracoes />
+
+		<!-- Card 7: Documentação Anexa -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-6">
+				<h2 class="card-title border-b pb-3 text-xl">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+						/>
+					</svg>
+					Documentação Anexa
+				</h2>
+
+				<p class="text-base-content/70 text-sm">
+					Anexe os documentos necessários em formato PDF ou imagem (máximo 10MB cada)
+				</p>
+
+				{#each categoriasDocumentos as categoria}
+					<div class="space-y-3">
+						<h3 class="text-primary text-lg font-semibold">{categoria}</h3>
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							{#each getDocumentosByCategoria(categoria) as doc}
+								<FileUpload
+									label={doc.nome}
+									helpUrl={doc.helpUrl}
+									value={documentosStorage[doc.campo]}
+									onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
+									onRemove={() => handleDocumentoRemove(doc.campo)}
+									disabled={loading}
+								/>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Card 8: Ações -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<div class="flex flex-col justify-end gap-3 sm:flex-row">
+					<button
+						type="button"
+						class="btn btn-lg"
+						disabled={loading}
+						onclick={() => goto('/recursos-humanos/funcionarios')}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Cancelar
+					</button>
+					<button
+						type="button"
+						class="btn btn-primary btn-lg"
+						disabled={loading}
+						onclick={() =>
+							(
+								document.getElementById('confirmar_cadastro_func') as HTMLDialogElement
+							)?.showModal()}
+					>
+						{#if loading}
+							<span class="loading loading-spinner"></span>
+							Cadastrando...
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Cadastrar Funcionário
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Modal de Confirmação Legal -->
+		<dialog id="confirmar_cadastro_func" class="modal">
+			<div class="modal-box max-w-3xl">
+				<h3 class="mb-3 text-lg font-bold">Declaração de Veracidade</h3>
+				<div class="prose max-w-none text-sm">
+					<p>
+						Declaro, sob as penas da lei (art. 299 do Código Penal Brasileiro, que trata do crime de
+						falsidade ideológica, e demais cominações legais aplicáveis), a veracidade e
+						autenticidade de todas as informações e documentos por mim prestados/enviados neste ato.
+						Tenho ciência de que a falsidade das informações implicará nas penalidades cabíveis,
+						podendo resultar na nulidade do ato.
+					</p>
+				</div>
+				<div class="modal-action">
+					<div class="flex gap-2">
+						<button
+							type="button"
+							class="btn"
+							onclick={() =>
+								(document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.close()}
+							>Cancelar</button
+						>
+						<button
+							type="button"
+							class="btn btn-primary"
+							onclick={() => {
+								(document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.close();
+								handleSubmit();
+							}}>Ciente</button
+						>
+					</div>
+				</div>
+			</div>
+		</dialog>
+	</form>
 </main>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte
index 9ec3f57..cf72eb7 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte
@@ -1,330 +1,514 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-  import { onMount } from "svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let list: Array<any> = $state([]);
-  let filtro = $state("");
-  let notice: { kind: "success" | "error"; text: string } | null = $state(null);
-  let toDelete: { id: string; nome: string; cpf: string; matricula: string } | null = $state(null);
-  let deletingId: string | null = $state(null);
+	let list: Array<any> = $state([]);
+	let filtro = $state('');
+	let notice: { kind: 'success' | 'error'; text: string } | null = $state(null);
+	let toDelete: { id: string; nome: string; cpf: string; matricula: string } | null = $state(null);
+	let deletingId: string | null = $state(null);
 
-  async function load() {
-    try {
-      list = await client.query(api.funcionarios.getAll, {} as any);
-    } catch (e) {
-      notice = { kind: "error", text: "Falha ao carregar funcionários." };
-    }
-  }
+	async function load() {
+		try {
+			list = await client.query(api.funcionarios.getAll, {} as any);
+		} catch (e) {
+			notice = { kind: 'error', text: 'Falha ao carregar funcionários.' };
+		}
+	}
 
-  function openDeleteModal(id: string, nome: string, cpf: string, matricula: string) {
-    toDelete = { id, nome, cpf, matricula };
-    (document.getElementById("delete_modal_func_excluir") as HTMLDialogElement)?.showModal();
-  }
+	function openDeleteModal(id: string, nome: string, cpf: string, matricula: string) {
+		toDelete = { id, nome, cpf, matricula };
+		(document.getElementById('delete_modal_func_excluir') as HTMLDialogElement)?.showModal();
+	}
 
-  function closeDeleteModal() {
-    toDelete = null;
-    (document.getElementById("delete_modal_func_excluir") as HTMLDialogElement)?.close();
-  }
+	function closeDeleteModal() {
+		toDelete = null;
+		(document.getElementById('delete_modal_func_excluir') as HTMLDialogElement)?.close();
+	}
 
-  async function confirmDelete() {
-    if (!toDelete) return;
-    try {
-      deletingId = toDelete.id;
-      await client.mutation(api.funcionarios.remove, { id: toDelete.id } as any);
-      closeDeleteModal();
-      notice = { kind: "success", text: `Funcionário "${toDelete.nome}" excluído com sucesso!` };
-      await load();
-      
-      // Auto-fechar mensagem de sucesso após 5 segundos
-      setTimeout(() => {
-        notice = null;
-      }, 5000);
-    } catch (e) {
-      notice = { kind: "error", text: "Erro ao excluir cadastro. Tente novamente." };
-    } finally {
-      deletingId = null;
-    }
-  }
+	async function confirmDelete() {
+		if (!toDelete) return;
+		try {
+			deletingId = toDelete.id;
+			await client.mutation(api.funcionarios.remove, { id: toDelete.id } as any);
+			closeDeleteModal();
+			notice = { kind: 'success', text: `Funcionário "${toDelete.nome}" excluído com sucesso!` };
+			await load();
 
-  function limparFiltro() {
-    filtro = "";
-  }
+			// Auto-fechar mensagem de sucesso após 5 segundos
+			setTimeout(() => {
+				notice = null;
+			}, 5000);
+		} catch (e) {
+			notice = { kind: 'error', text: 'Erro ao excluir cadastro. Tente novamente.' };
+		} finally {
+			deletingId = null;
+		}
+	}
 
-  function back() { 
-    goto("/recursos-humanos/funcionarios"); 
-  }
+	function limparFiltro() {
+		filtro = '';
+	}
 
-  // Computed para lista filtrada
-  const filtered = $derived(
-    list.filter((f) => {
-      const q = (filtro || "").toLowerCase();
-      return !q || 
-        (f.nome || "").toLowerCase().includes(q) || 
-        (f.cpf || "").includes(q) || 
-        (f.matricula || "").toLowerCase().includes(q);
-    })
-  );
+	function back() {
+		goto('/recursos-humanos/funcionarios');
+	}
 
-  onMount(() => { 
-    void load(); 
-  });
+	// Computed para lista filtrada
+	const filtered = $derived(
+		list.filter((f) => {
+			const q = (filtro || '').toLowerCase();
+			return (
+				!q ||
+				(f.nome || '').toLowerCase().includes(q) ||
+				(f.cpf || '').includes(q) ||
+				(f.matricula || '').toLowerCase().includes(q)
+			);
+		})
+	);
+
+	onMount(() => {
+		void load();
+	});
 </script>
 
 <!-- Breadcrumb -->
-<div class="text-sm breadcrumbs mb-4">
-  <ul>
-    <li>
-      <a href="/" class="text-primary hover:text-primary-focus">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-        </svg>
-        Dashboard
-      </a>
-    </li>
-    <li>
-      <a href="/recursos-humanos" class="text-primary hover:text-primary-focus">Recursos Humanos</a>
-    </li>
-    <li>
-      <a href="/recursos-humanos/funcionarios" class="text-primary hover:text-primary-focus">Funcionários</a>
-    </li>
-    <li class="font-semibold">Excluir Funcionários</li>
-  </ul>
+<div class="breadcrumbs mb-4 text-sm">
+	<ul>
+		<li>
+			<a href="/" class="text-primary hover:text-primary-focus">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+					/>
+				</svg>
+				Dashboard
+			</a>
+		</li>
+		<li>
+			<a href="/recursos-humanos" class="text-primary hover:text-primary-focus">Recursos Humanos</a>
+		</li>
+		<li>
+			<a href="/recursos-humanos/funcionarios" class="text-primary hover:text-primary-focus"
+				>Funcionários</a
+			>
+		</li>
+		<li class="font-semibold">Excluir Funcionários</li>
+	</ul>
 </div>
 
 <!-- Header com ícone e descrição -->
 <div class="mb-6">
-  <div class="flex items-center gap-3 mb-2">
-    <div class="p-3 bg-error/10 rounded-xl">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-      </svg>
-    </div>
-    <div class="flex-1">
-      <h1 class="text-3xl font-bold text-base-content">Excluir Funcionários</h1>
-      <p class="text-base-content/60 mt-1">Selecione o funcionário que deseja remover do sistema</p>
-    </div>
-    <button 
-      class="btn btn-ghost gap-2"
-      onclick={back}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-      </svg>
-      Voltar
-    </button>
-  </div>
+	<div class="mb-2 flex items-center gap-3">
+		<div class="bg-error/10 rounded-xl p-3">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-error h-8 w-8"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+				/>
+			</svg>
+		</div>
+		<div class="flex-1">
+			<h1 class="text-base-content text-3xl font-bold">Excluir Funcionários</h1>
+			<p class="text-base-content/60 mt-1">Selecione o funcionário que deseja remover do sistema</p>
+		</div>
+		<button class="btn gap-2" onclick={back}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-5 w-5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 19l-7-7m0 0l7-7m-7 7h18"
+				/>
+			</svg>
+			Voltar
+		</button>
+	</div>
 </div>
 
 <!-- Alerta de sucesso/erro -->
 {#if notice}
-  <div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
-    {#if notice.kind === "success"}
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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>
-    {:else}
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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>
-    {/if}
-    <span class="font-semibold">{notice.text}</span>
-    <button class="btn btn-sm btn-ghost" onclick={() => notice = null} aria-label="Fechar alerta">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-      </svg>
-    </button>
-  </div>
+	<div
+		class="alert mb-6 shadow-lg"
+		class:alert-success={notice.kind === 'success'}
+		class:alert-error={notice.kind === 'error'}
+	>
+		{#if notice.kind === 'success'}
+			<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>
+		{:else}
+			<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>
+		{/if}
+		<span class="font-semibold">{notice.text}</span>
+		<button class="btn btn-sm btn-ghost" onclick={() => (notice = null)} aria-label="Fechar alerta">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</button>
+	</div>
 {/if}
 
 <!-- Card de Filtros -->
-<div class="card bg-base-100 shadow-xl mb-6">
-  <div class="card-body">
-    <div class="flex items-center justify-between mb-4">
-      <h2 class="card-title text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-        Filtros de Busca
-      </h2>
-      {#if filtro}
-        <button class="btn btn-sm btn-ghost gap-2" onclick={limparFiltro}>
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-          Limpar Filtros
-        </button>
-      {/if}
-    </div>
-    
-    <div class="form-control w-full">
-      <label class="label" for="func_excluir_busca">
-        <span class="label-text font-semibold">Buscar por Nome, CPF ou Matrícula</span>
-      </label>
-      <input 
-        id="func_excluir_busca" 
-        type="text"
-        placeholder="Digite para filtrar..." 
-        class="input input-bordered input-primary w-full focus:input-primary" 
-        bind:value={filtro} 
-      />
-      <div class="label">
-        <span class="label-text-alt text-base-content/60">
-          {filtered.length} funcionário{filtered.length !== 1 ? 's' : ''} encontrado{filtered.length !== 1 ? 's' : ''}
-        </span>
-      </div>
-    </div>
-  </div>
+<div class="card bg-base-100 mb-6 shadow-xl">
+	<div class="card-body">
+		<div class="mb-4 flex items-center justify-between">
+			<h2 class="card-title text-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-primary h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+					/>
+				</svg>
+				Filtros de Busca
+			</h2>
+			{#if filtro}
+				<button class="btn btn-sm btn-ghost gap-2" onclick={limparFiltro}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+					Limpar Filtros
+				</button>
+			{/if}
+		</div>
+
+		<div class="form-control w-full">
+			<label class="label" for="func_excluir_busca">
+				<span class="label-text font-semibold">Buscar por Nome, CPF ou Matrícula</span>
+			</label>
+			<input
+				id="func_excluir_busca"
+				type="text"
+				placeholder="Digite para filtrar..."
+				class="input input-bordered input-primary focus:input-primary w-full"
+				bind:value={filtro}
+			/>
+			<div class="label">
+				<span class="label-text-alt text-base-content/60">
+					{filtered.length} funcionário{filtered.length !== 1 ? 's' : ''} encontrado{filtered.length !==
+					1
+						? 's'
+						: ''}
+				</span>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Tabela de Funcionários -->
 <div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <h2 class="card-title text-lg mb-4">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
-      </svg>
-      Lista de Funcionários
-    </h2>
+	<div class="card-body">
+		<h2 class="card-title mb-4 text-lg">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-primary h-5 w-5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+				/>
+			</svg>
+			Lista de Funcionários
+		</h2>
 
-    {#if list.length === 0}
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="p-4 bg-base-200 rounded-full mb-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-          </svg>
-        </div>
-        <p class="text-lg font-semibold text-base-content/70">Nenhum funcionário cadastrado</p>
-        <p class="text-sm text-base-content/50 mt-2">Cadastre funcionários para gerenciá-los aqui</p>
-      </div>
-    {:else if filtered.length === 0}
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="p-4 bg-base-200 rounded-full mb-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-          </svg>
-        </div>
-        <p class="text-lg font-semibold text-base-content/70">Nenhum resultado encontrado</p>
-        <p class="text-sm text-base-content/50 mt-2">Tente ajustar os filtros de busca</p>
-        <button class="btn btn-primary btn-sm mt-4" onclick={limparFiltro}>Limpar Filtros</button>
-      </div>
-    {:else}
-      <div class="overflow-x-auto">
-        <table class="table table-zebra">
-          <thead class="bg-base-200 sticky top-0 z-10">
-            <tr>
-              <th class="text-base">Nome</th>
-              <th class="text-base">CPF</th>
-              <th class="text-base">Matrícula</th>
-              <th class="text-base text-center">Ações</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each filtered as f}
-              <tr class="hover">
-                <td class="font-semibold">{f.nome}</td>
-                <td>{f.cpf}</td>
-                <td><span class="badge badge-ghost">{f.matricula}</span></td>
-                <td class="text-center">
-                  <button 
-                    class="btn btn-error btn-sm gap-2"
-                    onclick={() => openDeleteModal(f._id, f.nome, f.cpf, f.matricula)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                    </svg>
-                    Excluir
-                  </button>
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  </div>
+		{#if list.length === 0}
+			<div class="flex flex-col items-center justify-center py-12 text-center">
+				<div class="bg-base-200 mb-4 rounded-full p-4">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-base-content/30 h-12 w-12"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+						/>
+					</svg>
+				</div>
+				<p class="text-base-content/70 text-lg font-semibold">Nenhum funcionário cadastrado</p>
+				<p class="text-base-content/50 mt-2 text-sm">
+					Cadastre funcionários para gerenciá-los aqui
+				</p>
+			</div>
+		{:else if filtered.length === 0}
+			<div class="flex flex-col items-center justify-center py-12 text-center">
+				<div class="bg-base-200 mb-4 rounded-full p-4">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-base-content/30 h-12 w-12"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+				</div>
+				<p class="text-base-content/70 text-lg font-semibold">Nenhum resultado encontrado</p>
+				<p class="text-base-content/50 mt-2 text-sm">Tente ajustar os filtros de busca</p>
+				<button class="btn btn-primary btn-sm mt-4" onclick={limparFiltro}>Limpar Filtros</button>
+			</div>
+		{:else}
+			<div class="overflow-x-auto">
+				<table class="table-zebra table">
+					<thead class="bg-base-200 sticky top-0 z-10">
+						<tr>
+							<th class="text-base">Nome</th>
+							<th class="text-base">CPF</th>
+							<th class="text-base">Matrícula</th>
+							<th class="text-center text-base">Ações</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each filtered as f}
+							<tr class="hover">
+								<td class="font-semibold">{f.nome}</td>
+								<td>{f.cpf}</td>
+								<td><span class="badge badge-ghost">{f.matricula}</span></td>
+								<td class="text-center">
+									<button
+										class="btn btn-error btn-sm gap-2"
+										onclick={() => openDeleteModal(f._id, f.nome, f.cpf, f.matricula)}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+										Excluir
+									</button>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	</div>
 </div>
 
 <!-- Modal de Confirmação de Exclusão -->
 <dialog id="delete_modal_func_excluir" class="modal">
-  <div class="modal-box max-w-md">
-    <h3 class="font-bold text-2xl mb-4 flex items-center gap-2 text-error">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-      </svg>
-      Confirmar Exclusão
-    </h3>
-    
-    <div class="alert alert-warning mb-4">
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-      </svg>
-      <div>
-        <span class="font-bold">Atenção!</span>
-        <p class="text-sm">Esta ação não pode ser desfeita!</p>
-      </div>
-    </div>
-    
-    {#if toDelete}
-      <div class="bg-base-200 rounded-lg p-4 mb-4">
-        <p class="text-sm text-base-content/70 mb-3">Você está prestes a excluir o seguinte funcionário:</p>
-        <div class="space-y-2">
-          <div class="flex items-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-            </svg>
-            <strong class="text-error text-lg">{toDelete.nome}</strong>
-          </div>
-          <div class="flex items-center gap-2 text-sm">
-            <span class="text-base-content/60">CPF:</span>
-            <span class="font-semibold">{toDelete.cpf}</span>
-          </div>
-          <div class="flex items-center gap-2 text-sm">
-            <span class="text-base-content/60">Matrícula:</span>
-            <span class="badge badge-ghost">{toDelete.matricula}</span>
-          </div>
-        </div>
-      </div>
-      
-      <p class="text-center text-sm text-base-content/70 mb-6">
-        Tem certeza que deseja continuar?
-      </p>
-    {/if}
-    
-    <div class="modal-action justify-between">
-      <button 
-        class="btn btn-ghost gap-2" 
-        onclick={closeDeleteModal} 
-        disabled={deletingId !== null}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-        Cancelar
-      </button>
-      <button 
-        class="btn btn-error gap-2" 
-        onclick={confirmDelete} 
-        disabled={deletingId !== null}
-      >
-        {#if deletingId}
-          <span class="loading loading-spinner loading-sm"></span>
-          Excluindo...
-        {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
-          Confirmar Exclusão
-        {/if}
-      </button>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
+	<div class="modal-box max-w-md">
+		<h3 class="text-error mb-4 flex items-center gap-2 text-2xl font-bold">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-7 w-7"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+				/>
+			</svg>
+			Confirmar Exclusão
+		</h3>
+
+		<div class="alert alert-warning mb-4">
+			<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+				/>
+			</svg>
+			<div>
+				<span class="font-bold">Atenção!</span>
+				<p class="text-sm">Esta ação não pode ser desfeita!</p>
+			</div>
+		</div>
+
+		{#if toDelete}
+			<div class="bg-base-200 mb-4 rounded-lg p-4">
+				<p class="text-base-content/70 mb-3 text-sm">
+					Você está prestes a excluir o seguinte funcionário:
+				</p>
+				<div class="space-y-2">
+					<div class="flex items-center gap-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+							/>
+						</svg>
+						<strong class="text-error text-lg">{toDelete.nome}</strong>
+					</div>
+					<div class="flex items-center gap-2 text-sm">
+						<span class="text-base-content/60">CPF:</span>
+						<span class="font-semibold">{toDelete.cpf}</span>
+					</div>
+					<div class="flex items-center gap-2 text-sm">
+						<span class="text-base-content/60">Matrícula:</span>
+						<span class="badge badge-ghost">{toDelete.matricula}</span>
+					</div>
+				</div>
+			</div>
+
+			<p class="text-base-content/70 mb-6 text-center text-sm">Tem certeza que deseja continuar?</p>
+		{/if}
+
+		<div class="modal-action justify-between">
+			<button class="btn gap-2" onclick={closeDeleteModal} disabled={deletingId !== null}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+				Cancelar
+			</button>
+			<button class="btn btn-error gap-2" onclick={confirmDelete} disabled={deletingId !== null}>
+				{#if deletingId}
+					<span class="loading loading-spinner loading-sm"></span>
+					Excluindo...
+				{:else}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+						/>
+					</svg>
+					Confirmar Exclusão
+				{/if}
+			</button>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
 </dialog>
-
-
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte
index 3ea6688..76a2f2c 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte
@@ -1,359 +1,440 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { onMount } from "svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { onMount } from 'svelte';
 
-  const client = useConvexClient();
-  let isLoading = true;
-  let list: Array<any> = [];
-  let filtroNome = "";
-  let filtroTipo: "" | "cargo_comissionado" | "funcao_gratificada" = "";
-  let filtroDescricao = "";
-  let filtered: Array<any> = [];
-  let notice: { kind: "success" | "error"; text: string } | null = null;
-  $: needsScroll = filtered.length > 8;
-  let openMenuId: string | null = null;
-  function toggleMenu(id: string) {
-    openMenuId = openMenuId === id ? null : id;
-  }
-  $: filtered = (list ?? []).filter((s) => {
-    const nome = (filtroNome || "").toLowerCase();
-    const desc = (filtroDescricao || "").toLowerCase();
-    const okNome = !nome || (s.nome || "").toLowerCase().includes(nome);
-    const okDesc = !desc || (s.descricao || "").toLowerCase().includes(desc);
-    const okTipo = !filtroTipo || s.tipo === filtroTipo;
-    return okNome && okDesc && okTipo;
-  });
-  onMount(async () => {
-    try {
-      list = await client.query(api.simbolos.getAll, {} as any);
-    } finally {
-      isLoading = false;
-    }
-  });
+	const client = useConvexClient();
+	let isLoading = true;
+	let list: Array<any> = [];
+	let filtroNome = '';
+	let filtroTipo: '' | 'cargo_comissionado' | 'funcao_gratificada' = '';
+	let filtroDescricao = '';
+	let filtered: Array<any> = [];
+	let notice: { kind: 'success' | 'error'; text: string } | null = null;
+	$: needsScroll = filtered.length > 8;
+	let openMenuId: string | null = null;
+	function toggleMenu(id: string) {
+		openMenuId = openMenuId === id ? null : id;
+	}
+	$: filtered = (list ?? []).filter((s) => {
+		const nome = (filtroNome || '').toLowerCase();
+		const desc = (filtroDescricao || '').toLowerCase();
+		const okNome = !nome || (s.nome || '').toLowerCase().includes(nome);
+		const okDesc = !desc || (s.descricao || '').toLowerCase().includes(desc);
+		const okTipo = !filtroTipo || s.tipo === filtroTipo;
+		return okNome && okDesc && okTipo;
+	});
+	onMount(async () => {
+		try {
+			list = await client.query(api.simbolos.getAll, {} as any);
+		} finally {
+			isLoading = false;
+		}
+	});
 
-  let deletingId: Id<"simbolos"> | null = null;
-  let simboloToDelete: { id: Id<"simbolos">; nome: string } | null = null;
+	let deletingId: Id<'simbolos'> | null = null;
+	let simboloToDelete: { id: Id<'simbolos'>; nome: string } | null = null;
 
-  function openDeleteModal(id: Id<"simbolos">, nome: string) {
-    simboloToDelete = { id, nome };
-    (document.getElementById("delete_modal") as HTMLDialogElement)?.showModal();
-  }
+	function openDeleteModal(id: Id<'simbolos'>, nome: string) {
+		simboloToDelete = { id, nome };
+		(document.getElementById('delete_modal') as HTMLDialogElement)?.showModal();
+	}
 
-  function closeDeleteModal() {
-    simboloToDelete = null;
-    (document.getElementById("delete_modal") as HTMLDialogElement)?.close();
-  }
+	function closeDeleteModal() {
+		simboloToDelete = null;
+		(document.getElementById('delete_modal') as HTMLDialogElement)?.close();
+	}
 
-  async function confirmDelete() {
-    if (!simboloToDelete) return;
-    try {
-      deletingId = simboloToDelete.id;
-      await client.mutation(api.simbolos.remove, { id: simboloToDelete.id });
-      // reload list
-      list = await client.query(api.simbolos.getAll, {} as any);
-      notice = { kind: "success", text: "Símbolo excluído com sucesso." };
-      closeDeleteModal();
-    } catch (error) {
-      notice = { kind: "error", text: "Erro ao excluir símbolo." };
-    } finally {
-      deletingId = null;
-    }
-  }
+	async function confirmDelete() {
+		if (!simboloToDelete) return;
+		try {
+			deletingId = simboloToDelete.id;
+			await client.mutation(api.simbolos.remove, { id: simboloToDelete.id });
+			// reload list
+			list = await client.query(api.simbolos.getAll, {} as any);
+			notice = { kind: 'success', text: 'Símbolo excluído com sucesso.' };
+			closeDeleteModal();
+		} catch (error) {
+			notice = { kind: 'error', text: 'Erro ao excluir símbolo.' };
+		} finally {
+			deletingId = null;
+		}
+	}
 
-  function formatMoney(value: string) {
-    const num = parseFloat(value);
-    if (isNaN(num)) return "R$ 0,00";
-    return `R$ ${num.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-  }
+	function formatMoney(value: string) {
+		const num = parseFloat(value);
+		if (isNaN(num)) return 'R$ 0,00';
+		return `R$ ${num.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+	}
 
-  function getTipoLabel(tipo: string) {
-    return tipo === "cargo_comissionado" ? "Cargo Comissionado" : "Função Gratificada";
-  }
+	function getTipoLabel(tipo: string) {
+		return tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada';
+	}
 </script>
 
 <main class="container mx-auto px-4 py-4">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li>Símbolos</li>
-    </ul>
-  </div>
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
+			<li>Símbolos</li>
+		</ul>
+	</div>
 
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-green-500/20 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Símbolos Cadastrados</h1>
-          <p class="text-base-content/70">Gerencie cargos comissionados e funções gratificadas</p>
-        </div>
-      </div>
-      <a href="/recursos-humanos/simbolos/cadastro" class="btn btn-primary btn-lg gap-2">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
-        </svg>
-        Novo Símbolo
-      </a>
-    </div>
-  </div>
+	<!-- Cabeçalho -->
+	<div class="mb-6">
+		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-green-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-green-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Símbolos Cadastrados</h1>
+					<p class="text-base-content/70">Gerencie cargos comissionados e funções gratificadas</p>
+				</div>
+			</div>
+			<a href="/recursos-humanos/simbolos/cadastro" class="btn btn-primary btn-lg gap-2">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+				Novo Símbolo
+			</a>
+		</div>
+	</div>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        {#if notice.kind === "success"}
-          <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" />
-        {:else}
-          <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" />
-        {/if}
-      </svg>
-      <span>{notice.text}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={notice.kind === 'success'}
+			class:alert-error={notice.kind === 'error'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.kind === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.text}</span>
+		</div>
+	{/if}
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-        Filtros de Pesquisa
-      </h2>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="form-control">
-          <label class="label" for="symbol_nome">
-            <span class="label-text font-semibold">Nome do Símbolo</span>
-          </label>
-          <input 
-            id="symbol_nome" 
-            class="input input-bordered focus:input-primary" 
-            placeholder="Buscar por nome..."
-            bind:value={filtroNome} 
-          />
-        </div>
-        <div class="form-control">
-          <label class="label" for="symbol_tipo">
-            <span class="label-text font-semibold">Tipo</span>
-          </label>
-          <select id="symbol_tipo" class="select select-bordered focus:select-primary" bind:value={filtroTipo}>
-            <option value="">Todos os tipos</option>
-            <option value="cargo_comissionado">Cargo Comissionado</option>
-            <option value="funcao_gratificada">Função Gratificada</option>
-          </select>
-        </div>
-        <div class="form-control">
-          <label class="label" for="symbol_desc">
-            <span class="label-text font-semibold">Descrição</span>
-          </label>
-          <input 
-            id="symbol_desc" 
-            class="input input-bordered focus:input-primary" 
-            placeholder="Buscar na descrição..."
-            bind:value={filtroDescricao} 
-          />
-        </div>
-      </div>
-      {#if filtroNome || filtroTipo || filtroDescricao}
-        <div class="mt-4">
-          <button 
-            class="btn btn-ghost btn-sm gap-2"
-            onclick={() => {
-              filtroNome = "";
-              filtroTipo = "";
-              filtroDescricao = "";
-            }}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-            Limpar Filtros
-          </button>
-        </div>
-      {/if}
-    </div>
-  </div>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+					/>
+				</svg>
+				Filtros de Pesquisa
+			</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<div class="form-control">
+					<label class="label" for="symbol_nome">
+						<span class="label-text font-semibold">Nome do Símbolo</span>
+					</label>
+					<input
+						id="symbol_nome"
+						class="input input-bordered focus:input-primary"
+						placeholder="Buscar por nome..."
+						bind:value={filtroNome}
+					/>
+				</div>
+				<div class="form-control">
+					<label class="label" for="symbol_tipo">
+						<span class="label-text font-semibold">Tipo</span>
+					</label>
+					<select
+						id="symbol_tipo"
+						class="select select-bordered focus:select-primary"
+						bind:value={filtroTipo}
+					>
+						<option value="">Todos os tipos</option>
+						<option value="cargo_comissionado">Cargo Comissionado</option>
+						<option value="funcao_gratificada">Função Gratificada</option>
+					</select>
+				</div>
+				<div class="form-control">
+					<label class="label" for="symbol_desc">
+						<span class="label-text font-semibold">Descrição</span>
+					</label>
+					<input
+						id="symbol_desc"
+						class="input input-bordered focus:input-primary"
+						placeholder="Buscar na descrição..."
+						bind:value={filtroDescricao}
+					/>
+				</div>
+			</div>
+			{#if filtroNome || filtroTipo || filtroDescricao}
+				<div class="mt-4">
+					<button
+						class="btn btn-sm gap-2"
+						onclick={() => {
+							filtroNome = '';
+							filtroTipo = '';
+							filtroDescricao = '';
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Limpar Filtros
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  {#if isLoading}
-    <div class="flex justify-center items-center py-12">
-      <span class="loading loading-spinner loading-lg"></span>
-    </div>
-  {:else}
-    <!-- Tabela de Símbolos -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body p-0">
-        <div class="overflow-x-auto">
-          <div class="overflow-y-auto" style="max-height: {filtered.length > 8 ? '600px' : 'none'};">
-            <table class="table table-zebra w-full">
-              <thead class="sticky top-0 bg-base-200 z-10">
-                <tr>
-                  <th class="font-bold">Nome</th>
-                  <th class="font-bold">Tipo</th>
-                  <th class="font-bold">Valor Referência</th>
-                  <th class="font-bold">Valor Vencimento</th>
-                  <th class="font-bold">Valor Total</th>
-                  <th class="font-bold">Descrição</th>
-                  <th class="text-right font-bold">Ações</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#if filtered.length > 0}
-                  {#each filtered as simbolo}
-                    <tr class="hover">
-                      <td class="font-medium">{simbolo.nome}</td>
-                      <td>
-                        <span
-                          class="badge"
-                          class:badge-primary={simbolo.tipo === "cargo_comissionado"}
-                          class:badge-secondary={simbolo.tipo === "funcao_gratificada"}
-                        >
-                          {getTipoLabel(simbolo.tipo)}
-                        </span>
-                      </td>
-                      <td>{simbolo.repValor ? formatMoney(simbolo.repValor) : "—"}</td>
-                      <td>{simbolo.vencValor ? formatMoney(simbolo.vencValor) : "—"}</td>
-                      <td class="font-semibold">{formatMoney(simbolo.valor)}</td>
-                      <td class="max-w-xs truncate">{simbolo.descricao}</td>
-                      <td class="text-right">
-                <div class="dropdown dropdown-end" class:dropdown-open={openMenuId === simbolo._id}>
-                  <button type="button" class="btn btn-ghost btn-sm" onclick={() => toggleMenu(simbolo._id)}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                    >
-                      <path
-                        d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
-                      />
-                    </svg>
-                  </button>
-                  <ul class="dropdown-content menu bg-base-100 rounded-box z-10 w-52 p-2 shadow-lg border border-base-300">
-                    <li>
-                      <a href={"/recursos-humanos/simbolos/" + simbolo._id + "/editar"}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-                          />
-                        </svg>
-                        Editar
-                      </a>
-                    </li>
-                    <li>
-                      <button type="button" onclick={() => openDeleteModal(simbolo._id, simbolo.nome)} class="text-error">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fill-rule="evenodd"
-                            d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                            clip-rule="evenodd"
-                          />
-                        </svg>
-                        Excluir
-                      </button>
-                    </li>
-                  </ul>
-                        </div>
-                      </td>
-                    </tr>
-                  {/each}
-                {:else}
-                  <tr>
-                    <td colspan="7" class="text-center opacity-70 py-8">Nenhum símbolo encontrado com os filtros atuais.</td>
-                  </tr>
-                {/if}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Informação sobre resultados -->
-    <div class="mt-4 text-sm text-base-content/70 text-center">
-      Exibindo {filtered.length} de {list.length} símbolo(s)
-    </div>
-  {/if}
+	{#if isLoading}
+		<div class="flex items-center justify-center py-12">
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
+	{:else}
+		<!-- Tabela de Símbolos -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body p-0">
+				<div class="overflow-x-auto">
+					<div
+						class="overflow-y-auto"
+						style="max-height: {filtered.length > 8 ? '600px' : 'none'};"
+					>
+						<table class="table-zebra table w-full">
+							<thead class="bg-base-200 sticky top-0 z-10">
+								<tr>
+									<th class="font-bold">Nome</th>
+									<th class="font-bold">Tipo</th>
+									<th class="font-bold">Valor Referência</th>
+									<th class="font-bold">Valor Vencimento</th>
+									<th class="font-bold">Valor Total</th>
+									<th class="font-bold">Descrição</th>
+									<th class="text-right font-bold">Ações</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#if filtered.length > 0}
+									{#each filtered as simbolo}
+										<tr class="hover">
+											<td class="font-medium">{simbolo.nome}</td>
+											<td>
+												<span
+													class="badge"
+													class:badge-primary={simbolo.tipo === 'cargo_comissionado'}
+													class:badge-secondary={simbolo.tipo === 'funcao_gratificada'}
+												>
+													{getTipoLabel(simbolo.tipo)}
+												</span>
+											</td>
+											<td>{simbolo.repValor ? formatMoney(simbolo.repValor) : '—'}</td>
+											<td>{simbolo.vencValor ? formatMoney(simbolo.vencValor) : '—'}</td>
+											<td class="font-semibold">{formatMoney(simbolo.valor)}</td>
+											<td class="max-w-xs truncate">{simbolo.descricao}</td>
+											<td class="text-right">
+												<div
+													class="dropdown dropdown-end"
+													class:dropdown-open={openMenuId === simbolo._id}
+												>
+													<button
+														type="button"
+														class="btn btn-sm"
+														onclick={() => toggleMenu(simbolo._id)}
+													>
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															class="h-5 w-5"
+															viewBox="0 0 20 20"
+															fill="currentColor"
+														>
+															<path
+																d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+															/>
+														</svg>
+													</button>
+													<ul
+														class="dropdown-content menu bg-base-100 rounded-box border-base-300 z-10 w-52 border p-2 shadow-lg"
+													>
+														<li>
+															<a href={'/recursos-humanos/simbolos/' + simbolo._id + '/editar'}>
+																<svg
+																	xmlns="http://www.w3.org/2000/svg"
+																	class="h-4 w-4"
+																	viewBox="0 0 20 20"
+																	fill="currentColor"
+																>
+																	<path
+																		d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+																	/>
+																</svg>
+																Editar
+															</a>
+														</li>
+														<li>
+															<button
+																type="button"
+																onclick={() => openDeleteModal(simbolo._id, simbolo.nome)}
+																class="text-error"
+															>
+																<svg
+																	xmlns="http://www.w3.org/2000/svg"
+																	class="h-4 w-4"
+																	viewBox="0 0 20 20"
+																	fill="currentColor"
+																>
+																	<path
+																		fill-rule="evenodd"
+																		d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+																		clip-rule="evenodd"
+																	/>
+																</svg>
+																Excluir
+															</button>
+														</li>
+													</ul>
+												</div>
+											</td>
+										</tr>
+									{/each}
+								{:else}
+									<tr>
+										<td colspan="7" class="py-8 text-center opacity-70"
+											>Nenhum símbolo encontrado com os filtros atuais.</td
+										>
+									</tr>
+								{/if}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Informação sobre resultados -->
+		<div class="text-base-content/70 mt-4 text-center text-sm">
+			Exibindo {filtered.length} de {list.length} símbolo(s)
+		</div>
+	{/if}
 </main>
 
 <!-- Modal de Confirmação de Exclusão -->
 <dialog id="delete_modal" class="modal">
-  <div class="modal-box">
-    <h3 class="font-bold text-lg mb-4">Confirmar Exclusão</h3>
-    <div class="alert alert-warning mb-4">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-        />
-      </svg>
-      <span>Esta ação não pode ser desfeita!</span>
-    </div>
-    {#if simboloToDelete}
-      <p class="py-2">
-        Tem certeza que deseja excluir o símbolo <strong class="text-error"
-          >{simboloToDelete.nome}</strong
-        >?
-      </p>
-    {/if}
-    <div class="modal-action">
-      <form method="dialog" class="flex gap-2">
-        <button class="btn btn-ghost" onclick={closeDeleteModal} type="button">
-          Cancelar
-        </button>
-        <button
-          class="btn btn-error"
-          onclick={confirmDelete}
-          disabled={deletingId !== null}
-          type="button"
-        >
-          {#if deletingId}
-            <span class="loading loading-spinner loading-sm"></span>
-            Excluindo...
-          {:else}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                clip-rule="evenodd"
-              />
-            </svg>
-            Confirmar Exclusão
-          {/if}
-        </button>
-      </form>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
+	<div class="modal-box">
+		<h3 class="mb-4 text-lg font-bold">Confirmar Exclusão</h3>
+		<div class="alert alert-warning mb-4">
+			<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+				/>
+			</svg>
+			<span>Esta ação não pode ser desfeita!</span>
+		</div>
+		{#if simboloToDelete}
+			<p class="py-2">
+				Tem certeza que deseja excluir o símbolo <strong class="text-error"
+					>{simboloToDelete.nome}</strong
+				>?
+			</p>
+		{/if}
+		<div class="modal-action">
+			<form method="dialog" class="flex gap-2">
+				<button class="btn" onclick={closeDeleteModal} type="button"> Cancelar </button>
+				<button
+					class="btn btn-error"
+					onclick={confirmDelete}
+					disabled={deletingId !== null}
+					type="button"
+				>
+					{#if deletingId}
+						<span class="loading loading-spinner loading-sm"></span>
+						Excluindo...
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+						Confirmar Exclusão
+					{/if}
+				</button>
+			</form>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
 </dialog>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/[simboloId]/editar/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/[simboloId]/editar/+page.svelte
index 59859f3..1b6960a 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/[simboloId]/editar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/[simboloId]/editar/+page.svelte
@@ -1,431 +1,415 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { createForm } from "@tanstack/svelte-form";
-  import z from "zod";
-  import { Save } from "lucide-svelte";
-  import { goto } from "$app/navigation";
-  import { page } from "$app/stores";
-  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { createForm } from '@tanstack/svelte-form';
+	import z from 'zod';
+	import { Save } from 'lucide-svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
-  const simboloId = $page.params.simboloId as Id<"simbolos">;
+	const client = useConvexClient();
+	const simboloId = $page.params.simboloId as Id<'simbolos'>;
 
-  const simboloQuery = useQuery(api.simbolos.getById, { id: simboloId });
+	const simboloQuery = useQuery(api.simbolos.getById, { id: simboloId });
 
-  let tipo = $state<SimboloTipo>("cargo_comissionado");
-  let isFormInitialized = $state(false);
+	let tipo = $state<SimboloTipo>('cargo_comissionado');
+	let isFormInitialized = $state(false);
 
-  const schema = z.object({
-    nome: z.string().min(1),
-    refValor: z.string().optional(),
-    vencValor: z.string().optional(),
-    descricao: z.string().min(1),
-    tipo: z.enum(["cargo_comissionado", "funcao_gratificada"]),
-    valor: z.string().optional(),
-  });
+	const schema = z.object({
+		nome: z.string().min(1),
+		refValor: z.string().optional(),
+		vencValor: z.string().optional(),
+		descricao: z.string().min(1),
+		tipo: z.enum(['cargo_comissionado', 'funcao_gratificada']),
+		valor: z.string().optional()
+	});
 
-  function formatCurrencyBR(raw: string): string {
-    const digits = (raw || "").replace(/\D/g, "");
-    if (!digits) return "";
-    const number = parseInt(digits, 10);
-    const cents = (number / 100).toFixed(2);
-    const [intPart, decPart] = cents.split(".");
-    const intWithThousands = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    return `${intWithThousands},${decPart}`;
-  }
+	function formatCurrencyBR(raw: string): string {
+		const digits = (raw || '').replace(/\D/g, '');
+		if (!digits) return '';
+		const number = parseInt(digits, 10);
+		const cents = (number / 100).toFixed(2);
+		const [intPart, decPart] = cents.split('.');
+		const intWithThousands = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		return `${intWithThousands},${decPart}`;
+	}
 
-  function unmaskCurrencyToDotDecimal(masked: string): string {
-    if (!masked) return "";
-    const digits = masked.replace(/\D/g, "");
-    if (!digits) return "";
-    const value = (parseInt(digits, 10) / 100).toFixed(2);
-    return value;
-  }
+	function unmaskCurrencyToDotDecimal(masked: string): string {
+		if (!masked) return '';
+		const digits = masked.replace(/\D/g, '');
+		if (!digits) return '';
+		const value = (parseInt(digits, 10) / 100).toFixed(2);
+		return value;
+	}
 
-  function formatDotDecimalToBR(value: string): string {
-    if (!value) return "";
-    const [intPart, decRaw] = value.split(".");
-    const intDigits = (intPart || "0").replace(/\D/g, "");
-    const intWithThousands = intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    const decPart = (decRaw ?? "00").padEnd(2, "0").slice(0, 2);
-    return `${intWithThousands},${decPart}`;
-  }
+	function formatDotDecimalToBR(value: string): string {
+		if (!value) return '';
+		const [intPart, decRaw] = value.split('.');
+		const intDigits = (intPart || '0').replace(/\D/g, '');
+		const intWithThousands = intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		const decPart = (decRaw ?? '00').padEnd(2, '0').slice(0, 2);
+		return `${intWithThousands},${decPart}`;
+	}
 
-  let notice = $state<{ kind: "success" | "error"; text: string } | null>(null);
-  
-  function getTotalPreview(): string {
-    if (tipo !== "cargo_comissionado") return "";
-    const r = unmaskCurrencyToDotDecimal(form.getFieldValue("refValor"));
-    const v = unmaskCurrencyToDotDecimal(form.getFieldValue("vencValor"));
-    if (!r || !v) return "";
-    const sum = (Number(r) + Number(v)).toFixed(2);
-    return formatDotDecimalToBR(sum);
-  }
+	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
 
-  const form = createForm(() => ({
-    onSubmit: async ({ value }) => {
-      const isCargo = value.tipo === "cargo_comissionado";
-      const payload = {
-        id: simboloId,
-        nome: value.nome,
-        refValor: isCargo ? unmaskCurrencyToDotDecimal(value.refValor) : "",
-        vencValor: isCargo ? unmaskCurrencyToDotDecimal(value.vencValor) : "",
-        descricao: value.descricao,
-        tipo: value.tipo as SimboloTipo,
-        valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined,
-      };
+	function getTotalPreview(): string {
+		if (tipo !== 'cargo_comissionado') return '';
+		const r = unmaskCurrencyToDotDecimal(form.getFieldValue('refValor'));
+		const v = unmaskCurrencyToDotDecimal(form.getFieldValue('vencValor'));
+		if (!r || !v) return '';
+		const sum = (Number(r) + Number(v)).toFixed(2);
+		return formatDotDecimalToBR(sum);
+	}
 
-      try {
-        await client.mutation(api.simbolos.update, payload);
-        notice = { kind: "success", text: "Símbolo atualizado com sucesso." };
-        setTimeout(() => goto("/recursos-humanos/simbolos"), 600);
-      } catch (error) {
-        console.error("erro ao atualizar símbolo", error);
-        notice = { kind: "error", text: "Erro ao atualizar símbolo." };
-      }
-    },
-    defaultValues: {
-      nome: "",
-      refValor: "",
-      vencValor: "",
-      descricao: "",
-      tipo: "cargo_comissionado",
-      valor: "",
-    },
-  }));
+	const form = createForm(() => ({
+		onSubmit: async ({ value }) => {
+			const isCargo = value.tipo === 'cargo_comissionado';
+			const payload = {
+				id: simboloId,
+				nome: value.nome,
+				refValor: isCargo ? unmaskCurrencyToDotDecimal(value.refValor) : '',
+				vencValor: isCargo ? unmaskCurrencyToDotDecimal(value.vencValor) : '',
+				descricao: value.descricao,
+				tipo: value.tipo as SimboloTipo,
+				valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined
+			};
 
-  // Inicializar o formulário quando os dados estiverem disponíveis
-  $effect(() => {
-    if (simboloQuery.data && !isFormInitialized) {
-      const simbolo = simboloQuery.data;
-      
-      tipo = simbolo.tipo;
-      
-      form.setFieldValue("nome", simbolo.nome);
-      form.setFieldValue("descricao", simbolo.descricao);
-      form.setFieldValue("tipo", simbolo.tipo);
-      
-      if (simbolo.tipo === "cargo_comissionado") {
-        form.setFieldValue("refValor", formatDotDecimalToBR(simbolo.repValor));
-        form.setFieldValue("vencValor", formatDotDecimalToBR(simbolo.vencValor));
-      } else {
-        form.setFieldValue("valor", formatDotDecimalToBR(simbolo.valor));
-      }
-      
-      isFormInitialized = true;
-    }
-  });
+			try {
+				await client.mutation(api.simbolos.update, payload);
+				notice = { kind: 'success', text: 'Símbolo atualizado com sucesso.' };
+				setTimeout(() => goto('/recursos-humanos/simbolos'), 600);
+			} catch (error) {
+				console.error('erro ao atualizar símbolo', error);
+				notice = { kind: 'error', text: 'Erro ao atualizar símbolo.' };
+			}
+		},
+		defaultValues: {
+			nome: '',
+			refValor: '',
+			vencValor: '',
+			descricao: '',
+			tipo: 'cargo_comissionado',
+			valor: ''
+		}
+	}));
+
+	// Inicializar o formulário quando os dados estiverem disponíveis
+	$effect(() => {
+		if (simboloQuery.data && !isFormInitialized) {
+			const simbolo = simboloQuery.data;
+
+			tipo = simbolo.tipo;
+
+			form.setFieldValue('nome', simbolo.nome);
+			form.setFieldValue('descricao', simbolo.descricao);
+			form.setFieldValue('tipo', simbolo.tipo);
+
+			if (simbolo.tipo === 'cargo_comissionado') {
+				form.setFieldValue('refValor', formatDotDecimalToBR(simbolo.repValor));
+				form.setFieldValue('vencValor', formatDotDecimalToBR(simbolo.vencValor));
+			} else {
+				form.setFieldValue('valor', formatDotDecimalToBR(simbolo.valor));
+			}
+
+			isFormInitialized = true;
+		}
+	});
 </script>
 
 {#if simboloQuery.isLoading}
-  <div class="flex justify-center items-center py-12">
-    <span class="loading loading-spinner loading-lg"></span>
-  </div>
+	<div class="flex items-center justify-center py-12">
+		<span class="loading loading-spinner loading-lg"></span>
+	</div>
 {:else if !simboloQuery.data}
-  <div class="alert alert-error max-w-3xl mx-auto m-4">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="stroke-current shrink-0 h-6 w-6"
-      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>Símbolo não encontrado.</span>
-  </div>
+	<div class="alert alert-error m-4 mx-auto max-w-3xl">
+		<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>Símbolo não encontrado.</span>
+	</div>
 {:else}
-  <form
-    class="max-w-3xl mx-auto p-4"
-    onsubmit={(e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      form.handleSubmit();
-    }}
-  >
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-6">
-        {#if notice}
-          <div
-            class="alert"
-            class:alert-success={notice.kind === "success"}
-            class:alert-error={notice.kind === "error"}
-          >
-            <span>{notice.text}</span>
-          </div>
-        {/if}
-        <div>
-          <h2 class="card-title text-3xl">Editar Símbolo</h2>
-          <p class="opacity-70">
-            Atualize os campos abaixo para editar o símbolo.
-          </p>
-        </div>
+	<form
+		class="mx-auto max-w-3xl p-4"
+		onsubmit={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		}}
+	>
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-6">
+				{#if notice}
+					<div
+						class="alert"
+						class:alert-success={notice.kind === 'success'}
+						class:alert-error={notice.kind === 'error'}
+					>
+						<span>{notice.text}</span>
+					</div>
+				{/if}
+				<div>
+					<h2 class="card-title text-3xl">Editar Símbolo</h2>
+					<p class="opacity-70">Atualize os campos abaixo para editar o símbolo.</p>
+				</div>
 
-        <form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="nome">
-                <span class="label-text font-medium"
-                  >Símbolo <span class="text-error">*</span></span
-                >
-              </label>
-              <input
-                {name}
-                value={state.value}
-                placeholder="Ex.: DAS-1"
-                class="input input-bordered w-full"
-                autocomplete="off"
-                oninput={(e) => {
-                  const target = e.target as HTMLInputElement;
-                  const value = target.value;
-                  handleChange(value);
-                }}
-                required
-                aria-required="true"
-              />
-              <div class="label">
-                <span class="label-text-alt opacity-60"
-                  >Informe o nome identificador do símbolo.</span
-                >
-              </div>
-            </div>
-          {/snippet}
-        </form.Field>
+				<form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="nome">
+								<span class="label-text font-medium">Símbolo <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								{name}
+								value={state.value}
+								placeholder="Ex.: DAS-1"
+								class="input input-bordered w-full"
+								autocomplete="off"
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									const value = target.value;
+									handleChange(value);
+								}}
+								required
+								aria-required="true"
+							/>
+							<div class="label">
+								<span class="label-text-alt opacity-60"
+									>Informe o nome identificador do símbolo.</span
+								>
+							</div>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        <form.Field
-          name="descricao"
-          validators={{ onChange: schema.shape.descricao }}
-        >
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="descricao">
-                <span class="label-text font-medium"
-                  >Descrição <span class="text-error">*</span></span
-                >
-              </label>
-              <input
-                {name}
-                value={state.value}
-                placeholder="Ex.: Cargo de Apoio 1"
-                class="input input-bordered w-full"
-                autocomplete="off"
-                oninput={(e) => {
-                  const target = e.target as HTMLInputElement;
-                  const value = target.value;
-                  handleChange(value);
-                }}
-                required
-                aria-required="true"
-              />
-              <div class="label">
-                <span class="label-text-alt opacity-60"
-                  >Descreva brevemente o símbolo.</span
-                >
-              </div>
-            </div>
-          {/snippet}
-        </form.Field>
+				<form.Field name="descricao" validators={{ onChange: schema.shape.descricao }}>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="descricao">
+								<span class="label-text font-medium"
+									>Descrição <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								{name}
+								value={state.value}
+								placeholder="Ex.: Cargo de Apoio 1"
+								class="input input-bordered w-full"
+								autocomplete="off"
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									const value = target.value;
+									handleChange(value);
+								}}
+								required
+								aria-required="true"
+							/>
+							<div class="label">
+								<span class="label-text-alt opacity-60">Descreva brevemente o símbolo.</span>
+							</div>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        <form.Field
-          name="tipo"
-          validators={{
-            onChange: ({ value }) => (value ? undefined : "Obrigatório"),
-          }}
-        >
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="tipo">
-                <span class="label-text font-medium"
-                  >Tipo <span class="text-error">*</span></span
-                >
-              </label>
-              <select
-                {name}
-                class="select select-bordered w-full"
-                bind:value={tipo}
-                oninput={(e) => {
-                  const target = e.target as HTMLSelectElement;
-                  const value = target.value;
-                  handleChange(value);
-                }}
-                required
-                aria-required="true"
-              >
-                <option value="cargo_comissionado">Cargo comissionado</option>
-                <option value="funcao_gratificada">Função gratificada</option>
-              </select>
-            </div>
-          {/snippet}
-        </form.Field>
+				<form.Field
+					name="tipo"
+					validators={{
+						onChange: ({ value }) => (value ? undefined : 'Obrigatório')
+					}}
+				>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="tipo">
+								<span class="label-text font-medium">Tipo <span class="text-error">*</span></span>
+							</label>
+							<select
+								{name}
+								class="select select-bordered w-full"
+								bind:value={tipo}
+								oninput={(e) => {
+									const target = e.target as HTMLSelectElement;
+									const value = target.value;
+									handleChange(value);
+								}}
+								required
+								aria-required="true"
+							>
+								<option value="cargo_comissionado">Cargo comissionado</option>
+								<option value="funcao_gratificada">Função gratificada</option>
+							</select>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        {#if tipo === "cargo_comissionado"}
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <form.Field
-              name="vencValor"
-              validators={{
-                onChange: ({ value }) =>
-                  form.getFieldValue("tipo") === "cargo_comissionado" && !value
-                    ? "Obrigatório"
-                    : undefined,
-              }}
-            >
-              {#snippet children({ name, state, handleChange })}
-                <div class="form-control">
-                  <label class="label" for="vencValor">
-                    <span class="label-text font-medium"
-                      >Valor de Vencimento <span class="text-error">*</span></span
-                    >
-                  </label>
-                  <input
-                    {name}
-                    value={state.value}
-                    placeholder="Ex.: 1200,00"
-                    class="input input-bordered w-full"
-                    inputmode="decimal"
-                    autocomplete="off"
-                    oninput={(e) => {
-                      const target = e.target as HTMLInputElement;
-                      const formatted = formatCurrencyBR(target.value);
-                      target.value = formatted;
-                      handleChange(formatted);
-                    }}
-                    required
-                    aria-required="true"
-                  />
-                  <div class="label">
-                    <span class="label-text-alt opacity-60"
-                      >Valor efetivo de vencimento.</span
-                    >
-                  </div>
-                </div>
-              {/snippet}
-            </form.Field>
+				{#if tipo === 'cargo_comissionado'}
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<form.Field
+							name="vencValor"
+							validators={{
+								onChange: ({ value }) =>
+									form.getFieldValue('tipo') === 'cargo_comissionado' && !value
+										? 'Obrigatório'
+										: undefined
+							}}
+						>
+							{#snippet children({ name, state, handleChange })}
+								<div class="form-control">
+									<label class="label" for="vencValor">
+										<span class="label-text font-medium"
+											>Valor de Vencimento <span class="text-error">*</span></span
+										>
+									</label>
+									<input
+										{name}
+										value={state.value}
+										placeholder="Ex.: 1200,00"
+										class="input input-bordered w-full"
+										inputmode="decimal"
+										autocomplete="off"
+										oninput={(e) => {
+											const target = e.target as HTMLInputElement;
+											const formatted = formatCurrencyBR(target.value);
+											target.value = formatted;
+											handleChange(formatted);
+										}}
+										required
+										aria-required="true"
+									/>
+									<div class="label">
+										<span class="label-text-alt opacity-60">Valor efetivo de vencimento.</span>
+									</div>
+								</div>
+							{/snippet}
+						</form.Field>
 
-            <form.Field
-              name="refValor"
-              validators={{
-                onChange: ({ value }) =>
-                  form.getFieldValue("tipo") === "cargo_comissionado" && !value
-                    ? "Obrigatório"
-                    : undefined,
-              }}
-            >
-              {#snippet children({ name, state, handleChange })}
-                <div class="form-control">
-                  <label class="label" for="refValor">
-                    <span class="label-text font-medium"
-                      >Valor de Referência <span class="text-error">*</span></span
-                    >
-                  </label>
-                  <input
-                    {name}
-                    value={state.value}
-                    placeholder="Ex.: 1000,00"
-                    class="input input-bordered w-full"
-                    inputmode="decimal"
-                    autocomplete="off"
-                    oninput={(e) => {
-                      const target = e.target as HTMLInputElement;
-                      const formatted = formatCurrencyBR(target.value);
-                      target.value = formatted;
-                      handleChange(formatted);
-                    }}
-                    required
-                    aria-required="true"
-                  />
-                  <div class="label">
-                    <span class="label-text-alt opacity-60"
-                      >Valor base de referência.</span
-                    >
-                  </div>
-                </div>
-              {/snippet}
-            </form.Field>
-          </div>
-          {#if getTotalPreview()}
-            <div class="alert bg-base-200">
-              <span>Total previsto: R$ {getTotalPreview()}</span>
-            </div>
-          {/if}
-        {:else}
-          <form.Field
-            name="valor"
-            validators={{
-              onChange: ({ value }) =>
-                form.getFieldValue("tipo") === "funcao_gratificada" && !value
-                  ? "Obrigatório"
-                  : undefined,
-            }}
-          >
-            {#snippet children({ name, state, handleChange })}
-              <div class="form-control">
-                <label class="label" for="valor">
-                  <span class="label-text font-medium"
-                    >Valor <span class="text-error">*</span></span
-                  >
-                </label>
-                <input
-                  {name}
-                  value={state.value}
-                  placeholder="Ex.: 1.500,00"
-                  class="input input-bordered w-full"
-                  inputmode="decimal"
-                  autocomplete="off"
-                  oninput={(e) => {
-                    const target = e.target as HTMLInputElement;
-                    const formatted = formatCurrencyBR(target.value);
-                    target.value = formatted;
-                    handleChange(formatted);
-                  }}
-                  required
-                  aria-required="true"
-                />
-                <div class="label">
-                  <span class="label-text-alt opacity-60"
-                    >Informe o valor da função gratificada.</span
-                  >
-                </div>
-              </div>
-            {/snippet}
-          </form.Field>
-        {/if}
+						<form.Field
+							name="refValor"
+							validators={{
+								onChange: ({ value }) =>
+									form.getFieldValue('tipo') === 'cargo_comissionado' && !value
+										? 'Obrigatório'
+										: undefined
+							}}
+						>
+							{#snippet children({ name, state, handleChange })}
+								<div class="form-control">
+									<label class="label" for="refValor">
+										<span class="label-text font-medium"
+											>Valor de Referência <span class="text-error">*</span></span
+										>
+									</label>
+									<input
+										{name}
+										value={state.value}
+										placeholder="Ex.: 1000,00"
+										class="input input-bordered w-full"
+										inputmode="decimal"
+										autocomplete="off"
+										oninput={(e) => {
+											const target = e.target as HTMLInputElement;
+											const formatted = formatCurrencyBR(target.value);
+											target.value = formatted;
+											handleChange(formatted);
+										}}
+										required
+										aria-required="true"
+									/>
+									<div class="label">
+										<span class="label-text-alt opacity-60">Valor base de referência.</span>
+									</div>
+								</div>
+							{/snippet}
+						</form.Field>
+					</div>
+					{#if getTotalPreview()}
+						<div class="alert bg-base-200">
+							<span>Total previsto: R$ {getTotalPreview()}</span>
+						</div>
+					{/if}
+				{:else}
+					<form.Field
+						name="valor"
+						validators={{
+							onChange: ({ value }) =>
+								form.getFieldValue('tipo') === 'funcao_gratificada' && !value
+									? 'Obrigatório'
+									: undefined
+						}}
+					>
+						{#snippet children({ name, state, handleChange })}
+							<div class="form-control">
+								<label class="label" for="valor">
+									<span class="label-text font-medium">Valor <span class="text-error">*</span></span
+									>
+								</label>
+								<input
+									{name}
+									value={state.value}
+									placeholder="Ex.: 1.500,00"
+									class="input input-bordered w-full"
+									inputmode="decimal"
+									autocomplete="off"
+									oninput={(e) => {
+										const target = e.target as HTMLInputElement;
+										const formatted = formatCurrencyBR(target.value);
+										target.value = formatted;
+										handleChange(formatted);
+									}}
+									required
+									aria-required="true"
+								/>
+								<div class="label">
+									<span class="label-text-alt opacity-60"
+										>Informe o valor da função gratificada.</span
+									>
+								</div>
+							</div>
+						{/snippet}
+					</form.Field>
+				{/if}
 
-        <form.Subscribe
-          selector={(state) => ({
-            canSubmit: state.canSubmit,
-            isSubmitting: state.isSubmitting,
-          })}
-        >
-          {#snippet children({ canSubmit, isSubmitting })}
-            <div class="card-actions justify-end pt-2">
-              <button
-                type="button"
-                class="btn btn-ghost"
-                disabled={isSubmitting}
-                onclick={() => goto("/recursos-humanos/simbolos")}
-              >
-                Cancelar
-              </button>
-              <button
-                type="submit"
-                class="btn btn-primary"
-                class:loading={isSubmitting}
-                disabled={isSubmitting || !canSubmit}
-              >
-                <Save class="h-5 w-5" />
-                <span>Salvar Alterações</span>
-              </button>
-            </div>
-          {/snippet}
-        </form.Subscribe>
-      </div>
-    </div>
-  </form>
+				<form.Subscribe
+					selector={(state) => ({
+						canSubmit: state.canSubmit,
+						isSubmitting: state.isSubmitting
+					})}
+				>
+					{#snippet children({ canSubmit, isSubmitting })}
+						<div class="card-actions justify-end pt-2">
+							<button
+								type="button"
+								class="btn"
+								disabled={isSubmitting}
+								onclick={() => goto('/recursos-humanos/simbolos')}
+							>
+								Cancelar
+							</button>
+							<button
+								type="submit"
+								class="btn btn-primary"
+								class:loading={isSubmitting}
+								disabled={isSubmitting || !canSubmit}
+							>
+								<Save class="h-5 w-5" />
+								<span>Salvar Alterações</span>
+							</button>
+						</div>
+					{/snippet}
+				</form.Subscribe>
+			</div>
+		</div>
+	</form>
 {/if}
-
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/cadastro/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/cadastro/+page.svelte
index 1396d45..d75fa52 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/cadastro/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/cadastro/+page.svelte
@@ -1,477 +1,539 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { createForm } from "@tanstack/svelte-form";
-  import z from "zod";
-  import { goto } from "$app/navigation";
-  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { createForm } from '@tanstack/svelte-form';
+	import z from 'zod';
+	import { goto } from '$app/navigation';
+	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let tipo = $state<SimboloTipo>("cargo_comissionado");
+	let tipo = $state<SimboloTipo>('cargo_comissionado');
 
-  const defaultValues = {
-    nome: "",
-    refValor: "",
-    vencValor: "",
-    descricao: "",
-    tipo: "cargo_comissionado",
-    valor: "",
-  };
+	const defaultValues = {
+		nome: '',
+		refValor: '',
+		vencValor: '',
+		descricao: '',
+		tipo: 'cargo_comissionado',
+		valor: ''
+	};
 
-  const schema = z.object({
-    nome: z.string().min(1),
-    refValor: z.string().optional(),
-    vencValor: z.string().optional(),
-    descricao: z.string().min(1),
-    tipo: z.enum(["cargo_comissionado", "funcao_gratificada"]),
-    valor: z.string().optional(),
-  });
+	const schema = z.object({
+		nome: z.string().min(1),
+		refValor: z.string().optional(),
+		vencValor: z.string().optional(),
+		descricao: z.string().min(1),
+		tipo: z.enum(['cargo_comissionado', 'funcao_gratificada']),
+		valor: z.string().optional()
+	});
 
-  function formatCurrencyBR(raw: string): string {
-    const digits = (raw || "").replace(/\D/g, "");
-    if (!digits) return "";
-    const number = parseInt(digits, 10);
-    const cents = (number / 100).toFixed(2);
-    const [intPart, decPart] = cents.split(".");
-    const intWithThousands = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    return `${intWithThousands},${decPart}`;
-  }
+	function formatCurrencyBR(raw: string): string {
+		const digits = (raw || '').replace(/\D/g, '');
+		if (!digits) return '';
+		const number = parseInt(digits, 10);
+		const cents = (number / 100).toFixed(2);
+		const [intPart, decPart] = cents.split('.');
+		const intWithThousands = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		return `${intWithThousands},${decPart}`;
+	}
 
-  function unmaskCurrencyToDotDecimal(masked: string): string {
-    if (!masked) return "";
-    const digits = masked.replace(/\D/g, "");
-    if (!digits) return "";
-    const value = (parseInt(digits, 10) / 100).toFixed(2);
-    return value;
-  }
+	function unmaskCurrencyToDotDecimal(masked: string): string {
+		if (!masked) return '';
+		const digits = masked.replace(/\D/g, '');
+		if (!digits) return '';
+		const value = (parseInt(digits, 10) / 100).toFixed(2);
+		return value;
+	}
 
-  function formatDotDecimalToBR(value: string): string {
-    if (!value) return "";
-    const [intPart, decRaw] = value.split(".");
-    const intDigits = (intPart || "0").replace(/\D/g, "");
-    const intWithThousands = intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    const decPart = (decRaw ?? "00").padEnd(2, "0").slice(0, 2);
-    return `${intWithThousands},${decPart}`;
-  }
+	function formatDotDecimalToBR(value: string): string {
+		if (!value) return '';
+		const [intPart, decRaw] = value.split('.');
+		const intDigits = (intPart || '0').replace(/\D/g, '');
+		const intWithThousands = intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		const decPart = (decRaw ?? '00').padEnd(2, '0').slice(0, 2);
+		return `${intWithThousands},${decPart}`;
+	}
 
-  let notice = $state<{ kind: "success" | "error"; text: string } | null>(null);
-  
-  function getTotalPreview(): string {
-    if (tipo !== "cargo_comissionado") return "";
-    const r = unmaskCurrencyToDotDecimal(form.getFieldValue("refValor"));
-    const v = unmaskCurrencyToDotDecimal(form.getFieldValue("vencValor"));
-    if (!r || !v) return "";
-    const sum = (Number(r) + Number(v)).toFixed(2);
-    return formatDotDecimalToBR(sum);
-  }
+	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
 
-  const form = createForm(() => ({
-    onSubmit: async ({ value, formApi }) => {
-      const isCargo = value.tipo === "cargo_comissionado";
-      const payload = {
-        nome: value.nome,
-        refValor: isCargo ? unmaskCurrencyToDotDecimal(value.refValor) : "",
-        vencValor: isCargo ? unmaskCurrencyToDotDecimal(value.vencValor) : "",
-        descricao: value.descricao,
-        tipo: value.tipo as SimboloTipo,
-        valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined,
-      };
+	function getTotalPreview(): string {
+		if (tipo !== 'cargo_comissionado') return '';
+		const r = unmaskCurrencyToDotDecimal(form.getFieldValue('refValor'));
+		const v = unmaskCurrencyToDotDecimal(form.getFieldValue('vencValor'));
+		if (!r || !v) return '';
+		const sum = (Number(r) + Number(v)).toFixed(2);
+		return formatDotDecimalToBR(sum);
+	}
 
-      try {
-        const res = await client.mutation(api.simbolos.create, payload);
-        if (res) {
-          formApi.reset();
-          notice = { kind: "success", text: "Símbolo cadastrado com sucesso!" };
-          setTimeout(() => goto("/recursos-humanos/simbolos"), 1500);
-        }
-      } catch (error: any) {
-        notice = { kind: "error", text: error.message || "Erro ao cadastrar símbolo." };
-      }
-    },
-    defaultValues,
-  }));
+	const form = createForm(() => ({
+		onSubmit: async ({ value, formApi }) => {
+			const isCargo = value.tipo === 'cargo_comissionado';
+			const payload = {
+				nome: value.nome,
+				refValor: isCargo ? unmaskCurrencyToDotDecimal(value.refValor) : '',
+				vencValor: isCargo ? unmaskCurrencyToDotDecimal(value.vencValor) : '',
+				descricao: value.descricao,
+				tipo: value.tipo as SimboloTipo,
+				valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined
+			};
+
+			try {
+				const res = await client.mutation(api.simbolos.create, payload);
+				if (res) {
+					formApi.reset();
+					notice = { kind: 'success', text: 'Símbolo cadastrado com sucesso!' };
+					setTimeout(() => goto('/recursos-humanos/simbolos'), 1500);
+				}
+			} catch (error: any) {
+				notice = { kind: 'error', text: error.message || 'Erro ao cadastrar símbolo.' };
+			}
+		},
+		defaultValues
+	}));
 </script>
 
-<main class="container mx-auto px-4 py-4 max-w-4xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li><a href="/recursos-humanos/simbolos" class="text-primary hover:underline">Símbolos</a></li>
-      <li>Cadastrar</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-4xl px-4 py-4">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
+			<li>
+				<a href="/recursos-humanos/simbolos" class="text-primary hover:underline">Símbolos</a>
+			</li>
+			<li>Cadastrar</li>
+		</ul>
+	</div>
 
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-green-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Cadastro de Símbolo</h1>
-        <p class="text-base-content/70">Preencha os campos abaixo para cadastrar um novo cargo ou função</p>
-      </div>
-    </div>
-  </div>
+	<!-- Cabeçalho -->
+	<div class="mb-6">
+		<div class="mb-2 flex items-center gap-4">
+			<div class="rounded-xl bg-green-500/20 p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8 text-green-600"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+					/>
+				</svg>
+			</div>
+			<div>
+				<h1 class="text-primary text-3xl font-bold">Cadastro de Símbolo</h1>
+				<p class="text-base-content/70">
+					Preencha os campos abaixo para cadastrar um novo cargo ou função
+				</p>
+			</div>
+		</div>
+	</div>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div
-      class="alert mb-6 shadow-lg"
-      class:alert-success={notice.kind === "success"}
-      class:alert-error={notice.kind === "error"}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        {#if notice.kind === "success"}
-          <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" />
-        {:else}
-          <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" />
-        {/if}
-      </svg>
-      <span>{notice.text}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={notice.kind === 'success'}
+			class:alert-error={notice.kind === 'error'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.kind === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.text}</span>
+		</div>
+	{/if}
 
-  <!-- Formulário -->
-  <form
-    class="space-y-6"
-    onsubmit={(e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      form.handleSubmit();
-    }}
-  >
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-6">
-        <h2 class="card-title text-xl border-b pb-3">Informações Básicas</h2>
+	<!-- Formulário -->
+	<form
+		class="space-y-6"
+		onsubmit={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		}}
+	>
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-6">
+				<h2 class="card-title border-b pb-3 text-xl">Informações Básicas</h2>
 
-        <!-- Nome do Símbolo -->
-        <form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="nome">
-                <span class="label-text font-semibold">
-                  Nome do Símbolo <span class="text-error">*</span>
-                </span>
-              </label>
-              <input
-                {name}
-                id="nome"
-                value={state.value}
-                placeholder="Ex.: DAS-1, CAA-2, FDA-3"
-                class="input input-bordered w-full focus:input-primary"
-                autocomplete="off"
-                oninput={(e) => {
-                  const target = e.target as HTMLInputElement;
-                  handleChange(target.value);
-                }}
-                required
-              />
-              <label class="label">
-                <span class="label-text-alt text-base-content/60">
-                  Informe o código identificador do símbolo
-                </span>
-              </label>
-            </div>
-          {/snippet}
-        </form.Field>
+				<!-- Nome do Símbolo -->
+				<form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="nome">
+								<span class="label-text font-semibold">
+									Nome do Símbolo <span class="text-error">*</span>
+								</span>
+							</label>
+							<input
+								{name}
+								id="nome"
+								value={state.value}
+								placeholder="Ex.: DAS-1, CAA-2, FDA-3"
+								class="input input-bordered focus:input-primary w-full"
+								autocomplete="off"
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									handleChange(target.value);
+								}}
+								required
+							/>
+							<label class="label">
+								<span class="label-text-alt text-base-content/60">
+									Informe o código identificador do símbolo
+								</span>
+							</label>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        <!-- Descrição -->
-        <form.Field name="descricao" validators={{ onChange: schema.shape.descricao }}>
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="descricao">
-                <span class="label-text font-semibold">
-                  Descrição <span class="text-error">*</span>
-                </span>
-              </label>
-              <textarea
-                {name}
-                id="descricao"
-                value={state.value}
-                placeholder="Ex.: Cargo de Direção e Assessoramento Superior - Nível 1"
-                class="textarea textarea-bordered w-full h-24 focus:textarea-primary"
-                autocomplete="off"
-                oninput={(e) => {
-                  const target = e.target as HTMLTextAreaElement;
-                  handleChange(target.value);
-                }}
-                required
-              ></textarea>
-              <label class="label">
-                <span class="label-text-alt text-base-content/60">
-                  Descreva detalhadamente o símbolo
-                </span>
-              </label>
-            </div>
-          {/snippet}
-        </form.Field>
+				<!-- Descrição -->
+				<form.Field name="descricao" validators={{ onChange: schema.shape.descricao }}>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="descricao">
+								<span class="label-text font-semibold">
+									Descrição <span class="text-error">*</span>
+								</span>
+							</label>
+							<textarea
+								{name}
+								id="descricao"
+								value={state.value}
+								placeholder="Ex.: Cargo de Direção e Assessoramento Superior - Nível 1"
+								class="textarea textarea-bordered focus:textarea-primary h-24 w-full"
+								autocomplete="off"
+								oninput={(e) => {
+									const target = e.target as HTMLTextAreaElement;
+									handleChange(target.value);
+								}}
+								required
+							></textarea>
+							<label class="label">
+								<span class="label-text-alt text-base-content/60">
+									Descreva detalhadamente o símbolo
+								</span>
+							</label>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        <!-- Tipo -->
-        <form.Field
-          name="tipo"
-          validators={{
-            onChange: ({ value }) => (value ? undefined : "Obrigatório"),
-          }}
-        >
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="tipo">
-                <span class="label-text font-semibold">
-                  Tipo <span class="text-error">*</span>
-                </span>
-              </label>
-              <select
-                {name}
-                id="tipo"
-                class="select select-bordered w-full focus:select-primary"
-                bind:value={tipo}
-                oninput={(e) => {
-                  const target = e.target as HTMLSelectElement;
-                  handleChange(target.value);
-                }}
-                required
-              >
-                <option value="cargo_comissionado">Cargo Comissionado (CC)</option>
-                <option value="funcao_gratificada">Função Gratificada (FG)</option>
-              </select>
-              <label class="label">
-                <span class="label-text-alt text-base-content/60">
-                  Selecione se é um cargo comissionado ou função gratificada
-                </span>
-              </label>
-            </div>
-          {/snippet}
-        </form.Field>
-      </div>
-    </div>
+				<!-- Tipo -->
+				<form.Field
+					name="tipo"
+					validators={{
+						onChange: ({ value }) => (value ? undefined : 'Obrigatório')
+					}}
+				>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="tipo">
+								<span class="label-text font-semibold">
+									Tipo <span class="text-error">*</span>
+								</span>
+							</label>
+							<select
+								{name}
+								id="tipo"
+								class="select select-bordered focus:select-primary w-full"
+								bind:value={tipo}
+								oninput={(e) => {
+									const target = e.target as HTMLSelectElement;
+									handleChange(target.value);
+								}}
+								required
+							>
+								<option value="cargo_comissionado">Cargo Comissionado (CC)</option>
+								<option value="funcao_gratificada">Função Gratificada (FG)</option>
+							</select>
+							<label class="label">
+								<span class="label-text-alt text-base-content/60">
+									Selecione se é um cargo comissionado ou função gratificada
+								</span>
+							</label>
+						</div>
+					{/snippet}
+				</form.Field>
+			</div>
+		</div>
 
-    <!-- Card de Valores -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-6">
-        <h2 class="card-title text-xl border-b pb-3">
-          Valores Financeiros
-          <span class="badge badge-primary badge-lg ml-2">
-            {tipo === "cargo_comissionado" ? "Cargo Comissionado" : "Função Gratificada"}
-          </span>
-        </h2>
+		<!-- Card de Valores -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-6">
+				<h2 class="card-title border-b pb-3 text-xl">
+					Valores Financeiros
+					<span class="badge badge-primary badge-lg ml-2">
+						{tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'}
+					</span>
+				</h2>
 
-        {#if tipo === "cargo_comissionado"}
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Valor de Vencimento -->
-            <form.Field
-              name="vencValor"
-              validators={{
-                onChange: ({ value }) =>
-                  form.getFieldValue("tipo") === "cargo_comissionado" && !value
-                    ? "Obrigatório"
-                    : undefined,
-              }}
-            >
-              {#snippet children({ name, state, handleChange })}
-                <div class="form-control">
-                  <label class="label" for="vencValor">
-                    <span class="label-text font-semibold">
-                      Valor de Vencimento <span class="text-error">*</span>
-                    </span>
-                  </label>
-                  <label class="input-group">
-                    <span>R$</span>
-                    <input
-                      {name}
-                      id="vencValor"
-                      value={state.value}
-                      placeholder="0,00"
-                      class="input input-bordered w-full focus:input-primary"
-                      inputmode="decimal"
-                      autocomplete="off"
-                      oninput={(e) => {
-                        const target = e.target as HTMLInputElement;
-                        const formatted = formatCurrencyBR(target.value);
-                        target.value = formatted;
-                        handleChange(formatted);
-                      }}
-                      required
-                    />
-                  </label>
-                  <label class="label">
-                    <span class="label-text-alt text-base-content/60">
-                      Valor base de vencimento
-                    </span>
-                  </label>
-                </div>
-              {/snippet}
-            </form.Field>
+				{#if tipo === 'cargo_comissionado'}
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+						<!-- Valor de Vencimento -->
+						<form.Field
+							name="vencValor"
+							validators={{
+								onChange: ({ value }) =>
+									form.getFieldValue('tipo') === 'cargo_comissionado' && !value
+										? 'Obrigatório'
+										: undefined
+							}}
+						>
+							{#snippet children({ name, state, handleChange })}
+								<div class="form-control">
+									<label class="label" for="vencValor">
+										<span class="label-text font-semibold">
+											Valor de Vencimento <span class="text-error">*</span>
+										</span>
+									</label>
+									<label class="input-group">
+										<span>R$</span>
+										<input
+											{name}
+											id="vencValor"
+											value={state.value}
+											placeholder="0,00"
+											class="input input-bordered focus:input-primary w-full"
+											inputmode="decimal"
+											autocomplete="off"
+											oninput={(e) => {
+												const target = e.target as HTMLInputElement;
+												const formatted = formatCurrencyBR(target.value);
+												target.value = formatted;
+												handleChange(formatted);
+											}}
+											required
+										/>
+									</label>
+									<label class="label">
+										<span class="label-text-alt text-base-content/60">
+											Valor base de vencimento
+										</span>
+									</label>
+								</div>
+							{/snippet}
+						</form.Field>
 
-            <!-- Valor de Referência -->
-            <form.Field
-              name="refValor"
-              validators={{
-                onChange: ({ value }) =>
-                  form.getFieldValue("tipo") === "cargo_comissionado" && !value
-                    ? "Obrigatório"
-                    : undefined,
-              }}
-            >
-              {#snippet children({ name, state, handleChange })}
-                <div class="form-control">
-                  <label class="label" for="refValor">
-                    <span class="label-text font-semibold">
-                      Valor de Referência <span class="text-error">*</span>
-                    </span>
-                  </label>
-                  <label class="input-group">
-                    <span>R$</span>
-                    <input
-                      {name}
-                      id="refValor"
-                      value={state.value}
-                      placeholder="0,00"
-                      class="input input-bordered w-full focus:input-primary"
-                      inputmode="decimal"
-                      autocomplete="off"
-                      oninput={(e) => {
-                        const target = e.target as HTMLInputElement;
-                        const formatted = formatCurrencyBR(target.value);
-                        target.value = formatted;
-                        handleChange(formatted);
-                      }}
-                      required
-                    />
-                  </label>
-                  <label class="label">
-                    <span class="label-text-alt text-base-content/60">
-                      Valor de referência do cargo
-                    </span>
-                  </label>
-                </div>
-              {/snippet}
-            </form.Field>
-          </div>
+						<!-- Valor de Referência -->
+						<form.Field
+							name="refValor"
+							validators={{
+								onChange: ({ value }) =>
+									form.getFieldValue('tipo') === 'cargo_comissionado' && !value
+										? 'Obrigatório'
+										: undefined
+							}}
+						>
+							{#snippet children({ name, state, handleChange })}
+								<div class="form-control">
+									<label class="label" for="refValor">
+										<span class="label-text font-semibold">
+											Valor de Referência <span class="text-error">*</span>
+										</span>
+									</label>
+									<label class="input-group">
+										<span>R$</span>
+										<input
+											{name}
+											id="refValor"
+											value={state.value}
+											placeholder="0,00"
+											class="input input-bordered focus:input-primary w-full"
+											inputmode="decimal"
+											autocomplete="off"
+											oninput={(e) => {
+												const target = e.target as HTMLInputElement;
+												const formatted = formatCurrencyBR(target.value);
+												target.value = formatted;
+												handleChange(formatted);
+											}}
+											required
+										/>
+									</label>
+									<label class="label">
+										<span class="label-text-alt text-base-content/60">
+											Valor de referência do cargo
+										</span>
+									</label>
+								</div>
+							{/snippet}
+						</form.Field>
+					</div>
 
-          <!-- Preview do Total -->
-          {#if getTotalPreview()}
-            <div class="alert alert-info shadow-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-              </svg>
-              <div>
-                <h3 class="font-bold">Valor Total Calculado</h3>
-                <div class="text-2xl font-bold mt-1">R$ {getTotalPreview()}</div>
-              </div>
-            </div>
-          {/if}
-        {:else}
-          <!-- Valor da Função Gratificada -->
-          <form.Field
-            name="valor"
-            validators={{
-              onChange: ({ value }) =>
-                form.getFieldValue("tipo") === "funcao_gratificada" && !value
-                  ? "Obrigatório"
-                  : undefined,
-            }}
-          >
-            {#snippet children({ name, state, handleChange })}
-              <div class="form-control">
-                <label class="label" for="valor">
-                  <span class="label-text font-semibold">
-                    Valor da Função Gratificada <span class="text-error">*</span>
-                  </span>
-                </label>
-                <label class="input-group">
-                  <span>R$</span>
-                  <input
-                    {name}
-                    id="valor"
-                    value={state.value}
-                    placeholder="0,00"
-                    class="input input-bordered w-full focus:input-primary"
-                    inputmode="decimal"
-                    autocomplete="off"
-                    oninput={(e) => {
-                      const target = e.target as HTMLInputElement;
-                      const formatted = formatCurrencyBR(target.value);
-                      target.value = formatted;
-                      handleChange(formatted);
-                    }}
-                    required
-                  />
-                </label>
-                <label class="label">
-                  <span class="label-text-alt text-base-content/60">
-                    Valor mensal da função gratificada
-                  </span>
-                </label>
-              </div>
-            {/snippet}
-          </form.Field>
-        {/if}
-      </div>
-    </div>
+					<!-- Preview do Total -->
+					{#if getTotalPreview()}
+						<div class="alert alert-info shadow-lg">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								></path>
+							</svg>
+							<div>
+								<h3 class="font-bold">Valor Total Calculado</h3>
+								<div class="mt-1 text-2xl font-bold">R$ {getTotalPreview()}</div>
+							</div>
+						</div>
+					{/if}
+				{:else}
+					<!-- Valor da Função Gratificada -->
+					<form.Field
+						name="valor"
+						validators={{
+							onChange: ({ value }) =>
+								form.getFieldValue('tipo') === 'funcao_gratificada' && !value
+									? 'Obrigatório'
+									: undefined
+						}}
+					>
+						{#snippet children({ name, state, handleChange })}
+							<div class="form-control">
+								<label class="label" for="valor">
+									<span class="label-text font-semibold">
+										Valor da Função Gratificada <span class="text-error">*</span>
+									</span>
+								</label>
+								<label class="input-group">
+									<span>R$</span>
+									<input
+										{name}
+										id="valor"
+										value={state.value}
+										placeholder="0,00"
+										class="input input-bordered focus:input-primary w-full"
+										inputmode="decimal"
+										autocomplete="off"
+										oninput={(e) => {
+											const target = e.target as HTMLInputElement;
+											const formatted = formatCurrencyBR(target.value);
+											target.value = formatted;
+											handleChange(formatted);
+										}}
+										required
+									/>
+								</label>
+								<label class="label">
+									<span class="label-text-alt text-base-content/60">
+										Valor mensal da função gratificada
+									</span>
+								</label>
+							</div>
+						{/snippet}
+					</form.Field>
+				{/if}
+			</div>
+		</div>
 
-    <!-- Botões de Ação -->
-    <form.Subscribe
-      selector={(state) => ({
-        canSubmit: state.canSubmit,
-        isSubmitting: state.isSubmitting,
-      })}
-    >
-      {#snippet children({ canSubmit, isSubmitting })}
-        <div class="card bg-base-100 shadow-xl">
-          <div class="card-body">
-            <div class="flex flex-col sm:flex-row gap-3 justify-end">
-              <button
-                type="button"
-                class="btn btn-ghost btn-lg"
-                disabled={isSubmitting}
-                onclick={() => goto("/recursos-humanos/simbolos")}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Cancelar
-              </button>
-              <button
-                type="submit"
-                class="btn btn-primary btn-lg"
-                disabled={isSubmitting || !canSubmit}
-              >
-                {#if isSubmitting}
-                  <span class="loading loading-spinner"></span>
-                  Cadastrando...
-                {:else}
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                  </svg>
-                  Cadastrar Símbolo
-                {/if}
-              </button>
-            </div>
-          </div>
-        </div>
-      {/snippet}
-    </form.Subscribe>
-  </form>
+		<!-- Botões de Ação -->
+		<form.Subscribe
+			selector={(state) => ({
+				canSubmit: state.canSubmit,
+				isSubmitting: state.isSubmitting
+			})}
+		>
+			{#snippet children({ canSubmit, isSubmitting })}
+				<div class="card bg-base-100 shadow-xl">
+					<div class="card-body">
+						<div class="flex flex-col justify-end gap-3 sm:flex-row">
+							<button
+								type="button"
+								class="btn btn-lg"
+								disabled={isSubmitting}
+								onclick={() => goto('/recursos-humanos/simbolos')}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Cancelar
+							</button>
+							<button
+								type="submit"
+								class="btn btn-primary btn-lg"
+								disabled={isSubmitting || !canSubmit}
+							>
+								{#if isSubmitting}
+									<span class="loading loading-spinner"></span>
+									Cadastrando...
+								{:else}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M5 13l4 4L19 7"
+										/>
+									</svg>
+									Cadastrar Símbolo
+								{/if}
+							</button>
+						</div>
+					</div>
+				</div>
+			{/snippet}
+		</form.Subscribe>
+	</form>
 </main>
 
 <style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  .card {
-    animation: fadeIn 0.3s ease-out;
-  }
+	.card {
+		animation: fadeIn 0.3s ease-out;
+	}
 </style>
diff --git a/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte b/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte
index d6618dd..28b8fac 100644
--- a/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte
@@ -1,424 +1,406 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import AprovarAusencias from "$lib/components/AprovarAusencias.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { goto } from '$app/navigation';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  // Buscar TODAS as solicitações de ausências
-  const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
+	// Buscar TODAS as solicitações de ausências
+	const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
 
-  let filtroStatus = $state<string>("todos");
-  let solicitacaoSelecionada = $state<Id<"solicitacoesAusencias"> | null>(null);
+	let filtroStatus = $state<string>('todos');
+	let solicitacaoSelecionada = $state<Id<'solicitacoesAusencias'> | null>(null);
 
-  const ausencias = $derived(todasAusenciasQuery?.data || []);
+	const ausencias = $derived(todasAusenciasQuery?.data || []);
 
-  // Filtrar solicitações
-  const ausenciasFiltradas = $derived(
-    ausencias.filter((a) => {
-      // Filtro de status
-      if (filtroStatus !== "todos" && a.status !== filtroStatus) return false;
-      return true;
-    }),
-  );
+	// Filtrar solicitações
+	const ausenciasFiltradas = $derived(
+		ausencias.filter((a) => {
+			// Filtro de status
+			if (filtroStatus !== 'todos' && a.status !== filtroStatus) return false;
+			return true;
+		})
+	);
 
-  // Estatísticas gerais
-  const stats = $derived({
-    total: ausencias.length,
-    aguardando: ausencias.filter((a) => a.status === "aguardando_aprovacao")
-      .length,
-    aprovadas: ausencias.filter((a) => a.status === "aprovado").length,
-    reprovadas: ausencias.filter((a) => a.status === "reprovado").length,
-  });
+	// Estatísticas gerais
+	const stats = $derived({
+		total: ausencias.length,
+		aguardando: ausencias.filter((a) => a.status === 'aguardando_aprovacao').length,
+		aprovadas: ausencias.filter((a) => a.status === 'aprovado').length,
+		reprovadas: ausencias.filter((a) => a.status === 'reprovado').length
+	});
 
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-    };
-    return badges[status] || "badge-neutral";
-  }
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error'
+		};
+		return badges[status] || 'badge-neutral';
+	}
 
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-    };
-    return textos[status] || status;
-  }
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado'
+		};
+		return textos[status] || status;
+	}
 
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diff = fim.getTime() - inicio.getTime();
-    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-  }
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+		const diff = fim.getTime() - inicio.getTime();
+		return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  async function selecionarSolicitacao(
-    solicitacaoId: Id<"solicitacoesAusencias">,
-  ) {
-    solicitacaoSelecionada = solicitacaoId;
-  }
+	async function selecionarSolicitacao(solicitacaoId: Id<'solicitacoesAusencias'>) {
+		solicitacaoSelecionada = solicitacaoId;
+	}
 
-  async function recarregar() {
-    solicitacaoSelecionada = null;
-  }
+	async function recarregar() {
+		solicitacaoSelecionada = null;
+	}
 </script>
 
-<main class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/secretaria-executiva" class="text-primary hover:underline"
-          >Secretaria Executiva</a
-        >
-      </li>
-      <li>Gestão de Ausências</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/secretaria-executiva" class="text-primary hover:underline">Secretaria Executiva</a
+				>
+			</li>
+			<li>Gestão de Ausências</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-orange-500/20 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-orange-600"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Gestão de Ausências</h1>
-          <p class="text-base-content/70">
-            Visão geral de todas as solicitações de ausências
-          </p>
-        </div>
-      </div>
-      <button
-        class="btn btn-ghost gap-2"
-        onclick={() => goto("/secretaria-executiva")}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-orange-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-orange-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Gestão de Ausências</h1>
+					<p class="text-base-content/70">Visão geral de todas as solicitações de ausências</p>
+				</div>
+			</div>
+			<button class="btn gap-2" onclick={() => goto('/secretaria-executiva')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
 
-  <!-- Estatísticas -->
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-      <div class="stat-figure text-orange-500">
-        <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Total</div>
-      <div class="stat-value text-orange-500">{stats.total}</div>
-      <div class="stat-desc">Solicitações</div>
-    </div>
+	<!-- Estatísticas -->
+	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+		<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+			<div class="stat-figure text-orange-500">
+				<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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Total</div>
+			<div class="stat-value text-orange-500">{stats.total}</div>
+			<div class="stat-desc">Solicitações</div>
+		</div>
 
-    <div
-      class="stat bg-base-100 shadow-lg rounded-box border border-warning/30"
-    >
-      <div class="stat-figure text-warning">
-        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Pendentes</div>
-      <div class="stat-value text-warning">{stats.aguardando}</div>
-      <div class="stat-desc">Aguardando</div>
-    </div>
+		<div class="stat bg-base-100 rounded-box border-warning/30 border shadow-lg">
+			<div class="stat-figure text-warning">
+				<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Pendentes</div>
+			<div class="stat-value text-warning">{stats.aguardando}</div>
+			<div class="stat-desc">Aguardando</div>
+		</div>
 
-    <div
-      class="stat bg-base-100 shadow-lg rounded-box border border-success/30"
-    >
-      <div class="stat-figure text-success">
-        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Aprovadas</div>
-      <div class="stat-value text-success">{stats.aprovadas}</div>
-      <div class="stat-desc">Deferidas</div>
-    </div>
+		<div class="stat bg-base-100 rounded-box border-success/30 border shadow-lg">
+			<div class="stat-figure text-success">
+				<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Aprovadas</div>
+			<div class="stat-value text-success">{stats.aprovadas}</div>
+			<div class="stat-desc">Deferidas</div>
+		</div>
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
-      <div class="stat-figure text-error">
-        <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </div>
-      <div class="stat-title">Reprovadas</div>
-      <div class="stat-value text-error">{stats.reprovadas}</div>
-      <div class="stat-desc">Indeferidas</div>
-    </div>
-  </div>
+		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
+			<div class="stat-figure text-error">
+				<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Reprovadas</div>
+			<div class="stat-value text-error">{stats.reprovadas}</div>
+			<div class="stat-desc">Indeferidas</div>
+		</div>
+	</div>
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-lg mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">Filtros</h2>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="form-control">
-          <label class="label" for="filtro-status">
-            <span class="label-text">Status</span>
-          </label>
-          <select
-            id="filtro-status"
-            class="select select-bordered"
-            bind:value={filtroStatus}
-          >
-            <option value="todos">Todos</option>
-            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
-            <option value="aprovado">Aprovado</option>
-            <option value="reprovado">Reprovado</option>
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">Filtros</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<div class="form-control">
+					<label class="label" for="filtro-status">
+						<span class="label-text">Status</span>
+					</label>
+					<select id="filtro-status" class="select select-bordered" bind:value={filtroStatus}>
+						<option value="todos">Todos</option>
+						<option value="aguardando_aprovacao">Aguardando Aprovação</option>
+						<option value="aprovado">Aprovado</option>
+						<option value="reprovado">Reprovado</option>
+					</select>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Lista de Solicitações -->
-  <div class="card bg-base-100 shadow-lg">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        Todas as Solicitações ({ausenciasFiltradas.length})
-      </h2>
+	<!-- Lista de Solicitações -->
+	<div class="card bg-base-100 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				Todas as Solicitações ({ausenciasFiltradas.length})
+			</h2>
 
-      {#if ausenciasFiltradas.length === 0}
-        <div class="alert">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="stroke-info shrink-0 w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
-        </div>
-      {:else}
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>Funcionário</th>
-                <th>Time</th>
-                <th>Período</th>
-                <th>Dias</th>
-                <th>Motivo</th>
-                <th>Status</th>
-                <th>Solicitado em</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each ausenciasFiltradas as ausencia}
-                <tr>
-                  <td class="font-semibold">
-                    {ausencia.funcionario?.nome || "N/A"}
-                  </td>
-                  <td>
-                    {#if ausencia.time}
-                      <div
-                        class="badge badge-sm font-semibold"
-                        style="background-color: {ausencia.time
-                          .cor}20; border-color: {ausencia.time
-                          .cor}; color: {ausencia.time.cor}"
-                      >
-                        {ausencia.time.nome}
-                      </div>
-                    {:else}
-                      <span class="text-base-content/50">Sem time</span>
-                    {/if}
-                  </td>
-                  <td>
-                    {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                    {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
-                  </td>
-                  <td class="font-bold">
-                    {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
-                  </td>
-                  <td class="max-w-xs truncate" title={ausencia.motivo}>
-                    {ausencia.motivo}
-                  </td>
-                  <td>
-                    <div class={`badge ${getStatusBadge(ausencia.status)}`}>
-                      {getStatusTexto(ausencia.status)}
-                    </div>
-                  </td>
-                  <td class="text-xs">
-                    {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
-                  </td>
-                  <td>
-                    {#if ausencia.status === "aguardando_aprovacao"}
-                      <button
-                        type="button"
-                        class="btn btn-primary btn-sm gap-2"
-                        onclick={() => selecionarSolicitacao(ausencia._id)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
-                        Ver Detalhes
-                      </button>
-                    {:else}
-                      <button
-                        type="button"
-                        class="btn btn-ghost btn-sm gap-2"
-                        onclick={() => selecionarSolicitacao(ausencia._id)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
-                        Ver Detalhes
-                      </button>
-                    {/if}
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if ausenciasFiltradas.length === 0}
+				<div class="alert">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="stroke-info h-6 w-6 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+					<span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+				</div>
+			{:else}
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Funcionário</th>
+								<th>Time</th>
+								<th>Período</th>
+								<th>Dias</th>
+								<th>Motivo</th>
+								<th>Status</th>
+								<th>Solicitado em</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each ausenciasFiltradas as ausencia}
+								<tr>
+									<td class="font-semibold">
+										{ausencia.funcionario?.nome || 'N/A'}
+									</td>
+									<td>
+										{#if ausencia.time}
+											<div
+												class="badge badge-sm font-semibold"
+												style="background-color: {ausencia.time.cor}20; border-color: {ausencia.time
+													.cor}; color: {ausencia.time.cor}"
+											>
+												{ausencia.time.nome}
+											</div>
+										{:else}
+											<span class="text-base-content/50">Sem time</span>
+										{/if}
+									</td>
+									<td>
+										{new Date(ausencia.dataInicio).toLocaleDateString('pt-BR')} até{' '}
+										{new Date(ausencia.dataFim).toLocaleDateString('pt-BR')}
+									</td>
+									<td class="font-bold">
+										{calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
+									</td>
+									<td class="max-w-xs truncate" title={ausencia.motivo}>
+										{ausencia.motivo}
+									</td>
+									<td>
+										<div class={`badge ${getStatusBadge(ausencia.status)}`}>
+											{getStatusTexto(ausencia.status)}
+										</div>
+									</td>
+									<td class="text-xs">
+										{new Date(ausencia.criadoEm).toLocaleDateString('pt-BR')}
+									</td>
+									<td>
+										{#if ausencia.status === 'aguardando_aprovacao'}
+											<button
+												type="button"
+												class="btn btn-primary btn-sm gap-2"
+												onclick={() => selecionarSolicitacao(ausencia._id)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+													/>
+												</svg>
+												Ver Detalhes
+											</button>
+										{:else}
+											<button
+												type="button"
+												class="btn btn-sm gap-2"
+												onclick={() => selecionarSolicitacao(ausencia._id)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+													/>
+												</svg>
+												Ver Detalhes
+											</button>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		</div>
+	</div>
 </main>
 
 <!-- Modal de Aprovação -->
 {#if solicitacaoSelecionada && currentUser.data}
-  {#await client.query( api.ausencias.obterDetalhes, { solicitacaoId: solicitacaoSelecionada }, ) then detalhes}
-    {#if detalhes}
-      <dialog class="modal modal-open">
-        <div class="modal-box max-w-4xl">
-          <AprovarAusencias
-            solicitacao={detalhes}
-            gestorId={currentUser.data._id}
-            onSucesso={recarregar}
-            onCancelar={() => (solicitacaoSelecionada = null)}
-          />
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button
-            type="button"
-            onclick={() => (solicitacaoSelecionada = null)}
-            aria-label="Fechar modal">Fechar</button
-          >
-        </form>
-      </dialog>
-    {/if}
-  {/await}
+	{#await client.query( api.ausencias.obterDetalhes, { solicitacaoId: solicitacaoSelecionada } ) then detalhes}
+		{#if detalhes}
+			<dialog class="modal modal-open">
+				<div class="modal-box max-w-4xl">
+					<AprovarAusencias
+						solicitacao={detalhes}
+						gestorId={currentUser.data._id}
+						onSucesso={recarregar}
+						onCancelar={() => (solicitacaoSelecionada = null)}
+					/>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button
+						type="button"
+						onclick={() => (solicitacaoSelecionada = null)}
+						aria-label="Fechar modal">Fechar</button
+					>
+				</form>
+			</dialog>
+		{/if}
+	{/await}
 {/if}
diff --git a/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte b/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
index 5afa446..e349a09 100644
--- a/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
@@ -1,394 +1,347 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { createForm } from "@tanstack/svelte-form";
-  import z from "zod";
+	import { goto } from '$app/navigation';
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { createForm } from '@tanstack/svelte-form';
+	import z from 'zod';
 
-  const convex = useConvexClient();
+	const convex = useConvexClient();
 
-  // Estado para mensagens
-  let notice = $state<{ type: "success" | "error"; message: string } | null>(
-    null,
-  );
+	// Estado para mensagens
+	let notice = $state<{ type: 'success' | 'error'; message: string } | null>(null);
 
-  // Schema de validação
-  const formSchema = z.object({
-    nome: z.string().min(3, "Nome deve ter no mínimo 3 caracteres"),
-    matricula: z.string().min(1, "Matrícula é obrigatória"),
-    email: z.string().email("E-mail inválido"),
-    telefone: z.string().min(14, "Telefone inválido"),
-  });
+	// Schema de validação
+	const formSchema = z.object({
+		nome: z.string().min(3, 'Nome deve ter no mínimo 3 caracteres'),
+		matricula: z.string().min(1, 'Matrícula é obrigatória'),
+		email: z.string().email('E-mail inválido'),
+		telefone: z.string().min(14, 'Telefone inválido')
+	});
 
-  // Criar o formulário
-  const form = createForm(() => ({
-    defaultValues: {
-      nome: "",
-      matricula: "",
-      email: "",
-      telefone: "",
-    },
-    onSubmit: async ({ value }) => {
-      try {
-        notice = null;
-        await convex.mutation(api.solicitacoesAcesso.create, {
-          nome: value.nome,
-          matricula: value.matricula,
-          email: value.email,
-          telefone: value.telefone,
-        });
-        notice = {
-          type: "success",
-          message:
-            "Solicitação de acesso enviada com sucesso! Aguarde a análise da equipe de TI.",
-        };
-        // Limpar o formulário
-        form.reset();
-        // Redirecionar após 3 segundos
-        setTimeout(() => {
-          goto("/");
-        }, 3000);
-      } catch (error: any) {
-        notice = {
-          type: "error",
-          message:
-            error.message || "Erro ao enviar solicitação. Tente novamente.",
-        };
-      }
-    },
-  }));
+	// Criar o formulário
+	const form = createForm(() => ({
+		defaultValues: {
+			nome: '',
+			matricula: '',
+			email: '',
+			telefone: ''
+		},
+		onSubmit: async ({ value }) => {
+			try {
+				notice = null;
+				await convex.mutation(api.solicitacoesAcesso.create, {
+					nome: value.nome,
+					matricula: value.matricula,
+					email: value.email,
+					telefone: value.telefone
+				});
+				notice = {
+					type: 'success',
+					message: 'Solicitação de acesso enviada com sucesso! Aguarde a análise da equipe de TI.'
+				};
+				// Limpar o formulário
+				form.reset();
+				// Redirecionar após 3 segundos
+				setTimeout(() => {
+					goto('/');
+				}, 3000);
+			} catch (error: any) {
+				notice = {
+					type: 'error',
+					message: error.message || 'Erro ao enviar solicitação. Tente novamente.'
+				};
+			}
+		}
+	}));
 
-  // Máscaras
-  function maskTelefone(value: string): string {
-    const cleaned = value.replace(/\D/g, "");
-    if (cleaned.length <= 10) {
-      return cleaned
-        .replace(/^(\d{2})(\d)/, "($1) $2")
-        .replace(/(\d{4})(\d)/, "$1-$2");
-    }
-    return cleaned
-      .replace(/^(\d{2})(\d)/, "($1) $2")
-      .replace(/(\d{5})(\d)/, "$1-$2");
-  }
+	// Máscaras
+	function maskTelefone(value: string): string {
+		const cleaned = value.replace(/\D/g, '');
+		if (cleaned.length <= 10) {
+			return cleaned.replace(/^(\d{2})(\d)/, '($1) $2').replace(/(\d{4})(\d)/, '$1-$2');
+		}
+		return cleaned.replace(/^(\d{2})(\d)/, '($1) $2').replace(/(\d{5})(\d)/, '$1-$2');
+	}
 
-  function handleCancel() {
-    goto("/");
-  }
+	function handleCancel() {
+		goto('/');
+	}
 </script>
 
 <main class="mx-auto w-full max-w-4xl space-y-8 px-4 py-10">
-  <!-- Cabeçalho Estilizado -->
-  <section
-    class="relative overflow-hidden rounded-3xl border border-primary/25 bg-linear-to-br from-primary/10 via-base-100 to-secondary/20 p-8 shadow-2xl"
-  >
-    <div
-      class="absolute -left-10 top-10 h-40 w-40 rounded-full bg-primary/20 blur-3xl"
-    ></div>
-    <div
-      class="absolute -bottom-16 right-0 h-56 w-56 rounded-full bg-secondary/20 blur-3xl"
-    ></div>
-    <div class="relative z-10 space-y-4">
-      <span
-        class="inline-flex w-fit items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.28em] text-primary"
-      >
-        Acesso ao Sistema
-      </span>
-      <h1
-        class="text-4xl font-black leading-tight text-base-content sm:text-5xl"
-      >
-        Solicitar Acesso ao SGSE
-      </h1>
-      <p class="text-base leading-relaxed text-base-content/70 sm:text-lg">
-        Preencha o formulário abaixo para solicitar acesso ao Sistema de
-        Gerenciamento da Secretaria de Esportes. Sua solicitação será analisada
-        pela equipe de Tecnologia da Informação.
-      </p>
-    </div>
-  </section>
+	<!-- Cabeçalho Estilizado -->
+	<section
+		class="border-primary/25 from-primary/10 via-base-100 to-secondary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
+	>
+		<div class="bg-primary/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
+		<div class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
+		<div class="relative z-10 space-y-4">
+			<span
+				class="border-primary/40 bg-primary/10 text-primary inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1 text-xs font-semibold tracking-[0.28em] uppercase"
+			>
+				Acesso ao Sistema
+			</span>
+			<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
+				Solicitar Acesso ao SGSE
+			</h1>
+			<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
+				Preencha o formulário abaixo para solicitar acesso ao Sistema de Gerenciamento da Secretaria
+				de Esportes. Sua solicitação será analisada pela equipe de Tecnologia da Informação.
+			</p>
+		</div>
+	</section>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div
-      class="alert {notice.type === 'success'
-        ? 'alert-success'
-        : 'alert-error'} shadow-xl"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if notice.type === "success"}
-          <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"
-          />
-        {:else}
-          <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"
-          />
-        {/if}
-      </svg>
-      <span class="font-semibold">{notice.message}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div class="alert {notice.type === 'success' ? 'alert-success' : 'alert-error'} shadow-xl">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.type === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span class="font-semibold">{notice.message}</span>
+		</div>
+	{/if}
 
-  <!-- Formulário -->
-  <section
-    class="relative overflow-hidden rounded-3xl border border-base-200 bg-base-100/90 p-8 shadow-2xl"
-  >
-    <div
-      class="absolute inset-x-6 top-0 h-24 rounded-b-full bg-linear-to-b from-base-200/40 to-transparent opacity-50"
-    ></div>
-    <div class="relative z-10">
-      <form
-        onsubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          form.handleSubmit();
-        }}
-      >
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Nome -->
-          <form.Field
-            name="nome"
-            validators={{ onChange: formSchema.shape.nome }}
-          >
-            {#snippet children(field)}
-              <div class="form-control md:col-span-2">
-                <label class="label" for="nome">
-                  <span class="label-text font-semibold">Nome Completo</span>
-                  <span class="text-error">*</span>
-                </label>
-                <input
-                  id="nome"
-                  type="text"
-                  placeholder="Digite seu nome completo"
-                  class="input input-bordered w-full focus:input-primary transition-colors duration-300"
-                  value={field.state.value}
-                  onblur={field.handleBlur}
-                  oninput={(e) => field.handleChange(e.currentTarget.value)}
-                />
-                {#if field.state.meta.errors.length > 0}
-                  <label class="label">
-                    <span class="text-error text-sm mt-1"
-                      >{field.state.meta.errors[0]}</span
-                    >
-                  </label>
-                {/if}
-              </div>
-            {/snippet}
-          </form.Field>
+	<!-- Formulário -->
+	<section
+		class="border-base-200 bg-base-100/90 relative overflow-hidden rounded-3xl border p-8 shadow-2xl"
+	>
+		<div
+			class="from-base-200/40 absolute inset-x-6 top-0 h-24 rounded-b-full bg-linear-to-b to-transparent opacity-50"
+		></div>
+		<div class="relative z-10">
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					form.handleSubmit();
+				}}
+			>
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<!-- Nome -->
+					<form.Field name="nome" validators={{ onChange: formSchema.shape.nome }}>
+						{#snippet children(field)}
+							<div class="form-control md:col-span-2">
+								<label class="label" for="nome">
+									<span class="label-text font-semibold">Nome Completo</span>
+									<span class="text-error">*</span>
+								</label>
+								<input
+									id="nome"
+									type="text"
+									placeholder="Digite seu nome completo"
+									class="input input-bordered focus:input-primary w-full transition-colors duration-300"
+									value={field.state.value}
+									onblur={field.handleBlur}
+									oninput={(e) => field.handleChange(e.currentTarget.value)}
+								/>
+								{#if field.state.meta.errors.length > 0}
+									<label class="label">
+										<span class="text-error mt-1 text-sm">{field.state.meta.errors[0]}</span>
+									</label>
+								{/if}
+							</div>
+						{/snippet}
+					</form.Field>
 
-          <!-- Matrícula -->
-          <form.Field
-            name="matricula"
-            validators={{ onChange: formSchema.shape.matricula }}
-          >
-            {#snippet children(field)}
-              <div class="form-control">
-                <label class="label" for="matricula">
-                  <span class="label-text font-semibold">Matrícula</span>
-                  <span class="text-error">*</span>
-                </label>
-                <input
-                  id="matricula"
-                  type="text"
-                  placeholder="Digite sua matrícula"
-                  class="input input-bordered w-full focus:input-primary transition-colors duration-300"
-                  value={field.state.value}
-                  onblur={field.handleBlur}
-                  oninput={(e) => field.handleChange(e.currentTarget.value)}
-                />
-                {#if field.state.meta.errors.length > 0}
-                  <label class="label">
-                    <span class="text-error text-sm mt-1"
-                      >{field.state.meta.errors[0]}</span
-                    >
-                  </label>
-                {/if}
-              </div>
-            {/snippet}
-          </form.Field>
+					<!-- Matrícula -->
+					<form.Field name="matricula" validators={{ onChange: formSchema.shape.matricula }}>
+						{#snippet children(field)}
+							<div class="form-control">
+								<label class="label" for="matricula">
+									<span class="label-text font-semibold">Matrícula</span>
+									<span class="text-error">*</span>
+								</label>
+								<input
+									id="matricula"
+									type="text"
+									placeholder="Digite sua matrícula"
+									class="input input-bordered focus:input-primary w-full transition-colors duration-300"
+									value={field.state.value}
+									onblur={field.handleBlur}
+									oninput={(e) => field.handleChange(e.currentTarget.value)}
+								/>
+								{#if field.state.meta.errors.length > 0}
+									<label class="label">
+										<span class="text-error mt-1 text-sm">{field.state.meta.errors[0]}</span>
+									</label>
+								{/if}
+							</div>
+						{/snippet}
+					</form.Field>
 
-          <!-- E-mail -->
-          <form.Field
-            name="email"
-            validators={{ onChange: formSchema.shape.email }}
-          >
-            {#snippet children(field)}
-              <div class="form-control">
-                <label class="label" for="email">
-                  <span class="label-text font-semibold">E-mail</span>
-                  <span class="text-error">*</span>
-                </label>
-                <input
-                  id="email"
-                  type="email"
-                  placeholder="seu@email.com"
-                  class="input input-bordered w-full focus:input-primary transition-colors duration-300"
-                  value={field.state.value}
-                  onblur={field.handleBlur}
-                  oninput={(e) => field.handleChange(e.currentTarget.value)}
-                />
-                {#if field.state.meta.errors.length > 0}
-                  <label class="label">
-                    <span class="text-error text-sm mt-1"
-                      >{field.state.meta.errors[0]}</span
-                    >
-                  </label>
-                {/if}
-              </div>
-            {/snippet}
-          </form.Field>
+					<!-- E-mail -->
+					<form.Field name="email" validators={{ onChange: formSchema.shape.email }}>
+						{#snippet children(field)}
+							<div class="form-control">
+								<label class="label" for="email">
+									<span class="label-text font-semibold">E-mail</span>
+									<span class="text-error">*</span>
+								</label>
+								<input
+									id="email"
+									type="email"
+									placeholder="seu@email.com"
+									class="input input-bordered focus:input-primary w-full transition-colors duration-300"
+									value={field.state.value}
+									onblur={field.handleBlur}
+									oninput={(e) => field.handleChange(e.currentTarget.value)}
+								/>
+								{#if field.state.meta.errors.length > 0}
+									<label class="label">
+										<span class="text-error mt-1 text-sm">{field.state.meta.errors[0]}</span>
+									</label>
+								{/if}
+							</div>
+						{/snippet}
+					</form.Field>
 
-          <!-- Telefone -->
-          <form.Field
-            name="telefone"
-            validators={{ onChange: formSchema.shape.telefone }}
-          >
-            {#snippet children(field)}
-              <div class="form-control md:col-span-2">
-                <label class="label" for="telefone">
-                  <span class="label-text font-semibold">Telefone</span>
-                  <span class="text-error">*</span>
-                </label>
-                <input
-                  id="telefone"
-                  type="text"
-                  placeholder="(00) 00000-0000"
-                  class="input input-bordered w-full focus:input-primary transition-colors duration-300"
-                  value={field.state.value}
-                  onblur={field.handleBlur}
-                  oninput={(e) => {
-                    const masked = maskTelefone(e.currentTarget.value);
-                    e.currentTarget.value = masked;
-                    field.handleChange(masked);
-                  }}
-                  maxlength="15"
-                />
-                {#if field.state.meta.errors.length > 0}
-                  <label class="label">
-                    <span class="text-error text-sm mt-1"
-                      >{field.state.meta.errors[0]}</span
-                    >
-                  </label>
-                {/if}
-              </div>
-            {/snippet}
-          </form.Field>
-        </div>
+					<!-- Telefone -->
+					<form.Field name="telefone" validators={{ onChange: formSchema.shape.telefone }}>
+						{#snippet children(field)}
+							<div class="form-control md:col-span-2">
+								<label class="label" for="telefone">
+									<span class="label-text font-semibold">Telefone</span>
+									<span class="text-error">*</span>
+								</label>
+								<input
+									id="telefone"
+									type="text"
+									placeholder="(00) 00000-0000"
+									class="input input-bordered focus:input-primary w-full transition-colors duration-300"
+									value={field.state.value}
+									onblur={field.handleBlur}
+									oninput={(e) => {
+										const masked = maskTelefone(e.currentTarget.value);
+										e.currentTarget.value = masked;
+										field.handleChange(masked);
+									}}
+									maxlength="15"
+								/>
+								{#if field.state.meta.errors.length > 0}
+									<label class="label">
+										<span class="text-error mt-1 text-sm">{field.state.meta.errors[0]}</span>
+									</label>
+								{/if}
+							</div>
+						{/snippet}
+					</form.Field>
+				</div>
 
-        <!-- Botões de Ação -->
-        <div class="flex justify-end gap-4 mt-8 pt-6 border-t border-base-300">
-          <button
-            type="button"
-            class="btn btn-ghost btn-md"
-            onclick={handleCancel}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 mr-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-            Cancelar
-          </button>
-          <button
-            type="submit"
-            class="btn btn-primary btn-md shadow-md transition-all duration-200 hover:shadow-primary/40"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 mr-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-            Solicitar Acesso
-          </button>
-        </div>
-      </form>
-    </div>
-  </section>
+				<!-- Botões de Ação -->
+				<div class="border-base-300 mt-8 flex justify-end gap-4 border-t pt-6">
+					<button type="button" class="btn btn-md" onclick={handleCancel}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mr-2 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Cancelar
+					</button>
+					<button
+						type="submit"
+						class="btn btn-primary btn-md hover:shadow-primary/40 shadow-md transition-all duration-200"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mr-2 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						Solicitar Acesso
+					</button>
+				</div>
+			</form>
+		</div>
+	</section>
 
-  <!-- Informações Importantes -->
-  <div class="alert alert-info shadow-xl border border-info/30">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      class="stroke-current shrink-0 w-6 h-6"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      ></path>
-    </svg>
-    <div>
-      <h3 class="font-bold text-lg mb-2">Informações Importantes</h3>
-      <div class="text-sm space-y-1">
-        <div class="flex items-start gap-2">
-          <span class="text-info font-bold">•</span>
-          <span>Todos os campos marcados com * são obrigatórios</span>
-        </div>
-        <div class="flex items-start gap-2">
-          <span class="text-info font-bold">•</span>
-          <span
-            >Sua solicitação será analisada pela equipe de TI em até 48 horas
-            úteis</span
-          >
-        </div>
-        <div class="flex items-start gap-2">
-          <span class="text-info font-bold">•</span>
-          <span>Você receberá um e-mail com o resultado da análise</span>
-        </div>
-        <div class="flex items-start gap-2">
-          <span class="text-info font-bold">•</span>
-          <span>Em caso de dúvidas, entre em contato com o suporte técnico</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Informações Importantes -->
+	<div class="alert alert-info border-info/30 border shadow-xl">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="h-6 w-6 shrink-0 stroke-current"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			></path>
+		</svg>
+		<div>
+			<h3 class="mb-2 text-lg font-bold">Informações Importantes</h3>
+			<div class="space-y-1 text-sm">
+				<div class="flex items-start gap-2">
+					<span class="text-info font-bold">•</span>
+					<span>Todos os campos marcados com * são obrigatórios</span>
+				</div>
+				<div class="flex items-start gap-2">
+					<span class="text-info font-bold">•</span>
+					<span>Sua solicitação será analisada pela equipe de TI em até 48 horas úteis</span>
+				</div>
+				<div class="flex items-start gap-2">
+					<span class="text-info font-bold">•</span>
+					<span>Você receberá um e-mail com o resultado da análise</span>
+				</div>
+				<div class="flex items-start gap-2">
+					<span class="text-info font-bold">•</span>
+					<span>Em caso de dúvidas, entre em contato com o suporte técnico</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </main>
 
 <style>
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@keyframes fadeInUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  section {
-    animation: fadeInUp 0.5s ease-out;
-  }
+	section {
+		animation: fadeInUp 0.5s ease-out;
+	}
 </style>
diff --git a/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte b/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte
index 214332c..0a3cd0e 100644
--- a/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte
@@ -1,463 +1,568 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Doc } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  type EmailDetalhes = Doc<"notificacoesEmail"> | null;
+	type EmailDetalhes = Doc<'notificacoesEmail'> | null;
 
-  let autoRefresh = $state(true);
-  let refreshInterval: ReturnType<typeof setInterval> | null = null;
-  let processando = $state(false);
-  let modalDetalhesAberto = $state(false);
-  let emailSelecionado = $state<EmailDetalhes>(null);
+	let autoRefresh = $state(true);
+	let refreshInterval: ReturnType<typeof setInterval> | null = null;
+	let processando = $state(false);
+	let modalDetalhesAberto = $state(false);
+	let emailSelecionado = $state<EmailDetalhes>(null);
 
-  const client = useConvexClient();
-  
-  // Criar uma chave reativa para forçar atualização das queries
-  let refreshKey = $state(0);
-  
-  // Usar refreshKey nos argumentos para forçar recarregamento quando mudar
-  // O backend ignora esse parâmetro, mas força o Convex Svelte a reexecutar a query
-  const estatisticas = useQuery(api.email.obterEstatisticasFilaEmails, { _refresh: refreshKey });
-  const filaEmails = useQuery(api.email.listarFilaEmails, { limite: 50, _refresh: refreshKey });
+	const client = useConvexClient();
 
-  // Função para forçar refresh das queries
-  function refreshQueries() {
-    refreshKey++;
-  }
+	// Criar uma chave reativa para forçar atualização das queries
+	let refreshKey = $state(0);
 
-  $effect(() => {
-    if (autoRefresh) {
-      refreshInterval = setInterval(() => {
-        refreshQueries();
-      }, 5000); // Refresh a cada 5 segundos
-    } else {
-      if (refreshInterval) {
-        clearInterval(refreshInterval);
-        refreshInterval = null;
-      }
-    }
+	// Usar refreshKey nos argumentos para forçar recarregamento quando mudar
+	// O backend ignora esse parâmetro, mas força o Convex Svelte a reexecutar a query
+	const estatisticas = useQuery(api.email.obterEstatisticasFilaEmails, { _refresh: refreshKey });
+	const filaEmails = useQuery(api.email.listarFilaEmails, { limite: 50, _refresh: refreshKey });
 
-    return () => {
-      if (refreshInterval) {
-        clearInterval(refreshInterval);
-        refreshInterval = null;
-      }
-    };
-  });
+	// Função para forçar refresh das queries
+	function refreshQueries() {
+		refreshKey++;
+	}
 
-  async function processarFilaManual() {
-    if (processando) return;
-    
-    try {
-      processando = true;
-      const resultado = await client.action(api.email.processarFilaEmailsManual, { limite: 10 });
-      
-      if (resultado.sucesso) {
-        alert(`✅ Processados: ${resultado.processados}, Falhas: ${resultado.falhas}`);
-        // Forçar atualização após processar
-        refreshQueries();
-      } else {
-        alert(`❌ Erro: ${resultado.erro || "Erro desconhecido"}`);
-      }
-    } catch (error) {
-      console.error("Erro ao processar fila:", error);
-      alert("Erro ao processar fila de emails");
-    } finally {
-      processando = false;
-    }
-  }
+	$effect(() => {
+		if (autoRefresh) {
+			refreshInterval = setInterval(() => {
+				refreshQueries();
+			}, 5000); // Refresh a cada 5 segundos
+		} else {
+			if (refreshInterval) {
+				clearInterval(refreshInterval);
+				refreshInterval = null;
+			}
+		}
 
-  function formatarData(timestamp: number | undefined): string {
-    if (!timestamp) return "-";
-    return new Date(timestamp).toLocaleString("pt-BR");
-  }
+		return () => {
+			if (refreshInterval) {
+				clearInterval(refreshInterval);
+				refreshInterval = null;
+			}
+		};
+	});
 
-  function getStatusBadgeClass(status: string): string {
-    switch (status) {
-      case "pendente":
-        return "badge badge-warning";
-      case "enviando":
-        return "badge badge-info";
-      case "enviado":
-        return "badge badge-success";
-      case "falha":
-        return "badge badge-error";
-      default:
-        return "badge badge-ghost";
-    }
-  }
+	async function processarFilaManual() {
+		if (processando) return;
 
-  function getStatusLabel(status: string): string {
-    switch (status) {
-      case "pendente":
-        return "Pendente";
-      case "enviando":
-        return "Enviando";
-      case "enviado":
-        return "Enviado";
-      case "falha":
-        return "Falha";
-      default:
-        return status;
-    }
-  }
+		try {
+			processando = true;
+			const resultado = await client.action(api.email.processarFilaEmailsManual, { limite: 10 });
 
-  function abrirModalDetalhes(email: Doc<"notificacoesEmail">) {
-    emailSelecionado = email;
-    modalDetalhesAberto = true;
-  }
+			if (resultado.sucesso) {
+				alert(`✅ Processados: ${resultado.processados}, Falhas: ${resultado.falhas}`);
+				// Forçar atualização após processar
+				refreshQueries();
+			} else {
+				alert(`❌ Erro: ${resultado.erro || 'Erro desconhecido'}`);
+			}
+		} catch (error) {
+			console.error('Erro ao processar fila:', error);
+			alert('Erro ao processar fila de emails');
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalDetalhes() {
-    modalDetalhesAberto = false;
-    emailSelecionado = null;
-  }
+	function formatarData(timestamp: number | undefined): string {
+		if (!timestamp) return '-';
+		return new Date(timestamp).toLocaleString('pt-BR');
+	}
+
+	function getStatusBadgeClass(status: string): string {
+		switch (status) {
+			case 'pendente':
+				return 'badge badge-warning';
+			case 'enviando':
+				return 'badge badge-info';
+			case 'enviado':
+				return 'badge badge-success';
+			case 'falha':
+				return 'badge badge-error';
+			default:
+				return 'badge badge-ghost';
+		}
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'pendente':
+				return 'Pendente';
+			case 'enviando':
+				return 'Enviando';
+			case 'enviado':
+				return 'Enviado';
+			case 'falha':
+				return 'Falha';
+			default:
+				return status;
+		}
+	}
+
+	function abrirModalDetalhes(email: Doc<'notificacoesEmail'>) {
+		emailSelecionado = email;
+		modalDetalhesAberto = true;
+	}
+
+	function fecharModalDetalhes() {
+		modalDetalhesAberto = false;
+		emailSelecionado = null;
+	}
 </script>
 
 <div class="container mx-auto p-6">
-  <div class="mb-6">
-    <h1 class="text-3xl font-bold mb-2">📧 Monitoramento de Emails</h1>
-    <p class="text-base-content/70">
-      Acompanhe o status da fila de emails e identifique problemas de envio
-    </p>
-  </div>
+	<div class="mb-6">
+		<h1 class="mb-2 text-3xl font-bold">📧 Monitoramento de Emails</h1>
+		<p class="text-base-content/70">
+			Acompanhe o status da fila de emails e identifique problemas de envio
+		</p>
+	</div>
 
-  <!-- Estatísticas -->
-  {#if estatisticas?.data}
-    <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
-      <div class="stat bg-base-200 rounded-lg shadow">
-        <div class="stat-title">Total</div>
-        <div class="stat-value text-2xl">{estatisticas.data.total}</div>
-        <div class="stat-desc">Emails na fila</div>
-      </div>
+	<!-- Estatísticas -->
+	{#if estatisticas?.data}
+		<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-5">
+			<div class="stat bg-base-200 rounded-lg shadow">
+				<div class="stat-title">Total</div>
+				<div class="stat-value text-2xl">{estatisticas.data.total}</div>
+				<div class="stat-desc">Emails na fila</div>
+			</div>
 
-      <div class="stat bg-warning/10 rounded-lg shadow">
-        <div class="stat-title">Pendentes</div>
-        <div class="stat-value text-2xl text-warning">{estatisticas.data.pendentes}</div>
-        <div class="stat-desc">Aguardando envio</div>
-      </div>
+			<div class="stat bg-warning/10 rounded-lg shadow">
+				<div class="stat-title">Pendentes</div>
+				<div class="stat-value text-warning text-2xl">{estatisticas.data.pendentes}</div>
+				<div class="stat-desc">Aguardando envio</div>
+			</div>
 
-      <div class="stat bg-info/10 rounded-lg shadow">
-        <div class="stat-title">Enviando</div>
-        <div class="stat-value text-2xl text-info">{estatisticas.data.enviando}</div>
-        <div class="stat-desc">Em processamento</div>
-      </div>
+			<div class="stat bg-info/10 rounded-lg shadow">
+				<div class="stat-title">Enviando</div>
+				<div class="stat-value text-info text-2xl">{estatisticas.data.enviando}</div>
+				<div class="stat-desc">Em processamento</div>
+			</div>
 
-      <div class="stat bg-success/10 rounded-lg shadow">
-        <div class="stat-title">Enviados</div>
-        <div class="stat-value text-2xl text-success">{estatisticas.data.enviados}</div>
-        <div class="stat-desc">Concluídos</div>
-      </div>
+			<div class="stat bg-success/10 rounded-lg shadow">
+				<div class="stat-title">Enviados</div>
+				<div class="stat-value text-success text-2xl">{estatisticas.data.enviados}</div>
+				<div class="stat-desc">Concluídos</div>
+			</div>
 
-      <div class="stat bg-error/10 rounded-lg shadow">
-        <div class="stat-title">Falhas</div>
-        <div class="stat-value text-2xl text-error">{estatisticas.data.falhas}</div>
-        <div class="stat-desc">Com erro</div>
-      </div>
-    </div>
-  {:else if estatisticas === undefined}
-    <div class="text-center py-8">
-      <span class="loading loading-spinner loading-lg"></span>
-    </div>
-  {/if}
+			<div class="stat bg-error/10 rounded-lg shadow">
+				<div class="stat-title">Falhas</div>
+				<div class="stat-value text-error text-2xl">{estatisticas.data.falhas}</div>
+				<div class="stat-desc">Com erro</div>
+			</div>
+		</div>
+	{:else if estatisticas === undefined}
+		<div class="py-8 text-center">
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
+	{/if}
 
-  <!-- Controles -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <div class="flex items-center justify-between">
-        <div class="form-control">
-          <label class="label cursor-pointer gap-4">
-            <span class="label-text">Atualização automática</span>
-            <input
-              type="checkbox"
-              class="toggle toggle-primary"
-              bind:checked={autoRefresh}
-            />
-          </label>
-        </div>
+	<!-- Controles -->
+	<div class="card bg-base-100 mb-6 shadow-xl">
+		<div class="card-body">
+			<div class="flex items-center justify-between">
+				<div class="form-control">
+					<label class="label cursor-pointer gap-4">
+						<span class="label-text">Atualização automática</span>
+						<input type="checkbox" class="toggle toggle-primary" bind:checked={autoRefresh} />
+					</label>
+				</div>
 
-        <button
-          class="btn btn-primary"
-          onclick={processarFilaManual}
-          disabled={processando}
-        >
-          {#if processando}
-            <span class="loading loading-spinner loading-sm"></span>
-            Processando...
-          {:else}
-            🔄 Processar Fila Manualmente
-          {/if}
-        </button>
-      </div>
-    </div>
-  </div>
+				<button class="btn btn-primary" onclick={processarFilaManual} disabled={processando}>
+					{#if processando}
+						<span class="loading loading-spinner loading-sm"></span>
+						Processando...
+					{:else}
+						🔄 Processar Fila Manualmente
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
 
-  <!-- Lista de Emails -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <h2 class="card-title mb-4">Fila de Emails</h2>
+	<!-- Lista de Emails -->
+	<div class="card bg-base-100 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title mb-4">Fila de Emails</h2>
 
-      {#if filaEmails?.data && filaEmails.data.length > 0}
-        <div class="overflow-x-auto">
-          <table class="table table-zebra w-full">
-            <thead>
-              <tr>
-                <th>Destinatário</th>
-                <th>Assunto</th>
-                <th>Status</th>
-                <th>Tentativas</th>
-                <th>Criado em</th>
-                <th>Última tentativa</th>
-                <th>Erro</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each filaEmails.data as email}
-                <tr>
-                  <td>
-                    <div class="font-medium">{email.destinatario}</div>
-                  </td>
-                  <td>
-                    <div class="max-w-xs truncate" title={email.assunto}>
-                      {email.assunto}
-                    </div>
-                  </td>
-                  <td>
-                    <span class={getStatusBadgeClass(email.status)}>
-                      {getStatusLabel(email.status)}
-                    </span>
-                  </td>
-                  <td>{email.tentativas || 0}</td>
-                  <td class="text-sm">{formatarData(email.criadoEm)}</td>
-                  <td class="text-sm">
-                    {formatarData(email.ultimaTentativa)}
-                  </td>
-                  <td>
-                    {#if email.erroDetalhes}
-                      <button
-                        class="btn btn-ghost btn-xs text-error"
-                        onclick={() => abrirModalDetalhes(email)}
-                      >
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                        </svg>
-                        Ver erro
-                      </button>
-                    {:else}
-                      <span class="text-base-content/50">-</span>
-                    {/if}
-                  </td>
-                  <td>
-                    <button
-                      class="btn btn-ghost btn-xs"
-                      onclick={() => abrirModalDetalhes(email)}
-                      title="Ver detalhes"
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {:else if filaEmails?.data !== undefined}
-        <div class="text-center py-8 text-base-content/50">
-          <p>Nenhum email na fila</p>
-        </div>
-      {:else}
-        <div class="text-center py-8">
-          <span class="loading loading-spinner loading-lg"></span>
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if filaEmails?.data && filaEmails.data.length > 0}
+				<div class="overflow-x-auto">
+					<table class="table-zebra table w-full">
+						<thead>
+							<tr>
+								<th>Destinatário</th>
+								<th>Assunto</th>
+								<th>Status</th>
+								<th>Tentativas</th>
+								<th>Criado em</th>
+								<th>Última tentativa</th>
+								<th>Erro</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each filaEmails.data as email}
+								<tr>
+									<td>
+										<div class="font-medium">{email.destinatario}</div>
+									</td>
+									<td>
+										<div class="max-w-xs truncate" title={email.assunto}>
+											{email.assunto}
+										</div>
+									</td>
+									<td>
+										<span class={getStatusBadgeClass(email.status)}>
+											{getStatusLabel(email.status)}
+										</span>
+									</td>
+									<td>{email.tentativas || 0}</td>
+									<td class="text-sm">{formatarData(email.criadoEm)}</td>
+									<td class="text-sm">
+										{formatarData(email.ultimaTentativa)}
+									</td>
+									<td>
+										{#if email.erroDetalhes}
+											<button
+												class="btn btn-xs text-error"
+												onclick={() => abrirModalDetalhes(email)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+													/>
+												</svg>
+												Ver erro
+											</button>
+										{:else}
+											<span class="text-base-content/50">-</span>
+										{/if}
+									</td>
+									<td>
+										<button
+											class="btn btn-xs"
+											onclick={() => abrirModalDetalhes(email)}
+											title="Ver detalhes"
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+												/>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+												/>
+											</svg>
+										</button>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{:else if filaEmails?.data !== undefined}
+				<div class="text-base-content/50 py-8 text-center">
+					<p>Nenhum email na fila</p>
+				</div>
+			{:else}
+				<div class="py-8 text-center">
+					<span class="loading loading-spinner loading-lg"></span>
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  <!-- Dicas de Troubleshooting -->
-  <div class="card bg-base-200 shadow-xl mt-6">
-    <div class="card-body">
-      <h2 class="card-title">🔍 Troubleshooting</h2>
-      <div class="space-y-2 text-sm">
-        <p>
-          <strong>Emails pendentes não estão sendo enviados?</strong>
-        </p>
-        <ul class="list-disc list-inside ml-4 space-y-1">
-          <li>Verifique se a configuração SMTP está ativa em Configurações de Email</li>
-          <li>Confirme se o cron job está rodando (verifique logs do Convex)</li>
-          <li>Clique em "Processar Fila Manualmente" para forçar o processamento</li>
-        </ul>
+	<!-- Dicas de Troubleshooting -->
+	<div class="card bg-base-200 mt-6 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title">🔍 Troubleshooting</h2>
+			<div class="space-y-2 text-sm">
+				<p>
+					<strong>Emails pendentes não estão sendo enviados?</strong>
+				</p>
+				<ul class="ml-4 list-inside list-disc space-y-1">
+					<li>Verifique se a configuração SMTP está ativa em Configurações de Email</li>
+					<li>Confirme se o cron job está rodando (verifique logs do Convex)</li>
+					<li>Clique em "Processar Fila Manualmente" para forçar o processamento</li>
+				</ul>
 
-        <p class="mt-4">
-          <strong>Emails com status "Falha"?</strong>
-        </p>
-        <ul class="list-disc list-inside ml-4 space-y-1">
-          <li>Verifique as credenciais SMTP em Configurações de Email</li>
-          <li>Confirme se o servidor SMTP está acessível</li>
-          <li>Verifique os logs do Convex para detalhes do erro</li>
-          <li>Teste a conexão SMTP na página de configurações</li>
-        </ul>
-      </div>
-    </div>
-  </div>
+				<p class="mt-4">
+					<strong>Emails com status "Falha"?</strong>
+				</p>
+				<ul class="ml-4 list-inside list-disc space-y-1">
+					<li>Verifique as credenciais SMTP em Configurações de Email</li>
+					<li>Confirme se o servidor SMTP está acessível</li>
+					<li>Verifique os logs do Convex para detalhes do erro</li>
+					<li>Teste a conexão SMTP na página de configurações</li>
+				</ul>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Detalhes do Email -->
 {#if modalDetalhesAberto && emailSelecionado}
-  <div class="modal modal-open">
-    <div class="modal-box max-w-4xl">
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-2xl flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-          Detalhes do Email
-        </h3>
-        <button class="btn btn-sm btn-circle btn-ghost" onclick={fecharModalDetalhes}>
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
+	<div class="modal modal-open">
+		<div class="modal-box max-w-4xl">
+			<div class="mb-4 flex items-center justify-between">
+				<h3 class="flex items-center gap-2 text-2xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+						/>
+					</svg>
+					Detalhes do Email
+				</h3>
+				<button class="btn btn-sm btn-circle btn-ghost" onclick={fecharModalDetalhes}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
 
-      <div class="space-y-4">
-        <!-- Status -->
-        <div class="flex items-center gap-2">
-          <span class="font-semibold">Status:</span>
-          <span class={getStatusBadgeClass(emailSelecionado.status)}>
-            {getStatusLabel(emailSelecionado.status)}
-          </span>
-        </div>
+			<div class="space-y-4">
+				<!-- Status -->
+				<div class="flex items-center gap-2">
+					<span class="font-semibold">Status:</span>
+					<span class={getStatusBadgeClass(emailSelecionado.status)}>
+						{getStatusLabel(emailSelecionado.status)}
+					</span>
+				</div>
 
-        <!-- Informações Principais -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold">Destinatário</span>
-            </label>
-            <div class="input input-bordered flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-              </svg>
-              {emailSelecionado.destinatario}
-            </div>
-          </div>
+				<!-- Informações Principais -->
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+					<div>
+						<label class="label">
+							<span class="label-text font-semibold">Destinatário</span>
+						</label>
+						<div class="input input-bordered flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-base-content/50 h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+								/>
+							</svg>
+							{emailSelecionado.destinatario}
+						</div>
+					</div>
 
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold">Tentativas</span>
-            </label>
-            <div class="input input-bordered flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
-              {emailSelecionado.tentativas || 0}
-            </div>
-          </div>
-        </div>
+					<div>
+						<label class="label">
+							<span class="label-text font-semibold">Tentativas</span>
+						</label>
+						<div class="input input-bordered flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-base-content/50 h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+								/>
+							</svg>
+							{emailSelecionado.tentativas || 0}
+						</div>
+					</div>
+				</div>
 
-        <!-- Assunto -->
-        <div>
-          <label class="label">
-            <span class="label-text font-semibold">Assunto</span>
-          </label>
-          <div class="input input-bordered">
-            {emailSelecionado.assunto}
-          </div>
-        </div>
+				<!-- Assunto -->
+				<div>
+					<label class="label">
+						<span class="label-text font-semibold">Assunto</span>
+					</label>
+					<div class="input input-bordered">
+						{emailSelecionado.assunto}
+					</div>
+				</div>
 
-        <!-- Datas -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold">Criado em</span>
-            </label>
-            <div class="input input-bordered flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-              {formatarData(emailSelecionado.criadoEm)}
-            </div>
-          </div>
+				<!-- Datas -->
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+					<div>
+						<label class="label">
+							<span class="label-text font-semibold">Criado em</span>
+						</label>
+						<div class="input input-bordered flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-base-content/50 h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+								/>
+							</svg>
+							{formatarData(emailSelecionado.criadoEm)}
+						</div>
+					</div>
 
-          {#if emailSelecionado.ultimaTentativa}
-            <div>
-              <label class="label">
-                <span class="label-text font-semibold">Última tentativa</span>
-              </label>
-              <div class="input input-bordered flex items-center gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                {formatarData(emailSelecionado.ultimaTentativa)}
-              </div>
-            </div>
-          {/if}
+					{#if emailSelecionado.ultimaTentativa}
+						<div>
+							<label class="label">
+								<span class="label-text font-semibold">Última tentativa</span>
+							</label>
+							<div class="input input-bordered flex items-center gap-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-base-content/50 h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+								{formatarData(emailSelecionado.ultimaTentativa)}
+							</div>
+						</div>
+					{/if}
 
-          {#if emailSelecionado.enviadoEm}
-            <div>
-              <label class="label">
-                <span class="label-text font-semibold">Enviado em</span>
-              </label>
-              <div class="input input-bordered flex items-center gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <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>
-                {formatarData(emailSelecionado.enviadoEm)}
-              </div>
-            </div>
-          {/if}
+					{#if emailSelecionado.enviadoEm}
+						<div>
+							<label class="label">
+								<span class="label-text font-semibold">Enviado em</span>
+							</label>
+							<div class="input input-bordered flex items-center gap-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-success h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<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>
+								{formatarData(emailSelecionado.enviadoEm)}
+							</div>
+						</div>
+					{/if}
 
-          {#if emailSelecionado.agendadaPara}
-            <div>
-              <label class="label">
-                <span class="label-text font-semibold">Agendado para</span>
-              </label>
-              <div class="input input-bordered flex items-center gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                </svg>
-                {formatarData(emailSelecionado.agendadaPara)}
-              </div>
-            </div>
-          {/if}
-        </div>
+					{#if emailSelecionado.agendadaPara}
+						<div>
+							<label class="label">
+								<span class="label-text font-semibold">Agendado para</span>
+							</label>
+							<div class="input input-bordered flex items-center gap-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-info h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+									/>
+								</svg>
+								{formatarData(emailSelecionado.agendadaPara)}
+							</div>
+						</div>
+					{/if}
+				</div>
 
-        <!-- Erro Detalhado -->
-        {#if emailSelecionado.erroDetalhes}
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold text-error">Detalhes do Erro</span>
-            </label>
-            <div class="bg-error/10 border border-error/20 rounded-lg p-4">
-              <pre class="text-sm text-error whitespace-pre-wrap break-words">{emailSelecionado.erroDetalhes}</pre>
-            </div>
-          </div>
-        {/if}
+				<!-- Erro Detalhado -->
+				{#if emailSelecionado.erroDetalhes}
+					<div>
+						<label class="label">
+							<span class="label-text text-error font-semibold">Detalhes do Erro</span>
+						</label>
+						<div class="bg-error/10 border-error/20 rounded-lg border p-4">
+							<pre
+								class="text-error text-sm break-words whitespace-pre-wrap">{emailSelecionado.erroDetalhes}</pre>
+						</div>
+					</div>
+				{/if}
 
-        <!-- Corpo do Email (Preview) -->
-        {#if emailSelecionado.corpo}
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold">Preview do Email</span>
-            </label>
-            <div class="border border-base-300 rounded-lg p-4 bg-base-200 max-h-64 overflow-y-auto">
-              {@html emailSelecionado.corpo}
-            </div>
-          </div>
-        {/if}
-      </div>
+				<!-- Corpo do Email (Preview) -->
+				{#if emailSelecionado.corpo}
+					<div>
+						<label class="label">
+							<span class="label-text font-semibold">Preview do Email</span>
+						</label>
+						<div class="border-base-300 bg-base-200 max-h-64 overflow-y-auto rounded-lg border p-4">
+							{@html emailSelecionado.corpo}
+						</div>
+					</div>
+				{/if}
+			</div>
 
-      <div class="modal-action">
-        <button class="btn btn-primary" onclick={fecharModalDetalhes}>
-          Fechar
-        </button>
-      </div>
-    </div>
-    <div class="modal-backdrop" onclick={fecharModalDetalhes}></div>
-  </div>
+			<div class="modal-action">
+				<button class="btn btn-primary" onclick={fecharModalDetalhes}> Fechar </button>
+			</div>
+		</div>
+		<div class="modal-backdrop" onclick={fecharModalDetalhes}></div>
+	</div>
 {/if}
-
diff --git a/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte b/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
index 274680b..32b2e99 100644
--- a/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
@@ -30,7 +30,7 @@
 				</p>
 			</div>
 		</div>
-		<a href={resolve('/ti')} class="btn btn-ghost">
+		<a href={resolve('/ti')} class="btn">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="h-5 w-5"
diff --git a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
index f6f233c..89f0240 100644
--- a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
@@ -1,2271 +1,2024 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
-
-  // Tipos para agendamentos
-  type TipoAgendamento = "email" | "chat";
-  type StatusAgendamento = "agendado" | "enviado" | "cancelado";
-
-  interface AgendamentoEmail {
-    _id: Id<"notificacoesEmail">;
-    _creationTime: number;
-    destinatario: string;
-    destinatarioId: Id<"usuarios"> | undefined;
-    assunto: string;
-    corpo: string;
-    templateId: Id<"templatesMensagens"> | undefined;
-    status: "pendente" | "enviando" | "enviado" | "falha";
-    agendadaPara: number | undefined;
-    enviadoPor: Id<"usuarios">;
-    criadoEm: number;
-    enviadoEm: number | undefined;
-    destinatarioInfo: Doc<"usuarios"> | null;
-    templateInfo: Doc<"templatesMensagens"> | null;
-  }
-
-  interface AgendamentoChat {
-    _id: Id<"mensagens">;
-    _creationTime: number;
-    conversaId: Id<"conversas">;
-    remetenteId: Id<"usuarios">;
-    conteudo: string;
-    agendadaPara: number | undefined;
-    enviadaEm: number;
-    conversaInfo: Doc<"conversas"> | null;
-    destinatarioInfo: Doc<"usuarios"> | null;
-  }
-
-  type Agendamento =
-    | { tipo: "email"; dados: AgendamentoEmail }
-    | { tipo: "chat"; dados: AgendamentoChat };
-
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
-
-  // Queries
-  const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
-  const usuariosQuery = useQuery(api.usuarios.listar, {});
-
-  // Mapa de emailIds para rastrear status
-  let emailIdsRastreados = $state<Set<string>>(new Set());
-
-  // Query para buscar status dos emails (só executa quando há IDs)
-  const emailIdsArray = $derived(
-    Array.from(emailIdsRastreados).map((id) => id as Id<"notificacoesEmail">),
-  );
-  // Usar função para evitar execução quando array está vazio
-  const emailsStatusQuery = $derived.by(() => {
-    if (emailIdsArray.length === 0) return null;
-    return useQuery(api.email.buscarEmailsPorIds, { emailIds: emailIdsArray });
-  });
-
-  // Queries para agendamentos
-  const agendamentosEmailQuery = useQuery(
-    api.email.listarAgendamentosEmail,
-    {},
-  );
-  const agendamentosChatQuery = useQuery(api.chat.listarAgendamentosChat, {});
-
-  // Filtro de agendamentos
-  type FiltroAgendamento = "todos" | "agendados" | "enviados";
-  let filtroAgendamento = $state<FiltroAgendamento>("todos");
-
-  // Extrair dados das queries de forma robusta
-  const templates = $derived.by(() => {
-    if (templatesQuery === undefined || templatesQuery === null) {
-      return [];
-    }
-    if ("data" in templatesQuery && templatesQuery.data !== undefined) {
-      return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
-    }
-    if (Array.isArray(templatesQuery)) {
-      return templatesQuery;
-    }
-    return [];
-  });
-
-  const usuarios = $derived.by(() => {
-    if (usuariosQuery === undefined || usuariosQuery === null) {
-      return [];
-    }
-    if ("data" in usuariosQuery && usuariosQuery.data !== undefined) {
-      return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
-    }
-    if (Array.isArray(usuariosQuery)) {
-      return usuariosQuery;
-    }
-    return [];
-  });
-
-  // Estados de carregamento e erro
-  const carregandoTemplates = $derived(
-    templatesQuery === undefined || templatesQuery === null,
-  );
-  const carregandoUsuarios = $derived(
-    usuariosQuery === undefined || usuariosQuery === null,
-  );
-
-  // Verificar erros de forma mais robusta
-  const erroTemplates = $derived.by(() => {
-    if (templatesQuery === undefined || templatesQuery === null) return false;
-    // Verificar se é um objeto com propriedade error
-    if (typeof templatesQuery === "object" && "error" in templatesQuery) {
-      return (
-        templatesQuery.error !== undefined && templatesQuery.error !== null
-      );
-    }
-    return false;
-  });
-
-  const erroUsuarios = $derived.by(() => {
-    if (usuariosQuery === undefined || usuariosQuery === null) return false;
-    if (typeof usuariosQuery === "object" && "error" in usuariosQuery) {
-      return usuariosQuery.error !== undefined && usuariosQuery.error !== null;
-    }
-    return false;
-  });
-
-  // Log para debug (remover depois se necessário)
-  $effect(() => {
-    if (templatesQuery !== undefined && templatesQuery !== null) {
-      console.log("Templates Query:", templatesQuery);
-      console.log("Templates Extraídos:", templates);
-    }
-  });
-
-  let destinatarioId = $state("");
-  let enviarParaTodos = $state(false);
-  let canal = $state<"chat" | "email" | "ambos">("chat");
-  let templateId = $state("");
-  let mensagemPersonalizada = $state("");
-  let usarTemplate = $state(true);
-  let processando = $state(false);
-  let criandoTemplates = $state(false);
-  let progressoEnvio = $state({ total: 0, enviados: 0, falhas: 0 });
-
-  // Estrutura de dados para logs de envio
-  type StatusLog = "sucesso" | "erro" | "fila" | "info" | "enviando";
-  type TipoLog = "chat" | "email";
-  type LogEnvio = {
-    timestamp: number;
-    tipo: TipoLog;
-    destinatario: string;
-    status: StatusLog;
-    mensagem: string;
-    emailId?: string; // Para emails, guardar o ID para rastrear status
-  };
-
-  let logsEnvio = $state<LogEnvio[]>([]);
-  let terminalScrollRef: HTMLDivElement | null = $state(null);
-
-  // Estados para agendamento
-  let agendarEnvio = $state(false);
-  let dataAgendamento = $state("");
-  let horaAgendamento = $state("");
-
-  // Calcular data/hora mínimas
-  const now = new Date();
-  const minDate = format(now, "yyyy-MM-dd");
-
-  // Hora mínima recalculada baseada na data selecionada
-  const horaMinima = $derived.by(() => {
-    if (!dataAgendamento) return format(now, "HH:mm");
-    const hoje = format(now, "yyyy-MM-dd");
-    if (dataAgendamento === hoje) {
-      return format(now, "HH:mm");
-    }
-    return undefined; // Sem restrição se for data futura
-  });
-
-  function getPreviewAgendamento(): string {
-    if (!agendarEnvio || !dataAgendamento || !horaAgendamento) return "";
-    try {
-      const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
-      return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
-    } catch {
-      return "";
-    }
-  }
-
-  // Estados para modal de novo template
-  let modalNovoTemplateAberto = $state(false);
-  let codigoTemplate = $state("");
-  let nomeTemplate = $state("");
-  let tituloTemplate = $state("");
-  let corpoTemplate = $state("");
-  let variaveisTemplate = $state("");
-  let criandoNovoTemplate = $state(false);
-
-  // Estado para mensagens de feedback
-  let mensagem = $state<{
-    tipo: "success" | "error" | "info";
-    texto: string;
-  } | null>(null);
-
-  const templateSelecionado = $derived(
-    templates.find((t) => t._id === templateId),
-  );
-
-  // Função para renderizar template com variáveis (similar à função do backend)
-  function renderizarTemplate(
-    template: string,
-    variaveis: Record<string, string>,
-  ): string {
-    let resultado = template;
-
-    for (const [chave, valor] of Object.entries(variaveis)) {
-      const placeholder = `{{${chave}}}`;
-      resultado = resultado.replace(new RegExp(placeholder, "g"), valor);
-    }
-
-    return resultado;
-  }
-
-  // Função para mostrar mensagens
-  function mostrarMensagem(tipo: "success" | "error" | "info", texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 5000);
-  }
-
-  // Função para adicionar log ao terminal
-  function adicionarLog(
-    tipo: TipoLog,
-    destinatario: string,
-    status: StatusLog,
-    mensagem: string,
-    emailId?: string,
-  ) {
-    logsEnvio = [
-      ...logsEnvio,
-      {
-        timestamp: Date.now(),
-        tipo,
-        destinatario,
-        status,
-        mensagem,
-        emailId,
-      },
-    ];
-
-    // Adicionar emailId ao rastreamento se fornecido
-    if (emailId) {
-      emailIdsRastreados = new Set([...emailIdsRastreados, emailId]);
-    }
-
-    // Auto-scroll para o final
-    setTimeout(() => {
-      if (terminalScrollRef) {
-        terminalScrollRef.scrollTop = terminalScrollRef.scrollHeight;
-      }
-    }, 10);
-  }
-
-  // Atualizar logs quando status dos emails mudar
-  $effect(() => {
-    if (!emailsStatusQuery || emailsStatusQuery === undefined) return;
-
-    // Extrair dados da query
-    const emails = Array.isArray(emailsStatusQuery)
-      ? emailsStatusQuery
-      : "data" in emailsStatusQuery && Array.isArray(emailsStatusQuery.data)
-        ? emailsStatusQuery.data
-        : [];
-
-    if (emails.length === 0) return;
-
-    for (const email of emails) {
-      if (!email) continue;
-
-      // Encontrar logs relacionados a este email
-      const logsRelacionados = logsEnvio.filter(
-        (log) => log.emailId === email._id,
-      );
-
-      for (const log of logsRelacionados) {
-        // Verificar se o status mudou
-        const novoStatus: StatusLog =
-          email.status === "enviado"
-            ? "sucesso"
-            : email.status === "falha"
-              ? "erro"
-              : email.status === "enviando"
-                ? "enviando"
-                : email.status === "pendente"
-                  ? "fila"
-                  : "info";
-
-        // Se o status mudou, atualizar o log
-        if (log.status !== novoStatus) {
-          const indice = logsEnvio.findIndex((l) => l === log);
-          if (indice !== -1) {
-            const novaMensagem =
-              email.status === "enviado"
-                ? "Email enviado com sucesso"
-                : email.status === "falha"
-                  ? `Falha ao enviar: ${email.erroDetalhes || "Erro desconhecido"}`
-                  : email.status === "enviando"
-                    ? "Enviando email..."
-                    : email.status === "pendente"
-                      ? "Email em fila de envio"
-                      : log.mensagem;
-
-            logsEnvio = logsEnvio.map((l, i) =>
-              i === indice
-                ? { ...l, status: novoStatus, mensagem: novaMensagem }
-                : l,
-            );
-          }
-        }
-      }
-    }
-  });
-
-  // Função para limpar logs
-  function limparLogs() {
-    logsEnvio = [];
-    emailIdsRastreados = new Set();
-  }
-
-  // Extrair e processar agendamentos
-  const agendamentosEmail = $derived.by(() => {
-    if (!agendamentosEmailQuery || agendamentosEmailQuery === undefined)
-      return [];
-    const dados = Array.isArray(agendamentosEmailQuery)
-      ? agendamentosEmailQuery
-      : "data" in agendamentosEmailQuery &&
-          Array.isArray(agendamentosEmailQuery.data)
-        ? agendamentosEmailQuery.data
-        : [];
-    return dados as AgendamentoEmail[];
-  });
-
-  const agendamentosChat = $derived.by(() => {
-    if (!agendamentosChatQuery || agendamentosChatQuery === undefined)
-      return [];
-    const dados = Array.isArray(agendamentosChatQuery)
-      ? agendamentosChatQuery
-      : "data" in agendamentosChatQuery &&
-          Array.isArray(agendamentosChatQuery.data)
-        ? agendamentosChatQuery.data
-        : [];
-    return dados as AgendamentoChat[];
-  });
-
-  // Combinar e processar agendamentos
-  const todosAgendamentos = $derived.by(() => {
-    const agendamentos: Agendamento[] = [];
-
-    for (const email of agendamentosEmail) {
-      if (email.agendadaPara) {
-        agendamentos.push({
-          tipo: "email",
-          dados: email,
-        });
-      }
-    }
-
-    for (const chat of agendamentosChat) {
-      if (chat.agendadaPara) {
-        agendamentos.push({
-          tipo: "chat",
-          dados: chat,
-        });
-      }
-    }
-
-    // Ordenar: futuros primeiro (mais próximos primeiro), depois passados (mais recentes primeiro)
-    return agendamentos.sort((a, b) => {
-      const timestampA =
-        a.tipo === "email"
-          ? (a.dados.agendadaPara ?? 0)
-          : (a.dados.agendadaPara ?? 0);
-      const timestampB =
-        b.tipo === "email"
-          ? (b.dados.agendadaPara ?? 0)
-          : (b.dados.agendadaPara ?? 0);
-      const agora = Date.now();
-
-      const aFuturo = timestampA > agora;
-      const bFuturo = timestampB > agora;
-
-      // Futuros primeiro
-      if (aFuturo && !bFuturo) return -1;
-      if (!aFuturo && bFuturo) return 1;
-
-      // Dentro do mesmo grupo, ordenar por timestamp
-      if (aFuturo) {
-        // Futuros: mais próximos primeiro
-        return timestampA - timestampB;
-      } else {
-        // Passados: mais recentes primeiro
-        return timestampB - timestampA;
-      }
-    });
-  });
-
-  // Filtrar agendamentos
-  const agendamentosFiltrados = $derived.by(() => {
-    if (filtroAgendamento === "todos") return todosAgendamentos;
-
-    return todosAgendamentos.filter((ag) => {
-      const status = obterStatusAgendamento(ag);
-      if (filtroAgendamento === "agendados") return status === "agendado";
-      if (filtroAgendamento === "enviados") return status === "enviado";
-      return true;
-    });
-  });
-
-  // Função para obter status do agendamento
-  function obterStatusAgendamento(agendamento: Agendamento): StatusAgendamento {
-    if (agendamento.tipo === "email") {
-      const email = agendamento.dados;
-      if (email.status === "enviado") return "enviado";
-      if (email.agendadaPara && email.agendadaPara <= Date.now())
-        return "enviado";
-      return "agendado";
-    } else {
-      const chat = agendamento.dados;
-      if (chat.agendadaPara && chat.agendadaPara <= Date.now())
-        return "enviado";
-      return "agendado";
-    }
-  }
-
-  // Função para cancelar agendamento
-  async function cancelarAgendamento(agendamento: Agendamento) {
-    if (!confirm("Tem certeza que deseja cancelar este agendamento?")) {
-      return;
-    }
-
-    try {
-      if (agendamento.tipo === "email") {
-        const resultado = await client.mutation(
-          api.email.cancelarAgendamentoEmail,
-          {
-            emailId: agendamento.dados._id,
-          },
-        );
-        if (resultado.sucesso) {
-          mostrarMensagem(
-            "success",
-            "Agendamento de email cancelado com sucesso!",
-          );
-        } else {
-          mostrarMensagem(
-            "error",
-            resultado.erro || "Erro ao cancelar agendamento",
-          );
-        }
-      } else {
-        const resultado = await client.mutation(
-          api.chat.cancelarMensagemAgendada,
-          {
-            mensagemId: agendamento.dados._id,
-          },
-        );
-        if (resultado.sucesso) {
-          mostrarMensagem(
-            "success",
-            "Agendamento de chat cancelado com sucesso!",
-          );
-        } else {
-          mostrarMensagem(
-            "error",
-            resultado.erro || "Erro ao cancelar agendamento",
-          );
-        }
-      }
-    } catch (error) {
-      const erro = error instanceof Error ? error.message : "Erro desconhecido";
-      mostrarMensagem("error", `Erro ao cancelar agendamento: ${erro}`);
-    }
-  }
-
-  // Função para obter nome do destinatário
-  function obterNomeDestinatario(agendamento: Agendamento): string {
-    if (agendamento.tipo === "email") {
-      return (
-        agendamento.dados.destinatarioInfo?.nome ||
-        agendamento.dados.destinatario ||
-        "Usuário"
-      );
-    } else {
-      return agendamento.dados.destinatarioInfo?.nome || "Usuário";
-    }
-  }
-
-  // Função para formatar data/hora do agendamento
-  function formatarDataAgendamento(agendamento: Agendamento): string {
-    const timestamp =
-      agendamento.tipo === "email"
-        ? agendamento.dados.agendadaPara
-        : agendamento.dados.agendadaPara;
-
-    if (!timestamp) return "N/A";
-
-    return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
-      locale: ptBR,
-    });
-  }
-
-  // Função para formatar timestamp
-  function formatarTimestamp(timestamp: number): string {
-    return format(new Date(timestamp), "HH:mm:ss", { locale: ptBR });
-  }
-
-  // Função para obter cor do status
-  function obterCorStatus(status: StatusLog): string {
-    switch (status) {
-      case "sucesso":
-        return "text-success";
-      case "erro":
-        return "text-error";
-      case "fila":
-        return "text-warning";
-      case "enviando":
-        return "text-info";
-      case "info":
-        return "text-info";
-      default:
-        return "text-base-content";
-    }
-  }
-
-  async function criarTemplatesPadrao() {
-    if (criandoTemplates) return;
-
-    criandoTemplates = true;
-    try {
-      const resultado = await client.mutation(
-        api.templatesMensagens.criarTemplatesPadrao,
-        {},
-      );
-      if (resultado.sucesso) {
-        mostrarMensagem(
-          "success",
-          "Templates padrão criados com sucesso! A página será recarregada.",
-        );
-        setTimeout(() => {
-          window.location.reload();
-        }, 2000);
-      } else {
-        mostrarMensagem("error", "Erro ao criar templates padrão.");
-      }
-    } catch (error) {
-      const erro = error instanceof Error ? error.message : "Erro desconhecido";
-      console.error("Erro ao criar templates:", error);
-      mostrarMensagem("error", "Erro ao criar templates: " + erro);
-    } finally {
-      criandoTemplates = false;
-    }
-  }
-
-  function abrirModalNovoTemplate() {
-    modalNovoTemplateAberto = true;
-    // Limpar campos
-    codigoTemplate = "";
-    nomeTemplate = "";
-    tituloTemplate = "";
-    corpoTemplate = "";
-    variaveisTemplate = "";
-  }
-
-  function fecharModalNovoTemplate() {
-    modalNovoTemplateAberto = false;
-  }
-
-  async function salvarNovoTemplate() {
-    if (!currentUser?.data) {
-      mostrarMensagem(
-        "error",
-        "Você precisa estar autenticado para criar templates.",
-      );
-      return;
-    }
-
-    // Validações
-    if (!codigoTemplate.trim()) {
-      mostrarMensagem("error", "O código do template é obrigatório.");
-      return;
-    }
-    if (!nomeTemplate.trim()) {
-      mostrarMensagem("error", "O nome do template é obrigatório.");
-      return;
-    }
-    if (!tituloTemplate.trim()) {
-      mostrarMensagem("error", "O título do template é obrigatório.");
-      return;
-    }
-    if (!corpoTemplate.trim()) {
-      mostrarMensagem("error", "O corpo do template é obrigatório.");
-      return;
-    }
-
-    // Processar variáveis (separadas por vírgula ou espaço)
-    const variaveis = variaveisTemplate
-      .split(/[,;\s]+/)
-      .map((v) => v.trim())
-      .filter((v) => v.length > 0);
-
-    criandoNovoTemplate = true;
-    try {
-      const resultado = await client.mutation(
-        api.templatesMensagens.criarTemplate,
-        {
-          codigo: codigoTemplate.trim().toUpperCase().replace(/\s+/g, "_"),
-          nome: nomeTemplate.trim(),
-          titulo: tituloTemplate.trim(),
-          corpo: corpoTemplate.trim(),
-          variaveis: variaveis.length > 0 ? variaveis : undefined,
-          criadoPorId: currentUser.data._id as Id<"usuarios">,
-        },
-      );
-
-      if (resultado.sucesso) {
-        mostrarMensagem("success", "Template criado com sucesso!");
-        fecharModalNovoTemplate();
-        // Recarregar a página para atualizar a lista
-        setTimeout(() => {
-          window.location.reload();
-        }, 1500);
-      } else {
-        mostrarMensagem(
-          "error",
-          "Erro ao criar template: " + (resultado.erro || "Erro desconhecido"),
-        );
-      }
-    } catch (error) {
-      const erro = error instanceof Error ? error.message : "Erro desconhecido";
-      console.error("Erro ao criar template:", error);
-      mostrarMensagem("error", "Erro ao criar template: " + erro);
-    } finally {
-      criandoNovoTemplate = false;
-    }
-  }
-
-  async function enviarNotificacao() {
-    if (!enviarParaTodos && !destinatarioId) {
-      mostrarMensagem(
-        "error",
-        "Selecione um destinatário ou marque 'Enviar para todos'",
-      );
-      return;
-    }
-
-    if (usarTemplate && !templateId) {
-      mostrarMensagem("error", "Selecione um template");
-      return;
-    }
-
-    if (!usarTemplate && !mensagemPersonalizada.trim()) {
-      mostrarMensagem("error", "Digite uma mensagem");
-      return;
-    }
-
-    // Validar agendamento se marcado
-    let agendadaPara: number | undefined = undefined;
-    if (agendarEnvio) {
-      if (!dataAgendamento || !horaAgendamento) {
-        mostrarMensagem("error", "Preencha a data e hora para agendamento");
-        return;
-      }
-
-      try {
-        const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
-        if (dataHora.getTime() <= Date.now()) {
-          mostrarMensagem("error", "A data e hora devem ser futuras");
-          return;
-        }
-        agendadaPara = dataHora.getTime();
-      } catch (error) {
-        mostrarMensagem("error", "Data ou hora inválida");
-        return;
-      }
-    }
-
-    processando = true;
-    progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
-
-    // Limpar logs anteriores quando iniciar novo envio
-    logsEnvio = [];
-    emailIdsRastreados = new Set();
-
-    try {
-      // Obter lista de destinatários
-      const destinatarios: typeof usuarios = enviarParaTodos
-        ? usuarios
-        : usuarios.filter((u) => u._id === destinatarioId);
-
-      if (destinatarios.length === 0) {
-        adicionarLog(
-          "email",
-          "Sistema",
-          "erro",
-          "Nenhum destinatário encontrado",
-        );
-        mostrarMensagem("error", "Nenhum destinatário encontrado");
-        return;
-      }
-
-      progressoEnvio.total = destinatarios.length;
-
-      // Log inicial
-      const tipoMensagem = usarTemplate
-        ? `Template: ${templateSelecionado?.nome || ""}`
-        : "Mensagem personalizada";
-      const destinatariosText = enviarParaTodos
-        ? `Todos os usuários (${destinatarios.length})`
-        : destinatarios.map((d) => d.nome).join(", ");
-      adicionarLog(
-        "email",
-        "Sistema",
-        "info",
-        `Iniciando envio de notificação via ${canal} para ${destinatariosText} - ${tipoMensagem}`,
-      );
-
-      // Se for envio para um único usuário
-      if (destinatarios.length === 1) {
-        const destinatario = destinatarios[0];
-        let resultadoChat = null;
-        let resultadoEmail = null;
-
-        // ENVIAR PARA CHAT
-        if (canal === "chat" || canal === "ambos") {
-          try {
-            adicionarLog(
-              "chat",
-              destinatario.nome,
-              "enviando",
-              "Criando/buscando conversa...",
-            );
-            const conversaId = await client.mutation(
-              api.chat.criarOuBuscarConversaIndividual,
-              { outroUsuarioId: destinatario._id as Id<"usuarios"> },
-            );
-
-            if (conversaId) {
-              const mensagem =
-                usarTemplate && templateSelecionado
-                  ? renderizarTemplate(templateSelecionado.corpo, {
-                      nome: destinatario.nome,
-                      matricula: destinatario.matricula || "",
-                    })
-                  : mensagemPersonalizada;
-
-              if (agendadaPara) {
-                // Agendar mensagem
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "info",
-                  "Agendando mensagem...",
-                );
-                resultadoChat = await client.mutation(
-                  api.chat.agendarMensagem,
-                  {
-                    conversaId: conversaId,
-                    conteudo: mensagem,
-                    agendadaPara: agendadaPara,
-                  },
-                );
-                const dataFormatada = format(
-                  new Date(agendadaPara),
-                  "dd/MM/yyyy 'às' HH:mm",
-                  { locale: ptBR },
-                );
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "sucesso",
-                  `Mensagem agendada para ${dataFormatada}`,
-                );
-              } else {
-                // Envio imediato
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "enviando",
-                  "Enviando mensagem...",
-                );
-                resultadoChat = await client.mutation(api.chat.enviarMensagem, {
-                  conversaId: conversaId,
-                  conteudo: mensagem,
-                  tipo: "texto",
-                  permitirNotificacaoParaSiMesmo: true,
-                });
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "sucesso",
-                  "Mensagem enviada com sucesso",
-                );
-              }
-            } else {
-              adicionarLog(
-                "chat",
-                destinatario.nome,
-                "erro",
-                "Falha ao criar/buscar conversa",
-              );
-            }
-          } catch (error) {
-            const erro =
-              error instanceof Error ? error.message : "Erro desconhecido";
-            console.error("Erro ao enviar chat:", error);
-            adicionarLog("chat", destinatario.nome, "erro", `Erro: ${erro}`);
-          }
-        }
-
-        // ENVIAR PARA EMAIL
-        if (canal === "email" || canal === "ambos") {
-          if (destinatario.email) {
-            try {
-              adicionarLog(
-                "email",
-                destinatario.nome,
-                "enviando",
-                `Enfileirando email para ${destinatario.email}...`,
-              );
-              if (usarTemplate && templateId) {
-                const template = templateSelecionado;
-                if (template) {
-                  const emailId = await client.action(
-                    api.email.enviarEmailComTemplate,
-                    {
-                      destinatario: destinatario.email,
-                      destinatarioId: destinatario._id as Id<"usuarios">,
-                      templateCodigo: template.codigo,
-                      variaveis: {
-                        nome: destinatario.nome,
-                        matricula: destinatario.matricula,
-                      },
-                      enviadoPor: currentUser.data._id as Id<"usuarios">,
-                      agendadaPara: agendadaPara,
-                    },
-                  );
-                  if (emailId) {
-                    if (agendadaPara) {
-                      const dataFormatada = format(
-                        new Date(agendadaPara),
-                        "dd/MM/yyyy 'às' HH:mm",
-                        { locale: ptBR },
-                      );
-                      adicionarLog(
-                        "email",
-                        destinatario.nome,
-                        "fila",
-                        `Email agendado para ${dataFormatada}`,
-                        emailId,
-                      );
-                    } else {
-                      adicionarLog(
-                        "email",
-                        destinatario.nome,
-                        "fila",
-                        "Email enfileirado para envio",
-                        emailId,
-                      );
-                    }
-                  } else {
-                    adicionarLog(
-                      "email",
-                      destinatario.nome,
-                      "erro",
-                      "Falha ao enfileirar email",
-                    );
-                  }
-                } else {
-                  adicionarLog(
-                    "email",
-                    destinatario.nome,
-                    "erro",
-                    "Template não encontrado",
-                  );
-                }
-              } else {
-                const emailId = await client.mutation(
-                  api.email.enfileirarEmail,
-                  {
-                    destinatario: destinatario.email,
-                    destinatarioId: destinatario._id as Id<"usuarios">,
-                    assunto: "Notificação do Sistema",
-                    corpo: mensagemPersonalizada,
-                    enviadoPor: currentUser.data._id as Id<"usuarios">,
-                    agendadaPara: agendadaPara,
-                  },
-                );
-                if (emailId) {
-                  resultadoEmail = { sucesso: true, emailId };
-                  if (agendadaPara) {
-                    const dataFormatada = format(
-                      new Date(agendadaPara),
-                      "dd/MM/yyyy 'às' HH:mm",
-                      { locale: ptBR },
-                    );
-                    adicionarLog(
-                      "email",
-                      destinatario.nome,
-                      "fila",
-                      `Email agendado para ${dataFormatada}`,
-                      emailId,
-                    );
-                  } else {
-                    adicionarLog(
-                      "email",
-                      destinatario.nome,
-                      "fila",
-                      "Email enfileirado para envio",
-                      emailId,
-                    );
-                  }
-                } else {
-                  adicionarLog(
-                    "email",
-                    destinatario.nome,
-                    "erro",
-                    "Falha ao enfileirar email",
-                  );
-                }
-              }
-            } catch (error) {
-              const erro =
-                error instanceof Error ? error.message : "Erro desconhecido";
-              console.error("Erro ao enviar email:", error);
-              adicionarLog("email", destinatario.nome, "erro", `Erro: ${erro}`);
-            }
-          } else {
-            adicionarLog(
-              "email",
-              destinatario.nome,
-              "erro",
-              "Destinatário não possui email cadastrado",
-            );
-          }
-        }
-
-        // Feedback de sucesso
-        let mensagemSucesso = agendadaPara
-          ? `Notificação agendada com sucesso!`
-          : "Notificação enviada com sucesso!";
-        if (agendadaPara) {
-          const dataFormatada = format(
-            new Date(agendadaPara),
-            "dd/MM/yyyy 'às' HH:mm",
-            { locale: ptBR },
-          );
-          mensagemSucesso += ` Será enviada em: ${dataFormatada}`;
-        } else {
-          if (canal === "ambos") {
-            if (resultadoChat && resultadoEmail) {
-              mensagemSucesso = "Notificação enviada para Chat e Email!";
-            } else if (resultadoChat) {
-              mensagemSucesso = "Notificação enviada para Chat. Email falhou.";
-            } else if (resultadoEmail) {
-              mensagemSucesso = "Notificação enviada para Email. Chat falhou.";
-            }
-          } else if (canal === "chat" && resultadoChat) {
-            mensagemSucesso = "Mensagem enviada no Chat!";
-          } else if (canal === "email" && resultadoEmail) {
-            mensagemSucesso = "Email enfileirado para envio!";
-          }
-        }
-
-        mostrarMensagem("success", mensagemSucesso);
-        progressoEnvio.enviados = 1;
-      } else {
-        // ENVIO EM MASSA
-        let sucessosChat = 0;
-        let sucessosEmail = 0;
-        let falhasChat = 0;
-        let falhasEmail = 0;
-
-        adicionarLog(
-          "email",
-          "Sistema",
-          "info",
-          `Processando ${destinatarios.length} destinatários...`,
-        );
-
-        for (const destinatario of destinatarios) {
-          try {
-            // ENVIAR PARA CHAT
-            if (canal === "chat" || canal === "ambos") {
-              try {
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "enviando",
-                  "Processando...",
-                );
-                const conversaId = await client.mutation(
-                  api.chat.criarOuBuscarConversaIndividual,
-                  { outroUsuarioId: destinatario._id as Id<"usuarios"> },
-                );
-
-                if (conversaId) {
-                  // Renderizar template com variáveis do destinatário
-                  const mensagem =
-                    usarTemplate && templateSelecionado
-                      ? renderizarTemplate(templateSelecionado.corpo, {
-                          nome: destinatario.nome,
-                          matricula: destinatario.matricula || "",
-                        })
-                      : mensagemPersonalizada;
-
-                  if (agendadaPara) {
-                    await client.mutation(api.chat.agendarMensagem, {
-                      conversaId: conversaId,
-                      conteudo: mensagem,
-                      agendadaPara: agendadaPara,
-                    });
-                    const dataFormatada = format(
-                      new Date(agendadaPara),
-                      "dd/MM/yyyy 'às' HH:mm",
-                      { locale: ptBR },
-                    );
-                    adicionarLog(
-                      "chat",
-                      destinatario.nome,
-                      "sucesso",
-                      `Agendado para ${dataFormatada}`,
-                    );
-                  } else {
-                    await client.mutation(api.chat.enviarMensagem, {
-                      conversaId: conversaId,
-                      conteudo: mensagem,
-                      tipo: "texto",
-                      permitirNotificacaoParaSiMesmo: true,
-                    });
-                    adicionarLog(
-                      "chat",
-                      destinatario.nome,
-                      "sucesso",
-                      "Enviado com sucesso",
-                    );
-                  }
-                  sucessosChat++;
-                } else {
-                  adicionarLog(
-                    "chat",
-                    destinatario.nome,
-                    "erro",
-                    "Falha ao criar/buscar conversa",
-                  );
-                  falhasChat++;
-                }
-              } catch (error) {
-                const erro =
-                  error instanceof Error ? error.message : "Erro desconhecido";
-                console.error(
-                  `Erro ao enviar chat para ${destinatario.nome}:`,
-                  error,
-                );
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "erro",
-                  `Erro: ${erro}`,
-                );
-                falhasChat++;
-              }
-            }
-
-            // ENVIAR PARA EMAIL
-            if (canal === "email" || canal === "ambos") {
-              if (destinatario.email) {
-                try {
-                  adicionarLog(
-                    "email",
-                    destinatario.nome,
-                    "enviando",
-                    `Enfileirando email para ${destinatario.email}...`,
-                  );
-                  if (usarTemplate && templateId) {
-                    const template = templateSelecionado;
-                    if (template) {
-                      const emailId = await client.action(
-                        api.email.enviarEmailComTemplate,
-                        {
-                          destinatario: destinatario.email,
-                          destinatarioId: destinatario._id as Id<"usuarios">,
-                          templateCodigo: template.codigo,
-                          variaveis: {
-                            nome: destinatario.nome,
-                            matricula: destinatario.matricula || "",
-                          },
-                          enviadoPor: currentUser.data._id as Id<"usuarios">,
-                          agendadaPara: agendadaPara,
-                        },
-                      );
-                      if (emailId) {
-                        if (agendadaPara) {
-                          const dataFormatada = format(
-                            new Date(agendadaPara),
-                            "dd/MM/yyyy 'às' HH:mm",
-                            { locale: ptBR },
-                          );
-                          adicionarLog(
-                            "email",
-                            destinatario.nome,
-                            "fila",
-                            `Agendado para ${dataFormatada}`,
-                            emailId,
-                          );
-                        } else {
-                          adicionarLog(
-                            "email",
-                            destinatario.nome,
-                            "fila",
-                            "Enfileirado para envio",
-                            emailId,
-                          );
-                        }
-                        sucessosEmail++;
-                      } else {
-                        adicionarLog(
-                          "email",
-                          destinatario.nome,
-                          "erro",
-                          "Falha ao enfileirar email",
-                        );
-                        falhasEmail++;
-                      }
-                    } else {
-                      adicionarLog(
-                        "email",
-                        destinatario.nome,
-                        "erro",
-                        "Template não encontrado",
-                      );
-                      falhasEmail++;
-                    }
-                  } else {
-                    const emailId = await client.mutation(
-                      api.email.enfileirarEmail,
-                      {
-                        destinatario: destinatario.email,
-                        destinatarioId: destinatario._id as Id<"usuarios">,
-                        assunto: "Notificação do Sistema",
-                        corpo: mensagemPersonalizada,
-                        enviadoPor: currentUser.data?._id as Id<"usuarios">,
-                        agendadaPara: agendadaPara,
-                      },
-                    );
-                    if (emailId) {
-                      resultadoEmail = { sucesso: true, emailId };
-                      if (agendadaPara) {
-                        const dataFormatada = format(
-                          new Date(agendadaPara),
-                          "dd/MM/yyyy 'às' HH:mm",
-                          { locale: ptBR },
-                        );
-                        adicionarLog(
-                          "email",
-                          destinatario.nome,
-                          "fila",
-                          `Agendado para ${dataFormatada}`,
-                          emailId,
-                        );
-                      } else {
-                        adicionarLog(
-                          "email",
-                          destinatario.nome,
-                          "fila",
-                          "Enfileirado para envio",
-                          emailId,
-                        );
-                      }
-                      sucessosEmail++;
-                    } else {
-                      adicionarLog(
-                        "email",
-                        destinatario.nome,
-                        "erro",
-                        "Falha ao enfileirar email",
-                      );
-                      falhasEmail++;
-                    }
-                  }
-                } catch (error) {
-                  const erro =
-                    error instanceof Error
-                      ? error.message
-                      : "Erro desconhecido";
-                  console.error(
-                    `Erro ao enviar email para ${destinatario.nome}:`,
-                    error,
-                  );
-                  adicionarLog(
-                    "email",
-                    destinatario.nome,
-                    "erro",
-                    `Erro: ${erro}`,
-                  );
-                  falhasEmail++;
-                }
-              } else {
-                adicionarLog(
-                  "email",
-                  destinatario.nome,
-                  "erro",
-                  "Destinatário não possui email cadastrado",
-                );
-                falhasEmail++;
-              }
-            }
-
-            progressoEnvio.enviados++;
-          } catch (error) {
-            console.error(
-              `Erro geral ao enviar para ${destinatario.nome}:`,
-              error,
-            );
-            progressoEnvio.falhas++;
-          }
-        }
-
-        // Feedback de envio em massa
-        let mensagemMassa = agendadaPara
-          ? `Agendamento em massa concluído! `
-          : `Envio em massa concluído! `;
-
-        if (agendadaPara) {
-          const dataFormatada = format(
-            new Date(agendadaPara),
-            "dd/MM/yyyy 'às' HH:mm",
-            { locale: ptBR },
-          );
-          mensagemMassa += `Será enviado em: ${dataFormatada}. `;
-        }
-
-        if (canal === "ambos") {
-          mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? "agendados" : "enviados"}, ${falhasChat} falhas. `;
-          mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? "agendados" : "enviados"}, ${falhasEmail} falhas.`;
-        } else if (canal === "chat") {
-          mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? "agendados" : "enviados"}, ${falhasChat} falhas.`;
-        } else if (canal === "email") {
-          mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? "agendados" : "enviados"}, ${falhasEmail} falhas.`;
-        }
-
-        // Adicionar log resumo
-        adicionarLog("email", "Sistema", "info", mensagemMassa);
-        mostrarMensagem("success", mensagemMassa);
-      }
-
-      // Limpar form
-      destinatarioId = "";
-      enviarParaTodos = false;
-      templateId = "";
-      mensagemPersonalizada = "";
-      agendarEnvio = false;
-      dataAgendamento = "";
-      horaAgendamento = "";
-    } catch (error) {
-      const erro = error instanceof Error ? error.message : "Erro desconhecido";
-      console.error("Erro ao enviar notificação:", error);
-      adicionarLog("email", "Sistema", "erro", `Erro geral: ${erro}`);
-      mostrarMensagem("error", "Erro ao enviar notificação: " + erro);
-    } finally {
-      processando = false;
-      progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
-      adicionarLog("email", "Sistema", "info", "Processo de envio finalizado");
-    }
-  }
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+
+	// Tipos para agendamentos
+	type TipoAgendamento = 'email' | 'chat';
+	type StatusAgendamento = 'agendado' | 'enviado' | 'cancelado';
+
+	interface AgendamentoEmail {
+		_id: Id<'notificacoesEmail'>;
+		_creationTime: number;
+		destinatario: string;
+		destinatarioId: Id<'usuarios'> | undefined;
+		assunto: string;
+		corpo: string;
+		templateId: Id<'templatesMensagens'> | undefined;
+		status: 'pendente' | 'enviando' | 'enviado' | 'falha';
+		agendadaPara: number | undefined;
+		enviadoPor: Id<'usuarios'>;
+		criadoEm: number;
+		enviadoEm: number | undefined;
+		destinatarioInfo: Doc<'usuarios'> | null;
+		templateInfo: Doc<'templatesMensagens'> | null;
+	}
+
+	interface AgendamentoChat {
+		_id: Id<'mensagens'>;
+		_creationTime: number;
+		conversaId: Id<'conversas'>;
+		remetenteId: Id<'usuarios'>;
+		conteudo: string;
+		agendadaPara: number | undefined;
+		enviadaEm: number;
+		conversaInfo: Doc<'conversas'> | null;
+		destinatarioInfo: Doc<'usuarios'> | null;
+	}
+
+	type Agendamento =
+		| { tipo: 'email'; dados: AgendamentoEmail }
+		| { tipo: 'chat'; dados: AgendamentoChat };
+
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
+
+	// Queries
+	const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
+	const usuariosQuery = useQuery(api.usuarios.listar, {});
+
+	// Mapa de emailIds para rastrear status
+	let emailIdsRastreados = $state<Set<string>>(new Set());
+
+	// Query para buscar status dos emails (só executa quando há IDs)
+	const emailIdsArray = $derived(
+		Array.from(emailIdsRastreados).map((id) => id as Id<'notificacoesEmail'>)
+	);
+	// Usar função para evitar execução quando array está vazio
+	const emailsStatusQuery = $derived.by(() => {
+		if (emailIdsArray.length === 0) return null;
+		return useQuery(api.email.buscarEmailsPorIds, { emailIds: emailIdsArray });
+	});
+
+	// Queries para agendamentos
+	const agendamentosEmailQuery = useQuery(api.email.listarAgendamentosEmail, {});
+	const agendamentosChatQuery = useQuery(api.chat.listarAgendamentosChat, {});
+
+	// Filtro de agendamentos
+	type FiltroAgendamento = 'todos' | 'agendados' | 'enviados';
+	let filtroAgendamento = $state<FiltroAgendamento>('todos');
+
+	// Extrair dados das queries de forma robusta
+	const templates = $derived.by(() => {
+		if (templatesQuery === undefined || templatesQuery === null) {
+			return [];
+		}
+		if ('data' in templatesQuery && templatesQuery.data !== undefined) {
+			return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
+		}
+		if (Array.isArray(templatesQuery)) {
+			return templatesQuery;
+		}
+		return [];
+	});
+
+	const usuarios = $derived.by(() => {
+		if (usuariosQuery === undefined || usuariosQuery === null) {
+			return [];
+		}
+		if ('data' in usuariosQuery && usuariosQuery.data !== undefined) {
+			return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
+		}
+		if (Array.isArray(usuariosQuery)) {
+			return usuariosQuery;
+		}
+		return [];
+	});
+
+	// Estados de carregamento e erro
+	const carregandoTemplates = $derived(templatesQuery === undefined || templatesQuery === null);
+	const carregandoUsuarios = $derived(usuariosQuery === undefined || usuariosQuery === null);
+
+	// Verificar erros de forma mais robusta
+	const erroTemplates = $derived.by(() => {
+		if (templatesQuery === undefined || templatesQuery === null) return false;
+		// Verificar se é um objeto com propriedade error
+		if (typeof templatesQuery === 'object' && 'error' in templatesQuery) {
+			return templatesQuery.error !== undefined && templatesQuery.error !== null;
+		}
+		return false;
+	});
+
+	const erroUsuarios = $derived.by(() => {
+		if (usuariosQuery === undefined || usuariosQuery === null) return false;
+		if (typeof usuariosQuery === 'object' && 'error' in usuariosQuery) {
+			return usuariosQuery.error !== undefined && usuariosQuery.error !== null;
+		}
+		return false;
+	});
+
+	// Log para debug (remover depois se necessário)
+	$effect(() => {
+		if (templatesQuery !== undefined && templatesQuery !== null) {
+			console.log('Templates Query:', templatesQuery);
+			console.log('Templates Extraídos:', templates);
+		}
+	});
+
+	let destinatarioId = $state('');
+	let enviarParaTodos = $state(false);
+	let canal = $state<'chat' | 'email' | 'ambos'>('chat');
+	let templateId = $state('');
+	let mensagemPersonalizada = $state('');
+	let usarTemplate = $state(true);
+	let processando = $state(false);
+	let criandoTemplates = $state(false);
+	let progressoEnvio = $state({ total: 0, enviados: 0, falhas: 0 });
+
+	// Estrutura de dados para logs de envio
+	type StatusLog = 'sucesso' | 'erro' | 'fila' | 'info' | 'enviando';
+	type TipoLog = 'chat' | 'email';
+	type LogEnvio = {
+		timestamp: number;
+		tipo: TipoLog;
+		destinatario: string;
+		status: StatusLog;
+		mensagem: string;
+		emailId?: string; // Para emails, guardar o ID para rastrear status
+	};
+
+	let logsEnvio = $state<LogEnvio[]>([]);
+	let terminalScrollRef: HTMLDivElement | null = $state(null);
+
+	// Estados para agendamento
+	let agendarEnvio = $state(false);
+	let dataAgendamento = $state('');
+	let horaAgendamento = $state('');
+
+	// Calcular data/hora mínimas
+	const now = new Date();
+	const minDate = format(now, 'yyyy-MM-dd');
+
+	// Hora mínima recalculada baseada na data selecionada
+	const horaMinima = $derived.by(() => {
+		if (!dataAgendamento) return format(now, 'HH:mm');
+		const hoje = format(now, 'yyyy-MM-dd');
+		if (dataAgendamento === hoje) {
+			return format(now, 'HH:mm');
+		}
+		return undefined; // Sem restrição se for data futura
+	});
+
+	function getPreviewAgendamento(): string {
+		if (!agendarEnvio || !dataAgendamento || !horaAgendamento) return '';
+		try {
+			const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
+			return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
+		} catch {
+			return '';
+		}
+	}
+
+	// Estados para modal de novo template
+	let modalNovoTemplateAberto = $state(false);
+	let codigoTemplate = $state('');
+	let nomeTemplate = $state('');
+	let tituloTemplate = $state('');
+	let corpoTemplate = $state('');
+	let variaveisTemplate = $state('');
+	let criandoNovoTemplate = $state(false);
+
+	// Estado para mensagens de feedback
+	let mensagem = $state<{
+		tipo: 'success' | 'error' | 'info';
+		texto: string;
+	} | null>(null);
+
+	const templateSelecionado = $derived(templates.find((t) => t._id === templateId));
+
+	// Função para renderizar template com variáveis (similar à função do backend)
+	function renderizarTemplate(template: string, variaveis: Record<string, string>): string {
+		let resultado = template;
+
+		for (const [chave, valor] of Object.entries(variaveis)) {
+			const placeholder = `{{${chave}}}`;
+			resultado = resultado.replace(new RegExp(placeholder, 'g'), valor);
+		}
+
+		return resultado;
+	}
+
+	// Função para mostrar mensagens
+	function mostrarMensagem(tipo: 'success' | 'error' | 'info', texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 5000);
+	}
+
+	// Função para adicionar log ao terminal
+	function adicionarLog(
+		tipo: TipoLog,
+		destinatario: string,
+		status: StatusLog,
+		mensagem: string,
+		emailId?: string
+	) {
+		logsEnvio = [
+			...logsEnvio,
+			{
+				timestamp: Date.now(),
+				tipo,
+				destinatario,
+				status,
+				mensagem,
+				emailId
+			}
+		];
+
+		// Adicionar emailId ao rastreamento se fornecido
+		if (emailId) {
+			emailIdsRastreados = new Set([...emailIdsRastreados, emailId]);
+		}
+
+		// Auto-scroll para o final
+		setTimeout(() => {
+			if (terminalScrollRef) {
+				terminalScrollRef.scrollTop = terminalScrollRef.scrollHeight;
+			}
+		}, 10);
+	}
+
+	// Atualizar logs quando status dos emails mudar
+	$effect(() => {
+		if (!emailsStatusQuery || emailsStatusQuery === undefined) return;
+
+		// Extrair dados da query
+		const emails = Array.isArray(emailsStatusQuery)
+			? emailsStatusQuery
+			: 'data' in emailsStatusQuery && Array.isArray(emailsStatusQuery.data)
+				? emailsStatusQuery.data
+				: [];
+
+		if (emails.length === 0) return;
+
+		for (const email of emails) {
+			if (!email) continue;
+
+			// Encontrar logs relacionados a este email
+			const logsRelacionados = logsEnvio.filter((log) => log.emailId === email._id);
+
+			for (const log of logsRelacionados) {
+				// Verificar se o status mudou
+				const novoStatus: StatusLog =
+					email.status === 'enviado'
+						? 'sucesso'
+						: email.status === 'falha'
+							? 'erro'
+							: email.status === 'enviando'
+								? 'enviando'
+								: email.status === 'pendente'
+									? 'fila'
+									: 'info';
+
+				// Se o status mudou, atualizar o log
+				if (log.status !== novoStatus) {
+					const indice = logsEnvio.findIndex((l) => l === log);
+					if (indice !== -1) {
+						const novaMensagem =
+							email.status === 'enviado'
+								? 'Email enviado com sucesso'
+								: email.status === 'falha'
+									? `Falha ao enviar: ${email.erroDetalhes || 'Erro desconhecido'}`
+									: email.status === 'enviando'
+										? 'Enviando email...'
+										: email.status === 'pendente'
+											? 'Email em fila de envio'
+											: log.mensagem;
+
+						logsEnvio = logsEnvio.map((l, i) =>
+							i === indice ? { ...l, status: novoStatus, mensagem: novaMensagem } : l
+						);
+					}
+				}
+			}
+		}
+	});
+
+	// Função para limpar logs
+	function limparLogs() {
+		logsEnvio = [];
+		emailIdsRastreados = new Set();
+	}
+
+	// Extrair e processar agendamentos
+	const agendamentosEmail = $derived.by(() => {
+		if (!agendamentosEmailQuery || agendamentosEmailQuery === undefined) return [];
+		const dados = Array.isArray(agendamentosEmailQuery)
+			? agendamentosEmailQuery
+			: 'data' in agendamentosEmailQuery && Array.isArray(agendamentosEmailQuery.data)
+				? agendamentosEmailQuery.data
+				: [];
+		return dados as AgendamentoEmail[];
+	});
+
+	const agendamentosChat = $derived.by(() => {
+		if (!agendamentosChatQuery || agendamentosChatQuery === undefined) return [];
+		const dados = Array.isArray(agendamentosChatQuery)
+			? agendamentosChatQuery
+			: 'data' in agendamentosChatQuery && Array.isArray(agendamentosChatQuery.data)
+				? agendamentosChatQuery.data
+				: [];
+		return dados as AgendamentoChat[];
+	});
+
+	// Combinar e processar agendamentos
+	const todosAgendamentos = $derived.by(() => {
+		const agendamentos: Agendamento[] = [];
+
+		for (const email of agendamentosEmail) {
+			if (email.agendadaPara) {
+				agendamentos.push({
+					tipo: 'email',
+					dados: email
+				});
+			}
+		}
+
+		for (const chat of agendamentosChat) {
+			if (chat.agendadaPara) {
+				agendamentos.push({
+					tipo: 'chat',
+					dados: chat
+				});
+			}
+		}
+
+		// Ordenar: futuros primeiro (mais próximos primeiro), depois passados (mais recentes primeiro)
+		return agendamentos.sort((a, b) => {
+			const timestampA =
+				a.tipo === 'email' ? (a.dados.agendadaPara ?? 0) : (a.dados.agendadaPara ?? 0);
+			const timestampB =
+				b.tipo === 'email' ? (b.dados.agendadaPara ?? 0) : (b.dados.agendadaPara ?? 0);
+			const agora = Date.now();
+
+			const aFuturo = timestampA > agora;
+			const bFuturo = timestampB > agora;
+
+			// Futuros primeiro
+			if (aFuturo && !bFuturo) return -1;
+			if (!aFuturo && bFuturo) return 1;
+
+			// Dentro do mesmo grupo, ordenar por timestamp
+			if (aFuturo) {
+				// Futuros: mais próximos primeiro
+				return timestampA - timestampB;
+			} else {
+				// Passados: mais recentes primeiro
+				return timestampB - timestampA;
+			}
+		});
+	});
+
+	// Filtrar agendamentos
+	const agendamentosFiltrados = $derived.by(() => {
+		if (filtroAgendamento === 'todos') return todosAgendamentos;
+
+		return todosAgendamentos.filter((ag) => {
+			const status = obterStatusAgendamento(ag);
+			if (filtroAgendamento === 'agendados') return status === 'agendado';
+			if (filtroAgendamento === 'enviados') return status === 'enviado';
+			return true;
+		});
+	});
+
+	// Função para obter status do agendamento
+	function obterStatusAgendamento(agendamento: Agendamento): StatusAgendamento {
+		if (agendamento.tipo === 'email') {
+			const email = agendamento.dados;
+			if (email.status === 'enviado') return 'enviado';
+			if (email.agendadaPara && email.agendadaPara <= Date.now()) return 'enviado';
+			return 'agendado';
+		} else {
+			const chat = agendamento.dados;
+			if (chat.agendadaPara && chat.agendadaPara <= Date.now()) return 'enviado';
+			return 'agendado';
+		}
+	}
+
+	// Função para cancelar agendamento
+	async function cancelarAgendamento(agendamento: Agendamento) {
+		if (!confirm('Tem certeza que deseja cancelar este agendamento?')) {
+			return;
+		}
+
+		try {
+			if (agendamento.tipo === 'email') {
+				const resultado = await client.mutation(api.email.cancelarAgendamentoEmail, {
+					emailId: agendamento.dados._id
+				});
+				if (resultado.sucesso) {
+					mostrarMensagem('success', 'Agendamento de email cancelado com sucesso!');
+				} else {
+					mostrarMensagem('error', resultado.erro || 'Erro ao cancelar agendamento');
+				}
+			} else {
+				const resultado = await client.mutation(api.chat.cancelarMensagemAgendada, {
+					mensagemId: agendamento.dados._id
+				});
+				if (resultado.sucesso) {
+					mostrarMensagem('success', 'Agendamento de chat cancelado com sucesso!');
+				} else {
+					mostrarMensagem('error', resultado.erro || 'Erro ao cancelar agendamento');
+				}
+			}
+		} catch (error) {
+			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+			mostrarMensagem('error', `Erro ao cancelar agendamento: ${erro}`);
+		}
+	}
+
+	// Função para obter nome do destinatário
+	function obterNomeDestinatario(agendamento: Agendamento): string {
+		if (agendamento.tipo === 'email') {
+			return (
+				agendamento.dados.destinatarioInfo?.nome || agendamento.dados.destinatario || 'Usuário'
+			);
+		} else {
+			return agendamento.dados.destinatarioInfo?.nome || 'Usuário';
+		}
+	}
+
+	// Função para formatar data/hora do agendamento
+	function formatarDataAgendamento(agendamento: Agendamento): string {
+		const timestamp =
+			agendamento.tipo === 'email'
+				? agendamento.dados.agendadaPara
+				: agendamento.dados.agendadaPara;
+
+		if (!timestamp) return 'N/A';
+
+		return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
+			locale: ptBR
+		});
+	}
+
+	// Função para formatar timestamp
+	function formatarTimestamp(timestamp: number): string {
+		return format(new Date(timestamp), 'HH:mm:ss', { locale: ptBR });
+	}
+
+	// Função para obter cor do status
+	function obterCorStatus(status: StatusLog): string {
+		switch (status) {
+			case 'sucesso':
+				return 'text-success';
+			case 'erro':
+				return 'text-error';
+			case 'fila':
+				return 'text-warning';
+			case 'enviando':
+				return 'text-info';
+			case 'info':
+				return 'text-info';
+			default:
+				return 'text-base-content';
+		}
+	}
+
+	async function criarTemplatesPadrao() {
+		if (criandoTemplates) return;
+
+		criandoTemplates = true;
+		try {
+			const resultado = await client.mutation(api.templatesMensagens.criarTemplatesPadrao, {});
+			if (resultado.sucesso) {
+				mostrarMensagem(
+					'success',
+					'Templates padrão criados com sucesso! A página será recarregada.'
+				);
+				setTimeout(() => {
+					window.location.reload();
+				}, 2000);
+			} else {
+				mostrarMensagem('error', 'Erro ao criar templates padrão.');
+			}
+		} catch (error) {
+			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+			console.error('Erro ao criar templates:', error);
+			mostrarMensagem('error', 'Erro ao criar templates: ' + erro);
+		} finally {
+			criandoTemplates = false;
+		}
+	}
+
+	function abrirModalNovoTemplate() {
+		modalNovoTemplateAberto = true;
+		// Limpar campos
+		codigoTemplate = '';
+		nomeTemplate = '';
+		tituloTemplate = '';
+		corpoTemplate = '';
+		variaveisTemplate = '';
+	}
+
+	function fecharModalNovoTemplate() {
+		modalNovoTemplateAberto = false;
+	}
+
+	async function salvarNovoTemplate() {
+		if (!currentUser?.data) {
+			mostrarMensagem('error', 'Você precisa estar autenticado para criar templates.');
+			return;
+		}
+
+		// Validações
+		if (!codigoTemplate.trim()) {
+			mostrarMensagem('error', 'O código do template é obrigatório.');
+			return;
+		}
+		if (!nomeTemplate.trim()) {
+			mostrarMensagem('error', 'O nome do template é obrigatório.');
+			return;
+		}
+		if (!tituloTemplate.trim()) {
+			mostrarMensagem('error', 'O título do template é obrigatório.');
+			return;
+		}
+		if (!corpoTemplate.trim()) {
+			mostrarMensagem('error', 'O corpo do template é obrigatório.');
+			return;
+		}
+
+		// Processar variáveis (separadas por vírgula ou espaço)
+		const variaveis = variaveisTemplate
+			.split(/[,;\s]+/)
+			.map((v) => v.trim())
+			.filter((v) => v.length > 0);
+
+		criandoNovoTemplate = true;
+		try {
+			const resultado = await client.mutation(api.templatesMensagens.criarTemplate, {
+				codigo: codigoTemplate.trim().toUpperCase().replace(/\s+/g, '_'),
+				nome: nomeTemplate.trim(),
+				titulo: tituloTemplate.trim(),
+				corpo: corpoTemplate.trim(),
+				variaveis: variaveis.length > 0 ? variaveis : undefined,
+				criadoPorId: currentUser.data._id as Id<'usuarios'>
+			});
+
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Template criado com sucesso!');
+				fecharModalNovoTemplate();
+				// Recarregar a página para atualizar a lista
+				setTimeout(() => {
+					window.location.reload();
+				}, 1500);
+			} else {
+				mostrarMensagem(
+					'error',
+					'Erro ao criar template: ' + (resultado.erro || 'Erro desconhecido')
+				);
+			}
+		} catch (error) {
+			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+			console.error('Erro ao criar template:', error);
+			mostrarMensagem('error', 'Erro ao criar template: ' + erro);
+		} finally {
+			criandoNovoTemplate = false;
+		}
+	}
+
+	async function enviarNotificacao() {
+		if (!enviarParaTodos && !destinatarioId) {
+			mostrarMensagem('error', "Selecione um destinatário ou marque 'Enviar para todos'");
+			return;
+		}
+
+		if (usarTemplate && !templateId) {
+			mostrarMensagem('error', 'Selecione um template');
+			return;
+		}
+
+		if (!usarTemplate && !mensagemPersonalizada.trim()) {
+			mostrarMensagem('error', 'Digite uma mensagem');
+			return;
+		}
+
+		// Validar agendamento se marcado
+		let agendadaPara: number | undefined = undefined;
+		if (agendarEnvio) {
+			if (!dataAgendamento || !horaAgendamento) {
+				mostrarMensagem('error', 'Preencha a data e hora para agendamento');
+				return;
+			}
+
+			try {
+				const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
+				if (dataHora.getTime() <= Date.now()) {
+					mostrarMensagem('error', 'A data e hora devem ser futuras');
+					return;
+				}
+				agendadaPara = dataHora.getTime();
+			} catch (error) {
+				mostrarMensagem('error', 'Data ou hora inválida');
+				return;
+			}
+		}
+
+		processando = true;
+		progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
+
+		// Limpar logs anteriores quando iniciar novo envio
+		logsEnvio = [];
+		emailIdsRastreados = new Set();
+
+		try {
+			// Obter lista de destinatários
+			const destinatarios: typeof usuarios = enviarParaTodos
+				? usuarios
+				: usuarios.filter((u) => u._id === destinatarioId);
+
+			if (destinatarios.length === 0) {
+				adicionarLog('email', 'Sistema', 'erro', 'Nenhum destinatário encontrado');
+				mostrarMensagem('error', 'Nenhum destinatário encontrado');
+				return;
+			}
+
+			progressoEnvio.total = destinatarios.length;
+
+			// Log inicial
+			const tipoMensagem = usarTemplate
+				? `Template: ${templateSelecionado?.nome || ''}`
+				: 'Mensagem personalizada';
+			const destinatariosText = enviarParaTodos
+				? `Todos os usuários (${destinatarios.length})`
+				: destinatarios.map((d) => d.nome).join(', ');
+			adicionarLog(
+				'email',
+				'Sistema',
+				'info',
+				`Iniciando envio de notificação via ${canal} para ${destinatariosText} - ${tipoMensagem}`
+			);
+
+			// Se for envio para um único usuário
+			if (destinatarios.length === 1) {
+				const destinatario = destinatarios[0];
+				let resultadoChat = null;
+				let resultadoEmail = null;
+
+				// ENVIAR PARA CHAT
+				if (canal === 'chat' || canal === 'ambos') {
+					try {
+						adicionarLog('chat', destinatario.nome, 'enviando', 'Criando/buscando conversa...');
+						const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
+							outroUsuarioId: destinatario._id as Id<'usuarios'>
+						});
+
+						if (conversaId) {
+							const mensagem =
+								usarTemplate && templateSelecionado
+									? renderizarTemplate(templateSelecionado.corpo, {
+											nome: destinatario.nome,
+											matricula: destinatario.matricula || ''
+										})
+									: mensagemPersonalizada;
+
+							if (agendadaPara) {
+								// Agendar mensagem
+								adicionarLog('chat', destinatario.nome, 'info', 'Agendando mensagem...');
+								resultadoChat = await client.mutation(api.chat.agendarMensagem, {
+									conversaId: conversaId,
+									conteudo: mensagem,
+									agendadaPara: agendadaPara
+								});
+								const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+									locale: ptBR
+								});
+								adicionarLog(
+									'chat',
+									destinatario.nome,
+									'sucesso',
+									`Mensagem agendada para ${dataFormatada}`
+								);
+							} else {
+								// Envio imediato
+								adicionarLog('chat', destinatario.nome, 'enviando', 'Enviando mensagem...');
+								resultadoChat = await client.mutation(api.chat.enviarMensagem, {
+									conversaId: conversaId,
+									conteudo: mensagem,
+									tipo: 'texto',
+									permitirNotificacaoParaSiMesmo: true
+								});
+								adicionarLog('chat', destinatario.nome, 'sucesso', 'Mensagem enviada com sucesso');
+							}
+						} else {
+							adicionarLog('chat', destinatario.nome, 'erro', 'Falha ao criar/buscar conversa');
+						}
+					} catch (error) {
+						const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+						console.error('Erro ao enviar chat:', error);
+						adicionarLog('chat', destinatario.nome, 'erro', `Erro: ${erro}`);
+					}
+				}
+
+				// ENVIAR PARA EMAIL
+				if (canal === 'email' || canal === 'ambos') {
+					if (destinatario.email) {
+						try {
+							adicionarLog(
+								'email',
+								destinatario.nome,
+								'enviando',
+								`Enfileirando email para ${destinatario.email}...`
+							);
+							if (usarTemplate && templateId) {
+								const template = templateSelecionado;
+								if (template) {
+									const emailId = await client.action(api.email.enviarEmailComTemplate, {
+										destinatario: destinatario.email,
+										destinatarioId: destinatario._id as Id<'usuarios'>,
+										templateCodigo: template.codigo,
+										variaveis: {
+											nome: destinatario.nome,
+											matricula: destinatario.matricula
+										},
+										enviadoPor: currentUser.data._id as Id<'usuarios'>,
+										agendadaPara: agendadaPara
+									});
+									if (emailId) {
+										if (agendadaPara) {
+											const dataFormatada = format(
+												new Date(agendadaPara),
+												"dd/MM/yyyy 'às' HH:mm",
+												{ locale: ptBR }
+											);
+											adicionarLog(
+												'email',
+												destinatario.nome,
+												'fila',
+												`Email agendado para ${dataFormatada}`,
+												emailId
+											);
+										} else {
+											adicionarLog(
+												'email',
+												destinatario.nome,
+												'fila',
+												'Email enfileirado para envio',
+												emailId
+											);
+										}
+									} else {
+										adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
+									}
+								} else {
+									adicionarLog('email', destinatario.nome, 'erro', 'Template não encontrado');
+								}
+							} else {
+								const emailId = await client.mutation(api.email.enfileirarEmail, {
+									destinatario: destinatario.email,
+									destinatarioId: destinatario._id as Id<'usuarios'>,
+									assunto: 'Notificação do Sistema',
+									corpo: mensagemPersonalizada,
+									enviadoPor: currentUser.data._id as Id<'usuarios'>,
+									agendadaPara: agendadaPara
+								});
+								if (emailId) {
+									resultadoEmail = { sucesso: true, emailId };
+									if (agendadaPara) {
+										const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+											locale: ptBR
+										});
+										adicionarLog(
+											'email',
+											destinatario.nome,
+											'fila',
+											`Email agendado para ${dataFormatada}`,
+											emailId
+										);
+									} else {
+										adicionarLog(
+											'email',
+											destinatario.nome,
+											'fila',
+											'Email enfileirado para envio',
+											emailId
+										);
+									}
+								} else {
+									adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
+								}
+							}
+						} catch (error) {
+							const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+							console.error('Erro ao enviar email:', error);
+							adicionarLog('email', destinatario.nome, 'erro', `Erro: ${erro}`);
+						}
+					} else {
+						adicionarLog(
+							'email',
+							destinatario.nome,
+							'erro',
+							'Destinatário não possui email cadastrado'
+						);
+					}
+				}
+
+				// Feedback de sucesso
+				let mensagemSucesso = agendadaPara
+					? `Notificação agendada com sucesso!`
+					: 'Notificação enviada com sucesso!';
+				if (agendadaPara) {
+					const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+						locale: ptBR
+					});
+					mensagemSucesso += ` Será enviada em: ${dataFormatada}`;
+				} else {
+					if (canal === 'ambos') {
+						if (resultadoChat && resultadoEmail) {
+							mensagemSucesso = 'Notificação enviada para Chat e Email!';
+						} else if (resultadoChat) {
+							mensagemSucesso = 'Notificação enviada para Chat. Email falhou.';
+						} else if (resultadoEmail) {
+							mensagemSucesso = 'Notificação enviada para Email. Chat falhou.';
+						}
+					} else if (canal === 'chat' && resultadoChat) {
+						mensagemSucesso = 'Mensagem enviada no Chat!';
+					} else if (canal === 'email' && resultadoEmail) {
+						mensagemSucesso = 'Email enfileirado para envio!';
+					}
+				}
+
+				mostrarMensagem('success', mensagemSucesso);
+				progressoEnvio.enviados = 1;
+			} else {
+				// ENVIO EM MASSA
+				let sucessosChat = 0;
+				let sucessosEmail = 0;
+				let falhasChat = 0;
+				let falhasEmail = 0;
+
+				adicionarLog(
+					'email',
+					'Sistema',
+					'info',
+					`Processando ${destinatarios.length} destinatários...`
+				);
+
+				for (const destinatario of destinatarios) {
+					try {
+						// ENVIAR PARA CHAT
+						if (canal === 'chat' || canal === 'ambos') {
+							try {
+								adicionarLog('chat', destinatario.nome, 'enviando', 'Processando...');
+								const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
+									outroUsuarioId: destinatario._id as Id<'usuarios'>
+								});
+
+								if (conversaId) {
+									// Renderizar template com variáveis do destinatário
+									const mensagem =
+										usarTemplate && templateSelecionado
+											? renderizarTemplate(templateSelecionado.corpo, {
+													nome: destinatario.nome,
+													matricula: destinatario.matricula || ''
+												})
+											: mensagemPersonalizada;
+
+									if (agendadaPara) {
+										await client.mutation(api.chat.agendarMensagem, {
+											conversaId: conversaId,
+											conteudo: mensagem,
+											agendadaPara: agendadaPara
+										});
+										const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+											locale: ptBR
+										});
+										adicionarLog(
+											'chat',
+											destinatario.nome,
+											'sucesso',
+											`Agendado para ${dataFormatada}`
+										);
+									} else {
+										await client.mutation(api.chat.enviarMensagem, {
+											conversaId: conversaId,
+											conteudo: mensagem,
+											tipo: 'texto',
+											permitirNotificacaoParaSiMesmo: true
+										});
+										adicionarLog('chat', destinatario.nome, 'sucesso', 'Enviado com sucesso');
+									}
+									sucessosChat++;
+								} else {
+									adicionarLog('chat', destinatario.nome, 'erro', 'Falha ao criar/buscar conversa');
+									falhasChat++;
+								}
+							} catch (error) {
+								const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+								console.error(`Erro ao enviar chat para ${destinatario.nome}:`, error);
+								adicionarLog('chat', destinatario.nome, 'erro', `Erro: ${erro}`);
+								falhasChat++;
+							}
+						}
+
+						// ENVIAR PARA EMAIL
+						if (canal === 'email' || canal === 'ambos') {
+							if (destinatario.email) {
+								try {
+									adicionarLog(
+										'email',
+										destinatario.nome,
+										'enviando',
+										`Enfileirando email para ${destinatario.email}...`
+									);
+									if (usarTemplate && templateId) {
+										const template = templateSelecionado;
+										if (template) {
+											const emailId = await client.action(api.email.enviarEmailComTemplate, {
+												destinatario: destinatario.email,
+												destinatarioId: destinatario._id as Id<'usuarios'>,
+												templateCodigo: template.codigo,
+												variaveis: {
+													nome: destinatario.nome,
+													matricula: destinatario.matricula || ''
+												},
+												enviadoPor: currentUser.data._id as Id<'usuarios'>,
+												agendadaPara: agendadaPara
+											});
+											if (emailId) {
+												if (agendadaPara) {
+													const dataFormatada = format(
+														new Date(agendadaPara),
+														"dd/MM/yyyy 'às' HH:mm",
+														{ locale: ptBR }
+													);
+													adicionarLog(
+														'email',
+														destinatario.nome,
+														'fila',
+														`Agendado para ${dataFormatada}`,
+														emailId
+													);
+												} else {
+													adicionarLog(
+														'email',
+														destinatario.nome,
+														'fila',
+														'Enfileirado para envio',
+														emailId
+													);
+												}
+												sucessosEmail++;
+											} else {
+												adicionarLog(
+													'email',
+													destinatario.nome,
+													'erro',
+													'Falha ao enfileirar email'
+												);
+												falhasEmail++;
+											}
+										} else {
+											adicionarLog('email', destinatario.nome, 'erro', 'Template não encontrado');
+											falhasEmail++;
+										}
+									} else {
+										const emailId = await client.mutation(api.email.enfileirarEmail, {
+											destinatario: destinatario.email,
+											destinatarioId: destinatario._id as Id<'usuarios'>,
+											assunto: 'Notificação do Sistema',
+											corpo: mensagemPersonalizada,
+											enviadoPor: currentUser.data?._id as Id<'usuarios'>,
+											agendadaPara: agendadaPara
+										});
+										if (emailId) {
+											resultadoEmail = { sucesso: true, emailId };
+											if (agendadaPara) {
+												const dataFormatada = format(
+													new Date(agendadaPara),
+													"dd/MM/yyyy 'às' HH:mm",
+													{ locale: ptBR }
+												);
+												adicionarLog(
+													'email',
+													destinatario.nome,
+													'fila',
+													`Agendado para ${dataFormatada}`,
+													emailId
+												);
+											} else {
+												adicionarLog(
+													'email',
+													destinatario.nome,
+													'fila',
+													'Enfileirado para envio',
+													emailId
+												);
+											}
+											sucessosEmail++;
+										} else {
+											adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
+											falhasEmail++;
+										}
+									}
+								} catch (error) {
+									const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+									console.error(`Erro ao enviar email para ${destinatario.nome}:`, error);
+									adicionarLog('email', destinatario.nome, 'erro', `Erro: ${erro}`);
+									falhasEmail++;
+								}
+							} else {
+								adicionarLog(
+									'email',
+									destinatario.nome,
+									'erro',
+									'Destinatário não possui email cadastrado'
+								);
+								falhasEmail++;
+							}
+						}
+
+						progressoEnvio.enviados++;
+					} catch (error) {
+						console.error(`Erro geral ao enviar para ${destinatario.nome}:`, error);
+						progressoEnvio.falhas++;
+					}
+				}
+
+				// Feedback de envio em massa
+				let mensagemMassa = agendadaPara
+					? `Agendamento em massa concluído! `
+					: `Envio em massa concluído! `;
+
+				if (agendadaPara) {
+					const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+						locale: ptBR
+					});
+					mensagemMassa += `Será enviado em: ${dataFormatada}. `;
+				}
+
+				if (canal === 'ambos') {
+					mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasChat} falhas. `;
+					mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasEmail} falhas.`;
+				} else if (canal === 'chat') {
+					mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasChat} falhas.`;
+				} else if (canal === 'email') {
+					mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasEmail} falhas.`;
+				}
+
+				// Adicionar log resumo
+				adicionarLog('email', 'Sistema', 'info', mensagemMassa);
+				mostrarMensagem('success', mensagemMassa);
+			}
+
+			// Limpar form
+			destinatarioId = '';
+			enviarParaTodos = false;
+			templateId = '';
+			mensagemPersonalizada = '';
+			agendarEnvio = false;
+			dataAgendamento = '';
+			horaAgendamento = '';
+		} catch (error) {
+			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+			console.error('Erro ao enviar notificação:', error);
+			adicionarLog('email', 'Sistema', 'erro', `Erro geral: ${erro}`);
+			mostrarMensagem('error', 'Erro ao enviar notificação: ' + erro);
+		} finally {
+			processando = false;
+			progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
+			adicionarLog('email', 'Sistema', 'info', 'Processo de envio finalizado');
+		}
+	}
 </script>
 
-<div class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Header -->
-  <div class="flex items-center justify-between mb-6">
-    <div class="flex items-center gap-4">
-      <div class="p-3 bg-info/10 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-info"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-          />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-base-content">
-          Notificações e Mensagens
-        </h1>
-        <p class="text-base-content/60 mt-1">
-          Enviar notificações para usuários do sistema
-        </p>
-      </div>
-    </div>
-  </div>
+<div class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Header -->
+	<div class="mb-6 flex items-center justify-between">
+		<div class="flex items-center gap-4">
+			<div class="bg-info/10 rounded-xl p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-info h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+					/>
+				</svg>
+			</div>
+			<div>
+				<h1 class="text-base-content text-3xl font-bold">Notificações e Mensagens</h1>
+				<p class="text-base-content/60 mt-1">Enviar notificações para usuários do sistema</p>
+			</div>
+		</div>
+	</div>
 
-  <!-- Mensagens de Feedback -->
-  {#if mensagem}
-    <div
-      class="alert mb-6 shadow-lg"
-      class:alert-success={mensagem.tipo === "success"}
-      class:alert-error={mensagem.tipo === "error"}
-      class:alert-info={mensagem.tipo === "info"}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if mensagem.tipo === "success"}
-          <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"
-          />
-        {:else if mensagem.tipo === "error"}
-          <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"
-          />
-        {:else}
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        {/if}
-      </svg>
-      <span class="font-medium">{mensagem.texto}</span>
-      <button
-        type="button"
-        class="btn btn-sm btn-circle btn-ghost"
-        onclick={() => (mensagem = null)}
-      >
-        ✕
-      </button>
-    </div>
-  {/if}
+	<!-- Mensagens de Feedback -->
+	{#if mensagem}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={mensagem.tipo === 'success'}
+			class:alert-error={mensagem.tipo === 'error'}
+			class:alert-info={mensagem.tipo === 'info'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if mensagem.tipo === 'success'}
+					<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"
+					/>
+				{:else if mensagem.tipo === 'error'}
+					<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"
+					/>
+				{:else}
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				{/if}
+			</svg>
+			<span class="font-medium">{mensagem.texto}</span>
+			<button
+				type="button"
+				class="btn btn-sm btn-circle btn-ghost"
+				onclick={() => (mensagem = null)}
+			>
+				✕
+			</button>
+		</div>
+	{/if}
 
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-    <!-- Formulário -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Enviar Notificação</h2>
+	<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+		<!-- Formulário -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Enviar Notificação</h2>
 
-        <!-- Destinatário -->
-        <div class="form-control mb-4">
-          <div class="flex items-center justify-between mb-2">
-            <label class="label" for="destinatario-select">
-              <span class="label-text font-medium">Destinatário *</span>
-            </label>
-            <label class="label cursor-pointer gap-2">
-              <input
-                type="checkbox"
-                bind:checked={enviarParaTodos}
-                class="checkbox checkbox-primary checkbox-sm"
-                disabled={processando}
-              />
-              <span class="label-text text-sm"
-                >Enviar para todos ({usuarios.length} usuários)</span
-              >
-            </label>
-          </div>
-          <select
-            id="destinatario-select"
-            bind:value={destinatarioId}
-            class="select select-bordered"
-            disabled={enviarParaTodos || processando}
-          >
-            <option value="">Selecione um usuário</option>
-            {#if carregandoUsuarios}
-              <option disabled>Carregando usuários...</option>
-            {:else if usuarios.length > 0}
-              {#each usuarios as usuario}
-                <option value={usuario._id}>
-                  {usuario.nome} ({usuario.matricula})
-                </option>
-              {/each}
-            {:else}
-              <option disabled>Nenhum usuário disponível</option>
-            {/if}
-          </select>
-          {#if enviarParaTodos}
-            <label class="label">
-              <span class="label-text-alt text-warning">
-                ⚠️ A notificação será enviada para todos os {usuarios.length} usuários
-                do sistema
-              </span>
-            </label>
-          {/if}
-        </div>
+				<!-- Destinatário -->
+				<div class="form-control mb-4">
+					<div class="mb-2 flex items-center justify-between">
+						<label class="label" for="destinatario-select">
+							<span class="label-text font-medium">Destinatário *</span>
+						</label>
+						<label class="label cursor-pointer gap-2">
+							<input
+								type="checkbox"
+								bind:checked={enviarParaTodos}
+								class="checkbox checkbox-primary checkbox-sm"
+								disabled={processando}
+							/>
+							<span class="label-text text-sm">Enviar para todos ({usuarios.length} usuários)</span>
+						</label>
+					</div>
+					<select
+						id="destinatario-select"
+						bind:value={destinatarioId}
+						class="select select-bordered"
+						disabled={enviarParaTodos || processando}
+					>
+						<option value="">Selecione um usuário</option>
+						{#if carregandoUsuarios}
+							<option disabled>Carregando usuários...</option>
+						{:else if usuarios.length > 0}
+							{#each usuarios as usuario}
+								<option value={usuario._id}>
+									{usuario.nome} ({usuario.matricula})
+								</option>
+							{/each}
+						{:else}
+							<option disabled>Nenhum usuário disponível</option>
+						{/if}
+					</select>
+					{#if enviarParaTodos}
+						<label class="label">
+							<span class="label-text-alt text-warning">
+								⚠️ A notificação será enviada para todos os {usuarios.length} usuários do sistema
+							</span>
+						</label>
+					{/if}
+				</div>
 
-        <!-- Canal -->
-        <div class="form-control mb-4">
-          <div class="label">
-            <span class="label-text font-medium">Canal de Envio *</span>
-          </div>
-          <div class="flex gap-4">
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                value="chat"
-                bind:group={canal}
-                class="radio radio-primary"
-              />
-              <span class="label-text ml-2">Chat</span>
-            </label>
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                value="email"
-                bind:group={canal}
-                class="radio radio-primary"
-              />
-              <span class="label-text ml-2">Email</span>
-            </label>
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                value="ambos"
-                bind:group={canal}
-                class="radio radio-primary"
-              />
-              <span class="label-text ml-2">Ambos</span>
-            </label>
-          </div>
-        </div>
+				<!-- Canal -->
+				<div class="form-control mb-4">
+					<div class="label">
+						<span class="label-text font-medium">Canal de Envio *</span>
+					</div>
+					<div class="flex gap-4">
+						<label class="label cursor-pointer">
+							<input type="radio" value="chat" bind:group={canal} class="radio radio-primary" />
+							<span class="label-text ml-2">Chat</span>
+						</label>
+						<label class="label cursor-pointer">
+							<input type="radio" value="email" bind:group={canal} class="radio radio-primary" />
+							<span class="label-text ml-2">Email</span>
+						</label>
+						<label class="label cursor-pointer">
+							<input type="radio" value="ambos" bind:group={canal} class="radio radio-primary" />
+							<span class="label-text ml-2">Ambos</span>
+						</label>
+					</div>
+				</div>
 
-        <!-- Tipo de Mensagem -->
-        <div class="form-control mb-4">
-          <div class="label">
-            <span class="label-text font-medium">Tipo de Mensagem</span>
-          </div>
-          <div class="flex gap-4">
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                checked={usarTemplate}
-                onchange={() => (usarTemplate = true)}
-                class="radio radio-secondary"
-              />
-              <span class="label-text ml-2">Usar Template</span>
-            </label>
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                checked={!usarTemplate}
-                onchange={() => (usarTemplate = false)}
-                class="radio radio-secondary"
-              />
-              <span class="label-text ml-2">Mensagem Personalizada</span>
-            </label>
-          </div>
-        </div>
+				<!-- Tipo de Mensagem -->
+				<div class="form-control mb-4">
+					<div class="label">
+						<span class="label-text font-medium">Tipo de Mensagem</span>
+					</div>
+					<div class="flex gap-4">
+						<label class="label cursor-pointer">
+							<input
+								type="radio"
+								checked={usarTemplate}
+								onchange={() => (usarTemplate = true)}
+								class="radio radio-secondary"
+							/>
+							<span class="label-text ml-2">Usar Template</span>
+						</label>
+						<label class="label cursor-pointer">
+							<input
+								type="radio"
+								checked={!usarTemplate}
+								onchange={() => (usarTemplate = false)}
+								class="radio radio-secondary"
+							/>
+							<span class="label-text ml-2">Mensagem Personalizada</span>
+						</label>
+					</div>
+				</div>
 
-        {#if usarTemplate}
-          <!-- Template -->
-          <div class="form-control mb-4">
-            <label class="label" for="template-select">
-              <span class="label-text font-medium">Template *</span>
-            </label>
-            <select
-              id="template-select"
-              bind:value={templateId}
-              class="select select-bordered"
-            >
-              <option value="">Selecione um template</option>
-              {#if carregandoTemplates}
-                <option disabled>Carregando templates...</option>
-              {:else if templates.length > 0}
-                {#each templates as template}
-                  <option value={template._id}>
-                    {template.nome}
-                  </option>
-                {/each}
-              {:else}
-                <option disabled>Nenhum template disponível</option>
-              {/if}
-            </select>
-          </div>
+				{#if usarTemplate}
+					<!-- Template -->
+					<div class="form-control mb-4">
+						<label class="label" for="template-select">
+							<span class="label-text font-medium">Template *</span>
+						</label>
+						<select id="template-select" bind:value={templateId} class="select select-bordered">
+							<option value="">Selecione um template</option>
+							{#if carregandoTemplates}
+								<option disabled>Carregando templates...</option>
+							{:else if templates.length > 0}
+								{#each templates as template}
+									<option value={template._id}>
+										{template.nome}
+									</option>
+								{/each}
+							{:else}
+								<option disabled>Nenhum template disponível</option>
+							{/if}
+						</select>
+					</div>
 
-          {#if templateSelecionado}
-            <div class="alert alert-info mb-4">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                class="stroke-current shrink-0 w-6 h-6"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                ></path>
-              </svg>
-              <div>
-                <div class="font-bold">{templateSelecionado.titulo}</div>
-                <div class="text-sm mt-1">{templateSelecionado.corpo}</div>
-              </div>
-            </div>
-          {/if}
-        {:else}
-          <!-- Mensagem Personalizada -->
-          <div class="form-control mb-4">
-            <label class="label" for="mensagem-textarea">
-              <span class="label-text font-medium">Mensagem *</span>
-            </label>
-            <textarea
-              id="mensagem-textarea"
-              bind:value={mensagemPersonalizada}
-              class="textarea textarea-bordered h-32"
-              placeholder="Digite sua mensagem personalizada..."
-            ></textarea>
-          </div>
-        {/if}
+					{#if templateSelecionado}
+						<div class="alert alert-info mb-4">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								></path>
+							</svg>
+							<div>
+								<div class="font-bold">{templateSelecionado.titulo}</div>
+								<div class="mt-1 text-sm">{templateSelecionado.corpo}</div>
+							</div>
+						</div>
+					{/if}
+				{:else}
+					<!-- Mensagem Personalizada -->
+					<div class="form-control mb-4">
+						<label class="label" for="mensagem-textarea">
+							<span class="label-text font-medium">Mensagem *</span>
+						</label>
+						<textarea
+							id="mensagem-textarea"
+							bind:value={mensagemPersonalizada}
+							class="textarea textarea-bordered h-32"
+							placeholder="Digite sua mensagem personalizada..."
+						></textarea>
+					</div>
+				{/if}
 
-        <!-- Agendamento -->
-        <div class="form-control mb-4">
-          <label class="label cursor-pointer">
-            <span class="label-text font-medium">Agendar Envio</span>
-            <input
-              type="checkbox"
-              bind:checked={agendarEnvio}
-              class="checkbox checkbox-primary"
-              disabled={processando}
-            />
-          </label>
+				<!-- Agendamento -->
+				<div class="form-control mb-4">
+					<label class="label cursor-pointer">
+						<span class="label-text font-medium">Agendar Envio</span>
+						<input
+							type="checkbox"
+							bind:checked={agendarEnvio}
+							class="checkbox checkbox-primary"
+							disabled={processando}
+						/>
+					</label>
 
-          {#if agendarEnvio}
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-              <div class="form-control">
-                <label class="label" for="data-agendamento">
-                  <span class="label-text">Data</span>
-                </label>
-                <input
-                  id="data-agendamento"
-                  type="date"
-                  class="input input-bordered"
-                  bind:value={dataAgendamento}
-                  min={minDate}
-                  disabled={processando}
-                />
-              </div>
+					{#if agendarEnvio}
+						<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div class="form-control">
+								<label class="label" for="data-agendamento">
+									<span class="label-text">Data</span>
+								</label>
+								<input
+									id="data-agendamento"
+									type="date"
+									class="input input-bordered"
+									bind:value={dataAgendamento}
+									min={minDate}
+									disabled={processando}
+								/>
+							</div>
 
-              <div class="form-control">
-                <label class="label" for="hora-agendamento">
-                  <span class="label-text">Hora</span>
-                </label>
-                <input
-                  id="hora-agendamento"
-                  type="time"
-                  class="input input-bordered"
-                  bind:value={horaAgendamento}
-                  min={horaMinima}
-                  disabled={processando}
-                />
-              </div>
-            </div>
+							<div class="form-control">
+								<label class="label" for="hora-agendamento">
+									<span class="label-text">Hora</span>
+								</label>
+								<input
+									id="hora-agendamento"
+									type="time"
+									class="input input-bordered"
+									bind:value={horaAgendamento}
+									min={horaMinima}
+									disabled={processando}
+								/>
+							</div>
+						</div>
 
-            {#if getPreviewAgendamento()}
-              <div class="alert alert-info mt-4">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  class="stroke-current shrink-0 w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <span>{getPreviewAgendamento()}</span>
-              </div>
-            {/if}
-          {/if}
-        </div>
+						{#if getPreviewAgendamento()}
+							<div class="alert alert-info mt-4">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									class="h-6 w-6 shrink-0 stroke-current"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									></path>
+								</svg>
+								<span>{getPreviewAgendamento()}</span>
+							</div>
+						{/if}
+					{/if}
+				</div>
 
-        <!-- Botão Enviar -->
-        <div class="card-actions justify-end mt-4">
-          <button
-            class="btn btn-primary btn-block"
-            onclick={() => enviarNotificacao()}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner loading-sm"></span>
-              {#if progressoEnvio.total > 1}
-                <span class="ml-2">
-                  Enviando... ({progressoEnvio.enviados}/{progressoEnvio.total})
-                </span>
-              {:else}
-                <span class="ml-2">Enviando...</span>
-              {/if}
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                />
-              </svg>
-            {/if}
-            {#if processando}
-              <!-- Texto já está no bloco acima -->
-            {:else if agendarEnvio && enviarParaTodos}
-              Agendar para Todos ({usuarios.length})
-            {:else if agendarEnvio}
-              Agendar Notificação
-            {:else if enviarParaTodos}
-              Enviar para Todos ({usuarios.length})
-            {:else}
-              Enviar Notificação
-            {/if}
-          </button>
-        </div>
+				<!-- Botão Enviar -->
+				<div class="card-actions mt-4 justify-end">
+					<button
+						class="btn btn-primary btn-block"
+						onclick={() => enviarNotificacao()}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+							{#if progressoEnvio.total > 1}
+								<span class="ml-2">
+									Enviando... ({progressoEnvio.enviados}/{progressoEnvio.total})
+								</span>
+							{:else}
+								<span class="ml-2">Enviando...</span>
+							{/if}
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+								/>
+							</svg>
+						{/if}
+						{#if processando}
+							<!-- Texto já está no bloco acima -->
+						{:else if agendarEnvio && enviarParaTodos}
+							Agendar para Todos ({usuarios.length})
+						{:else if agendarEnvio}
+							Agendar Notificação
+						{:else if enviarParaTodos}
+							Enviar para Todos ({usuarios.length})
+						{:else}
+							Enviar Notificação
+						{/if}
+					</button>
+				</div>
 
-        <!-- Terminal de Status -->
-        <div class="mt-4">
-          <div class="flex items-center justify-between mb-2">
-            <label class="label">
-              <span class="label-text font-medium">Terminal de Status</span>
-            </label>
-            {#if logsEnvio.length > 0}
-              <button
-                type="button"
-                class="btn btn-sm btn-ghost"
-                onclick={limparLogs}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-                Limpar
-              </button>
-            {/if}
-          </div>
-          <div
-            bind:this={terminalScrollRef}
-            class="bg-neutral text-neutral-content p-4 rounded-lg font-mono text-sm max-h-64 overflow-y-auto"
-            style="background-color: #1a1a1a; color: #e5e5e5;"
-          >
-            {#if logsEnvio.length === 0}
-              <div class="text-neutral-content/60 italic">
-                Aguardando envio de notificação...
-              </div>
-            {:else}
-              {#each logsEnvio as log}
-                <div class="mb-1">
-                  <span class="text-neutral-content/60"
-                    >[{formatarTimestamp(log.timestamp)}]</span
-                  >
-                  <span
-                    class="ml-2 badge badge-xs {log.tipo === 'chat'
-                      ? 'badge-info'
-                      : 'badge-secondary'}"
-                  >
-                    {log.tipo.toUpperCase()}
-                  </span>
-                  <span class="ml-2 font-semibold">{log.destinatario}:</span>
-                  <span class="ml-2 {obterCorStatus(log.status)}">
-                    {log.mensagem}
-                  </span>
-                </div>
-              {/each}
-            {/if}
-          </div>
-        </div>
-      </div>
-    </div>
+				<!-- Terminal de Status -->
+				<div class="mt-4">
+					<div class="mb-2 flex items-center justify-between">
+						<label class="label">
+							<span class="label-text font-medium">Terminal de Status</span>
+						</label>
+						{#if logsEnvio.length > 0}
+							<button type="button" class="btn btn-sm btn-ghost" onclick={limparLogs}>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Limpar
+							</button>
+						{/if}
+					</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;"
+					>
+						{#if logsEnvio.length === 0}
+							<div class="text-neutral-content/60 italic">Aguardando envio de notificação...</div>
+						{:else}
+							{#each logsEnvio as log}
+								<div class="mb-1">
+									<span class="text-neutral-content/60">[{formatarTimestamp(log.timestamp)}]</span>
+									<span
+										class="badge badge-xs ml-2 {log.tipo === 'chat'
+											? 'badge-info'
+											: 'badge-secondary'}"
+									>
+										{log.tipo.toUpperCase()}
+									</span>
+									<span class="ml-2 font-semibold">{log.destinatario}:</span>
+									<span class="ml-2 {obterCorStatus(log.status)}">
+										{log.mensagem}
+									</span>
+								</div>
+							{/each}
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Lista de Templates -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="card-title">Templates Disponíveis</h2>
-          <button
-            type="button"
-            class="btn btn-sm btn-outline btn-primary"
-            onclick={() => abrirModalNovoTemplate()}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 4v16m8-8H4"
-              />
-            </svg>
-            Novo Template
-          </button>
-        </div>
+		<!-- Lista de Templates -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<div class="mb-4 flex items-center justify-between">
+					<h2 class="card-title">Templates Disponíveis</h2>
+					<button
+						type="button"
+						class="btn btn-sm btn-outline btn-primary"
+						onclick={() => abrirModalNovoTemplate()}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Novo Template
+					</button>
+				</div>
 
-        {#if carregandoTemplates}
-          <div class="flex flex-col items-center justify-center py-10 gap-4">
-            <span class="loading loading-spinner loading-lg"></span>
-            <p class="text-sm text-base-content/60">Carregando templates...</p>
-          </div>
-        {:else if templates.length > 0}
-          <!-- Mostrar templates se existirem -->
-          <div class="space-y-3 max-h-[600px] overflow-y-auto">
-            {#each templates as template}
-              <div class="card bg-base-200 compact">
-                <div class="card-body">
-                  <div class="flex items-start justify-between">
-                    <div class="flex-1">
-                      <h3 class="font-bold text-sm">{template.nome}</h3>
-                      <p class="text-xs opacity-70 mt-1">{template.titulo}</p>
-                      <p class="text-xs mt-2 line-clamp-2">{template.corpo}</p>
-                      <div class="flex gap-2 mt-2">
-                        <span
-                          class="badge badge-sm {template.tipo === 'sistema'
-                            ? 'badge-primary'
-                            : 'badge-secondary'}"
-                        >
-                          {template.tipo}
-                        </span>
-                        {#if template.variaveis && template.variaveis.length > 0}
-                          <span class="badge badge-sm badge-outline">
-                            {template.variaveis.length} variáveis
-                          </span>
-                        {/if}
-                      </div>
-                    </div>
-                    {#if template.tipo !== "sistema"}
-                      <div class="dropdown dropdown-end">
-                        <button
-                          type="button"
-                          tabindex="0"
-                          class="btn btn-ghost btn-xs"
-                          aria-label="Opções do template"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-4 w-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                            />
-                          </svg>
-                        </button>
-                        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-                        <ul
-                          tabindex="0"
-                          class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32"
-                        >
-                          <li><button type="button">Editar</button></li>
-                          <li>
-                            <button type="button" class="text-error"
-                              >Excluir</button
-                            >
-                          </li>
-                        </ul>
-                      </div>
-                    {/if}
-                  </div>
-                </div>
-              </div>
-            {/each}
-          </div>
-        {:else}
-          <!-- Nenhum template disponível - mostrar botão para criar -->
-          <div class="text-center py-10">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-12 w-12 mx-auto mb-4 opacity-50"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-              />
-            </svg>
-            <p class="font-medium text-base-content mb-2">
-              Nenhum template disponível
-            </p>
-            <p class="text-sm text-base-content/60 mb-4">
-              Clique no botão abaixo para criar os templates padrão do sistema.
-            </p>
-            <button
-              class="btn btn-primary btn-sm"
-              onclick={criarTemplatesPadrao}
-              disabled={criandoTemplates}
-            >
-              {#if criandoTemplates}
-                <span class="loading loading-spinner loading-xs"></span>
-                Criando templates...
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 4v16m8-8H4"
-                  />
-                </svg>
-                Criar Templates Padrão
-              {/if}
-            </button>
-          </div>
-        {/if}
-      </div>
-    </div>
-  </div>
+				{#if carregandoTemplates}
+					<div class="flex flex-col items-center justify-center gap-4 py-10">
+						<span class="loading loading-spinner loading-lg"></span>
+						<p class="text-base-content/60 text-sm">Carregando templates...</p>
+					</div>
+				{:else if templates.length > 0}
+					<!-- Mostrar templates se existirem -->
+					<div class="max-h-[600px] space-y-3 overflow-y-auto">
+						{#each templates as template}
+							<div class="card bg-base-200 compact">
+								<div class="card-body">
+									<div class="flex items-start justify-between">
+										<div class="flex-1">
+											<h3 class="text-sm font-bold">{template.nome}</h3>
+											<p class="mt-1 text-xs opacity-70">{template.titulo}</p>
+											<p class="mt-2 line-clamp-2 text-xs">{template.corpo}</p>
+											<div class="mt-2 flex gap-2">
+												<span
+													class="badge badge-sm {template.tipo === 'sistema'
+														? 'badge-primary'
+														: 'badge-secondary'}"
+												>
+													{template.tipo}
+												</span>
+												{#if template.variaveis && template.variaveis.length > 0}
+													<span class="badge badge-sm badge-outline">
+														{template.variaveis.length} variáveis
+													</span>
+												{/if}
+											</div>
+										</div>
+										{#if template.tipo !== 'sistema'}
+											<div class="dropdown dropdown-end">
+												<button
+													type="button"
+													tabindex="0"
+													class="btn btn-xs"
+													aria-label="Opções do template"
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														class="h-4 w-4"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke="currentColor"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+														/>
+													</svg>
+												</button>
+												<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+												<ul
+													tabindex="0"
+													class="dropdown-content menu bg-base-100 rounded-box w-32 p-2 shadow"
+												>
+													<li><button type="button">Editar</button></li>
+													<li>
+														<button type="button" class="text-error">Excluir</button>
+													</li>
+												</ul>
+											</div>
+										{/if}
+									</div>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<!-- Nenhum template disponível - mostrar botão para criar -->
+					<div class="py-10 text-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mx-auto mb-4 h-12 w-12 opacity-50"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+							/>
+						</svg>
+						<p class="text-base-content mb-2 font-medium">Nenhum template disponível</p>
+						<p class="text-base-content/60 mb-4 text-sm">
+							Clique no botão abaixo para criar os templates padrão do sistema.
+						</p>
+						<button
+							class="btn btn-primary btn-sm"
+							onclick={criarTemplatesPadrao}
+							disabled={criandoTemplates}
+						>
+							{#if criandoTemplates}
+								<span class="loading loading-spinner loading-xs"></span>
+								Criando templates...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 4v16m8-8H4"
+									/>
+								</svg>
+								Criar Templates Padrão
+							{/if}
+						</button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
 
-  <!-- Histórico de Agendamentos -->
-  <div class="card bg-base-100 shadow-xl mt-6">
-    <div class="card-body">
-      <div class="flex items-center justify-between mb-4">
-        <div class="flex items-center gap-3">
-          <div class="p-2 bg-secondary/10 rounded-lg">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 text-secondary"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-          </div>
-          <h2 class="card-title">Histórico de Agendamentos</h2>
-        </div>
+	<!-- Histórico de Agendamentos -->
+	<div class="card bg-base-100 mt-6 shadow-xl">
+		<div class="card-body">
+			<div class="mb-4 flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<div class="bg-secondary/10 rounded-lg p-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-secondary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+					</div>
+					<h2 class="card-title">Histórico de Agendamentos</h2>
+				</div>
 
-        <!-- Filtros -->
-        <div class="flex gap-2">
-          <button
-            type="button"
-            class="btn btn-sm {filtroAgendamento === 'todos'
-              ? 'btn-primary'
-              : 'btn-ghost'}"
-            onclick={() => (filtroAgendamento = "todos")}
-          >
-            Todos
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm {filtroAgendamento === 'agendados'
-              ? 'btn-primary'
-              : 'btn-ghost'}"
-            onclick={() => (filtroAgendamento = "agendados")}
-          >
-            Agendados
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm {filtroAgendamento === 'enviados'
-              ? 'btn-primary'
-              : 'btn-ghost'}"
-            onclick={() => (filtroAgendamento = "enviados")}
-          >
-            Enviados
-          </button>
-        </div>
-      </div>
+				<!-- Filtros -->
+				<div class="flex gap-2">
+					<button
+						type="button"
+						class="btn btn-sm {filtroAgendamento === 'todos' ? 'btn-primary' : 'btn-ghost'}"
+						onclick={() => (filtroAgendamento = 'todos')}
+					>
+						Todos
+					</button>
+					<button
+						type="button"
+						class="btn btn-sm {filtroAgendamento === 'agendados' ? 'btn-primary' : 'btn-ghost'}"
+						onclick={() => (filtroAgendamento = 'agendados')}
+					>
+						Agendados
+					</button>
+					<button
+						type="button"
+						class="btn btn-sm {filtroAgendamento === 'enviados' ? 'btn-primary' : 'btn-ghost'}"
+						onclick={() => (filtroAgendamento = 'enviados')}
+					>
+						Enviados
+					</button>
+				</div>
+			</div>
 
-      {#if agendamentosFiltrados.length === 0}
-        <div class="text-center py-10">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-12 w-12 mx-auto mb-4 opacity-50"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <p class="font-medium text-base-content mb-2">
-            Nenhum agendamento encontrado
-          </p>
-          <p class="text-sm text-base-content/60">
-            Os agendamentos aparecerão aqui quando você agendar envios.
-          </p>
-        </div>
-      {:else}
-        <!-- Tabela de Agendamentos -->
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>Tipo</th>
-                <th>Destinatário</th>
-                <th>Data/Hora</th>
-                <th>Status</th>
-                <th>Template</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each agendamentosFiltrados as agendamento}
-                {@const status = obterStatusAgendamento(agendamento)}
-                {@const nomeDestinatario = obterNomeDestinatario(agendamento)}
-                {@const dataFormatada = formatarDataAgendamento(agendamento)}
-                {@const podeCancelar = status === "agendado"}
-                {@const templateNome =
-                  agendamento.tipo === "email" && agendamento.dados.templateInfo
-                    ? agendamento.dados.templateInfo.nome
-                    : agendamento.tipo === "email" &&
-                        agendamento.dados.templateId
-                      ? "Template removido"
-                      : "-"}
-                <tr>
-                  <td>
-                    <div class="flex items-center gap-2">
-                      {#if agendamento.tipo === "email"}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-5 w-5 text-info"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                          />
-                        </svg>
-                        <span class="badge badge-info badge-sm">Email</span>
-                      {:else}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-5 w-5 text-primary"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                          />
-                        </svg>
-                        <span class="badge badge-primary badge-sm">Chat</span>
-                      {/if}
-                    </div>
-                  </td>
-                  <td>
-                    <div class="font-medium">{nomeDestinatario}</div>
-                    {#if agendamento.tipo === "email"}
-                      <div class="text-xs text-base-content/60">
-                        {agendamento.dados.destinatario}
-                      </div>
-                    {/if}
-                  </td>
-                  <td>
-                    <div class="font-medium">{dataFormatada}</div>
-                    {#if podeCancelar}
-                      {@const tempoRestante =
-                        agendamento.tipo === "email"
-                          ? (agendamento.dados.agendadaPara ?? 0) - Date.now()
-                          : (agendamento.dados.agendadaPara ?? 0) - Date.now()}
-                      {@const horasRestantes = Math.floor(
-                        tempoRestante / (1000 * 60 * 60),
-                      )}
-                      {@const minutosRestantes = Math.floor(
-                        (tempoRestante % (1000 * 60 * 60)) / (1000 * 60),
-                      )}
-                      {#if horasRestantes < 1 && minutosRestantes < 60}
-                        <div class="text-xs text-warning">
-                          Em {minutosRestantes} min
-                        </div>
-                      {:else if horasRestantes < 24}
-                        <div class="text-xs text-info">
-                          Em {horasRestantes}h {minutosRestantes}min
-                        </div>
-                      {/if}
-                    {/if}
-                  </td>
-                  <td>
-                    {#if status === "agendado"}
-                      <span class="badge badge-warning badge-sm">Agendado</span>
-                    {:else if status === "enviado"}
-                      <span class="badge badge-success badge-sm">Enviado</span>
-                    {:else}
-                      <span class="badge badge-error badge-sm">Cancelado</span>
-                    {/if}
-                  </td>
-                  <td>
-                    {#if agendamento.tipo === "email"}
-                      {#if agendamento.dados.templateInfo}
-                        <div class="text-sm">
-                          {agendamento.dados.templateInfo.nome}
-                        </div>
-                      {:else if agendamento.dados.templateId}
-                        <div class="text-sm text-base-content/60 italic">
-                          Template removido
-                        </div>
-                      {:else}
-                        <div class="text-sm text-base-content/60">-</div>
-                      {/if}
-                    {:else}
-                      <div class="text-sm text-base-content/60">-</div>
-                    {/if}
-                  </td>
-                  <td>
-                    {#if podeCancelar}
-                      <button
-                        type="button"
-                        class="btn btn-sm btn-error btn-outline"
-                        onclick={() => cancelarAgendamento(agendamento)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M6 18L18 6M6 6l12 12"
-                          />
-                        </svg>
-                        Cancelar
-                      </button>
-                    {:else}
-                      <span class="text-sm text-base-content/60">-</span>
-                    {/if}
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if agendamentosFiltrados.length === 0}
+				<div class="py-10 text-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="mx-auto mb-4 h-12 w-12 opacity-50"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<p class="text-base-content mb-2 font-medium">Nenhum agendamento encontrado</p>
+					<p class="text-base-content/60 text-sm">
+						Os agendamentos aparecerão aqui quando você agendar envios.
+					</p>
+				</div>
+			{:else}
+				<!-- Tabela de Agendamentos -->
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Tipo</th>
+								<th>Destinatário</th>
+								<th>Data/Hora</th>
+								<th>Status</th>
+								<th>Template</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each agendamentosFiltrados as agendamento}
+								{@const status = obterStatusAgendamento(agendamento)}
+								{@const nomeDestinatario = obterNomeDestinatario(agendamento)}
+								{@const dataFormatada = formatarDataAgendamento(agendamento)}
+								{@const podeCancelar = status === 'agendado'}
+								{@const templateNome =
+									agendamento.tipo === 'email' && agendamento.dados.templateInfo
+										? agendamento.dados.templateInfo.nome
+										: agendamento.tipo === 'email' && agendamento.dados.templateId
+											? 'Template removido'
+											: '-'}
+								<tr>
+									<td>
+										<div class="flex items-center gap-2">
+											{#if agendamento.tipo === 'email'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="text-info h-5 w-5"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+													/>
+												</svg>
+												<span class="badge badge-info badge-sm">Email</span>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="text-primary h-5 w-5"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+													/>
+												</svg>
+												<span class="badge badge-primary badge-sm">Chat</span>
+											{/if}
+										</div>
+									</td>
+									<td>
+										<div class="font-medium">{nomeDestinatario}</div>
+										{#if agendamento.tipo === 'email'}
+											<div class="text-base-content/60 text-xs">
+												{agendamento.dados.destinatario}
+											</div>
+										{/if}
+									</td>
+									<td>
+										<div class="font-medium">{dataFormatada}</div>
+										{#if podeCancelar}
+											{@const tempoRestante =
+												agendamento.tipo === 'email'
+													? (agendamento.dados.agendadaPara ?? 0) - Date.now()
+													: (agendamento.dados.agendadaPara ?? 0) - Date.now()}
+											{@const horasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60))}
+											{@const minutosRestantes = Math.floor(
+												(tempoRestante % (1000 * 60 * 60)) / (1000 * 60)
+											)}
+											{#if horasRestantes < 1 && minutosRestantes < 60}
+												<div class="text-warning text-xs">
+													Em {minutosRestantes} min
+												</div>
+											{:else if horasRestantes < 24}
+												<div class="text-info text-xs">
+													Em {horasRestantes}h {minutosRestantes}min
+												</div>
+											{/if}
+										{/if}
+									</td>
+									<td>
+										{#if status === 'agendado'}
+											<span class="badge badge-warning badge-sm">Agendado</span>
+										{:else if status === 'enviado'}
+											<span class="badge badge-success badge-sm">Enviado</span>
+										{:else}
+											<span class="badge badge-error badge-sm">Cancelado</span>
+										{/if}
+									</td>
+									<td>
+										{#if agendamento.tipo === 'email'}
+											{#if agendamento.dados.templateInfo}
+												<div class="text-sm">
+													{agendamento.dados.templateInfo.nome}
+												</div>
+											{:else if agendamento.dados.templateId}
+												<div class="text-base-content/60 text-sm italic">Template removido</div>
+											{:else}
+												<div class="text-base-content/60 text-sm">-</div>
+											{/if}
+										{:else}
+											<div class="text-base-content/60 text-sm">-</div>
+										{/if}
+									</td>
+									<td>
+										{#if podeCancelar}
+											<button
+												type="button"
+												class="btn btn-sm btn-error btn-outline"
+												onclick={() => cancelarAgendamento(agendamento)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M6 18L18 6M6 6l12 12"
+													/>
+												</svg>
+												Cancelar
+											</button>
+										{:else}
+											<span class="text-base-content/60 text-sm">-</span>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  <!-- Info -->
-  <div class="alert alert-warning mt-6">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      class="stroke-current shrink-0 w-6 h-6"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-      ></path>
-    </svg>
-    <span
-      >Para enviar emails, certifique-se de configurar o SMTP em Configurações
-      de Email.</span
-    >
-  </div>
+	<!-- Info -->
+	<div class="alert alert-warning mt-6">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="h-6 w-6 shrink-0 stroke-current"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+			></path>
+		</svg>
+		<span>Para enviar emails, certifique-se de configurar o SMTP em Configurações de Email.</span>
+	</div>
 </div>
 
 <!-- Modal Novo Template -->
 {#if modalNovoTemplateAberto}
-  <div class="modal modal-open">
-    <div class="modal-box max-w-2xl">
-      <h3 class="font-bold text-lg mb-4">Criar Novo Template</h3>
+	<div class="modal modal-open">
+		<div class="modal-box max-w-2xl">
+			<h3 class="mb-4 text-lg font-bold">Criar Novo Template</h3>
 
-      <div class="space-y-4">
-        <!-- Código -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Código *</span>
-            <span class="label-text-alt">Ex: AVISO_IMPORTANTE</span>
-          </label>
-          <input
-            type="text"
-            bind:value={codigoTemplate}
-            placeholder="CODIGO_TEMPLATE"
-            class="input input-bordered"
-            maxlength="50"
-          />
-          <label class="label">
-            <span class="label-text-alt"
-              >Código único para identificar o template (será convertido para
-              MAIÚSCULAS)</span
-            >
-          </label>
-        </div>
+			<div class="space-y-4">
+				<!-- Código -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Código *</span>
+						<span class="label-text-alt">Ex: AVISO_IMPORTANTE</span>
+					</label>
+					<input
+						type="text"
+						bind:value={codigoTemplate}
+						placeholder="CODIGO_TEMPLATE"
+						class="input input-bordered"
+						maxlength="50"
+					/>
+					<label class="label">
+						<span class="label-text-alt"
+							>Código único para identificar o template (será convertido para MAIÚSCULAS)</span
+						>
+					</label>
+				</div>
 
-        <!-- Nome -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Nome *</span>
-          </label>
-          <input
-            type="text"
-            bind:value={nomeTemplate}
-            placeholder="Nome do Template"
-            class="input input-bordered"
-            maxlength="100"
-          />
-          <label class="label">
-            <span class="label-text-alt"
-              >Nome exibido na lista de templates</span
-            >
-          </label>
-        </div>
+				<!-- Nome -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Nome *</span>
+					</label>
+					<input
+						type="text"
+						bind:value={nomeTemplate}
+						placeholder="Nome do Template"
+						class="input input-bordered"
+						maxlength="100"
+					/>
+					<label class="label">
+						<span class="label-text-alt">Nome exibido na lista de templates</span>
+					</label>
+				</div>
 
-        <!-- Título -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Título *</span>
-          </label>
-          <input
-            type="text"
-            bind:value={tituloTemplate}
-            placeholder="Título da Mensagem"
-            class="input input-bordered"
-            maxlength="200"
-          />
-          <label class="label">
-            <span class="label-text-alt"
-              >Título usado no assunto do email ou cabeçalho da mensagem</span
-            >
-          </label>
-        </div>
+				<!-- Título -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Título *</span>
+					</label>
+					<input
+						type="text"
+						bind:value={tituloTemplate}
+						placeholder="Título da Mensagem"
+						class="input input-bordered"
+						maxlength="200"
+					/>
+					<label class="label">
+						<span class="label-text-alt"
+							>Título usado no assunto do email ou cabeçalho da mensagem</span
+						>
+					</label>
+				</div>
 
-        <!-- Corpo -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Corpo da Mensagem *</span>
-          </label>
-          <textarea
-            bind:value={corpoTemplate}
-            placeholder="Digite o conteúdo da mensagem..."
-            class="textarea textarea-bordered h-32"
-            maxlength="2000"
-          ></textarea>
-          <label class="label">
-            <span class="label-text-alt"
-              >Use {"{{"}variavel{"}}"} para variáveis dinâmicas (ex: {"{{"}nome{"}}"},
-              {"{{"}data{"}}"})</span
-            >
-          </label>
-        </div>
+				<!-- Corpo -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Corpo da Mensagem *</span>
+					</label>
+					<textarea
+						bind:value={corpoTemplate}
+						placeholder="Digite o conteúdo da mensagem..."
+						class="textarea textarea-bordered h-32"
+						maxlength="2000"
+					></textarea>
+					<label class="label">
+						<span class="label-text-alt"
+							>Use {'{{'}variavel{'}}'} para variáveis dinâmicas (ex: {'{{'}nome{'}}'},
+							{'{{'}data{'}}'})</span
+						>
+					</label>
+				</div>
 
-        <!-- Variáveis -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Variáveis (opcional)</span>
-          </label>
-          <input
-            type="text"
-            bind:value={variaveisTemplate}
-            placeholder="nome, data, valor (separadas por vírgula)"
-            class="input input-bordered"
-          />
-          <label class="label">
-            <span class="label-text-alt"
-              >Liste as variáveis que podem ser substituídas no template
-              (separadas por vírgula ou espaço)</span
-            >
-          </label>
-        </div>
-      </div>
+				<!-- Variáveis -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Variáveis (opcional)</span>
+					</label>
+					<input
+						type="text"
+						bind:value={variaveisTemplate}
+						placeholder="nome, data, valor (separadas por vírgula)"
+						class="input input-bordered"
+					/>
+					<label class="label">
+						<span class="label-text-alt"
+							>Liste as variáveis que podem ser substituídas no template (separadas por vírgula ou
+							espaço)</span
+						>
+					</label>
+				</div>
+			</div>
 
-      <div class="modal-action">
-        <button
-          class="btn btn-ghost"
-          onclick={fecharModalNovoTemplate}
-          disabled={criandoNovoTemplate}
-        >
-          Cancelar
-        </button>
-        <button
-          class="btn btn-primary"
-          onclick={salvarNovoTemplate}
-          disabled={criandoNovoTemplate}
-        >
-          {#if criandoNovoTemplate}
-            <span class="loading loading-spinner loading-sm"></span>
-            Criando...
-          {:else}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-            Criar Template
-          {/if}
-        </button>
-      </div>
-    </div>
-    <div class="modal-backdrop" onclick={fecharModalNovoTemplate}></div>
-  </div>
+			<div class="modal-action">
+				<button class="btn" onclick={fecharModalNovoTemplate} disabled={criandoNovoTemplate}>
+					Cancelar
+				</button>
+				<button class="btn btn-primary" onclick={salvarNovoTemplate} disabled={criandoNovoTemplate}>
+					{#if criandoNovoTemplate}
+						<span class="loading loading-spinner loading-sm"></span>
+						Criando...
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						Criar Template
+					{/if}
+				</button>
+			</div>
+		</div>
+		<div class="modal-backdrop" onclick={fecharModalNovoTemplate}></div>
+	</div>
 {/if}
diff --git a/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
index 8424660..5592266 100644
--- a/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
@@ -1,848 +1,799 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import { goto } from "$app/navigation";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  type RoleRow = {
-    _id: Id<"roles">;
-    _creationTime: number;
-    nome: string;
-    descricao: string;
-    nivel: number;
-    setor?: string;
-    customizado: boolean;
-    editavel?: boolean;
-    criadoPor?: Id<"usuarios">;
-  };
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import { goto } from '$app/navigation';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	type RoleRow = {
+		_id: Id<'roles'>;
+		_creationTime: number;
+		nome: string;
+		descricao: string;
+		nivel: number;
+		setor?: string;
+		customizado: boolean;
+		editavel?: boolean;
+		criadoPor?: Id<'usuarios'>;
+	};
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  // Carregar lista de roles e catálogo de recursos/ações
-  const rolesQuery = useQuery(api.roles.listar, {});
-  const catalogoQuery = useQuery(api.permissoesAcoes.listarRecursosEAcoes, {});
+	// Carregar lista de roles e catálogo de recursos/ações
+	const rolesQuery = useQuery(api.roles.listar, {});
+	const catalogoQuery = useQuery(api.permissoesAcoes.listarRecursosEAcoes, {});
 
-  let salvando = $state(false);
-  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(
-    null,
-  );
-  let busca = $state("");
-  let filtroRole = $state("");
-  // Controla quais recursos estão expandidos (mostrando as ações) por perfil
-  // Formato: { "roleId-recurso": true/false }
-  let recursosExpandidos: Record<string, boolean> = $state({});
+	let salvando = $state(false);
+	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);
+	let busca = $state('');
+	let filtroRole = $state('');
+	// Controla quais recursos estão expandidos (mostrando as ações) por perfil
+	// Formato: { "roleId-recurso": true/false }
+	let recursosExpandidos: Record<string, boolean> = $state({});
 
-  // Gerenciamento de Perfis
-  let modalGerenciarPerfisAberto = $state(false);
-  let perfilSendoEditado = $state<RoleRow | null>(null);
-  let nomeNovoPerfil = $state("");
-  let descricaoNovoPerfil = $state("");
-  let nivelNovoPerfil = $state(3);
-  let processando = $state(false);
+	// Gerenciamento de Perfis
+	let modalGerenciarPerfisAberto = $state(false);
+	let perfilSendoEditado = $state<RoleRow | null>(null);
+	let nomeNovoPerfil = $state('');
+	let descricaoNovoPerfil = $state('');
+	let nivelNovoPerfil = $state(3);
+	let processando = $state(false);
 
-  // Cache de permissões por role
-  let permissoesPorRole: Record<
-    string,
-    Array<{ recurso: string; acoes: Array<string> }>
-  > = $state({});
+	// Cache de permissões por role
+	let permissoesPorRole: Record<string, Array<{ recurso: string; acoes: Array<string> }>> = $state(
+		{}
+	);
 
-  async function carregarPermissoesRole(roleId: Id<"roles">) {
-    if (permissoesPorRole[roleId]) return;
-    const dados = await client.query(
-      api.permissoesAcoes.listarPermissoesAcoesPorRole,
-      { roleId },
-    );
-    permissoesPorRole[roleId] = dados;
-  }
+	async function carregarPermissoesRole(roleId: Id<'roles'>) {
+		if (permissoesPorRole[roleId]) return;
+		const dados = await client.query(api.permissoesAcoes.listarPermissoesAcoesPorRole, { roleId });
+		permissoesPorRole[roleId] = dados;
+	}
 
-  function toggleRecurso(roleId: Id<"roles">, recurso: string) {
-    const key = `${roleId}-${recurso}`;
-    recursosExpandidos[key] = !recursosExpandidos[key];
-  }
+	function toggleRecurso(roleId: Id<'roles'>, recurso: string) {
+		const key = `${roleId}-${recurso}`;
+		recursosExpandidos[key] = !recursosExpandidos[key];
+	}
 
-  function isRecursoExpandido(roleId: Id<"roles">, recurso: string) {
-    const key = `${roleId}-${recurso}`;
-    return recursosExpandidos[key] ?? false;
-  }
+	function isRecursoExpandido(roleId: Id<'roles'>, recurso: string) {
+		const key = `${roleId}-${recurso}`;
+		return recursosExpandidos[key] ?? false;
+	}
 
-  function mostrarMensagem(tipo: "success" | "error", texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 3000);
-  }
+	function mostrarMensagem(tipo: 'success' | 'error', texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 3000);
+	}
 
-  const rolesFiltradas = $derived.by(() => {
-    if (!rolesQuery.data) return [];
-    let rs = rolesQuery.data; // Removed explicit type annotation
-    if (filtroRole) rs = rs.filter((r) => r._id === filtroRole); // Removed as any
-    if (busca.trim()) {
-      const b = busca.toLowerCase();
-      rs = rs.filter(
-        (r) =>
-          r.descricao.toLowerCase().includes(b) ||
-          r.nome.toLowerCase().includes(b),
-      );
-    }
-    return rs;
-  });
+	const rolesFiltradas = $derived.by(() => {
+		if (!rolesQuery.data) return [];
+		let rs = rolesQuery.data; // Removed explicit type annotation
+		if (filtroRole) rs = rs.filter((r) => r._id === filtroRole); // Removed as any
+		if (busca.trim()) {
+			const b = busca.toLowerCase();
+			rs = rs.filter(
+				(r) => r.descricao.toLowerCase().includes(b) || r.nome.toLowerCase().includes(b)
+			);
+		}
+		return rs;
+	});
 
-  // Carregar permissões para todos os perfis filtrados quando necessário
-  $effect(() => {
-    if (rolesFiltradas && catalogoQuery.data) {
-      for (const roleRow of rolesFiltradas) {
-        if (roleRow.nivel > 1) {
-          carregarPermissoesRole(roleRow._id);
-        }
-      }
-    }
-  });
+	// Carregar permissões para todos os perfis filtrados quando necessário
+	$effect(() => {
+		if (rolesFiltradas && catalogoQuery.data) {
+			for (const roleRow of rolesFiltradas) {
+				if (roleRow.nivel > 1) {
+					carregarPermissoesRole(roleRow._id);
+				}
+			}
+		}
+	});
 
-  async function toggleAcao(
-    roleId: Id<"roles">,
-    recurso: string,
-    acao: string,
-    conceder: boolean,
-  ) {
-    try {
-      salvando = true;
-      await client.mutation(api.permissoesAcoes.atualizarPermissaoAcao, {
-        roleId,
-        recurso,
-        acao,
-        conceder,
-      });
-      // Atualizar cache local
-      const atual = permissoesPorRole[roleId] || [];
-      const entry = atual.find((e) => e.recurso === recurso);
-      if (entry) {
-        const set = new Set(entry.acoes);
-        if (conceder) set.add(acao);
-        else set.delete(acao);
-        entry.acoes = Array.from(set);
-      } else {
-        permissoesPorRole[roleId] = [
-          ...atual,
-          { recurso, acoes: conceder ? [acao] : [] },
-        ];
-      }
-      mostrarMensagem("success", "Permissão atualizada com sucesso!");
-    } catch (error: unknown) {
-      // Changed to unknown
-      const message =
-        error instanceof Error ? error.message : "Erro ao atualizar permissão";
-      mostrarMensagem("error", message);
-    } finally {
-      salvando = false;
-    }
-  }
+	async function toggleAcao(roleId: Id<'roles'>, recurso: string, acao: string, conceder: boolean) {
+		try {
+			salvando = true;
+			await client.mutation(api.permissoesAcoes.atualizarPermissaoAcao, {
+				roleId,
+				recurso,
+				acao,
+				conceder
+			});
+			// Atualizar cache local
+			const atual = permissoesPorRole[roleId] || [];
+			const entry = atual.find((e) => e.recurso === recurso);
+			if (entry) {
+				const set = new Set(entry.acoes);
+				if (conceder) set.add(acao);
+				else set.delete(acao);
+				entry.acoes = Array.from(set);
+			} else {
+				permissoesPorRole[roleId] = [...atual, { recurso, acoes: conceder ? [acao] : [] }];
+			}
+			mostrarMensagem('success', 'Permissão atualizada com sucesso!');
+		} catch (error: unknown) {
+			// Changed to unknown
+			const message = error instanceof Error ? error.message : 'Erro ao atualizar permissão';
+			mostrarMensagem('error', message);
+		} finally {
+			salvando = false;
+		}
+	}
 
-  function isConcedida(roleId: Id<"roles">, recurso: string, acao: string) {
-    const dados = permissoesPorRole[roleId];
-    const entry = dados?.find((e) => e.recurso === recurso);
-    return entry ? entry.acoes.includes(acao) : false;
-  }
+	function isConcedida(roleId: Id<'roles'>, recurso: string, acao: string) {
+		const dados = permissoesPorRole[roleId];
+		const entry = dados?.find((e) => e.recurso === recurso);
+		return entry ? entry.acoes.includes(acao) : false;
+	}
 
-  function abrirModalCriarPerfil() {
-    nomeNovoPerfil = "";
-    descricaoNovoPerfil = "";
-    nivelNovoPerfil = 3; // Default to a common level
-    perfilSendoEditado = null;
-    modalGerenciarPerfisAberto = true;
-  }
+	function abrirModalCriarPerfil() {
+		nomeNovoPerfil = '';
+		descricaoNovoPerfil = '';
+		nivelNovoPerfil = 3; // Default to a common level
+		perfilSendoEditado = null;
+		modalGerenciarPerfisAberto = true;
+	}
 
-  function prepararEdicaoPerfil(role: RoleRow) {
-    perfilSendoEditado = role;
-    nomeNovoPerfil = role.nome;
-    descricaoNovoPerfil = role.descricao;
-    nivelNovoPerfil = role.nivel;
-    modalGerenciarPerfisAberto = true;
-  }
+	function prepararEdicaoPerfil(role: RoleRow) {
+		perfilSendoEditado = role;
+		nomeNovoPerfil = role.nome;
+		descricaoNovoPerfil = role.descricao;
+		nivelNovoPerfil = role.nivel;
+		modalGerenciarPerfisAberto = true;
+	}
 
-  function fecharModalGerenciarPerfis() {
-    modalGerenciarPerfisAberto = false;
-    perfilSendoEditado = null;
-  }
+	function fecharModalGerenciarPerfis() {
+		modalGerenciarPerfisAberto = false;
+		perfilSendoEditado = null;
+	}
 
-  async function criarNovoPerfil() {
-    if (!nomeNovoPerfil.trim()) return;
+	async function criarNovoPerfil() {
+		if (!nomeNovoPerfil.trim()) return;
 
-    processando = true;
-    try {
-      const result = await client.mutation(api.roles.criar, {
-        nome: nomeNovoPerfil.trim(),
-        descricao: descricaoNovoPerfil.trim(),
-        nivel: nivelNovoPerfil,
-        customizado: true,
-      });
+		processando = true;
+		try {
+			const result = await client.mutation(api.roles.criar, {
+				nome: nomeNovoPerfil.trim(),
+				descricao: descricaoNovoPerfil.trim(),
+				nivel: nivelNovoPerfil,
+				customizado: true
+			});
 
-      if (result.sucesso) {
-        mostrarMensagem("success", "Perfil criado com sucesso!");
-        nomeNovoPerfil = "";
-        descricaoNovoPerfil = "";
-        nivelNovoPerfil = 3;
-        fecharModalGerenciarPerfis();
-        if (rolesQuery.refetch) {
-          // Verificação para garantir que refetch existe
-          rolesQuery.refetch(); // Atualiza a lista de perfis
-        }
-      } else {
-        mostrarMensagem("error", `Erro ao criar perfil: ${result.erro}`);
-      }
-    } catch (error: unknown) {
-      const message = error instanceof Error ? error.message : String(error);
-      mostrarMensagem("error", `Erro ao criar perfil: ${message}`);
-    } finally {
-      processando = false;
-    }
-  }
+			if (result.sucesso) {
+				mostrarMensagem('success', 'Perfil criado com sucesso!');
+				nomeNovoPerfil = '';
+				descricaoNovoPerfil = '';
+				nivelNovoPerfil = 3;
+				fecharModalGerenciarPerfis();
+				if (rolesQuery.refetch) {
+					// Verificação para garantir que refetch existe
+					rolesQuery.refetch(); // Atualiza a lista de perfis
+				}
+			} else {
+				mostrarMensagem('error', `Erro ao criar perfil: ${result.erro}`);
+			}
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : String(error);
+			mostrarMensagem('error', `Erro ao criar perfil: ${message}`);
+		} finally {
+			processando = false;
+		}
+	}
 
-  async function editarPerfil() {
-    if (!perfilSendoEditado || !nomeNovoPerfil.trim()) return;
+	async function editarPerfil() {
+		if (!perfilSendoEditado || !nomeNovoPerfil.trim()) return;
 
-    processando = true;
-    try {
-      const result = await client.mutation(api.roles.atualizar, {
-        roleId: perfilSendoEditado._id,
-        nome: nomeNovoPerfil.trim(),
-        descricao: descricaoNovoPerfil.trim(),
-        nivel: nivelNovoPerfil,
-        setor: perfilSendoEditado.setor, // Manter setor existente
-      });
+		processando = true;
+		try {
+			const result = await client.mutation(api.roles.atualizar, {
+				roleId: perfilSendoEditado._id,
+				nome: nomeNovoPerfil.trim(),
+				descricao: descricaoNovoPerfil.trim(),
+				nivel: nivelNovoPerfil,
+				setor: perfilSendoEditado.setor // Manter setor existente
+			});
 
-      if (result.sucesso) {
-        mostrarMensagem("success", "Perfil atualizado com sucesso!");
-        fecharModalGerenciarPerfis();
-        if (rolesQuery.refetch) {
-          // Verificação para garantir que refetch existe
-          rolesQuery.refetch(); // Atualiza a lista de perfis
-        }
-      } else {
-        mostrarMensagem("error", `Erro ao atualizar perfil: ${result.erro}`);
-      }
-    } catch (error: unknown) {
-      const message = error instanceof Error ? error.message : String(error);
-      mostrarMensagem("error", `Erro ao atualizar perfil: ${message}`);
-    } finally {
-      processando = false;
-    }
-  }
+			if (result.sucesso) {
+				mostrarMensagem('success', 'Perfil atualizado com sucesso!');
+				fecharModalGerenciarPerfis();
+				if (rolesQuery.refetch) {
+					// Verificação para garantir que refetch existe
+					rolesQuery.refetch(); // Atualiza a lista de perfis
+				}
+			} else {
+				mostrarMensagem('error', `Erro ao atualizar perfil: ${result.erro}`);
+			}
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : String(error);
+			mostrarMensagem('error', `Erro ao atualizar perfil: ${message}`);
+		} finally {
+			processando = false;
+		}
+	}
 </script>
 
-<ProtectedRoute allowedRoles={["ti_master", "admin"]} maxLevel={1}>
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/" class="text-primary hover:text-primary-focus">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-            />
-          </svg>
-          Dashboard
-        </a>
-      </li>
-      <li>
-        <a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
-      </li>
-      <li class="font-semibold">Gerenciar Perfis & Permissões</li>
-    </ul>
-  </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin']} maxLevel={1}>
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/" class="text-primary hover:text-primary-focus">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+						/>
+					</svg>
+					Dashboard
+				</a>
+			</li>
+			<li>
+				<a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
+			</li>
+			<li class="font-semibold">Gerenciar Perfis & Permissões</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center gap-3 mb-2">
-      <div class="p-3 bg-primary/10 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-primary"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-          />
-        </svg>
-      </div>
-      <div class="flex-1">
-        <h1 class="text-3xl font-bold text-base-content">
-          Gerenciar Perfis & Permissões de Acesso
-        </h1>
-        <p class="text-base-content/60 mt-1">
-          Configure as permissões de acesso aos menus do sistema por função
-        </p>
-      </div>
-      <button class="btn btn-primary gap-2" onclick={abrirModalCriarPerfil}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 4v16m8-8H4"
-          />
-        </svg>
-        Criar Novo Perfil
-      </button>
-      <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="mb-2 flex items-center gap-3">
+			<div class="bg-primary/10 rounded-xl p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-primary h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+					/>
+				</svg>
+			</div>
+			<div class="flex-1">
+				<h1 class="text-base-content text-3xl font-bold">
+					Gerenciar Perfis & Permissões de Acesso
+				</h1>
+				<p class="text-base-content/60 mt-1">
+					Configure as permissões de acesso aos menus do sistema por função
+				</p>
+			</div>
+			<button class="btn btn-primary gap-2" onclick={abrirModalCriarPerfil}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Criar Novo Perfil
+			</button>
+			<button class="btn gap-2" onclick={() => goto('/ti')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
 
-  <!-- Alertas -->
-  {#if mensagem}
-    <div
-      class="alert mb-6 shadow-lg"
-      class:alert-success={mensagem.tipo === "success"}
-      class:alert-error={mensagem.tipo === "error"}
-    >
-      {#if mensagem.tipo === "success"}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          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>
-      {:else}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          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>
-      {/if}
-      <span class="font-semibold">{mensagem.texto}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if mensagem}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={mensagem.tipo === 'success'}
+			class:alert-error={mensagem.tipo === 'error'}
+		>
+			{#if mensagem.tipo === 'success'}
+				<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>
+			{:else}
+				<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>
+			{/if}
+			<span class="font-semibold">{mensagem.texto}</span>
+		</div>
+	{/if}
 
-  <!-- Filtros e Busca -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <!-- Busca por menu -->
-        <div class="form-control">
-          <label class="label" for="busca">
-            <span class="label-text font-semibold">Buscar Perfil</span>
-          </label>
-          <div class="relative">
-            <input
-              id="busca"
-              type="text"
-              placeholder="Digite o nome/descrição do perfil..."
-              class="input input-bordered w-full pr-10"
-              bind:value={busca}
-            />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 absolute right-3 top-3.5 text-base-content/40"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
-          </div>
-        </div>
+	<!-- Filtros e Busca -->
+	<div class="card bg-base-100 mb-6 shadow-xl">
+		<div class="card-body">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+				<!-- Busca por menu -->
+				<div class="form-control">
+					<label class="label" for="busca">
+						<span class="label-text font-semibold">Buscar Perfil</span>
+					</label>
+					<div class="relative">
+						<input
+							id="busca"
+							type="text"
+							placeholder="Digite o nome/descrição do perfil..."
+							class="input input-bordered w-full pr-10"
+							bind:value={busca}
+						/>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-base-content/40 absolute top-3.5 right-3 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							/>
+						</svg>
+					</div>
+				</div>
 
-        <!-- Filtro por perfil -->
-        <div class="form-control">
-          <label class="label" for="filtroRole">
-            <span class="label-text font-semibold">Filtrar por Perfil</span>
-          </label>
-          <select
-            id="filtroRole"
-            class="select select-bordered w-full"
-            bind:value={filtroRole}
-          >
-            <option value="">Todos os perfis</option>
-            {#if rolesQuery.data}
-              {#each rolesQuery.data as roleRow}
-                <option value={roleRow._id}>
-                  {roleRow.descricao} ({roleRow.nome})
-                </option>
-              {/each}
-            {/if}
-          </select>
-        </div>
-      </div>
+				<!-- Filtro por perfil -->
+				<div class="form-control">
+					<label class="label" for="filtroRole">
+						<span class="label-text font-semibold">Filtrar por Perfil</span>
+					</label>
+					<select id="filtroRole" class="select select-bordered w-full" bind:value={filtroRole}>
+						<option value="">Todos os perfis</option>
+						{#if rolesQuery.data}
+							{#each rolesQuery.data as roleRow}
+								<option value={roleRow._id}>
+									{roleRow.descricao} ({roleRow.nome})
+								</option>
+							{/each}
+						{/if}
+					</select>
+				</div>
+			</div>
 
-      {#if busca || filtroRole}
-        <div class="flex items-center gap-2 mt-2">
-          <span class="text-sm text-base-content/60">Filtros ativos:</span>
-          {#if busca}
-            <div class="badge badge-primary gap-2">
-              Busca: {busca}
-              <button
-                class="btn btn-ghost btn-xs"
-                onclick={() => (busca = "")}
-                aria-label="Limpar busca"
-              >
-                ✕
-              </button>
-            </div>
-          {/if}
-          {#if filtroRole}
-            <div class="badge badge-secondary gap-2">
-              Perfil filtrado
-              <button
-                class="btn btn-ghost btn-xs"
-                onclick={() => (filtroRole = "")}
-                aria-label="Limpar filtro"
-              >
-                ✕
-              </button>
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if busca || filtroRole}
+				<div class="mt-2 flex items-center gap-2">
+					<span class="text-base-content/60 text-sm">Filtros ativos:</span>
+					{#if busca}
+						<div class="badge badge-primary gap-2">
+							Busca: {busca}
+							<button class="btn btn-xs" onclick={() => (busca = '')} aria-label="Limpar busca">
+								✕
+							</button>
+						</div>
+					{/if}
+					{#if filtroRole}
+						<div class="badge badge-secondary gap-2">
+							Perfil filtrado
+							<button
+								class="btn btn-xs"
+								onclick={() => (filtroRole = '')}
+								aria-label="Limpar filtro"
+							>
+								✕
+							</button>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  <!-- Informações sobre o sistema de permissões -->
-  <div class="alert alert-info mb-6 shadow-lg">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="stroke-current shrink-0 h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-    <div>
-      <h3 class="font-bold text-lg">Como funciona o sistema de permissões:</h3>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
-        <div>
-          <h4 class="font-semibold text-sm">Tipos de Permissão:</h4>
-          <ul class="text-sm mt-1 space-y-1">
-            <li>
-              • <strong>Acessar:</strong> Visualizar menu e acessar página
-            </li>
-            <li>• <strong>Consultar:</strong> Ver dados (requer "Acessar")</li>
-            <li>
-              • <strong>Gravar:</strong> Criar/editar/excluir (requer "Consultar")
-            </li>
-          </ul>
-        </div>
-        <div>
-          <h4 class="font-semibold text-sm">Perfis Especiais:</h4>
-          <ul class="text-sm mt-1 space-y-1">
-            <li>• <strong>Admin e TI:</strong> Acesso total automático</li>
-            <li>• <strong>Dashboard:</strong> Público para todos</li>
-            <li>
-              • <strong>Perfil Customizado:</strong> Permissões personalizadas
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Informações sobre o sistema de permissões -->
+	<div class="alert alert-info mb-6 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+		<div>
+			<h3 class="text-lg font-bold">Como funciona o sistema de permissões:</h3>
+			<div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
+				<div>
+					<h4 class="text-sm font-semibold">Tipos de Permissão:</h4>
+					<ul class="mt-1 space-y-1 text-sm">
+						<li>
+							• <strong>Acessar:</strong> Visualizar menu e acessar página
+						</li>
+						<li>• <strong>Consultar:</strong> Ver dados (requer "Acessar")</li>
+						<li>
+							• <strong>Gravar:</strong> Criar/editar/excluir (requer "Consultar")
+						</li>
+					</ul>
+				</div>
+				<div>
+					<h4 class="text-sm font-semibold">Perfis Especiais:</h4>
+					<ul class="mt-1 space-y-1 text-sm">
+						<li>• <strong>Admin e TI:</strong> Acesso total automático</li>
+						<li>• <strong>Dashboard:</strong> Público para todos</li>
+						<li>
+							• <strong>Perfil Customizado:</strong> Permissões personalizadas
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Matriz de Permissões por Ação -->
-  {#if rolesQuery.isLoading || catalogoQuery.isLoading}
-    <div class="flex justify-center items-center py-12">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-    </div>
-  {:else if rolesQuery.error}
-    <div class="alert alert-error">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        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 ao carregar perfis: {rolesQuery.error.message}</span>
-    </div>
-  {:else if rolesQuery.data && catalogoQuery.data}
-    {#if rolesFiltradas.length === 0}
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body items-center text-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-16 w-16 text-base-content/30"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            />
-          </svg>
-          <h3 class="text-xl font-bold mt-4">Nenhum resultado encontrado</h3>
-          <p class="text-base-content/60">
-            {busca
-              ? `Não foram encontrados perfis com "${busca}"`
-              : "Nenhum perfil corresponde aos filtros aplicados"}
-          </p>
-          <button
-            class="btn btn-primary btn-sm mt-4"
-            onclick={() => {
-              busca = "";
-              filtroRole = "";
-            }}
-          >
-            Limpar Filtros
-          </button>
-        </div>
-      </div>
-    {/if}
+	<!-- Matriz de Permissões por Ação -->
+	{#if rolesQuery.isLoading || catalogoQuery.isLoading}
+		<div class="flex items-center justify-center py-12">
+			<span class="loading loading-spinner loading-lg text-primary"></span>
+		</div>
+	{:else if rolesQuery.error}
+		<div class="alert alert-error">
+			<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 ao carregar perfis: {rolesQuery.error.message}</span>
+		</div>
+	{:else if rolesQuery.data && catalogoQuery.data}
+		{#if rolesFiltradas.length === 0}
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body items-center text-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-base-content/30 h-16 w-16"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+					<h3 class="mt-4 text-xl font-bold">Nenhum resultado encontrado</h3>
+					<p class="text-base-content/60">
+						{busca
+							? `Não foram encontrados perfis com "${busca}"`
+							: 'Nenhum perfil corresponde aos filtros aplicados'}
+					</p>
+					<button
+						class="btn btn-primary btn-sm mt-4"
+						onclick={() => {
+							busca = '';
+							filtroRole = '';
+						}}
+					>
+						Limpar Filtros
+					</button>
+				</div>
+			</div>
+		{/if}
 
-    {#each rolesFiltradas as roleRow}
-      {@const roleId = roleRow._id}
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <div class="flex items-center justify-between mb-4 flex-wrap gap-4">
-            <div class="flex-1 min-w-[200px]">
-              <div class="flex items-center gap-3 mb-2">
-                <h2 class="card-title text-2xl">{roleRow.descricao}</h2>
-                <div class="badge badge-lg badge-primary">
-                  Nível {roleRow.nivel}
-                </div>
-                {#if roleRow.nivel <= 1}
-                  <div class="badge badge-lg badge-success gap-1">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <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>
-                    Acesso Total
-                  </div>
-                {/if}
-              </div>
-              <p class="text-sm text-base-content/60">
-                <span class="font-mono bg-base-200 px-2 py-1 rounded"
-                  >{roleRow.nome}</span
-                >
-              </p>
-            </div>
-            <div class="flex items-center gap-2">
-              <button
-                type="button"
-                class="btn btn-outline btn-sm"
-                onclick={() => prepararEdicaoPerfil(roleRow)}
-              >
-                Editar
-              </button>
-            </div>
-          </div>
+		{#each rolesFiltradas as roleRow}
+			{@const roleId = roleRow._id}
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<div class="mb-4 flex flex-wrap items-center justify-between gap-4">
+						<div class="min-w-[200px] flex-1">
+							<div class="mb-2 flex items-center gap-3">
+								<h2 class="card-title text-2xl">{roleRow.descricao}</h2>
+								<div class="badge badge-lg badge-primary">
+									Nível {roleRow.nivel}
+								</div>
+								{#if roleRow.nivel <= 1}
+									<div class="badge badge-lg badge-success gap-1">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<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>
+										Acesso Total
+									</div>
+								{/if}
+							</div>
+							<p class="text-base-content/60 text-sm">
+								<span class="bg-base-200 rounded px-2 py-1 font-mono">{roleRow.nome}</span>
+							</p>
+						</div>
+						<div class="flex items-center gap-2">
+							<button
+								type="button"
+								class="btn btn-outline btn-sm"
+								onclick={() => prepararEdicaoPerfil(roleRow)}
+							>
+								Editar
+							</button>
+						</div>
+					</div>
 
-          {#if roleRow.nivel <= 1}
-            <div class="alert alert-success shadow-md">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                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>
-              <div>
-                <h3 class="font-bold">Perfil Administrativo</h3>
-                <div class="text-sm">
-                  Este perfil possui acesso total ao sistema automaticamente,
-                  sem necessidade de configuração manual.
-                </div>
-              </div>
-            </div>
-          {:else if catalogoQuery.data}
-            <div class="space-y-2">
-              {#each catalogoQuery.data as item}
-                {@const recursoExpandido = isRecursoExpandido(
-                  roleId,
-                  item.recurso,
-                )}
-                <div class="border border-base-300 rounded-lg overflow-hidden">
-                  <!-- Cabeçalho do recurso (clicável) -->
-                  <button
-                    type="button"
-                    class="w-full px-4 py-3 bg-base-200 hover:bg-base-300 transition-colors flex items-center justify-between"
-                    onclick={() => toggleRecurso(roleId, item.recurso)}
-                    disabled={salvando}
-                  >
-                    <span class="font-semibold text-lg">{item.recurso}</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5 transition-transform"
-                      class:rotate-180={recursoExpandido}
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
+					{#if roleRow.nivel <= 1}
+						<div class="alert alert-success shadow-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<div>
+								<h3 class="font-bold">Perfil Administrativo</h3>
+								<div class="text-sm">
+									Este perfil possui acesso total ao sistema automaticamente, sem necessidade de
+									configuração manual.
+								</div>
+							</div>
+						</div>
+					{:else if catalogoQuery.data}
+						<div class="space-y-2">
+							{#each catalogoQuery.data as item}
+								{@const recursoExpandido = isRecursoExpandido(roleId, item.recurso)}
+								<div class="border-base-300 overflow-hidden rounded-lg border">
+									<!-- Cabeçalho do recurso (clicável) -->
+									<button
+										type="button"
+										class="bg-base-200 hover:bg-base-300 flex w-full items-center justify-between px-4 py-3 transition-colors"
+										onclick={() => toggleRecurso(roleId, item.recurso)}
+										disabled={salvando}
+									>
+										<span class="text-lg font-semibold">{item.recurso}</span>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-5 w-5 transition-transform"
+											class:rotate-180={recursoExpandido}
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 9l-7 7-7-7"
+											/>
+										</svg>
+									</button>
 
-                  <!-- Lista de ações (visível quando expandido) -->
-                  {#if recursoExpandido}
-                    <div class="px-4 py-3 bg-base-100 border-t border-base-300">
-                      <div class="space-y-2">
-                        {#each ["ver", "listar", "criar", "editar", "excluir"] as acao}
-                          <label
-                            class="flex items-center gap-3 cursor-pointer hover:bg-base-200 p-2 rounded transition-colors"
-                          >
-                            <input
-                              type="checkbox"
-                              class="checkbox checkbox-primary"
-                              checked={isConcedida(roleId, item.recurso, acao)}
-                              disabled={salvando}
-                              onchange={(e) =>
-                                toggleAcao(
-                                  roleId,
-                                  item.recurso,
-                                  acao,
-                                  e.currentTarget.checked,
-                                )}
-                            />
-                            <span class="flex-1 capitalize font-medium"
-                              >{acao}</span
-                            >
-                          </label>
-                        {/each}
-                      </div>
-                    </div>
-                  {/if}
-                </div>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/each}
-  {/if}
+									<!-- Lista de ações (visível quando expandido) -->
+									{#if recursoExpandido}
+										<div class="bg-base-100 border-base-300 border-t px-4 py-3">
+											<div class="space-y-2">
+												{#each ['ver', 'listar', 'criar', 'editar', 'excluir'] as acao}
+													<label
+														class="hover:bg-base-200 flex cursor-pointer items-center gap-3 rounded p-2 transition-colors"
+													>
+														<input
+															type="checkbox"
+															class="checkbox checkbox-primary"
+															checked={isConcedida(roleId, item.recurso, acao)}
+															disabled={salvando}
+															onchange={(e) =>
+																toggleAcao(roleId, item.recurso, acao, e.currentTarget.checked)}
+														/>
+														<span class="flex-1 font-medium capitalize">{acao}</span>
+													</label>
+												{/each}
+											</div>
+										</div>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	{/if}
 
-  <!-- Modal Gerenciar Perfis -->
-  {#if modalGerenciarPerfisAberto}
-    <dialog class="modal modal-open">
-      <div
-        class="modal-box max-w-4xl w-full overflow-hidden border border-base-200/60 bg-base-200/40 p-0 shadow-2xl"
-      >
-        <div
-          class="relative bg-linear-to-r from-primary via-primary/90 to-secondary/80 px-8 py-6 text-base-100"
-        >
-          <button
-            type="button"
-            class="btn btn-sm btn-circle btn-ghost absolute right-4 top-4 text-base-100/80 hover:text-base-100"
-            onclick={fecharModalGerenciarPerfis}
-            aria-label="Fechar modal"
-          >
-            ✕
-          </button>
+	<!-- Modal Gerenciar Perfis -->
+	{#if modalGerenciarPerfisAberto}
+		<dialog class="modal modal-open">
+			<div
+				class="modal-box border-base-200/60 bg-base-200/40 w-full max-w-4xl overflow-hidden border p-0 shadow-2xl"
+			>
+				<div
+					class="from-primary via-primary/90 to-secondary/80 text-base-100 relative bg-linear-to-r px-8 py-6"
+				>
+					<button
+						type="button"
+						class="btn btn-sm btn-circle btn-ghost text-base-100/80 hover:text-base-100 absolute top-4 right-4"
+						onclick={fecharModalGerenciarPerfis}
+						aria-label="Fechar modal"
+					>
+						✕
+					</button>
 
-          <h3 class="text-3xl font-black tracking-tight">
-            Gerenciar Perfis de Acesso
-          </h3>
-          <p class="mt-2 max-w-2xl text-sm text-base-100/80 md:text-base">
-            {perfilSendoEditado
-              ? "Atualize as informações do perfil selecionado para manter a governança de acesso alinhada com as diretrizes do sistema."
-              : "Crie um novo perfil de acesso definindo nome, descrição e nível hierárquico conforme os padrões adotados pela Secretaria."}
-          </p>
-        </div>
+					<h3 class="text-3xl font-black tracking-tight">Gerenciar Perfis de Acesso</h3>
+					<p class="text-base-100/80 mt-2 max-w-2xl text-sm md:text-base">
+						{perfilSendoEditado
+							? 'Atualize as informações do perfil selecionado para manter a governança de acesso alinhada com as diretrizes do sistema.'
+							: 'Crie um novo perfil de acesso definindo nome, descrição e nível hierárquico conforme os padrões adotados pela Secretaria.'}
+					</p>
+				</div>
 
-        <div class="bg-base-100 px-8 py-6">
-          <section
-            class="space-y-6 rounded-2xl border border-base-200/60 bg-base-100 p-6 shadow-sm"
-          >
-            <div
-              class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
-            >
-              <div class="space-y-1">
-                <h4 class="text-xl font-semibold text-base-content">
-                  {perfilSendoEditado ? "Editar Perfil" : "Criar Novo Perfil"}
-                </h4>
-                <p class="text-sm text-base-content/70">
-                  {perfilSendoEditado
-                    ? "Os campos bloqueados indicam atributos padronizados do sistema. Ajuste apenas o que estiver disponível."
-                    : "Preencha as informações com atenção para garantir que o novo perfil siga o padrão institucional."}
-                </p>
-              </div>
+				<div class="bg-base-100 px-8 py-6">
+					<section
+						class="border-base-200/60 bg-base-100 space-y-6 rounded-2xl border p-6 shadow-sm"
+					>
+						<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+							<div class="space-y-1">
+								<h4 class="text-base-content text-xl font-semibold">
+									{perfilSendoEditado ? 'Editar Perfil' : 'Criar Novo Perfil'}
+								</h4>
+								<p class="text-base-content/70 text-sm">
+									{perfilSendoEditado
+										? 'Os campos bloqueados indicam atributos padronizados do sistema. Ajuste apenas o que estiver disponível.'
+										: 'Preencha as informações com atenção para garantir que o novo perfil siga o padrão institucional.'}
+								</p>
+							</div>
 
-              {#if perfilSendoEditado}
-                <span
-                  class="badge badge-outline badge-primary badge-lg self-start flex flex-col items-center gap-1 px-5 py-3 text-center"
-                >
-                  <span
-                    class="text-[11px] font-semibold uppercase tracking-[0.32em] text-primary"
-                  >
-                    Nível atual
-                  </span>
-                  <span class="text-2xl font-bold leading-none text-primary">
-                    {perfilSendoEditado.nivel}
-                  </span>
-                </span>
-              {/if}
-            </div>
+							{#if perfilSendoEditado}
+								<span
+									class="badge badge-outline badge-primary badge-lg flex flex-col items-center gap-1 self-start px-5 py-3 text-center"
+								>
+									<span class="text-primary text-[11px] font-semibold tracking-[0.32em] uppercase">
+										Nível atual
+									</span>
+									<span class="text-primary text-2xl leading-none font-bold">
+										{perfilSendoEditado.nivel}
+									</span>
+								</span>
+							{/if}
+						</div>
 
-            <div class="grid gap-6 md:grid-cols-2">
-              <div class="form-control md:col-span-2">
-                <label class="label" for="nome-perfil-input">
-                  <span class="label-text">Nome do Perfil *</span>
-                </label>
-                <input
-                  id="nome-perfil-input"
-                  type="text"
-                  bind:value={nomeNovoPerfil}
-                  class="input input-bordered input-primary"
-                  placeholder="Ex: RH, Financeiro, Gestor"
-                  disabled={perfilSendoEditado !== null &&
-                    !perfilSendoEditado.customizado}
-                />
-              </div>
+						<div class="grid gap-6 md:grid-cols-2">
+							<div class="form-control md:col-span-2">
+								<label class="label" for="nome-perfil-input">
+									<span class="label-text">Nome do Perfil *</span>
+								</label>
+								<input
+									id="nome-perfil-input"
+									type="text"
+									bind:value={nomeNovoPerfil}
+									class="input input-bordered input-primary"
+									placeholder="Ex: RH, Financeiro, Gestor"
+									disabled={perfilSendoEditado !== null && !perfilSendoEditado.customizado}
+								/>
+							</div>
 
-              <div class="form-control md:col-span-2">
-                <label class="label" for="descricao-perfil-input">
-                  <span class="label-text">Descrição</span>
-                </label>
-                <textarea
-                  id="descricao-perfil-input"
-                  bind:value={descricaoNovoPerfil}
-                  class="textarea textarea-bordered textarea-primary min-h-[120px]"
-                  placeholder="Breve descrição das responsabilidades e limites de atuação deste perfil."
-                ></textarea>
-              </div>
+							<div class="form-control md:col-span-2">
+								<label class="label" for="descricao-perfil-input">
+									<span class="label-text">Descrição</span>
+								</label>
+								<textarea
+									id="descricao-perfil-input"
+									bind:value={descricaoNovoPerfil}
+									class="textarea textarea-bordered textarea-primary min-h-[120px]"
+									placeholder="Breve descrição das responsabilidades e limites de atuação deste perfil."
+								></textarea>
+							</div>
 
-              <div class="form-control max-w-xs">
-                <label class="label" for="nivel-perfil-input">
-                  <span class="label-text">Nível de Acesso (0-5) *</span>
-                </label>
-                <input
-                  id="nivel-perfil-input"
-                  type="number"
-                  bind:value={nivelNovoPerfil}
-                  min="0"
-                  max="5"
-                  class="input input-bordered input-secondary"
-                  disabled={perfilSendoEditado !== null &&
-                    !perfilSendoEditado.customizado}
-                />
-              </div>
-            </div>
-          </section>
+							<div class="form-control max-w-xs">
+								<label class="label" for="nivel-perfil-input">
+									<span class="label-text">Nível de Acesso (0-5) *</span>
+								</label>
+								<input
+									id="nivel-perfil-input"
+									type="number"
+									bind:value={nivelNovoPerfil}
+									min="0"
+									max="5"
+									class="input input-bordered input-secondary"
+									disabled={perfilSendoEditado !== null && !perfilSendoEditado.customizado}
+								/>
+							</div>
+						</div>
+					</section>
 
-          <div
-            class="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between"
-          >
-            <p class="text-sm text-base-content/60">
-              Campos marcados com * são obrigatórios.
-            </p>
-            <div class="flex flex-wrap gap-3">
-              <button
-                type="button"
-                class="btn btn-ghost"
-                onclick={fecharModalGerenciarPerfis}
-                disabled={processando}
-              >
-                Cancelar
-              </button>
-              <button
-                type="button"
-                class="btn btn-primary"
-                disabled={!nomeNovoPerfil.trim() || processando}
-                onclick={perfilSendoEditado ? editarPerfil : criarNovoPerfil}
-              >
-                {#if processando}
-                  <span class="loading loading-spinner"></span>
-                  Processando...
-                {:else}
-                  {perfilSendoEditado ? "Salvar Alterações" : "Criar Perfil"}
-                {/if}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop">
-        <button
-          type="button"
-          onclick={fecharModalGerenciarPerfis}
-          aria-label="Fechar modal">Fechar</button
-        >
-      </form>
-    </dialog>
-  {/if}
+					<div
+						class="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between"
+					>
+						<p class="text-base-content/60 text-sm">Campos marcados com * são obrigatórios.</p>
+						<div class="flex flex-wrap gap-3">
+							<button
+								type="button"
+								class="btn"
+								onclick={fecharModalGerenciarPerfis}
+								disabled={processando}
+							>
+								Cancelar
+							</button>
+							<button
+								type="button"
+								class="btn btn-primary"
+								disabled={!nomeNovoPerfil.trim() || processando}
+								onclick={perfilSendoEditado ? editarPerfil : criarNovoPerfil}
+							>
+								{#if processando}
+									<span class="loading loading-spinner"></span>
+									Processando...
+								{:else}
+									{perfilSendoEditado ? 'Salvar Alterações' : 'Criar Perfil'}
+								{/if}
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<form method="dialog" class="modal-backdrop">
+				<button type="button" onclick={fecharModalGerenciarPerfis} aria-label="Fechar modal"
+					>Fechar</button
+				>
+			</form>
+		</dialog>
+	{/if}
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
index 6232f81..7d3ab7d 100644
--- a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
@@ -1,846 +1,786 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import StatsCard from "$lib/components/ti/StatsCard.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import { Users, Shield, AlertTriangle, Info, Building2 } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import StatsCard from '$lib/components/ti/StatsCard.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import { Users, Shield, AlertTriangle, Info, Building2 } from 'lucide-svelte';
 
-  type Role = {
-    _id: Id<"roles">;
-    _creationTime: number;
-    nome: string;
-    descricao: string;
-    nivel: number;
-    setor?: string;
-  };
+	type Role = {
+		_id: Id<'roles'>;
+		_creationTime: number;
+		nome: string;
+		descricao: string;
+		nivel: number;
+		setor?: string;
+	};
 
-  const client = useConvexClient();
-  const rolesQuery = useQuery(api.roles.listar, {});
-  const roles = $derived(rolesQuery?.data ?? []);
-  const carregando = $derived(rolesQuery === undefined);
+	const client = useConvexClient();
+	const rolesQuery = useQuery(api.roles.listar, {});
+	const roles = $derived(rolesQuery?.data ?? []);
+	const carregando = $derived(rolesQuery === undefined);
 
-  let busca = $state("");
-  let filtroSetor = $state("");
-  let filtroNivel = $state<number | "">("");
-  let roleSelecionada = $state<Role | null>(null);
-  let modalDetalhesAberto = $state(false);
+	let busca = $state('');
+	let filtroSetor = $state('');
+	let filtroNivel = $state<number | ''>('');
+	let roleSelecionada = $state<Role | null>(null);
+	let modalDetalhesAberto = $state(false);
 
-  const setoresDisponiveis = $derived.by(() => {
-    const setores = new Set<string>();
-    roles.forEach((r) => {
-      if (r.setor) setores.add(r.setor);
-    });
-    return Array.from(setores).sort();
-  });
+	const setoresDisponiveis = $derived.by(() => {
+		const setores = new Set<string>();
+		roles.forEach((r) => {
+			if (r.setor) setores.add(r.setor);
+		});
+		return Array.from(setores).sort();
+	});
 
-  // Estatísticas
-  const stats = $derived.by(() => {
-    if (carregando) return null;
+	// Estatísticas
+	const stats = $derived.by(() => {
+		if (carregando) return null;
 
-    const porNivel = {
-      0: roles.filter((r) => r.nivel === 0).length,
-      1: roles.filter((r) => r.nivel === 1).length,
-      2: roles.filter((r) => r.nivel === 2).length,
-      3: roles.filter((r) => r.nivel >= 3).length,
-    };
+		const porNivel = {
+			0: roles.filter((r) => r.nivel === 0).length,
+			1: roles.filter((r) => r.nivel === 1).length,
+			2: roles.filter((r) => r.nivel === 2).length,
+			3: roles.filter((r) => r.nivel >= 3).length
+		};
 
-    return {
-      total: roles.length,
-      nivelMaximo: porNivel[0],
-      nivelAlto: porNivel[1],
-      nivelMedio: porNivel[2],
-      nivelBaixo: porNivel[3],
-      comSetor: roles.filter((r) => r.setor).length,
-    };
-  });
+		return {
+			total: roles.length,
+			nivelMaximo: porNivel[0],
+			nivelAlto: porNivel[1],
+			nivelMedio: porNivel[2],
+			nivelBaixo: porNivel[3],
+			comSetor: roles.filter((r) => r.setor).length
+		};
+	});
 
-  const rolesFiltradas = $derived.by(() => {
-    let resultado = roles;
+	const rolesFiltradas = $derived.by(() => {
+		let resultado = roles;
 
-    // Filtro por busca (nome ou descrição)
-    if (busca.trim()) {
-      const buscaLower = busca.toLowerCase();
-      resultado = resultado.filter(
-        (r) =>
-          r.nome.toLowerCase().includes(buscaLower) ||
-          r.descricao.toLowerCase().includes(buscaLower),
-      );
-    }
+		// Filtro por busca (nome ou descrição)
+		if (busca.trim()) {
+			const buscaLower = busca.toLowerCase();
+			resultado = resultado.filter(
+				(r) =>
+					r.nome.toLowerCase().includes(buscaLower) ||
+					r.descricao.toLowerCase().includes(buscaLower)
+			);
+		}
 
-    // Filtro por setor
-    if (filtroSetor) {
-      resultado = resultado.filter((r) => r.setor === filtroSetor);
-    }
+		// Filtro por setor
+		if (filtroSetor) {
+			resultado = resultado.filter((r) => r.setor === filtroSetor);
+		}
 
-    // Filtro por nível
-    if (filtroNivel !== "") {
-      if (filtroNivel === 3) {
-        resultado = resultado.filter((r) => r.nivel >= 3);
-      } else {
-        resultado = resultado.filter((r) => r.nivel === filtroNivel);
-      }
-    }
+		// Filtro por nível
+		if (filtroNivel !== '') {
+			if (filtroNivel === 3) {
+				resultado = resultado.filter((r) => r.nivel >= 3);
+			} else {
+				resultado = resultado.filter((r) => r.nivel === filtroNivel);
+			}
+		}
 
-    return resultado.sort((a, b) => {
-      // Ordenar por nível primeiro (menor nível = maior privilégio)
-      if (a.nivel !== b.nivel) return a.nivel - b.nivel;
-      // Depois por nome
-      return a.nome.localeCompare(b.nome);
-    });
-  });
+		return resultado.sort((a, b) => {
+			// Ordenar por nível primeiro (menor nível = maior privilégio)
+			if (a.nivel !== b.nivel) return a.nivel - b.nivel;
+			// Depois por nome
+			return a.nome.localeCompare(b.nome);
+		});
+	});
 
-  function obterCorNivel(nivel: number): string {
-    if (nivel === 0) return "badge-error";
-    if (nivel === 1) return "badge-warning";
-    if (nivel === 2) return "badge-info";
-    return "badge-ghost";
-  }
+	function obterCorNivel(nivel: number): string {
+		if (nivel === 0) return 'badge-error';
+		if (nivel === 1) return 'badge-warning';
+		if (nivel === 2) return 'badge-info';
+		return 'badge-ghost';
+	}
 
-  function obterTextoNivel(nivel: number): string {
-    if (nivel === 0) return "Máximo";
-    if (nivel === 1) return "Alto";
-    if (nivel === 2) return "Médio";
-    if (nivel === 3) return "Baixo";
-    return `Nível ${nivel}`;
-  }
+	function obterTextoNivel(nivel: number): string {
+		if (nivel === 0) return 'Máximo';
+		if (nivel === 1) return 'Alto';
+		if (nivel === 2) return 'Médio';
+		if (nivel === 3) return 'Baixo';
+		return `Nível ${nivel}`;
+	}
 
-  function obterCorCardNivel(nivel: number): string {
-    if (nivel === 0) return "border-l-4 border-error";
-    if (nivel === 1) return "border-l-4 border-warning";
-    if (nivel === 2) return "border-l-4 border-info";
-    return "border-l-4 border-base-300";
-  }
+	function obterCorCardNivel(nivel: number): string {
+		if (nivel === 0) return 'border-l-4 border-error';
+		if (nivel === 1) return 'border-l-4 border-warning';
+		if (nivel === 2) return 'border-l-4 border-info';
+		return 'border-l-4 border-base-300';
+	}
 
-  function abrirDetalhes(role: Role) {
-    roleSelecionada = role;
-    modalDetalhesAberto = true;
-  }
+	function abrirDetalhes(role: Role) {
+		roleSelecionada = role;
+		modalDetalhesAberto = true;
+	}
 
-  function fecharDetalhes() {
-    modalDetalhesAberto = false;
-    roleSelecionada = null;
-  }
+	function fecharDetalhes() {
+		modalDetalhesAberto = false;
+		roleSelecionada = null;
+	}
 
-  function formatarData(timestamp: number): string {
-    try {
-      return format(new Date(timestamp), "dd/MM/yyyy HH:mm", { locale: ptBR });
-    } catch {
-      return "Data inválida";
-    }
-  }
+	function formatarData(timestamp: number): string {
+		try {
+			return format(new Date(timestamp), 'dd/MM/yyyy HH:mm', { locale: ptBR });
+		} catch {
+			return 'Data inválida';
+		}
+	}
 
-  function limparFiltros() {
-    busca = "";
-    filtroSetor = "";
-    filtroNivel = "";
-  }
+	function limparFiltros() {
+		busca = '';
+		filtroSetor = '';
+		filtroNivel = '';
+	}
 
-  const temFiltrosAtivos = $derived(
-    busca.trim() !== "" || filtroSetor !== "" || filtroNivel !== "",
-  );
+	const temFiltrosAtivos = $derived(
+		busca.trim() !== '' || filtroSetor !== '' || filtroNivel !== ''
+	);
 </script>
 
-<ProtectedRoute
-  allowedRoles={["ti_master", "admin", "ti_usuario"]}
-  maxLevel={3}
->
-  <div class="container mx-auto px-4 py-6 max-w-7xl">
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-8">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-primary/10 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-            />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-base-content">Gestão de Perfis</h1>
-          <p class="text-base-content/60 mt-1">
-            Visualize e gerencie os perfis de acesso do sistema
-          </p>
-        </div>
-      </div>
-    </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+	<div class="container mx-auto max-w-7xl px-4 py-6">
+		<!-- Header -->
+		<div class="mb-8 flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="bg-primary/10 rounded-xl p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-8 w-8"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-base-content text-3xl font-bold">Gestão de Perfis</h1>
+					<p class="text-base-content/60 mt-1">
+						Visualize e gerencie os perfis de acesso do sistema
+					</p>
+				</div>
+			</div>
+		</div>
 
-    <!-- Estatísticas -->
-    {#if stats}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
-        <StatsCard
-          title="Total de Perfis"
-          value={stats.total}
-          Icon={Users}
-          color="primary"
-        />
-        <StatsCard
-          title="Nível Máximo"
-          value={stats.nivelMaximo}
-          description="Acesso total"
-          Icon={Shield}
-          color="error"
-        />
-        <StatsCard
-          title="Nível Alto"
-          value={stats.nivelAlto}
-          description="Acesso elevado"
-          Icon={AlertTriangle}
-          color="warning"
-        />
-        <StatsCard
-          title="Nível Médio"
-          value={stats.nivelMedio}
-          description="Acesso padrão"
-          Icon={Info}
-          color="info"
-        />
-        <StatsCard
-          title="Com Setor"
-          value={stats.comSetor}
-          description={stats.total > 0
-            ? ((stats.comSetor / stats.total) * 100).toFixed(0) + "% do total"
-            : "0%"}
-          Icon={Building2}
-          color="secondary"
-        />
-      </div>
-    {/if}
+		<!-- Estatísticas -->
+		{#if stats}
+			<div class="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5">
+				<StatsCard title="Total de Perfis" value={stats.total} Icon={Users} color="primary" />
+				<StatsCard
+					title="Nível Máximo"
+					value={stats.nivelMaximo}
+					description="Acesso total"
+					Icon={Shield}
+					color="error"
+				/>
+				<StatsCard
+					title="Nível Alto"
+					value={stats.nivelAlto}
+					description="Acesso elevado"
+					Icon={AlertTriangle}
+					color="warning"
+				/>
+				<StatsCard
+					title="Nível Médio"
+					value={stats.nivelMedio}
+					description="Acesso padrão"
+					Icon={Info}
+					color="info"
+				/>
+				<StatsCard
+					title="Com Setor"
+					value={stats.comSetor}
+					description={stats.total > 0
+						? ((stats.comSetor / stats.total) * 100).toFixed(0) + '% do total'
+						: '0%'}
+					Icon={Building2}
+					color="secondary"
+				/>
+			</div>
+		{/if}
 
-    <!-- Filtros -->
-    {#if !carregando && roles.length > 0}
-      <div class="card bg-base-100 shadow-xl mb-6 border border-base-300">
-        <div class="card-body">
-          <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
-            <div class="flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 text-primary"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-                />
-              </svg>
-              <h2 class="card-title text-lg">Filtros de Busca</h2>
-            </div>
-            {#if temFiltrosAtivos}
-              <button
-                type="button"
-                class="btn btn-sm btn-outline btn-error"
-                onclick={limparFiltros}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-                Limpar Filtros
-              </button>
-            {/if}
-          </div>
+		<!-- Filtros -->
+		{#if !carregando && roles.length > 0}
+			<div class="card bg-base-100 border-base-300 mb-6 border shadow-xl">
+				<div class="card-body">
+					<div class="mb-4 flex flex-wrap items-center justify-between gap-4">
+						<div class="flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-primary h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+								/>
+							</svg>
+							<h2 class="card-title text-lg">Filtros de Busca</h2>
+						</div>
+						{#if temFiltrosAtivos}
+							<button
+								type="button"
+								class="btn btn-sm btn-outline btn-error"
+								onclick={limparFiltros}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Limpar Filtros
+							</button>
+						{/if}
+					</div>
 
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <!-- Busca -->
-            <div class="form-control">
-              <label class="label" for="busca">
-                <span class="label-text font-medium">Buscar</span>
-              </label>
-              <div class="relative">
-                <input
-                  id="busca"
-                  type="text"
-                  bind:value={busca}
-                  placeholder="Buscar por nome ou descrição..."
-                  class="input input-bordered w-full pl-10"
-                />
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-base-content/40"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
-              </div>
-            </div>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+						<!-- Busca -->
+						<div class="form-control">
+							<label class="label" for="busca">
+								<span class="label-text font-medium">Buscar</span>
+							</label>
+							<div class="relative">
+								<input
+									id="busca"
+									type="text"
+									bind:value={busca}
+									placeholder="Buscar por nome ou descrição..."
+									class="input input-bordered w-full pl-10"
+								/>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+									/>
+								</svg>
+							</div>
+						</div>
 
-            <!-- Setor -->
-            <div class="form-control">
-              <label class="label" for="filtro-setor">
-                <span class="label-text font-medium">Setor</span>
-              </label>
-              <select
-                id="filtro-setor"
-                bind:value={filtroSetor}
-                class="select select-bordered"
-              >
-                <option value="">Todos os setores</option>
-                {#each setoresDisponiveis as setor}
-                  <option value={setor}>{setor}</option>
-                {/each}
-              </select>
-            </div>
+						<!-- Setor -->
+						<div class="form-control">
+							<label class="label" for="filtro-setor">
+								<span class="label-text font-medium">Setor</span>
+							</label>
+							<select id="filtro-setor" bind:value={filtroSetor} class="select select-bordered">
+								<option value="">Todos os setores</option>
+								{#each setoresDisponiveis as setor}
+									<option value={setor}>{setor}</option>
+								{/each}
+							</select>
+						</div>
 
-            <!-- Nível -->
-            <div class="form-control">
-              <label class="label" for="filtro-nivel">
-                <span class="label-text font-medium">Nível de Acesso</span>
-              </label>
-              <select
-                id="filtro-nivel"
-                bind:value={filtroNivel}
-                class="select select-bordered"
-              >
-                <option value="">Todos os níveis</option>
-                <option value={0}>Máximo (0)</option>
-                <option value={1}>Alto (1)</option>
-                <option value={2}>Médio (2)</option>
-                <option value={3}>Baixo (3+)</option>
-              </select>
-            </div>
-          </div>
+						<!-- Nível -->
+						<div class="form-control">
+							<label class="label" for="filtro-nivel">
+								<span class="label-text font-medium">Nível de Acesso</span>
+							</label>
+							<select id="filtro-nivel" bind:value={filtroNivel} class="select select-bordered">
+								<option value="">Todos os níveis</option>
+								<option value={0}>Máximo (0)</option>
+								<option value={1}>Alto (1)</option>
+								<option value={2}>Médio (2)</option>
+								<option value={3}>Baixo (3+)</option>
+							</select>
+						</div>
+					</div>
 
-          <div class="mt-4 flex items-center justify-between">
-            <div class="text-sm text-base-content/60">
-              <span class="font-medium text-base-content"
-                >{rolesFiltradas.length}</span
-              >
-              de
-              <span class="font-medium text-base-content">{roles.length}</span>
-              perfil(is)
-              {#if temFiltrosAtivos}
-                <span class="badge badge-primary badge-sm ml-2">Filtrado</span>
-              {/if}
-            </div>
-          </div>
-        </div>
-      </div>
-    {/if}
+					<div class="mt-4 flex items-center justify-between">
+						<div class="text-base-content/60 text-sm">
+							<span class="text-base-content font-medium">{rolesFiltradas.length}</span>
+							de
+							<span class="text-base-content font-medium">{roles.length}</span>
+							perfil(is)
+							{#if temFiltrosAtivos}
+								<span class="badge badge-primary badge-sm ml-2">Filtrado</span>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Lista de Perfis -->
-    {#if carregando}
-      <div class="flex justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {:else if roles.length === 0}
-      <div class="flex flex-col items-center justify-center py-16 text-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-16 w-16 text-base-content/30"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-          />
-        </svg>
-        <h3 class="text-xl font-semibold mt-4">Nenhum perfil encontrado</h3>
-        <p class="text-base-content/60 mt-2">
-          Não há perfis cadastrados no sistema.
-        </p>
-      </div>
-    {:else if rolesFiltradas.length === 0}
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <div
-            class="flex flex-col items-center justify-center py-16 text-center"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-16 w-16 text-base-content/30 mb-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <h3 class="text-xl font-semibold mt-4">Nenhum perfil encontrado</h3>
-            <p class="text-base-content/60 mt-2">
-              Nenhum perfil corresponde aos filtros aplicados.
-            </p>
-            {#if temFiltrosAtivos}
-              <button
-                class="btn btn-primary btn-sm mt-4"
-                onclick={limparFiltros}
-              >
-                Limpar Filtros
-              </button>
-            {/if}
-          </div>
-        </div>
-      </div>
-    {:else}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {#each rolesFiltradas as role}
-          <div
-            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 cursor-pointer border border-base-300 {obterCorCardNivel(
-              role.nivel,
-            )} hover:scale-[1.02]"
-            onclick={() => abrirDetalhes(role)}
-          >
-            <div class="card-body">
-              <div class="flex items-start justify-between mb-4">
-                <div class="flex-1">
-                  <h2 class="card-title text-lg mb-1">{role.descricao}</h2>
-                  <div class="badge {obterCorNivel(role.nivel)} badge-sm">
-                    {obterTextoNivel(role.nivel)}
-                  </div>
-                </div>
-                <div class="p-2 bg-base-200 rounded-lg">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-6 w-6 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                    />
-                  </svg>
-                </div>
-              </div>
+		<!-- Lista de Perfis -->
+		{#if carregando}
+			<div class="flex items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{:else if roles.length === 0}
+			<div class="flex flex-col items-center justify-center py-16 text-center">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-base-content/30 h-16 w-16"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+					/>
+				</svg>
+				<h3 class="mt-4 text-xl font-semibold">Nenhum perfil encontrado</h3>
+				<p class="text-base-content/60 mt-2">Não há perfis cadastrados no sistema.</p>
+			</div>
+		{:else if rolesFiltradas.length === 0}
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body">
+					<div class="flex flex-col items-center justify-center py-16 text-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-base-content/30 mb-4 h-16 w-16"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<h3 class="mt-4 text-xl font-semibold">Nenhum perfil encontrado</h3>
+						<p class="text-base-content/60 mt-2">
+							Nenhum perfil corresponde aos filtros aplicados.
+						</p>
+						{#if temFiltrosAtivos}
+							<button class="btn btn-primary btn-sm mt-4" onclick={limparFiltros}>
+								Limpar Filtros
+							</button>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				{#each rolesFiltradas as role}
+					<div
+						class="card bg-base-100 border-base-300 cursor-pointer border shadow-xl transition-all duration-300 hover:shadow-2xl {obterCorCardNivel(
+							role.nivel
+						)} hover:scale-[1.02]"
+						onclick={() => abrirDetalhes(role)}
+					>
+						<div class="card-body">
+							<div class="mb-4 flex items-start justify-between">
+								<div class="flex-1">
+									<h2 class="card-title mb-1 text-lg">{role.descricao}</h2>
+									<div class="badge {obterCorNivel(role.nivel)} badge-sm">
+										{obterTextoNivel(role.nivel)}
+									</div>
+								</div>
+								<div class="bg-base-200 rounded-lg p-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-6 w-6"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+										/>
+									</svg>
+								</div>
+							</div>
 
-              <div class="space-y-3 text-sm">
-                <div class="flex items-center gap-2 p-2 bg-base-200 rounded-lg">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 text-base-content/40"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-                    />
-                  </svg>
-                  <span class="font-medium text-base-content/60"
-                    >Nome técnico:</span
-                  >
-                  <code class="text-xs bg-base-100 px-2 py-1 rounded font-mono"
-                    >{role.nome}</code
-                  >
-                </div>
+							<div class="space-y-3 text-sm">
+								<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-base-content/40 h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+										/>
+									</svg>
+									<span class="text-base-content/60 font-medium">Nome técnico:</span>
+									<code class="bg-base-100 rounded px-2 py-1 font-mono text-xs">{role.nome}</code>
+								</div>
 
-                {#if role.setor}
-                  <div
-                    class="flex items-center gap-2 p-2 bg-base-200 rounded-lg"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 text-base-content/40"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                      />
-                    </svg>
-                    <span class="font-medium text-base-content/60">Setor:</span>
-                    <span class="font-medium">{role.setor}</span>
-                  </div>
-                {/if}
+								{#if role.setor}
+									<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="text-base-content/40 h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+											/>
+										</svg>
+										<span class="text-base-content/60 font-medium">Setor:</span>
+										<span class="font-medium">{role.setor}</span>
+									</div>
+								{/if}
 
-                <div class="flex items-center gap-2 p-2 bg-base-200 rounded-lg">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 text-base-content/40"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-                    />
-                  </svg>
-                  <span class="font-medium text-base-content/60">Nível:</span>
-                  <span class="font-bold text-lg">{role.nivel}</span>
-                </div>
-              </div>
+								<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-base-content/40 h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+										/>
+									</svg>
+									<span class="text-base-content/60 font-medium">Nível:</span>
+									<span class="text-lg font-bold">{role.nivel}</span>
+								</div>
+							</div>
 
-              <div
-                class="card-actions justify-end mt-4 pt-4 border-t border-base-300"
-              >
-                <button
-                  class="btn btn-sm btn-primary btn-outline"
-                  onclick={(e) => {
-                    e.stopPropagation();
-                    abrirDetalhes(role);
-                  }}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 mr-1"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                    />
-                  </svg>
-                  Ver Detalhes
-                </button>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    {/if}
-  </div>
+							<div class="card-actions border-base-300 mt-4 justify-end border-t pt-4">
+								<button
+									class="btn btn-sm btn-primary btn-outline"
+									onclick={(e) => {
+										e.stopPropagation();
+										abrirDetalhes(role);
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="mr-1 h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+										/>
+									</svg>
+									Ver Detalhes
+								</button>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
 
-  <!-- Modal Detalhes -->
-  {#if modalDetalhesAberto && roleSelecionada}
-    <div class="modal modal-open">
-      <div class="modal-box max-w-3xl">
-        <div class="flex items-center justify-between mb-6">
-          <h3 class="font-bold text-2xl">Detalhes do Perfil</h3>
-          <button
-            type="button"
-            class="btn btn-sm btn-circle btn-ghost"
-            onclick={fecharDetalhes}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
+	<!-- Modal Detalhes -->
+	{#if modalDetalhesAberto && roleSelecionada}
+		<div class="modal modal-open">
+			<div class="modal-box max-w-3xl">
+				<div class="mb-6 flex items-center justify-between">
+					<h3 class="text-2xl font-bold">Detalhes do Perfil</h3>
+					<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={fecharDetalhes}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
 
-        <div class="space-y-6">
-          <!-- Header do Perfil -->
-          <div
-            class="card bg-linear-to-r from-primary/10 to-secondary/10 border border-primary/20"
-          >
-            <div class="card-body">
-              <div class="flex items-start justify-between">
-                <div class="flex-1">
-                  <h2 class="text-2xl font-bold mb-2">
-                    {roleSelecionada.descricao}
-                  </h2>
-                  <div class="flex items-center gap-3">
-                    <div
-                      class="badge {obterCorNivel(
-                        roleSelecionada.nivel,
-                      )} badge-lg"
-                    >
-                      {obterTextoNivel(roleSelecionada.nivel)}
-                    </div>
-                    <span class="text-sm text-base-content/60"
-                      >Nível {roleSelecionada.nivel}</span
-                    >
-                  </div>
-                </div>
-                <div class="p-3 bg-base-100 rounded-lg shadow-sm">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-8 w-8 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
+				<div class="space-y-6">
+					<!-- Header do Perfil -->
+					<div class="card from-primary/10 to-secondary/10 border-primary/20 border bg-linear-to-r">
+						<div class="card-body">
+							<div class="flex items-start justify-between">
+								<div class="flex-1">
+									<h2 class="mb-2 text-2xl font-bold">
+										{roleSelecionada.descricao}
+									</h2>
+									<div class="flex items-center gap-3">
+										<div class="badge {obterCorNivel(roleSelecionada.nivel)} badge-lg">
+											{obterTextoNivel(roleSelecionada.nivel)}
+										</div>
+										<span class="text-base-content/60 text-sm">Nível {roleSelecionada.nivel}</span>
+									</div>
+								</div>
+								<div class="bg-base-100 rounded-lg p-3 shadow-sm">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-8 w-8"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+										/>
+									</svg>
+								</div>
+							</div>
+						</div>
+					</div>
 
-          <!-- Informações Principais -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="card bg-base-100 border border-base-300">
-              <div class="card-body">
-                <label class="label">
-                  <span
-                    class="label-text font-semibold flex items-center gap-2"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5 text-primary"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-                      />
-                    </svg>
-                    Nome Técnico
-                  </span>
-                </label>
-                <code
-                  class="block bg-base-200 px-4 py-3 rounded-lg text-sm font-mono mt-2"
-                  >{roleSelecionada.nome}</code
-                >
-              </div>
-            </div>
+					<!-- Informações Principais -->
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div class="card bg-base-100 border-base-300 border">
+							<div class="card-body">
+								<label class="label">
+									<span class="label-text flex items-center gap-2 font-semibold">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="text-primary h-5 w-5"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+											/>
+										</svg>
+										Nome Técnico
+									</span>
+								</label>
+								<code class="bg-base-200 mt-2 block rounded-lg px-4 py-3 font-mono text-sm"
+									>{roleSelecionada.nome}</code
+								>
+							</div>
+						</div>
 
-            <div class="card bg-base-100 border border-base-300">
-              <div class="card-body">
-                <label class="label">
-                  <span
-                    class="label-text font-semibold flex items-center gap-2"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5 text-primary"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                      />
-                    </svg>
-                    Setor
-                  </span>
-                </label>
-                <p class="text-lg font-medium mt-2">
-                  {#if roleSelecionada.setor}
-                    {roleSelecionada.setor}
-                  {:else}
-                    <span class="text-base-content/40 italic"
-                      >Não especificado</span
-                    >
-                  {/if}
-                </p>
-              </div>
-            </div>
-          </div>
+						<div class="card bg-base-100 border-base-300 border">
+							<div class="card-body">
+								<label class="label">
+									<span class="label-text flex items-center gap-2 font-semibold">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="text-primary h-5 w-5"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+											/>
+										</svg>
+										Setor
+									</span>
+								</label>
+								<p class="mt-2 text-lg font-medium">
+									{#if roleSelecionada.setor}
+										{roleSelecionada.setor}
+									{:else}
+										<span class="text-base-content/40 italic">Não especificado</span>
+									{/if}
+								</p>
+							</div>
+						</div>
+					</div>
 
-          <!-- Nível de Acesso -->
-          <div class="card bg-base-100 border border-base-300">
-            <div class="card-body">
-              <label class="label">
-                <span class="label-text font-semibold flex items-center gap-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-                    />
-                  </svg>
-                  Nível de Acesso
-                </span>
-              </label>
-              <div class="mt-4">
-                <div class="flex items-center gap-4 mb-3">
-                  <span class="text-4xl font-bold">{roleSelecionada.nivel}</span
-                  >
-                  <div
-                    class="badge {obterCorNivel(
-                      roleSelecionada.nivel,
-                    )} badge-lg"
-                  >
-                    {obterTextoNivel(roleSelecionada.nivel)}
-                  </div>
-                </div>
-                <div class="alert alert-info">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="stroke-current shrink-0 w-6 h-6"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    ></path>
-                  </svg>
-                  <span class="text-sm">
-                    {roleSelecionada.nivel === 0 &&
-                      "Acesso total irrestrito ao sistema. Pode realizar todas as operações sem restrições."}
-                    {roleSelecionada.nivel === 1 &&
-                      "Acesso alto com algumas restrições. Pode realizar a maioria das operações administrativas."}
-                    {roleSelecionada.nivel === 2 &&
-                      "Acesso médio com permissões configuráveis. Pode realizar operações padrão do sistema."}
-                    {roleSelecionada.nivel >= 3 &&
-                      "Acesso limitado com permissões específicas. Operações restritas conforme configuração."}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+					<!-- Nível de Acesso -->
+					<div class="card bg-base-100 border-base-300 border">
+						<div class="card-body">
+							<label class="label">
+								<span class="label-text flex items-center gap-2 font-semibold">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+										/>
+									</svg>
+									Nível de Acesso
+								</span>
+							</label>
+							<div class="mt-4">
+								<div class="mb-3 flex items-center gap-4">
+									<span class="text-4xl font-bold">{roleSelecionada.nivel}</span>
+									<div class="badge {obterCorNivel(roleSelecionada.nivel)} badge-lg">
+										{obterTextoNivel(roleSelecionada.nivel)}
+									</div>
+								</div>
+								<div class="alert alert-info">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										class="h-6 w-6 shrink-0 stroke-current"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+										></path>
+									</svg>
+									<span class="text-sm">
+										{roleSelecionada.nivel === 0 &&
+											'Acesso total irrestrito ao sistema. Pode realizar todas as operações sem restrições.'}
+										{roleSelecionada.nivel === 1 &&
+											'Acesso alto com algumas restrições. Pode realizar a maioria das operações administrativas.'}
+										{roleSelecionada.nivel === 2 &&
+											'Acesso médio com permissões configuráveis. Pode realizar operações padrão do sistema.'}
+										{roleSelecionada.nivel >= 3 &&
+											'Acesso limitado com permissões específicas. Operações restritas conforme configuração.'}
+									</span>
+								</div>
+							</div>
+						</div>
+					</div>
 
-          <!-- Data de Criação -->
-          <div class="card bg-base-100 border border-base-300">
-            <div class="card-body">
-              <label class="label">
-                <span class="label-text font-semibold flex items-center gap-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
-                  Data de Criação
-                </span>
-              </label>
-              <p class="text-lg font-medium mt-2">
-                {formatarData(roleSelecionada._creationTime)}
-              </p>
-            </div>
-          </div>
+					<!-- Data de Criação -->
+					<div class="card bg-base-100 border-base-300 border">
+						<div class="card-body">
+							<label class="label">
+								<span class="label-text flex items-center gap-2 font-semibold">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
+									</svg>
+									Data de Criação
+								</span>
+							</label>
+							<p class="mt-2 text-lg font-medium">
+								{formatarData(roleSelecionada._creationTime)}
+							</p>
+						</div>
+					</div>
 
-          <!-- Informação sobre Permissões -->
-          <div class="alert alert-info">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              class="stroke-current shrink-0 w-6 h-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              ></path>
-            </svg>
-            <div>
-              <h4 class="font-semibold mb-1">Configuração de Permissões</h4>
-              <p class="text-sm">
-                Para configurar permissões específicas deste perfil, acesse o <a
-                  href="/ti/painel-permissoes"
-                  class="link link-primary font-semibold"
-                  >Painel de Permissões</a
-                >.
-              </p>
-            </div>
-          </div>
-        </div>
+					<!-- Informação sobre Permissões -->
+					<div class="alert alert-info">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							></path>
+						</svg>
+						<div>
+							<h4 class="mb-1 font-semibold">Configuração de Permissões</h4>
+							<p class="text-sm">
+								Para configurar permissões específicas deste perfil, acesse o <a
+									href="/ti/painel-permissoes"
+									class="link link-primary font-semibold">Painel de Permissões</a
+								>.
+							</p>
+						</div>
+					</div>
+				</div>
 
-        <div class="modal-action mt-6">
-          <button type="button" class="btn btn-ghost" onclick={fecharDetalhes}>
-            Fechar
-          </button>
-          <a href="/ti/painel-permissoes" class="btn btn-primary">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 mr-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-              />
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-            </svg>
-            Configurar Permissões
-          </a>
-        </div>
-      </div>
-      <div class="modal-backdrop" onclick={fecharDetalhes}></div>
-    </div>
-  {/if}
+				<div class="modal-action mt-6">
+					<button type="button" class="btn" onclick={fecharDetalhes}> Fechar </button>
+					<a href="/ti/painel-permissoes" class="btn btn-primary">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mr-2 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+						</svg>
+						Configurar Permissões
+					</a>
+				</div>
+			</div>
+			<div class="modal-backdrop" onclick={fecharDetalhes}></div>
+		</div>
+	{/if}
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
index 8aaa195..5ec6985 100644
--- a/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
@@ -1,107 +1,100 @@
 <script lang="ts">
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import { goto } from "$app/navigation";
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import { goto } from '$app/navigation';
 </script>
 
-<ProtectedRoute allowedRoles={["admin", "ti"]} maxLevel={1}>
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/" class="text-primary hover:text-primary-focus">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-            />
-          </svg>
-          Dashboard
-        </a>
-      </li>
-      <li>
-        <a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
-      </li>
-      <li class="font-semibold">Personalizar Permissões</li>
-    </ul>
-  </div>
+<ProtectedRoute allowedRoles={['admin', 'ti']} maxLevel={1}>
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/" class="text-primary hover:text-primary-focus">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+						/>
+					</svg>
+					Dashboard
+				</a>
+			</li>
+			<li>
+				<a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
+			</li>
+			<li class="font-semibold">Personalizar Permissões</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center gap-3 mb-2">
-      <div class="p-3 bg-info/10 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-info"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-          />
-        </svg>
-      </div>
-      <div class="flex-1">
-        <h1 class="text-3xl font-bold text-base-content">
-          Funcionalidade descontinuada
-        </h1>
-        <p class="text-base-content/60 mt-1">
-          Agora as permissões são configuradas por ação em cada perfil no painel
-          de permissões.
-        </p>
-      </div>
-      <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
-  <div class="alert alert-info shadow-lg">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="stroke-current shrink-0 h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-    <span>
-      A personalização por usuário foi substituída por <strong
-        >permissões por ação</strong
-      >
-      por perfil. Utilize o
-      <a href="/ti/painel-permissoes" class="link link-primary"
-        >Painel de Permissões</a
-      > para configurar.
-    </span>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="mb-2 flex items-center gap-3">
+			<div class="bg-info/10 rounded-xl p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-info h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+					/>
+				</svg>
+			</div>
+			<div class="flex-1">
+				<h1 class="text-base-content text-3xl font-bold">Funcionalidade descontinuada</h1>
+				<p class="text-base-content/60 mt-1">
+					Agora as permissões são configuradas por ação em cada perfil no painel de permissões.
+				</p>
+			</div>
+			<button class="btn gap-2" onclick={() => goto('/ti')}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
+	<div class="alert alert-info 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+		<span>
+			A personalização por usuário foi substituída por <strong>permissões por ação</strong>
+			por perfil. Utilize o
+			<a href="/ti/painel-permissoes" class="link link-primary">Painel de Permissões</a> para configurar.
+		</span>
+	</div>
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte b/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
index 43dfb7f..b63e18f 100644
--- a/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
@@ -1,694 +1,836 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import StatsCard from "$lib/components/ti/StatsCard.svelte";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import { FileText, Clock, CheckCircle2, XCircle } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import StatsCard from '$lib/components/ti/StatsCard.svelte';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import { FileText, Clock, CheckCircle2, XCircle } from 'lucide-svelte';
 
-  type StatusSolicitacao = "pendente" | "aprovado" | "rejeitado";
+	type StatusSolicitacao = 'pendente' | 'aprovado' | 'rejeitado';
 
-  type SolicitacaoAcesso = {
-    _id: Id<"solicitacoesAcesso">;
-    _creationTime: number;
-    nome: string;
-    matricula: string;
-    email: string;
-    telefone: string;
-    status: StatusSolicitacao;
-    dataSolicitacao: number;
-    dataResposta: number | null;
-    observacoes: string | null;
-  };
+	type SolicitacaoAcesso = {
+		_id: Id<'solicitacoesAcesso'>;
+		_creationTime: number;
+		nome: string;
+		matricula: string;
+		email: string;
+		telefone: string;
+		status: StatusSolicitacao;
+		dataSolicitacao: number;
+		dataResposta: number | null;
+		observacoes: string | null;
+	};
 
-  type FiltroStatus = "todos" | "pendente" | "aprovado" | "rejeitado";
+	type FiltroStatus = 'todos' | 'pendente' | 'aprovado' | 'rejeitado';
 
-  type Mensagem = {
-    tipo: "success" | "error" | "info";
-    texto: string;
-  };
+	type Mensagem = {
+		tipo: 'success' | 'error' | 'info';
+		texto: string;
+	};
 
-  const client = useConvexClient();
-  
-  // Queries
-  const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});
-  
-  // Estados
-  let filtroStatus = $state<FiltroStatus>("todos");
-  let busca = $state("");
-  let solicitacaoSelecionada = $state<SolicitacaoAcesso | null>(null);
-  let modalDetalhesAberto = $state(false);
-  let modalAprovarAberto = $state(false);
-  let modalRejeitarAberto = $state(false);
-  let observacoes = $state("");
-  let mensagem = $state<Mensagem | null>(null);
-  let processando = $state(false);
+	const client = useConvexClient();
 
-  // Extrair dados das solicitações
-  const solicitacoes = $derived.by(() => {
-    if (solicitacoesQuery === undefined || solicitacoesQuery === null) {
-      return [];
-    }
-    
-    if ("data" in solicitacoesQuery && solicitacoesQuery.data !== undefined) {
-      return Array.isArray(solicitacoesQuery.data) ? solicitacoesQuery.data : [];
-    }
-    
-    if (Array.isArray(solicitacoesQuery)) {
-      return solicitacoesQuery;
-    }
-    
-    return [];
-  });
+	// Queries
+	const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});
 
-  const carregando = $derived.by(() => {
-    return solicitacoesQuery === undefined || solicitacoesQuery === null;
-  });
+	// Estados
+	let filtroStatus = $state<FiltroStatus>('todos');
+	let busca = $state('');
+	let solicitacaoSelecionada = $state<SolicitacaoAcesso | null>(null);
+	let modalDetalhesAberto = $state(false);
+	let modalAprovarAberto = $state(false);
+	let modalRejeitarAberto = $state(false);
+	let observacoes = $state('');
+	let mensagem = $state<Mensagem | null>(null);
+	let processando = $state(false);
 
-  // Estatísticas
-  const stats = $derived.by(() => {
-    if (carregando) return null;
-    
-    const total = solicitacoes.length;
-    const pendentes = solicitacoes.filter(s => s.status === "pendente").length;
-    const aprovadas = solicitacoes.filter(s => s.status === "aprovado").length;
-    const rejeitadas = solicitacoes.filter(s => s.status === "rejeitado").length;
-    
-    return {
-      total,
-      pendentes,
-      aprovadas,
-      rejeitadas
-    };
-  });
+	// Extrair dados das solicitações
+	const solicitacoes = $derived.by(() => {
+		if (solicitacoesQuery === undefined || solicitacoesQuery === null) {
+			return [];
+		}
 
-  // Filtrar e buscar solicitações
-  const solicitacoesFiltradas = $derived.by(() => {
-    let resultado = solicitacoes;
+		if ('data' in solicitacoesQuery && solicitacoesQuery.data !== undefined) {
+			return Array.isArray(solicitacoesQuery.data) ? solicitacoesQuery.data : [];
+		}
 
-    // Filtrar por status
-    if (filtroStatus !== "todos") {
-      resultado = resultado.filter(s => s.status === filtroStatus);
-    }
+		if (Array.isArray(solicitacoesQuery)) {
+			return solicitacoesQuery;
+		}
 
-    // Buscar por nome, matrícula ou email
-    if (busca.trim()) {
-      const termo = busca.toLowerCase().trim();
-      resultado = resultado.filter(s =>
-        s.nome.toLowerCase().includes(termo) ||
-        s.matricula.toLowerCase().includes(termo) ||
-        s.email.toLowerCase().includes(termo)
-      );
-    }
+		return [];
+	});
 
-    // Ordenar por data (mais recente primeiro)
-    return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
-  });
+	const carregando = $derived.by(() => {
+		return solicitacoesQuery === undefined || solicitacoesQuery === null;
+	});
 
-  // Funções auxiliares
-  function formatarData(timestamp: number): string {
-    return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
-  }
+	// Estatísticas
+	const stats = $derived.by(() => {
+		if (carregando) return null;
 
-  function formatarDataRelativa(timestamp: number): string {
-    const agora = Date.now();
-    const diff = agora - timestamp;
-    const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
-    const horas = Math.floor(diff / (1000 * 60 * 60));
-    const minutos = Math.floor(diff / (1000 * 60));
+		const total = solicitacoes.length;
+		const pendentes = solicitacoes.filter((s) => s.status === 'pendente').length;
+		const aprovadas = solicitacoes.filter((s) => s.status === 'aprovado').length;
+		const rejeitadas = solicitacoes.filter((s) => s.status === 'rejeitado').length;
 
-    if (dias > 0) return `${dias} dia${dias > 1 ? 's' : ''} atrás`;
-    if (horas > 0) return `${horas} hora${horas > 1 ? 's' : ''} atrás`;
-    if (minutos > 0) return `${minutos} minuto${minutos > 1 ? 's' : ''} atrás`;
-    return "Agora";
-  }
+		return {
+			total,
+			pendentes,
+			aprovadas,
+			rejeitadas
+		};
+	});
 
-  function getStatusBadge(status: StatusSolicitacao): string {
-    switch (status) {
-      case "pendente":
-        return "badge-warning";
-      case "aprovado":
-        return "badge-success";
-      case "rejeitado":
-        return "badge-error";
-      default:
-        return "badge-neutral";
-    }
-  }
+	// Filtrar e buscar solicitações
+	const solicitacoesFiltradas = $derived.by(() => {
+		let resultado = solicitacoes;
 
-  function getStatusTexto(status: StatusSolicitacao): string {
-    switch (status) {
-      case "pendente":
-        return "Pendente";
-      case "aprovado":
-        return "Aprovado";
-      case "rejeitado":
-        return "Rejeitado";
-      default:
-        return status;
-    }
-  }
+		// Filtrar por status
+		if (filtroStatus !== 'todos') {
+			resultado = resultado.filter((s) => s.status === filtroStatus);
+		}
 
-  // Funções de modal
-  function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
-    solicitacaoSelecionada = solicitacao;
-    modalDetalhesAberto = true;
-  }
+		// Buscar por nome, matrícula ou email
+		if (busca.trim()) {
+			const termo = busca.toLowerCase().trim();
+			resultado = resultado.filter(
+				(s) =>
+					s.nome.toLowerCase().includes(termo) ||
+					s.matricula.toLowerCase().includes(termo) ||
+					s.email.toLowerCase().includes(termo)
+			);
+		}
 
-  function fecharDetalhes() {
-    modalDetalhesAberto = false;
-    solicitacaoSelecionada = null;
-  }
+		// Ordenar por data (mais recente primeiro)
+		return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
+	});
 
-  function abrirAprovar(solicitacao: SolicitacaoAcesso) {
-    solicitacaoSelecionada = solicitacao;
-    observacoes = "";
-    modalAprovarAberto = true;
-  }
+	// Funções auxiliares
+	function formatarData(timestamp: number): string {
+		return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
+	}
 
-  function fecharAprovar() {
-    modalAprovarAberto = false;
-    solicitacaoSelecionada = null;
-    observacoes = "";
-  }
+	function formatarDataRelativa(timestamp: number): string {
+		const agora = Date.now();
+		const diff = agora - timestamp;
+		const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
+		const horas = Math.floor(diff / (1000 * 60 * 60));
+		const minutos = Math.floor(diff / (1000 * 60));
 
-  function abrirRejeitar(solicitacao: SolicitacaoAcesso) {
-    solicitacaoSelecionada = solicitacao;
-    observacoes = "";
-    modalRejeitarAberto = true;
-  }
+		if (dias > 0) return `${dias} dia${dias > 1 ? 's' : ''} atrás`;
+		if (horas > 0) return `${horas} hora${horas > 1 ? 's' : ''} atrás`;
+		if (minutos > 0) return `${minutos} minuto${minutos > 1 ? 's' : ''} atrás`;
+		return 'Agora';
+	}
 
-  function fecharRejeitar() {
-    modalRejeitarAberto = false;
-    solicitacaoSelecionada = null;
-    observacoes = "";
-  }
+	function getStatusBadge(status: StatusSolicitacao): string {
+		switch (status) {
+			case 'pendente':
+				return 'badge-warning';
+			case 'aprovado':
+				return 'badge-success';
+			case 'rejeitado':
+				return 'badge-error';
+			default:
+				return 'badge-neutral';
+		}
+	}
 
-  // Funções de ação
-  async function aprovarSolicitacao() {
-    if (!solicitacaoSelecionada) return;
+	function getStatusTexto(status: StatusSolicitacao): string {
+		switch (status) {
+			case 'pendente':
+				return 'Pendente';
+			case 'aprovado':
+				return 'Aprovado';
+			case 'rejeitado':
+				return 'Rejeitado';
+			default:
+				return status;
+		}
+	}
 
-    processando = true;
-    mensagem = null;
+	// Funções de modal
+	function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
+		solicitacaoSelecionada = solicitacao;
+		modalDetalhesAberto = true;
+	}
 
-    try {
-      await client.mutation(api.solicitacoesAcesso.aprovar, {
-        solicitacaoId: solicitacaoSelecionada._id,
-        observacoes: observacoes.trim() || undefined,
-      });
+	function fecharDetalhes() {
+		modalDetalhesAberto = false;
+		solicitacaoSelecionada = null;
+	}
 
-      mensagem = {
-        tipo: "success",
-        texto: "Solicitação aprovada com sucesso!",
-      };
+	function abrirAprovar(solicitacao: SolicitacaoAcesso) {
+		solicitacaoSelecionada = solicitacao;
+		observacoes = '';
+		modalAprovarAberto = true;
+	}
 
-      fecharAprovar();
-      
-      // Limpar mensagem após 3 segundos
-      setTimeout(() => {
-        mensagem = null;
-      }, 3000);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Erro ao aprovar solicitação";
-      mensagem = {
-        tipo: "error",
-        texto: errorMessage,
-      };
-    } finally {
-      processando = false;
-    }
-  }
+	function fecharAprovar() {
+		modalAprovarAberto = false;
+		solicitacaoSelecionada = null;
+		observacoes = '';
+	}
 
-  async function rejeitarSolicitacao() {
-    if (!solicitacaoSelecionada) return;
+	function abrirRejeitar(solicitacao: SolicitacaoAcesso) {
+		solicitacaoSelecionada = solicitacao;
+		observacoes = '';
+		modalRejeitarAberto = true;
+	}
 
-    processando = true;
-    mensagem = null;
+	function fecharRejeitar() {
+		modalRejeitarAberto = false;
+		solicitacaoSelecionada = null;
+		observacoes = '';
+	}
 
-    try {
-      await client.mutation(api.solicitacoesAcesso.rejeitar, {
-        solicitacaoId: solicitacaoSelecionada._id,
-        observacoes: observacoes.trim() || undefined,
-      });
+	// Funções de ação
+	async function aprovarSolicitacao() {
+		if (!solicitacaoSelecionada) return;
 
-      mensagem = {
-        tipo: "success",
-        texto: "Solicitação rejeitada com sucesso!",
-      };
+		processando = true;
+		mensagem = null;
 
-      fecharRejeitar();
-      
-      // Limpar mensagem após 3 segundos
-      setTimeout(() => {
-        mensagem = null;
-      }, 3000);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Erro ao rejeitar solicitação";
-      mensagem = {
-        tipo: "error",
-        texto: errorMessage,
-      };
-    } finally {
-      processando = false;
-    }
-  }
+		try {
+			await client.mutation(api.solicitacoesAcesso.aprovar, {
+				solicitacaoId: solicitacaoSelecionada._id,
+				observacoes: observacoes.trim() || undefined
+			});
+
+			mensagem = {
+				tipo: 'success',
+				texto: 'Solicitação aprovada com sucesso!'
+			};
+
+			fecharAprovar();
+
+			// Limpar mensagem após 3 segundos
+			setTimeout(() => {
+				mensagem = null;
+			}, 3000);
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Erro ao aprovar solicitação';
+			mensagem = {
+				tipo: 'error',
+				texto: errorMessage
+			};
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function rejeitarSolicitacao() {
+		if (!solicitacaoSelecionada) return;
+
+		processando = true;
+		mensagem = null;
+
+		try {
+			await client.mutation(api.solicitacoesAcesso.rejeitar, {
+				solicitacaoId: solicitacaoSelecionada._id,
+				observacoes: observacoes.trim() || undefined
+			});
+
+			mensagem = {
+				tipo: 'success',
+				texto: 'Solicitação rejeitada com sucesso!'
+			};
+
+			fecharRejeitar();
+
+			// Limpar mensagem após 3 segundos
+			setTimeout(() => {
+				mensagem = null;
+			}, 3000);
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Erro ao rejeitar solicitação';
+			mensagem = {
+				tipo: 'error',
+				texto: errorMessage
+			};
+		} finally {
+			processando = false;
+		}
+	}
 </script>
 
-<ProtectedRoute allowedRoles={["ti_master", "admin", "ti_usuario"]} maxLevel={3}>
-  <div class="container mx-auto px-4 py-6 max-w-7xl">
-    <!-- Mensagem de Feedback -->
-    {#if mensagem}
-      <div class="alert alert-{mensagem.tipo} shadow-lg mb-6">
-        {#if mensagem.tipo === "success"}
-          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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>
-        {:else if mensagem.tipo === "error"}
-          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" 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>
-        {/if}
-        <span>{mensagem.texto}</span>
-      </div>
-    {/if}
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+	<div class="container mx-auto max-w-7xl px-4 py-6">
+		<!-- Mensagem de Feedback -->
+		{#if mensagem}
+			<div class="alert alert-{mensagem.tipo} mb-6 shadow-lg">
+				{#if mensagem.tipo === 'success'}
+					<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>
+				{:else if mensagem.tipo === 'error'}
+					<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>
+				{/if}
+				<span>{mensagem.texto}</span>
+			</div>
+		{/if}
 
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-8">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-primary/10 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-base-content">Solicitações de Acesso</h1>
-          <p class="text-base-content/60 mt-1">Gerencie e analise solicitações de acesso ao sistema</p>
-        </div>
-      </div>
-    </div>
+		<!-- Header -->
+		<div class="mb-8 flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="bg-primary/10 rounded-xl p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-8 w-8"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-base-content text-3xl font-bold">Solicitações de Acesso</h1>
+					<p class="text-base-content/60 mt-1">
+						Gerencie e analise solicitações de acesso ao sistema
+					</p>
+				</div>
+			</div>
+		</div>
 
-    <!-- Estatísticas -->
-    {#if stats}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        <StatsCard 
-          title="Total de Solicitações" 
-          value={stats.total} 
-          Icon={FileText}
-          color="primary"
-        />
-        
-        <StatsCard 
-          title="Pendentes" 
-          value={stats.pendentes} 
-          description="{stats.total > 0 ? ((stats.pendentes / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          Icon={Clock}
-          color="warning"
-        />
-        
-        <StatsCard 
-          title="Aprovadas" 
-          value={stats.aprovadas} 
-          description="{stats.total > 0 ? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          Icon={CheckCircle2}
-          color="success"
-        />
-        
-        <StatsCard 
-          title="Rejeitadas" 
-          value={stats.rejeitadas} 
-          description="{stats.total > 0 ? ((stats.rejeitadas / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          Icon={XCircle}
-          color="error"
-        />
-      </div>
-    {:else}
-      <div class="flex justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {/if}
+		<!-- Estatísticas -->
+		{#if stats}
+			<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+				<StatsCard
+					title="Total de Solicitações"
+					value={stats.total}
+					Icon={FileText}
+					color="primary"
+				/>
 
-    <!-- Filtros e Busca -->
-    <div class="card bg-base-100 shadow-xl mb-6">
-      <div class="card-body">
-        <!-- Tabs de Status -->
-        <div class="tabs tabs-boxed mb-4 bg-base-200 p-2">
-          <button 
-            class="tab {filtroStatus === 'todos' ? 'tab-active' : ''}"
-            onclick={() => filtroStatus = "todos"}
-          >
-            Todas
-          </button>
-          <button 
-            class="tab {filtroStatus === 'pendente' ? 'tab-active' : ''}"
-            onclick={() => filtroStatus = "pendente"}
-          >
-            Pendentes
-          </button>
-          <button 
-            class="tab {filtroStatus === 'aprovado' ? 'tab-active' : ''}"
-            onclick={() => filtroStatus = "aprovado"}
-          >
-            Aprovadas
-          </button>
-          <button 
-            class="tab {filtroStatus === 'rejeitado' ? 'tab-active' : ''}"
-            onclick={() => filtroStatus = "rejeitado"}
-          >
-            Rejeitadas
-          </button>
-        </div>
+				<StatsCard
+					title="Pendentes"
+					value={stats.pendentes}
+					description={stats.total > 0
+						? ((stats.pendentes / stats.total) * 100).toFixed(1) + '% do total'
+						: '0% do total'}
+					Icon={Clock}
+					color="warning"
+				/>
 
-        <!-- Campo de Busca -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-semibold">Buscar por nome, matrícula ou e-mail</span>
-          </label>
-          <div class="relative">
-            <input
-              type="text"
-              placeholder="Digite para buscar..."
-              class="input input-bordered w-full pl-10"
-              bind:value={busca}
-            />
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
+				<StatsCard
+					title="Aprovadas"
+					value={stats.aprovadas}
+					description={stats.total > 0
+						? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total'
+						: '0% do total'}
+					Icon={CheckCircle2}
+					color="success"
+				/>
 
-    <!-- Lista de Solicitações -->
-    {#if carregando}
-      <div class="flex justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {:else if solicitacoesFiltradas.length === 0}
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body text-center py-20">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-base-content/30 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-          <h3 class="text-xl font-semibold text-base-content/70 mb-2">Nenhuma solicitação encontrada</h3>
-          <p class="text-base-content/50">
-            {#if busca.trim() || filtroStatus !== "todos"}
-              Tente ajustar os filtros ou a busca.
-            {:else}
-              Ainda não há solicitações de acesso cadastradas.
-            {/if}
-          </p>
-        </div>
-      </div>
-    {:else}
-      <div class="grid grid-cols-1 gap-4">
-        {#each solicitacoesFiltradas as solicitacao}
-          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
-            <div class="card-body">
-              <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-                <div class="flex-1">
-                  <div class="flex items-center gap-3 mb-2">
-                    <h3 class="text-xl font-bold text-base-content">{solicitacao.nome}</h3>
-                    <span class="badge {getStatusBadge(solicitacao.status)} badge-lg">
-                      {getStatusTexto(solicitacao.status)}
-                    </span>
-                  </div>
-                  
-                  <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-sm text-base-content/70">
-                    <div class="flex items-center gap-2">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
-                      </svg>
-                      <span class="font-semibold">Matrícula:</span>
-                      <span>{solicitacao.matricula}</span>
-                    </div>
-                    
-                    <div class="flex items-center gap-2">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                      </svg>
-                      <span class="font-semibold">E-mail:</span>
-                      <span>{solicitacao.email}</span>
-                    </div>
-                    
-                    <div class="flex items-center gap-2">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                      </svg>
-                      <span class="font-semibold">Telefone:</span>
-                      <span>{solicitacao.telefone}</span>
-                    </div>
-                  </div>
-                  
-                  <div class="mt-3 text-xs text-base-content/50">
-                    <span class="font-semibold">Solicitado em:</span> {formatarData(solicitacao.dataSolicitacao)} ({formatarDataRelativa(solicitacao.dataSolicitacao)})
-                    {#if solicitacao.dataResposta}
-                      <span class="ml-4 font-semibold">Processado em:</span> {formatarData(solicitacao.dataResposta)}
-                    {/if}
-                  </div>
-                </div>
-                
-                <div class="flex flex-col gap-2">
-                  <button 
-                    class="btn btn-sm btn-outline btn-primary"
-                    onclick={() => abrirDetalhes(solicitacao)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                    </svg>
-                    Ver Detalhes
-                  </button>
-                  
-                  {#if solicitacao.status === "pendente"}
-                    <button 
-                      class="btn btn-sm btn-success"
-                      onclick={() => abrirAprovar(solicitacao)}
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                      </svg>
-                      Aprovar
-                    </button>
-                    
-                    <button 
-                      class="btn btn-sm btn-error"
-                      onclick={() => abrirRejeitar(solicitacao)}
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                      Rejeitar
-                    </button>
-                  {/if}
-                </div>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    {/if}
+				<StatsCard
+					title="Rejeitadas"
+					value={stats.rejeitadas}
+					description={stats.total > 0
+						? ((stats.rejeitadas / stats.total) * 100).toFixed(1) + '% do total'
+						: '0% do total'}
+					Icon={XCircle}
+					color="error"
+				/>
+			</div>
+		{:else}
+			<div class="flex items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{/if}
 
-    <!-- Modal de Detalhes -->
-    {#if modalDetalhesAberto && solicitacaoSelecionada}
-      <dialog class="modal modal-open">
-        <div class="modal-box max-w-2xl">
-          <h3 class="font-bold text-2xl mb-4">Detalhes da Solicitação</h3>
-          
-          <div class="space-y-4">
-            <div class="flex items-center gap-3 mb-4">
-              <span class="badge {getStatusBadge(solicitacaoSelecionada.status)} badge-lg">
-                {getStatusTexto(solicitacaoSelecionada.status)}
-              </span>
-            </div>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Nome Completo</span>
-                </label>
-                <div class="input input-bordered">{solicitacaoSelecionada.nome}</div>
-              </div>
-              
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Matrícula</span>
-                </label>
-                <div class="input input-bordered">{solicitacaoSelecionada.matricula}</div>
-              </div>
-              
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">E-mail</span>
-                </label>
-                <div class="input input-bordered">{solicitacaoSelecionada.email}</div>
-              </div>
-              
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Telefone</span>
-                </label>
-                <div class="input input-bordered">{solicitacaoSelecionada.telefone}</div>
-              </div>
-              
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Data da Solicitação</span>
-                </label>
-                <div class="input input-bordered">
-                  {formatarData(solicitacaoSelecionada.dataSolicitacao)}
-                </div>
-              </div>
-              
-              {#if solicitacaoSelecionada.dataResposta}
-                <div>
-                  <label class="label">
-                    <span class="label-text font-semibold">Data de Processamento</span>
-                  </label>
-                  <div class="input input-bordered">
-                    {formatarData(solicitacaoSelecionada.dataResposta)}
-                  </div>
-                </div>
-              {/if}
-            </div>
-            
-            {#if solicitacaoSelecionada.observacoes}
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Observações</span>
-                </label>
-                <div class="textarea textarea-bordered min-h-24">
-                  {solicitacaoSelecionada.observacoes}
-                </div>
-              </div>
-            {/if}
-          </div>
-          
-          <div class="modal-action">
-            <button class="btn" onclick={fecharDetalhes}>Fechar</button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button onclick={fecharDetalhes}>fechar</button>
-        </form>
-      </dialog>
-    {/if}
+		<!-- Filtros e Busca -->
+		<div class="card bg-base-100 mb-6 shadow-xl">
+			<div class="card-body">
+				<!-- Tabs de Status -->
+				<div class="tabs tabs-boxed bg-base-200 mb-4 p-2">
+					<button
+						class="tab {filtroStatus === 'todos' ? 'tab-active' : ''}"
+						onclick={() => (filtroStatus = 'todos')}
+					>
+						Todas
+					</button>
+					<button
+						class="tab {filtroStatus === 'pendente' ? 'tab-active' : ''}"
+						onclick={() => (filtroStatus = 'pendente')}
+					>
+						Pendentes
+					</button>
+					<button
+						class="tab {filtroStatus === 'aprovado' ? 'tab-active' : ''}"
+						onclick={() => (filtroStatus = 'aprovado')}
+					>
+						Aprovadas
+					</button>
+					<button
+						class="tab {filtroStatus === 'rejeitado' ? 'tab-active' : ''}"
+						onclick={() => (filtroStatus = 'rejeitado')}
+					>
+						Rejeitadas
+					</button>
+				</div>
 
-    <!-- Modal de Aprovar -->
-    {#if modalAprovarAberto && solicitacaoSelecionada}
-      <dialog class="modal modal-open">
-        <div class="modal-box">
-          <h3 class="font-bold text-2xl mb-4">Aprovar Solicitação</h3>
-          
-          <div class="mb-4">
-            <p class="text-base-content/70 mb-2">
-              Você está prestes a aprovar a solicitação de acesso de <strong>{solicitacaoSelecionada.nome}</strong>.
-            </p>
-            <p class="text-sm text-base-content/60">
-              Após aprovar, o sistema permitirá que esta pessoa solicite acesso ao sistema.
-            </p>
-          </div>
-          
-          <div class="form-control mb-4">
-            <label class="label">
-              <span class="label-text font-semibold">Observações (opcional)</span>
-            </label>
-            <textarea
-              class="textarea textarea-bordered"
-              placeholder="Adicione observações sobre a aprovação..."
-              bind:value={observacoes}
-              rows="3"
-            ></textarea>
-          </div>
-          
-          <div class="modal-action">
-            <button 
-              class="btn btn-ghost" 
-              onclick={fecharAprovar}
-              disabled={processando}
-            >
-              Cancelar
-            </button>
-            <button 
-              class="btn btn-success" 
-              onclick={aprovarSolicitacao}
-              disabled={processando}
-            >
-              {#if processando}
-                <span class="loading loading-spinner loading-sm"></span>
-                Processando...
-              {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                </svg>
-                Confirmar Aprovação
-              {/if}
-            </button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button onclick={fecharAprovar}>fechar</button>
-        </form>
-      </dialog>
-    {/if}
+				<!-- Campo de Busca -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-semibold">Buscar por nome, matrícula ou e-mail</span>
+					</label>
+					<div class="relative">
+						<input
+							type="text"
+							placeholder="Digite para buscar..."
+							class="input input-bordered w-full pl-10"
+							bind:value={busca}
+						/>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							/>
+						</svg>
+					</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Modal de Rejeitar -->
-    {#if modalRejeitarAberto && solicitacaoSelecionada}
-      <dialog class="modal modal-open">
-        <div class="modal-box">
-          <h3 class="font-bold text-2xl mb-4">Rejeitar Solicitação</h3>
-          
-          <div class="mb-4">
-            <p class="text-base-content/70 mb-2">
-              Você está prestes a rejeitar a solicitação de acesso de <strong>{solicitacaoSelecionada.nome}</strong>.
-            </p>
-            <p class="text-sm text-base-content/60">
-              Esta ação não pode ser desfeita. Recomendamos adicionar um motivo para a rejeição.
-            </p>
-          </div>
-          
-          <div class="form-control mb-4">
-            <label class="label">
-              <span class="label-text font-semibold">Motivo da Rejeição (recomendado)</span>
-            </label>
-            <textarea
-              class="textarea textarea-bordered"
-              placeholder="Descreva o motivo da rejeição..."
-              bind:value={observacoes}
-              rows="3"
-            ></textarea>
-          </div>
-          
-          <div class="modal-action">
-            <button 
-              class="btn btn-ghost" 
-              onclick={fecharRejeitar}
-              disabled={processando}
-            >
-              Cancelar
-            </button>
-            <button 
-              class="btn btn-error" 
-              onclick={rejeitarSolicitacao}
-              disabled={processando}
-            >
-              {#if processando}
-                <span class="loading loading-spinner loading-sm"></span>
-                Processando...
-              {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Confirmar Rejeição
-              {/if}
-            </button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button onclick={fecharRejeitar}>fechar</button>
-        </form>
-      </dialog>
-    {/if}
-  </div>
+		<!-- Lista de Solicitações -->
+		{#if carregando}
+			<div class="flex items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{:else if solicitacoesFiltradas.length === 0}
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body py-20 text-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-base-content/30 mx-auto mb-4 h-16 w-16"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+					<h3 class="text-base-content/70 mb-2 text-xl font-semibold">
+						Nenhuma solicitação encontrada
+					</h3>
+					<p class="text-base-content/50">
+						{#if busca.trim() || filtroStatus !== 'todos'}
+							Tente ajustar os filtros ou a busca.
+						{:else}
+							Ainda não há solicitações de acesso cadastradas.
+						{/if}
+					</p>
+				</div>
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 gap-4">
+				{#each solicitacoesFiltradas as solicitacao}
+					<div class="card bg-base-100 shadow-xl transition-shadow hover:shadow-2xl">
+						<div class="card-body">
+							<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+								<div class="flex-1">
+									<div class="mb-2 flex items-center gap-3">
+										<h3 class="text-base-content text-xl font-bold">{solicitacao.nome}</h3>
+										<span class="badge {getStatusBadge(solicitacao.status)} badge-lg">
+											{getStatusTexto(solicitacao.status)}
+										</span>
+									</div>
+
+									<div class="text-base-content/70 grid grid-cols-1 gap-2 text-sm md:grid-cols-3">
+										<div class="flex items-center gap-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
+												/>
+											</svg>
+											<span class="font-semibold">Matrícula:</span>
+											<span>{solicitacao.matricula}</span>
+										</div>
+
+										<div class="flex items-center gap-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+												/>
+											</svg>
+											<span class="font-semibold">E-mail:</span>
+											<span>{solicitacao.email}</span>
+										</div>
+
+										<div class="flex items-center gap-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+												/>
+											</svg>
+											<span class="font-semibold">Telefone:</span>
+											<span>{solicitacao.telefone}</span>
+										</div>
+									</div>
+
+									<div class="text-base-content/50 mt-3 text-xs">
+										<span class="font-semibold">Solicitado em:</span>
+										{formatarData(solicitacao.dataSolicitacao)} ({formatarDataRelativa(
+											solicitacao.dataSolicitacao
+										)})
+										{#if solicitacao.dataResposta}
+											<span class="ml-4 font-semibold">Processado em:</span>
+											{formatarData(solicitacao.dataResposta)}
+										{/if}
+									</div>
+								</div>
+
+								<div class="flex flex-col gap-2">
+									<button
+										class="btn btn-sm btn-outline btn-primary"
+										onclick={() => abrirDetalhes(solicitacao)}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+											/>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+											/>
+										</svg>
+										Ver Detalhes
+									</button>
+
+									{#if solicitacao.status === 'pendente'}
+										<button
+											class="btn btn-sm btn-success"
+											onclick={() => abrirAprovar(solicitacao)}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M5 13l4 4L19 7"
+												/>
+											</svg>
+											Aprovar
+										</button>
+
+										<button class="btn btn-sm btn-error" onclick={() => abrirRejeitar(solicitacao)}>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg>
+											Rejeitar
+										</button>
+									{/if}
+								</div>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- Modal de Detalhes -->
+		{#if modalDetalhesAberto && solicitacaoSelecionada}
+			<dialog class="modal modal-open">
+				<div class="modal-box max-w-2xl">
+					<h3 class="mb-4 text-2xl font-bold">Detalhes da Solicitação</h3>
+
+					<div class="space-y-4">
+						<div class="mb-4 flex items-center gap-3">
+							<span class="badge {getStatusBadge(solicitacaoSelecionada.status)} badge-lg">
+								{getStatusTexto(solicitacaoSelecionada.status)}
+							</span>
+						</div>
+
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Nome Completo</span>
+								</label>
+								<div class="input input-bordered">{solicitacaoSelecionada.nome}</div>
+							</div>
+
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Matrícula</span>
+								</label>
+								<div class="input input-bordered">{solicitacaoSelecionada.matricula}</div>
+							</div>
+
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">E-mail</span>
+								</label>
+								<div class="input input-bordered">{solicitacaoSelecionada.email}</div>
+							</div>
+
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Telefone</span>
+								</label>
+								<div class="input input-bordered">{solicitacaoSelecionada.telefone}</div>
+							</div>
+
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Data da Solicitação</span>
+								</label>
+								<div class="input input-bordered">
+									{formatarData(solicitacaoSelecionada.dataSolicitacao)}
+								</div>
+							</div>
+
+							{#if solicitacaoSelecionada.dataResposta}
+								<div>
+									<label class="label">
+										<span class="label-text font-semibold">Data de Processamento</span>
+									</label>
+									<div class="input input-bordered">
+										{formatarData(solicitacaoSelecionada.dataResposta)}
+									</div>
+								</div>
+							{/if}
+						</div>
+
+						{#if solicitacaoSelecionada.observacoes}
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Observações</span>
+								</label>
+								<div class="textarea textarea-bordered min-h-24">
+									{solicitacaoSelecionada.observacoes}
+								</div>
+							</div>
+						{/if}
+					</div>
+
+					<div class="modal-action">
+						<button class="btn" onclick={fecharDetalhes}>Fechar</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button onclick={fecharDetalhes}>fechar</button>
+				</form>
+			</dialog>
+		{/if}
+
+		<!-- Modal de Aprovar -->
+		{#if modalAprovarAberto && solicitacaoSelecionada}
+			<dialog class="modal modal-open">
+				<div class="modal-box">
+					<h3 class="mb-4 text-2xl font-bold">Aprovar Solicitação</h3>
+
+					<div class="mb-4">
+						<p class="text-base-content/70 mb-2">
+							Você está prestes a aprovar a solicitação de acesso de <strong
+								>{solicitacaoSelecionada.nome}</strong
+							>.
+						</p>
+						<p class="text-base-content/60 text-sm">
+							Após aprovar, o sistema permitirá que esta pessoa solicite acesso ao sistema.
+						</p>
+					</div>
+
+					<div class="form-control mb-4">
+						<label class="label">
+							<span class="label-text font-semibold">Observações (opcional)</span>
+						</label>
+						<textarea
+							class="textarea textarea-bordered"
+							placeholder="Adicione observações sobre a aprovação..."
+							bind:value={observacoes}
+							rows="3"
+						></textarea>
+					</div>
+
+					<div class="modal-action">
+						<button class="btn" onclick={fecharAprovar} disabled={processando}> Cancelar </button>
+						<button class="btn btn-success" onclick={aprovarSolicitacao} disabled={processando}>
+							{#if processando}
+								<span class="loading loading-spinner loading-sm"></span>
+								Processando...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+								Confirmar Aprovação
+							{/if}
+						</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button onclick={fecharAprovar}>fechar</button>
+				</form>
+			</dialog>
+		{/if}
+
+		<!-- Modal de Rejeitar -->
+		{#if modalRejeitarAberto && solicitacaoSelecionada}
+			<dialog class="modal modal-open">
+				<div class="modal-box">
+					<h3 class="mb-4 text-2xl font-bold">Rejeitar Solicitação</h3>
+
+					<div class="mb-4">
+						<p class="text-base-content/70 mb-2">
+							Você está prestes a rejeitar a solicitação de acesso de <strong
+								>{solicitacaoSelecionada.nome}</strong
+							>.
+						</p>
+						<p class="text-base-content/60 text-sm">
+							Esta ação não pode ser desfeita. Recomendamos adicionar um motivo para a rejeição.
+						</p>
+					</div>
+
+					<div class="form-control mb-4">
+						<label class="label">
+							<span class="label-text font-semibold">Motivo da Rejeição (recomendado)</span>
+						</label>
+						<textarea
+							class="textarea textarea-bordered"
+							placeholder="Descreva o motivo da rejeição..."
+							bind:value={observacoes}
+							rows="3"
+						></textarea>
+					</div>
+
+					<div class="modal-action">
+						<button class="btn" onclick={fecharRejeitar} disabled={processando}> Cancelar </button>
+						<button class="btn btn-error" onclick={rejeitarSolicitacao} disabled={processando}>
+							{#if processando}
+								<span class="loading loading-spinner loading-sm"></span>
+								Processando...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Confirmar Rejeição
+							{/if}
+						</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button onclick={fecharRejeitar}>fechar</button>
+				</form>
+			</dialog>
+		{/if}
+	</div>
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
index f342979..b079991 100644
--- a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
@@ -1,873 +1,811 @@
 <script lang="ts">
-  import { useConvexClient, useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import { goto } from "$app/navigation";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import { goto } from '$app/navigation';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  // Tipos baseados nos retornos das queries do backend
-  type Usuario = {
-    _id: Id<"usuarios">;
-    matricula: string;
-    nome: string;
-    email: string;
-    ativo: boolean;
-    bloqueado?: boolean;
-    motivoBloqueio?: string;
-    primeiroAcesso: boolean;
-    ultimoAcesso?: number;
-    criadoEm: number;
-    role: {
-      _id: Id<"roles">;
-      _creationTime?: number;
-      criadoPor?: Id<"usuarios">;
-      customizado?: boolean;
-      descricao: string;
-      editavel?: boolean;
-      nome: string;
-      nivel: number;
-      setor?: string;
-      erro?: boolean;
-    };
-    funcionario?: {
-      _id: Id<"funcionarios">;
-      nome: string;
-      matricula?: string;
-      descricaoCargo?: string;
-      simboloTipo: "cargo_comissionado" | "funcao_gratificada";
-    };
-    avisos?: Array<{
-      tipo: "erro" | "aviso" | "info";
-      mensagem: string;
-    }>;
-  };
+	// Tipos baseados nos retornos das queries do backend
+	type Usuario = {
+		_id: Id<'usuarios'>;
+		matricula: string;
+		nome: string;
+		email: string;
+		ativo: boolean;
+		bloqueado?: boolean;
+		motivoBloqueio?: string;
+		primeiroAcesso: boolean;
+		ultimoAcesso?: number;
+		criadoEm: number;
+		role: {
+			_id: Id<'roles'>;
+			_creationTime?: number;
+			criadoPor?: Id<'usuarios'>;
+			customizado?: boolean;
+			descricao: string;
+			editavel?: boolean;
+			nome: string;
+			nivel: number;
+			setor?: string;
+			erro?: boolean;
+		};
+		funcionario?: {
+			_id: Id<'funcionarios'>;
+			nome: string;
+			matricula?: string;
+			descricaoCargo?: string;
+			simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
+		};
+		avisos?: Array<{
+			tipo: 'erro' | 'aviso' | 'info';
+			mensagem: string;
+		}>;
+	};
 
-  type Funcionario = {
-    _id: Id<"funcionarios">;
-    nome: string;
-    matricula?: string;
-    cpf?: string;
-    rg?: string;
-    nascimento?: string;
-    email?: string;
-    telefone?: string;
-    endereco?: string;
-    cep?: string;
-    cidade?: string;
-    uf?: string;
-    simboloId: Id<"simbolos">;
-    simboloTipo: "cargo_comissionado" | "funcao_gratificada";
-    admissaoData?: string;
-    desligamentoData?: string;
-    descricaoCargo?: string;
-  };
+	type Funcionario = {
+		_id: Id<'funcionarios'>;
+		nome: string;
+		matricula?: string;
+		cpf?: string;
+		rg?: string;
+		nascimento?: string;
+		email?: string;
+		telefone?: string;
+		endereco?: string;
+		cep?: string;
+		cidade?: string;
+		uf?: string;
+		simboloId: Id<'simbolos'>;
+		simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
+		admissaoData?: string;
+		desligamentoData?: string;
+		descricaoCargo?: string;
+	};
 
-  type Gestor = Doc<"usuarios"> | null;
+	type Gestor = Doc<'usuarios'> | null;
 
-  type TimeComDetalhes = Doc<"times"> & {
-    gestor: Gestor;
-    totalMembros: number;
-  };
+	type TimeComDetalhes = Doc<'times'> & {
+		gestor: Gestor;
+		totalMembros: number;
+	};
 
-  type MembroTime = Doc<"timesMembros"> & {
-    funcionario: Doc<"funcionarios"> | null;
-  };
+	type MembroTime = Doc<'timesMembros'> & {
+		funcionario: Doc<'funcionarios'> | null;
+	};
 
-  type TimeComMembros = Doc<"times"> & {
-    gestor: Gestor;
-    membros: MembroTime[];
-  };
+	type TimeComMembros = Doc<'times'> & {
+		gestor: Gestor;
+		membros: MembroTime[];
+	};
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  // Queries
-  const timesQuery = useQuery(api.times.listar, {});
-  const usuariosQuery = useQuery(api.usuarios.listar, {});
-  const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+	// Queries
+	const timesQuery = useQuery(api.times.listar, {});
+	const usuariosQuery = useQuery(api.usuarios.listar, {});
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
 
-  const times = $derived((timesQuery?.data || []) as TimeComDetalhes[]);
-  const usuarios = $derived((usuariosQuery?.data || []) as Usuario[]);
-  const funcionarios = $derived(
-    (funcionariosQuery?.data || []) as Funcionario[],
-  );
+	const times = $derived((timesQuery?.data || []) as TimeComDetalhes[]);
+	const usuarios = $derived((usuariosQuery?.data || []) as Usuario[]);
+	const funcionarios = $derived((funcionariosQuery?.data || []) as Funcionario[]);
 
-  const carregando = $derived(
-    timesQuery === undefined ||
-      usuariosQuery === undefined ||
-      funcionariosQuery === undefined,
-  );
+	const carregando = $derived(
+		timesQuery === undefined || usuariosQuery === undefined || funcionariosQuery === undefined
+	);
 
-  // Estados
-  let modoEdicao = $state(false);
-  let timeEmEdicao = $state<TimeComDetalhes | null>(null);
-  let mostrarModalMembros = $state(false);
-  let timeParaMembros = $state<TimeComMembros | null>(null);
-  let mostrarConfirmacaoExclusao = $state(false);
-  let timeParaExcluir = $state<TimeComDetalhes | null>(null);
-  let processando = $state(false);
+	// Estados
+	let modoEdicao = $state(false);
+	let timeEmEdicao = $state<TimeComDetalhes | null>(null);
+	let mostrarModalMembros = $state(false);
+	let timeParaMembros = $state<TimeComMembros | null>(null);
+	let mostrarConfirmacaoExclusao = $state(false);
+	let timeParaExcluir = $state<TimeComDetalhes | null>(null);
+	let processando = $state(false);
 
-  // Form
-  let formNome = $state("");
-  let formDescricao = $state("");
-  let formGestorId = $state("");
-  let formCor = $state("#3B82F6");
+	// Form
+	let formNome = $state('');
+	let formDescricao = $state('');
+	let formGestorId = $state('');
+	let formCor = $state('#3B82F6');
 
-  // Membros
-  let membrosDisponiveis = $derived(
-    funcionarios.filter((f: Funcionario) => {
-      // Verificar se o funcionário já está em algum time ativo
-      const jaNaEquipe = timeParaMembros?.membros?.some(
-        (m: MembroTime) => m.funcionario?._id === f._id,
-      );
-      return !jaNaEquipe;
-    }),
-  );
+	// Membros
+	let membrosDisponiveis = $derived(
+		funcionarios.filter((f: Funcionario) => {
+			// Verificar se o funcionário já está em algum time ativo
+			const jaNaEquipe = timeParaMembros?.membros?.some(
+				(m: MembroTime) => m.funcionario?._id === f._id
+			);
+			return !jaNaEquipe;
+		})
+	);
 
-  // Cores predefinidas
-  const coresDisponiveis = [
-    "#3B82F6", // Blue
-    "#10B981", // Green
-    "#F59E0B", // Yellow
-    "#EF4444", // Red
-    "#8B5CF6", // Purple
-    "#EC4899", // Pink
-    "#14B8A6", // Teal
-    "#F97316", // Orange
-  ];
+	// Cores predefinidas
+	const coresDisponiveis = [
+		'#3B82F6', // Blue
+		'#10B981', // Green
+		'#F59E0B', // Yellow
+		'#EF4444', // Red
+		'#8B5CF6', // Purple
+		'#EC4899', // Pink
+		'#14B8A6', // Teal
+		'#F97316' // Orange
+	];
 
-  function novoTime() {
-    modoEdicao = true;
-    timeEmEdicao = null;
-    formNome = "";
-    formDescricao = "";
-    formGestorId = "";
-    formCor =
-      coresDisponiveis[Math.floor(Math.random() * coresDisponiveis.length)];
-  }
+	function novoTime() {
+		modoEdicao = true;
+		timeEmEdicao = null;
+		formNome = '';
+		formDescricao = '';
+		formGestorId = '';
+		formCor = coresDisponiveis[Math.floor(Math.random() * coresDisponiveis.length)];
+	}
 
-  function editarTime(time: TimeComDetalhes) {
-    modoEdicao = true;
-    timeEmEdicao = time;
-    formNome = time.nome;
-    formDescricao = time.descricao || "";
-    formGestorId = time.gestorId;
-    formCor = time.cor || "#3B82F6";
-  }
+	function editarTime(time: TimeComDetalhes) {
+		modoEdicao = true;
+		timeEmEdicao = time;
+		formNome = time.nome;
+		formDescricao = time.descricao || '';
+		formGestorId = time.gestorId;
+		formCor = time.cor || '#3B82F6';
+	}
 
-  function cancelarEdicao() {
-    modoEdicao = false;
-    timeEmEdicao = null;
-    formNome = "";
-    formDescricao = "";
-    formGestorId = "";
-    formCor = "#3B82F6";
-  }
+	function cancelarEdicao() {
+		modoEdicao = false;
+		timeEmEdicao = null;
+		formNome = '';
+		formDescricao = '';
+		formGestorId = '';
+		formCor = '#3B82F6';
+	}
 
-  async function salvarTime() {
-    if (!formNome.trim() || !formGestorId) {
-      alert("Preencha todos os campos obrigatórios!");
-      return;
-    }
+	async function salvarTime() {
+		if (!formNome.trim() || !formGestorId) {
+			alert('Preencha todos os campos obrigatórios!');
+			return;
+		}
 
-    processando = true;
-    try {
-      if (timeEmEdicao) {
-        await client.mutation(api.times.atualizar, {
-          id: timeEmEdicao._id,
-          nome: formNome,
-          descricao: formDescricao || undefined,
-          gestorId: formGestorId as Id<"usuarios">,
-          cor: formCor,
-        });
-      } else {
-        await client.mutation(api.times.criar, {
-          nome: formNome,
-          descricao: formDescricao || undefined,
-          gestorId: formGestorId as Id<"usuarios">,
-          cor: formCor,
-        });
-      }
-      cancelarEdicao();
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      alert("Erro ao salvar: " + errorMessage);
-    } finally {
-      processando = false;
-    }
-  }
+		processando = true;
+		try {
+			if (timeEmEdicao) {
+				await client.mutation(api.times.atualizar, {
+					id: timeEmEdicao._id,
+					nome: formNome,
+					descricao: formDescricao || undefined,
+					gestorId: formGestorId as Id<'usuarios'>,
+					cor: formCor
+				});
+			} else {
+				await client.mutation(api.times.criar, {
+					nome: formNome,
+					descricao: formDescricao || undefined,
+					gestorId: formGestorId as Id<'usuarios'>,
+					cor: formCor
+				});
+			}
+			cancelarEdicao();
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			alert('Erro ao salvar: ' + errorMessage);
+		} finally {
+			processando = false;
+		}
+	}
 
-  function confirmarExclusao(time: TimeComDetalhes) {
-    timeParaExcluir = time;
-    mostrarConfirmacaoExclusao = true;
-  }
+	function confirmarExclusao(time: TimeComDetalhes) {
+		timeParaExcluir = time;
+		mostrarConfirmacaoExclusao = true;
+	}
 
-  async function excluirTime() {
-    if (!timeParaExcluir) return;
+	async function excluirTime() {
+		if (!timeParaExcluir) return;
 
-    processando = true;
-    try {
-      await client.mutation(api.times.desativar, { id: timeParaExcluir._id });
-      mostrarConfirmacaoExclusao = false;
-      timeParaExcluir = null;
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      alert("Erro ao excluir: " + errorMessage);
-    } finally {
-      processando = false;
-    }
-  }
+		processando = true;
+		try {
+			await client.mutation(api.times.desativar, { id: timeParaExcluir._id });
+			mostrarConfirmacaoExclusao = false;
+			timeParaExcluir = null;
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			alert('Erro ao excluir: ' + errorMessage);
+		} finally {
+			processando = false;
+		}
+	}
 
-  async function abrirGerenciarMembros(time: TimeComDetalhes) {
-    const detalhes = await client.query(api.times.obterPorId, { id: time._id });
-    if (detalhes) {
-      timeParaMembros = detalhes as TimeComMembros;
-      mostrarModalMembros = true;
-    }
-  }
+	async function abrirGerenciarMembros(time: TimeComDetalhes) {
+		const detalhes = await client.query(api.times.obterPorId, { id: time._id });
+		if (detalhes) {
+			timeParaMembros = detalhes as TimeComMembros;
+			mostrarModalMembros = true;
+		}
+	}
 
-  async function adicionarMembro(funcionarioId: string) {
-    if (!timeParaMembros) return;
+	async function adicionarMembro(funcionarioId: string) {
+		if (!timeParaMembros) return;
 
-    processando = true;
-    try {
-      await client.mutation(api.times.adicionarMembro, {
-        timeId: timeParaMembros._id,
-        funcionarioId: funcionarioId as Id<"funcionarios">,
-      });
+		processando = true;
+		try {
+			await client.mutation(api.times.adicionarMembro, {
+				timeId: timeParaMembros._id,
+				funcionarioId: funcionarioId as Id<'funcionarios'>
+			});
 
-      // Recarregar detalhes do time
-      const detalhes = await client.query(api.times.obterPorId, {
-        id: timeParaMembros._id,
-      });
-      if (detalhes) {
-        timeParaMembros = detalhes as TimeComMembros;
-      }
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      alert("Erro: " + errorMessage);
-    } finally {
-      processando = false;
-    }
-  }
+			// Recarregar detalhes do time
+			const detalhes = await client.query(api.times.obterPorId, {
+				id: timeParaMembros._id
+			});
+			if (detalhes) {
+				timeParaMembros = detalhes as TimeComMembros;
+			}
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			alert('Erro: ' + errorMessage);
+		} finally {
+			processando = false;
+		}
+	}
 
-  async function removerMembro(membroId: string) {
-    if (!confirm("Deseja realmente remover este membro do time?")) return;
+	async function removerMembro(membroId: string) {
+		if (!confirm('Deseja realmente remover este membro do time?')) return;
 
-    processando = true;
-    try {
-      await client.mutation(api.times.removerMembro, {
-        membroId: membroId as Id<"timesMembros">,
-      });
+		processando = true;
+		try {
+			await client.mutation(api.times.removerMembro, {
+				membroId: membroId as Id<'timesMembros'>
+			});
 
-      // Recarregar detalhes do time
-      if (timeParaMembros) {
-        const detalhes = await client.query(api.times.obterPorId, {
-          id: timeParaMembros._id,
-        });
-        if (detalhes) {
-          timeParaMembros = detalhes as TimeComMembros;
-        }
-      }
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      alert("Erro: " + errorMessage);
-    } finally {
-      processando = false;
-    }
-  }
+			// Recarregar detalhes do time
+			if (timeParaMembros) {
+				const detalhes = await client.query(api.times.obterPorId, {
+					id: timeParaMembros._id
+				});
+				if (detalhes) {
+					timeParaMembros = detalhes as TimeComMembros;
+				}
+			}
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			alert('Erro: ' + errorMessage);
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalMembros() {
-    mostrarModalMembros = false;
-    timeParaMembros = null;
-  }
+	function fecharModalMembros() {
+		mostrarModalMembros = false;
+		timeParaMembros = null;
+	}
 </script>
 
-<ProtectedRoute
-  allowedRoles={["ti_master", "admin", "ti_usuario"]}
-  maxLevel={2}
->
-  <main class="container mx-auto px-4 py-6 max-w-7xl">
-    <!-- Breadcrumb -->
-    <div class="text-sm breadcrumbs mb-4">
-      <ul>
-        <li>
-          <a href="/ti" class="text-primary hover:underline"
-            >Tecnologia da Informação</a
-          >
-        </li>
-        <li>Gestão de Times</li>
-      </ul>
-    </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={2}>
+	<main class="container mx-auto max-w-7xl px-4 py-6">
+		<!-- Breadcrumb -->
+		<div class="breadcrumbs mb-4 text-sm">
+			<ul>
+				<li>
+					<a href="/ti" class="text-primary hover:underline">Tecnologia da Informação</a>
+				</li>
+				<li>Gestão de Times</li>
+			</ul>
+		</div>
 
-    <!-- Header -->
-    <div class="mb-6">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-4">
-          <div class="p-3 bg-secondary/10 rounded-xl">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-8 w-8 text-secondary"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-              />
-            </svg>
-          </div>
-          <div>
-            <h1 class="text-3xl font-bold text-base-content">
-              Gestão de Times
-            </h1>
-            <p class="text-base-content/60 mt-1">
-              Organize funcionários em equipes e defina gestores
-            </p>
-          </div>
-        </div>
-        <div class="flex gap-2">
-          <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 19l-7-7m0 0l7-7m-7 7h18"
-              />
-            </svg>
-            Voltar
-          </button>
-          <button class="btn btn-primary gap-2" onclick={novoTime}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 4v16m8-8H4"
-              />
-            </svg>
-            Novo Time
-          </button>
-        </div>
-      </div>
-    </div>
+		<!-- Header -->
+		<div class="mb-6">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-4">
+					<div class="bg-secondary/10 rounded-xl p-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-secondary 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h1 class="text-base-content text-3xl font-bold">Gestão de Times</h1>
+						<p class="text-base-content/60 mt-1">
+							Organize funcionários em equipes e defina gestores
+						</p>
+					</div>
+				</div>
+				<div class="flex gap-2">
+					<button class="btn gap-2" onclick={() => goto('/ti')}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 19l-7-7m0 0l7-7m-7 7h18"
+							/>
+						</svg>
+						Voltar
+					</button>
+					<button class="btn btn-primary gap-2" onclick={novoTime}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Novo Time
+					</button>
+				</div>
+			</div>
+		</div>
 
-    <!-- Formulário de Edição -->
-    {#if modoEdicao}
-      <div
-        class="card bg-linear-to-br from-primary/10 to-primary/5 shadow-xl mb-6 border-2 border-primary/20"
-      >
-        <div class="card-body">
-          <h2 class="card-title text-xl mb-4">
-            {timeEmEdicao ? "Editar Time" : "Novo Time"}
-          </h2>
+		<!-- Formulário de Edição -->
+		{#if modoEdicao}
+			<div
+				class="card from-primary/10 to-primary/5 border-primary/20 mb-6 border-2 bg-linear-to-br shadow-xl"
+			>
+				<div class="card-body">
+					<h2 class="card-title mb-4 text-xl">
+						{timeEmEdicao ? 'Editar Time' : 'Novo Time'}
+					</h2>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label" for="nome">
-                <span class="label-text font-semibold">Nome do Time *</span>
-              </label>
-              <input
-                id="nome"
-                type="text"
-                class="input input-bordered"
-                bind:value={formNome}
-                placeholder="Ex: Equipe Administrativa"
-              />
-            </div>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div class="form-control">
+							<label class="label" for="nome">
+								<span class="label-text font-semibold">Nome do Time *</span>
+							</label>
+							<input
+								id="nome"
+								type="text"
+								class="input input-bordered"
+								bind:value={formNome}
+								placeholder="Ex: Equipe Administrativa"
+							/>
+						</div>
 
-            <div class="form-control">
-              <label class="label" for="gestor">
-                <span class="label-text font-semibold">Gestor *</span>
-              </label>
-              <select
-                id="gestor"
-                class="select select-bordered"
-                bind:value={formGestorId}
-              >
-                <option value="">Selecione um gestor</option>
-                {#each usuarios as usuario}
-                  <option value={usuario._id}>{usuario.nome}</option>
-                {/each}
-              </select>
-            </div>
+						<div class="form-control">
+							<label class="label" for="gestor">
+								<span class="label-text font-semibold">Gestor *</span>
+							</label>
+							<select id="gestor" class="select select-bordered" bind:value={formGestorId}>
+								<option value="">Selecione um gestor</option>
+								{#each usuarios as usuario}
+									<option value={usuario._id}>{usuario.nome}</option>
+								{/each}
+							</select>
+						</div>
 
-            <div class="form-control md:col-span-2">
-              <label class="label" for="descricao">
-                <span class="label-text font-semibold">Descrição</span>
-              </label>
-              <textarea
-                id="descricao"
-                class="textarea textarea-bordered"
-                bind:value={formDescricao}
-                placeholder="Descrição opcional do time"
-                rows="2"
-              ></textarea>
-            </div>
+						<div class="form-control md:col-span-2">
+							<label class="label" for="descricao">
+								<span class="label-text font-semibold">Descrição</span>
+							</label>
+							<textarea
+								id="descricao"
+								class="textarea textarea-bordered"
+								bind:value={formDescricao}
+								placeholder="Descrição opcional do time"
+								rows="2"
+							></textarea>
+						</div>
 
-            <div class="form-control">
-              <label class="label" for="cor">
-                <span class="label-text font-semibold">Cor do Time</span>
-              </label>
-              <div class="flex gap-2 flex-wrap">
-                {#each coresDisponiveis as cor}
-                  <button
-                    type="button"
-                    class="w-10 h-10 rounded-lg border-2 transition-all hover:scale-110"
-                    style="background-color: {cor}; border-color: {formCor ===
-                    cor
-                      ? '#000'
-                      : cor}"
-                    onclick={() => (formCor = cor)}
-                    aria-label="Selecionar cor"
-                  ></button>
-                {/each}
-              </div>
-            </div>
-          </div>
+						<div class="form-control">
+							<label class="label" for="cor">
+								<span class="label-text font-semibold">Cor do Time</span>
+							</label>
+							<div class="flex flex-wrap gap-2">
+								{#each coresDisponiveis as cor}
+									<button
+										type="button"
+										class="h-10 w-10 rounded-lg border-2 transition-all hover:scale-110"
+										style="background-color: {cor}; border-color: {formCor === cor ? '#000' : cor}"
+										onclick={() => (formCor = cor)}
+										aria-label="Selecionar cor"
+									></button>
+								{/each}
+							</div>
+						</div>
+					</div>
 
-          <div class="card-actions justify-end mt-6">
-            <button
-              class="btn btn-ghost"
-              onclick={cancelarEdicao}
-              disabled={processando}
-            >
-              Cancelar
-            </button>
-            <button
-              class="btn btn-primary"
-              onclick={salvarTime}
-              disabled={processando}
-            >
-              {processando ? "Salvando..." : "Salvar"}
-            </button>
-          </div>
-        </div>
-      </div>
-    {/if}
+					<div class="card-actions mt-6 justify-end">
+						<button class="btn" onclick={cancelarEdicao} disabled={processando}> Cancelar </button>
+						<button class="btn btn-primary" onclick={salvarTime} disabled={processando}>
+							{processando ? 'Salvando...' : 'Salvar'}
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Lista de Times -->
-    {#if carregando}
-      <div class="flex justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {:else}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {#each times.filter((t: TimeComDetalhes) => t.ativo) as time}
-          <div
-            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all border-l-4"
-            style="border-color: {time.cor || '#3B82F6'}"
-          >
-            <div class="card-body">
-              <div class="flex items-start justify-between mb-2">
-                <div class="flex items-center gap-2">
-                  <div
-                    class="w-3 h-3 rounded-full"
-                    style="background-color: {time.cor || '#3B82F6'}"
-                  ></div>
-                  <h2 class="card-title text-lg">{time.nome}</h2>
-                </div>
-                <div class="dropdown dropdown-end">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-sm btn-square"
-                    aria-label="Menu do time"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                      />
-                    </svg>
-                  </button>
-                  <ul
-                    role="menu"
-                    class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 border border-base-300"
-                  >
-                    <li>
-                      <button type="button" onclick={() => editarTime(time)}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                          />
-                        </svg>
-                        Editar
-                      </button>
-                    </li>
-                    <li>
-                      <button
-                        type="button"
-                        onclick={() => abrirGerenciarMembros(time)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-                          />
-                        </svg>
-                        Gerenciar Membros
-                      </button>
-                    </li>
-                    <li>
-                      <button
-                        type="button"
-                        onclick={() => confirmarExclusao(time)}
-                        class="text-error"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                          />
-                        </svg>
-                        Desativar
-                      </button>
-                    </li>
-                  </ul>
-                </div>
-              </div>
+		<!-- Lista de Times -->
+		{#if carregando}
+			<div class="flex items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				{#each times.filter((t: TimeComDetalhes) => t.ativo) as time}
+					<div
+						class="card bg-base-100 border-l-4 shadow-xl transition-all hover:shadow-2xl"
+						style="border-color: {time.cor || '#3B82F6'}"
+					>
+						<div class="card-body">
+							<div class="mb-2 flex items-start justify-between">
+								<div class="flex items-center gap-2">
+									<div
+										class="h-3 w-3 rounded-full"
+										style="background-color: {time.cor || '#3B82F6'}"
+									></div>
+									<h2 class="card-title text-lg">{time.nome}</h2>
+								</div>
+								<div class="dropdown dropdown-end">
+									<button type="button" class="btn btn-sm btn-square" aria-label="Menu do time">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-5 w-5"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+											/>
+										</svg>
+									</button>
+									<ul
+										role="menu"
+										class="dropdown-content menu bg-base-100 rounded-box border-base-300 z-[1] w-52 border p-2 shadow-xl"
+									>
+										<li>
+											<button type="button" onclick={() => editarTime(time)}>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+													/>
+												</svg>
+												Editar
+											</button>
+										</li>
+										<li>
+											<button type="button" onclick={() => abrirGerenciarMembros(time)}>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+													/>
+												</svg>
+												Gerenciar Membros
+											</button>
+										</li>
+										<li>
+											<button
+												type="button"
+												onclick={() => confirmarExclusao(time)}
+												class="text-error"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+													/>
+												</svg>
+												Desativar
+											</button>
+										</li>
+									</ul>
+								</div>
+							</div>
 
-              <p class="text-sm text-base-content/70 mb-3 min-h-[2rem]">
-                {time.descricao || "Sem descrição"}
-              </p>
+							<p class="text-base-content/70 mb-3 min-h-[2rem] text-sm">
+								{time.descricao || 'Sem descrição'}
+							</p>
 
-              <div class="divider my-2"></div>
+							<div class="divider my-2"></div>
 
-              <div class="space-y-2">
-                <div class="flex items-center gap-2 text-sm">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <span class="text-base-content/70"
-                    ><strong>Gestor:</strong>
-                    {time.gestor?.nome || "Não definido"}</span
-                  >
-                </div>
-                <div class="flex items-center gap-2 text-sm">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-                    />
-                  </svg>
-                  <span class="text-base-content/70"
-                    ><strong>Membros:</strong>
-                    <span class="badge badge-primary badge-sm"
-                      >{time.totalMembros || 0}</span
-                    ></span
-                  >
-                </div>
-              </div>
+							<div class="space-y-2">
+								<div class="flex items-center gap-2 text-sm">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+									<span class="text-base-content/70"
+										><strong>Gestor:</strong>
+										{time.gestor?.nome || 'Não definido'}</span
+									>
+								</div>
+								<div class="flex items-center gap-2 text-sm">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+										/>
+									</svg>
+									<span class="text-base-content/70"
+										><strong>Membros:</strong>
+										<span class="badge badge-primary badge-sm">{time.totalMembros || 0}</span></span
+									>
+								</div>
+							</div>
 
-              <div class="card-actions justify-end mt-4">
-                <button
-                  class="btn btn-sm btn-outline btn-primary"
-                  onclick={() => abrirGerenciarMembros(time)}
-                >
-                  Ver Detalhes
-                </button>
-              </div>
-            </div>
-          </div>
-        {/each}
+							<div class="card-actions mt-4 justify-end">
+								<button
+									class="btn btn-sm btn-outline btn-primary"
+									onclick={() => abrirGerenciarMembros(time)}
+								>
+									Ver Detalhes
+								</button>
+							</div>
+						</div>
+					</div>
+				{/each}
 
-        {#if times.filter((t: TimeComDetalhes) => t.ativo).length === 0}
-          <div class="col-span-full">
-            <div
-              class="flex flex-col items-center justify-center py-16 text-center"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-16 w-16 text-base-content/30"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                />
-              </svg>
-              <h3 class="text-xl font-semibold mt-4">Nenhum time cadastrado</h3>
-              <p class="text-base-content/60 mt-2">
-                Clique em "Novo Time" para criar seu primeiro time
-              </p>
-            </div>
-          </div>
-        {/if}
-      </div>
-    {/if}
+				{#if times.filter((t: TimeComDetalhes) => t.ativo).length === 0}
+					<div class="col-span-full">
+						<div class="flex flex-col items-center justify-center py-16 text-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-base-content/30 h-16 w-16"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+								/>
+							</svg>
+							<h3 class="mt-4 text-xl font-semibold">Nenhum time cadastrado</h3>
+							<p class="text-base-content/60 mt-2">
+								Clique em "Novo Time" para criar seu primeiro time
+							</p>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
 
-    <!-- Modal de Gerenciar Membros -->
-    {#if mostrarModalMembros && timeParaMembros}
-      <dialog class="modal modal-open">
-        <div class="modal-box max-w-4xl">
-          <h3 class="font-bold text-2xl mb-4 flex items-center gap-2">
-            <div
-              class="w-3 h-3 rounded-full"
-              style="background-color: {timeParaMembros.cor}"
-            ></div>
-            {timeParaMembros.nome}
-          </h3>
+		<!-- Modal de Gerenciar Membros -->
+		{#if mostrarModalMembros && timeParaMembros}
+			<dialog class="modal modal-open">
+				<div class="modal-box max-w-4xl">
+					<h3 class="mb-4 flex items-center gap-2 text-2xl font-bold">
+						<div class="h-3 w-3 rounded-full" style="background-color: {timeParaMembros.cor}"></div>
+						{timeParaMembros.nome}
+					</h3>
 
-          <!-- Membros Atuais -->
-          <div class="mb-6">
-            <h4 class="font-bold text-lg mb-3">
-              Membros Atuais ({timeParaMembros.membros?.length || 0})
-            </h4>
+					<!-- Membros Atuais -->
+					<div class="mb-6">
+						<h4 class="mb-3 text-lg font-bold">
+							Membros Atuais ({timeParaMembros.membros?.length || 0})
+						</h4>
 
-            {#if timeParaMembros.membros && timeParaMembros.membros.length > 0}
-              <div class="space-y-2 max-h-60 overflow-y-auto">
-                {#each timeParaMembros.membros as membro}
-                  <div
-                    class="flex items-center justify-between p-3 bg-base-200 rounded-lg"
-                  >
-                    <div class="flex items-center gap-3">
-                      <div class="avatar placeholder">
-                        <div
-                          class="bg-primary text-primary-content rounded-full w-10"
-                        >
-                          <span class="text-xs"
-                            >{membro.funcionario?.nome
-                              .substring(0, 2)
-                              .toUpperCase()}</span
-                          >
-                        </div>
-                      </div>
-                      <div>
-                        <div class="font-semibold">
-                          {membro.funcionario?.nome}
-                        </div>
-                        <div class="text-xs text-base-content/50">
-                          Desde {new Date(
-                            membro.dataEntrada,
-                          ).toLocaleDateString("pt-BR")}
-                        </div>
-                      </div>
-                    </div>
-                    <button
-                      class="btn btn-sm btn-error btn-square"
-                      onclick={() => removerMembro(membro._id)}
-                      disabled={processando}
-                      aria-label="Remover membro"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-4 w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                {/each}
-              </div>
-            {:else}
-              <div class="alert alert-info">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  class="stroke-current shrink-0 w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <span>Nenhum membro neste time ainda.</span>
-              </div>
-            {/if}
-          </div>
+						{#if timeParaMembros.membros && timeParaMembros.membros.length > 0}
+							<div class="max-h-60 space-y-2 overflow-y-auto">
+								{#each timeParaMembros.membros as membro}
+									<div class="bg-base-200 flex items-center justify-between rounded-lg p-3">
+										<div class="flex items-center gap-3">
+											<div class="avatar placeholder">
+												<div class="bg-primary text-primary-content w-10 rounded-full">
+													<span class="text-xs"
+														>{membro.funcionario?.nome.substring(0, 2).toUpperCase()}</span
+													>
+												</div>
+											</div>
+											<div>
+												<div class="font-semibold">
+													{membro.funcionario?.nome}
+												</div>
+												<div class="text-base-content/50 text-xs">
+													Desde {new Date(membro.dataEntrada).toLocaleDateString('pt-BR')}
+												</div>
+											</div>
+										</div>
+										<button
+											class="btn btn-sm btn-error btn-square"
+											onclick={() => removerMembro(membro._id)}
+											disabled={processando}
+											aria-label="Remover membro"
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg>
+										</button>
+									</div>
+								{/each}
+							</div>
+						{:else}
+							<div class="alert alert-info">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									class="h-6 w-6 shrink-0 stroke-current"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									></path>
+								</svg>
+								<span>Nenhum membro neste time ainda.</span>
+							</div>
+						{/if}
+					</div>
 
-          <div class="divider"></div>
+					<div class="divider"></div>
 
-          <!-- Adicionar Membros -->
-          <div>
-            <h4 class="font-bold text-lg mb-3">Adicionar Membros</h4>
+					<!-- Adicionar Membros -->
+					<div>
+						<h4 class="mb-3 text-lg font-bold">Adicionar Membros</h4>
 
-            {#if membrosDisponiveis.length > 0}
-              <div class="space-y-2 max-h-60 overflow-y-auto">
-                {#each membrosDisponiveis as funcionario}
-                  <div
-                    class="flex items-center justify-between p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
-                  >
-                    <div class="flex items-center gap-3">
-                      <div class="avatar placeholder">
-                        <div
-                          class="bg-neutral text-neutral-content rounded-full w-10"
-                        >
-                          <span class="text-xs"
-                            >{funcionario.nome
-                              .substring(0, 2)
-                              .toUpperCase()}</span
-                          >
-                        </div>
-                      </div>
-                      <div>
-                        <div class="font-semibold">{funcionario.nome}</div>
-                        <div class="text-xs text-base-content/50">
-                          {funcionario.matricula || "S/N"}
-                        </div>
-                      </div>
-                    </div>
-                    <button
-                      class="btn btn-sm btn-primary"
-                      onclick={() => adicionarMembro(funcionario._id)}
-                      disabled={processando}
-                    >
-                      Adicionar
-                    </button>
-                  </div>
-                {/each}
-              </div>
-            {:else}
-              <div class="alert">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  class="stroke-current shrink-0 w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <span>Todos os funcionários já estão em times.</span>
-              </div>
-            {/if}
-          </div>
+						{#if membrosDisponiveis.length > 0}
+							<div class="max-h-60 space-y-2 overflow-y-auto">
+								{#each membrosDisponiveis as funcionario}
+									<div
+										class="bg-base-200 hover:bg-base-300 flex items-center justify-between rounded-lg p-3 transition-colors"
+									>
+										<div class="flex items-center gap-3">
+											<div class="avatar placeholder">
+												<div class="bg-neutral text-neutral-content w-10 rounded-full">
+													<span class="text-xs"
+														>{funcionario.nome.substring(0, 2).toUpperCase()}</span
+													>
+												</div>
+											</div>
+											<div>
+												<div class="font-semibold">{funcionario.nome}</div>
+												<div class="text-base-content/50 text-xs">
+													{funcionario.matricula || 'S/N'}
+												</div>
+											</div>
+										</div>
+										<button
+											class="btn btn-sm btn-primary"
+											onclick={() => adicionarMembro(funcionario._id)}
+											disabled={processando}
+										>
+											Adicionar
+										</button>
+									</div>
+								{/each}
+							</div>
+						{:else}
+							<div class="alert">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									class="h-6 w-6 shrink-0 stroke-current"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									></path>
+								</svg>
+								<span>Todos os funcionários já estão em times.</span>
+							</div>
+						{/if}
+					</div>
 
-          <div class="modal-action">
-            <button class="btn" onclick={fecharModalMembros}>Fechar</button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button
-            type="button"
-            onclick={fecharModalMembros}
-            aria-label="Fechar modal">Fechar</button
-          >
-        </form>
-      </dialog>
-    {/if}
+					<div class="modal-action">
+						<button class="btn" onclick={fecharModalMembros}>Fechar</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button type="button" onclick={fecharModalMembros} aria-label="Fechar modal"
+						>Fechar</button
+					>
+				</form>
+			</dialog>
+		{/if}
 
-    <!-- Modal de Confirmação de Exclusão -->
-    {#if mostrarConfirmacaoExclusao && timeParaExcluir}
-      <dialog class="modal modal-open">
-        <div class="modal-box">
-          <h3 class="font-bold text-lg">Confirmar Desativação</h3>
-          <p class="py-4">
-            Tem certeza que deseja desativar o time <strong
-              >{timeParaExcluir.nome}</strong
-            >? Todos os membros serão removidos.
-          </p>
-          <div class="modal-action">
-            <button
-              class="btn"
-              onclick={() => (mostrarConfirmacaoExclusao = false)}
-              disabled={processando}
-            >
-              Cancelar
-            </button>
-            <button
-              class="btn btn-error"
-              onclick={excluirTime}
-              disabled={processando}
-            >
-              {processando ? "Processando..." : "Desativar"}
-            </button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button
-            type="button"
-            onclick={() => (mostrarConfirmacaoExclusao = false)}
-            aria-label="Fechar modal">Fechar</button
-          >
-        </form>
-      </dialog>
-    {/if}
-  </main>
+		<!-- Modal de Confirmação de Exclusão -->
+		{#if mostrarConfirmacaoExclusao && timeParaExcluir}
+			<dialog class="modal modal-open">
+				<div class="modal-box">
+					<h3 class="text-lg font-bold">Confirmar Desativação</h3>
+					<p class="py-4">
+						Tem certeza que deseja desativar o time <strong>{timeParaExcluir.nome}</strong>? Todos
+						os membros serão removidos.
+					</p>
+					<div class="modal-action">
+						<button
+							class="btn"
+							onclick={() => (mostrarConfirmacaoExclusao = false)}
+							disabled={processando}
+						>
+							Cancelar
+						</button>
+						<button class="btn btn-error" onclick={excluirTime} disabled={processando}>
+							{processando ? 'Processando...' : 'Desativar'}
+						</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button
+						type="button"
+						onclick={() => (mostrarConfirmacaoExclusao = false)}
+						aria-label="Fechar modal">Fechar</button
+					>
+				</form>
+			</dialog>
+		{/if}
+	</main>
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
index c2974d8..f93c768 100644
--- a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
@@ -1,1403 +1,1310 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import UserStatusBadge from "$lib/components/ti/UserStatusBadge.svelte";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-
-  type AvisoUsuario = {
-    tipo: "erro" | "aviso" | "info";
-    mensagem: string;
-  };
-
-  type RoleUsuario = {
-    _id: Id<"roles">;
-    nome: string;
-    nivel: number;
-    descricao: string;
-    setor?: string;
-    erro?: boolean;
-  };
-
-  type Usuario = {
-    _id: Id<"usuarios">;
-    matricula: string;
-    nome: string;
-    email: string;
-    ativo: boolean;
-    bloqueado?: boolean;
-    motivoBloqueio?: string;
-    primeiroAcesso: boolean;
-    ultimoAcesso?: number;
-    criadoEm: number;
-    role: RoleUsuario;
-    funcionario?: {
-      _id: Id<"funcionarios">;
-      nome: string;
-      matricula?: string;
-      descricaoCargo?: string;
-      simboloTipo: "cargo_comissionado" | "funcao_gratificada";
-    };
-    avisos?: AvisoUsuario[];
-  };
-
-  type Funcionario = {
-    _id: Id<"funcionarios">;
-    nome: string;
-    matricula?: string;
-    cpf?: string;
-    descricaoCargo?: string;
-  };
-
-  type Mensagem = {
-    tipo: "success" | "error" | "info";
-    texto: string;
-  };
-
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
-
-  // Usar useQuery reativo - seguindo padrão usado em ti/times/+page.svelte
-  const usuariosQuery = useQuery(api.usuarios.listar, {});
-
-  // Extrair dados e determinar estado de carregamento
-  const usuarios = $derived.by(() => {
-    // Se usuariosQuery é undefined ou null, está carregando
-    if (usuariosQuery === undefined || usuariosQuery === null) {
-      return [];
-    }
-
-    // Se usuariosQuery é um objeto vazio {}, está carregando
-    if (
-      typeof usuariosQuery === "object" &&
-      Object.keys(usuariosQuery).length === 0
-    ) {
-      return [];
-    }
-
-    // Se tem propriedade data, usar os dados
-    if ("data" in usuariosQuery && usuariosQuery.data !== undefined) {
-      return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
-    }
-
-    // Se usuariosQuery é diretamente um array (caso não tenha .data)
-    if (Array.isArray(usuariosQuery)) {
-      return usuariosQuery;
-    }
-
-    // Caso padrão: ainda carregando ou sem dados
-    return [];
-  });
-
-  const carregandoUsuarios = $derived.by(() => {
-    // Se é undefined/null, está carregando
-    if (usuariosQuery === undefined || usuariosQuery === null) {
-      return true;
-    }
-
-    // Se é um objeto vazio {}, está carregando
-    if (
-      typeof usuariosQuery === "object" &&
-      Object.keys(usuariosQuery).length === 0
-    ) {
-      return true;
-    }
-
-    // Se não tem propriedade data, está carregando
-    if (!("data" in usuariosQuery)) {
-      return true;
-    }
-
-    // Se data é undefined, está carregando
-    if (usuariosQuery.data === undefined) {
-      return true;
-    }
-
-    // Caso contrário, dados estão prontos
-    return false;
-  });
-
-  let erroUsuarios = $state<string | null>(null);
-
-  // Monitorar erros e estado da query
-  $effect(() => {
-    try {
-      // Detectar se há erro na query
-      if (usuariosQuery && typeof usuariosQuery === "object") {
-        // Verificar se há propriedade de erro
-        if ("error" in usuariosQuery) {
-          const error = (usuariosQuery as { error?: unknown }).error;
-          if (error !== undefined && error !== null) {
-            erroUsuarios =
-              error instanceof Error ? error.message : String(error);
-            console.error("❌ [ERROR] Erro na query de usuários:", error);
-          } else {
-            // Se error existe mas é undefined/null, limpar erro
-            erroUsuarios = null;
-          }
-        } else if ("data" in usuariosQuery) {
-          const queryData = usuariosQuery as { data?: Usuario[] };
-          if (queryData.data !== undefined) {
-            // Se tem dados, limpar erro
-            erroUsuarios = null;
-          }
-        }
-      }
-
-      // Debug para identificar problemas (apenas em desenvolvimento)
-      if (
-        typeof window !== "undefined" &&
-        window.location.hostname === "localhost"
-      ) {
-        console.log("🔍 [DEBUG] usuariosQuery:", usuariosQuery);
-        console.log("🔍 [DEBUG] typeof usuariosQuery:", typeof usuariosQuery);
-        if (usuariosQuery && typeof usuariosQuery === "object") {
-          console.log(
-            "🔍 [DEBUG] Object.keys(usuariosQuery):",
-            Object.keys(usuariosQuery),
-          );
-          console.log(
-            "🔍 [DEBUG] usuariosQuery?.data:",
-            (usuariosQuery as { data?: unknown }).data,
-          );
-          console.log(
-            "🔍 [DEBUG] 'data' in usuariosQuery:",
-            "data" in usuariosQuery,
-          );
-          console.log(
-            "🔍 [DEBUG] 'error' in usuariosQuery:",
-            "error" in usuariosQuery,
-          );
-        }
-        console.log("🔍 [DEBUG] usuarios (extraídos):", usuarios);
-        console.log("🔍 [DEBUG] quantidade:", usuarios.length);
-        console.log("🔍 [DEBUG] carregandoUsuarios:", carregandoUsuarios);
-        console.log("🔍 [DEBUG] erroUsuarios:", erroUsuarios);
-      }
-    } catch (error) {
-      // Tratamento de erro no próprio effect
-      console.error("❌ [ERROR] Erro ao processar estado da query:", error);
-      if (error instanceof Error) {
-        erroUsuarios = `Erro inesperado: ${error.message}`;
-      }
-    }
-  });
-
-  let funcionarios = $state<Funcionario[]>([]);
-  let carregandoFuncionarios = $state(false);
-
-  let usuarioSelecionado = $state<Usuario | null>(null);
-  let modalAssociarAberto = $state(false);
-  let funcionarioSelecionadoId = $state<Id<"funcionarios"> | "">("");
-  let buscaFuncionario = $state("");
-
-  let modalExcluirAberto = $state(false);
-  let processando = $state(false);
-  let mensagem = $state<Mensagem | null>(null);
-
-  // Filtros
-  let filtroNome = $state("");
-  let filtroMatricula = $state("");
-  let filtroSetor = $state("");
-  let filtroStatus = $state<"todos" | "ativo" | "inativo" | "bloqueado">(
-    "todos",
-  );
-  let filtroDataCriacaoInicio = $state("");
-  let filtroDataCriacaoFim = $state("");
-  let filtroUltimoAcessoInicio = $state("");
-  let filtroUltimoAcessoFim = $state("");
-
-  // Função para recarregar usuários (mantida para compatibilidade com mutações)
-  async function carregarUsuarios() {
-    // Como estamos usando useQuery reativo, os dados serão atualizados automaticamente
-    // Esta função pode ser chamada após mutações, mas não precisa fazer nada
-    // O useQuery já atualizará automaticamente
-  }
-
-  async function carregarFuncionarios() {
-    if (carregandoFuncionarios) return;
-    carregandoFuncionarios = true;
-
-    try {
-      const resposta = await client.query(api.funcionarios.getAll, {});
-      // Suportar ambos formatos (array direto ou objeto com .data), dependendo do hook/cliente
-      const lista = Array.isArray(resposta)
-        ? resposta
-        : resposta &&
-            typeof resposta === "object" &&
-            Array.isArray((resposta as { data?: unknown }).data)
-          ? (resposta as { data: unknown[] }).data
-          : [];
-
-      funcionarios = lista as Funcionario[];
-    } catch (error: unknown) {
-      console.error("Erro ao carregar funcionários:", error);
-      funcionarios = [];
-    } finally {
-      carregandoFuncionarios = false;
-    }
-  }
-
-  function mostrarMensagem(tipo: Mensagem["tipo"], texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 4000);
-  }
-
-  const funcionariosFiltrados = $derived.by(() => {
-    if (!buscaFuncionario) {
-      return [...funcionarios].sort((a, b) => a.nome.localeCompare(b.nome));
-    }
-
-    const buscaNormalizada = buscaFuncionario.toLowerCase();
-    return funcionarios
-      .filter((f) => {
-        return (
-          f.nome.toLowerCase().includes(buscaNormalizada) ||
-          f.cpf?.toLowerCase().includes(buscaNormalizada) ||
-          f.matricula?.toLowerCase().includes(buscaNormalizada)
-        );
-      })
-      .sort((a, b) => a.nome.localeCompare(b.nome));
-  });
-
-  // Verificar se há usuários com problemas
-  const usuariosComProblemas = $derived.by(() => {
-    return usuarios.filter(
-      (u) => u.role?.erro === true || (u.avisos && u.avisos.length > 0),
-    );
-  });
-
-  // Lógica de filtros reativos
-  const usuariosFiltrados = $derived.by(() => {
-    let resultado = usuarios;
-
-    // Filtro por nome
-    if (filtroNome.trim()) {
-      const buscaNome = filtroNome.toLowerCase();
-      resultado = resultado.filter((u) =>
-        u.nome.toLowerCase().includes(buscaNome),
-      );
-    }
-
-    // Filtro por matrícula
-    if (filtroMatricula.trim()) {
-      const buscaMatricula = filtroMatricula.toLowerCase();
-      resultado = resultado.filter((u) =>
-        u.matricula.toLowerCase().includes(buscaMatricula),
-      );
-    }
-
-    // Filtro por setor
-    if (filtroSetor) {
-      resultado = resultado.filter((u) => u.role.setor === filtroSetor);
-    }
-
-    // Filtro por status
-    if (filtroStatus !== "todos") {
-      if (filtroStatus === "ativo") {
-        resultado = resultado.filter((u) => u.ativo && !u.bloqueado);
-      } else if (filtroStatus === "inativo") {
-        resultado = resultado.filter((u) => !u.ativo);
-      } else if (filtroStatus === "bloqueado") {
-        resultado = resultado.filter((u) => u.bloqueado);
-      }
-    }
-
-    // Filtro por data de criação
-    if (filtroDataCriacaoInicio) {
-      const dataInicio = new Date(filtroDataCriacaoInicio);
-      dataInicio.setHours(0, 0, 0, 0);
-      resultado = resultado.filter((u) => u.criadoEm >= dataInicio.getTime());
-    }
-    if (filtroDataCriacaoFim) {
-      const dataFim = new Date(filtroDataCriacaoFim);
-      dataFim.setHours(23, 59, 59, 999);
-      resultado = resultado.filter((u) => u.criadoEm <= dataFim.getTime());
-    }
-
-    // Filtro por último acesso
-    if (filtroUltimoAcessoInicio) {
-      const dataInicio = new Date(filtroUltimoAcessoInicio);
-      dataInicio.setHours(0, 0, 0, 0);
-      resultado = resultado.filter((u) => {
-        if (!u.ultimoAcesso) return false;
-        return u.ultimoAcesso >= dataInicio.getTime();
-      });
-    }
-    if (filtroUltimoAcessoFim) {
-      const dataFim = new Date(filtroUltimoAcessoFim);
-      dataFim.setHours(23, 59, 59, 999);
-      resultado = resultado.filter((u) => {
-        if (!u.ultimoAcesso) return false;
-        return u.ultimoAcesso <= dataFim.getTime();
-      });
-    }
-
-    return resultado;
-  });
-
-  function formatarData(timestamp: number | undefined): string {
-    if (!timestamp) return "Nunca";
-    try {
-      return format(new Date(timestamp), "dd/MM/yyyy HH:mm", { locale: ptBR });
-    } catch {
-      return "Data inválida";
-    }
-  }
-
-  function limparFiltros() {
-    filtroNome = "";
-    filtroMatricula = "";
-    filtroSetor = "";
-    filtroStatus = "todos";
-    filtroDataCriacaoInicio = "";
-    filtroDataCriacaoFim = "";
-    filtroUltimoAcessoInicio = "";
-    filtroUltimoAcessoFim = "";
-  }
-
-  function obterSetoresDisponiveis(): string[] {
-    const setoresSet = new Set<string>();
-    usuarios.forEach((u) => {
-      if (u.role.setor) {
-        setoresSet.add(u.role.setor);
-      }
-    });
-    return Array.from(setoresSet).sort();
-  }
-
-  async function ativarDesativarUsuario(usuario: Usuario) {
-    const confirmar = window.confirm(
-      `Deseja realmente ${usuario.ativo ? "desativar" : "ativar"} o usuário ${usuario.nome}?`,
-    );
-    if (!confirmar) return;
-
-    processando = true;
-    try {
-      await client.mutation(api.usuarios.alterarStatus, {
-        usuarioId: usuario._id,
-        ativo: !usuario.ativo,
-      });
-
-      mostrarMensagem(
-        "success",
-        `Usuário ${usuario.ativo ? "desativado" : "ativado"} com sucesso!`,
-      );
-      await carregarUsuarios();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Erro ao alterar status do usuário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  function abrirModalAssociar(usuario: Usuario) {
-    usuarioSelecionado = usuario;
-    funcionarioSelecionadoId = usuario.funcionario?._id ?? "";
-    buscaFuncionario = "";
-    modalAssociarAberto = true;
-
-    if (funcionarios.length === 0 && !carregandoFuncionarios) {
-      void carregarFuncionarios();
-    }
-  }
-
-  function fecharModalAssociar() {
-    modalAssociarAberto = false;
-    usuarioSelecionado = null;
-    funcionarioSelecionadoId = "";
-    buscaFuncionario = "";
-  }
-
-  async function associarFuncionario() {
-    if (
-      !usuarioSelecionado ||
-      !funcionarioSelecionadoId ||
-      funcionarioSelecionadoId === ""
-    ) {
-      return;
-    }
-
-    processando = true;
-    try {
-      await client.mutation(api.usuarios.associarFuncionario, {
-        usuarioId: usuarioSelecionado._id,
-        funcionarioId: funcionarioSelecionadoId,
-      });
-
-      mostrarMensagem("success", "Funcionário associado com sucesso!");
-      fecharModalAssociar();
-      await carregarUsuarios();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Não foi possível associar o funcionário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  async function desassociarFuncionario() {
-    if (!usuarioSelecionado) {
-      return;
-    }
-
-    const confirmar = window.confirm(
-      "Deseja realmente desassociar o funcionário deste usuário?",
-    );
-    if (!confirmar) return;
-
-    processando = true;
-    try {
-      await client.mutation(api.usuarios.desassociarFuncionario, {
-        usuarioId: usuarioSelecionado._id,
-      });
-
-      mostrarMensagem("success", "Funcionário desassociado com sucesso!");
-      fecharModalAssociar();
-      await carregarUsuarios();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Não foi possível desassociar o funcionário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  async function bloquearUsuario(usuario: Usuario) {
-    const motivo = window.prompt(
-      "Digite o motivo do bloqueio:",
-      usuario.motivoBloqueio || "",
-    );
-
-    if (!motivo || motivo.trim() === "") {
-      return;
-    }
-
-    if (!currentUser?.data) {
-      mostrarMensagem("error", "Usuário não autenticado");
-      return;
-    }
-
-    processando = true;
-    try {
-      const resultado = await client.mutation(api.usuarios.bloquearUsuario, {
-        usuarioId: usuario._id,
-        motivo: motivo.trim(),
-        bloqueadoPorId: currentUser.data._id as Id<"usuarios">,
-      });
-
-      if (resultado.sucesso) {
-        mostrarMensagem("success", "Usuário bloqueado com sucesso!");
-        await carregarUsuarios();
-      } else {
-        mostrarMensagem("error", resultado.erro);
-      }
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Erro ao bloquear usuário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  async function desbloquearUsuario(usuario: Usuario) {
-    if (!currentUser?.data) {
-      mostrarMensagem("error", "Usuário não autenticado");
-      return;
-    }
-
-    const confirmar = window.confirm(
-      `Deseja realmente desbloquear o usuário ${usuario.nome}?`,
-    );
-    if (!confirmar) return;
-
-    processando = true;
-    try {
-      const resultado = await client.mutation(api.usuarios.desbloquearUsuario, {
-        usuarioId: usuario._id,
-        desbloqueadoPorId: currentUser.data._id as Id<"usuarios">,
-      });
-
-      if (resultado.sucesso) {
-        mostrarMensagem("success", "Usuário desbloqueado com sucesso!");
-        await carregarUsuarios();
-      } else {
-        mostrarMensagem("error", resultado.erro);
-      }
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Erro ao desbloquear usuário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  function abrirModalExcluir(usuario: Usuario) {
-    usuarioSelecionado = usuario;
-    modalExcluirAberto = true;
-  }
-
-  function fecharModalExcluir() {
-    modalExcluirAberto = false;
-    usuarioSelecionado = null;
-  }
-
-  async function excluirUsuario() {
-    if (!usuarioSelecionado) {
-      return;
-    }
-
-    processando = true;
-    try {
-      await client.mutation(api.usuarios.excluir, {
-        usuarioId: usuarioSelecionado._id,
-      });
-
-      mostrarMensagem("success", "Usuário excluído com sucesso!");
-      fecharModalExcluir();
-      await carregarUsuarios();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Erro ao excluir usuário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import UserStatusBadge from '$lib/components/ti/UserStatusBadge.svelte';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+
+	type AvisoUsuario = {
+		tipo: 'erro' | 'aviso' | 'info';
+		mensagem: string;
+	};
+
+	type RoleUsuario = {
+		_id: Id<'roles'>;
+		nome: string;
+		nivel: number;
+		descricao: string;
+		setor?: string;
+		erro?: boolean;
+	};
+
+	type Usuario = {
+		_id: Id<'usuarios'>;
+		matricula: string;
+		nome: string;
+		email: string;
+		ativo: boolean;
+		bloqueado?: boolean;
+		motivoBloqueio?: string;
+		primeiroAcesso: boolean;
+		ultimoAcesso?: number;
+		criadoEm: number;
+		role: RoleUsuario;
+		funcionario?: {
+			_id: Id<'funcionarios'>;
+			nome: string;
+			matricula?: string;
+			descricaoCargo?: string;
+			simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
+		};
+		avisos?: AvisoUsuario[];
+	};
+
+	type Funcionario = {
+		_id: Id<'funcionarios'>;
+		nome: string;
+		matricula?: string;
+		cpf?: string;
+		descricaoCargo?: string;
+	};
+
+	type Mensagem = {
+		tipo: 'success' | 'error' | 'info';
+		texto: string;
+	};
+
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
+
+	// Usar useQuery reativo - seguindo padrão usado em ti/times/+page.svelte
+	const usuariosQuery = useQuery(api.usuarios.listar, {});
+
+	// Extrair dados e determinar estado de carregamento
+	const usuarios = $derived.by(() => {
+		// Se usuariosQuery é undefined ou null, está carregando
+		if (usuariosQuery === undefined || usuariosQuery === null) {
+			return [];
+		}
+
+		// Se usuariosQuery é um objeto vazio {}, está carregando
+		if (typeof usuariosQuery === 'object' && Object.keys(usuariosQuery).length === 0) {
+			return [];
+		}
+
+		// Se tem propriedade data, usar os dados
+		if ('data' in usuariosQuery && usuariosQuery.data !== undefined) {
+			return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
+		}
+
+		// Se usuariosQuery é diretamente um array (caso não tenha .data)
+		if (Array.isArray(usuariosQuery)) {
+			return usuariosQuery;
+		}
+
+		// Caso padrão: ainda carregando ou sem dados
+		return [];
+	});
+
+	const carregandoUsuarios = $derived.by(() => {
+		// Se é undefined/null, está carregando
+		if (usuariosQuery === undefined || usuariosQuery === null) {
+			return true;
+		}
+
+		// Se é um objeto vazio {}, está carregando
+		if (typeof usuariosQuery === 'object' && Object.keys(usuariosQuery).length === 0) {
+			return true;
+		}
+
+		// Se não tem propriedade data, está carregando
+		if (!('data' in usuariosQuery)) {
+			return true;
+		}
+
+		// Se data é undefined, está carregando
+		if (usuariosQuery.data === undefined) {
+			return true;
+		}
+
+		// Caso contrário, dados estão prontos
+		return false;
+	});
+
+	let erroUsuarios = $state<string | null>(null);
+
+	// Monitorar erros e estado da query
+	$effect(() => {
+		try {
+			// Detectar se há erro na query
+			if (usuariosQuery && typeof usuariosQuery === 'object') {
+				// Verificar se há propriedade de erro
+				if ('error' in usuariosQuery) {
+					const error = (usuariosQuery as { error?: unknown }).error;
+					if (error !== undefined && error !== null) {
+						erroUsuarios = error instanceof Error ? error.message : String(error);
+						console.error('❌ [ERROR] Erro na query de usuários:', error);
+					} else {
+						// Se error existe mas é undefined/null, limpar erro
+						erroUsuarios = null;
+					}
+				} else if ('data' in usuariosQuery) {
+					const queryData = usuariosQuery as { data?: Usuario[] };
+					if (queryData.data !== undefined) {
+						// Se tem dados, limpar erro
+						erroUsuarios = null;
+					}
+				}
+			}
+
+			// Debug para identificar problemas (apenas em desenvolvimento)
+			if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
+				console.log('🔍 [DEBUG] usuariosQuery:', usuariosQuery);
+				console.log('🔍 [DEBUG] typeof usuariosQuery:', typeof usuariosQuery);
+				if (usuariosQuery && typeof usuariosQuery === 'object') {
+					console.log('🔍 [DEBUG] Object.keys(usuariosQuery):', Object.keys(usuariosQuery));
+					console.log(
+						'🔍 [DEBUG] usuariosQuery?.data:',
+						(usuariosQuery as { data?: unknown }).data
+					);
+					console.log("🔍 [DEBUG] 'data' in usuariosQuery:", 'data' in usuariosQuery);
+					console.log("🔍 [DEBUG] 'error' in usuariosQuery:", 'error' in usuariosQuery);
+				}
+				console.log('🔍 [DEBUG] usuarios (extraídos):', usuarios);
+				console.log('🔍 [DEBUG] quantidade:', usuarios.length);
+				console.log('🔍 [DEBUG] carregandoUsuarios:', carregandoUsuarios);
+				console.log('🔍 [DEBUG] erroUsuarios:', erroUsuarios);
+			}
+		} catch (error) {
+			// Tratamento de erro no próprio effect
+			console.error('❌ [ERROR] Erro ao processar estado da query:', error);
+			if (error instanceof Error) {
+				erroUsuarios = `Erro inesperado: ${error.message}`;
+			}
+		}
+	});
+
+	let funcionarios = $state<Funcionario[]>([]);
+	let carregandoFuncionarios = $state(false);
+
+	let usuarioSelecionado = $state<Usuario | null>(null);
+	let modalAssociarAberto = $state(false);
+	let funcionarioSelecionadoId = $state<Id<'funcionarios'> | ''>('');
+	let buscaFuncionario = $state('');
+
+	let modalExcluirAberto = $state(false);
+	let processando = $state(false);
+	let mensagem = $state<Mensagem | null>(null);
+
+	// Filtros
+	let filtroNome = $state('');
+	let filtroMatricula = $state('');
+	let filtroSetor = $state('');
+	let filtroStatus = $state<'todos' | 'ativo' | 'inativo' | 'bloqueado'>('todos');
+	let filtroDataCriacaoInicio = $state('');
+	let filtroDataCriacaoFim = $state('');
+	let filtroUltimoAcessoInicio = $state('');
+	let filtroUltimoAcessoFim = $state('');
+
+	// Função para recarregar usuários (mantida para compatibilidade com mutações)
+	async function carregarUsuarios() {
+		// Como estamos usando useQuery reativo, os dados serão atualizados automaticamente
+		// Esta função pode ser chamada após mutações, mas não precisa fazer nada
+		// O useQuery já atualizará automaticamente
+	}
+
+	async function carregarFuncionarios() {
+		if (carregandoFuncionarios) return;
+		carregandoFuncionarios = true;
+
+		try {
+			const resposta = await client.query(api.funcionarios.getAll, {});
+			// Suportar ambos formatos (array direto ou objeto com .data), dependendo do hook/cliente
+			const lista = Array.isArray(resposta)
+				? resposta
+				: resposta &&
+					  typeof resposta === 'object' &&
+					  Array.isArray((resposta as { data?: unknown }).data)
+					? (resposta as { data: unknown[] }).data
+					: [];
+
+			funcionarios = lista as Funcionario[];
+		} catch (error: unknown) {
+			console.error('Erro ao carregar funcionários:', error);
+			funcionarios = [];
+		} finally {
+			carregandoFuncionarios = false;
+		}
+	}
+
+	function mostrarMensagem(tipo: Mensagem['tipo'], texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 4000);
+	}
+
+	const funcionariosFiltrados = $derived.by(() => {
+		if (!buscaFuncionario) {
+			return [...funcionarios].sort((a, b) => a.nome.localeCompare(b.nome));
+		}
+
+		const buscaNormalizada = buscaFuncionario.toLowerCase();
+		return funcionarios
+			.filter((f) => {
+				return (
+					f.nome.toLowerCase().includes(buscaNormalizada) ||
+					f.cpf?.toLowerCase().includes(buscaNormalizada) ||
+					f.matricula?.toLowerCase().includes(buscaNormalizada)
+				);
+			})
+			.sort((a, b) => a.nome.localeCompare(b.nome));
+	});
+
+	// Verificar se há usuários com problemas
+	const usuariosComProblemas = $derived.by(() => {
+		return usuarios.filter((u) => u.role?.erro === true || (u.avisos && u.avisos.length > 0));
+	});
+
+	// Lógica de filtros reativos
+	const usuariosFiltrados = $derived.by(() => {
+		let resultado = usuarios;
+
+		// Filtro por nome
+		if (filtroNome.trim()) {
+			const buscaNome = filtroNome.toLowerCase();
+			resultado = resultado.filter((u) => u.nome.toLowerCase().includes(buscaNome));
+		}
+
+		// Filtro por matrícula
+		if (filtroMatricula.trim()) {
+			const buscaMatricula = filtroMatricula.toLowerCase();
+			resultado = resultado.filter((u) => u.matricula.toLowerCase().includes(buscaMatricula));
+		}
+
+		// Filtro por setor
+		if (filtroSetor) {
+			resultado = resultado.filter((u) => u.role.setor === filtroSetor);
+		}
+
+		// Filtro por status
+		if (filtroStatus !== 'todos') {
+			if (filtroStatus === 'ativo') {
+				resultado = resultado.filter((u) => u.ativo && !u.bloqueado);
+			} else if (filtroStatus === 'inativo') {
+				resultado = resultado.filter((u) => !u.ativo);
+			} else if (filtroStatus === 'bloqueado') {
+				resultado = resultado.filter((u) => u.bloqueado);
+			}
+		}
+
+		// Filtro por data de criação
+		if (filtroDataCriacaoInicio) {
+			const dataInicio = new Date(filtroDataCriacaoInicio);
+			dataInicio.setHours(0, 0, 0, 0);
+			resultado = resultado.filter((u) => u.criadoEm >= dataInicio.getTime());
+		}
+		if (filtroDataCriacaoFim) {
+			const dataFim = new Date(filtroDataCriacaoFim);
+			dataFim.setHours(23, 59, 59, 999);
+			resultado = resultado.filter((u) => u.criadoEm <= dataFim.getTime());
+		}
+
+		// Filtro por último acesso
+		if (filtroUltimoAcessoInicio) {
+			const dataInicio = new Date(filtroUltimoAcessoInicio);
+			dataInicio.setHours(0, 0, 0, 0);
+			resultado = resultado.filter((u) => {
+				if (!u.ultimoAcesso) return false;
+				return u.ultimoAcesso >= dataInicio.getTime();
+			});
+		}
+		if (filtroUltimoAcessoFim) {
+			const dataFim = new Date(filtroUltimoAcessoFim);
+			dataFim.setHours(23, 59, 59, 999);
+			resultado = resultado.filter((u) => {
+				if (!u.ultimoAcesso) return false;
+				return u.ultimoAcesso <= dataFim.getTime();
+			});
+		}
+
+		return resultado;
+	});
+
+	function formatarData(timestamp: number | undefined): string {
+		if (!timestamp) return 'Nunca';
+		try {
+			return format(new Date(timestamp), 'dd/MM/yyyy HH:mm', { locale: ptBR });
+		} catch {
+			return 'Data inválida';
+		}
+	}
+
+	function limparFiltros() {
+		filtroNome = '';
+		filtroMatricula = '';
+		filtroSetor = '';
+		filtroStatus = 'todos';
+		filtroDataCriacaoInicio = '';
+		filtroDataCriacaoFim = '';
+		filtroUltimoAcessoInicio = '';
+		filtroUltimoAcessoFim = '';
+	}
+
+	function obterSetoresDisponiveis(): string[] {
+		const setoresSet = new Set<string>();
+		usuarios.forEach((u) => {
+			if (u.role.setor) {
+				setoresSet.add(u.role.setor);
+			}
+		});
+		return Array.from(setoresSet).sort();
+	}
+
+	async function ativarDesativarUsuario(usuario: Usuario) {
+		const confirmar = window.confirm(
+			`Deseja realmente ${usuario.ativo ? 'desativar' : 'ativar'} o usuário ${usuario.nome}?`
+		);
+		if (!confirmar) return;
+
+		processando = true;
+		try {
+			await client.mutation(api.usuarios.alterarStatus, {
+				usuarioId: usuario._id,
+				ativo: !usuario.ativo
+			});
+
+			mostrarMensagem(
+				'success',
+				`Usuário ${usuario.ativo ? 'desativado' : 'ativado'} com sucesso!`
+			);
+			await carregarUsuarios();
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao alterar status do usuário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function abrirModalAssociar(usuario: Usuario) {
+		usuarioSelecionado = usuario;
+		funcionarioSelecionadoId = usuario.funcionario?._id ?? '';
+		buscaFuncionario = '';
+		modalAssociarAberto = true;
+
+		if (funcionarios.length === 0 && !carregandoFuncionarios) {
+			void carregarFuncionarios();
+		}
+	}
+
+	function fecharModalAssociar() {
+		modalAssociarAberto = false;
+		usuarioSelecionado = null;
+		funcionarioSelecionadoId = '';
+		buscaFuncionario = '';
+	}
+
+	async function associarFuncionario() {
+		if (!usuarioSelecionado || !funcionarioSelecionadoId || funcionarioSelecionadoId === '') {
+			return;
+		}
+
+		processando = true;
+		try {
+			await client.mutation(api.usuarios.associarFuncionario, {
+				usuarioId: usuarioSelecionado._id,
+				funcionarioId: funcionarioSelecionadoId
+			});
+
+			mostrarMensagem('success', 'Funcionário associado com sucesso!');
+			fecharModalAssociar();
+			await carregarUsuarios();
+		} catch (error: unknown) {
+			const message =
+				error instanceof Error ? error.message : 'Não foi possível associar o funcionário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function desassociarFuncionario() {
+		if (!usuarioSelecionado) {
+			return;
+		}
+
+		const confirmar = window.confirm('Deseja realmente desassociar o funcionário deste usuário?');
+		if (!confirmar) return;
+
+		processando = true;
+		try {
+			await client.mutation(api.usuarios.desassociarFuncionario, {
+				usuarioId: usuarioSelecionado._id
+			});
+
+			mostrarMensagem('success', 'Funcionário desassociado com sucesso!');
+			fecharModalAssociar();
+			await carregarUsuarios();
+		} catch (error: unknown) {
+			const message =
+				error instanceof Error ? error.message : 'Não foi possível desassociar o funcionário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function bloquearUsuario(usuario: Usuario) {
+		const motivo = window.prompt('Digite o motivo do bloqueio:', usuario.motivoBloqueio || '');
+
+		if (!motivo || motivo.trim() === '') {
+			return;
+		}
+
+		if (!currentUser?.data) {
+			mostrarMensagem('error', 'Usuário não autenticado');
+			return;
+		}
+
+		processando = true;
+		try {
+			const resultado = await client.mutation(api.usuarios.bloquearUsuario, {
+				usuarioId: usuario._id,
+				motivo: motivo.trim(),
+				bloqueadoPorId: currentUser.data._id as Id<'usuarios'>
+			});
+
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Usuário bloqueado com sucesso!');
+				await carregarUsuarios();
+			} else {
+				mostrarMensagem('error', resultado.erro);
+			}
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao bloquear usuário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function desbloquearUsuario(usuario: Usuario) {
+		if (!currentUser?.data) {
+			mostrarMensagem('error', 'Usuário não autenticado');
+			return;
+		}
+
+		const confirmar = window.confirm(`Deseja realmente desbloquear o usuário ${usuario.nome}?`);
+		if (!confirmar) return;
+
+		processando = true;
+		try {
+			const resultado = await client.mutation(api.usuarios.desbloquearUsuario, {
+				usuarioId: usuario._id,
+				desbloqueadoPorId: currentUser.data._id as Id<'usuarios'>
+			});
+
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Usuário desbloqueado com sucesso!');
+				await carregarUsuarios();
+			} else {
+				mostrarMensagem('error', resultado.erro);
+			}
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao desbloquear usuário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function abrirModalExcluir(usuario: Usuario) {
+		usuarioSelecionado = usuario;
+		modalExcluirAberto = true;
+	}
+
+	function fecharModalExcluir() {
+		modalExcluirAberto = false;
+		usuarioSelecionado = null;
+	}
+
+	async function excluirUsuario() {
+		if (!usuarioSelecionado) {
+			return;
+		}
+
+		processando = true;
+		try {
+			await client.mutation(api.usuarios.excluir, {
+				usuarioId: usuarioSelecionado._id
+			});
+
+			mostrarMensagem('success', 'Usuário excluído com sucesso!');
+			fecharModalExcluir();
+			await carregarUsuarios();
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao excluir usuário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
 </script>
 
-<ProtectedRoute
-  allowedRoles={["ti_master", "admin", "ti_usuario"]}
-  maxLevel={3}
->
-  <div class="container mx-auto px-4 py-6 max-w-7xl">
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-6">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-primary/10 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-            />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-base-content">
-            Gestão de Usuários
-          </h1>
-          <p class="text-base-content/60 mt-1">
-            Administre os usuários do sistema
-          </p>
-        </div>
-      </div>
-      <div class="flex gap-3">
-        <a href="/ti/usuarios/criar" class="btn btn-primary">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 4v16m8-8H4"
-            />
-          </svg>
-          Criar Usuário
-        </a>
-      </div>
-    </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+	<div class="container mx-auto max-w-7xl px-4 py-6">
+		<!-- Header -->
+		<div class="mb-6 flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="bg-primary/10 rounded-xl p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-base-content text-3xl font-bold">Gestão de Usuários</h1>
+					<p class="text-base-content/60 mt-1">Administre os usuários do sistema</p>
+				</div>
+			</div>
+			<div class="flex gap-3">
+				<a href="/ti/usuarios/criar" class="btn btn-primary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					Criar Usuário
+				</a>
+			</div>
+		</div>
 
-    <!-- Alerta de Usuários com Problemas -->
-    {#if !carregandoUsuarios && usuariosComProblemas.length > 0}
-      <div class="alert alert-warning shadow-lg mb-6">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          />
-        </svg>
-        <div>
-          <h3 class="font-bold">Atenção: Usuários com Problemas Detectados</h3>
-          <div class="text-sm mt-2">
-            <p>
-              {usuariosComProblemas.length} usuário(s) possui(em) problemas que requerem
-              atenção:
-            </p>
-            <ul class="list-disc list-inside mt-2 space-y-1">
-              {#each usuariosComProblemas.slice(0, 3) as usuario}
-                <li>
-                  <strong>{usuario.nome}</strong> ({usuario.matricula})
-                  {#if usuario.avisos && usuario.avisos.length > 0}
-                    - {usuario.avisos[0].mensagem}
-                  {/if}
-                </li>
-              {/each}
-              {#if usuariosComProblemas.length > 3}
-                <li class="text-base-content/60">
-                  ... e mais {usuariosComProblemas.length - 3} usuário(s)
-                </li>
-              {/if}
-            </ul>
-            <p class="mt-2 font-semibold">
-              Por favor, corrija os perfis desses usuários para garantir acesso
-              adequado ao sistema.
-            </p>
-          </div>
-        </div>
-      </div>
-    {/if}
+		<!-- Alerta de Usuários com Problemas -->
+		{#if !carregandoUsuarios && usuariosComProblemas.length > 0}
+			<div class="alert alert-warning mb-6 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+					/>
+				</svg>
+				<div>
+					<h3 class="font-bold">Atenção: Usuários com Problemas Detectados</h3>
+					<div class="mt-2 text-sm">
+						<p>
+							{usuariosComProblemas.length} usuário(s) possui(em) problemas que requerem atenção:
+						</p>
+						<ul class="mt-2 list-inside list-disc space-y-1">
+							{#each usuariosComProblemas.slice(0, 3) as usuario}
+								<li>
+									<strong>{usuario.nome}</strong> ({usuario.matricula})
+									{#if usuario.avisos && usuario.avisos.length > 0}
+										- {usuario.avisos[0].mensagem}
+									{/if}
+								</li>
+							{/each}
+							{#if usuariosComProblemas.length > 3}
+								<li class="text-base-content/60">
+									... e mais {usuariosComProblemas.length - 3} usuário(s)
+								</li>
+							{/if}
+						</ul>
+						<p class="mt-2 font-semibold">
+							Por favor, corrija os perfis desses usuários para garantir acesso adequado ao sistema.
+						</p>
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Mensagens -->
-    {#if mensagem}
-      <div
-        class="alert shadow-lg"
-        class:alert-success={mensagem.tipo === "success"}
-        class:alert-error={mensagem.tipo === "error"}
-        class:alert-info={mensagem.tipo === "info"}
-      >
-        {#if mensagem.tipo === "success"}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            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>
-        {:else if mensagem.tipo === "error"}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            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>
-        {:else}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        {/if}
-        <span class="font-semibold">{mensagem.texto}</span>
-      </div>
-    {/if}
+		<!-- Mensagens -->
+		{#if mensagem}
+			<div
+				class="alert shadow-lg"
+				class:alert-success={mensagem.tipo === 'success'}
+				class:alert-error={mensagem.tipo === 'error'}
+				class:alert-info={mensagem.tipo === 'info'}
+			>
+				{#if mensagem.tipo === 'success'}
+					<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>
+				{:else if mensagem.tipo === 'error'}
+					<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>
+				{:else}
+					<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				{/if}
+				<span class="font-semibold">{mensagem.texto}</span>
+			</div>
+		{/if}
 
-    <!-- Filtros -->
-    {#if !carregandoUsuarios && usuarios.length > 0}
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <div class="flex items-center justify-between mb-4">
-            <h2 class="card-title">Filtros de Busca</h2>
-            <button
-              type="button"
-              class="btn btn-sm btn-outline"
-              onclick={limparFiltros}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-              Limpar Filtros
-            </button>
-          </div>
+		<!-- Filtros -->
+		{#if !carregandoUsuarios && usuarios.length > 0}
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<div class="mb-4 flex items-center justify-between">
+						<h2 class="card-title">Filtros de Busca</h2>
+						<button type="button" class="btn btn-sm btn-outline" onclick={limparFiltros}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+							Limpar Filtros
+						</button>
+					</div>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <!-- Nome -->
-            <div class="form-control">
-              <label class="label" for="filtro-nome">
-                <span class="label-text font-medium">Nome</span>
-              </label>
-              <input
-                id="filtro-nome"
-                type="text"
-                bind:value={filtroNome}
-                placeholder="Buscar por nome..."
-                class="input input-bordered input-sm"
-              />
-            </div>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<!-- Nome -->
+						<div class="form-control">
+							<label class="label" for="filtro-nome">
+								<span class="label-text font-medium">Nome</span>
+							</label>
+							<input
+								id="filtro-nome"
+								type="text"
+								bind:value={filtroNome}
+								placeholder="Buscar por nome..."
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Matrícula -->
-            <div class="form-control">
-              <label class="label" for="filtro-matricula">
-                <span class="label-text font-medium">Matrícula</span>
-              </label>
-              <input
-                id="filtro-matricula"
-                type="text"
-                bind:value={filtroMatricula}
-                placeholder="Buscar por matrícula..."
-                class="input input-bordered input-sm"
-              />
-            </div>
+						<!-- Matrícula -->
+						<div class="form-control">
+							<label class="label" for="filtro-matricula">
+								<span class="label-text font-medium">Matrícula</span>
+							</label>
+							<input
+								id="filtro-matricula"
+								type="text"
+								bind:value={filtroMatricula}
+								placeholder="Buscar por matrícula..."
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Setor -->
-            <div class="form-control">
-              <label class="label" for="filtro-setor">
-                <span class="label-text font-medium">Setor</span>
-              </label>
-              <select
-                id="filtro-setor"
-                bind:value={filtroSetor}
-                class="select select-bordered select-sm"
-              >
-                <option value="">Todos os setores</option>
-                {#each obterSetoresDisponiveis() as setor}
-                  <option value={setor}>{setor}</option>
-                {/each}
-              </select>
-            </div>
+						<!-- Setor -->
+						<div class="form-control">
+							<label class="label" for="filtro-setor">
+								<span class="label-text font-medium">Setor</span>
+							</label>
+							<select
+								id="filtro-setor"
+								bind:value={filtroSetor}
+								class="select select-bordered select-sm"
+							>
+								<option value="">Todos os setores</option>
+								{#each obterSetoresDisponiveis() as setor}
+									<option value={setor}>{setor}</option>
+								{/each}
+							</select>
+						</div>
 
-            <!-- Status -->
-            <div class="form-control">
-              <label class="label" for="filtro-status">
-                <span class="label-text font-medium">Status</span>
-              </label>
-              <select
-                id="filtro-status"
-                bind:value={filtroStatus}
-                class="select select-bordered select-sm"
-              >
-                <option value="todos">Todos</option>
-                <option value="ativo">Ativo</option>
-                <option value="inativo">Inativo</option>
-                <option value="bloqueado">Bloqueado</option>
-              </select>
-            </div>
+						<!-- Status -->
+						<div class="form-control">
+							<label class="label" for="filtro-status">
+								<span class="label-text font-medium">Status</span>
+							</label>
+							<select
+								id="filtro-status"
+								bind:value={filtroStatus}
+								class="select select-bordered select-sm"
+							>
+								<option value="todos">Todos</option>
+								<option value="ativo">Ativo</option>
+								<option value="inativo">Inativo</option>
+								<option value="bloqueado">Bloqueado</option>
+							</select>
+						</div>
 
-            <!-- Data de Criação Início -->
-            <div class="form-control">
-              <label class="label" for="filtro-data-criacao-inicio">
-                <span class="label-text font-medium"
-                  >Data de Criação (Início)</span
-                >
-              </label>
-              <input
-                id="filtro-data-criacao-inicio"
-                type="date"
-                bind:value={filtroDataCriacaoInicio}
-                class="input input-bordered input-sm"
-              />
-            </div>
+						<!-- Data de Criação Início -->
+						<div class="form-control">
+							<label class="label" for="filtro-data-criacao-inicio">
+								<span class="label-text font-medium">Data de Criação (Início)</span>
+							</label>
+							<input
+								id="filtro-data-criacao-inicio"
+								type="date"
+								bind:value={filtroDataCriacaoInicio}
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Data de Criação Fim -->
-            <div class="form-control">
-              <label class="label" for="filtro-data-criacao-fim">
-                <span class="label-text font-medium">Data de Criação (Fim)</span
-                >
-              </label>
-              <input
-                id="filtro-data-criacao-fim"
-                type="date"
-                bind:value={filtroDataCriacaoFim}
-                class="input input-bordered input-sm"
-              />
-            </div>
+						<!-- Data de Criação Fim -->
+						<div class="form-control">
+							<label class="label" for="filtro-data-criacao-fim">
+								<span class="label-text font-medium">Data de Criação (Fim)</span>
+							</label>
+							<input
+								id="filtro-data-criacao-fim"
+								type="date"
+								bind:value={filtroDataCriacaoFim}
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Último Acesso Início -->
-            <div class="form-control">
-              <label class="label" for="filtro-ultimo-acesso-inicio">
-                <span class="label-text font-medium"
-                  >Último Acesso (Início)</span
-                >
-              </label>
-              <input
-                id="filtro-ultimo-acesso-inicio"
-                type="date"
-                bind:value={filtroUltimoAcessoInicio}
-                class="input input-bordered input-sm"
-              />
-            </div>
+						<!-- Último Acesso Início -->
+						<div class="form-control">
+							<label class="label" for="filtro-ultimo-acesso-inicio">
+								<span class="label-text font-medium">Último Acesso (Início)</span>
+							</label>
+							<input
+								id="filtro-ultimo-acesso-inicio"
+								type="date"
+								bind:value={filtroUltimoAcessoInicio}
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Último Acesso Fim -->
-            <div class="form-control">
-              <label class="label" for="filtro-ultimo-acesso-fim">
-                <span class="label-text font-medium">Último Acesso (Fim)</span>
-              </label>
-              <input
-                id="filtro-ultimo-acesso-fim"
-                type="date"
-                bind:value={filtroUltimoAcessoFim}
-                class="input input-bordered input-sm"
-              />
-            </div>
-          </div>
+						<!-- Último Acesso Fim -->
+						<div class="form-control">
+							<label class="label" for="filtro-ultimo-acesso-fim">
+								<span class="label-text font-medium">Último Acesso (Fim)</span>
+							</label>
+							<input
+								id="filtro-ultimo-acesso-fim"
+								type="date"
+								bind:value={filtroUltimoAcessoFim}
+								class="input input-bordered input-sm"
+							/>
+						</div>
+					</div>
 
-          <div class="mt-4 text-sm text-base-content/60">
-            Mostrando {usuariosFiltrados.length} de {usuarios.length} usuário(s)
-          </div>
-        </div>
-      </div>
-    {/if}
+					<div class="text-base-content/60 mt-4 text-sm">
+						Mostrando {usuariosFiltrados.length} de {usuarios.length} usuário(s)
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Lista de Usuários -->
-    {#if carregandoUsuarios}
-      <div class="flex flex-col justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-        <p class="mt-4 text-base-content/60">Carregando usuários...</p>
-      </div>
-    {:else if erroUsuarios}
-      <div class="alert alert-error shadow-lg">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          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>
-        <div>
-          <h3 class="font-bold">Erro ao carregar usuários</h3>
-          <div class="text-sm mt-1">{erroUsuarios}</div>
-          <div class="text-xs mt-2">
-            Por favor, recarregue a página ou entre em contato com o suporte
-            técnico se o problema persistir.
-          </div>
-        </div>
-      </div>
-    {:else if usuarios.length === 0}
-      <div class="flex flex-col items-center justify-center py-16 text-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-16 w-16 text-base-content/30"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-          />
-        </svg>
-        <h3 class="text-xl font-semibold mt-4">Nenhum usuário encontrado</h3>
-        <p class="text-base-content/60 mt-2">
-          Cadastre um usuário para começar a gestão de acessos.
-        </p>
-      </div>
-    {:else}
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <h2 class="card-title text-2xl mb-4">Usuários ({usuarios.length})</h2>
+		<!-- Lista de Usuários -->
+		{#if carregandoUsuarios}
+			<div class="flex flex-col items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+				<p class="text-base-content/60 mt-4">Carregando usuários...</p>
+			</div>
+		{:else if erroUsuarios}
+			<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>
+				<div>
+					<h3 class="font-bold">Erro ao carregar usuários</h3>
+					<div class="mt-1 text-sm">{erroUsuarios}</div>
+					<div class="mt-2 text-xs">
+						Por favor, recarregue a página ou entre em contato com o suporte técnico se o problema
+						persistir.
+					</div>
+				</div>
+			</div>
+		{:else if usuarios.length === 0}
+			<div class="flex flex-col items-center justify-center py-16 text-center">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-base-content/30 h-16 w-16"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+					/>
+				</svg>
+				<h3 class="mt-4 text-xl font-semibold">Nenhum usuário encontrado</h3>
+				<p class="text-base-content/60 mt-2">
+					Cadastre um usuário para começar a gestão de acessos.
+				</p>
+			</div>
+		{:else}
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4 text-2xl">Usuários ({usuarios.length})</h2>
 
-          <div class="overflow-x-auto">
-            <table class="table table-zebra">
-              <thead>
-                <tr>
-                  <th>Matrícula</th>
-                  <th>Nome</th>
-                  <th>Email</th>
-                  <th>Role/Perfil</th>
-                  <th>Setor</th>
-                  <th>Funcionário Vinculado</th>
-                  <th>Status</th>
-                  <th>Primeiro Acesso</th>
-                  <th>Último Acesso</th>
-                  <th>Data de Criação</th>
-                  <th>Ações</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each usuariosFiltrados as usuario}
-                  <tr>
-                    <td class="font-mono font-semibold">{usuario.matricula}</td>
-                    <td class="font-semibold">{usuario.nome}</td>
-                    <td>{usuario.email}</td>
-                    <td>
-                      <div class="space-y-1">
-                        {#if usuario.role.erro}
-                          <div class="badge badge-error gap-1">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="h-3 w-3"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                              />
-                            </svg>
-                            {usuario.role.descricao}
-                          </div>
-                          {#if usuario.avisos && usuario.avisos.length > 0}
-                            <div
-                              class="tooltip tooltip-error"
-                              data-tip={usuario.avisos[0].mensagem}
-                            >
-                              <button
-                                type="button"
-                                class="btn btn-xs btn-error btn-circle"
-                                onclick={(e) => {
-                                  e.stopPropagation();
-                                  mostrarMensagem(
-                                    "error",
-                                    usuario.avisos![0].mensagem,
-                                  );
-                                }}
-                              >
-                                !
-                              </button>
-                            </div>
-                          {/if}
-                        {:else}
-                          <div class="badge badge-outline">
-                            {usuario.role.nome}
-                          </div>
-                        {/if}
-                      </div>
-                    </td>
-                    <td>{usuario.role.setor || "-"}</td>
-                    <td>
-                      {#if usuario.funcionario}
-                        <div class="space-y-1">
-                          <div class="badge badge-success gap-2">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="h-3 w-3"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M5 13l4 4L19 7"
-                              />
-                            </svg>
-                            Associado
-                          </div>
-                          <div class="text-sm font-medium">
-                            {usuario.funcionario.nome}
-                          </div>
-                          {#if usuario.funcionario.matricula}
-                            <div class="text-xs text-base-content/60">
-                              Mat: {usuario.funcionario.matricula}
-                            </div>
-                          {/if}
-                        </div>
-                      {:else}
-                        <div class="badge badge-warning gap-2">
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-3 w-3"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                            />
-                          </svg>
-                          Não associado
-                        </div>
-                      {/if}
-                    </td>
-                    <td>
-                      <UserStatusBadge
-                        ativo={usuario.ativo}
-                        bloqueado={usuario.bloqueado}
-                      />
-                    </td>
-                    <td>
-                      {#if usuario.primeiroAcesso}
-                        <div class="badge badge-warning">Sim</div>
-                      {:else}
-                        <div class="badge badge-success">Não</div>
-                      {/if}
-                    </td>
-                    <td>
-                      <span class="text-sm"
-                        >{formatarData(usuario.ultimoAcesso)}</span
-                      >
-                    </td>
-                    <td>
-                      <span class="text-sm"
-                        >{formatarData(usuario.criadoEm)}</span
-                      >
-                    </td>
-                    <td>
-                      <div class="dropdown dropdown-end">
-                        <button
-                          type="button"
-                          class="btn btn-sm btn-ghost"
-                          aria-label="Menu de ações"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                            />
-                          </svg>
-                        </button>
-                        <ul
-                          role="menu"
-                          class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-48 z-[1]"
-                        >
-                          <li>
-                            <button
-                              type="button"
-                              onclick={() => ativarDesativarUsuario(usuario)}
-                              disabled={processando}
-                            >
-                              {usuario.ativo ? "Desativar" : "Ativar"}
-                            </button>
-                          </li>
-                          <li>
-                            <button
-                              type="button"
-                              onclick={() => abrirModalAssociar(usuario)}
-                              disabled={processando}
-                            >
-                              {usuario.funcionario
-                                ? "Alterar Funcionário"
-                                : "Associar Funcionário"}
-                            </button>
-                          </li>
-                          <li>
-                            {#if usuario.bloqueado}
-                              <button
-                                type="button"
-                                onclick={() => desbloquearUsuario(usuario)}
-                                disabled={processando}
-                                class="text-success"
-                              >
-                                Desbloquear
-                              </button>
-                            {:else}
-                              <button
-                                type="button"
-                                onclick={() => bloquearUsuario(usuario)}
-                                disabled={processando}
-                                class="text-error"
-                              >
-                                Bloquear
-                              </button>
-                            {/if}
-                          </li>
-                          <div class="divider my-0"></div>
-                          <li>
-                            <button
-                              type="button"
-                              onclick={() => abrirModalExcluir(usuario)}
-                              disabled={processando}
-                              class="text-error"
-                            >
-                              Excluir
-                            </button>
-                          </li>
-                        </ul>
-                      </div>
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    {/if}
-  </div>
+					<div class="overflow-x-auto">
+						<table class="table-zebra table">
+							<thead>
+								<tr>
+									<th>Matrícula</th>
+									<th>Nome</th>
+									<th>Email</th>
+									<th>Role/Perfil</th>
+									<th>Setor</th>
+									<th>Funcionário Vinculado</th>
+									<th>Status</th>
+									<th>Primeiro Acesso</th>
+									<th>Último Acesso</th>
+									<th>Data de Criação</th>
+									<th>Ações</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each usuariosFiltrados as usuario}
+									<tr>
+										<td class="font-mono font-semibold">{usuario.matricula}</td>
+										<td class="font-semibold">{usuario.nome}</td>
+										<td>{usuario.email}</td>
+										<td>
+											<div class="space-y-1">
+												{#if usuario.role.erro}
+													<div class="badge badge-error gap-1">
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															class="h-3 w-3"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke="currentColor"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																stroke-width="2"
+																d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+															/>
+														</svg>
+														{usuario.role.descricao}
+													</div>
+													{#if usuario.avisos && usuario.avisos.length > 0}
+														<div
+															class="tooltip tooltip-error"
+															data-tip={usuario.avisos[0].mensagem}
+														>
+															<button
+																type="button"
+																class="btn btn-xs btn-error btn-circle"
+																onclick={(e) => {
+																	e.stopPropagation();
+																	mostrarMensagem('error', usuario.avisos![0].mensagem);
+																}}
+															>
+																!
+															</button>
+														</div>
+													{/if}
+												{:else}
+													<div class="badge badge-outline">
+														{usuario.role.nome}
+													</div>
+												{/if}
+											</div>
+										</td>
+										<td>{usuario.role.setor || '-'}</td>
+										<td>
+											{#if usuario.funcionario}
+												<div class="space-y-1">
+													<div class="badge badge-success gap-2">
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															class="h-3 w-3"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke="currentColor"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																stroke-width="2"
+																d="M5 13l4 4L19 7"
+															/>
+														</svg>
+														Associado
+													</div>
+													<div class="text-sm font-medium">
+														{usuario.funcionario.nome}
+													</div>
+													{#if usuario.funcionario.matricula}
+														<div class="text-base-content/60 text-xs">
+															Mat: {usuario.funcionario.matricula}
+														</div>
+													{/if}
+												</div>
+											{:else}
+												<div class="badge badge-warning gap-2">
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														class="h-3 w-3"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke="currentColor"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+														/>
+													</svg>
+													Não associado
+												</div>
+											{/if}
+										</td>
+										<td>
+											<UserStatusBadge ativo={usuario.ativo} bloqueado={usuario.bloqueado} />
+										</td>
+										<td>
+											{#if usuario.primeiroAcesso}
+												<div class="badge badge-warning">Sim</div>
+											{:else}
+												<div class="badge badge-success">Não</div>
+											{/if}
+										</td>
+										<td>
+											<span class="text-sm">{formatarData(usuario.ultimoAcesso)}</span>
+										</td>
+										<td>
+											<span class="text-sm">{formatarData(usuario.criadoEm)}</span>
+										</td>
+										<td>
+											<div class="dropdown dropdown-end">
+												<button
+													type="button"
+													class="btn btn-sm btn-ghost"
+													aria-label="Menu de ações"
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														class="h-5 w-5"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke="currentColor"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+														/>
+													</svg>
+												</button>
+												<ul
+													role="menu"
+													class="dropdown-content menu bg-base-100 rounded-box z-[1] w-48 p-2 shadow"
+												>
+													<li>
+														<button
+															type="button"
+															onclick={() => ativarDesativarUsuario(usuario)}
+															disabled={processando}
+														>
+															{usuario.ativo ? 'Desativar' : 'Ativar'}
+														</button>
+													</li>
+													<li>
+														<button
+															type="button"
+															onclick={() => abrirModalAssociar(usuario)}
+															disabled={processando}
+														>
+															{usuario.funcionario ? 'Alterar Funcionário' : 'Associar Funcionário'}
+														</button>
+													</li>
+													<li>
+														{#if usuario.bloqueado}
+															<button
+																type="button"
+																onclick={() => desbloquearUsuario(usuario)}
+																disabled={processando}
+																class="text-success"
+															>
+																Desbloquear
+															</button>
+														{:else}
+															<button
+																type="button"
+																onclick={() => bloquearUsuario(usuario)}
+																disabled={processando}
+																class="text-error"
+															>
+																Bloquear
+															</button>
+														{/if}
+													</li>
+													<div class="divider my-0"></div>
+													<li>
+														<button
+															type="button"
+															onclick={() => abrirModalExcluir(usuario)}
+															disabled={processando}
+															class="text-error"
+														>
+															Excluir
+														</button>
+													</li>
+												</ul>
+											</div>
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
 
-  <!-- Modal Associar Funcionário -->
-  {#if modalAssociarAberto && usuarioSelecionado}
-    <div class="modal modal-open">
-      <div class="modal-box max-w-2xl">
-        <h3 class="font-bold text-lg mb-4">Associar Funcionário ao Usuário</h3>
+	<!-- Modal Associar Funcionário -->
+	{#if modalAssociarAberto && usuarioSelecionado}
+		<div class="modal modal-open">
+			<div class="modal-box max-w-2xl">
+				<h3 class="mb-4 text-lg font-bold">Associar Funcionário ao Usuário</h3>
 
-        <div class="mb-6">
-          <p class="text-base-content/80 mb-2">
-            <strong>Usuário:</strong>
-            {usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
-          </p>
+				<div class="mb-6">
+					<p class="text-base-content/80 mb-2">
+						<strong>Usuário:</strong>
+						{usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
+					</p>
 
-          {#if usuarioSelecionado.funcionario}
-            <div class="alert alert-info">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                class="stroke-current shrink-0 w-6 h-6"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                ></path>
-              </svg>
-              <span>
-                Este usuário já possui um funcionário associado. Você pode
-                alterá-lo ou desassociá-lo.
-              </span>
-            </div>
-          {/if}
-        </div>
+					{#if usuarioSelecionado.funcionario}
+						<div class="alert alert-info">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								></path>
+							</svg>
+							<span>
+								Este usuário já possui um funcionário associado. Você pode alterá-lo ou
+								desassociá-lo.
+							</span>
+						</div>
+					{/if}
+				</div>
 
-        <div class="form-control mb-4">
-          <label for="busca-funcionario" class="label">
-            <span class="label-text">Buscar Funcionário</span>
-          </label>
-          <input
-            id="busca-funcionario"
-            type="text"
-            bind:value={buscaFuncionario}
-            placeholder="Digite nome, CPF ou matrícula..."
-            class="input input-bordered"
-          />
-        </div>
+				<div class="form-control mb-4">
+					<label for="busca-funcionario" class="label">
+						<span class="label-text">Buscar Funcionário</span>
+					</label>
+					<input
+						id="busca-funcionario"
+						type="text"
+						bind:value={buscaFuncionario}
+						placeholder="Digite nome, CPF ou matrícula..."
+						class="input input-bordered"
+					/>
+				</div>
 
-        <div class="form-control mb-6">
-          <div class="label">
-            <span class="label-text">Selecione o Funcionário *</span>
-          </div>
+				<div class="form-control mb-6">
+					<div class="label">
+						<span class="label-text">Selecione o Funcionário *</span>
+					</div>
 
-          <div class="border rounded-lg max-h-96 overflow-y-auto">
-            {#if carregandoFuncionarios}
-              <div
-                class="p-4 flex items-center justify-center gap-3 text-base-content/60"
-              >
-                <span class="loading loading-spinner loading-sm"></span>
-                Carregando funcionários disponíveis...
-              </div>
-            {:else if funcionariosFiltrados.length === 0}
-              <div class="p-4 text-center text-base-content/60">
-                {buscaFuncionario
-                  ? "Nenhum funcionário encontrado com esse critério"
-                  : "Nenhum funcionário disponível para associação."}
-              </div>
-            {:else}
-              {#each funcionariosFiltrados as func}
-                <label
-                  class="flex items-center gap-3 p-3 hover:bg-base-200 cursor-pointer border-b last:border-b-0"
-                >
-                  <input
-                    type="radio"
-                    name="funcionario"
-                    value={func._id}
-                    bind:group={funcionarioSelecionadoId}
-                    class="radio radio-primary"
-                  />
-                  <div class="flex-1">
-                    <div class="font-semibold">{func.nome}</div>
-                    <div class="text-sm text-base-content/70">
-                      CPF: {func.cpf || "N/A"}
-                      {#if func.matricula}
-                        | Matrícula: {func.matricula}
-                      {/if}
-                    </div>
-                    {#if func.descricaoCargo}
-                      <div class="text-xs text-base-content/60">
-                        {func.descricaoCargo}
-                      </div>
-                    {/if}
-                  </div>
-                </label>
-              {/each}
-            {/if}
-          </div>
-        </div>
+					<div class="max-h-96 overflow-y-auto rounded-lg border">
+						{#if carregandoFuncionarios}
+							<div class="text-base-content/60 flex items-center justify-center gap-3 p-4">
+								<span class="loading loading-spinner loading-sm"></span>
+								Carregando funcionários disponíveis...
+							</div>
+						{:else if funcionariosFiltrados.length === 0}
+							<div class="text-base-content/60 p-4 text-center">
+								{buscaFuncionario
+									? 'Nenhum funcionário encontrado com esse critério'
+									: 'Nenhum funcionário disponível para associação.'}
+							</div>
+						{:else}
+							{#each funcionariosFiltrados as func}
+								<label
+									class="hover:bg-base-200 flex cursor-pointer items-center gap-3 border-b p-3 last:border-b-0"
+								>
+									<input
+										type="radio"
+										name="funcionario"
+										value={func._id}
+										bind:group={funcionarioSelecionadoId}
+										class="radio radio-primary"
+									/>
+									<div class="flex-1">
+										<div class="font-semibold">{func.nome}</div>
+										<div class="text-base-content/70 text-sm">
+											CPF: {func.cpf || 'N/A'}
+											{#if func.matricula}
+												| Matrícula: {func.matricula}
+											{/if}
+										</div>
+										{#if func.descricaoCargo}
+											<div class="text-base-content/60 text-xs">
+												{func.descricaoCargo}
+											</div>
+										{/if}
+									</div>
+								</label>
+							{/each}
+						{/if}
+					</div>
+				</div>
 
-        <div class="modal-action">
-          <button
-            type="button"
-            class="btn btn-ghost"
-            onclick={fecharModalAssociar}
-            disabled={processando}
-          >
-            Cancelar
-          </button>
+				<div class="modal-action">
+					<button type="button" class="btn" onclick={fecharModalAssociar} disabled={processando}>
+						Cancelar
+					</button>
 
-          {#if usuarioSelecionado.funcionario}
-            <button
-              type="button"
-              class="btn btn-error"
-              onclick={desassociarFuncionario}
-              disabled={processando}
-            >
-              {#if processando}
-                <span class="loading loading-spinner loading-sm"></span>
-              {/if}
-              Desassociar
-            </button>
-          {/if}
+					{#if usuarioSelecionado.funcionario}
+						<button
+							type="button"
+							class="btn btn-error"
+							onclick={desassociarFuncionario}
+							disabled={processando}
+						>
+							{#if processando}
+								<span class="loading loading-spinner loading-sm"></span>
+							{/if}
+							Desassociar
+						</button>
+					{/if}
 
-          <button
-            type="button"
-            class="btn btn-primary"
-            onclick={associarFuncionario}
-            disabled={processando ||
-              !funcionarioSelecionadoId ||
-              funcionarioSelecionadoId === ""}
-          >
-            {#if processando}
-              <span class="loading loading-spinner loading-sm"></span>
-            {/if}
-            {usuarioSelecionado.funcionario ? "Alterar" : "Associar"}
-          </button>
-        </div>
-      </div>
-      <div class="modal-backdrop">
-        <button
-          type="button"
-          onclick={fecharModalAssociar}
-          onkeydown={(e) => e.key === "Escape" && fecharModalAssociar()}
-          aria-label="Fechar modal"
-          class="sr-only">Fechar</button
-        >
-      </div>
-    </div>
-  {/if}
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={associarFuncionario}
+						disabled={processando || !funcionarioSelecionadoId || funcionarioSelecionadoId === ''}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{/if}
+						{usuarioSelecionado.funcionario ? 'Alterar' : 'Associar'}
+					</button>
+				</div>
+			</div>
+			<div class="modal-backdrop">
+				<button
+					type="button"
+					onclick={fecharModalAssociar}
+					onkeydown={(e) => e.key === 'Escape' && fecharModalAssociar()}
+					aria-label="Fechar modal"
+					class="sr-only">Fechar</button
+				>
+			</div>
+		</div>
+	{/if}
 
-  <!-- Modal Excluir Usuário -->
-  {#if modalExcluirAberto && usuarioSelecionado}
-    <div class="modal modal-open">
-      <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4 text-error">Excluir Usuário</h3>
+	<!-- Modal Excluir Usuário -->
+	{#if modalExcluirAberto && usuarioSelecionado}
+		<div class="modal modal-open">
+			<div class="modal-box">
+				<h3 class="text-error mb-4 text-lg font-bold">Excluir Usuário</h3>
 
-        <div class="mb-4">
-          <p class="text-base-content/80 mb-2">
-            <strong>Usuário:</strong>
-            {usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
-          </p>
-          <div class="alert alert-error">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              class="stroke-current shrink-0 w-6 h-6"
-            >
-              <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"
-              ></path>
-            </svg>
-            <span>
-              Esta ação não pode ser desfeita. O usuário será permanentemente
-              excluído do sistema.
-            </span>
-          </div>
-        </div>
+				<div class="mb-4">
+					<p class="text-base-content/80 mb-2">
+						<strong>Usuário:</strong>
+						{usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
+					</p>
+					<div class="alert alert-error">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<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"
+							></path>
+						</svg>
+						<span>
+							Esta ação não pode ser desfeita. O usuário será permanentemente excluído do sistema.
+						</span>
+					</div>
+				</div>
 
-        <div class="modal-action">
-          <button
-            type="button"
-            class="btn btn-ghost"
-            onclick={fecharModalExcluir}
-            disabled={processando}
-          >
-            Cancelar
-          </button>
-          <button
-            type="button"
-            class="btn btn-error"
-            onclick={excluirUsuario}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner loading-sm"></span>
-            {/if}
-            Excluir
-          </button>
-        </div>
-      </div>
-      <div class="modal-backdrop">
-        <button
-          type="button"
-          onclick={fecharModalExcluir}
-          onkeydown={(e) => e.key === "Escape" && fecharModalExcluir()}
-          aria-label="Fechar modal"
-          class="sr-only">Fechar</button
-        >
-      </div>
-    </div>
-  {/if}
+				<div class="modal-action">
+					<button type="button" class="btn" onclick={fecharModalExcluir} disabled={processando}>
+						Cancelar
+					</button>
+					<button
+						type="button"
+						class="btn btn-error"
+						onclick={excluirUsuario}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{/if}
+						Excluir
+					</button>
+				</div>
+			</div>
+			<div class="modal-backdrop">
+				<button
+					type="button"
+					onclick={fecharModalExcluir}
+					onkeydown={(e) => e.key === 'Escape' && fecharModalExcluir()}
+					aria-label="Fechar modal"
+					class="sr-only">Fechar</button
+				>
+			</div>
+		</div>
+	{/if}
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte
index e36a233..de91390 100644
--- a/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte
@@ -1,574 +1,540 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { goto } from '$app/navigation';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
 
-  const client = useConvexClient();
-  const roles = useQuery(api.roles.listar, {});
-  const funcionarios = useQuery(api.funcionarios.getAll, {});
+	const client = useConvexClient();
+	const roles = useQuery(api.roles.listar, {});
+	const funcionarios = useQuery(api.funcionarios.getAll, {});
 
-  // Debug - Remover após teste
-  $effect(() => {
-    console.log("=== DEBUG PERFIS ===");
-    console.log("roles:", roles);
-    console.log("roles?.data:", roles?.data);
-    console.log("É array?", Array.isArray(roles?.data));
-    if (roles?.data) {
-      console.log("Quantidade de perfis:", roles.data.length);
-      console.log("Perfis:", roles.data);
-    }
-  });
+	// Debug - Remover após teste
+	$effect(() => {
+		console.log('=== DEBUG PERFIS ===');
+		console.log('roles:', roles);
+		console.log('roles?.data:', roles?.data);
+		console.log('É array?', Array.isArray(roles?.data));
+		if (roles?.data) {
+			console.log('Quantidade de perfis:', roles.data.length);
+			console.log('Perfis:', roles.data);
+		}
+	});
 
-  // Estados do formulário
-  let nome = $state("");
-  let email = $state("");
-  let roleId = $state("");
-  let funcionarioId = $state("");
-  let senhaInicial = $state("");
-  let confirmarSenha = $state("");
-  let processando = $state(false);
-  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(
-    null,
-  );
+	// Estados do formulário
+	let nome = $state('');
+	let email = $state('');
+	let roleId = $state('');
+	let funcionarioId = $state('');
+	let senhaInicial = $state('');
+	let confirmarSenha = $state('');
+	let processando = $state(false);
+	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);
 
-  function mostrarMensagem(tipo: "success" | "error", texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 5000);
-  }
+	function mostrarMensagem(tipo: 'success' | 'error', texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 5000);
+	}
 
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
 
-    // Validações
-    if (!nome.trim() || !email.trim() || !roleId || !senhaInicial) {
-      mostrarMensagem("error", "Preencha todos os campos obrigatórios");
-      return;
-    }
+		// Validações
+		if (!nome.trim() || !email.trim() || !roleId || !senhaInicial) {
+			mostrarMensagem('error', 'Preencha todos os campos obrigatórios');
+			return;
+		}
 
-    if (senhaInicial !== confirmarSenha) {
-      mostrarMensagem("error", "As senhas não conferem");
-      return;
-    }
+		if (senhaInicial !== confirmarSenha) {
+			mostrarMensagem('error', 'As senhas não conferem');
+			return;
+		}
 
-    if (senhaInicial.length < 8) {
-      mostrarMensagem("error", "A senha deve ter no mínimo 8 caracteres");
-      return;
-    }
+		if (senhaInicial.length < 8) {
+			mostrarMensagem('error', 'A senha deve ter no mínimo 8 caracteres');
+			return;
+		}
 
-    processando = true;
+		processando = true;
 
-    try {
-      const resultado = await client.mutation(api.usuarios.criar, {
-        nome: nome.trim(),
-        email: email.trim(),
-        roleId: roleId as Id<"roles">,
-        funcionarioId: funcionarioId
-          ? (funcionarioId as Id<"funcionarios">)
-          : undefined,
-        senhaInicial: senhaInicial,
-      });
+		try {
+			const resultado = await client.mutation(api.usuarios.criar, {
+				nome: nome.trim(),
+				email: email.trim(),
+				roleId: roleId as Id<'roles'>,
+				funcionarioId: funcionarioId ? (funcionarioId as Id<'funcionarios'>) : undefined,
+				senhaInicial: senhaInicial
+			});
 
-      if (resultado.sucesso) {
-        if (senhaGerada) {
-          mostrarMensagem(
-            "success",
-            `Usuário criado! SENHA TEMPORÁRIA: ${senhaGerada} - Anote esta senha, ela não será exibida novamente!`,
-          );
-          setTimeout(() => {
-            goto("/ti/usuarios");
-          }, 5000);
-        } else {
-          mostrarMensagem("success", "Usuário criado com sucesso!");
-          setTimeout(() => {
-            goto("/ti/usuarios");
-          }, 2000);
-        }
-      } else {
-        mostrarMensagem("error", resultado.erro);
-      }
-    } catch (error: any) {
-      mostrarMensagem("error", error.message || "Erro ao criar usuário");
-    } finally {
-      processando = false;
-    }
-  }
+			if (resultado.sucesso) {
+				if (senhaGerada) {
+					mostrarMensagem(
+						'success',
+						`Usuário criado! SENHA TEMPORÁRIA: ${senhaGerada} - Anote esta senha, ela não será exibida novamente!`
+					);
+					setTimeout(() => {
+						goto('/ti/usuarios');
+					}, 5000);
+				} else {
+					mostrarMensagem('success', 'Usuário criado com sucesso!');
+					setTimeout(() => {
+						goto('/ti/usuarios');
+					}, 2000);
+				}
+			} else {
+				mostrarMensagem('error', resultado.erro);
+			}
+		} catch (error: any) {
+			mostrarMensagem('error', error.message || 'Erro ao criar usuário');
+		} finally {
+			processando = false;
+		}
+	}
 
-  let senhaGerada = $state("");
-  let mostrarSenha = $state(false);
+	let senhaGerada = $state('');
+	let mostrarSenha = $state(false);
 
-  // Auto-completar ao selecionar funcionário
-  $effect(() => {
-    if (funcionarioId && funcionarios?.data) {
-      const funcSelecionado = funcionarios.data.find(
-        (f: any) => f._id === funcionarioId,
-      );
-      if (funcSelecionado) {
-        email = funcSelecionado.email || email;
-        nome = funcSelecionado.nome || nome;
-      }
-    }
-  });
+	// Auto-completar ao selecionar funcionário
+	$effect(() => {
+		if (funcionarioId && funcionarios?.data) {
+			const funcSelecionado = funcionarios.data.find((f: any) => f._id === funcionarioId);
+			if (funcSelecionado) {
+				email = funcSelecionado.email || email;
+				nome = funcSelecionado.nome || nome;
+			}
+		}
+	});
 
-  function gerarSenhaAleatoria() {
-    const chars =
-      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!";
-    let senha = "";
-    for (let i = 0; i < 12; i++) {
-      senha += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    senhaInicial = senha;
-    confirmarSenha = senha;
-    senhaGerada = senha;
-    mostrarSenha = true;
-  }
+	function gerarSenhaAleatoria() {
+		const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!';
+		let senha = '';
+		for (let i = 0; i < 12; i++) {
+			senha += chars.charAt(Math.floor(Math.random() * chars.length));
+		}
+		senhaInicial = senha;
+		confirmarSenha = senha;
+		senhaGerada = senha;
+		mostrarSenha = true;
+	}
 
-  function copiarSenha() {
-    if (senhaGerada) {
-      navigator.clipboard.writeText(senhaGerada);
-      mostrarMensagem("success", "Senha copiada para área de transferência!");
-    }
-  }
+	function copiarSenha() {
+		if (senhaGerada) {
+			navigator.clipboard.writeText(senhaGerada);
+			mostrarMensagem('success', 'Senha copiada para área de transferência!');
+		}
+	}
 </script>
 
-<ProtectedRoute allowedRoles={["ti_master", "admin"]} maxLevel={1}>
-  <div class="container mx-auto px-4 py-6 max-w-4xl">
-    <!-- Header -->
-    <div class="mb-8">
-      <div class="flex items-center justify-between mb-4">
-        <div class="flex items-center gap-4">
-          <div class="p-3 bg-primary/10 rounded-xl">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-10 w-10 text-primary"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
-              />
-            </svg>
-          </div>
-          <div>
-            <h1 class="text-3xl font-bold text-base-content">
-              Criar Novo Usuário
-            </h1>
-            <p class="text-base-content/60 mt-1">
-              Cadastre um novo usuário no sistema
-            </p>
-          </div>
-        </div>
-        <a href="/ti/usuarios" class="btn btn-outline btn-primary gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-            />
-          </svg>
-          Voltar para Usuários
-        </a>
-      </div>
-    </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin']} maxLevel={1}>
+	<div class="container mx-auto max-w-4xl px-4 py-6">
+		<!-- Header -->
+		<div class="mb-8">
+			<div class="mb-4 flex items-center justify-between">
+				<div class="flex items-center gap-4">
+					<div class="bg-primary/10 rounded-xl p-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-10 w-10"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h1 class="text-base-content text-3xl font-bold">Criar Novo Usuário</h1>
+						<p class="text-base-content/60 mt-1">Cadastre um novo usuário no sistema</p>
+					</div>
+				</div>
+				<a href="/ti/usuarios" class="btn btn-outline btn-primary gap-2">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+						/>
+					</svg>
+					Voltar para Usuários
+				</a>
+			</div>
+		</div>
 
-    <!-- Breadcrumbs -->
-    <div class="text-sm breadcrumbs mb-6">
-      <ul>
-        <li><a href="/ti/painel-administrativo">Dashboard TI</a></li>
-        <li><a href="/ti/usuarios">Usuários</a></li>
-        <li>Criar Usuário</li>
-      </ul>
-    </div>
+		<!-- Breadcrumbs -->
+		<div class="breadcrumbs mb-6 text-sm">
+			<ul>
+				<li><a href="/ti/painel-administrativo">Dashboard TI</a></li>
+				<li><a href="/ti/usuarios">Usuários</a></li>
+				<li>Criar Usuário</li>
+			</ul>
+		</div>
 
-    <!-- Mensagens -->
-    {#if mensagem}
-      <div
-        class="alert mb-6"
-        class:alert-success={mensagem.tipo === "success"}
-        class:alert-error={mensagem.tipo === "error"}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          {#if mensagem.tipo === "success"}
-            <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"
-            />
-          {:else}
-            <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"
-            />
-          {/if}
-        </svg>
-        <span>{mensagem.texto}</span>
-      </div>
-    {/if}
+		<!-- Mensagens -->
+		{#if mensagem}
+			<div
+				class="alert mb-6"
+				class:alert-success={mensagem.tipo === 'success'}
+				class:alert-error={mensagem.tipo === 'error'}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					{#if mensagem.tipo === 'success'}
+						<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"
+						/>
+					{:else}
+						<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"
+						/>
+					{/if}
+				</svg>
+				<span>{mensagem.texto}</span>
+			</div>
+		{/if}
 
-    <!-- Formulário -->
-    <div class="card bg-base-100 shadow-2xl border border-base-300">
-      <div class="card-body">
-        <div class="flex items-center gap-3 mb-6">
-          <div class="p-2 bg-primary/10 rounded-lg">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 text-primary"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-              />
-            </svg>
-          </div>
-          <h2 class="card-title text-2xl">Informações do Usuário</h2>
-        </div>
+		<!-- Formulário -->
+		<div class="card bg-base-100 border-base-300 border shadow-2xl">
+			<div class="card-body">
+				<div class="mb-6 flex items-center gap-3">
+					<div class="bg-primary/10 rounded-lg p-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+							/>
+						</svg>
+					</div>
+					<h2 class="card-title text-2xl">Informações do Usuário</h2>
+				</div>
 
-        <form onsubmit={handleSubmit}>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Funcionário (primeiro) -->
-            <div class="form-control md:col-span-2">
-              <label class="label" for="funcionario">
-                <span class="label-text font-semibold"
-                  >Vincular Funcionário (Opcional)</span
-                >
-              </label>
-              <select
-                id="funcionario"
-                class="select select-bordered"
-                bind:value={funcionarioId}
-                disabled={processando || !funcionarios?.data}
-              >
-                <option value=""
-                  >Selecione um funcionário para auto-completar dados</option
-                >
-                {#if funcionarios?.data}
-                  {#each funcionarios.data as func}
-                    <option value={func._id}
-                      >{func.nome} - Mat: {func.matricula}</option
-                    >
-                  {/each}
-                {/if}
-              </select>
-              <div class="label">
-                <span class="label-text-alt"
-                  >Ao selecionar, os campos serão preenchidos automaticamente</span
-                >
-              </div>
-            </div>
+				<form onsubmit={handleSubmit}>
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+						<!-- Funcionário (primeiro) -->
+						<div class="form-control md:col-span-2">
+							<label class="label" for="funcionario">
+								<span class="label-text font-semibold">Vincular Funcionário (Opcional)</span>
+							</label>
+							<select
+								id="funcionario"
+								class="select select-bordered"
+								bind:value={funcionarioId}
+								disabled={processando || !funcionarios?.data}
+							>
+								<option value="">Selecione um funcionário para auto-completar dados</option>
+								{#if funcionarios?.data}
+									{#each funcionarios.data as func}
+										<option value={func._id}>{func.nome} - Mat: {func.matricula}</option>
+									{/each}
+								{/if}
+							</select>
+							<div class="label">
+								<span class="label-text-alt"
+									>Ao selecionar, os campos serão preenchidos automaticamente</span
+								>
+							</div>
+						</div>
 
-            <!-- Nome -->
-            <div class="form-control">
-              <label class="label" for="nome">
-                <span class="label-text font-semibold">Nome Completo *</span>
-              </label>
-              <input
-                id="nome"
-                type="text"
-                placeholder="Ex: João da Silva"
-                class="input input-bordered"
-                bind:value={nome}
-                required
-                disabled={processando}
-              />
-            </div>
+						<!-- Nome -->
+						<div class="form-control">
+							<label class="label" for="nome">
+								<span class="label-text font-semibold">Nome Completo *</span>
+							</label>
+							<input
+								id="nome"
+								type="text"
+								placeholder="Ex: João da Silva"
+								class="input input-bordered"
+								bind:value={nome}
+								required
+								disabled={processando}
+							/>
+						</div>
 
-            <!-- Email -->
-            <div class="form-control">
-              <label class="label" for="email">
-                <span class="label-text font-semibold">E-mail *</span>
-              </label>
-              <input
-                id="email"
-                type="email"
-                placeholder="usuario@sgse.pe.gov.br"
-                class="input input-bordered"
-                bind:value={email}
-                required
-                disabled={processando}
-              />
-            </div>
+						<!-- Email -->
+						<div class="form-control">
+							<label class="label" for="email">
+								<span class="label-text font-semibold">E-mail *</span>
+							</label>
+							<input
+								id="email"
+								type="email"
+								placeholder="usuario@sgse.pe.gov.br"
+								class="input input-bordered"
+								bind:value={email}
+								required
+								disabled={processando}
+							/>
+						</div>
 
-            <!-- Perfil/Role -->
-            <div class="form-control">
-              <label class="label" for="role">
-                <span class="label-text font-semibold">Perfil de Acesso *</span>
-              </label>
-              <select
-                id="role"
-                class="select select-bordered"
-                bind:value={roleId}
-                required
-                disabled={processando || !roles?.data}
-              >
-                <option value="">Selecione um perfil</option>
-                {#if roles?.data && Array.isArray(roles.data)}
-                  {#each roles.data as role}
-                    <option value={role._id}>
-                      {role.descricao} ({role.nome})
-                    </option>
-                  {/each}
-                {:else}
-                  <option disabled>Carregando perfis...</option>
-                {/if}
-              </select>
-              {#if !roles?.data || !Array.isArray(roles.data)}
-                <div class="label">
-                  <span class="label-text-alt text-warning"
-                    >Carregando perfis disponíveis...</span
-                  >
-                </div>
-              {/if}
-            </div>
+						<!-- Perfil/Role -->
+						<div class="form-control">
+							<label class="label" for="role">
+								<span class="label-text font-semibold">Perfil de Acesso *</span>
+							</label>
+							<select
+								id="role"
+								class="select select-bordered"
+								bind:value={roleId}
+								required
+								disabled={processando || !roles?.data}
+							>
+								<option value="">Selecione um perfil</option>
+								{#if roles?.data && Array.isArray(roles.data)}
+									{#each roles.data as role}
+										<option value={role._id}>
+											{role.descricao} ({role.nome})
+										</option>
+									{/each}
+								{:else}
+									<option disabled>Carregando perfis...</option>
+								{/if}
+							</select>
+							{#if !roles?.data || !Array.isArray(roles.data)}
+								<div class="label">
+									<span class="label-text-alt text-warning">Carregando perfis disponíveis...</span>
+								</div>
+							{/if}
+						</div>
 
-            <div class="divider md:col-span-2 mt-4">
-              <div class="flex items-center gap-2">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 text-primary"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                  />
-                </svg>
-                Senha Inicial
-              </div>
-            </div>
+						<div class="divider mt-4 md:col-span-2">
+							<div class="flex items-center gap-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-primary h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+									/>
+								</svg>
+								Senha Inicial
+							</div>
+						</div>
 
-            <!-- Senha -->
-            <div class="form-control">
-              <label class="label" for="senha">
-                <span class="label-text font-semibold">Senha Inicial *</span>
-              </label>
-              <input
-                id="senha"
-                type="password"
-                placeholder="Mínimo 8 caracteres"
-                class="input input-bordered"
-                bind:value={senhaInicial}
-                required
-                minlength="8"
-                disabled={processando}
-              />
-              <div class="label">
-                <span class="label-text-alt">Mínimo 8 caracteres</span>
-              </div>
-            </div>
+						<!-- Senha -->
+						<div class="form-control">
+							<label class="label" for="senha">
+								<span class="label-text font-semibold">Senha Inicial *</span>
+							</label>
+							<input
+								id="senha"
+								type="password"
+								placeholder="Mínimo 8 caracteres"
+								class="input input-bordered"
+								bind:value={senhaInicial}
+								required
+								minlength="8"
+								disabled={processando}
+							/>
+							<div class="label">
+								<span class="label-text-alt">Mínimo 8 caracteres</span>
+							</div>
+						</div>
 
-            <!-- Confirmar Senha -->
-            <div class="form-control">
-              <label class="label" for="confirmar-senha">
-                <span class="label-text font-semibold">Confirmar Senha *</span>
-              </label>
-              <input
-                id="confirmar-senha"
-                type="password"
-                placeholder="Digite novamente"
-                class="input input-bordered"
-                bind:value={confirmarSenha}
-                required
-                minlength="8"
-                disabled={processando}
-              />
-            </div>
+						<!-- Confirmar Senha -->
+						<div class="form-control">
+							<label class="label" for="confirmar-senha">
+								<span class="label-text font-semibold">Confirmar Senha *</span>
+							</label>
+							<input
+								id="confirmar-senha"
+								type="password"
+								placeholder="Digite novamente"
+								class="input input-bordered"
+								bind:value={confirmarSenha}
+								required
+								minlength="8"
+								disabled={processando}
+							/>
+						</div>
 
-            <!-- Botão Gerar Senha e Visualização -->
-            <div class="md:col-span-2">
-              <button
-                type="button"
-                class="btn btn-sm btn-outline btn-info"
-                onclick={gerarSenhaAleatoria}
-                disabled={processando}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                  />
-                </svg>
-                Gerar Senha Forte Aleatória
-              </button>
+						<!-- Botão Gerar Senha e Visualização -->
+						<div class="md:col-span-2">
+							<button
+								type="button"
+								class="btn btn-sm btn-outline btn-info"
+								onclick={gerarSenhaAleatoria}
+								disabled={processando}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+									/>
+								</svg>
+								Gerar Senha Forte Aleatória
+							</button>
 
-              {#if mostrarSenha && senhaGerada}
-                <div class="alert alert-warning mt-4">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="stroke-current shrink-0 h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                    />
-                  </svg>
-                  <div class="flex-1">
-                    <h3 class="font-bold">Senha Gerada:</h3>
-                    <div class="flex items-center gap-2 mt-2">
-                      <code
-                        class="bg-base-300 px-3 py-2 rounded text-lg font-mono select-all"
-                      >
-                        {senhaGerada}
-                      </code>
-                      <button
-                        type="button"
-                        class="btn btn-sm btn-ghost"
-                        onclick={copiarSenha}
-                        title="Copiar senha"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-5 w-5"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                          />
-                        </svg>
-                        Copiar
-                      </button>
-                    </div>
-                    <p class="text-sm mt-2">
-                      ⚠️ <strong>IMPORTANTE:</strong> Anote esta senha! Você precisará
-                      repassá-la manualmente ao usuário até que o SMTP seja configurado.
-                    </p>
-                  </div>
-                </div>
-              {/if}
-            </div>
-          </div>
+							{#if mostrarSenha && senhaGerada}
+								<div class="alert alert-warning mt-4">
+									<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+										/>
+									</svg>
+									<div class="flex-1">
+										<h3 class="font-bold">Senha Gerada:</h3>
+										<div class="mt-2 flex items-center gap-2">
+											<code class="bg-base-300 rounded px-3 py-2 font-mono text-lg select-all">
+												{senhaGerada}
+											</code>
+											<button
+												type="button"
+												class="btn btn-sm btn-ghost"
+												onclick={copiarSenha}
+												title="Copiar senha"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-5 w-5"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+													/>
+												</svg>
+												Copiar
+											</button>
+										</div>
+										<p class="mt-2 text-sm">
+											⚠️ <strong>IMPORTANTE:</strong> Anote esta senha! Você precisará repassá-la manualmente
+											ao usuário até que o SMTP seja configurado.
+										</p>
+									</div>
+								</div>
+							{/if}
+						</div>
+					</div>
 
-          <div class="alert alert-info mt-6">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              class="stroke-current shrink-0 w-6 h-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              ></path>
-            </svg>
-            <div>
-              <h3 class="font-bold">Informações Importantes</h3>
-              <ul class="text-sm list-disc list-inside mt-2 space-y-1">
-                <li>O usuário deverá alterar a senha no primeiro acesso</li>
-                <li>
-                  As credenciais devem ser repassadas manualmente (por enquanto)
-                </li>
-                <li>
-                  Configure o SMTP em <a
-                    href="/ti/configuracoes-email"
-                    class="link">Configurações de Email</a
-                  > para envio automático
-                </li>
-              </ul>
-            </div>
-          </div>
+					<div class="alert alert-info mt-6">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							></path>
+						</svg>
+						<div>
+							<h3 class="font-bold">Informações Importantes</h3>
+							<ul class="mt-2 list-inside list-disc space-y-1 text-sm">
+								<li>O usuário deverá alterar a senha no primeiro acesso</li>
+								<li>As credenciais devem ser repassadas manualmente (por enquanto)</li>
+								<li>
+									Configure o SMTP em <a href="/ti/configuracoes-email" class="link"
+										>Configurações de Email</a
+									> para envio automático
+								</li>
+							</ul>
+						</div>
+					</div>
 
-          <div
-            class="card-actions justify-end mt-8 pt-6 border-t border-base-300"
-          >
-            <a
-              href="/ti/usuarios"
-              class="btn btn-ghost gap-2"
-              class:btn-disabled={processando}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-              Cancelar
-            </a>
-            <button
-              type="submit"
-              class="btn btn-primary gap-2"
-              disabled={processando}
-            >
-              {#if processando}
-                <span class="loading loading-spinner loading-sm"></span>
-                Criando Usuário...
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-                Criar Usuário
-              {/if}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
+					<div class="card-actions border-base-300 mt-8 justify-end border-t pt-6">
+						<a href="/ti/usuarios" class="btn gap-2" class:btn-disabled={processando}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+							Cancelar
+						</a>
+						<button type="submit" class="btn btn-primary gap-2" disabled={processando}>
+							{#if processando}
+								<span class="loading loading-spinner loading-sm"></span>
+								Criando Usuário...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+								Criar Usuário
+							{/if}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
 </ProtectedRoute>