From f7cc758d33002724017759e56e5f01ff0b669fed Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Tue, 4 Nov 2025 06:31:28 -0300
Subject: [PATCH] refactor: improve UI and functionality in employee
 registration and audit pages

- Enhanced the employee registration form by adding a dependents management section, allowing users to input details such as relationship, name, CPF, and birth date.
- Updated the layout and styling of the audit page, including improved statistics display and user feedback elements.
- Refined the handling of user actions in the audit logs, providing clearer labels and better organization of information.
- Improved the overall user experience by ensuring consistent design patterns and responsive elements across the registration and audit interfaces.
---
 .../atestados-licencas/+page.svelte           |  158 +-
 .../funcionarios/cadastro/+page.svelte        | 3080 ++++++++---------
 .../(dashboard)/ti/auditoria/+page.svelte     |  318 +-
 3 files changed, 1848 insertions(+), 1708 deletions(-)

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 31c1a52..a3ff1ad 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
@@ -702,71 +702,51 @@
       </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-4 gap-4">
-          <div class="form-control">
-            <label class="label">
-              <span class="label-text">Tipo</span>
-            </label>
-            <select
-              bind:value={filtroTipo}
-              class="select select-bordered"
-            >
+  <!-- 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>
-          </div>
+          </label>
+        </div>
 
-          <div class="form-control">
-            <label class="label">
-              <span class="label-text">Funcionário</span>
-            </label>
-            <input
-              type="text"
-              bind:value={filtroFuncionario}
-              placeholder="Buscar por nome..."
-              class="input input-bordered"
-            />
-          </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">
-              <span class="label-text">Data Início</span>
-            </label>
-            <input
-              type="date"
-              bind:value={filtroDataInicio}
-              class="input input-bordered"
-            />
-          </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">
-              <span class="label-text">Data Fim</span>
-            </label>
-            <div class="flex gap-2">
-              <input
-                type="date"
-                bind:value={filtroDataFim}
-                class="input input-bordered flex-1"
-              />
-              <button
-                class="btn btn-outline"
-                onclick={limparFiltros}
-              >
-                Limpar
-              </button>
-            </div>
-          </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="flex gap-2 justify-end">
+          <button class="btn btn-outline" onclick={limparFiltros}>Limpar</button>
         </div>
       </div>
     </div>
+  </div>
 
     <!-- Calendário Interativo -->
     {#if eventosQuery?.data}
@@ -1136,8 +1116,8 @@
                         : "Declaração"}
                     </span>
                   </td>
-                  <td>{formatarData(atestado.dataInicio)}</td>
-                  <td>{formatarData(atestado.dataFim)}</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
@@ -1203,8 +1183,8 @@
                       {licenca.ehProrrogacao ? " (Prorrogação)" : ""}
                     </span>
                   </td>
-                  <td>{formatarData(licenca.dataInicio)}</td>
-                  <td>{formatarData(licenca.dataFim)}</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
@@ -1279,9 +1259,9 @@
           />
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="date"
               bind:value={atestadoMedico.dataInicio}
@@ -1291,9 +1271,9 @@
           </div>
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="date"
               bind:value={atestadoMedico.dataFim}
@@ -1303,9 +1283,9 @@
           </div>
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">CID <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="text"
               bind:value={atestadoMedico.cid}
@@ -1333,9 +1313,9 @@
           </div>
 
           <div class="form-control md:col-span-2">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Observações</span>
-            </label>
+            </div>
             <textarea
               bind:value={atestadoMedico.observacoes}
               class="textarea textarea-bordered h-24"
@@ -1379,9 +1359,9 @@
           />
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="date"
               bind:value={declaracao.dataInicio}
@@ -1391,9 +1371,9 @@
           </div>
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="date"
               bind:value={declaracao.dataFim}
@@ -1417,9 +1397,9 @@
           </div>
 
           <div class="form-control md:col-span-2">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Observações</span>
-            </label>
+            </div>
             <textarea
               bind:value={declaracao.observacoes}
               class="textarea textarea-bordered h-24"
@@ -1463,9 +1443,9 @@
           />
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="date"
               bind:value={licencaMaternidade.dataInicio}
@@ -1475,18 +1455,18 @@
           </div>
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="date"
               bind:value={licencaMaternidade.dataFim}
               class="input input-bordered"
               required
             />
-            <label class="label">
+            <div class="label">
               <span class="label-text-alt">Calculado automaticamente (120 dias)</span>
-            </label>
+            </div>
           </div>
 
           <div class="form-control md:col-span-2">
@@ -1502,9 +1482,9 @@
 
           {#if licencaMaternidade.ehProrrogacao}
             <div class="form-control md:col-span-2">
-              <label class="label">
+              <div class="label">
                 <span class="label-text font-medium">Licença Original <span class="text-error">*</span></span>
-              </label>
+              </div>
               <select
                 bind:value={licencaMaternidade.licencaOriginalId}
                 class="select select-bordered"
@@ -1539,9 +1519,9 @@
           </div>
 
           <div class="form-control md:col-span-2">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Observações</span>
-            </label>
+            </div>
             <textarea
               bind:value={licencaMaternidade.observacoes}
               class="textarea textarea-bordered h-24"
@@ -1585,9 +1565,9 @@
           />
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="date"
               bind:value={licencaPaternidade.dataInicio}
@@ -1597,18 +1577,18 @@
           </div>
 
           <div class="form-control">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </label>
+            </div>
             <input
               type="date"
               bind:value={licencaPaternidade.dataFim}
               class="input input-bordered"
               required
             />
-            <label class="label">
+            <div class="label">
               <span class="label-text-alt">Calculado automaticamente (20 dias)</span>
-            </label>
+            </div>
           </div>
 
           <div class="form-control md:col-span-2">
@@ -1628,9 +1608,9 @@
           </div>
 
           <div class="form-control md:col-span-2">
-            <label class="label">
+            <div class="label">
               <span class="label-text font-medium">Observações</span>
-            </label>
+            </div>
             <textarea
               bind:value={licencaPaternidade.observacoes}
               class="textarea textarea-bordered h-24"
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 78addfc..343ae2c 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,1540 +1,1540 @@
-<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";
-
-  const client = useConvexClient();
-
-  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({});
-
-  // 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 });
-
-  // Dependentes
-  let dependentes = $state<Array<{ id: string; parentesco: string; nome: string; cpf: string; nascimento: string; documentoId?: string }>>([]);
-  let mostrarFormularioDependente = $state(false);
-  let dependenteAtual = $state<{ parentesco: string; nome: string; cpf: string; nascimento: string; arquivo: File | null; documentoId?: string }>({
-    parentesco: "",
-    nome: "",
-    cpf: "",
-    nascimento: "",
-    arquivo: null,
-    documentoId: undefined,
-  });
-
-  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 };
-  }
-
-  function removerCurso(id: string) {
-    cursos = cursos.filter(c => c.id !== id);
-  }
-
-  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 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;
-  }
-
-  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,
-    });
-    dependenteAtual = { parentesco: "", nome: "", cpf: "", nascimento: "", arquivo: null, documentoId: undefined };
-  }
-
-  function removerDependente(id: string) {
-    dependentes = dependentes.filter((d) => d.id !== id);
-  }
-
-  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 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,
-            }))
-          : 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-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 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>
-                <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>
-
-                <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 ou no dever de ressarcir eventuais valores recebidos indevidamente.
-          </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>
+<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";
+
+  const client = useConvexClient();
+
+  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({});
+
+  // 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 });
+
+  // Dependentes
+  let dependentes = $state<Array<{ id: string; parentesco: string; nome: string; cpf: string; nascimento: string; documentoId?: string }>>([]);
+  let mostrarFormularioDependente = $state(false);
+  let dependenteAtual = $state<{ parentesco: string; nome: string; cpf: string; nascimento: string; arquivo: File | null; documentoId?: string }>({
+    parentesco: "",
+    nome: "",
+    cpf: "",
+    nascimento: "",
+    arquivo: null,
+    documentoId: undefined,
+  });
+
+  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 };
+  }
+
+  function removerCurso(id: string) {
+    cursos = cursos.filter(c => c.id !== id);
+  }
+
+  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 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;
+  }
+
+  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,
+    });
+    dependenteAtual = { parentesco: "", nome: "", cpf: "", nascimento: "", arquivo: null, documentoId: undefined };
+  }
+
+  function removerDependente(id: string) {
+    dependentes = dependentes.filter((d) => d.id !== id);
+  }
+
+  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 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,
+            }))
+          : 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>
+                <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>
+
+                <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>
diff --git a/apps/web/src/routes/(dashboard)/ti/auditoria/+page.svelte b/apps/web/src/routes/(dashboard)/ti/auditoria/+page.svelte
index f39ac55..85ccaa2 100644
--- a/apps/web/src/routes/(dashboard)/ti/auditoria/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/auditoria/+page.svelte
@@ -15,7 +15,8 @@
       month: '2-digit',
       year: 'numeric',
       hour: '2-digit',
-      minute: '2-digit'
+      minute: '2-digit',
+      second: '2-digit'
     });
   }
 
@@ -30,55 +31,128 @@
     };
     return colors[acao] || "badge-neutral";
   }
+
+  function getAcaoLabel(acao: string) {
+    const labels: Record<string, string> = {
+      criar: "Criar",
+      editar: "Editar",
+      excluir: "Excluir",
+      bloquear: "Bloquear",
+      desbloquear: "Desbloquear",
+      resetar_senha: "Resetar Senha"
+    };
+    return labels[acao] || acao;
+  }
+
+  // Estatísticas
+  const totalAtividades = $derived(atividades?.data?.length || 0);
+  const totalLogins = $derived(logins?.data?.length || 0);
+  const loginsSucesso = $derived(logins?.data?.filter(l => l.sucesso).length || 0);
+  const loginsFalha = $derived(logins?.data?.filter(l => !l.sucesso).length || 0);
 </script>
 
-<div class="container mx-auto px-4 py-6 max-w-7xl">
+<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">TI</a></li>
+      <li>Auditoria e Logs</li>
+    </ul>
+  </div>
+
   <!-- Header -->
-  <div class="flex items-center justify-between mb-6">
-    <div class="flex items-center gap-4">
-      <div class="p-3 bg-accent/10 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <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="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-base-content">Auditoria e Logs</h1>
-        <p class="text-base-content/60 mt-1">Histórico completo de atividades e acessos</p>
+        <h1 class="text-3xl font-bold text-primary">Auditoria e Logs</h1>
+        <p class="text-base-content/70">Monitoramento completo de atividades e acessos do sistema</p>
       </div>
     </div>
   </div>
 
+  <!-- Cards de Estatísticas -->
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+    <div class="stat bg-base-100 shadow-lg rounded-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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+        </svg>
+      </div>
+      <div class="stat-title text-xs">Atividades</div>
+      <div class="stat-value text-2xl">{totalAtividades}</div>
+      <div class="stat-desc">Registros exibidos</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+        </svg>
+      </div>
+      <div class="stat-title text-xs">Logins Totais</div>
+      <div class="stat-value text-2xl">{totalLogins}</div>
+      <div class="stat-desc">Tentativas de acesso</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-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 text-xs">Logins Bem-sucedidos</div>
+      <div class="stat-value text-2xl text-success">{loginsSucesso}</div>
+      <div class="stat-desc">{totalLogins > 0 ? Math.round((loginsSucesso / totalLogins) * 100) : 0}% de sucesso</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-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 text-xs">Logins Falhados</div>
+      <div class="stat-value text-2xl text-error">{loginsFalha}</div>
+      <div class="stat-desc">{totalLogins > 0 ? Math.round((loginsFalha / totalLogins) * 100) : 0}% de falhas</div>
+    </div>
+  </div>
+
   <!-- Tabs -->
-  <div class="tabs tabs-boxed mb-6 bg-base-100 shadow-lg p-2">
+  <div class="tabs tabs-boxed mb-6 bg-base-100 shadow-lg p-1">
     <button 
-      class="tab {abaAtiva === 'atividades' ? 'tab-active' : ''}"
+      class="tab flex items-center gap-2 {abaAtiva === 'atividades' ? 'tab-active' : ''}"
       onclick={() => abaAtiva = "atividades"}
     >
-      <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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
       </svg>
-      Atividades no Sistema
+      <span class="font-medium">Atividades no Sistema</span>
     </button>
     <button 
-      class="tab {abaAtiva === 'logins' ? 'tab-active' : ''}"
+      class="tab flex items-center gap-2 {abaAtiva === 'logins' ? 'tab-active' : ''}"
       onclick={() => abaAtiva = "logins"}
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <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 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
       </svg>
-      Histórico de Logins
+      <span class="font-medium">Histórico de Logins</span>
     </button>
   </div>
 
   <!-- Controles -->
   <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
+    <div class="card-body py-4">
       <div class="flex flex-wrap items-center justify-between gap-4">
         <div class="form-control">
-          <label class="label">
-            <span class="label-text">Quantidade de registros</span>
+          <label class="label py-1">
+            <span class="label-text font-medium">Quantidade de registros</span>
           </label>
-          <select bind:value={limite} class="select select-bordered">
+          <select bind:value={limite} class="select select-bordered select-sm w-full max-w-xs">
             <option value={20}>20 registros</option>
             <option value={50}>50 registros</option>
             <option value={100}>100 registros</option>
@@ -87,14 +161,14 @@
         </div>
         
         <div class="flex gap-2">
-          <button class="btn btn-outline btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <button class="btn btn-outline 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
             </svg>
             Exportar CSV
           </button>
-          <button class="btn btn-outline btn-secondary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <button class="btn btn-outline btn-secondary 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="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 Avançados
@@ -108,45 +182,79 @@
   {#if abaAtiva === "atividades"}
     <div class="card bg-base-100 shadow-xl">
       <div class="card-body">
-        <h2 class="card-title mb-4">Atividades Recentes</h2>
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="card-title text-xl">
+            <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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+            </svg>
+            Atividades Recentes
+          </h2>
+          {#if atividades?.data}
+            <div class="badge badge-outline badge-lg">{atividades.data.length} registro{atividades.data.length !== 1 ? 's' : ''}</div>
+          {/if}
+        </div>
         
         {#if !atividades?.data}
-          <div class="flex justify-center py-10">
-            <span class="loading loading-spinner loading-lg text-primary"></span>
+          <div class="flex flex-col items-center justify-center py-16">
+            <span class="loading loading-spinner loading-lg text-primary mb-4"></span>
+            <p class="text-base-content/60">Carregando atividades...</p>
           </div>
         {:else if atividades.data.length === 0}
-          <div class="text-center py-10 text-base-content/60">
-            Nenhuma atividade registrada
+          <div class="flex flex-col items-center justify-center py-16 text-base-content/60">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 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="text-lg font-medium">Nenhuma atividade registrada</p>
+            <p class="text-sm mt-1">As atividades do sistema aparecerão aqui</p>
           </div>
         {:else}
-          <div class="overflow-x-auto">
-            <table class="table table-sm">
-              <thead>
+          <div class="overflow-x-auto rounded-lg">
+            <table class="table table-zebra">
+              <thead class="bg-base-200">
                 <tr>
-                  <th>Data/Hora</th>
-                  <th>Usuário</th>
-                  <th>Ação</th>
-                  <th>Recurso</th>
-                  <th>Detalhes</th>
+                  <th class="font-semibold">Data/Hora</th>
+                  <th class="font-semibold">Usuário</th>
+                  <th class="font-semibold">Ação</th>
+                  <th class="font-semibold">Recurso</th>
+                  <th class="font-semibold">Detalhes</th>
                 </tr>
               </thead>
               <tbody>
                 {#each atividades.data as atividade}
-                  <tr class="hover">
-                    <td class="font-mono text-xs">{formatarData(atividade.timestamp)}</td>
+                  <tr class="hover transition-colors">
                     <td>
-                      <div class="font-medium">{atividade.usuarioNome || "Sistema"}</div>
-                      <div class="text-xs opacity-60">{atividade.usuarioMatricula || "-"}</div>
+                      <div class="flex items-center gap-2">
+                        <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <span class="font-mono text-xs">{formatarData(atividade.timestamp)}</span>
+                      </div>
                     </td>
                     <td>
-                      <span class="badge {getAcaoColor(atividade.acao)} badge-sm">
-                        {atividade.acao}
+                      <div class="flex flex-col">
+                        <div class="font-semibold text-sm">{atividade.usuarioNome || "Sistema"}</div>
+                        {#if atividade.usuarioMatricula}
+                          <div class="text-xs text-base-content/50 font-mono">{atividade.usuarioMatricula}</div>
+                        {/if}
+                      </div>
+                    </td>
+                    <td>
+                      <span class="badge {getAcaoColor(atividade.acao)} badge-sm gap-1">
+                        {getAcaoLabel(atividade.acao)}
                       </span>
                     </td>
-                    <td class="font-medium">{atividade.recurso}</td>
                     <td>
-                      <div class="text-xs max-w-md truncate" title={atividade.detalhes}>
-                        {atividade.detalhes || "-"}
+                      <span class="font-medium text-sm">{atividade.recurso}</span>
+                    </td>
+                    <td>
+                      <div class="max-w-md">
+                        {#if atividade.detalhes}
+                          <div class="text-xs text-base-content/70 truncate" title={atividade.detalhes}>
+                            {atividade.detalhes}
+                          </div>
+                        {:else}
+                          <span class="text-base-content/40 text-xs">-</span>
+                        {/if}
                       </div>
                     </td>
                   </tr>
@@ -160,49 +268,98 @@
   {:else}
     <div class="card bg-base-100 shadow-xl">
       <div class="card-body">
-        <h2 class="card-title mb-4">Histórico de Logins</h2>
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="card-title text-xl">
+            <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+            </svg>
+            Histórico de Logins
+          </h2>
+          {#if logins?.data}
+            <div class="badge badge-outline badge-lg">{logins.data.length} registro{logins.data.length !== 1 ? 's' : ''}</div>
+          {/if}
+        </div>
         
         {#if !logins?.data}
-          <div class="flex justify-center py-10">
-            <span class="loading loading-spinner loading-lg text-primary"></span>
+          <div class="flex flex-col items-center justify-center py-16">
+            <span class="loading loading-spinner loading-lg text-primary mb-4"></span>
+            <p class="text-base-content/60">Carregando logins...</p>
           </div>
         {:else if logins.data.length === 0}
-          <div class="text-center py-10 text-base-content/60">
-            Nenhum login registrado
+          <div class="flex flex-col items-center justify-center py-16 text-base-content/60">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+            </svg>
+            <p class="text-lg font-medium">Nenhum login registrado</p>
+            <p class="text-sm mt-1">Os acessos ao sistema aparecerão aqui</p>
           </div>
         {:else}
-          <div class="overflow-x-auto">
-            <table class="table table-sm">
-              <thead>
+          <div class="overflow-x-auto rounded-lg">
+            <table class="table table-zebra">
+              <thead class="bg-base-200">
                 <tr>
-                  <th>Data/Hora</th>
-                  <th>Usuário/Email</th>
-                  <th>Status</th>
-                  <th>IP</th>
-                  <th>Dispositivo</th>
-                  <th>Navegador</th>
-                  <th>Sistema</th>
+                  <th class="font-semibold">Data/Hora</th>
+                  <th class="font-semibold">Usuário/Email</th>
+                  <th class="font-semibold">Status</th>
+                  <th class="font-semibold">IP</th>
+                  <th class="font-semibold">Dispositivo</th>
+                  <th class="font-semibold">Navegador</th>
+                  <th class="font-semibold">Sistema</th>
                 </tr>
               </thead>
               <tbody>
                 {#each logins.data as login}
-                  <tr class="hover">
-                    <td class="font-mono text-xs">{formatarData(login.timestamp)}</td>
-                    <td class="text-sm">{login.matriculaOuEmail}</td>
+                  <tr class="hover transition-colors">
                     <td>
-                      {#if login.sucesso}
-                        <span class="badge badge-success badge-sm">Sucesso</span>
-                      {:else}
-                        <span class="badge badge-error badge-sm">Falhou</span>
-                        {#if login.motivoFalha}
-                          <div class="text-xs text-error mt-1">{login.motivoFalha}</div>
-                        {/if}
-                      {/if}
+                      <div class="flex items-center gap-2">
+                        <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <span class="font-mono text-xs">{formatarData(login.timestamp)}</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="flex items-center gap-2">
+                        <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                        </svg>
+                        <span class="text-sm font-medium">{login.matriculaOuEmail}</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="flex flex-col gap-1">
+                        {#if login.sucesso}
+                          <span class="badge badge-success badge-sm 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="M5 13l4 4L19 7" />
+                            </svg>
+                            Sucesso
+                          </span>
+                        {:else}
+                          <span class="badge badge-error badge-sm 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="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                            Falhou
+                          </span>
+                          {#if login.motivoFalha}
+                            <div class="text-xs text-error mt-1 font-medium">{login.motivoFalha}</div>
+                          {/if}
+                        {/if}
+                      </div>
+                    </td>
+                    <td>
+                      <span class="font-mono text-xs bg-base-200 px-2 py-1 rounded">{login.ipAddress || "-"}</span>
+                    </td>
+                    <td>
+                      <div class="text-xs text-base-content/70">{login.device || "-"}</div>
+                    </td>
+                    <td>
+                      <div class="text-xs text-base-content/70">{login.browser || "-"}</div>
+                    </td>
+                    <td>
+                      <div class="text-xs text-base-content/70">{login.sistema || "-"}</div>
                     </td>
-                    <td class="font-mono text-xs">{login.ipAddress || "-"}</td>
-                    <td class="text-xs">{login.device || "-"}</td>
-                    <td class="text-xs">{login.browser || "-"}</td>
-                    <td class="text-xs">{login.sistema || "-"}</td>
                   </tr>
                 {/each}
               </tbody>
@@ -214,11 +371,14 @@
   {/if}
 
   <!-- Informação -->
-  <div class="alert alert-info mt-6">
+  <div class="alert alert-info shadow-lg 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>
-    <span>Os logs são armazenados permanentemente e não podem ser alterados ou excluídos.</span>
+    <div>
+      <h3 class="font-bold">Informação Importante</h3>
+      <div class="text-sm">Os logs são armazenados permanentemente e não podem ser alterados ou excluídos.</div>
+    </div>
   </div>
-</div>
+</main>