refactor: streamline Svelte components and enhance user feedback

- Refactored multiple Svelte components, including AprovarAusencias, AprovarFerias, and ErrorModal, to improve code clarity and maintainability.
- Updated modal interactions and error handling messages for better user feedback.
- Cleaned up component structures and standardized formatting for consistency across the codebase.
- Enhanced styling and layout adjustments to align with the new design system.

apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte

@@ -1,503 +1,486 @@
 <script lang="ts">
-  import { useConvexClient, useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import CalendarioAusencias from "./CalendarioAusencias.svelte";
-  import ErrorModal from "../ErrorModal.svelte";
-  import { toast } from "svelte-sonner";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import CalendarioAusencias from './CalendarioAusencias.svelte';
+	import ErrorModal from '../ErrorModal.svelte';
+	import { toast } from 'svelte-sonner';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  interface Props {
-    funcionarioId: Id<"funcionarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		funcionarioId: Id<'funcionarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
+	let { funcionarioId, onSucesso, onCancelar }: Props = $props();
 
-  // Cliente Convex
-  const client = useConvexClient();
+	// Cliente Convex
+	const client = useConvexClient();
 
-  // Estado do wizard
-  let passoAtual = $state(1);
-  const totalPassos = 2;
+	// Estado do wizard
+	let passoAtual = $state(1);
+	const totalPassos = 2;
 
-  // Dados da solicitação
-  let dataInicio = $state<string>("");
-  let dataFim = $state<string>("");
-  let motivo = $state("");
-  let processando = $state(false);
+	// Dados da solicitação
+	let dataInicio = $state<string>('');
+	let dataFim = $state<string>('');
+	let motivo = $state('');
+	let processando = $state(false);
 
-  // Estados para modal de erro
-  let mostrarModalErro = $state(false);
-  let mensagemErroModal = $state("");
-  let detalhesErroModal = $state("");
+	// Estados para modal de erro
+	let mostrarModalErro = $state(false);
+	let mensagemErroModal = $state('');
+	let detalhesErroModal = $state('');
 
-  // Buscar ausências existentes para exibir no calendário
-  const ausenciasExistentesQuery = useQuery(
-    api.ausencias.listarMinhasSolicitacoes,
-    {
-      funcionarioId,
-    },
-  );
+	// Buscar ausências existentes para exibir no calendário
+	const ausenciasExistentesQuery = useQuery(api.ausencias.listarMinhasSolicitacoes, {
+		funcionarioId
+	});
 
-  // Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
-  const ausenciasExistentes = $derived(
-    (ausenciasExistentesQuery?.data || [])
-      .filter(
-        (a) => a.status === "aprovado" || a.status === "aguardando_aprovacao",
-      )
-      .map((a) => ({
-        dataInicio: a.dataInicio,
-        dataFim: a.dataFim,
-        status: a.status as "aguardando_aprovacao" | "aprovado",
-      })),
-  );
+	// Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
+	const ausenciasExistentes = $derived(
+		(ausenciasExistentesQuery?.data || [])
+			.filter((a) => a.status === 'aprovado' || a.status === 'aguardando_aprovacao')
+			.map((a) => ({
+				dataInicio: a.dataInicio,
+				dataFim: a.dataFim,
+				status: a.status as 'aguardando_aprovacao' | 'aprovado'
+			}))
+	);
 
-  // Calcular dias selecionados
-  function calcularDias(inicio: string, fim: string): number {
-    if (!inicio || !fim) return 0;
-    const dInicio = new Date(inicio);
-    const dFim = new Date(fim);
-    const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
-    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
-  }
+	// Calcular dias selecionados
+	function calcularDias(inicio: string, fim: string): number {
+		if (!inicio || !fim) return 0;
+		const dInicio = new Date(inicio);
+		const dFim = new Date(fim);
+		const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
+		return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  const totalDias = $derived(calcularDias(dataInicio, dataFim));
+	const totalDias = $derived(calcularDias(dataInicio, dataFim));
 
-  // Funções de navegação
-  function proximoPasso() {
-    if (passoAtual === 1) {
-      if (!dataInicio || !dataFim) {
-        toast.error("Selecione o período de ausência no calendário");
-        return;
-      }
+	// Funções de navegação
+	function proximoPasso() {
+		if (passoAtual === 1) {
+			if (!dataInicio || !dataFim) {
+				toast.error('Selecione o período de ausência no calendário');
+				return;
+			}
 
-      const hoje = new Date();
-      hoje.setHours(0, 0, 0, 0);
-      const inicio = new Date(dataInicio);
+			const hoje = new Date();
+			hoje.setHours(0, 0, 0, 0);
+			const inicio = new Date(dataInicio);
 
-      if (inicio < hoje) {
-        toast.error("A data de início não pode ser no passado");
-        return;
-      }
+			if (inicio < hoje) {
+				toast.error('A data de início não pode ser no passado');
+				return;
+			}
 
-      if (new Date(dataFim) < new Date(dataInicio)) {
-        toast.error("A data de fim deve ser maior ou igual à data de início");
-        return;
-      }
-    }
+			if (new Date(dataFim) < new Date(dataInicio)) {
+				toast.error('A data de fim deve ser maior ou igual à data de início');
+				return;
+			}
+		}
 
-    if (passoAtual < totalPassos) {
-      passoAtual++;
-    }
-  }
+		if (passoAtual < totalPassos) {
+			passoAtual++;
+		}
+	}
 
-  function passoAnterior() {
-    if (passoAtual > 1) {
-      passoAtual--;
-    }
-  }
+	function passoAnterior() {
+		if (passoAtual > 1) {
+			passoAtual--;
+		}
+	}
 
-  async function enviarSolicitacao() {
-    if (!dataInicio || !dataFim) {
-      toast.error("Selecione o período de ausência");
-      return;
-    }
+	async function enviarSolicitacao() {
+		if (!dataInicio || !dataFim) {
+			toast.error('Selecione o período de ausência');
+			return;
+		}
 
-    if (!motivo.trim() || motivo.trim().length < 10) {
-      toast.error("O motivo deve ter no mínimo 10 caracteres");
-      return;
-    }
+		if (!motivo.trim() || motivo.trim().length < 10) {
+			toast.error('O motivo deve ter no mínimo 10 caracteres');
+			return;
+		}
 
-    try {
-      processando = true;
-      mostrarModalErro = false;
-      mensagemErroModal = "";
+		try {
+			processando = true;
+			mostrarModalErro = false;
+			mensagemErroModal = '';
 
-      await client.mutation(api.ausencias.criarSolicitacao, {
-        funcionarioId,
-        dataInicio,
-        dataFim,
-        motivo: motivo.trim(),
-      });
+			await client.mutation(api.ausencias.criarSolicitacao, {
+				funcionarioId,
+				dataInicio,
+				dataFim,
+				motivo: motivo.trim()
+			});
 
-      toast.success("Solicitação de ausência criada com sucesso!");
+			toast.success('Solicitação de ausência criada com sucesso!');
 
-      if (onSucesso) {
-        onSucesso();
-      }
-    } catch (error) {
-      console.error("Erro ao criar solicitação:", error);
-      const mensagemErro =
-        error instanceof Error ? error.message : String(error);
+			if (onSucesso) {
+				onSucesso();
+			}
+		} catch (error) {
+			console.error('Erro ao criar solicitação:', error);
+			const mensagemErro = error instanceof Error ? error.message : String(error);
 
-      // Verificar se é erro de sobreposição de período
-      if (
-        mensagemErro.includes("Já existe uma solicitação") ||
-        mensagemErro.includes("já existe") ||
-        mensagemErro.includes("solicitação aprovada ou pendente")
-      ) {
-        mensagemErroModal = "Não é possível criar esta solicitação.";
-        detalhesErroModal = `Já existe uma solicitação aprovada ou pendente para o período selecionado:\n\nPeríodo selecionado: ${new Date(dataInicio).toLocaleDateString("pt-BR")} até ${new Date(dataFim).toLocaleDateString("pt-BR")}\n\nPor favor, escolha um período diferente ou aguarde a resposta da solicitação existente.`;
-        mostrarModalErro = true;
-      } else {
-        // Outros erros continuam usando toast
-        toast.error(mensagemErro);
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			// Verificar se é erro de sobreposição de período
+			if (
+				mensagemErro.includes('Já existe uma solicitação') ||
+				mensagemErro.includes('já existe') ||
+				mensagemErro.includes('solicitação aprovada ou pendente')
+			) {
+				mensagemErroModal = 'Não é possível criar esta solicitação.';
+				detalhesErroModal = `Já existe uma solicitação aprovada ou pendente para o período selecionado:\n\nPeríodo selecionado: ${new Date(dataInicio).toLocaleDateString('pt-BR')} até ${new Date(dataFim).toLocaleDateString('pt-BR')}\n\nPor favor, escolha um período diferente ou aguarde a resposta da solicitação existente.`;
+				mostrarModalErro = true;
+			} else {
+				// Outros erros continuam usando toast
+				toast.error(mensagemErro);
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalErro() {
-    mostrarModalErro = false;
-    mensagemErroModal = "";
-    detalhesErroModal = "";
-  }
+	function fecharModalErro() {
+		mostrarModalErro = false;
+		mensagemErroModal = '';
+		detalhesErroModal = '';
+	}
 
-  function handlePeriodoSelecionado(periodo: {
-    dataInicio: string;
-    dataFim: string;
-  }) {
-    dataInicio = periodo.dataInicio;
-    dataFim = periodo.dataFim;
-  }
+	function handlePeriodoSelecionado(periodo: { dataInicio: string; dataFim: string }) {
+		dataInicio = periodo.dataInicio;
+		dataFim = periodo.dataFim;
+	}
 </script>
 
 <div class="wizard-ausencia">
-  <!-- Header -->
-  <div class="mb-6">
-    <p class="text-base-content/70">
-      Solicite uma ausência para assuntos particulares
-    </p>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<p class="text-base-content/70">Solicite uma ausência para assuntos particulares</p>
+	</div>
 
-  <!-- Indicador de progresso -->
-  <div class="steps mb-8">
-    <div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
-      <div class="step-item">
-        <div class="step-marker">
-          {#if passoAtual > 1}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          {:else}
-            {passoAtual}
-          {/if}
-        </div>
-        <div class="step-content">
-          <div class="step-title">Selecionar Período</div>
-          <div class="step-description">Escolha as datas no calendário</div>
-        </div>
-      </div>
-    </div>
-    <div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
-      <div class="step-item">
-        <div class="step-marker">
-          {#if passoAtual > 2}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          {:else}
-            2
-          {/if}
-        </div>
-        <div class="step-content">
-          <div class="step-title">Informar Motivo</div>
-          <div class="step-description">Descreva o motivo da ausência</div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Indicador de progresso -->
+	<div class="steps mb-8">
+		<div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
+			<div class="step-item">
+				<div class="step-marker">
+					{#if passoAtual > 1}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					{:else}
+						{passoAtual}
+					{/if}
+				</div>
+				<div class="step-content">
+					<div class="step-title">Selecionar Período</div>
+					<div class="step-description">Escolha as datas no calendário</div>
+				</div>
+			</div>
+		</div>
+		<div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
+			<div class="step-item">
+				<div class="step-marker">
+					{#if passoAtual > 2}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					{:else}
+						2
+					{/if}
+				</div>
+				<div class="step-content">
+					<div class="step-title">Informar Motivo</div>
+					<div class="step-description">Descreva o motivo da ausência</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Conteúdo dos passos -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      {#if passoAtual === 1}
-        <!-- Passo 1: Selecionar Período -->
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-2xl font-bold mb-2">Selecione o Período</h3>
-            <p class="text-base-content/70">
-              Clique e arraste no calendário para selecionar o período de
-              ausência
-            </p>
-          </div>
+	<!-- Conteúdo dos passos -->
+	<div class="card bg-base-100 shadow-xl">
+		<div class="card-body">
+			{#if passoAtual === 1}
+				<!-- Passo 1: Selecionar Período -->
+				<div class="space-y-6">
+					<div>
+						<h3 class="mb-2 text-2xl font-bold">Selecione o Período</h3>
+						<p class="text-base-content/70">
+							Clique e arraste no calendário para selecionar o período de ausência
+						</p>
+					</div>
 
-          {#if ausenciasExistentesQuery === undefined}
-            <div class="flex items-center justify-center py-12">
-              <span class="loading loading-spinner loading-lg"></span>
-              <span class="ml-4 text-base-content/70"
-                >Carregando ausências existentes...</span
-              >
-            </div>
-          {:else}
-            <CalendarioAusencias
-              {dataInicio}
-              {dataFim}
-              {ausenciasExistentes}
-              onPeriodoSelecionado={handlePeriodoSelecionado}
-            />
-          {/if}
+					{#if ausenciasExistentesQuery === undefined}
+						<div class="flex items-center justify-center py-12">
+							<span class="loading loading-spinner loading-lg"></span>
+							<span class="text-base-content/70 ml-4">Carregando ausências existentes...</span>
+						</div>
+					{:else}
+						<CalendarioAusencias
+							{dataInicio}
+							{dataFim}
+							{ausenciasExistentes}
+							onPeriodoSelecionado={handlePeriodoSelecionado}
+						/>
+					{/if}
 
-          {#if dataInicio && dataFim}
-            <div class="alert alert-success shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <div>
-                <h4 class="font-bold">Período selecionado!</h4>
-                <p>
-                  De {new Date(dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                  {new Date(dataFim).toLocaleDateString("pt-BR")} ({totalDias} dias)
-                </p>
-              </div>
-            </div>
-          {/if}
-        </div>
-      {:else if passoAtual === 2}
-        <!-- Passo 2: Informar Motivo -->
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-2xl font-bold mb-2">Informe o Motivo</h3>
-            <p class="text-base-content/70">
-              Descreva o motivo da sua solicitação de ausência (mínimo 10
-              caracteres)
-            </p>
-          </div>
+					{#if dataInicio && dataFim}
+						<div class="alert alert-success shadow-lg">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<div>
+								<h4 class="font-bold">Período selecionado!</h4>
+								<p>
+									De {new Date(dataInicio).toLocaleDateString('pt-BR')} até{' '}
+									{new Date(dataFim).toLocaleDateString('pt-BR')} ({totalDias} dias)
+								</p>
+							</div>
+						</div>
+					{/if}
+				</div>
+			{:else if passoAtual === 2}
+				<!-- Passo 2: Informar Motivo -->
+				<div class="space-y-6">
+					<div>
+						<h3 class="mb-2 text-2xl font-bold">Informe o Motivo</h3>
+						<p class="text-base-content/70">
+							Descreva o motivo da sua solicitação de ausência (mínimo 10 caracteres)
+						</p>
+					</div>
 
-          <!-- Resumo do período -->
-          {#if dataInicio && dataFim}
-            <div
-              class="card bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 border-2 border-orange-500/30"
-            >
-              <div class="card-body">
-                <h4 class="card-title text-orange-700 dark:text-orange-400">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
-                  Resumo do Período
-                </h4>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
-                  <div>
-                    <p class="text-sm text-base-content/70">Data Início</p>
-                    <p class="font-bold">
-                      {new Date(dataInicio).toLocaleDateString("pt-BR")}
-                    </p>
-                  </div>
-                  <div>
-                    <p class="text-sm text-base-content/70">Data Fim</p>
-                    <p class="font-bold">
-                      {new Date(dataFim).toLocaleDateString("pt-BR")}
-                    </p>
-                  </div>
-                  <div>
-                    <p class="text-sm text-base-content/70">Total de Dias</p>
-                    <p
-                      class="font-bold text-xl text-orange-600 dark:text-orange-400"
-                    >
-                      {totalDias} dias
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/if}
+					<!-- Resumo do período -->
+					{#if dataInicio && dataFim}
+						<div
+							class="card border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+						>
+							<div class="card-body">
+								<h4 class="card-title text-orange-700 dark:text-orange-400">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
+									</svg>
+									Resumo do Período
+								</h4>
+								<div class="mt-2 grid grid-cols-1 gap-4 md:grid-cols-3">
+									<div>
+										<p class="text-base-content/70 text-sm">Data Início</p>
+										<p class="font-bold">
+											{new Date(dataInicio).toLocaleDateString('pt-BR')}
+										</p>
+									</div>
+									<div>
+										<p class="text-base-content/70 text-sm">Data Fim</p>
+										<p class="font-bold">
+											{new Date(dataFim).toLocaleDateString('pt-BR')}
+										</p>
+									</div>
+									<div>
+										<p class="text-base-content/70 text-sm">Total de Dias</p>
+										<p class="text-xl font-bold text-orange-600 dark:text-orange-400">
+											{totalDias} dias
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/if}
 
-          <!-- Campo de motivo -->
-          <div class="form-control">
-            <label class="label" for="motivo">
-              <span class="label-text font-bold">Motivo da Ausência</span>
-              <span class="label-text-alt">
-                {motivo.trim().length}/10 caracteres mínimos
-              </span>
-            </label>
-            <textarea
-              id="motivo"
-              class="textarea textarea-bordered h-32 text-lg"
-              placeholder="Descreva o motivo da sua solicitação de ausência..."
-              bind:value={motivo}
-              maxlength={500}
-            ></textarea>
-            <label class="label">
-              <span class="label-text-alt text-base-content/70">
-                Mínimo 10 caracteres. Seja claro e objetivo.
-              </span>
-            </label>
-          </div>
+					<!-- Campo de motivo -->
+					<div class="form-control">
+						<label class="label" for="motivo">
+							<span class="label-text font-bold">Motivo da Ausência</span>
+							<span class="label-text-alt">
+								{motivo.trim().length}/10 caracteres mínimos
+							</span>
+						</label>
+						<textarea
+							id="motivo"
+							class="textarea textarea-bordered h-32 text-lg"
+							placeholder="Descreva o motivo da sua solicitação de ausência..."
+							bind:value={motivo}
+							maxlength={500}
+						></textarea>
+						<label class="label">
+							<span class="label-text-alt text-base-content/70">
+								Mínimo 10 caracteres. Seja claro e objetivo.
+							</span>
+						</label>
+					</div>
 
-          {#if motivo.trim().length > 0 && motivo.trim().length < 10}
-            <div class="alert alert-warning shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
-              <span>O motivo deve ter no mínimo 10 caracteres</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
+					{#if motivo.trim().length > 0 && motivo.trim().length < 10}
+						<div class="alert alert-warning shadow-lg">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+								/>
+							</svg>
+							<span>O motivo deve ter no mínimo 10 caracteres</span>
+						</div>
+					{/if}
+				</div>
+			{/if}
 
-      <!-- Botões de navegação -->
-      <div class="card-actions justify-between mt-6">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={passoAnterior}
-          disabled={passoAtual === 1 || processando}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 mr-2"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
-          Voltar
-        </button>
+			<!-- Botões de navegação -->
+			<div class="card-actions mt-6 justify-between">
+				<button
+					type="button"
+					class="btn"
+					onclick={passoAnterior}
+					disabled={passoAtual === 1 || processando}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="mr-2 h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+					Voltar
+				</button>
 
-        {#if passoAtual < totalPassos}
-          <button
-            type="button"
-            class="btn btn-primary"
-            onclick={proximoPasso}
-            disabled={processando}
-          >
-            Próximo
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 ml-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </button>
-        {:else}
-          <button
-            type="button"
-            class="btn btn-success"
-            onclick={enviarSolicitacao}
-            disabled={processando || motivo.trim().length < 10}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-              Enviando...
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 mr-2"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-              Enviar Solicitação
-            {/if}
-          </button>
-        {/if}
-      </div>
+				{#if passoAtual < totalPassos}
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={proximoPasso}
+						disabled={processando}
+					>
+						Próximo
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="ml-2 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</button>
+				{:else}
+					<button
+						type="button"
+						class="btn btn-success"
+						onclick={enviarSolicitacao}
+						disabled={processando || motivo.trim().length < 10}
+					>
+						{#if processando}
+							<span class="loading loading-spinner"></span>
+							Enviando...
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="mr-2 h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Enviar Solicitação
+						{/if}
+					</button>
+				{/if}
+			</div>
 
-      <!-- Botão cancelar -->
-      <div class="mt-4 text-center">
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm"
-          onclick={() => {
-            if (onCancelar) onCancelar();
-          }}
-          disabled={processando}
-        >
-          Cancelar
-        </button>
-      </div>
-    </div>
-  </div>
+			<!-- Botão cancelar -->
+			<div class="mt-4 text-center">
+				<button
+					type="button"
+					class="btn btn-sm"
+					onclick={() => {
+						if (onCancelar) onCancelar();
+					}}
+					disabled={processando}
+				>
+					Cancelar
+				</button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  open={mostrarModalErro}
-  title="Período Indisponível"
-  message={mensagemErroModal || "Já existe uma solicitação para este período."}
-  details={detalhesErroModal}
-  onClose={fecharModalErro}
+	open={mostrarModalErro}
+	title="Período Indisponível"
+	message={mensagemErroModal || 'Já existe uma solicitação para este período.'}
+	details={detalhesErroModal}
+	onClose={fecharModalErro}
 />
 
 <style>
-  .wizard-ausencia {
-    max-width: 1000px;
-    margin: 0 auto;
-  }
+	.wizard-ausencia {
+		max-width: 1000px;
+		margin: 0 auto;
+	}
 </style>