diff --git a/apps/web/src/lib/components/PrintModal.svelte b/apps/web/src/lib/components/PrintModal.svelte
index 566f550..0811111 100644
--- a/apps/web/src/lib/components/PrintModal.svelte
+++ b/apps/web/src/lib/components/PrintModal.svelte
@@ -30,14 +30,27 @@
     endereco: true,
     contato: true,
     cargo: true,
+    financeiro: true,
     bancario: true,
   });
 
+  const REGIME_LABELS: Record<string, string> = {
+    clt: "CLT",
+    estatutario_municipal: "Estatutário Municipal",
+    estatutario_pe: "Estatutário PE",
+    estatutario_federal: "Estatutário Federal",
+  };
+
   function getLabelFromOptions(value: string | undefined, options: Array<{value: string, label: string}>): string {
     if (!value) return "-";
     return options.find(opt => opt.value === value)?.label || value;
   }
 
+  function getRegimeLabel(value?: string) {
+    if (!value) return "-";
+    return REGIME_LABELS[value] ?? value;
+  }
+
   function selectAll() {
     Object.keys(sections).forEach(key => {
       sections[key as keyof typeof sections] = true;
@@ -173,6 +186,9 @@
         if (funcionario.carteiraProfissionalNumero) {
           documentosData.push(['Cart. Profissional', `Nº ${funcionario.carteiraProfissionalNumero}${funcionario.carteiraProfissionalSerie ? ' - Série: ' + funcionario.carteiraProfissionalSerie : ''}`]);
         }
+        if (funcionario.carteiraProfissionalDataEmissao) {
+          documentosData.push(['Emissão Cart. Profissional', funcionario.carteiraProfissionalDataEmissao]);
+        }
         if (funcionario.reservistaNumero) {
           documentosData.push(['Reservista', `Nº ${funcionario.reservistaNumero}${funcionario.reservistaSerie ? ' - Série: ' + funcionario.reservistaSerie : ''}`]);
         }
@@ -287,18 +303,19 @@
           ['Tipo', funcionario.simboloTipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'],
         ];
 
-        if (funcionario.simbolo) {
-          cargoData.push(['Símbolo', funcionario.simbolo.nome]);
+        const simboloInfo = funcionario.simbolo ?? funcionario.simboloDetalhes ?? funcionario.simboloDados;
+        if (simboloInfo) {
+          cargoData.push(['Símbolo', simboloInfo.nome]);
+          if (simboloInfo.descricao) cargoData.push(['Descrição do Símbolo', simboloInfo.descricao]);
         }
         if (funcionario.descricaoCargo) cargoData.push(['Descrição', funcionario.descricaoCargo]);
+        if (funcionario.regimeTrabalho) cargoData.push(['Regime do Funcionário', getRegimeLabel(funcionario.regimeTrabalho)]);
         if (funcionario.admissaoData) cargoData.push(['Data Admissão', funcionario.admissaoData]);
         if (funcionario.nomeacaoPortaria) cargoData.push(['Portaria', funcionario.nomeacaoPortaria]);
         if (funcionario.nomeacaoData) cargoData.push(['Data Nomeação', funcionario.nomeacaoData]);
         if (funcionario.nomeacaoDOE) cargoData.push(['DOE', funcionario.nomeacaoDOE]);
-        if (funcionario.pertenceOrgaoPublico) {
-          cargoData.push(['Pertence Órgão Público', 'Sim']);
-          if (funcionario.orgaoOrigem) cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
-        }
+        cargoData.push(['Pertence Órgão Público', funcionario.pertenceOrgaoPublico ? 'Sim' : 'Não']);
+        if (funcionario.pertenceOrgaoPublico && funcionario.orgaoOrigem) cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
         if (funcionario.aposentado && funcionario.aposentado !== 'nao') {
           cargoData.push(['Aposentado', getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)]);
         }
@@ -315,6 +332,36 @@
         yPosition = (doc as any).lastAutoTable.finalY + 10;
       }
 
+      // Dados Financeiros
+      if (sections.financeiro && funcionario.simbolo) {
+        const simbolo = funcionario.simbolo;
+        const financeiroData: any[] = [
+          ['Símbolo', simbolo.nome],
+          ['Tipo', simbolo.tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'],
+          ['Remuneração Total', `R$ ${simbolo.valor}`],
+        ];
+
+        if (funcionario.simboloTipo === 'cargo_comissionado') {
+          if (simbolo.vencValor) {
+            financeiroData.push(['Vencimento', `R$ ${simbolo.vencValor}`]);
+          }
+          if (simbolo.repValor) {
+            financeiroData.push(['Representação', `R$ ${simbolo.repValor}`]);
+          }
+        }
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['DADOS FINANCEIROS', '']],
+          body: financeiroData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
       // Dados Bancários
       if (sections.bancario && funcionario.contaBradescoNumero) {
         const bancarioData: any[] = [
@@ -428,6 +475,11 @@
         <span class="label-text">Cargo e Vínculo</span>
       </label>
 
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.financeiro} />
+        <span class="label-text">Dados Financeiros</span>
+      </label>
+
       <label class="label cursor-pointer justify-start gap-3">
         <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.bancario} />
         <span class="label-text">Dados Bancários</span>
diff --git a/apps/web/src/lib/components/ferias/CalendarioFerias.svelte b/apps/web/src/lib/components/ferias/CalendarioFerias.svelte
index ab459ba..3dec5c5 100644
--- a/apps/web/src/lib/components/ferias/CalendarioFerias.svelte
+++ b/apps/web/src/lib/components/ferias/CalendarioFerias.svelte
@@ -1,393 +1,399 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { Calendar } from "@fullcalendar/core";
-  import dayGridPlugin from "@fullcalendar/daygrid";
-  import interactionPlugin from "@fullcalendar/interaction";
-  import multiMonthPlugin from "@fullcalendar/multimonth";
-  import ptBrLocale from "@fullcalendar/core/locales/pt-br";
+	import { onMount } from 'svelte';
+	import { Calendar } from '@fullcalendar/core';
+	import dayGridPlugin from '@fullcalendar/daygrid';
+	import interactionPlugin from '@fullcalendar/interaction';
+	import multiMonthPlugin from '@fullcalendar/multimonth';
+	import ptBrLocale from '@fullcalendar/core/locales/pt-br';
+	import { SvelteDate } from 'svelte/reactivity';
 
-  interface Props {
-    periodosExistentes?: Array<{ dataInicio: string; dataFim: string; dias: number }>;
-    onPeriodoAdicionado?: (periodo: { dataInicio: string; dataFim: string; dias: number }) => void;
-    onPeriodoRemovido?: (index: number) => void;
-    maxPeriodos?: number;
-    minDiasPorPeriodo?: number;
-    modoVisualizacao?: "month" | "multiMonth";
-    readonly?: boolean;
-  }
+	interface Props {
+		periodosExistentes?: Array<{ dataInicio: string; dataFim: string; dias: number }>;
+		onPeriodoAdicionado?: (periodo: { dataInicio: string; dataFim: string; dias: number }) => void;
+		onPeriodoRemovido?: (index: number) => void;
+		maxPeriodos?: number;
+		minDiasPorPeriodo?: number;
+		modoVisualizacao?: 'month' | 'multiMonth';
+		readonly?: boolean;
+	}
 
-  let {
-    periodosExistentes = [],
-    onPeriodoAdicionado,
-    onPeriodoRemovido,
-    maxPeriodos = 3,
-    minDiasPorPeriodo = 5,
-    modoVisualizacao = "month",
-    readonly = false,
-  }: Props = $props();
+	let {
+		periodosExistentes = [],
+		onPeriodoAdicionado,
+		onPeriodoRemovido,
+		maxPeriodos = 3,
+		minDiasPorPeriodo = 5,
+		modoVisualizacao = 'month',
+		readonly = false
+	}: Props = $props();
 
-  let calendarEl: HTMLDivElement;
-  let calendar: Calendar | null = null;
-  let selecaoInicio: Date | null = null;
-  let eventos: any[] = $state([]);
+	let calendarEl: HTMLDivElement;
+	let calendar: Calendar | null = null;
 
-  // Cores dos períodos
-  const coresPeriodos = [
-    { bg: "#667eea", border: "#5568d3", text: "#ffffff" }, // Roxo
-    { bg: "#f093fb", border: "#c75ce6", text: "#ffffff" }, // Rosa
-    { bg: "#4facfe", border: "#00c6ff", text: "#ffffff" }, // Azul
-  ];
+	// Cores dos períodos
+	const coresPeriodos = [
+		{ bg: '#667eea', border: '#5568d3', text: '#ffffff' }, // Roxo
+		{ bg: '#f093fb', border: '#c75ce6', text: '#ffffff' }, // Rosa
+		{ bg: '#4facfe', border: '#00c6ff', text: '#ffffff' } // Azul
+	];
 
-  // Converter períodos existentes em eventos
-  function atualizarEventos() {
-    eventos = periodosExistentes.map((periodo, index) => ({
-      id: `periodo-${index}`,
-      title: `Período ${index + 1} (${periodo.dias} dias)`,
-      start: periodo.dataInicio,
-      end: calcularDataFim(periodo.dataFim),
-      backgroundColor: coresPeriodos[index % coresPeriodos.length].bg,
-      borderColor: coresPeriodos[index % coresPeriodos.length].border,
-      textColor: coresPeriodos[index % coresPeriodos.length].text,
-      display: "block",
-      extendedProps: {
-        index,
-        dias: periodo.dias,
-      },
-    }));
-  }
+	const eventos = $derived.by(() =>
+		periodosExistentes.map((periodo, index) => ({
+			id: `periodo-${index}`,
+			title: `Período ${index + 1} (${periodo.dias} dias)`,
+			start: periodo.dataInicio,
+			end: calcularDataFim(periodo.dataFim),
+			backgroundColor: coresPeriodos[index % coresPeriodos.length].bg,
+			borderColor: coresPeriodos[index % coresPeriodos.length].border,
+			textColor: coresPeriodos[index % coresPeriodos.length].text,
+			display: 'block',
+			extendedProps: {
+				index,
+				dias: periodo.dias
+			}
+		}))
+	);
 
-  // Helper: Adicionar 1 dia à data fim (FullCalendar usa exclusive end)
-  function calcularDataFim(dataFim: string): string {
-    const data = new Date(dataFim);
-    data.setDate(data.getDate() + 1);
-    return data.toISOString().split("T")[0];
-  }
+	// Helper: Adicionar 1 dia à data fim (FullCalendar usa exclusive end)
+	function calcularDataFim(dataFim: string): string {
+		const data = new SvelteDate(dataFim);
+		data.setDate(data.getDate() + 1);
+		return data.toISOString().split('T')[0];
+	}
 
-  // Helper: Calcular dias entre datas (inclusivo)
-  function calcularDias(inicio: Date, fim: Date): number {
-    const diffTime = Math.abs(fim.getTime() - inicio.getTime());
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
-    return diffDays;
-  }
+	// Helper: Calcular dias entre datas (inclusivo)
+	function calcularDias(inicio: Date, fim: Date): number {
+		const diffTime = Math.abs(fim.getTime() - inicio.getTime());
+		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+		return diffDays;
+	}
 
-  // Atualizar eventos quando períodos mudam
-  $effect(() => {
-    atualizarEventos();
-    if (calendar) {
-      calendar.removeAllEvents();
-      calendar.addEventSource(eventos);
-    }
-  });
+	// Atualizar eventos quando períodos mudam
+	$effect(() => {
+		if (!calendar) return;
 
-  onMount(() => {
-    if (!calendarEl) return;
+		calendar.removeAllEvents();
+		if (eventos.length === 0) return;
 
-    atualizarEventos();
+		// FullCalendar muta os objetos de evento internamente, então fornecemos cópias
+		const eventosClonados = eventos.map((evento) => ({
+			...evento,
+			extendedProps: { ...evento.extendedProps }
+		}));
+		calendar.addEventSource(eventosClonados);
+	});
 
-    calendar = new Calendar(calendarEl, {
-      plugins: [dayGridPlugin, interactionPlugin, multiMonthPlugin],
-      initialView: modoVisualizacao === "multiMonth" ? "multiMonthYear" : "dayGridMonth",
-      locale: ptBrLocale,
-      headerToolbar: {
-        left: "prev,next today",
-        center: "title",
-        right: modoVisualizacao === "multiMonth" ? "multiMonthYear" : "dayGridMonth",
-      },
-      height: "auto",
-      selectable: !readonly,
-      selectMirror: true,
-      unselectAuto: false,
-      events: eventos,
-      
-      // Estilo customizado
-      buttonText: {
-        today: "Hoje",
-        month: "Mês",
-        multiMonthYear: "Ano",
-      },
-      
-      // Seleção de período
-      select: (info) => {
-        if (readonly) return;
+	onMount(() => {
+		if (!calendarEl) return;
 
-        const inicio = new Date(info.startStr);
-        const fim = new Date(info.endStr);
-        fim.setDate(fim.getDate() - 1); // FullCalendar usa exclusive end
+		calendar = new Calendar(calendarEl, {
+			plugins: [dayGridPlugin, interactionPlugin, multiMonthPlugin],
+			initialView: modoVisualizacao === 'multiMonth' ? 'multiMonthYear' : 'dayGridMonth',
+			locale: ptBrLocale,
+			headerToolbar: {
+				left: 'prev,next today',
+				center: 'title',
+				right: modoVisualizacao === 'multiMonth' ? 'multiMonthYear' : 'dayGridMonth'
+			},
+			height: 'auto',
+			selectable: !readonly,
+			selectMirror: true,
+			unselectAuto: false,
+			events: eventos.map((evento) => ({ ...evento, extendedProps: { ...evento.extendedProps } })),
 
-        const dias = calcularDias(inicio, fim);
+			// Estilo customizado
+			buttonText: {
+				today: 'Hoje',
+				month: 'Mês',
+				multiMonthYear: 'Ano'
+			},
 
-        // Validar número de períodos
-        if (periodosExistentes.length >= maxPeriodos) {
-          alert(`Máximo de ${maxPeriodos} períodos permitidos`);
-          calendar?.unselect();
-          return;
-        }
+			// Seleção de período
+			select: (info) => {
+				if (readonly) return;
 
-        // Validar mínimo de dias
-        if (dias < minDiasPorPeriodo) {
-          alert(`Período deve ter no mínimo ${minDiasPorPeriodo} dias`);
-          calendar?.unselect();
-          return;
-        }
+				const inicio = new Date(info.startStr);
+				const fim = new SvelteDate(info.endStr);
+				fim.setDate(fim.getDate() - 1); // FullCalendar usa exclusive end
 
-        // Adicionar período
-        const novoPeriodo = {
-          dataInicio: info.startStr,
-          dataFim: fim.toISOString().split("T")[0],
-          dias,
-        };
+				const dias = calcularDias(inicio, fim);
 
-        if (onPeriodoAdicionado) {
-          onPeriodoAdicionado(novoPeriodo);
-        }
+				// Validar número de períodos
+				if (periodosExistentes.length >= maxPeriodos) {
+					alert(`Máximo de ${maxPeriodos} períodos permitidos`);
+					calendar?.unselect();
+					return;
+				}
 
-        calendar?.unselect();
-      },
+				// Validar mínimo de dias
+				if (dias < minDiasPorPeriodo) {
+					alert(`Período deve ter no mínimo ${minDiasPorPeriodo} dias`);
+					calendar?.unselect();
+					return;
+				}
 
-      // Click em evento para remover
-      eventClick: (info) => {
-        if (readonly) return;
+				// Adicionar período
+				const novoPeriodo = {
+					dataInicio: info.startStr,
+					dataFim: fim.toISOString().split('T')[0],
+					dias
+				};
 
-        const index = info.event.extendedProps.index;
-        if (
-          confirm(
-            `Deseja remover o Período ${index + 1} (${info.event.extendedProps.dias} dias)?`
-          )
-        ) {
-          if (onPeriodoRemovido) {
-            onPeriodoRemovido(index);
-          }
-        }
-      },
+				if (onPeriodoAdicionado) {
+					onPeriodoAdicionado(novoPeriodo);
+				}
 
-      // Tooltip ao passar mouse
-      eventDidMount: (info) => {
-        info.el.title = `Click para remover\n${info.event.title}`;
-        info.el.style.cursor = readonly ? "default" : "pointer";
-      },
+				calendar?.unselect();
+			},
 
-      // Desabilitar datas passadas
-      selectAllow: (selectInfo) => {
-        const hoje = new Date();
-        hoje.setHours(0, 0, 0, 0);
-        return new Date(selectInfo.start) >= hoje;
-      },
+			// Click em evento para remover
+			eventClick: (info) => {
+				if (readonly) return;
 
-      // Highlight de fim de semana
-      dayCellClassNames: (arg) => {
-        if (arg.date.getDay() === 0 || arg.date.getDay() === 6) {
-          return ["fc-day-weekend-custom"];
-        }
-        return [];
-      },
-    });
+				const index = info.event.extendedProps.index;
+				if (
+					confirm(`Deseja remover o Período ${index + 1} (${info.event.extendedProps.dias} dias)?`)
+				) {
+					if (onPeriodoRemovido) {
+						onPeriodoRemovido(index);
+					}
+				}
+			},
 
-    calendar.render();
+			// Tooltip ao passar mouse
+			eventDidMount: (info) => {
+				info.el.title = `Click para remover\n${info.event.title}`;
+				info.el.style.cursor = readonly ? 'default' : 'pointer';
+			},
 
-    return () => {
-      calendar?.destroy();
-    };
-  });
+			// Desabilitar datas passadas
+			selectAllow: (selectInfo) => {
+				const hoje = new SvelteDate();
+				hoje.setHours(0, 0, 0, 0);
+				return new Date(selectInfo.start) >= hoje;
+			},
+
+			// Highlight de fim de semana
+			dayCellClassNames: (arg) => {
+				if (arg.date.getDay() === 0 || arg.date.getDay() === 6) {
+					return ['fc-day-weekend-custom'];
+				}
+				return [];
+			}
+		});
+
+		calendar.render();
+
+		return () => {
+			calendar?.destroy();
+		};
+	});
 </script>
 
 <div class="calendario-ferias-wrapper">
-  <!-- Header com instruções -->
-  {#if !readonly}
-    <div class="alert alert-info mb-4 shadow-lg">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        class="stroke-current shrink-0 w-6 h-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-        ></path>
-      </svg>
-      <div class="text-sm">
-        <p class="font-bold">Como usar:</p>
-        <ul class="list-disc list-inside mt-1">
-          <li>Clique e arraste no calendário para selecionar um período de férias</li>
-          <li>Clique em um período colorido para removê-lo</li>
-          <li>
-            Você pode adicionar até {maxPeriodos} períodos (mínimo {minDiasPorPeriodo} dias cada)
-          </li>
-        </ul>
-      </div>
-    </div>
-  {/if}
+	<!-- Header com instruções -->
+	{#if !readonly}
+		<div class="alert alert-info mb-4 shadow-lg">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				class="h-6 w-6 shrink-0 stroke-current"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				></path>
+			</svg>
+			<div class="text-sm">
+				<p class="font-bold">Como usar:</p>
+				<ul class="mt-1 list-inside list-disc">
+					<li>Clique e arraste no calendário para selecionar um período de férias</li>
+					<li>Clique em um período colorido para removê-lo</li>
+					<li>
+						Você pode adicionar até {maxPeriodos} períodos (mínimo {minDiasPorPeriodo} dias cada)
+					</li>
+				</ul>
+			</div>
+		</div>
+	{/if}
 
-  <!-- Calendário -->
-  <div
-    bind:this={calendarEl}
-    class="calendario-ferias shadow-2xl rounded-2xl overflow-hidden border-2 border-primary/10"
-  ></div>
+	<!-- Calendário -->
+	<div
+		bind:this={calendarEl}
+		class="calendario-ferias border-primary/10 overflow-hidden rounded-2xl border-2 shadow-2xl"
+	></div>
 
-  <!-- Legenda de períodos -->
-  {#if periodosExistentes.length > 0}
-    <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
-      {#each periodosExistentes as periodo, index}
-        <div
-          class="stat bg-base-100 shadow-lg rounded-xl border-2 transition-all hover:scale-105"
-          style="border-color: {coresPeriodos[index % coresPeriodos.length].border}"
-        >
-          <div
-            class="stat-figure text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold"
-            style="background: {coresPeriodos[index % coresPeriodos.length].bg}"
-          >
-            {index + 1}
-          </div>
-          <div class="stat-title">Período {index + 1}</div>
-          <div class="stat-value text-2xl" style="color: {coresPeriodos[index % coresPeriodos.length].bg}">
-            {periodo.dias} dias
-          </div>
-          <div class="stat-desc">
-            {new Date(periodo.dataInicio).toLocaleDateString("pt-BR")} até
-            {new Date(periodo.dataFim).toLocaleDateString("pt-BR")}
-          </div>
-        </div>
-      {/each}
-    </div>
-  {/if}
+	<!-- Legenda de períodos -->
+	{#if periodosExistentes.length > 0}
+		<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+			{#each periodosExistentes as periodo, index (index)}
+				<div
+					class="stat bg-base-100 rounded-xl border-2 shadow-lg transition-all hover:scale-105"
+					style="border-color: {coresPeriodos[index % coresPeriodos.length].border}"
+				>
+					<div
+						class="stat-figure flex h-12 w-12 items-center justify-center rounded-full text-xl font-bold text-white"
+						style="background: {coresPeriodos[index % coresPeriodos.length].bg}"
+					>
+						{index + 1}
+					</div>
+					<div class="stat-title">Período {index + 1}</div>
+					<div
+						class="stat-value text-2xl"
+						style="color: {coresPeriodos[index % coresPeriodos.length].bg}"
+					>
+						{periodo.dias} dias
+					</div>
+					<div class="stat-desc">
+						{new Date(periodo.dataInicio).toLocaleDateString('pt-BR')} até
+						{new Date(periodo.dataFim).toLocaleDateString('pt-BR')}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <style>
-  /* Calendário Premium */
-  .calendario-ferias {
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  }
+	/* Calendário Premium */
+	.calendario-ferias {
+		font-family:
+			'Inter',
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			sans-serif;
+	}
 
-  /* Toolbar moderna */
-  :global(.fc .fc-toolbar) {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 1rem;
-    border-radius: 1rem 1rem 0 0;
-    color: white !important;
-  }
+	/* Toolbar moderna */
+	:global(.fc .fc-toolbar) {
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		padding: 1rem;
+		border-radius: 1rem 1rem 0 0;
+		color: white !important;
+	}
 
-  :global(.fc .fc-toolbar-title) {
-    color: white !important;
-    font-weight: 700;
-    font-size: 1.5rem;
-  }
+	:global(.fc .fc-toolbar-title) {
+		color: white !important;
+		font-weight: 700;
+		font-size: 1.5rem;
+	}
 
-  :global(.fc .fc-button) {
-    background: rgba(255, 255, 255, 0.2) !important;
-    border: 1px solid rgba(255, 255, 255, 0.3) !important;
-    color: white !important;
-    font-weight: 600;
-    text-transform: capitalize;
-    transition: all 0.3s ease;
-  }
+	:global(.fc .fc-button) {
+		background: rgba(255, 255, 255, 0.2) !important;
+		border: 1px solid rgba(255, 255, 255, 0.3) !important;
+		color: white !important;
+		font-weight: 600;
+		text-transform: capitalize;
+		transition: all 0.3s ease;
+	}
 
-  :global(.fc .fc-button:hover) {
-    background: rgba(255, 255, 255, 0.3) !important;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  }
+	:global(.fc .fc-button:hover) {
+		background: rgba(255, 255, 255, 0.3) !important;
+		transform: translateY(-2px);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+	}
 
-  :global(.fc .fc-button-active) {
-    background: rgba(255, 255, 255, 0.4) !important;
-  }
+	:global(.fc .fc-button-active) {
+		background: rgba(255, 255, 255, 0.4) !important;
+	}
 
-  /* Cabeçalho dos dias */
-  :global(.fc .fc-col-header-cell) {
-    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 0.05em;
-    padding: 0.75rem 0.5rem;
-    color: #495057;
-  }
+	/* Cabeçalho dos dias */
+	:global(.fc .fc-col-header-cell) {
+		background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
+		font-weight: 600;
+		text-transform: uppercase;
+		font-size: 0.75rem;
+		letter-spacing: 0.05em;
+		padding: 0.75rem 0.5rem;
+		color: #495057;
+	}
 
-  /* Células dos dias */
-  :global(.fc .fc-daygrid-day) {
-    transition: all 0.2s ease;
-  }
+	/* Células dos dias */
+	:global(.fc .fc-daygrid-day) {
+		transition: all 0.2s ease;
+	}
 
-  :global(.fc .fc-daygrid-day:hover) {
-    background: rgba(102, 126, 234, 0.05);
-  }
+	:global(.fc .fc-daygrid-day:hover) {
+		background: rgba(102, 126, 234, 0.05);
+	}
 
-  :global(.fc .fc-daygrid-day-number) {
-    padding: 0.5rem;
-    font-weight: 600;
-    color: #495057;
-  }
+	:global(.fc .fc-daygrid-day-number) {
+		padding: 0.5rem;
+		font-weight: 600;
+		color: #495057;
+	}
 
-  /* Fim de semana */
-  :global(.fc .fc-day-weekend-custom) {
-    background: rgba(255, 193, 7, 0.05);
-  }
+	/* Fim de semana */
+	:global(.fc .fc-day-weekend-custom) {
+		background: rgba(255, 193, 7, 0.05);
+	}
 
-  /* Hoje */
-  :global(.fc .fc-day-today) {
-    background: rgba(102, 126, 234, 0.1) !important;
-    border: 2px solid #667eea !important;
-  }
+	/* Hoje */
+	:global(.fc .fc-day-today) {
+		background: rgba(102, 126, 234, 0.1) !important;
+		border: 2px solid #667eea !important;
+	}
 
-  /* Eventos (períodos selecionados) */
-  :global(.fc .fc-event) {
-    border-radius: 0.5rem;
-    padding: 0.25rem 0.5rem;
-    font-weight: 600;
-    font-size: 0.875rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    transition: all 0.3s ease;
-    cursor: pointer;
-  }
+	/* Eventos (períodos selecionados) */
+	:global(.fc .fc-event) {
+		border-radius: 0.5rem;
+		padding: 0.25rem 0.5rem;
+		font-weight: 600;
+		font-size: 0.875rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
 
-  :global(.fc .fc-event:hover) {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
-  }
+	:global(.fc .fc-event:hover) {
+		transform: translateY(-2px);
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+	}
 
-  /* Seleção (arrastar) */
-  :global(.fc .fc-highlight) {
-    background: rgba(102, 126, 234, 0.3) !important;
-    border: 2px dashed #667eea;
-  }
+	/* Seleção (arrastar) */
+	:global(.fc .fc-highlight) {
+		background: rgba(102, 126, 234, 0.3) !important;
+		border: 2px dashed #667eea;
+	}
 
-  /* Datas desabilitadas (passado) */
-  :global(.fc .fc-day-past .fc-daygrid-day-number) {
-    opacity: 0.4;
-  }
+	/* Datas desabilitadas (passado) */
+	:global(.fc .fc-day-past .fc-daygrid-day-number) {
+		opacity: 0.4;
+	}
 
-  /* Remover bordas padrão */
-  :global(.fc .fc-scrollgrid) {
-    border: none !important;
-  }
+	/* Remover bordas padrão */
+	:global(.fc .fc-scrollgrid) {
+		border: none !important;
+	}
 
-  :global(.fc .fc-scrollgrid-section > td) {
-    border: none !important;
-  }
+	:global(.fc .fc-scrollgrid-section > td) {
+		border: none !important;
+	}
 
-  /* Grid moderno */
-  :global(.fc .fc-daygrid-day-frame) {
-    border: 1px solid #e9ecef;
-    min-height: 80px;
-  }
+	/* Grid moderno */
+	:global(.fc .fc-daygrid-day-frame) {
+		border: 1px solid #e9ecef;
+		min-height: 80px;
+	}
 
-  /* Responsivo */
-  @media (max-width: 768px) {
-    :global(.fc .fc-toolbar) {
-      flex-direction: column;
-      gap: 0.75rem;
-    }
+	/* Responsivo */
+	@media (max-width: 768px) {
+		:global(.fc .fc-toolbar) {
+			flex-direction: column;
+			gap: 0.75rem;
+		}
 
-    :global(.fc .fc-toolbar-title) {
-      font-size: 1.25rem;
-    }
+		:global(.fc .fc-toolbar-title) {
+			font-size: 1.25rem;
+		}
 
-    :global(.fc .fc-button) {
-      font-size: 0.75rem;
-      padding: 0.25rem 0.5rem;
-    }
-  }
+		:global(.fc .fc-button) {
+			font-size: 0.75rem;
+			padding: 0.25rem 0.5rem;
+		}
+	}
 </style>
-
-
diff --git a/apps/web/src/lib/components/ferias/DashboardFerias.svelte b/apps/web/src/lib/components/ferias/DashboardFerias.svelte
index b9f05c1..d158d90 100644
--- a/apps/web/src/lib/components/ferias/DashboardFerias.svelte
+++ b/apps/web/src/lib/components/ferias/DashboardFerias.svelte
@@ -1,443 +1,406 @@
 <script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { onMount } from "svelte";
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  interface Props {
-    funcionarioId: Id<"funcionarios">;
-  }
+	interface Props {
+		funcionarioId: Id<'funcionarios'>;
+	}
 
-  let { funcionarioId }: Props = $props();
+	let { funcionarioId }: Props = $props();
 
-  // Queries
-  const saldosQuery = useQuery(api.saldoFerias.listarSaldos, { funcionarioId });
-  const solicitacoesQuery = useQuery(api.ferias.listarMinhasSolicitacoes, {
-    funcionarioId,
-  });
+	// Queries
+	const saldosQuery = useQuery(api.saldoFerias.listarSaldos, { funcionarioId });
+	const solicitacoesQuery = useQuery(api.ferias.listarMinhasSolicitacoes, {
+		funcionarioId
+	});
 
-  const saldos = $derived(saldosQuery.data || []);
-  const solicitacoes = $derived(solicitacoesQuery.data || []);
+	const saldos = $derived(saldosQuery.data || []);
+	const solicitacoes = $derived(solicitacoesQuery.data || []);
 
-  // Estatísticas derivadas
-  const saldoAtual = $derived(
-    saldos.find((s) => s.anoReferencia === new Date().getFullYear()),
-  );
-  const totalSolicitacoes = $derived(solicitacoes.length);
-  const aprovadas = $derived(
-    solicitacoes.filter(
-      (s) => s.status === "aprovado" || s.status === "data_ajustada_aprovada",
-    ).length,
-  );
-  const pendentes = $derived(
-    solicitacoes.filter((s) => s.status === "aguardando_aprovacao").length,
-  );
-  const reprovadas = $derived(
-    solicitacoes.filter((s) => s.status === "reprovado").length,
-  );
+	// Estatísticas derivadas
+	const saldoAtual = $derived(saldos.find((s) => s.anoReferencia === new Date().getFullYear()));
+	const totalSolicitacoes = $derived(solicitacoes.length);
+	const aprovadas = $derived(
+		solicitacoes.filter((s) => s.status === 'aprovado' || s.status === 'data_ajustada_aprovada')
+			.length
+	);
+	const pendentes = $derived(
+		solicitacoes.filter((s) => s.status === 'aguardando_aprovacao').length
+	);
+	const reprovadas = $derived(solicitacoes.filter((s) => s.status === 'reprovado').length);
 
-  // Canvas para gráfico de pizza
-  let canvasSaldo = $state<HTMLCanvasElement>();
-  let canvasStatus = $state<HTMLCanvasElement>();
+	// Canvas para gráfico de pizza
+	let canvasSaldo = $state<HTMLCanvasElement>();
+	let canvasStatus = $state<HTMLCanvasElement>();
 
-  // Função para desenhar gráfico de pizza moderno
-  function desenharGraficoPizza(
-    canvas: HTMLCanvasElement,
-    dados: { label: string; valor: number; cor: string }[],
-  ) {
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+	// Função para desenhar gráfico de pizza moderno
+	function desenharGraficoPizza(
+		canvas: HTMLCanvasElement,
+		dados: { label: string; valor: number; cor: string }[]
+	) {
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
 
-    const width = canvas.width;
-    const height = canvas.height;
-    const centerX = width / 2;
-    const centerY = height / 2;
-    const radius = Math.min(width, height) / 2 - 20;
+		const width = canvas.width;
+		const height = canvas.height;
+		const centerX = width / 2;
+		const centerY = height / 2;
+		const radius = Math.min(width, height) / 2 - 20;
 
-    ctx.clearRect(0, 0, width, height);
+		ctx.clearRect(0, 0, width, height);
 
-    const total = dados.reduce((acc, d) => acc + d.valor, 0);
-    if (total === 0) return;
+		const total = dados.reduce((acc, d) => acc + d.valor, 0);
+		if (total === 0) return;
 
-    let startAngle = -Math.PI / 2;
+		let startAngle = -Math.PI / 2;
 
-    dados.forEach((item) => {
-      const sliceAngle = (2 * Math.PI * item.valor) / total;
+		dados.forEach((item) => {
+			const sliceAngle = (2 * Math.PI * item.valor) / total;
 
-      // Desenhar fatia com sombra
-      ctx.save();
-      ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
-      ctx.shadowBlur = 15;
-      ctx.shadowOffsetX = 5;
-      ctx.shadowOffsetY = 5;
+			// Desenhar fatia com sombra
+			ctx.save();
+			ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
+			ctx.shadowBlur = 15;
+			ctx.shadowOffsetX = 5;
+			ctx.shadowOffsetY = 5;
 
-      ctx.beginPath();
-      ctx.moveTo(centerX, centerY);
-      ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
-      ctx.closePath();
+			ctx.beginPath();
+			ctx.moveTo(centerX, centerY);
+			ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
+			ctx.closePath();
 
-      ctx.fillStyle = item.cor;
-      ctx.fill();
+			ctx.fillStyle = item.cor;
+			ctx.fill();
 
-      ctx.restore();
+			ctx.restore();
 
-      // Desenhar borda branca
-      ctx.strokeStyle = "#ffffff";
-      ctx.lineWidth = 3;
-      ctx.stroke();
+			// Desenhar borda branca
+			ctx.strokeStyle = '#ffffff';
+			ctx.lineWidth = 3;
+			ctx.stroke();
 
-      startAngle += sliceAngle;
-    });
+			startAngle += sliceAngle;
+		});
 
-    // Desenhar círculo branco no centro (efeito donut)
-    ctx.beginPath();
-    ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI);
-    ctx.fillStyle = "#ffffff";
-    ctx.fill();
-  }
+		// Desenhar círculo branco no centro (efeito donut)
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI);
+		ctx.fillStyle = '#ffffff';
+		ctx.fill();
+	}
 
-  // Atualizar gráficos quando dados mudarem
-  $effect(() => {
-    if (canvasSaldo && saldoAtual) {
-      desenharGraficoPizza(canvasSaldo, [
-        { label: "Usado", valor: saldoAtual.diasUsados, cor: "#ff6b6b" },
-        { label: "Pendente", valor: saldoAtual.diasPendentes, cor: "#ffa94d" },
-        {
-          label: "Disponível",
-          valor: saldoAtual.diasDisponiveis,
-          cor: "#51cf66",
-        },
-      ]);
-    }
+	// Atualizar gráficos quando dados mudarem
+	$effect(() => {
+		if (canvasSaldo && saldoAtual) {
+			desenharGraficoPizza(canvasSaldo, [
+				{ label: 'Usado', valor: saldoAtual.diasUsados, cor: '#ff6b6b' },
+				{ label: 'Pendente', valor: saldoAtual.diasPendentes, cor: '#ffa94d' },
+				{
+					label: 'Disponível',
+					valor: saldoAtual.diasDisponiveis,
+					cor: '#51cf66'
+				}
+			]);
+		}
 
-    if (canvasStatus && totalSolicitacoes > 0) {
-      desenharGraficoPizza(canvasStatus, [
-        { label: "Aprovadas", valor: aprovadas, cor: "#51cf66" },
-        { label: "Pendentes", valor: pendentes, cor: "#ffa94d" },
-        { label: "Reprovadas", valor: reprovadas, cor: "#ff6b6b" },
-      ]);
-    }
-  });
+		if (canvasStatus && totalSolicitacoes > 0) {
+			desenharGraficoPizza(canvasStatus, [
+				{ label: 'Aprovadas', valor: aprovadas, cor: '#51cf66' },
+				{ label: 'Pendentes', valor: pendentes, cor: '#ffa94d' },
+				{ label: 'Reprovadas', valor: reprovadas, cor: '#ff6b6b' }
+			]);
+		}
+	});
 </script>
 
 <div class="dashboard-ferias">
-  <!-- Header -->
-  <div class="mb-8">
-    <h1
-      class="text-4xl font-bold bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
-    >
-      📊 Dashboard de Férias
-    </h1>
-    <p class="text-base-content/70 mt-2">
-      Visualize seus saldos e histórico de solicitações
-    </p>
-  </div>
+	<!-- Header -->
+	<div class="mb-8">
+		<h1
+			class="from-primary to-secondary bg-linear-to-r bg-clip-text text-4xl font-bold text-transparent"
+		>
+			📊 Dashboard de Férias
+		</h1>
+		<p class="text-base-content/70 mt-2">Visualize seus saldos e histórico de solicitações</p>
+	</div>
 
-  {#if saldosQuery.isLoading || solicitacoesQuery.isLoading}
-    <!-- Loading Skeletons -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      {#each Array(4) as _}
-        <div class="skeleton h-32 rounded-2xl"></div>
-      {/each}
-    </div>
-  {:else}
-    <!-- Cards de Estatísticas -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      <!-- Card 1: Saldo Disponível -->
-      <div
-        class="stat bg-linear-to-br from-success/20 to-success/5 border-2 border-success/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
-      >
-        <div class="stat-figure text-success">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="inline-block w-10 h-10 stroke-current"
-          >
-            <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"
-            ></path>
-          </svg>
-        </div>
-        <div class="stat-title text-success font-semibold">Disponível</div>
-        <div class="stat-value text-success text-4xl">
-          {saldoAtual?.diasDisponiveis || 0}
-        </div>
-        <div class="stat-desc text-success/70">dias para usar</div>
-      </div>
+	{#if saldosQuery.isLoading || solicitacoesQuery.isLoading}
+		<!-- Loading Skeletons -->
+		<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+			{#each Array(4)}
+				<div class="skeleton h-32 rounded-2xl"></div>
+			{/each}
+		</div>
+	{:else}
+		<!-- Cards de Estatísticas -->
+		<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+			<!-- Card 1: Saldo Disponível -->
+			<div
+				class="stat from-success/20 to-success/5 border-success/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
+			>
+				<div class="stat-figure text-success">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="inline-block h-10 w-10 stroke-current"
+					>
+						<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"
+						></path>
+					</svg>
+				</div>
+				<div class="stat-title text-success font-semibold">Disponível</div>
+				<div class="stat-value text-success text-4xl">
+					{saldoAtual?.diasDisponiveis || 0}
+				</div>
+				<div class="stat-desc text-success/70">dias para usar</div>
+			</div>
 
-      <!-- Card 2: Dias Usados -->
-      <div
-        class="stat bg-linear-to-br from-error/20 to-error/5 border-2 border-error/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
-      >
-        <div class="stat-figure text-error">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="inline-block w-10 h-10 stroke-current"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            ></path>
-          </svg>
-        </div>
-        <div class="stat-title text-error font-semibold">Usado</div>
-        <div class="stat-value text-error text-4xl">
-          {saldoAtual?.diasUsados || 0}
-        </div>
-        <div class="stat-desc text-error/70">dias já gozados</div>
-      </div>
+			<!-- Card 2: Dias Usados -->
+			<div
+				class="stat from-error/20 to-error/5 border-error/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
+			>
+				<div class="stat-figure text-error">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="inline-block h-10 w-10 stroke-current"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						></path>
+					</svg>
+				</div>
+				<div class="stat-title text-error font-semibold">Usado</div>
+				<div class="stat-value text-error text-4xl">
+					{saldoAtual?.diasUsados || 0}
+				</div>
+				<div class="stat-desc text-error/70">dias já gozados</div>
+			</div>
 
-      <!-- Card 3: Pendentes -->
-      <div
-        class="stat bg-linear-to-br from-warning/20 to-warning/5 border-2 border-warning/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
-      >
-        <div class="stat-figure text-warning">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="inline-block w-10 h-10 stroke-current"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-        </div>
-        <div class="stat-title text-warning font-semibold">Pendentes</div>
-        <div class="stat-value text-warning text-4xl">
-          {saldoAtual?.diasPendentes || 0}
-        </div>
-        <div class="stat-desc text-warning/70">aguardando aprovação</div>
-      </div>
+			<!-- Card 3: Pendentes -->
+			<div
+				class="stat from-warning/20 to-warning/5 border-warning/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
+			>
+				<div class="stat-figure text-warning">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="inline-block h-10 w-10 stroke-current"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+				</div>
+				<div class="stat-title text-warning font-semibold">Pendentes</div>
+				<div class="stat-value text-warning text-4xl">
+					{saldoAtual?.diasPendentes || 0}
+				</div>
+				<div class="stat-desc text-warning/70">aguardando aprovação</div>
+			</div>
 
-      <!-- Card 4: Total de Direito -->
-      <div
-        class="stat bg-linear-to-br from-primary/20 to-primary/5 border-2 border-primary/30 shadow-2xl rounded-2xl hover:scale-105 transition-all duration-300"
-      >
-        <div class="stat-figure text-primary">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="inline-block w-10 h-10 stroke-current"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 10V3L4 14h7v7l9-11h-7z"
-            ></path>
-          </svg>
-        </div>
-        <div class="stat-title text-primary font-semibold">Total Direito</div>
-        <div class="stat-value text-primary text-4xl">
-          {saldoAtual?.diasDireito || 0}
-        </div>
-        <div class="stat-desc text-primary/70">dias no ano</div>
-      </div>
-    </div>
+			<!-- Card 4: Total de Direito -->
+			<div
+				class="stat from-primary/20 to-primary/5 border-primary/30 rounded-2xl border-2 bg-linear-to-br shadow-2xl transition-all duration-300 hover:scale-105"
+			>
+				<div class="stat-figure text-primary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="inline-block h-10 w-10 stroke-current"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 10V3L4 14h7v7l9-11h-7z"
+						></path>
+					</svg>
+				</div>
+				<div class="stat-title text-primary font-semibold">Total Direito</div>
+				<div class="stat-value text-primary text-4xl">
+					{saldoAtual?.diasDireito || 0}
+				</div>
+				<div class="stat-desc text-primary/70">dias no ano</div>
+			</div>
+		</div>
 
-    <!-- Gráficos -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-      <!-- Gráfico 1: Distribuição de Saldo -->
-      <div class="card bg-base-100 shadow-2xl border-2 border-base-300">
-        <div class="card-body">
-          <h2 class="card-title text-2xl mb-4">
-            🥧 Distribuição de Saldo
-            <div class="badge badge-primary badge-lg">
-              Ano {saldoAtual?.anoReferencia || new Date().getFullYear()}
-            </div>
-          </h2>
+		<!-- Gráficos -->
+		<div class="mb-8 grid grid-cols-1 gap-8 lg:grid-cols-2">
+			<!-- Gráfico 1: Distribuição de Saldo -->
+			<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4 text-2xl">
+						🥧 Distribuição de Saldo
+						<div class="badge badge-primary badge-lg">
+							Ano {saldoAtual?.anoReferencia || new Date().getFullYear()}
+						</div>
+					</h2>
 
-          {#if saldoAtual}
-            <div class="flex items-center justify-center">
-              <canvas
-                bind:this={canvasSaldo}
-                width="300"
-                height="300"
-                class="max-w-full"
-              ></canvas>
-            </div>
+					{#if saldoAtual}
+						<div class="flex items-center justify-center">
+							<canvas bind:this={canvasSaldo} width="300" height="300" class="max-w-full"></canvas>
+						</div>
 
-            <!-- Legenda -->
-            <div class="flex justify-center gap-4 mt-4 flex-wrap">
-              <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-[#51cf66]"></div>
-                <span class="text-sm font-semibold"
-                  >Disponível: {saldoAtual.diasDisponiveis} dias</span
-                >
-              </div>
-              <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-[#ffa94d]"></div>
-                <span class="text-sm font-semibold"
-                  >Pendente: {saldoAtual.diasPendentes} dias</span
-                >
-              </div>
-              <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-[#ff6b6b]"></div>
-                <span class="text-sm font-semibold"
-                  >Usado: {saldoAtual.diasUsados} dias</span
-                >
-              </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>Nenhum saldo disponível para o ano atual</span>
-            </div>
-          {/if}
-        </div>
-      </div>
+						<!-- Legenda -->
+						<div class="mt-4 flex flex-wrap justify-center gap-4">
+							<div class="flex items-center gap-2">
+								<div class="h-4 w-4 rounded-full bg-[#51cf66]"></div>
+								<span class="text-sm font-semibold"
+									>Disponível: {saldoAtual.diasDisponiveis} dias</span
+								>
+							</div>
+							<div class="flex items-center gap-2">
+								<div class="h-4 w-4 rounded-full bg-[#ffa94d]"></div>
+								<span class="text-sm font-semibold">Pendente: {saldoAtual.diasPendentes} dias</span>
+							</div>
+							<div class="flex items-center gap-2">
+								<div class="h-4 w-4 rounded-full bg-[#ff6b6b]"></div>
+								<span class="text-sm font-semibold">Usado: {saldoAtual.diasUsados} dias</span>
+							</div>
+						</div>
+					{:else}
+						<div class="alert alert-info">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								></path>
+							</svg>
+							<span>Nenhum saldo disponível para o ano atual</span>
+						</div>
+					{/if}
+				</div>
+			</div>
 
-      <!-- Gráfico 2: Status de Solicitações -->
-      <div class="card bg-base-100 shadow-2xl border-2 border-base-300">
-        <div class="card-body">
-          <h2 class="card-title text-2xl mb-4">
-            📋 Status de Solicitações
-            <div class="badge badge-secondary badge-lg">
-              Total: {totalSolicitacoes}
-            </div>
-          </h2>
+			<!-- Gráfico 2: Status de Solicitações -->
+			<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4 text-2xl">
+						📋 Status de Solicitações
+						<div class="badge badge-secondary badge-lg">
+							Total: {totalSolicitacoes}
+						</div>
+					</h2>
 
-          {#if totalSolicitacoes > 0}
-            <div class="flex items-center justify-center">
-              <canvas
-                bind:this={canvasStatus}
-                width="300"
-                height="300"
-                class="max-w-full"
-              ></canvas>
-            </div>
+					{#if totalSolicitacoes > 0}
+						<div class="flex items-center justify-center">
+							<canvas bind:this={canvasStatus} width="300" height="300" class="max-w-full"></canvas>
+						</div>
 
-            <!-- Legenda -->
-            <div class="flex justify-center gap-4 mt-4 flex-wrap">
-              <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-[#51cf66]"></div>
-                <span class="text-sm font-semibold">Aprovadas: {aprovadas}</span
-                >
-              </div>
-              <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-[#ffa94d]"></div>
-                <span class="text-sm font-semibold">Pendentes: {pendentes}</span
-                >
-              </div>
-              <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded-full bg-[#ff6b6b]"></div>
-                <span class="text-sm font-semibold"
-                  >Reprovadas: {reprovadas}</span
-                >
-              </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>Nenhuma solicitação de férias ainda</span>
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
+						<!-- Legenda -->
+						<div class="mt-4 flex flex-wrap justify-center gap-4">
+							<div class="flex items-center gap-2">
+								<div class="h-4 w-4 rounded-full bg-[#51cf66]"></div>
+								<span class="text-sm font-semibold">Aprovadas: {aprovadas}</span>
+							</div>
+							<div class="flex items-center gap-2">
+								<div class="h-4 w-4 rounded-full bg-[#ffa94d]"></div>
+								<span class="text-sm font-semibold">Pendentes: {pendentes}</span>
+							</div>
+							<div class="flex items-center gap-2">
+								<div class="h-4 w-4 rounded-full bg-[#ff6b6b]"></div>
+								<span class="text-sm font-semibold">Reprovadas: {reprovadas}</span>
+							</div>
+						</div>
+					{:else}
+						<div class="alert alert-info">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+								></path>
+							</svg>
+							<span>Nenhuma solicitação de férias ainda</span>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
 
-    <!-- Histórico de Saldos -->
-    {#if saldos.length > 0}
-      <div class="card bg-base-100 shadow-2xl border-2 border-base-300">
-        <div class="card-body">
-          <h2 class="card-title text-2xl mb-4">📅 Histórico de Saldos</h2>
+		<!-- Histórico de Saldos -->
+		{#if saldos.length > 0}
+			<div class="card bg-base-100 border-base-300 border-2 shadow-2xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4 text-2xl">📅 Histórico de Saldos</h2>
 
-          <div class="overflow-x-auto">
-            <table class="table table-zebra">
-              <thead>
-                <tr>
-                  <th>Ano</th>
-                  <th>Direito</th>
-                  <th>Usado</th>
-                  <th>Pendente</th>
-                  <th>Disponível</th>
-                  <th>Status</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each saldos as saldo}
-                  <tr>
-                    <td class="font-bold">{saldo.anoReferencia}</td>
-                    <td>{saldo.diasDireito} dias</td>
-                    <td
-                      ><span class="badge badge-error">{saldo.diasUsados}</span
-                      ></td
-                    >
-                    <td
-                      ><span class="badge badge-warning"
-                        >{saldo.diasPendentes}</span
-                      ></td
-                    >
-                    <td
-                      ><span class="badge badge-success"
-                        >{saldo.diasDisponiveis}</span
-                      ></td
-                    >
-                    <td>
-                      {#if saldo.status === "ativo"}
-                        <span class="badge badge-success">Ativo</span>
-                      {:else if saldo.status === "vencido"}
-                        <span class="badge badge-error">Vencido</span>
-                      {:else}
-                        <span class="badge badge-neutral">Concluído</span>
-                      {/if}
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    {/if}
-  {/if}
+					<div class="overflow-x-auto">
+						<table class="table-zebra table">
+							<thead>
+								<tr>
+									<th>Ano</th>
+									<th>Direito</th>
+									<th>Usado</th>
+									<th>Pendente</th>
+									<th>Disponível</th>
+									<th>Status</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each saldos as saldo (saldo._id)}
+									<tr>
+										<td class="font-bold">{saldo.anoReferencia}</td>
+										<td>{saldo.diasDireito} dias</td>
+										<td><span class="badge badge-error">{saldo.diasUsados}</span></td>
+										<td><span class="badge badge-warning">{saldo.diasPendentes}</span></td>
+										<td><span class="badge badge-success">{saldo.diasDisponiveis}</span></td>
+										<td>
+											{#if saldo.status === 'ativo'}
+												<span class="badge badge-success">Ativo</span>
+											{:else if saldo.status === 'vencido'}
+												<span class="badge badge-error">Vencido</span>
+											{:else}
+												<span class="badge badge-neutral">Concluído</span>
+											{/if}
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		{/if}
+	{/if}
 </div>
 
 <style>
-  .bg-clip-text {
-    -webkit-background-clip: text;
-    background-clip: text;
-  }
+	.bg-clip-text {
+		-webkit-background-clip: text;
+		background-clip: text;
+	}
 
-  canvas {
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: crisp-edges;
-  }
+	canvas {
+		image-rendering: -webkit-optimize-contrast;
+		image-rendering: crisp-edges;
+	}
 </style>
diff --git a/apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte b/apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte
index 7fb1a4f..30e77ec 100644
--- a/apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte
+++ b/apps/web/src/lib/components/ferias/WizardSolicitacaoFerias.svelte
@@ -1,729 +1,695 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import CalendarioFerias from "./CalendarioFerias.svelte";
-  import { toast } from "svelte-sonner";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import CalendarioFerias from './CalendarioFerias.svelte';
+	import { toast } from 'svelte-sonner';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  interface Props {
-    funcionarioId: Id<"funcionarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		funcionarioId: Id<'funcionarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
+	let { funcionarioId, onSucesso, onCancelar }: Props = $props();
 
-  // Cliente Convex
-  const client = useConvexClient();
+	// Cliente Convex
+	const client = useConvexClient();
 
-  // Estado do wizard
-  let passoAtual = $state(1);
-  const totalPassos = 3;
+	// Estado do wizard
+	let passoAtual = $state(1);
+	const totalPassos = 3;
 
-  // Dados da solicitação
-  let anoSelecionado = $state(new Date().getFullYear());
-  let periodosFerias: Array<{
-    dataInicio: string;
-    dataFim: string;
-    dias: number;
-  }> = $state([]);
-  let observacao = $state("");
-  let processando = $state(false);
+	// Dados da solicitação
+	let anoSelecionado = $state(new Date().getFullYear());
+	let periodosFerias: Array<{
+		dataInicio: string;
+		dataFim: string;
+		dias: number;
+	}> = $state([]);
+	let observacao = $state('');
+	let processando = $state(false);
 
-  // Queries
-  const saldoQuery = $derived(
-    useQuery(api.saldoFerias.obterSaldo, {
-      funcionarioId,
-      anoReferencia: anoSelecionado,
-    }),
-  );
+	// Queries
+	const saldoQuery = $derived(
+		useQuery(api.saldoFerias.obterSaldo, {
+			funcionarioId,
+			anoReferencia: anoSelecionado
+		})
+	);
 
-  const validacaoQuery = $derived(
-    periodosFerias.length > 0
-      ? useQuery(api.saldoFerias.validarSolicitacao, {
-          funcionarioId,
-          anoReferencia: anoSelecionado,
-          periodos: periodosFerias.map((p) => ({
-            dataInicio: p.dataInicio,
-            dataFim: p.dataFim,
-          })),
-        })
-      : { data: null },
-  );
+	const validacaoQuery = $derived(
+		periodosFerias.length > 0
+			? useQuery(api.saldoFerias.validarSolicitacao, {
+					funcionarioId,
+					anoReferencia: anoSelecionado,
+					periodos: periodosFerias.map((p) => ({
+						dataInicio: p.dataInicio,
+						dataFim: p.dataFim
+					}))
+				})
+			: { data: null }
+	);
 
-  // Derivados
-  const saldo = $derived(saldoQuery.data);
-  const validacao = $derived(validacaoQuery.data);
-  const totalDiasSelecionados = $derived(
-    periodosFerias.reduce((acc, p) => acc + p.dias, 0),
-  );
+	// Derivados
+	const saldo = $derived(saldoQuery.data);
+	const validacao = $derived(validacaoQuery.data);
+	const totalDiasSelecionados = $derived(periodosFerias.reduce((acc, p) => acc + p.dias, 0));
 
-  // Anos disponíveis (últimos 3 anos + próximo ano)
-  const anosDisponiveis = $derived.by(() => {
-    const anoAtual = new Date().getFullYear();
-    return [anoAtual - 1, anoAtual, anoAtual + 1];
-  });
+	// Anos disponíveis (últimos 3 anos + próximo ano)
+	const anosDisponiveis = $derived.by(() => {
+		const anoAtual = new Date().getFullYear();
+		return [anoAtual - 1, anoAtual, anoAtual + 1];
+	});
 
-  // Configurações do calendário (baseado no saldo/regime)
-  const maxPeriodos = $derived(
-    saldo?.regimeTrabalho?.includes("Servidor") ? 2 : 3,
-  );
-  const minDiasPorPeriodo = $derived(
-    saldo?.regimeTrabalho?.includes("Servidor") ? 10 : 5,
-  );
+	// Configurações do calendário (baseado no saldo/regime)
+	const maxPeriodos = $derived(saldo?.regimeTrabalho?.includes('Servidor') ? 2 : 3);
+	const minDiasPorPeriodo = $derived(saldo?.regimeTrabalho?.includes('Servidor') ? 10 : 5);
 
-  // Funções
-  function proximoPasso() {
-    if (passoAtual === 1 && !saldo) {
-      toast.error("Selecione um ano com saldo disponível");
-      return;
-    }
+	// Funções
+	function proximoPasso() {
+		if (passoAtual === 1 && !saldo) {
+			toast.error('Selecione um ano com saldo disponível');
+			return;
+		}
 
-    if (passoAtual === 2 && periodosFerias.length === 0) {
-      toast.error("Selecione pelo menos 1 período de férias");
-      return;
-    }
+		if (passoAtual === 2 && periodosFerias.length === 0) {
+			toast.error('Selecione pelo menos 1 período de férias');
+			return;
+		}
 
-    if (passoAtual === 2 && validacao && !validacao.valido) {
-      toast.error("Corrija os erros antes de continuar");
-      return;
-    }
+		if (passoAtual === 2 && validacao && !validacao.valido) {
+			toast.error('Corrija os erros antes de continuar');
+			return;
+		}
 
-    if (passoAtual < totalPassos) {
-      passoAtual++;
-    }
-  }
+		if (passoAtual < totalPassos) {
+			passoAtual++;
+		}
+	}
 
-  function passoAnterior() {
-    if (passoAtual > 1) {
-      passoAtual--;
-    }
-  }
+	function passoAnterior() {
+		if (passoAtual > 1) {
+			passoAtual--;
+		}
+	}
 
-  async function enviarSolicitacao() {
-    if (!validacao || !validacao.valido) {
-      toast.error("Valide os períodos antes de enviar");
-      return;
-    }
+	async function enviarSolicitacao() {
+		if (!validacao || !validacao.valido) {
+			toast.error('Valide os períodos antes de enviar');
+			return;
+		}
 
-    processando = true;
+		processando = true;
 
-    try {
-      await client.mutation(api.ferias.criarSolicitacao, {
-        funcionarioId,
-        anoReferencia: anoSelecionado,
-        periodos: periodosFerias.map((p) => ({
-          dataInicio: p.dataInicio,
-          dataFim: p.dataFim,
-          diasCorridos: p.dias,
-        })),
-        observacao: observacao || undefined,
-      });
+		try {
+			await client.mutation(api.ferias.criarSolicitacao, {
+				funcionarioId,
+				anoReferencia: anoSelecionado,
+				periodos: periodosFerias.map((p) => ({
+					dataInicio: p.dataInicio,
+					dataFim: p.dataFim,
+					diasCorridos: p.dias
+				})),
+				observacao: observacao || undefined
+			});
 
-      toast.success("Solicitação de férias enviada com sucesso! 🎉");
-      if (onSucesso) onSucesso();
-    } catch (error: any) {
-      toast.error(error.message || "Erro ao enviar solicitação");
-    } finally {
-      processando = false;
-    }
-  }
+			toast.success('Solicitação de férias enviada com sucesso! 🎉');
+			if (onSucesso) onSucesso();
+		} catch (error: unknown) {
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			toast.error(errorMessage || 'Erro ao enviar solicitação');
+		} finally {
+			processando = false;
+		}
+	}
 
-  function handlePeriodoAdicionado(periodo: {
-    dataInicio: string;
-    dataFim: string;
-    dias: number;
-  }) {
-    periodosFerias = [...periodosFerias, periodo];
-    toast.success(`Período de ${periodo.dias} dias adicionado! ✅`);
-  }
+	function handlePeriodoAdicionado(periodo: { dataInicio: string; dataFim: string; dias: number }) {
+		periodosFerias = [...periodosFerias, periodo];
+		toast.success(`Período de ${periodo.dias} dias adicionado! ✅`);
+	}
 
-  function handlePeriodoRemovido(index: number) {
-    const removido = periodosFerias[index];
-    periodosFerias = periodosFerias.filter((_, i) => i !== index);
-    toast.info(`Período de ${removido.dias} dias removido`);
-  }
+	function handlePeriodoRemovido(index: number) {
+		const removido = periodosFerias[index];
+		periodosFerias = periodosFerias.filter((_, i) => i !== index);
+		toast.info(`Período de ${removido.dias} dias removido`);
+	}
 </script>
 
 <div class="wizard-ferias-container">
-  <!-- Progress Bar -->
-  <div class="mb-8">
-    <div class="flex justify-between items-center">
-      {#each Array(totalPassos) as _, i}
-        <div class="flex items-center flex-1">
-          <!-- Círculo do passo -->
-          <div
-            class="relative flex items-center justify-center w-12 h-12 rounded-full font-bold transition-all duration-300"
-            class:bg-primary={passoAtual > i + 1}
-            class:text-white={passoAtual > i + 1}
-            class:border-4={passoAtual === i + 1}
-            class:border-primary={passoAtual === i + 1}
-            class:bg-base-200={passoAtual < i + 1}
-            class:text-base-content={passoAtual < i + 1}
-            style:box-shadow={passoAtual === i + 1
-              ? "0 0 20px rgba(102, 126, 234, 0.5)"
-              : "none"}
-          >
-            {#if passoAtual > i + 1}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="3"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-            {:else}
-              {i + 1}
-            {/if}
-          </div>
+	<!-- Progress Bar -->
+	<div class="mb-8">
+		<div class="flex items-center justify-between">
+			{#each Array(totalPassos) as _, i (i)}
+				<div class="flex flex-1 items-center">
+					<!-- Círculo do passo -->
+					<div
+						class="relative flex h-12 w-12 items-center justify-center rounded-full font-bold transition-all duration-300"
+						class:bg-primary={passoAtual > i + 1}
+						class:text-white={passoAtual > i + 1}
+						class:border-4={passoAtual === i + 1}
+						class:border-primary={passoAtual === i + 1}
+						class:bg-base-200={passoAtual < i + 1}
+						class:text-base-content={passoAtual < i + 1}
+						style:box-shadow={passoAtual === i + 1 ? '0 0 20px rgba(102, 126, 234, 0.5)' : 'none'}
+					>
+						{#if passoAtual > i + 1}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="3"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+						{:else}
+							{i + 1}
+						{/if}
+					</div>
 
-          <!-- Linha conectora -->
-          {#if i < totalPassos - 1}
-            <div
-              class="flex-1 h-1 mx-2 transition-all duration-300"
-              class:bg-primary={passoAtual > i + 1}
-              class:bg-base-300={passoAtual <= i + 1}
-            ></div>
-          {/if}
-        </div>
-      {/each}
-    </div>
+					<!-- Linha conectora -->
+					{#if i < totalPassos - 1}
+						<div
+							class="mx-2 h-1 flex-1 transition-all duration-300"
+							class:bg-primary={passoAtual > i + 1}
+							class:bg-base-300={passoAtual <= i + 1}
+						></div>
+					{/if}
+				</div>
+			{/each}
+		</div>
 
-    <!-- Labels dos passos -->
-    <div class="flex justify-between mt-4 px-1">
-      <div class="text-center flex-1">
-        <p class="text-sm font-semibold" class:text-primary={passoAtual === 1}>
-          Ano & Saldo
-        </p>
-      </div>
-      <div class="text-center flex-1">
-        <p class="text-sm font-semibold" class:text-primary={passoAtual === 2}>
-          Períodos
-        </p>
-      </div>
-      <div class="text-center flex-1">
-        <p class="text-sm font-semibold" class:text-primary={passoAtual === 3}>
-          Confirmação
-        </p>
-      </div>
-    </div>
-  </div>
+		<!-- Labels dos passos -->
+		<div class="mt-4 flex justify-between px-1">
+			<div class="flex-1 text-center">
+				<p class="text-sm font-semibold" class:text-primary={passoAtual === 1}>Ano & Saldo</p>
+			</div>
+			<div class="flex-1 text-center">
+				<p class="text-sm font-semibold" class:text-primary={passoAtual === 2}>Períodos</p>
+			</div>
+			<div class="flex-1 text-center">
+				<p class="text-sm font-semibold" class:text-primary={passoAtual === 3}>Confirmação</p>
+			</div>
+		</div>
+	</div>
 
-  <!-- Conteúdo dos Passos -->
-  <div class="wizard-content">
-    <!-- PASSO 1: Ano & Saldo -->
-    {#if passoAtual === 1}
-      <div class="passo-content animate-fadeIn">
-        <h2
-          class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
-        >
-          Escolha o Ano de Referência
-        </h2>
+	<!-- Conteúdo dos Passos -->
+	<div class="wizard-content">
+		<!-- PASSO 1: Ano & Saldo -->
+		{#if passoAtual === 1}
+			<div class="passo-content animate-fadeIn">
+				<h2
+					class="from-primary to-secondary mb-6 bg-linear-to-r bg-clip-text text-center text-3xl font-bold text-transparent"
+				>
+					Escolha o Ano de Referência
+				</h2>
 
-        <!-- Seletor de Ano -->
-        <div class="grid grid-cols-3 gap-4 mb-8">
-          {#each anosDisponiveis as ano}
-            <button
-              type="button"
-              class="btn btn-lg transition-all duration-300 hover:scale-105"
-              class:btn-primary={anoSelecionado === ano}
-              class:btn-outline={anoSelecionado !== ano}
-              onclick={() => (anoSelecionado = ano)}
-            >
-              {ano}
-            </button>
-          {/each}
-        </div>
+				<!-- Seletor de Ano -->
+				<div class="mb-8 grid grid-cols-3 gap-4">
+					{#each anosDisponiveis as ano (ano)}
+						<button
+							type="button"
+							class="btn btn-lg transition-all duration-300 hover:scale-105"
+							class:btn-primary={anoSelecionado === ano}
+							class:btn-outline={anoSelecionado !== ano}
+							onclick={() => (anoSelecionado = ano)}
+						>
+							{ano}
+						</button>
+					{/each}
+				</div>
 
-        <!-- Card de Saldo -->
-        {#if saldoQuery.isLoading}
-          <div class="skeleton h-64 w-full rounded-2xl"></div>
-        {:else if saldo}
-          <div
-            class="card bg-linear-to-br from-primary/10 to-secondary/10 shadow-2xl border-2 border-primary/20"
-          >
-            <div class="card-body">
-              <h3 class="card-title text-2xl mb-4">
-                📊 Saldo de Férias {anoSelecionado}
-              </h3>
+				<!-- Card de Saldo -->
+				{#if saldoQuery.isLoading}
+					<div class="skeleton h-64 w-full rounded-2xl"></div>
+				{:else if saldo}
+					<div
+						class="card from-primary/10 to-secondary/10 border-primary/20 border-2 bg-linear-to-br shadow-2xl"
+					>
+						<div class="card-body">
+							<h3 class="card-title mb-4 text-2xl">
+								📊 Saldo de Férias {anoSelecionado}
+							</h3>
 
-              <div
-                class="stats stats-vertical lg:stats-horizontal shadow-lg w-full"
-              >
-                <div class="stat">
-                  <div class="stat-figure text-primary">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      class="inline-block w-8 h-8 stroke-current"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M13 10V3L4 14h7v7l9-11h-7z"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div class="stat-title">Total Direito</div>
-                  <div class="stat-value text-primary">{saldo.diasDireito}</div>
-                  <div class="stat-desc">dias no ano</div>
-                </div>
+							<div class="stats stats-vertical lg:stats-horizontal w-full shadow-lg">
+								<div class="stat">
+									<div class="stat-figure text-primary">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											class="inline-block h-8 w-8 stroke-current"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M13 10V3L4 14h7v7l9-11h-7z"
+											></path>
+										</svg>
+									</div>
+									<div class="stat-title">Total Direito</div>
+									<div class="stat-value text-primary">{saldo.diasDireito}</div>
+									<div class="stat-desc">dias no ano</div>
+								</div>
 
-                <div class="stat">
-                  <div class="stat-figure text-success">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      class="inline-block w-8 h-8 stroke-current"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M5 13l4 4L19 7"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div class="stat-title">Disponível</div>
-                  <div class="stat-value text-success">
-                    {saldo.diasDisponiveis}
-                  </div>
-                  <div class="stat-desc">para usar</div>
-                </div>
+								<div class="stat">
+									<div class="stat-figure text-success">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											class="inline-block h-8 w-8 stroke-current"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M5 13l4 4L19 7"
+											></path>
+										</svg>
+									</div>
+									<div class="stat-title">Disponível</div>
+									<div class="stat-value text-success">
+										{saldo.diasDisponiveis}
+									</div>
+									<div class="stat-desc">para usar</div>
+								</div>
 
-                <div class="stat">
-                  <div class="stat-figure text-warning">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      class="inline-block w-8 h-8 stroke-current"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div class="stat-title">Usado</div>
-                  <div class="stat-value text-warning">{saldo.diasUsados}</div>
-                  <div class="stat-desc">até agora</div>
-                </div>
-              </div>
+								<div class="stat">
+									<div class="stat-figure text-warning">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											class="inline-block h-8 w-8 stroke-current"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+											></path>
+										</svg>
+									</div>
+									<div class="stat-title">Usado</div>
+									<div class="stat-value text-warning">{saldo.diasUsados}</div>
+									<div class="stat-desc">até agora</div>
+								</div>
+							</div>
 
-              <!-- Informações do Regime -->
-              <div class="alert alert-info mt-4">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  class="stroke-current shrink-0 w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <div>
-                  <h4 class="font-bold">{saldo.regimeTrabalho}</h4>
-                  <p class="text-sm">
-                    Período aquisitivo: {new Date(
-                      saldo.dataInicio,
-                    ).toLocaleDateString("pt-BR")}
-                    a {new Date(saldo.dataFim).toLocaleDateString("pt-BR")}
-                  </p>
-                </div>
-              </div>
+							<!-- Informações do Regime -->
+							<div class="alert alert-info mt-4">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									class="h-6 w-6 shrink-0 stroke-current"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									></path>
+								</svg>
+								<div>
+									<h4 class="font-bold">{saldo.regimeTrabalho}</h4>
+									<p class="text-sm">
+										Período aquisitivo: {new Date(saldo.dataInicio).toLocaleDateString('pt-BR')}
+										a {new Date(saldo.dataFim).toLocaleDateString('pt-BR')}
+									</p>
+								</div>
+							</div>
 
-              {#if saldo.diasDisponiveis === 0}
-                <div class="alert alert-warning mt-4">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="stroke-current shrink-0 h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                    />
-                  </svg>
-                  <span>Você não tem saldo disponível para este ano.</span>
-                </div>
-              {/if}
-            </div>
-          </div>
-        {:else}
-          <div class="alert alert-warning">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="stroke-current shrink-0 h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-            <span>Nenhum saldo encontrado para este ano.</span>
-          </div>
-        {/if}
-      </div>
-    {/if}
+							{#if saldo.diasDisponiveis === 0}
+								<div class="alert alert-warning mt-4">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-6 w-6 shrink-0 stroke-current"
+										fill="none"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+										/>
+									</svg>
+									<span>Você não tem saldo disponível para este ano.</span>
+								</div>
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="alert alert-warning">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6 shrink-0 stroke-current"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+							/>
+						</svg>
+						<span>Nenhum saldo encontrado para este ano.</span>
+					</div>
+				{/if}
+			</div>
+		{/if}
 
-    <!-- PASSO 2: Seleção de Períodos -->
-    {#if passoAtual === 2}
-      <div class="passo-content animate-fadeIn">
-        <h2
-          class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
-        >
-          Selecione os Períodos de Férias
-        </h2>
+		<!-- PASSO 2: Seleção de Períodos -->
+		{#if passoAtual === 2}
+			<div class="passo-content animate-fadeIn">
+				<h2
+					class="from-primary to-secondary mb-6 bg-linear-to-r bg-clip-text text-center text-3xl font-bold text-transparent"
+				>
+					Selecione os Períodos de Férias
+				</h2>
 
-        <!-- Resumo rápido -->
-        <div class="alert bg-base-200 mb-6">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="stroke-info shrink-0 w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <div>
-            <p>
-              <strong>Saldo disponível:</strong>
-              {saldo?.diasDisponiveis || 0} dias |
-              <strong>Selecionados:</strong>
-              {totalDiasSelecionados} dias | <strong>Restante:</strong>
-              {(saldo?.diasDisponiveis || 0) - totalDiasSelecionados} dias
-            </p>
-          </div>
-        </div>
+				<!-- Resumo rápido -->
+				<div class="alert bg-base-200 mb-6">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="stroke-info h-6 w-6 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+					<div>
+						<p>
+							<strong>Saldo disponível:</strong>
+							{saldo?.diasDisponiveis || 0} dias |
+							<strong>Selecionados:</strong>
+							{totalDiasSelecionados} dias | <strong>Restante:</strong>
+							{(saldo?.diasDisponiveis || 0) - totalDiasSelecionados} dias
+						</p>
+					</div>
+				</div>
 
-        <!-- Calendário -->
-        <CalendarioFerias
-          periodosExistentes={periodosFerias}
-          onPeriodoAdicionado={handlePeriodoAdicionado}
-          onPeriodoRemovido={handlePeriodoRemovido}
-          {maxPeriodos}
-          {minDiasPorPeriodo}
-          modoVisualizacao="month"
-        ></CalendarioFerias>
+				<!-- Calendário -->
+				<CalendarioFerias
+					periodosExistentes={periodosFerias}
+					onPeriodoAdicionado={handlePeriodoAdicionado}
+					onPeriodoRemovido={handlePeriodoRemovido}
+					{maxPeriodos}
+					{minDiasPorPeriodo}
+					modoVisualizacao="month"
+				></CalendarioFerias>
 
-        <!-- Validações -->
-        {#if validacao && periodosFerias.length > 0}
-          <div class="mt-6">
-            {#if validacao.valido}
-              <div class="alert alert-success">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="stroke-current shrink-0 h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                <span
-                  >✅ Períodos válidos! Total: {validacao.totalDias} dias</span
-                >
-              </div>
-            {:else}
-              <div class="alert alert-error">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="stroke-current shrink-0 h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                <div>
-                  <p class="font-bold">Erros encontrados:</p>
-                  <ul class="list-disc list-inside">
-                    {#each validacao.erros as erro}
-                      <li>{erro}</li>
-                    {/each}
-                  </ul>
-                </div>
-              </div>
-            {/if}
+				<!-- Validações -->
+				{#if validacao && periodosFerias.length > 0}
+					<div class="mt-6">
+						{#if validacao.valido}
+							<div class="alert alert-success">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-6 w-6 shrink-0 stroke-current"
+									fill="none"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+								<span>✅ Períodos válidos! Total: {validacao.totalDias} dias</span>
+							</div>
+						{:else}
+							<div class="alert alert-error">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-6 w-6 shrink-0 stroke-current"
+									fill="none"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+								<div>
+									<p class="font-bold">Erros encontrados:</p>
+									<ul class="list-inside list-disc">
+										{#each validacao.erros as erro (erro)}
+											<li>{erro}</li>
+										{/each}
+									</ul>
+								</div>
+							</div>
+						{/if}
 
-            {#if validacao.avisos.length > 0}
-              <div class="alert alert-warning mt-4">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="stroke-current shrink-0 h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                  />
-                </svg>
-                <div>
-                  <p class="font-bold">Avisos:</p>
-                  <ul class="list-disc list-inside">
-                    {#each validacao.avisos as aviso}
-                      <li>{aviso}</li>
-                    {/each}
-                  </ul>
-                </div>
-              </div>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    {/if}
+						{#if validacao.avisos.length > 0}
+							<div class="alert alert-warning mt-4">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-6 w-6 shrink-0 stroke-current"
+									fill="none"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+									/>
+								</svg>
+								<div>
+									<p class="font-bold">Avisos:</p>
+									<ul class="list-inside list-disc">
+										{#each validacao.avisos as aviso (aviso)}
+											<li>{aviso}</li>
+										{/each}
+									</ul>
+								</div>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/if}
 
-    <!-- PASSO 3: Confirmação -->
-    {#if passoAtual === 3}
-      <div class="passo-content animate-fadeIn">
-        <h2
-          class="text-3xl font-bold mb-6 text-center bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent"
-        >
-          Confirme sua Solicitação
-        </h2>
+		<!-- PASSO 3: Confirmação -->
+		{#if passoAtual === 3}
+			<div class="passo-content animate-fadeIn">
+				<h2
+					class="from-primary to-secondary mb-6 bg-linear-to-r bg-clip-text text-center text-3xl font-bold text-transparent"
+				>
+					Confirme sua Solicitação
+				</h2>
 
-        <!-- Resumo Final -->
-        <div class="card bg-base-100 shadow-2xl">
-          <div class="card-body">
-            <h3 class="card-title text-xl mb-4">📝 Resumo da Solicitação</h3>
+				<!-- Resumo Final -->
+				<div class="card bg-base-100 shadow-2xl">
+					<div class="card-body">
+						<h3 class="card-title mb-4 text-xl">📝 Resumo da Solicitação</h3>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-              <div class="stat bg-base-200 rounded-lg">
-                <div class="stat-title">Ano de Referência</div>
-                <div class="stat-value text-primary">{anoSelecionado}</div>
-              </div>
+						<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div class="stat bg-base-200 rounded-lg">
+								<div class="stat-title">Ano de Referência</div>
+								<div class="stat-value text-primary">{anoSelecionado}</div>
+							</div>
 
-              <div class="stat bg-base-200 rounded-lg">
-                <div class="stat-title">Total de Dias</div>
-                <div class="stat-value text-success">
-                  {totalDiasSelecionados}
-                </div>
-              </div>
-            </div>
+							<div class="stat bg-base-200 rounded-lg">
+								<div class="stat-title">Total de Dias</div>
+								<div class="stat-value text-success">
+									{totalDiasSelecionados}
+								</div>
+							</div>
+						</div>
 
-            <h4 class="font-bold text-lg mb-2">Períodos Selecionados:</h4>
-            <div class="space-y-3">
-              {#each periodosFerias as periodo, index}
-                <div class="flex items-center gap-4 p-4 bg-base-200 rounded-lg">
-                  <div
-                    class="badge badge-lg badge-primary font-bold text-white w-12 h-12 flex items-center justify-center"
-                  >
-                    {index + 1}
-                  </div>
-                  <div class="flex-1">
-                    <p class="font-semibold">
-                      {new Date(periodo.dataInicio).toLocaleDateString(
-                        "pt-BR",
-                        {
-                          day: "2-digit",
-                          month: "long",
-                          year: "numeric",
-                        },
-                      )}
-                      até
-                      {new Date(periodo.dataFim).toLocaleDateString("pt-BR", {
-                        day: "2-digit",
-                        month: "long",
-                        year: "numeric",
-                      })}
-                    </p>
-                    <p class="text-sm text-base-content/70">
-                      {periodo.dias} dias corridos
-                    </p>
-                  </div>
-                </div>
-              {/each}
-            </div>
+						<h4 class="mb-2 text-lg font-bold">Períodos Selecionados:</h4>
+						<div class="space-y-3">
+							{#each periodosFerias as periodo, index (index)}
+								<div class="bg-base-200 flex items-center gap-4 rounded-lg p-4">
+									<div
+										class="badge badge-lg badge-primary flex h-12 w-12 items-center justify-center font-bold text-white"
+									>
+										{index + 1}
+									</div>
+									<div class="flex-1">
+										<p class="font-semibold">
+											{new Date(periodo.dataInicio).toLocaleDateString('pt-BR', {
+												day: '2-digit',
+												month: 'long',
+												year: 'numeric'
+											})}
+											até
+											{new Date(periodo.dataFim).toLocaleDateString('pt-BR', {
+												day: '2-digit',
+												month: 'long',
+												year: 'numeric'
+											})}
+										</p>
+										<p class="text-base-content/70 text-sm">
+											{periodo.dias} dias corridos
+										</p>
+									</div>
+								</div>
+							{/each}
+						</div>
 
-            <!-- Campo de Observação -->
-            <div class="form-control mt-6">
-              <label for="observacao" class="label">
-                <span class="label-text font-semibold"
-                  >Observações (opcional)</span
-                >
-              </label>
-              <textarea
-                id="observacao"
-                class="textarea textarea-bordered h-24"
-                placeholder="Adicione alguma observação ou justificativa..."
-                bind:value={observacao}
-              ></textarea>
-            </div>
-          </div>
-        </div>
-      </div>
-    {/if}
-  </div>
+						<!-- Campo de Observação -->
+						<div class="form-control mt-6">
+							<label for="observacao" class="label">
+								<span class="label-text font-semibold">Observações (opcional)</span>
+							</label>
+							<textarea
+								id="observacao"
+								class="textarea textarea-bordered h-24"
+								placeholder="Adicione alguma observação ou justificativa..."
+								bind:value={observacao}
+							></textarea>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
 
-  <!-- Botões de Navegação -->
-  <div class="flex justify-between mt-8">
-    <div>
-      {#if passoAtual > 1}
-        <button
-          type="button"
-          class="btn btn-outline btn-lg gap-2"
-          onclick={passoAnterior}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
-          Voltar
-        </button>
-      {:else if onCancelar}
-        <button type="button" class="btn btn-ghost btn-lg" onclick={onCancelar}>
-          Cancelar
-        </button>
-      {/if}
-    </div>
+	<!-- Botões de Navegação -->
+	<div class="mt-8 flex justify-between">
+		<div>
+			{#if passoAtual > 1}
+				<button type="button" class="btn btn-outline btn-lg gap-2" onclick={passoAnterior}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+					Voltar
+				</button>
+			{:else if onCancelar}
+				<button type="button" class="btn btn-ghost btn-lg" onclick={onCancelar}> Cancelar </button>
+			{/if}
+		</div>
 
-    <div>
-      {#if passoAtual < totalPassos}
-        <button
-          type="button"
-          class="btn btn-primary btn-lg gap-2"
-          onclick={proximoPasso}
-          disabled={passoAtual === 1 && (!saldo || saldo.diasDisponiveis === 0)}
-        >
-          Próximo
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
-        </button>
-      {:else}
-        <button
-          type="button"
-          class="btn btn-success btn-lg gap-2"
-          onclick={enviarSolicitacao}
-          disabled={processando}
-        >
-          {#if processando}
-            <span class="loading loading-spinner"></span>
-            Enviando...
-          {:else}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-            Enviar Solicitação
-          {/if}
-        </button>
-      {/if}
-    </div>
-  </div>
+		<div>
+			{#if passoAtual < totalPassos}
+				<button
+					type="button"
+					class="btn btn-primary btn-lg gap-2"
+					onclick={proximoPasso}
+					disabled={passoAtual === 1 && (!saldo || saldo.diasDisponiveis === 0)}
+				>
+					Próximo
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7"
+						/>
+					</svg>
+				</button>
+			{:else}
+				<button
+					type="button"
+					class="btn btn-success btn-lg gap-2"
+					onclick={enviarSolicitacao}
+					disabled={processando}
+				>
+					{#if processando}
+						<span class="loading loading-spinner"></span>
+						Enviando...
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						Enviar Solicitação
+					{/if}
+				</button>
+			{/if}
+		</div>
+	</div>
 </div>
 
 <style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  .animate-fadeIn {
-    animation: fadeIn 0.5s ease-out;
-  }
+	.animate-fadeIn {
+		animation: fadeIn 0.5s ease-out;
+	}
 
-  .wizard-ferias-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-  }
+	.wizard-ferias-container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 2rem;
+	}
 
-  .passo-content {
-    min-height: 500px;
-  }
+	.passo-content {
+		min-height: 500px;
+	}
 
-  /* Gradiente no texto */
-  .bg-clip-text {
-    -webkit-background-clip: text;
-    background-clip: text;
-  }
+	/* Gradiente no texto */
+	.bg-clip-text {
+		-webkit-background-clip: text;
+		background-clip: text;
+	}
 
-  /* Responsive */
-  @media (max-width: 768px) {
-    .wizard-ferias-container {
-      padding: 1rem;
-    }
+	/* Responsive */
+	@media (max-width: 768px) {
+		.wizard-ferias-container {
+			padding: 1rem;
+		}
 
-    .passo-content {
-      min-height: 400px;
-    }
-  }
+		.passo-content {
+			min-height: 400px;
+		}
+	}
 </style>
diff --git a/apps/web/src/routes/(dashboard)/perfil/+page.svelte b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
index 7e89fa1..ad92cd7 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -7,8 +7,7 @@
 	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
 	import CalendarioAusencias from '$lib/components/ausencias/CalendarioAusencias.svelte';
 	import { generateAvatarGallery } from '$lib/utils/avatars';
-	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
-	import { page } from '$app/stores';
+	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { X, Calendar } from 'lucide-svelte';
 
 	const client = useConvexClient();
@@ -17,7 +16,7 @@
 	let abaAtiva = $state<
 		'meu-perfil' | 'minhas-ferias' | 'minhas-ausencias' | 'aprovar-ferias' | 'aprovar-ausencias'
 	>('meu-perfil');
-	let solicitacaoSelecionada = $state<any>(null);
+	let solicitacaoSelecionada = $state<Doc<'solicitacoesFerias'> | null>(null);
 	let mostrarModalFoto = $state(false);
 	let uploadandoFoto = $state(false);
 	let erroUpload = $state('');
@@ -37,7 +36,6 @@
 	// Estados para Minhas Ausências
 	let mostrarWizardAusencia = $state(false);
 	let filtroStatusAusencias = $state<string>('todos');
-	let solicitacaoAusenciaSelecionada = $state<Id<'solicitacoesAusencias'> | null>(null);
 
 	// Estados para Aprovar Ausências (Gestores)
 	let solicitacaoAusenciaAprovar = $state<Id<'solicitacoesAusencias'> | null>(null);
@@ -294,8 +292,9 @@
       `;
 			document.body.appendChild(toast);
 			setTimeout(() => toast.remove(), 3000);
-		} catch (e: any) {
-			erroUpload = e.message || 'Erro ao fazer upload da foto';
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			erroUpload = errorMessage || 'Erro ao fazer upload da foto';
 			// Reverter mudança local se houver erro
 			fotoPerfilLocal = currentUser?.data?.fotoPerfil || null;
 			avatarLocal = currentUser?.data?.avatar || null;
@@ -344,8 +343,9 @@
       `;
 			document.body.appendChild(toast);
 			setTimeout(() => toast.remove(), 3000);
-		} catch (e: any) {
-			erroUpload = e.message || 'Erro ao salvar avatar';
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			erroUpload = errorMessage || 'Erro ao salvar avatar';
 			// Reverter mudança local se houver erro
 			avatarLocal = currentUser?.data?.avatar || null;
 			fotoPerfilLocal = currentUser?.data?.fotoPerfil || null;
@@ -632,11 +632,10 @@
 						/>
 					</svg>
 					Aprovar Férias
-					{#if (solicitacoesSubordinados || []).filter((s: any) => s.status === 'aguardando_aprovacao').length > 0}
+					{#if (solicitacoesSubordinados || []).filter((s) => s.status === 'aguardando_aprovacao').length > 0}
 						<span class="badge badge-error badge-sm ml-2 animate-pulse">
-							{(solicitacoesSubordinados || []).filter(
-								(s: any) => s.status === 'aguardando_aprovacao'
-							).length}
+							{(solicitacoesSubordinados || []).filter((s) => s.status === 'aguardando_aprovacao')
+								.length}
 						</span>
 					{/if}
 				</button>
@@ -662,9 +661,9 @@
 						/>
 					</svg>
 					Aprovar Ausências
-					{#if (ausenciasSubordinados || []).filter((a: any) => a.status === 'aguardando_aprovacao').length > 0}
+					{#if (ausenciasSubordinados || []).filter((a) => a.status === 'aguardando_aprovacao').length > 0}
 						<span class="badge badge-error badge-sm ml-2 animate-pulse">
-							{(ausenciasSubordinados || []).filter((a: any) => a.status === 'aguardando_aprovacao')
+							{(ausenciasSubordinados || []).filter((a) => a.status === 'aguardando_aprovacao')
 								.length}
 						</span>
 					{/if}
@@ -1113,7 +1112,7 @@
 								</div>
 							{:else}
 								<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-									{#each meusTimesGestor as time}
+									{#each meusTimesGestor as time (time._id)}
 										<div
 											class="card dark:bg-base-100 border-l-4 bg-white shadow-xl transition-all hover:scale-105 hover:shadow-2xl"
 											style="border-color: {time.cor}"
@@ -1378,13 +1377,13 @@
 										</tr>
 									</thead>
 									<tbody>
-										{#each solicitacoesFiltradas as solicitacao}
+										{#each solicitacoesFiltradas as solicitacao (solicitacao._id)}
 											<tr>
 												<td>{solicitacao.anoReferencia}</td>
 												<td>{solicitacao.periodos.length} período(s)</td>
 												<td class="font-bold"
 													>{solicitacao.periodos.reduce(
-														(acc: number, p: any) => acc + p.diasCorridos,
+														(acc: number, p: { diasCorridos: number }) => acc + p.diasCorridos,
 														0
 													)} dias</td
 												>
@@ -1660,7 +1659,7 @@
 										</tr>
 									</thead>
 									<tbody>
-										{#each ausenciasFiltradas as ausencia}
+										{#each ausenciasFiltradas as ausencia (ausencia._id)}
 											<tr>
 												<td>
 													{new Date(ausencia.dataInicio).toLocaleDateString('pt-BR')} até {new Date(
@@ -1751,7 +1750,7 @@
 									</tr>
 								</thead>
 								<tbody>
-									{#each solicitacoesSubordinados as solicitacao}
+									{#each solicitacoesSubordinados as solicitacao (solicitacao._id)}
 										<tr class="hover:bg-base-200 transition-colors">
 											<td>
 												<div class="font-bold">
@@ -1774,7 +1773,7 @@
 											<td class="font-semibold">{solicitacao.periodos.length}</td>
 											<td class="text-lg font-bold"
 												>{solicitacao.periodos.reduce(
-													(acc: number, p: any) => acc + p.diasCorridos,
+													(acc: number, p: { diasCorridos: number }) => acc + p.diasCorridos,
 													0
 												)}</td
 											>
@@ -1902,7 +1901,7 @@
 									</tr>
 								</thead>
 								<tbody>
-									{#each ausenciasSubordinados as ausencia}
+									{#each ausenciasSubordinados as ausencia (ausencia._id)}
 										<tr class="hover:bg-base-200 transition-colors">
 											<td>
 												<div class="font-bold">
@@ -1921,7 +1920,7 @@
 												{/if}
 											</td>
 											<td class="font-semibold">
-												{new Date(ausencia.dataInicio).toLocaleDateString('pt-BR')} até{' '}
+												{new Date(ausencia.dataInicio).toLocaleDateString('pt-BR')} até
 												{new Date(ausencia.dataFim).toLocaleDateString('pt-BR')}
 											</td>
 											<td class="text-lg font-bold">
@@ -2121,7 +2120,7 @@
 						<div
 							class="bg-base-200 grid max-h-[500px] grid-cols-3 gap-4 overflow-y-auto rounded-2xl p-6 shadow-inner md:grid-cols-5 lg:grid-cols-6"
 						>
-							{#each avatarGallery as avatar}
+							{#each avatarGallery as avatar (avatar.url)}
 								<button
 									type="button"
 									class={`flex cursor-pointer flex-col items-center rounded-xl p-2 transition-all hover:scale-110 ${avatarSelecionado === avatar.url ? 'ring-primary bg-primary/10 scale-105 ring-4' : 'hover:ring-primary/50 hover:bg-base-100 hover:ring-2'}`}
@@ -2262,13 +2261,13 @@
 </main>
 
 <!-- Modal Wizard Solicitação de Férias -->
-{#if mostrarWizard && funcionario}
+{#if mostrarWizard && funcionarioIdDisponivel}
 	<dialog class="modal modal-open">
 		<div class="modal-box max-h-[90vh] max-w-4xl overflow-hidden">
 			<h3 class="mb-6 text-center text-2xl font-bold">Nova Solicitação de Férias</h3>
 			<div class="max-h-[80vh] overflow-y-auto">
 				<WizardSolicitacaoFerias
-					funcionarioId={funcionario._id}
+					funcionarioId={funcionarioIdDisponivel}
 					onSucesso={() => {
 						mostrarWizard = false;
 					}}
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
index 73a9dd1..b94d923 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
@@ -1,226 +1,1731 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  
-  // Buscar TODAS as solicitações de férias (Dashboard RH)
-  const todasSolicitacoesQuery = useQuery(api.ferias.listarTodas, {});
-  
-  let filtroStatus = $state<string>("todos");
-  
-  const solicitacoes = $derived(todasSolicitacoesQuery?.data || []);
-  
-  // Filtrar solicitações
-  const solicitacoesFiltradas = $derived(
-    solicitacoes.filter((s: any) => {
-      // Filtro de status
-      if (filtroStatus !== "todos" && s.status !== filtroStatus) return false;
-      return true;
-    })
-  );
-  
-  // Estatísticas gerais
-  const stats = $derived({
-    total: solicitacoes.length,
-    aguardando: solicitacoes.filter((s: any) => s.status === "aguardando_aprovacao").length,
-    aprovadas: solicitacoes.filter((s: any) => s.status === "aprovado" || s.status === "data_ajustada_aprovada").length,
-    reprovadas: solicitacoes.filter((s: any) => s.status === "reprovado").length,
-  });
-  
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-      data_ajustada_aprovada: "badge-info",
-    };
-    return badges[status] || "badge-neutral";
-  }
-  
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-      data_ajustada_aprovada: "Ajustado",
-    };
-    return textos[status] || status;
-  }
-  
-  function formatarData(dataISO: string) {
-    return new Date(dataISO).toLocaleDateString("pt-BR");
-  }
-</script>
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { onMount } from 'svelte';
+	import { SvelteDate, SvelteMap } from 'svelte/reactivity';
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { FunctionReturnType } from 'convex/server';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import '@fullcalendar/core/index.css';
+	import '@fullcalendar/daygrid/index.css';
+	type CalendarConstructor = typeof import('@fullcalendar/core').Calendar;
+	type CalendarInstance = import('@fullcalendar/core').Calendar;
+	type EventInput = import('@fullcalendar/core').EventInput;
+	type TodasSolicitacoes = FunctionReturnType<typeof api.ferias.listarTodas>;
+	type Solicitacao = TodasSolicitacoes[number];
+	type PeriodoDetalhado = {
+		solicitacaoId: Id<'solicitacoesFerias'>;
+		funcionarioId: Id<'funcionarios'> | null;
+		funcionarioNome: string;
+		matricula?: string | null;
+		timeNome?: string | null;
+		timeCor?: string | null;
+		anoReferencia: number;
+		status: Solicitacao['status'];
+		dataInicio: string;
+		dataFim: string;
+		diasCorridos: number;
+	};
 
-<main class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li>Gestão de Férias</li>
-    </ul>
-  </div>
+	type SolicitacoesPorAnoResumo = {
+		ano: number;
+		solicitacoes: number;
+		diasTotais: number;
+	};
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-purple-500/20 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Dashboard de Férias</h1>
-          <p class="text-base-content/70">Visão geral de todas as solicitações e funcionários</p>
-        </div>
-      </div>
-      <button class="btn btn-ghost gap-2" onclick={() => goto("/recursos-humanos")}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
+	// Buscar TODAS as solicitações de férias (Dashboard RH)
+	const todasSolicitacoesQuery = useQuery(api.ferias.listarTodas, {});
 
-  <!-- Estatísticas -->
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-      <div class="stat-figure text-primary">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-      </div>
-      <div class="stat-title">Total</div>
-      <div class="stat-value text-primary">{stats.total}</div>
-      <div class="stat-desc">Solicitações</div>
-    </div>
+	let filtroStatus = $state<string>('todos');
+	let filtroNome = $state<string>('');
+	let filtroMatricula = $state<string>('');
+	let filtroEmail = $state<string>('');
+	let filtroMes = $state<string>('');
+	let filtroPeriodoInicio = $state<string>('');
+	let filtroPeriodoFim = $state<string>('');
+	let dataInicioRelatorio = $state<string>('');
+	let dataFimRelatorio = $state<string>('');
+	const solicitacoes = $derived<TodasSolicitacoes>(todasSolicitacoesQuery?.data ?? []);
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-warning/30">
-      <div class="stat-figure text-warning">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <div class="stat-title">Aguardando</div>
-      <div class="stat-value text-warning">{stats.aguardando}</div>
-      <div class="stat-desc">Pendentes</div>
-    </div>
+	// Filtrar solicitações
+	const solicitacoesFiltradas = $derived(
+		solicitacoes.filter((solicitacao) => {
+			if (filtroStatus !== 'todos' && solicitacao.status !== filtroStatus) {
+				return false;
+			}
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-success/30">
-      <div class="stat-figure text-success">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <div class="stat-title">Aprovadas</div>
-      <div class="stat-value text-success">{stats.aprovadas}</div>
-      <div class="stat-desc">Deferidas</div>
-    </div>
+			const nomeFiltro = normalizarTexto(filtroNome.trim());
+			const matriculaFiltro = normalizarTexto(filtroMatricula.trim());
+			const emailFiltro = normalizarTexto(filtroEmail.trim());
 
-    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
-      <div class="stat-figure text-error">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <div class="stat-title">Reprovadas</div>
-      <div class="stat-value text-error">{stats.reprovadas}</div>
-      <div class="stat-desc">Indeferidas</div>
-    </div>
-  </div>
+			if (nomeFiltro || matriculaFiltro || emailFiltro) {
+				const funcionario = solicitacao.funcionario;
+				if (!funcionario) return false;
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-lg mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">Filtros</h2>
-      <div class="grid grid-cols-1 md:grid-cols-1 gap-4">
-        <!-- Filtro Status -->
-        <div class="form-control">
-          <label class="label" for="status">
-            <span class="label-text">Status</span>
-          </label>
-          <select id="status" class="select select-bordered" bind:value={filtroStatus}>
-            <option value="todos">Todos</option>
-            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
-            <option value="aprovado">Aprovado</option>
-            <option value="reprovado">Reprovado</option>
-            <option value="data_ajustada_aprovada">Data Ajustada</option>
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
+				const contato = funcionario as {
+					emailInstitucional?: string | null;
+					email?: string | null;
+				};
 
-  <!-- Lista de Solicitações -->
-  <div class="card bg-base-100 shadow-lg">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        Solicitações ({solicitacoesFiltradas.length})
-      </h2>
+				if (nomeFiltro) {
+					const nomeNormalizado = normalizarTexto(funcionario.nome ?? '');
+					if (!nomeNormalizado.includes(nomeFiltro)) {
+						return false;
+					}
+				}
 
-      {#if solicitacoesFiltradas.length === 0}
-        <div class="alert">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-          </svg>
-          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
-        </div>
-      {:else}
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
+				if (matriculaFiltro) {
+					const matriculaNormalizada = normalizarTexto(funcionario.matricula ?? '');
+					if (!matriculaNormalizada.includes(matriculaFiltro)) {
+						return false;
+					}
+				}
+
+				if (emailFiltro) {
+					const emailNormalizado = normalizarTexto(
+						contato.emailInstitucional ?? contato.email ?? ''
+					);
+					if (!emailNormalizado.includes(emailFiltro)) {
+						return false;
+					}
+				}
+			}
+
+			const aplicaMes = filtroMes !== '';
+			const aplicaPeriodo = filtroPeriodoInicio !== '' || filtroPeriodoFim !== '';
+
+			if (!aplicaMes && !aplicaPeriodo) {
+				return true;
+			}
+
+			const intervaloMes = aplicaMes ? criarIntervaloDoMes(filtroMes) : null;
+			const inicioFiltro = filtroPeriodoInicio
+				? criarDataHora(filtroPeriodoInicio, 'inicio')
+				: null;
+			const fimFiltro = filtroPeriodoFim ? criarDataHora(filtroPeriodoFim, 'fim') : null;
+			const inicioComparacao = inicioFiltro ?? new SvelteDate(-8640000000000000);
+			const fimComparacao = fimFiltro ?? new SvelteDate(8640000000000000);
+
+			return solicitacao.periodos.some((periodo) => {
+				const inicioPeriodo = criarDataHora(periodo.dataInicio, 'inicio');
+				const fimPeriodo = criarDataHora(periodo.dataFim, 'fim');
+				if (!inicioPeriodo || !fimPeriodo) {
+					return false;
+				}
+
+				if (intervaloMes) {
+					if (fimPeriodo < intervaloMes.inicio || inicioPeriodo > intervaloMes.fim) {
+						return false;
+					}
+				}
+
+				if (inicioFiltro || fimFiltro) {
+					if (fimPeriodo < inicioComparacao || inicioPeriodo > fimComparacao) {
+						return false;
+					}
+				}
+
+				return true;
+			});
+		})
+	);
+
+	// Estatísticas gerais
+	const stats = $derived({
+		total: solicitacoes.length,
+		aguardando: solicitacoes.filter((solicitacao) => solicitacao.status === 'aguardando_aprovacao')
+			.length,
+		aprovadas: solicitacoes.filter(
+			(solicitacao) =>
+				solicitacao.status === 'aprovado' || solicitacao.status === 'data_ajustada_aprovada'
+		).length,
+		reprovadas: solicitacoes.filter((solicitacao) => solicitacao.status === 'reprovado').length
+	});
+
+	const solicitacoesAprovadas = $derived(
+		solicitacoesFiltradas.filter(
+			(s) => s.status === 'aprovado' || s.status === 'data_ajustada_aprovada'
+		)
+	);
+
+	const periodosDetalhados = $derived<Array<PeriodoDetalhado>>(
+		solicitacoesAprovadas
+			.flatMap((solicitacao) =>
+				solicitacao.periodos.map((periodo) => ({
+					solicitacaoId: solicitacao._id,
+					funcionarioId: solicitacao.funcionarioId ?? null,
+					funcionarioNome: solicitacao.funcionario?.nome ?? 'Funcionário não encontrado',
+					matricula: solicitacao.funcionario?.matricula ?? null,
+					timeNome: solicitacao.time?.nome ?? null,
+					timeCor: solicitacao.time?.cor ?? null,
+					anoReferencia: solicitacao.anoReferencia,
+					status: solicitacao.status,
+					dataInicio: periodo.dataInicio,
+					dataFim: periodo.dataFim,
+					diasCorridos: periodo.diasCorridos
+				}))
+			)
+			.sort(
+				(a, b) => new SvelteDate(a.dataInicio).getTime() - new SvelteDate(b.dataInicio).getTime()
+			)
+	);
+
+	type PeriodoPorMes = { label: string; totalDias: number; quantidadePeriodos: number };
+
+	const periodosPorMes = $derived<Array<PeriodoPorMes>>(
+		(() => {
+			const agregados = new SvelteMap<string, PeriodoPorMes>();
+
+			for (const periodo of periodosDetalhados) {
+				const inicio = new SvelteDate(`${periodo.dataInicio}T00:00:00`);
+				const chave = `${inicio.getFullYear()}-${String(inicio.getMonth() + 1).padStart(2, '0')}`;
+				const label = inicio.toLocaleDateString('pt-BR', {
+					month: 'short',
+					year: 'numeric'
+				});
+
+				const existente = agregados.get(chave) ?? {
+					label,
+					totalDias: 0,
+					quantidadePeriodos: 0
+				};
+
+				existente.totalDias += periodo.diasCorridos;
+				existente.quantidadePeriodos += 1;
+				agregados.set(chave, existente);
+			}
+
+			return Array.from(agregados.entries())
+				.sort(([a], [b]) => a.localeCompare(b))
+				.map(([, valor]) => valor);
+		})()
+	);
+
+	let rangeInicioIndice = $state(0);
+	let rangeFimIndice = $state(0);
+
+	$effect(() => {
+		if (periodosPorMes.length === 0) {
+			rangeInicioIndice = 0;
+			rangeFimIndice = 0;
+			return;
+		}
+
+		const ultimoIndice = periodosPorMes.length - 1;
+
+		if (rangeFimIndice === 0 && rangeInicioIndice === 0) {
+			rangeFimIndice = ultimoIndice;
+			return;
+		}
+
+		if (rangeInicioIndice > ultimoIndice) {
+			rangeInicioIndice = ultimoIndice;
+		}
+
+		if (rangeFimIndice > ultimoIndice) {
+			rangeFimIndice = ultimoIndice;
+		}
+
+		if (rangeInicioIndice > rangeFimIndice) {
+			rangeInicioIndice = rangeFimIndice;
+		}
+	});
+
+	const periodosPorMesAtivos = $derived<Array<PeriodoPorMes>>(
+		(() => {
+			if (periodosPorMes.length === 0) {
+				return [];
+			}
+
+			const ultimoIndice = periodosPorMes.length - 1;
+			const inicio = Math.max(0, Math.min(rangeInicioIndice, ultimoIndice));
+			const fim = Math.max(inicio, Math.min(rangeFimIndice, ultimoIndice));
+
+			return periodosPorMes.slice(inicio, fim + 1);
+		})()
+	);
+
+	const solicitacoesPorAno = $derived<Array<SolicitacoesPorAnoResumo>>(
+		(() => {
+			const agregados = new SvelteMap<number, SolicitacoesPorAnoResumo>();
+
+			for (const solicitacao of solicitacoesAprovadas) {
+				const totalDias = solicitacao.periodos.reduce(
+					(acc, periodo) => acc + periodo.diasCorridos,
+					0
+				);
+				const existente = agregados.get(solicitacao.anoReferencia) ?? {
+					ano: solicitacao.anoReferencia,
+					solicitacoes: 0,
+					diasTotais: 0
+				};
+				existente.solicitacoes += 1;
+				existente.diasTotais += totalDias;
+				agregados.set(solicitacao.anoReferencia, existente);
+			}
+
+			return Array.from(agregados.values()).sort((a, b) => a.ano - b.ano);
+		})()
+	);
+
+	const coresCalendario = [
+		'#2563eb',
+		'#16a34a',
+		'#f97316',
+		'#9333ea',
+		'#0ea5e9',
+		'#facc15',
+		'#f43f5e'
+	] as const;
+
+	const eventosFerias = $derived<Array<EventInput>>(
+		periodosDetalhados.map((periodo, indice) => {
+			const corBase = periodo.timeCor ?? coresCalendario[indice % coresCalendario.length];
+			return {
+				id: `${String(periodo.solicitacaoId)}-${indice}`,
+				title: `${periodo.funcionarioNome} (${periodo.diasCorridos} dia${periodo.diasCorridos === 1 ? '' : 's'})`,
+				start: periodo.dataInicio,
+				end: adicionarDias(periodo.dataFim, 1),
+				allDay: true,
+				backgroundColor: corBase,
+				borderColor: corBase,
+				extendedProps: {
+					funcionarioId: periodo.funcionarioId,
+					timeNome: periodo.timeNome,
+					diasCorridos: periodo.diasCorridos,
+					anoReferencia: periodo.anoReferencia,
+					status: periodo.status
+				}
+			} satisfies EventInput;
+		})
+	);
+
+	let calendarioContainer: HTMLDivElement | null = null;
+	let calendarioInstance: CalendarInstance | null = null;
+	let CalendarClass: CalendarConstructor | null = null;
+
+	onMount(() => {
+		let destroyed = false;
+
+		const inicializarCalendario = async () => {
+			const [coreModule, dayGridModule, interactionModule, localeModule] = await Promise.all([
+				import('@fullcalendar/core'),
+				import('@fullcalendar/daygrid'),
+				import('@fullcalendar/interaction'),
+				import('@fullcalendar/core/locales/pt-br')
+			]);
+
+			if (destroyed || !calendarioContainer) {
+				return;
+			}
+
+			CalendarClass = coreModule.Calendar;
+			const dayGridPlugin = dayGridModule.default;
+			const interactionPlugin = interactionModule.default;
+			const ptBrLocale = localeModule.default;
+
+			calendarioInstance = new CalendarClass(calendarioContainer, {
+				plugins: [dayGridPlugin, interactionPlugin],
+				initialView: 'dayGridMonth',
+				height: 'auto',
+				locale: 'pt-br',
+				locales: [ptBrLocale],
+				navLinks: true,
+				weekNumbers: false,
+				headerToolbar: {
+					left: 'prev,next today',
+					center: 'title',
+					right: 'dayGridMonth,dayGridWeek'
+				},
+				buttonText: {
+					today: 'Hoje',
+					month: 'Mês',
+					week: 'Semana'
+				},
+				events: eventosFerias
+			});
+
+			calendarioInstance.render();
+		};
+
+		void inicializarCalendario();
+
+		return () => {
+			destroyed = true;
+			calendarioInstance?.destroy();
+			calendarioInstance = null;
+		};
+	});
+
+	$effect(() => {
+		if (!calendarioInstance) {
+			return;
+		}
+
+		calendarioInstance.removeAllEvents();
+		for (const evento of eventosFerias) {
+			calendarioInstance.addEvent(evento);
+		}
+	});
+
+	if (typeof window !== 'undefined') {
+		$effect(() => {
+			(
+				window as Window & typeof globalThis & { __feriasSolicitacoes: TodasSolicitacoes }
+			).__feriasSolicitacoes = solicitacoes;
+			(
+				window as Window & typeof globalThis & { __feriasFiltradas: TodasSolicitacoes }
+			).__feriasFiltradas = solicitacoesFiltradas;
+			(
+				window as Window & typeof globalThis & { __feriasAprovadas: TodasSolicitacoes }
+			).__feriasAprovadas = solicitacoesAprovadas;
+			(
+				window as Window & typeof globalThis & { __feriasPeriodos: PeriodoDetalhado[] }
+			).__feriasPeriodos = periodosDetalhados;
+			(window as Window & typeof globalThis & { __feriasPorMes: PeriodoPorMes[] }).__feriasPorMes =
+				periodosPorMes;
+			(
+				window as Window & typeof globalThis & { __feriasPorAno: SolicitacoesPorAnoResumo[] }
+			).__feriasPorAno = solicitacoesPorAno;
+		});
+	}
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error',
+			data_ajustada_aprovada: 'badge-info'
+		};
+		return badges[status] || 'badge-neutral';
+	}
+
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado',
+			data_ajustada_aprovada: 'Ajustado'
+		};
+		return textos[status] || status;
+	}
+
+	function formatarData(data: string | number | Date) {
+		const instancia = data instanceof Date ? data : new SvelteDate(data);
+		return instancia.toLocaleDateString('pt-BR');
+	}
+
+	function criarDataHora(dataISO: string | undefined, modo: 'inicio' | 'fim'): Date | null {
+		if (!dataISO) return null;
+		const data = new SvelteDate(`${dataISO}T00:00:00`);
+		if (Number.isNaN(data.getTime())) {
+			return null;
+		}
+		if (modo === 'fim') {
+			data.setHours(23, 59, 59, 999);
+		}
+		return data;
+	}
+
+	function criarIntervaloDoMes(valor: string): { inicio: Date; fim: Date } | null {
+		if (!valor || valor === 'todos') return null;
+		const [anoStr, mesStr] = valor.split('-');
+		const ano = Number(anoStr);
+		const mes = Number(mesStr) - 1;
+		if (Number.isNaN(ano) || Number.isNaN(mes)) return null;
+		const inicio = new SvelteDate(ano, mes, 1);
+		const fim = new SvelteDate(ano, mes + 1, 0, 23, 59, 59, 999);
+		return { inicio, fim };
+	}
+
+	function adicionarDias(dataISO: string, dias: number): string {
+		const data = new SvelteDate(`${dataISO}T00:00:00`);
+		if (Number.isNaN(data.getTime())) {
+			return dataISO;
+		}
+		data.setDate(data.getDate() + dias);
+		const ano = data.getUTCFullYear();
+		const mes = String(data.getUTCMonth() + 1).padStart(2, '0');
+		const dia = String(data.getUTCDate()).padStart(2, '0');
+		return `${ano}-${mes}-${dia}`;
+	}
+
+	function normalizarTexto(texto: string): string {
+		return texto
+			.trim()
+			.normalize('NFD')
+			.replace(/[\u0300-\u036f]/g, '')
+			.toLowerCase();
+	}
+
+	function limparTodosFiltros() {
+		filtroStatus = 'todos';
+		filtroNome = '';
+		filtroMatricula = '';
+		filtroEmail = '';
+		filtroMes = '';
+		filtroPeriodoInicio = '';
+		filtroPeriodoFim = '';
+	}
+
+	function handleRangeInicio(event: Event) {
+		const target = event.target as HTMLInputElement | null;
+		if (!target) return;
+		const valor = Number(target.value);
+		if (Number.isNaN(valor)) return;
+		rangeInicioIndice = Math.min(valor, rangeFimIndice);
+	}
+
+	function handleRangeFim(event: Event) {
+		const target = event.target as HTMLInputElement | null;
+		if (!target) return;
+		const valor = Number(target.value);
+		if (Number.isNaN(valor)) return;
+		rangeFimIndice = Math.max(valor, rangeInicioIndice);
+	}
+
+	function limparPeriodoPersonalizado() {
+		filtroPeriodoInicio = '';
+		filtroPeriodoFim = '';
+	}
+
+	function totalDiasSolicitacao(solicitacao: Solicitacao): number {
+		return solicitacao.periodos.reduce((acc, periodo) => acc + periodo.diasCorridos, 0);
+	}
+
+	let chartContainer: HTMLDivElement | null = null;
+	let containerWidth = $state(960);
+
+	onMount(() => {
+		const atualizarLargura = () => {
+			if (chartContainer) {
+				containerWidth = chartContainer.getBoundingClientRect().width;
+			}
+		};
+
+		atualizarLargura();
+		window.addEventListener('resize', atualizarLargura);
+		return () => window.removeEventListener('resize', atualizarLargura);
+	});
+
+	const chartHeight = 340;
+	const padding = { top: 20, right: 20, bottom: 70, left: 70 };
+	let chartWidth = $derived(containerWidth);
+
+	function getMax<T>(arr: Array<T>, seletor: (item: T) => number): number {
+		let max = 0;
+		for (const item of arr) {
+			max = Math.max(max, seletor(item));
+		}
+		return max;
+	}
+
+	function scaleY(valor: number, max: number): number {
+		if (max <= 0) return 0;
+		const innerHeight = chartHeight - padding.top - padding.bottom;
+		return (valor / max) * innerHeight;
+	}
+
+	function getX(index: number, total: number): number {
+		const innerWidth = chartWidth - padding.left - padding.right;
+		if (total <= 1) {
+			return padding.left + innerWidth / 2;
+		}
+		return padding.left + (innerWidth / (total - 1)) * index;
+	}
+
+	function createAreaPath<T>(dados: Array<T>, seletor: (valor: T) => number, max: number): string {
+		if (dados.length === 0) return '';
+		const n = dados.length;
+		let path = `M ${getX(0, n)} ${chartHeight - padding.bottom}`;
+
+		for (let i = 0; i < n; i += 1) {
+			const x = getX(i, n);
+			const y = chartHeight - padding.bottom - scaleY(seletor(dados[i]), max);
+			path += ` L ${x} ${y}`;
+		}
+
+		path += ` L ${getX(n - 1, n)} ${chartHeight - padding.bottom}`;
+		path += ' Z';
+		return path;
+	}
+
+	function converteParaData(dateStr: string): Date {
+		return new SvelteDate(`${dateStr}T00:00:00`);
+	}
+
+	function periodosNoIntervalo(inicio: Date, fim: Date): Array<PeriodoDetalhado> {
+		if (Number.isNaN(inicio.getTime()) || Number.isNaN(fim.getTime())) return [];
+
+		return periodosDetalhados
+			.filter((periodo) => {
+				const inicioPeriodo = new SvelteDate(periodo.dataInicio);
+				const fimPeriodo = new SvelteDate(periodo.dataFim);
+				return inicioPeriodo <= fim && fimPeriodo >= inicio;
+			})
+			.sort(
+				(a, b) =>
+					new SvelteDate(a.dataInicio).getTime() - new SvelteDate(b.dataInicio).getTime() ||
+					a.funcionarioNome.localeCompare(b.funcionarioNome, 'pt-BR')
+			);
+	}
+
+	function gerarRelatorioImpressao() {
+		if (!dataInicioRelatorio || !dataFimRelatorio) {
+			window.alert('Informe o período para gerar a programação de férias.');
+			return;
+		}
+
+		const inicio = converteParaData(dataInicioRelatorio);
+		const fim = converteParaData(dataFimRelatorio);
+
+		if (fim < inicio) {
+			window.alert('A data final não pode ser anterior à data inicial.');
+			return;
+		}
+
+		const periodosSelecionados = periodosNoIntervalo(inicio, fim);
+
+		if (periodosSelecionados.length === 0) {
+			window.alert('Não há férias registradas dentro do período informado.');
+			return;
+		}
+
+		const periodoLegivel = `${inicio.toLocaleDateString('pt-BR')} a ${fim.toLocaleDateString('pt-BR')}`;
+		const linhasTabela = periodosSelecionados
+			.map(
+				(periodo, index) => `
+          <tr>
+            <td>${index + 1}</td>
+            <td>${periodo.funcionarioNome}</td>
+            <td>${periodo.matricula ?? 'S/N'}</td>
+            <td>${periodo.timeNome ?? 'Sem time'}</td>
+            <td>${periodo.anoReferencia}</td>
+            <td>${formatarData(periodo.dataInicio)}</td>
+            <td>${formatarData(periodo.dataFim)}</td>
+            <td>${periodo.diasCorridos}</td>
+            <td>${getStatusTexto(periodo.status)}</td>
+          </tr>`
+			)
+			.join('');
+
+		const totalDias = periodosSelecionados.reduce((acc, periodo) => acc + periodo.diasCorridos, 0);
+		const relatorioHTML = `
+      <!DOCTYPE html>
+      <html lang="pt-BR">
+        <head>
+          <meta charset="utf-8" />
+          <title>Programação de Férias</title>
+          <style>
+            :root {
+              color-scheme: light;
+              font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+            }
+            body {
+              margin: 0;
+              padding: 32px;
+              background: #f5f7fb;
+              color: #1f2933;
+            }
+            h1 {
+              margin-bottom: 4px;
+            }
+            h2 {
+              margin-top: 24px;
+              margin-bottom: 8px;
+              font-size: 1rem;
+              color: #52606d;
+            }
+            table {
+              width: 100%;
+              border-collapse: collapse;
+              margin-top: 16px;
+              background: #ffffff;
+              border-radius: 12px;
+              overflow: hidden;
+              box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
+            }
+            th, td {
+              padding: 12px 16px;
+              font-size: 0.95rem;
+              border-bottom: 1px solid #e5e7eb;
+              text-align: left;
+            }
+            th {
+              background: #eef2ff;
+              color: #1d4ed8;
+              text-transform: uppercase;
+              font-size: 0.72rem;
+              letter-spacing: 0.04em;
+            }
+            tr:last-child td {
+              border-bottom: none;
+            }
+            tfoot td {
+              font-weight: 600;
+              background: #f9fafb;
+            }
+            .meta {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 16px;
+              margin-top: 16px;
+            }
+            .meta-item {
+              padding: 12px 18px;
+              background: #e0f2fe;
+              border-radius: 999px;
+              color: #0369a1;
+              font-weight: 600;
+              font-size: 0.9rem;
+            }
+            @media print {
+              body {
+                background: #ffffff;
+              }
+              table {
+                box-shadow: none;
+              }
+            }
+          </style>
+        </head>
+        <body>
+          <header>
+            <h1>Programação de Férias</h1>
+            <p>${periodoLegivel}</p>
+          </header>
+          <section class="meta">
+            <div class="meta-item">Total de colaboradores: ${
+							new Set(periodosSelecionados.map((periodo) => periodo.funcionarioNome)).size
+						}</div>
+            <div class="meta-item">Total de períodos: ${periodosSelecionados.length}</div>
+            <div class="meta-item">Dias planejados: ${totalDias}</div>
+          </section>
+          <table>
             <thead>
               <tr>
+                <th>#</th>
                 <th>Funcionário</th>
+                <th>Matrícula</th>
                 <th>Time</th>
-                <th>Ano</th>
-                <th>Períodos</th>
-                <th>Total Dias</th>
+                <th>Ano Ref.</th>
+                <th>Início</th>
+                <th>Fim</th>
+                <th>Dias</th>
                 <th>Status</th>
-                <th>Solicitado em</th>
               </tr>
             </thead>
             <tbody>
-              {#each solicitacoesFiltradas as solicitacao}
-                <tr>
-                  <td>
-                    <div class="flex items-center gap-3">
-                      <div class="avatar placeholder">
-                        <div class="bg-primary text-primary-content rounded-full w-10">
-                          <span class="text-xs">{solicitacao.funcionario?.nome.substring(0, 2).toUpperCase()}</span>
-                        </div>
-                      </div>
-                      <div>
-                        <div class="font-bold">{solicitacao.funcionario?.nome}</div>
-                        <div class="text-xs opacity-50">{solicitacao.funcionario?.matricula || "S/N"}</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td>
-                    {#if solicitacao.time}
-                      <div class="badge badge-outline" style="border-color: {solicitacao.time.cor}">
-                        {solicitacao.time.nome}
-                      </div>
-                    {:else}
-                      <span class="text-base-content/50 text-xs">Sem time</span>
-                    {/if}
-                  </td>
-                  <td>{solicitacao.anoReferencia}</td>
-                  <td>{solicitacao.periodos.length} período(s)</td>
-                  <td class="font-bold">{solicitacao.periodos.reduce((acc: number, p: any) => acc + p.diasCorridos, 0)} dias</td>
-                  <td>
-                    <div class={`badge ${getStatusBadge(solicitacao.status)}`}>
-                      {getStatusTexto(solicitacao.status)}
-                    </div>
-                  </td>
-                  <td class="text-xs">{new Date(solicitacao._creationTime).toLocaleDateString("pt-BR")}</td>
-                </tr>
-              {/each}
+              ${linhasTabela}
             </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="7">Total planejado no período</td>
+                <td colspan="2">${totalDias} dia(s)</td>
+              </tr>
+            </tfoot>
           </table>
-        </div>
-      {/if}
-    </div>
-  </div>
+          <script>
+            window.addEventListener("load", () => {
+              setTimeout(() => {
+                window.print();
+              }, 150);
+            });
+            window.addEventListener("afterprint", () => {
+              window.close();
+            });
+          ${'</scr' + 'ipt>'}
+        </body>
+      </html>
+    `;
+
+		const relatorioJanela = window.open(
+			'about:blank',
+			'programacao-ferias',
+			'noopener=yes,width=1200,height=800'
+		);
+		if (relatorioJanela) {
+			relatorioJanela.document.open();
+			relatorioJanela.document.write(relatorioHTML);
+			relatorioJanela.document.close();
+			relatorioJanela.focus();
+			return;
+		}
+
+		const iframe = document.createElement('iframe');
+		iframe.style.position = 'fixed';
+		iframe.style.right = '0';
+		iframe.style.bottom = '0';
+		iframe.style.width = '0';
+		iframe.style.height = '0';
+		iframe.style.border = '0';
+		document.body.appendChild(iframe);
+
+		iframe.addEventListener(
+			'load',
+			() => {
+				try {
+					iframe.contentWindow?.focus();
+					iframe.contentWindow?.print();
+				} finally {
+					setTimeout(() => {
+						document.body.removeChild(iframe);
+					}, 1000);
+				}
+			},
+			{ once: true }
+		);
+
+		if (iframe.contentDocument) {
+			iframe.contentDocument.open();
+			iframe.contentDocument.write(relatorioHTML);
+			iframe.contentDocument.close();
+		} else {
+			iframe.srcdoc = relatorioHTML;
+		}
+	}
+</script>
+
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href={resolve('/recursos-humanos')} class="text-primary hover:underline"
+					>Recursos Humanos</a
+				>
+			</li>
+			<li>Gestão de Férias</li>
+		</ul>
+	</div>
+
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-purple-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-purple-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Dashboard de Férias</h1>
+					<p class="text-base-content/70">Visão geral de todas as solicitações e funcionários</p>
+				</div>
+			</div>
+			<button class="btn btn-ghost gap-2" onclick={() => goto(resolve('/recursos-humanos'))}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
+
+	<!-- Estatísticas -->
+	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+		<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+			<div class="stat-figure text-primary">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Total</div>
+			<div class="stat-value text-primary">{stats.total}</div>
+			<div class="stat-desc">Solicitações</div>
+		</div>
+
+		<div class="stat bg-base-100 rounded-box border-warning/30 border shadow-lg">
+			<div class="stat-figure text-warning">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Aguardando</div>
+			<div class="stat-value text-warning">{stats.aguardando}</div>
+			<div class="stat-desc">Pendentes</div>
+		</div>
+
+		<div class="stat bg-base-100 rounded-box border-success/30 border shadow-lg">
+			<div class="stat-figure text-success">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Aprovadas</div>
+			<div class="stat-value text-success">{stats.aprovadas}</div>
+			<div class="stat-desc">Deferidas</div>
+		</div>
+
+		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
+			<div class="stat-figure text-error">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</div>
+			<div class="stat-title">Reprovadas</div>
+			<div class="stat-value text-error">{stats.reprovadas}</div>
+			<div class="stat-desc">Indeferidas</div>
+		</div>
+	</div>
+
+	<!-- Filtros -->
+	<div class="card border-base-300/60 bg-base-100 mb-6 border shadow-xl">
+		<div class="card-body space-y-6">
+			<div class="flex flex-wrap items-center justify-between gap-3">
+				<h2 class="text-base-content text-lg font-semibold">Filtros</h2>
+				<button
+					type="button"
+					class="btn btn-sm btn-outline"
+					onclick={limparTodosFiltros}
+					disabled={filtroStatus === 'todos' &&
+						filtroNome.trim() === '' &&
+						filtroMatricula.trim() === '' &&
+						filtroEmail.trim() === '' &&
+						filtroMes === '' &&
+						filtroPeriodoInicio === '' &&
+						filtroPeriodoFim === ''}
+				>
+					Limpar tudo
+				</button>
+			</div>
+
+			<div class="grid grid-cols-12 gap-5">
+				<!-- Status -->
+				<div class="col-span-12 md:col-span-6 xl:col-span-4">
+					<div
+						class="border-base-300/60 bg-base-200/40 flex h-full flex-col gap-3 rounded-2xl border p-4 shadow-sm"
+					>
+						<div
+							class="text-base-content/80 flex items-center justify-between text-sm font-semibold"
+						>
+							<span>Status</span>
+							{#if filtroStatus !== 'todos'}
+								<button
+									type="button"
+									class="btn btn-xs btn-ghost text-primary"
+									onclick={() => (filtroStatus = 'todos')}
+								>
+									Limpar
+								</button>
+							{/if}
+						</div>
+						<select id="status" class="select select-bordered w-full" bind:value={filtroStatus}>
+							<option value="todos">Todos</option>
+							<option value="aguardando_aprovacao">Aguardando Aprovação</option>
+							<option value="aprovado">Aprovado</option>
+							<option value="reprovado">Reprovado</option>
+							<option value="data_ajustada_aprovada">Data Ajustada</option>
+						</select>
+						<p class="text-base-content/60 text-xs leading-relaxed">
+							Defina o status das solicitações que deseja visualizar.
+						</p>
+					</div>
+				</div>
+
+				<!-- Nome -->
+				<div class="col-span-12 md:col-span-6 xl:col-span-4">
+					<div
+						class="border-base-300/60 bg-base-200/40 flex h-full flex-col gap-3 rounded-2xl border p-4 shadow-sm"
+					>
+						<div
+							class="text-base-content/80 flex items-center justify-between text-sm font-semibold"
+						>
+							<span>Nome do funcionário</span>
+							<button
+								type="button"
+								class="btn btn-xs btn-ghost text-primary"
+								onclick={() => (filtroNome = '')}
+								disabled={filtroNome.trim() === ''}
+							>
+								Limpar
+							</button>
+						</div>
+						<input
+							id="filtro-nome"
+							class="input input-bordered w-full"
+							type="text"
+							placeholder="Ex.: Maria Souza"
+							bind:value={filtroNome}
+							autocomplete="off"
+						/>
+						<p class="text-base-content/60 text-xs leading-relaxed">
+							Pesquise por nome completo ou parcial para localizar rapidamente um colaborador.
+						</p>
+					</div>
+				</div>
+
+				<!-- Matrícula -->
+				<div class="col-span-12 md:col-span-6 xl:col-span-4">
+					<div
+						class="border-base-300/60 bg-base-200/40 flex h-full flex-col gap-3 rounded-2xl border p-4 shadow-sm"
+					>
+						<div
+							class="text-base-content/80 flex items-center justify-between text-sm font-semibold"
+						>
+							<span>Matrícula</span>
+							<button
+								type="button"
+								class="btn btn-xs btn-ghost text-primary"
+								onclick={() => (filtroMatricula = '')}
+								disabled={filtroMatricula.trim() === ''}
+							>
+								Limpar
+							</button>
+						</div>
+						<input
+							id="filtro-matricula"
+							class="input input-bordered w-full"
+							type="text"
+							placeholder="Informe a matrícula"
+							bind:value={filtroMatricula}
+							autocomplete="off"
+						/>
+						<p class="text-base-content/60 text-xs leading-relaxed">
+							Utilize a matrícula funcional para filtrar solicitações específicas.
+						</p>
+					</div>
+				</div>
+
+				<!-- E-mail -->
+				<div class="col-span-12 md:col-span-6 xl:col-span-4">
+					<div
+						class="border-base-300/60 bg-base-200/40 flex h-full flex-col gap-3 rounded-2xl border p-4 shadow-sm"
+					>
+						<div
+							class="text-base-content/80 flex items-center justify-between text-sm font-semibold"
+						>
+							<span>E-mail institucional</span>
+							<button
+								type="button"
+								class="btn btn-xs btn-ghost text-primary"
+								onclick={() => (filtroEmail = '')}
+								disabled={filtroEmail.trim() === ''}
+							>
+								Limpar
+							</button>
+						</div>
+						<input
+							id="filtro-email"
+							class="input input-bordered w-full"
+							type="text"
+							placeholder="nome.sobrenome@pe.gov.br"
+							bind:value={filtroEmail}
+							autocomplete="off"
+						/>
+						<p class="text-base-content/60 text-xs leading-relaxed">
+							Busque usando o correio institucional cadastrado na ficha do colaborador.
+						</p>
+					</div>
+				</div>
+
+				<!-- Mês -->
+				<div class="col-span-12 md:col-span-6 xl:col-span-4">
+					<div
+						class="border-base-300/60 bg-base-200/40 flex h-full flex-col gap-3 rounded-2xl border p-4 shadow-sm"
+					>
+						<div
+							class="text-base-content/80 flex items-center justify-between text-sm font-semibold"
+						>
+							<span>Mês de referência</span>
+							<button
+								type="button"
+								class="btn btn-xs btn-ghost text-primary"
+								onclick={() => (filtroMes = '')}
+								disabled={filtroMes === ''}
+							>
+								Limpar
+							</button>
+						</div>
+						<input
+							id="filtro-mes"
+							type="month"
+							class="input input-bordered w-full"
+							bind:value={filtroMes}
+						/>
+						<p class="text-base-content/60 text-xs leading-relaxed">
+							Filtra as solicitações que possuem períodos ativos dentro do mês informado.
+						</p>
+					</div>
+				</div>
+
+				<!-- Período personalizado -->
+				<div class="col-span-12 xl:col-span-8">
+					<div
+						class="border-base-300/60 bg-base-200/40 flex h-full flex-col gap-3 rounded-2xl border p-4 shadow-sm"
+					>
+						<div
+							class="text-base-content/80 flex items-center justify-between text-sm font-semibold"
+						>
+							<span>Período personalizado</span>
+							<button
+								type="button"
+								class="btn btn-xs btn-ghost text-primary"
+								onclick={limparPeriodoPersonalizado}
+								disabled={!filtroPeriodoInicio && !filtroPeriodoFim}
+							>
+								Limpar
+							</button>
+						</div>
+						<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+							<div class="flex flex-col gap-2">
+								<span class="text-base-content/60 text-xs font-medium tracking-wide uppercase"
+									>Data inicial</span
+								>
+								<input
+									type="date"
+									class="input input-bordered"
+									bind:value={filtroPeriodoInicio}
+									max={filtroPeriodoFim || undefined}
+								/>
+							</div>
+							<div class="flex flex-col gap-2">
+								<span class="text-base-content/60 text-xs font-medium tracking-wide uppercase"
+									>Data final</span
+								>
+								<input
+									type="date"
+									class="input input-bordered"
+									bind:value={filtroPeriodoFim}
+									min={filtroPeriodoInicio || undefined}
+								/>
+							</div>
+						</div>
+						<p class="text-base-content/60 text-xs leading-relaxed">
+							Combine as datas para localizar períodos específicos de férias aprovadas ou em
+							andamento.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Impressão da Programação -->
+	<div class="card border-accent/30 bg-base-100 mb-6 border shadow-xl">
+		<div class="card-body space-y-4 p-6">
+			<div class="flex items-center gap-3">
+				<div class="bg-accent/10 rounded-lg p-2.5">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-accent h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 17h2a2 2 0 002-2v-5a2 2 0 00-2-2h-2V6a2 2 0 00-2-2H9a2 2 0 00-2 2v2H5a2 2 0 00-2 2v5a2 2 0 002 2h2m10 0v2a2 2 0 01-2 2H9a2 2 0 01-2-2v-2m10 0H7"
+						/>
+					</svg>
+				</div>
+				<div class="flex-1">
+					<h3 class="text-base-content text-lg font-semibold">
+						Impressão da Programação de Férias
+					</h3>
+					<p class="text-base-content/60 text-sm">
+						Escolha o período desejado e gere um relatório pronto para impressão com todos os
+						colaboradores em férias, incluindo detalhes completos de cada período.
+					</p>
+				</div>
+			</div>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+				<div class="form-control">
+					<label class="label" for="dataInicio">
+						<span class="label-text font-medium">Data inicial</span>
+					</label>
+					<input
+						id="dataInicio"
+						type="date"
+						class="input input-bordered"
+						bind:value={dataInicioRelatorio}
+					/>
+				</div>
+				<div class="form-control">
+					<label class="label" for="dataFim">
+						<span class="label-text font-medium">Data final</span>
+					</label>
+					<input
+						id="dataFim"
+						type="date"
+						class="input input-bordered"
+						bind:value={dataFimRelatorio}
+					/>
+				</div>
+				<div class="flex items-end md:col-span-2">
+					<button
+						class="btn btn-accent w-full gap-2"
+						type="button"
+						onclick={gerarRelatorioImpressao}
+					>
+						<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 17v4H7v-4m10 0h2a2 2 0 002-2v-5a2 2 0 00-2-2h-2V6a2 2 0 00-2-2H9a2 2 0 00-2 2v2H5a2 2 0 00-2 2v5a2 2 0 002 2h2m10 0H7"
+							/>
+						</svg>
+						Imprimir programação de Férias
+					</button>
+				</div>
+			</div>
+			<p class="text-base-content/60 text-xs">
+				O relatório será aberto em uma nova aba com formatação própria para impressão. Verifique se
+				o bloqueador de pop-ups está desabilitado para o domínio.
+			</p>
+		</div>
+	</div>
+
+	<!-- Lista de Solicitações -->
+	<div class="card bg-base-100 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				Solicitações ({solicitacoesFiltradas.length})
+			</h2>
+
+			{#if solicitacoesFiltradas.length === 0}
+				<div class="alert">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="stroke-info h-6 w-6 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						></path>
+					</svg>
+					<span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+				</div>
+			{:else}
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead class="bg-base-200/60">
+							<tr class="text-base-content/70 text-sm tracking-wide uppercase">
+								<th>Funcionário</th>
+								<th>Time</th>
+								<th>Ano</th>
+								<th>Períodos</th>
+								<th>Total Dias</th>
+								<th>Status</th>
+								<th>Solicitado em</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each solicitacoesFiltradas as solicitacao (solicitacao._id)}
+								<tr>
+									<td>
+										<div class="flex items-center gap-3">
+											<div class="avatar placeholder">
+												<div class="bg-primary text-primary-content w-10 rounded-full">
+													<span class="text-xs"
+														>{solicitacao.funcionario?.nome.substring(0, 2).toUpperCase()}</span
+													>
+												</div>
+											</div>
+											<div>
+												<div class="font-bold">{solicitacao.funcionario?.nome}</div>
+												<div class="text-xs opacity-50">
+													{solicitacao.funcionario?.matricula || 'S/N'}
+												</div>
+											</div>
+										</div>
+									</td>
+									<td>
+										{#if solicitacao.time}
+											<div class="badge badge-outline" style="border-color: {solicitacao.time.cor}">
+												{solicitacao.time.nome}
+											</div>
+										{:else}
+											<span class="text-base-content/50 text-xs">Sem time</span>
+										{/if}
+									</td>
+									<td>{solicitacao.anoReferencia}</td>
+									<td>{solicitacao.periodos.length} período(s)</td>
+									<td class="text-base-content font-bold"
+										>{totalDiasSolicitacao(solicitacao)} dia(s)</td
+									>
+									<td>
+										<div class={`badge ${getStatusBadge(solicitacao.status)}`}>
+											{getStatusTexto(solicitacao.status)}
+										</div>
+									</td>
+									<td class="text-xs">{formatarData(solicitacao._creationTime)}</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Visualizações e Relatórios -->
+	<div class="mb-6 space-y-6" bind:this={chartContainer}>
+		<!-- Gráfico 1 -->
+		<div class="card bg-base-100 border-primary/20 border shadow-lg">
+			<div class="card-body space-y-4 p-6">
+				<div class="flex items-center gap-3">
+					<div class="bg-primary/10 rounded-lg p-2.5">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 4a1 1 0 011-1h4a1 1 0 01.894.553L10.382 6H19a1 1 0 011 1v2M3 4v16a1 1 0 001 1h16a1 1 0 001-1V9m-9 4h4m-4 4h4m-8-4h.01M9 17h.01"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h3 class="text-base-content text-lg font-semibold">
+							Dias de Férias Programados por Mês
+						</h3>
+						<p class="text-base-content/60 text-sm">
+							Somatório de dias planejados considerando a data de início de cada período
+						</p>
+					</div>
+				</div>
+				<div class="bg-base-200/40 w-full overflow-x-auto rounded-xl p-4">
+					<svg
+						width={chartWidth}
+						height={chartHeight}
+						role="img"
+						aria-label="Gráfico de área com os dias de férias por mês"
+					>
+						{#if periodosPorMesAtivos.length === 0}
+							<text x="24" y="48" class="opacity-60">Sem dados registrados até o momento.</text>
+						{:else}
+							{@const maxDias = Math.max(
+								1,
+								getMax(periodosPorMesAtivos, (p) => p.totalDias)
+							)}
+							{#each [0, 1, 2, 3, 4, 5] as passo (passo)}
+								{@const valor = Math.round((maxDias / 5) * passo)}
+								{@const y = chartHeight - padding.bottom - scaleY(valor, maxDias)}
+								<line
+									x1={padding.left}
+									y1={y}
+									x2={chartWidth - padding.right}
+									y2={y}
+									stroke="currentColor"
+									stroke-opacity="0.08"
+									stroke-dasharray="4,4"
+								/>
+								<text
+									x={padding.left - 10}
+									y={y + 4}
+									text-anchor="end"
+									class="text-[10px] font-medium opacity-70"
+								>
+									{valor} dia(s)
+								</text>
+							{/each}
+							<line
+								x1={padding.left}
+								y1={chartHeight - padding.bottom}
+								x2={chartWidth - padding.right}
+								y2={chartHeight - padding.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
+							<line
+								x1={padding.left}
+								y1={padding.top}
+								x2={padding.left}
+								y2={chartHeight - padding.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
+							<path
+								d={createAreaPath(periodosPorMesAtivos, (p) => p.totalDias, maxDias)}
+								fill="url(#gradient-ferias-mes)"
+								opacity="0.75"
+							/>
+							<polyline
+								points={periodosPorMesAtivos
+									.map((item, index) => {
+										const x = getX(index, periodosPorMesAtivos.length);
+										const y = chartHeight - padding.bottom - scaleY(item.totalDias, maxDias);
+										return `${x},${y}`;
+										('');
+									})
+									.join(' ')}
+								fill="none"
+								stroke="rgb(59, 130, 246)"
+								stroke-width="3"
+								stroke-linecap="round"
+							/>
+							{#each periodosPorMesAtivos as item, index (item.label)}
+								{@const x = getX(index, periodosPorMesAtivos.length)}
+								{@const y = chartHeight - padding.bottom - scaleY(item.totalDias, maxDias)}
+								<circle
+									cx={x}
+									cy={y}
+									r="5"
+									fill="rgb(59, 130, 246)"
+									stroke="white"
+									stroke-width="2"
+								/>
+								<text
+									{x}
+									y={y - 14}
+									text-anchor="middle"
+									class="fill-primary text-[10px] font-semibold"
+								>
+									{item.totalDias} dia(s)
+								</text>
+								<text {x} y={y + 16} text-anchor="middle" class="fill-base-content/60 text-[9px]">
+									{item.quantidadePeriodos} período(s)
+								</text>
+							{/each}
+							{#each periodosPorMesAtivos as item, index (item.label)}
+								{@const x = getX(index, periodosPorMesAtivos.length)}
+								<foreignObject
+									x={x - 42}
+									y={chartHeight - padding.bottom + 14}
+									width="84"
+									height="56"
+								>
+									<div
+										class="text-base-content/80 text-center text-[11px] leading-tight font-medium"
+									>
+										{item.label}
+									</div>
+								</foreignObject>
+							{/each}
+							<defs>
+								<linearGradient id="gradient-ferias-mes" x1="0%" y1="0%" x2="0%" y2="100%">
+									<stop offset="0%" style="stop-color:rgb(59,130,246);stop-opacity:0.85" />
+									<stop offset="100%" style="stop-color:rgb(59,130,246);stop-opacity:0.08" />
+								</linearGradient>
+							</defs>
+						{/if}
+					</svg>
+					{#if periodosPorMes.length > 1}
+						<div class="border-base-300/60 bg-base-200/60 mt-4 space-y-2 rounded-xl border p-4">
+							<div
+								class="text-base-content/60 flex flex-wrap items-center justify-between text-xs font-semibold tracking-wide uppercase"
+							>
+								<span>Janela exibida</span>
+								<span class="text-base-content">
+									{periodosPorMes[rangeInicioIndice]?.label ?? '-'}
+									→
+									{periodosPorMes[rangeFimIndice]?.label ?? '-'}
+								</span>
+							</div>
+							<div class="flex flex-col gap-3">
+								<div class="flex items-center gap-3">
+									<label class="text-base-content/70 w-14 text-xs font-medium" for="range-inicio"
+										>Início</label
+									>
+									<input
+										id="range-inicio"
+										type="range"
+										min="0"
+										max={Math.max(periodosPorMes.length - 1, 0)}
+										value={rangeInicioIndice}
+										class="range range-primary flex-1"
+										oninput={handleRangeInicio}
+									/>
+								</div>
+								<div class="flex items-center gap-3">
+									<label class="text-base-content/70 w-14 text-xs font-medium" for="range-fim"
+										>Fim</label
+									>
+									<input
+										id="range-fim"
+										type="range"
+										min="0"
+										max={Math.max(periodosPorMes.length - 1, 0)}
+										value={rangeFimIndice}
+										class="range range-primary flex-1"
+										oninput={handleRangeFim}
+									/>
+								</div>
+							</div>
+							<p class="text-base-content/60 text-[11px]">
+								Ajuste com o mouse os intervalos exibidos no gráfico.
+							</p>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+
+		<!-- Gráfico 2 -->
+		<div class="card bg-base-100 border-secondary/20 border shadow-lg">
+			<div class="card-body space-y-4 p-6">
+				<div class="flex items-center gap-3">
+					<div class="bg-secondary/10 rounded-lg p-2.5">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-secondary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 17v2a2 2 0 002 2h5a2 2 0 002-2v-5M9 17v-4a2 2 0 012-2h2a2 2 0 012 2v4M9 17H7a2 2 0 01-2-2v-4a2 2 0 012-2h2m6-4h2a2 2 0 012 2v2a2 2 0 01-2 2h-2m-6-4v2a2 2 0 002 2h2a2 2 0 002-2V7m-6 0h6"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h3 class="text-base-content text-lg font-semibold">
+							Dias Totais Aprovados por Ano de Referência
+						</h3>
+						<p class="text-base-content/60 text-sm">
+							Volume agregado de dias e número de solicitações por ano
+						</p>
+					</div>
+				</div>
+				<div class="bg-base-200/40 w-full overflow-x-auto rounded-xl p-4">
+					<svg
+						width={chartWidth}
+						height={chartHeight}
+						role="img"
+						aria-label="Gráfico de área com dias aprovados por ano"
+					>
+						{#if solicitacoesPorAno.length === 0}
+							<text x="24" y="48" class="opacity-60"
+								>Ainda não há solicitações registradas para exibição.</text
+							>
+						{:else}
+							{@const maxDiasAno = Math.max(
+								1,
+								getMax(solicitacoesPorAno, (item) => item.diasTotais)
+							)}
+							{#each [0, 1, 2, 3, 4, 5] as passo (passo)}
+								{@const valor = Math.round((maxDiasAno / 5) * passo)}
+								{@const y = chartHeight - padding.bottom - scaleY(valor, maxDiasAno)}
+								<line
+									x1={padding.left}
+									y1={y}
+									x2={chartWidth - padding.right}
+									y2={y}
+									stroke="currentColor"
+									stroke-opacity="0.08"
+									stroke-dasharray="4,4"
+								/>
+								<text
+									x={padding.left - 10}
+									y={y + 4}
+									text-anchor="end"
+									class="text-[10px] font-medium opacity-70"
+								>
+									{valor} dia(s)
+								</text>
+							{/each}
+							<line
+								x1={padding.left}
+								y1={chartHeight - padding.bottom}
+								x2={chartWidth - padding.right}
+								y2={chartHeight - padding.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
+							<line
+								x1={padding.left}
+								y1={padding.top}
+								x2={padding.left}
+								y2={chartHeight - padding.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
+							<path
+								d={createAreaPath(solicitacoesPorAno, (item) => item.diasTotais, maxDiasAno)}
+								fill="url(#gradient-ferias-ano)"
+								opacity="0.75"
+							/>
+							<polyline
+								points={solicitacoesPorAno
+									.map((item, index) => {
+										const x = getX(index, solicitacoesPorAno.length);
+										const y = chartHeight - padding.bottom - scaleY(item.diasTotais, maxDiasAno);
+										return `${x},${y}`;
+									})
+									.join(' ')}
+								fill="none"
+								stroke="rgb(16, 185, 129)"
+								stroke-width="3"
+								stroke-linecap="round"
+							/>
+							{#each solicitacoesPorAno as item, index (item.ano)}
+								{@const x = getX(index, solicitacoesPorAno.length)}
+								{@const y = chartHeight - padding.bottom - scaleY(item.diasTotais, maxDiasAno)}
+								<circle
+									cx={x}
+									cy={y}
+									r="5"
+									fill="rgb(16, 185, 129)"
+									stroke="white"
+									stroke-width="2"
+								/>
+								<text
+									{x}
+									y={y - 14}
+									text-anchor="middle"
+									class="fill-secondary text-[10px] font-semibold"
+								>
+									{item.diasTotais} dia(s)
+								</text>
+								<text {x} y={y + 16} text-anchor="middle" class="fill-base-content/60 text-[9px]">
+									{item.solicitacoes} solicitação(ões)
+								</text>
+							{/each}
+							{#each solicitacoesPorAno as item, index (item.ano)}
+								{@const x = getX(index, solicitacoesPorAno.length)}
+								<foreignObject
+									x={x - 34}
+									y={chartHeight - padding.bottom + 14}
+									width="68"
+									height="48"
+								>
+									<div
+										class="text-base-content/80 text-center text-[11px] leading-tight font-medium"
+									>
+										{item.ano}
+									</div>
+								</foreignObject>
+							{/each}
+							<defs>
+								<linearGradient id="gradient-ferias-ano" x1="0%" y1="0%" x2="0%" y2="100%">
+									<stop offset="0%" style="stop-color:rgb(16,185,129);stop-opacity:0.85" />
+									<stop offset="100%" style="stop-color:rgb(16,185,129);stop-opacity:0.08" />
+								</linearGradient>
+							</defs>
+						{/if}
+					</svg>
+				</div>
+			</div>
+		</div>
+
+		<!-- Gráfico 3 -->
+		<div class="card bg-base-100 border-primary/20 border shadow-lg">
+			<div class="card-body space-y-4 p-6">
+				<div class="flex items-center gap-3">
+					<div class="bg-secondary/10 rounded-lg p-2.5">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-secondary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h3 class="text-base-content text-lg font-semibold">Calendário Geral de Férias</h3>
+						<p class="text-base-content/60 text-sm">
+							Visualize os períodos aprovados diretamente no calendário interativo
+						</p>
+					</div>
+				</div>
+				<div class="bg-base-200/40 w-full overflow-hidden rounded-xl p-4">
+					<div class="fc fc-media-screen" bind:this={calendarioContainer}></div>
+				</div>
+			</div>
+		</div>
+	</div>
 </main>
+<footer
+	class="border-base-300/60 bg-base-100 text-base-content/70 mt-8 border-t py-6 text-center text-sm"
+>
+	SGSE - Sistema de Gerenciamento da Secretaria de Esportes.
+</footer>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
index 6f339f1..4b98e09 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
@@ -25,7 +25,6 @@
   let documentosUrls = $state<Record<string, string | null>>({});
   let loading = $state(true);
   let showPrintModal = $state(false);
-  let showPrintFinanceiro = $state(false);
 
   async function load() {
     try {
@@ -41,6 +40,9 @@
 
       funcionario = data;
       simbolo = data.simbolo;
+      if (simbolo) {
+        funcionario = { ...funcionario, simbolo };
+      }
       cursos = data.cursos || [];
 
       // Carregar URLs dos documentos
@@ -200,26 +202,6 @@
             </svg>
             Imprimir Ficha
           </button>
-          <button
-            class="btn btn-info gap-2"
-            onclick={() => (showPrintFinanceiro = true)}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            Imprimir Dados Financeiros
-          </button>
         </div>
       </div>
     </div>
@@ -904,138 +886,5 @@
     <PrintModal {funcionario} onClose={() => (showPrintModal = false)} />
   {/if}
 
-  <!-- Modal de Impressão Dados Financeiros -->
-  {#if showPrintFinanceiro && simbolo}
-    <dialog class="modal modal-open">
-      <div class="modal-box max-w-2xl">
-        <h3 class="font-bold text-2xl mb-6 border-b pb-3">
-          Dados Financeiros - {funcionario.nome}
-        </h3>
-
-        <div class="space-y-4 print:space-y-2" id="dados-financeiros-print">
-          <!-- Informações Básicas -->
-          <div class="grid grid-cols-2 gap-4">
-            <div>
-              <p class="text-sm font-semibold text-base-content/70">Nome</p>
-              <p class="text-lg">{funcionario.nome}</p>
-            </div>
-            <div>
-              <p class="text-sm font-semibold text-base-content/70">
-                Matrícula
-              </p>
-              <p class="text-lg">{funcionario.matricula || "N/A"}</p>
-            </div>
-            <div>
-              <p class="text-sm font-semibold text-base-content/70">CPF</p>
-              <p class="text-lg">{maskCPF(funcionario.cpf)}</p>
-            </div>
-            <div>
-              <p class="text-sm font-semibold text-base-content/70">
-                Data Admissão
-              </p>
-              <p class="text-lg">{funcionario.admissaoData || "N/A"}</p>
-            </div>
-          </div>
-
-          <div class="divider"></div>
-
-          <!-- Dados Financeiros -->
-          <div>
-            <h4 class="font-bold text-lg mb-3">Remuneração</h4>
-            <div class="space-y-2">
-              <div class="flex justify-between p-2 bg-base-200 rounded">
-                <span class="font-semibold">Símbolo:</span>
-                <span>{simbolo.nome}</span>
-              </div>
-              <div class="flex justify-between p-2 bg-base-200 rounded">
-                <span class="font-semibold">Tipo:</span>
-                <span
-                  >{simbolo.tipo === "cargo_comissionado"
-                    ? "Cargo Comissionado"
-                    : "Função Gratificada"}</span
-                >
-              </div>
-              {#if funcionario.simboloTipo === "cargo_comissionado"}
-                <div class="flex justify-between p-2 bg-info/10 rounded">
-                  <span class="font-semibold">Vencimento:</span>
-                  <span class="text-info font-bold">R$ {simbolo.vencValor}</span
-                  >
-                </div>
-                <div class="flex justify-between p-2 bg-warning/10 rounded">
-                  <span class="font-semibold">Representação:</span>
-                  <span class="text-warning font-bold"
-                    >R$ {simbolo.repValor}</span
-                  >
-                </div>
-              {/if}
-              <div
-                class="flex justify-between p-3 bg-success/20 rounded border-2 border-success/40"
-              >
-                <span class="font-bold text-lg">TOTAL:</span>
-                <span class="text-success font-bold text-2xl"
-                  >R$ {simbolo.valor}</span
-                >
-              </div>
-            </div>
-          </div>
-
-          {#if funcionario.contaBradescoNumero}
-            <div class="divider"></div>
-            <div>
-              <h4 class="font-bold text-lg mb-3">Dados Bancários</h4>
-              <div class="space-y-2">
-                <div class="flex justify-between p-2 bg-base-200 rounded">
-                  <span class="font-semibold">Banco:</span>
-                  <span>Bradesco</span>
-                </div>
-                <div class="flex justify-between p-2 bg-base-200 rounded">
-                  <span class="font-semibold">Agência:</span>
-                  <span>{funcionario.contaBradescoAgencia || "N/A"}</span>
-                </div>
-                <div class="flex justify-between p-2 bg-base-200 rounded">
-                  <span class="font-semibold">Conta:</span>
-                  <span
-                    >{funcionario.contaBradescoNumero}{funcionario.contaBradescoDV
-                      ? `-${funcionario.contaBradescoDV}`
-                      : ""}</span
-                  >
-                </div>
-              </div>
-            </div>
-          {/if}
-        </div>
-
-        <div class="modal-action">
-          <button class="btn btn-primary gap-2" onclick={() => window.print()}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
-              />
-            </svg>
-            Imprimir
-          </button>
-          <button
-            class="btn btn-ghost"
-            onclick={() => (showPrintFinanceiro = false)}>Fechar</button
-          >
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop">
-        <button
-          type="button"
-          onclick={() => (showPrintFinanceiro = false)}
-          aria-label="Fechar modal">Fechar</button
-        >
-      </form>
-    </dialog>
-  {/if}
+  <!-- Modal de Impressão Dados Financeiros removido -->
 {/if}
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
index 196dc19..f38dca4 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
@@ -84,6 +84,14 @@
   let pertenceOrgaoPublico = $state(false);
   let orgaoOrigem = $state("");
   let aposentado = $state("nao");
+  let regimeTrabalho = $state("estatutario_pe");
+
+  const REGIME_TRABALHO_OPTIONS = [
+    { value: "clt", label: "CLT" },
+    { value: "estatutario_municipal", label: "Estatutário Municipal" },
+    { value: "estatutario_pe", label: "Estatutário PE" },
+    { value: "estatutario_federal", label: "Estatutário Federal" }
+  ] as const;
   
   // Dados Bancários
   let contaBradescoNumero = $state("");
@@ -176,6 +184,7 @@
       pertenceOrgaoPublico = func.pertenceOrgaoPublico || false;
       orgaoOrigem = func.orgaoOrigem || "";
       aposentado = func.aposentado || "nao";
+      regimeTrabalho = func.regimeTrabalho || "estatutario_pe";
       
       contaBradescoNumero = func.contaBradescoNumero || "";
       contaBradescoDV = func.contaBradescoDV || "";
@@ -372,6 +381,7 @@
         contaBradescoNumero: contaBradescoNumero || undefined,
         contaBradescoDV: contaBradescoDV || undefined,
         contaBradescoAgencia: contaBradescoAgencia || undefined,
+        regimeTrabalho,
         
         ...Object.fromEntries(
           Object.entries(documentosStorage).map(([key, value]) => [key, value as any])
@@ -1207,6 +1217,24 @@
             />
           </div>
 
+          <!-- Regime de Trabalho -->
+          <div class="form-control">
+            <label class="label" for="regimeTrabalho">
+              <span class="label-text font-medium">Regime do Funcionário <span class="text-error">*</span></span>
+            </label>
+            <select
+              id="regimeTrabalho"
+              class="select select-bordered w-full"
+              bind:value={regimeTrabalho}
+              required
+            >
+              <option value="">Selecione...</option>
+              {#each REGIME_TRABALHO_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+
           <!-- Pertence a Órgão Público -->
           <div class="form-control lg:col-span-3">
             <label class="label cursor-pointer justify-start gap-4">
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte
index d7cde28..ef48474 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
@@ -80,6 +80,14 @@
   let pertenceOrgaoPublico = $state(false);
   let orgaoOrigem = $state("");
   let aposentado = $state("nao");
+  let regimeTrabalho = $state("estatutario_pe");
+
+  const REGIME_TRABALHO_OPTIONS = [
+    { value: "clt", label: "CLT" },
+    { value: "estatutario_municipal", label: "Estatutário Municipal" },
+    { value: "estatutario_pe", label: "Estatutário PE" },
+    { value: "estatutario_federal", label: "Estatutário Federal" }
+  ] as const;
   
   // Dados Bancários
   let contaBradescoNumero = $state("");
@@ -310,6 +318,7 @@
         
         // Cargo e Vínculo
         descricaoCargo: descricaoCargo || undefined,
+        regimeTrabalho: regimeTrabalho,
         nomeacaoPortaria: nomeacaoPortaria || undefined,
         nomeacaoData: nomeacaoData || undefined,
         nomeacaoDOE: nomeacaoDOE || undefined,
@@ -1375,6 +1384,24 @@
             />
           </div>
 
+          <!-- Regime de Trabalho -->
+          <div class="form-control">
+            <label class="label" for="regimeTrabalho">
+              <span class="label-text font-medium">Regime do Funcionário</span>
+            </label>
+            <select
+              id="regimeTrabalho"
+              class="select select-bordered w-full"
+              bind:value={regimeTrabalho}
+              required
+            >
+              <option value="">Selecione...</option>
+              {#each REGIME_TRABALHO_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+
           <!-- Pertence a Órgão Público -->
           <div class="form-control lg:col-span-3">
             <label class="label cursor-pointer justify-start gap-4">
diff --git a/bun.lock b/bun.lock
index d6ff16b..0b14041 100644
--- a/bun.lock
+++ b/bun.lock
@@ -90,6 +90,7 @@
         "@types/pako": "^2.0.4",
         "@types/raf": "^3.4.3",
         "@types/trusted-types": "^2.0.7",
+        "eslint": "catalog:",
         "typescript": "catalog:",
       },
     },
diff --git a/packages/backend/convex/funcionarios.ts b/packages/backend/convex/funcionarios.ts
index ed8f955..c85e216 100644
--- a/packages/backend/convex/funcionarios.ts
+++ b/packages/backend/convex/funcionarios.ts
@@ -36,6 +36,15 @@ const aposentadoValidator = v.optional(
   v.union(v.literal("nao"), v.literal("funape_ipsep"), v.literal("inss"))
 );
 
+const regimeTrabalhoValidator = v.optional(
+  v.union(
+    v.literal("clt"),
+    v.literal("estatutario_pe"),
+    v.literal("estatutario_federal"),
+    v.literal("estatutario_municipal")
+  )
+);
+
 export const getAll = query({
   args: {},
   handler: async (ctx) => {
@@ -282,6 +291,7 @@ export const update = mutation({
     nomeacaoPortaria: v.optional(v.string()),
     nomeacaoData: v.optional(v.string()),
     nomeacaoDOE: v.optional(v.string()),
+    regimeTrabalho: regimeTrabalhoValidator,
     pertenceOrgaoPublico: v.optional(v.boolean()),
     orgaoOrigem: v.optional(v.string()),
     aposentado: aposentadoValidator,
diff --git a/packages/backend/convex/saldoFerias.ts b/packages/backend/convex/saldoFerias.ts
index 9a7fc56..0e59829 100644
--- a/packages/backend/convex/saldoFerias.ts
+++ b/packages/backend/convex/saldoFerias.ts
@@ -31,6 +31,11 @@ import type { QueryCtx } from "./_generated/server";
  * - Servidor com mais de 10 anos: pode acumular até 2 períodos
  * - Preferência: férias no período de 20/12 a 10/01 para docentes
  * - Gestante: pode antecipar ou prorrogar férias
+ *
+ * ============================================
+ * REGRAS SERVIDOR PÚBLICO MUNICIPAL
+ * ============================================
+ * - Seguem as mesmas diretrizes do regime estadual acima
  */
 
 type RegimeTrabalho = "clt" | "estatutario_pe" | "estatutario_federal" | "estatutario_municipal";
@@ -63,7 +68,7 @@ const REGIMES_CONFIG = {
   },
   estatutario_municipal: {
     nome: "Servidor Público Municipal",
-    maxPeriodos: 3,
+    maxPeriodos: 2,
     minDiasPeriodo: 10,
     minDiasPeriodoPrincipal: null,
     abonoPermitido: false,
@@ -364,7 +369,7 @@ export const validarSolicitacao = query({
     }
 
     // Validação 7: Servidor PE - aviso sobre período preferencial para docentes
-    if (regime === "estatutario_pe") {
+    if (regime === "estatutario_pe" || regime === "estatutario_municipal") {
       for (const periodo of args.periodos) {
         const mes = new Date(periodo.dataInicio).getMonth() + 1;
         if (mes === 12 || mes === 1) {