diff --git a/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
index 8424660..1929feb 100644
--- a/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
@@ -1,848 +1,836 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import { goto } from "$app/navigation";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  type RoleRow = {
-    _id: Id<"roles">;
-    _creationTime: number;
-    nome: string;
-    descricao: string;
-    nivel: number;
-    setor?: string;
-    customizado: boolean;
-    editavel?: boolean;
-    criadoPor?: Id<"usuarios">;
-  };
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  // Carregar lista de roles e catálogo de recursos/ações
-  const rolesQuery = useQuery(api.roles.listar, {});
-  const catalogoQuery = useQuery(api.permissoesAcoes.listarRecursosEAcoes, {});
+	// Carregar lista de roles e catálogo de recursos/ações
+	const rolesQuery = useQuery(api.roles.listar, {});
+	const catalogoQuery = useQuery(api.permissoesAcoes.listarRecursosEAcoes, {});
 
-  let salvando = $state(false);
-  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(
-    null,
-  );
-  let busca = $state("");
-  let filtroRole = $state("");
-  // Controla quais recursos estão expandidos (mostrando as ações) por perfil
-  // Formato: { "roleId-recurso": true/false }
-  let recursosExpandidos: Record<string, boolean> = $state({});
+	let salvando = $state(false);
+	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);
+	let busca = $state('');
+	let filtroRole = $state<Id<'roles'> | ''>('');
+	let modalNovoPerfilAberto = $state(false);
+	let nomeNovoPerfil = $state('');
+	let descricaoNovoPerfil = $state('');
+	let setorNovoPerfil = $state('');
+	let nivelNovoPerfil = $state(3);
+	let roleParaDuplicar = $state<Id<'roles'> | ''>('');
+	let criandoNovoPerfil = $state(false);
 
-  // Gerenciamento de Perfis
-  let modalGerenciarPerfisAberto = $state(false);
-  let perfilSendoEditado = $state<RoleRow | null>(null);
-  let nomeNovoPerfil = $state("");
-  let descricaoNovoPerfil = $state("");
-  let nivelNovoPerfil = $state(3);
-  let processando = $state(false);
+	// Controla quais recursos estão expandidos (mostrando as ações) por perfil
+	// Formato: { "roleId-recurso": true/false }
+	let recursosExpandidos: Record<string, boolean> = $state({});
 
-  // Cache de permissões por role
-  let permissoesPorRole: Record<
-    string,
-    Array<{ recurso: string; acoes: Array<string> }>
-  > = $state({});
+	// Cache de permissões por role
+	let permissoesPorRole: Record<string, Array<{ recurso: string; acoes: Array<string> }>> = $state(
+		{}
+	);
 
-  async function carregarPermissoesRole(roleId: Id<"roles">) {
-    if (permissoesPorRole[roleId]) return;
-    const dados = await client.query(
-      api.permissoesAcoes.listarPermissoesAcoesPorRole,
-      { roleId },
-    );
-    permissoesPorRole[roleId] = dados;
-  }
+	async function carregarPermissoesRole(roleId: Id<'roles'>) {
+		if (permissoesPorRole[roleId]) return;
+		const dados = await client.query(api.permissoesAcoes.listarPermissoesAcoesPorRole, { roleId });
+		permissoesPorRole[roleId] = dados;
+	}
 
-  function toggleRecurso(roleId: Id<"roles">, recurso: string) {
-    const key = `${roleId}-${recurso}`;
-    recursosExpandidos[key] = !recursosExpandidos[key];
-  }
+	function toggleRecurso(roleId: Id<'roles'>, recurso: string) {
+		const key = `${roleId}-${recurso}`;
+		recursosExpandidos[key] = !recursosExpandidos[key];
+	}
 
-  function isRecursoExpandido(roleId: Id<"roles">, recurso: string) {
-    const key = `${roleId}-${recurso}`;
-    return recursosExpandidos[key] ?? false;
-  }
+	function isRecursoExpandido(roleId: Id<'roles'>, recurso: string) {
+		const key = `${roleId}-${recurso}`;
+		return recursosExpandidos[key] ?? false;
+	}
 
-  function mostrarMensagem(tipo: "success" | "error", texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 3000);
-  }
+	function mostrarMensagem(tipo: 'success' | 'error', texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 3000);
+	}
 
-  const rolesFiltradas = $derived.by(() => {
-    if (!rolesQuery.data) return [];
-    let rs = rolesQuery.data; // Removed explicit type annotation
-    if (filtroRole) rs = rs.filter((r) => r._id === filtroRole); // Removed as any
-    if (busca.trim()) {
-      const b = busca.toLowerCase();
-      rs = rs.filter(
-        (r) =>
-          r.descricao.toLowerCase().includes(b) ||
-          r.nome.toLowerCase().includes(b),
-      );
-    }
-    return rs;
-  });
+	const rolesFiltradas = $derived.by(() => {
+		if (!rolesQuery.data) return [];
+		let rs = rolesQuery.data; // Removed explicit type annotation
+		if (filtroRole) rs = rs.filter((r) => r._id === filtroRole); // Removed as any
+		if (busca.trim()) {
+			const b = busca.toLowerCase();
+			rs = rs.filter(
+				(r) => r.descricao.toLowerCase().includes(b) || r.nome.toLowerCase().includes(b)
+			);
+		}
+		return rs;
+	});
 
-  // Carregar permissões para todos os perfis filtrados quando necessário
-  $effect(() => {
-    if (rolesFiltradas && catalogoQuery.data) {
-      for (const roleRow of rolesFiltradas) {
-        if (roleRow.nivel > 1) {
-          carregarPermissoesRole(roleRow._id);
-        }
-      }
-    }
-  });
+	// Carregar permissões para todos os perfis filtrados quando necessário
+	$effect(() => {
+		if (rolesFiltradas && catalogoQuery.data) {
+			for (const roleRow of rolesFiltradas) {
+				if (roleRow.nivel > 1) {
+					carregarPermissoesRole(roleRow._id);
+				}
+			}
+		}
+	});
 
-  async function toggleAcao(
-    roleId: Id<"roles">,
-    recurso: string,
-    acao: string,
-    conceder: boolean,
-  ) {
-    try {
-      salvando = true;
-      await client.mutation(api.permissoesAcoes.atualizarPermissaoAcao, {
-        roleId,
-        recurso,
-        acao,
-        conceder,
-      });
-      // Atualizar cache local
-      const atual = permissoesPorRole[roleId] || [];
-      const entry = atual.find((e) => e.recurso === recurso);
-      if (entry) {
-        const set = new Set(entry.acoes);
-        if (conceder) set.add(acao);
-        else set.delete(acao);
-        entry.acoes = Array.from(set);
-      } else {
-        permissoesPorRole[roleId] = [
-          ...atual,
-          { recurso, acoes: conceder ? [acao] : [] },
-        ];
-      }
-      mostrarMensagem("success", "Permissão atualizada com sucesso!");
-    } catch (error: unknown) {
-      // Changed to unknown
-      const message =
-        error instanceof Error ? error.message : "Erro ao atualizar permissão";
-      mostrarMensagem("error", message);
-    } finally {
-      salvando = false;
-    }
-  }
+	async function toggleAcao(roleId: Id<'roles'>, recurso: string, acao: string, conceder: boolean) {
+		try {
+			salvando = true;
+			await client.mutation(api.permissoesAcoes.atualizarPermissaoAcao, {
+				roleId,
+				recurso,
+				acao,
+				conceder
+			});
+			// Atualizar cache local
+			const atual = permissoesPorRole[roleId] || [];
+			const entry = atual.find((e) => e.recurso === recurso);
+			if (entry) {
+				entry.acoes = conceder
+					? [...entry.acoes.filter((valor) => valor !== acao), acao]
+					: entry.acoes.filter((valor) => valor !== acao);
+			} else if (conceder) {
+				permissoesPorRole[roleId] = [...atual, { recurso, acoes: [acao] }];
+			}
+			mostrarMensagem('success', 'Permissão atualizada com sucesso!');
+		} catch (error: unknown) {
+			// Changed to unknown
+			const message = error instanceof Error ? error.message : 'Erro ao atualizar permissão';
+			mostrarMensagem('error', message);
+		} finally {
+			salvando = false;
+		}
+	}
 
-  function isConcedida(roleId: Id<"roles">, recurso: string, acao: string) {
-    const dados = permissoesPorRole[roleId];
-    const entry = dados?.find((e) => e.recurso === recurso);
-    return entry ? entry.acoes.includes(acao) : false;
-  }
+	function isConcedida(roleId: Id<'roles'>, recurso: string, acao: string) {
+		const dados = permissoesPorRole[roleId];
+		const entry = dados?.find((e) => e.recurso === recurso);
+		return entry ? entry.acoes.includes(acao) : false;
+	}
 
-  function abrirModalCriarPerfil() {
-    nomeNovoPerfil = "";
-    descricaoNovoPerfil = "";
-    nivelNovoPerfil = 3; // Default to a common level
-    perfilSendoEditado = null;
-    modalGerenciarPerfisAberto = true;
-  }
+	const gerarIdentificador = (valor: string) =>
+		valor
+			.normalize('NFD')
+			.replace(/[\u0300-\u036f]/g, '')
+			.trim()
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '_')
+			.replace(/^_+|_+$/g, '')
+			.replace(/_{2,}/g, '_');
 
-  function prepararEdicaoPerfil(role: RoleRow) {
-    perfilSendoEditado = role;
-    nomeNovoPerfil = role.nome;
-    descricaoNovoPerfil = role.descricao;
-    nivelNovoPerfil = role.nivel;
-    modalGerenciarPerfisAberto = true;
-  }
+	const identificadorSugerido = $derived.by(() => gerarIdentificador(nomeNovoPerfil));
 
-  function fecharModalGerenciarPerfis() {
-    modalGerenciarPerfisAberto = false;
-    perfilSendoEditado = null;
-  }
+	const podeSalvarNovoPerfil = $derived.by(() => {
+		const nome = nomeNovoPerfil.trim();
+		const nivel = Number(nivelNovoPerfil);
+		const nivelValido = Number.isFinite(nivel) && nivel >= 0 && nivel <= 10;
+		return nome.length >= 3 && nivelValido && !criandoNovoPerfil;
+	});
 
-  async function criarNovoPerfil() {
-    if (!nomeNovoPerfil.trim()) return;
+	const roleDuplicacaoSelecionada = $derived.by(() => {
+		if (!roleParaDuplicar || !rolesQuery.data) return null;
+		return rolesQuery.data.find((role) => role._id === roleParaDuplicar) ?? null;
+	});
 
-    processando = true;
-    try {
-      const result = await client.mutation(api.roles.criar, {
-        nome: nomeNovoPerfil.trim(),
-        descricao: descricaoNovoPerfil.trim(),
-        nivel: nivelNovoPerfil,
-        customizado: true,
-      });
+	$effect(() => {
+		if (roleParaDuplicar) {
+			carregarPermissoesRole(roleParaDuplicar);
+		}
+	});
 
-      if (result.sucesso) {
-        mostrarMensagem("success", "Perfil criado com sucesso!");
-        nomeNovoPerfil = "";
-        descricaoNovoPerfil = "";
-        nivelNovoPerfil = 3;
-        fecharModalGerenciarPerfis();
-        if (rolesQuery.refetch) {
-          // Verificação para garantir que refetch existe
-          rolesQuery.refetch(); // Atualiza a lista de perfis
-        }
-      } else {
-        mostrarMensagem("error", `Erro ao criar perfil: ${result.erro}`);
-      }
-    } catch (error: unknown) {
-      const message = error instanceof Error ? error.message : String(error);
-      mostrarMensagem("error", `Erro ao criar perfil: ${message}`);
-    } finally {
-      processando = false;
-    }
-  }
+	const resumoPermissoesDuplicacao = $derived.by(() => {
+		if (!roleParaDuplicar) return null;
+		const permissoes = permissoesPorRole[roleParaDuplicar];
+		if (!permissoes) return null;
+		const totalRecursos = permissoes.length;
+		const totalAcoes = permissoes.reduce((acc, item) => acc + item.acoes.length, 0);
+		return { totalRecursos, totalAcoes };
+	});
 
-  async function editarPerfil() {
-    if (!perfilSendoEditado || !nomeNovoPerfil.trim()) return;
+	function abrirModalNovoPerfil() {
+		nomeNovoPerfil = '';
+		descricaoNovoPerfil = '';
+		setorNovoPerfil = '';
+		nivelNovoPerfil = 3;
+		roleParaDuplicar = '';
+		modalNovoPerfilAberto = true;
+	}
 
-    processando = true;
-    try {
-      const result = await client.mutation(api.roles.atualizar, {
-        roleId: perfilSendoEditado._id,
-        nome: nomeNovoPerfil.trim(),
-        descricao: descricaoNovoPerfil.trim(),
-        nivel: nivelNovoPerfil,
-        setor: perfilSendoEditado.setor, // Manter setor existente
-      });
+	function fecharModalNovoPerfil() {
+		modalNovoPerfilAberto = false;
+	}
 
-      if (result.sucesso) {
-        mostrarMensagem("success", "Perfil atualizado com sucesso!");
-        fecharModalGerenciarPerfis();
-        if (rolesQuery.refetch) {
-          // Verificação para garantir que refetch existe
-          rolesQuery.refetch(); // Atualiza a lista de perfis
-        }
-      } else {
-        mostrarMensagem("error", `Erro ao atualizar perfil: ${result.erro}`);
-      }
-    } catch (error: unknown) {
-      const message = error instanceof Error ? error.message : String(error);
-      mostrarMensagem("error", `Erro ao atualizar perfil: ${message}`);
-    } finally {
-      processando = false;
-    }
-  }
+	async function criarNovoPerfil() {
+		if (!podeSalvarNovoPerfil) return;
+
+		const nome = nomeNovoPerfil.trim();
+		const descricao = descricaoNovoPerfil.trim();
+		const setor = setorNovoPerfil.trim();
+		const nivel = Math.min(Math.max(Math.round(Number(nivelNovoPerfil)), 0), 10);
+
+		criandoNovoPerfil = true;
+		try {
+			const resultado = await client.mutation(api.roles.criar, {
+				nome,
+				descricao,
+				nivel,
+				setor: setor.length > 0 ? setor : undefined,
+				copiarDeRoleId: roleParaDuplicar || undefined
+			});
+
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Perfil criado com sucesso!');
+				modalNovoPerfilAberto = false;
+			} else {
+				const mapaErros: Record<string, string> = {
+					nome_ja_utilizado:
+						'Já existe um perfil com este identificador. Ajuste o nome e tente novamente.',
+					nome_invalido: 'Informe um nome válido com pelo menos 3 caracteres.',
+					sem_permissao: 'Você não possui permissão para criar novos perfis.',
+					role_origem_nao_encontrada: 'Não foi possível carregar o perfil escolhido como base.'
+				};
+				const mensagemErro =
+					mapaErros[resultado.erro] ?? 'Não foi possível criar o perfil. Tente novamente.';
+				mostrarMensagem('error', mensagemErro);
+			}
+		} catch (error: unknown) {
+			const mensagemErro =
+				error instanceof Error ? error.message : 'Erro inesperado ao criar o perfil.';
+			mostrarMensagem('error', mensagemErro);
+		} finally {
+			criandoNovoPerfil = false;
+		}
+	}
 </script>
 
-<ProtectedRoute allowedRoles={["ti_master", "admin"]} maxLevel={1}>
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/" class="text-primary hover:text-primary-focus">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-            />
-          </svg>
-          Dashboard
-        </a>
-      </li>
-      <li>
-        <a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
-      </li>
-      <li class="font-semibold">Gerenciar Perfis & Permissões</li>
-    </ul>
-  </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin']} maxLevel={1}>
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href={resolve('/')} class="text-primary hover:text-primary-focus">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+						/>
+					</svg>
+					Dashboard
+				</a>
+			</li>
+			<li>
+				<a href={resolve('/ti')} class="text-primary hover:text-primary-focus">TI</a>
+			</li>
+			<li class="font-semibold">Gerenciar Perfis & Permissões</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center gap-3 mb-2">
-      <div class="p-3 bg-primary/10 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-primary"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-          />
-        </svg>
-      </div>
-      <div class="flex-1">
-        <h1 class="text-3xl font-bold text-base-content">
-          Gerenciar Perfis & Permissões de Acesso
-        </h1>
-        <p class="text-base-content/60 mt-1">
-          Configure as permissões de acesso aos menus do sistema por função
-        </p>
-      </div>
-      <button class="btn btn-primary gap-2" onclick={abrirModalCriarPerfil}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 4v16m8-8H4"
-          />
-        </svg>
-        Criar Novo Perfil
-      </button>
-      <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
-        Voltar
-      </button>
-    </div>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="mb-2 flex flex-wrap items-center gap-3">
+			<div class="bg-primary/10 rounded-xl p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-primary h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+					/>
+				</svg>
+			</div>
+			<div class="flex-1">
+				<h1 class="text-base-content text-3xl font-bold">
+					Gerenciar Perfis & Permissões de Acesso
+				</h1>
+				<p class="text-base-content/60 mt-1">
+					Configure as permissões de acesso aos menus do sistema por função
+				</p>
+			</div>
+			<button class="btn btn-primary gap-2" onclick={abrirModalNovoPerfil}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Criar novo perfil
+			</button>
+			<button class="btn btn-ghost gap-2" onclick={() => goto(resolve('/ti'))}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 19l-7-7m0 0l7-7m-7 7h18"
+					/>
+				</svg>
+				Voltar
+			</button>
+		</div>
+	</div>
 
-  <!-- Alertas -->
-  {#if mensagem}
-    <div
-      class="alert mb-6 shadow-lg"
-      class:alert-success={mensagem.tipo === "success"}
-      class:alert-error={mensagem.tipo === "error"}
-    >
-      {#if mensagem.tipo === "success"}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      {:else}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      {/if}
-      <span class="font-semibold">{mensagem.texto}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if mensagem}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={mensagem.tipo === 'success'}
+			class:alert-error={mensagem.tipo === 'error'}
+		>
+			{#if mensagem.tipo === 'success'}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			{:else}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			{/if}
+			<span class="font-semibold">{mensagem.texto}</span>
+		</div>
+	{/if}
 
-  <!-- Filtros e Busca -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <!-- Busca por menu -->
-        <div class="form-control">
-          <label class="label" for="busca">
-            <span class="label-text font-semibold">Buscar Perfil</span>
-          </label>
-          <div class="relative">
-            <input
-              id="busca"
-              type="text"
-              placeholder="Digite o nome/descrição do perfil..."
-              class="input input-bordered w-full pr-10"
-              bind:value={busca}
-            />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 absolute right-3 top-3.5 text-base-content/40"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              />
-            </svg>
-          </div>
-        </div>
+	<!-- Filtros e Busca -->
+	<div class="card bg-base-100 mb-6 shadow-xl">
+		<div class="card-body">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+				<!-- Busca por menu -->
+				<div class="form-control">
+					<label class="label" for="busca">
+						<span class="label-text font-semibold">Buscar Perfil</span>
+					</label>
+					<div class="relative">
+						<input
+							id="busca"
+							type="text"
+							placeholder="Digite o nome/descrição do perfil..."
+							class="input input-bordered w-full pr-10"
+							bind:value={busca}
+						/>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-base-content/40 absolute top-3.5 right-3 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							/>
+						</svg>
+					</div>
+				</div>
 
-        <!-- Filtro por perfil -->
-        <div class="form-control">
-          <label class="label" for="filtroRole">
-            <span class="label-text font-semibold">Filtrar por Perfil</span>
-          </label>
-          <select
-            id="filtroRole"
-            class="select select-bordered w-full"
-            bind:value={filtroRole}
-          >
-            <option value="">Todos os perfis</option>
-            {#if rolesQuery.data}
-              {#each rolesQuery.data as roleRow}
-                <option value={roleRow._id}>
-                  {roleRow.descricao} ({roleRow.nome})
-                </option>
-              {/each}
-            {/if}
-          </select>
-        </div>
-      </div>
+				<!-- Filtro por perfil -->
+				<div class="form-control">
+					<label class="label" for="filtroRole">
+						<span class="label-text font-semibold">Filtrar por Perfil</span>
+					</label>
+					<select id="filtroRole" class="select select-bordered w-full" bind:value={filtroRole}>
+						<option value="">Todos os perfis</option>
+						{#if rolesQuery.data}
+							{#each rolesQuery.data as roleRow (roleRow._id)}
+								<option value={roleRow._id}>
+									{roleRow.descricao} ({roleRow.nome})
+								</option>
+							{/each}
+						{/if}
+					</select>
+				</div>
+			</div>
 
-      {#if busca || filtroRole}
-        <div class="flex items-center gap-2 mt-2">
-          <span class="text-sm text-base-content/60">Filtros ativos:</span>
-          {#if busca}
-            <div class="badge badge-primary gap-2">
-              Busca: {busca}
-              <button
-                class="btn btn-ghost btn-xs"
-                onclick={() => (busca = "")}
-                aria-label="Limpar busca"
-              >
-                ✕
-              </button>
-            </div>
-          {/if}
-          {#if filtroRole}
-            <div class="badge badge-secondary gap-2">
-              Perfil filtrado
-              <button
-                class="btn btn-ghost btn-xs"
-                onclick={() => (filtroRole = "")}
-                aria-label="Limpar filtro"
-              >
-                ✕
-              </button>
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if busca || filtroRole}
+				<div class="mt-2 flex items-center gap-2">
+					<span class="text-base-content/60 text-sm">Filtros ativos:</span>
+					{#if busca}
+						<div class="badge badge-primary gap-2">
+							Busca: {busca}
+							<button
+								class="btn btn-ghost btn-xs"
+								onclick={() => (busca = '')}
+								aria-label="Limpar busca"
+							>
+								✕
+							</button>
+						</div>
+					{/if}
+					{#if filtroRole}
+						<div class="badge badge-secondary gap-2">
+							Perfil filtrado
+							<button
+								class="btn btn-ghost btn-xs"
+								onclick={() => (filtroRole = '')}
+								aria-label="Limpar filtro"
+							>
+								✕
+							</button>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  <!-- Informações sobre o sistema de permissões -->
-  <div class="alert alert-info mb-6 shadow-lg">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="stroke-current shrink-0 h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-    <div>
-      <h3 class="font-bold text-lg">Como funciona o sistema de permissões:</h3>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
-        <div>
-          <h4 class="font-semibold text-sm">Tipos de Permissão:</h4>
-          <ul class="text-sm mt-1 space-y-1">
-            <li>
-              • <strong>Acessar:</strong> Visualizar menu e acessar página
-            </li>
-            <li>• <strong>Consultar:</strong> Ver dados (requer "Acessar")</li>
-            <li>
-              • <strong>Gravar:</strong> Criar/editar/excluir (requer "Consultar")
-            </li>
-          </ul>
-        </div>
-        <div>
-          <h4 class="font-semibold text-sm">Perfis Especiais:</h4>
-          <ul class="text-sm mt-1 space-y-1">
-            <li>• <strong>Admin e TI:</strong> Acesso total automático</li>
-            <li>• <strong>Dashboard:</strong> Público para todos</li>
-            <li>
-              • <strong>Perfil Customizado:</strong> Permissões personalizadas
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Informações sobre o sistema de permissões -->
+	<div class="alert alert-info mb-6 shadow-lg">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-6 w-6 shrink-0 stroke-current"
+			fill="none"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+		<div>
+			<h3 class="text-lg font-bold">Como funciona o sistema de permissões:</h3>
+			<div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
+				<div>
+					<h4 class="text-sm font-semibold">Tipos de Permissão:</h4>
+					<ul class="mt-1 space-y-1 text-sm">
+						<li>
+							• <strong>Acessar:</strong> Visualizar menu e acessar página
+						</li>
+						<li>• <strong>Consultar:</strong> Ver dados (requer "Acessar")</li>
+						<li>
+							• <strong>Gravar:</strong> Criar/editar/excluir (requer "Consultar")
+						</li>
+					</ul>
+				</div>
+				<div>
+					<h4 class="text-sm font-semibold">Perfis Especiais:</h4>
+					<ul class="mt-1 space-y-1 text-sm">
+						<li>• <strong>Admin:</strong> Acesso total automático</li>
+						<li>• <strong>TI Master:</strong> Controle administrativo completo</li>
+						<li>• <strong>Dashboard:</strong> Público para todos</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Matriz de Permissões por Ação -->
-  {#if rolesQuery.isLoading || catalogoQuery.isLoading}
-    <div class="flex justify-center items-center py-12">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-    </div>
-  {:else if rolesQuery.error}
-    <div class="alert alert-error">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-        />
-      </svg>
-      <span>Erro ao carregar perfis: {rolesQuery.error.message}</span>
-    </div>
-  {:else if rolesQuery.data && catalogoQuery.data}
-    {#if rolesFiltradas.length === 0}
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body items-center text-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-16 w-16 text-base-content/30"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            />
-          </svg>
-          <h3 class="text-xl font-bold mt-4">Nenhum resultado encontrado</h3>
-          <p class="text-base-content/60">
-            {busca
-              ? `Não foram encontrados perfis com "${busca}"`
-              : "Nenhum perfil corresponde aos filtros aplicados"}
-          </p>
-          <button
-            class="btn btn-primary btn-sm mt-4"
-            onclick={() => {
-              busca = "";
-              filtroRole = "";
-            }}
-          >
-            Limpar Filtros
-          </button>
-        </div>
-      </div>
-    {/if}
+	<!-- Matriz de Permissões por Ação -->
+	{#if rolesQuery.isLoading || catalogoQuery.isLoading}
+		<div class="flex items-center justify-center py-12">
+			<span class="loading loading-spinner loading-lg text-primary"></span>
+		</div>
+	{:else if rolesQuery.error}
+		<div class="alert alert-error">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			<span>Erro ao carregar perfis: {rolesQuery.error.message}</span>
+		</div>
+	{:else if rolesQuery.data && catalogoQuery.data}
+		{#if rolesFiltradas.length === 0}
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body items-center text-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-base-content/30 h-16 w-16"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+					<h3 class="mt-4 text-xl font-bold">Nenhum resultado encontrado</h3>
+					<p class="text-base-content/60">
+						{busca
+							? `Não foram encontrados perfis com "${busca}"`
+							: 'Nenhum perfil corresponde aos filtros aplicados'}
+					</p>
+					<button
+						class="btn btn-primary btn-sm mt-4"
+						onclick={() => {
+							busca = '';
+							filtroRole = '';
+						}}
+					>
+						Limpar Filtros
+					</button>
+				</div>
+			</div>
+		{/if}
 
-    {#each rolesFiltradas as roleRow}
-      {@const roleId = roleRow._id}
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <div class="flex items-center justify-between mb-4 flex-wrap gap-4">
-            <div class="flex-1 min-w-[200px]">
-              <div class="flex items-center gap-3 mb-2">
-                <h2 class="card-title text-2xl">{roleRow.descricao}</h2>
-                <div class="badge badge-lg badge-primary">
-                  Nível {roleRow.nivel}
-                </div>
-                {#if roleRow.nivel <= 1}
-                  <div class="badge badge-lg badge-success gap-1">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                      />
-                    </svg>
-                    Acesso Total
-                  </div>
-                {/if}
-              </div>
-              <p class="text-sm text-base-content/60">
-                <span class="font-mono bg-base-200 px-2 py-1 rounded"
-                  >{roleRow.nome}</span
-                >
-              </p>
-            </div>
-            <div class="flex items-center gap-2">
-              <button
-                type="button"
-                class="btn btn-outline btn-sm"
-                onclick={() => prepararEdicaoPerfil(roleRow)}
-              >
-                Editar
-              </button>
-            </div>
-          </div>
+		{#each rolesFiltradas as roleRow (roleRow._id)}
+			{@const roleId = roleRow._id}
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<div class="mb-4 flex flex-wrap items-center gap-4">
+						<div class="min-w-[200px] flex-1">
+							<div class="mb-2 flex items-center gap-3">
+								<h2 class="card-title text-2xl">{roleRow.descricao}</h2>
+								<div class="badge badge-lg badge-primary">
+									Nível {roleRow.nivel}
+								</div>
+								{#if roleRow.nivel <= 1}
+									<div class="badge badge-lg badge-success gap-1">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+											/>
+										</svg>
+										Acesso Total
+									</div>
+								{/if}
+							</div>
+							<p class="text-base-content/60 text-sm">
+								<span class="bg-base-200 rounded px-2 py-1 font-mono">{roleRow.nome}</span>
+							</p>
+						</div>
+					</div>
 
-          {#if roleRow.nivel <= 1}
-            <div class="alert alert-success shadow-md">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <div>
-                <h3 class="font-bold">Perfil Administrativo</h3>
-                <div class="text-sm">
-                  Este perfil possui acesso total ao sistema automaticamente,
-                  sem necessidade de configuração manual.
-                </div>
-              </div>
-            </div>
-          {:else if catalogoQuery.data}
-            <div class="space-y-2">
-              {#each catalogoQuery.data as item}
-                {@const recursoExpandido = isRecursoExpandido(
-                  roleId,
-                  item.recurso,
-                )}
-                <div class="border border-base-300 rounded-lg overflow-hidden">
-                  <!-- Cabeçalho do recurso (clicável) -->
-                  <button
-                    type="button"
-                    class="w-full px-4 py-3 bg-base-200 hover:bg-base-300 transition-colors flex items-center justify-between"
-                    onclick={() => toggleRecurso(roleId, item.recurso)}
-                    disabled={salvando}
-                  >
-                    <span class="font-semibold text-lg">{item.recurso}</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5 transition-transform"
-                      class:rotate-180={recursoExpandido}
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
+					{#if roleRow.nivel <= 1}
+						<div class="alert alert-success shadow-md">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<div>
+								<h3 class="font-bold">Perfil Administrativo</h3>
+								<div class="text-sm">
+									Este perfil possui acesso total ao sistema automaticamente, sem necessidade de
+									configuração manual.
+								</div>
+							</div>
+						</div>
+					{:else if catalogoQuery.data}
+						<div class="space-y-2">
+							{#each catalogoQuery.data as item (item.recurso)}
+								{@const recursoExpandido = isRecursoExpandido(roleId, item.recurso)}
+								<div class="border-base-300 overflow-hidden rounded-lg border">
+									<!-- Cabeçalho do recurso (clicável) -->
+									<button
+										type="button"
+										class="bg-base-200 hover:bg-base-300 flex w-full items-center justify-between px-4 py-3 transition-colors"
+										onclick={() => toggleRecurso(roleId, item.recurso)}
+										disabled={salvando}
+									>
+										<span class="text-lg font-semibold">{item.recurso}</span>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-5 w-5 transition-transform"
+											class:rotate-180={recursoExpandido}
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 9l-7 7-7-7"
+											/>
+										</svg>
+									</button>
 
-                  <!-- Lista de ações (visível quando expandido) -->
-                  {#if recursoExpandido}
-                    <div class="px-4 py-3 bg-base-100 border-t border-base-300">
-                      <div class="space-y-2">
-                        {#each ["ver", "listar", "criar", "editar", "excluir"] as acao}
-                          <label
-                            class="flex items-center gap-3 cursor-pointer hover:bg-base-200 p-2 rounded transition-colors"
-                          >
-                            <input
-                              type="checkbox"
-                              class="checkbox checkbox-primary"
-                              checked={isConcedida(roleId, item.recurso, acao)}
-                              disabled={salvando}
-                              onchange={(e) =>
-                                toggleAcao(
-                                  roleId,
-                                  item.recurso,
-                                  acao,
-                                  e.currentTarget.checked,
-                                )}
-                            />
-                            <span class="flex-1 capitalize font-medium"
-                              >{acao}</span
-                            >
-                          </label>
-                        {/each}
-                      </div>
-                    </div>
-                  {/if}
-                </div>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/each}
-  {/if}
+									<!-- Lista de ações (visível quando expandido) -->
+									{#if recursoExpandido}
+										<div class="bg-base-100 border-base-300 border-t px-4 py-3">
+											<div class="space-y-2">
+												{#each ['ver', 'listar', 'criar', 'editar', 'excluir'] as acao (acao)}
+													<label
+														class="hover:bg-base-200 flex cursor-pointer items-center gap-3 rounded p-2 transition-colors"
+													>
+														<input
+															type="checkbox"
+															class="checkbox checkbox-primary"
+															checked={isConcedida(roleId, item.recurso, acao)}
+															disabled={salvando}
+															onchange={(e) =>
+																toggleAcao(roleId, item.recurso, acao, e.currentTarget.checked)}
+														/>
+														<span class="flex-1 font-medium capitalize">{acao}</span>
+													</label>
+												{/each}
+											</div>
+										</div>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	{/if}
 
-  <!-- Modal Gerenciar Perfis -->
-  {#if modalGerenciarPerfisAberto}
-    <dialog class="modal modal-open">
-      <div
-        class="modal-box max-w-4xl w-full overflow-hidden border border-base-200/60 bg-base-200/40 p-0 shadow-2xl"
-      >
-        <div
-          class="relative bg-linear-to-r from-primary via-primary/90 to-secondary/80 px-8 py-6 text-base-100"
-        >
-          <button
-            type="button"
-            class="btn btn-sm btn-circle btn-ghost absolute right-4 top-4 text-base-100/80 hover:text-base-100"
-            onclick={fecharModalGerenciarPerfis}
-            aria-label="Fechar modal"
-          >
-            ✕
-          </button>
+	{#if modalNovoPerfilAberto}
+		<dialog class="modal modal-open">
+			<div
+				class="modal-box bg-base-100 w-full max-w-4xl overflow-hidden rounded-2xl p-0 shadow-2xl"
+			>
+				<div
+					class="from-primary via-primary/85 to-secondary/80 text-base-100 relative bg-linear-to-r px-8 py-6"
+				>
+					<button
+						type="button"
+						class="btn btn-circle btn-ghost btn-sm text-base-100/80 hover:text-base-100 absolute top-4 right-4"
+						onclick={fecharModalNovoPerfil}
+						aria-label="Fechar"
+					>
+						✕
+					</button>
+					<div class="space-y-2 pr-10">
+						<h3 class="text-3xl font-black tracking-tight">Criar novo perfil de acesso</h3>
+						<p class="text-base-100/80 max-w-2xl text-sm md:text-base">
+							Defina as informações do perfil e, se desejar, reutilize as permissões de um perfil
+							existente para acelerar a configuração.
+						</p>
+						{#if identificadorSugerido}
+							<div class="text-base-100/80 flex flex-wrap items-center gap-2 text-xs">
+								<span
+									class="badge badge-outline badge-sm border-base-100/40 tracking-widest uppercase"
+								>
+									Identificador
+								</span>
+								<span class="font-mono text-sm">{identificadorSugerido}</span>
+							</div>
+						{/if}
+					</div>
+				</div>
+				<div class="space-y-6 px-8 py-6">
+					<div class="grid gap-6 md:grid-cols-2">
+						<div class="form-control md:col-span-2">
+							<label class="label" for="nome-novo-perfil">
+								<span class="label-text font-semibold">Nome do perfil *</span>
+							</label>
+							<input
+								id="nome-novo-perfil"
+								type="text"
+								class="input input-bordered input-primary"
+								placeholder="Ex.: Financeiro, RH, Supervisão de Campo"
+								bind:value={nomeNovoPerfil}
+								maxlength={60}
+							/>
+						</div>
 
-          <h3 class="text-3xl font-black tracking-tight">
-            Gerenciar Perfis de Acesso
-          </h3>
-          <p class="mt-2 max-w-2xl text-sm text-base-100/80 md:text-base">
-            {perfilSendoEditado
-              ? "Atualize as informações do perfil selecionado para manter a governança de acesso alinhada com as diretrizes do sistema."
-              : "Crie um novo perfil de acesso definindo nome, descrição e nível hierárquico conforme os padrões adotados pela Secretaria."}
-          </p>
-        </div>
+						<div class="form-control md:col-span-2">
+							<label class="label" for="descricao-novo-perfil">
+								<span class="label-text font-semibold">Descrição</span>
+							</label>
+							<textarea
+								id="descricao-novo-perfil"
+								class="textarea textarea-bordered textarea-primary min-h-[96px]"
+								placeholder="Explique como este perfil será utilizado e quais áreas ele atende."
+								bind:value={descricaoNovoPerfil}
+								maxlength={240}
+							></textarea>
+						</div>
 
-        <div class="bg-base-100 px-8 py-6">
-          <section
-            class="space-y-6 rounded-2xl border border-base-200/60 bg-base-100 p-6 shadow-sm"
-          >
-            <div
-              class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
-            >
-              <div class="space-y-1">
-                <h4 class="text-xl font-semibold text-base-content">
-                  {perfilSendoEditado ? "Editar Perfil" : "Criar Novo Perfil"}
-                </h4>
-                <p class="text-sm text-base-content/70">
-                  {perfilSendoEditado
-                    ? "Os campos bloqueados indicam atributos padronizados do sistema. Ajuste apenas o que estiver disponível."
-                    : "Preencha as informações com atenção para garantir que o novo perfil siga o padrão institucional."}
-                </p>
-              </div>
+						<div class="form-control">
+							<label class="label" for="setor-novo-perfil">
+								<span class="label-text font-semibold">Setor (opcional)</span>
+							</label>
+							<input
+								id="setor-novo-perfil"
+								type="text"
+								class="input input-bordered"
+								placeholder="Informe o setor ou departamento responsável"
+								bind:value={setorNovoPerfil}
+								maxlength={40}
+							/>
+						</div>
 
-              {#if perfilSendoEditado}
-                <span
-                  class="badge badge-outline badge-primary badge-lg self-start flex flex-col items-center gap-1 px-5 py-3 text-center"
-                >
-                  <span
-                    class="text-[11px] font-semibold uppercase tracking-[0.32em] text-primary"
-                  >
-                    Nível atual
-                  </span>
-                  <span class="text-2xl font-bold leading-none text-primary">
-                    {perfilSendoEditado.nivel}
-                  </span>
-                </span>
-              {/if}
-            </div>
+						<div class="form-control">
+							<label class="label" for="nivel-novo-perfil">
+								<span class="label-text font-semibold">Nível de acesso (0 a 10)</span>
+							</label>
+							<input
+								id="nivel-novo-perfil"
+								type="number"
+								class="input input-bordered"
+								min={0}
+								max={10}
+								step={1}
+								bind:value={nivelNovoPerfil}
+							/>
+							<span class="text-base-content/60 mt-1 text-xs">
+								Níveis menores representam maior privilégio (ex.: 0 = administrativo).
+							</span>
+						</div>
 
-            <div class="grid gap-6 md:grid-cols-2">
-              <div class="form-control md:col-span-2">
-                <label class="label" for="nome-perfil-input">
-                  <span class="label-text">Nome do Perfil *</span>
-                </label>
-                <input
-                  id="nome-perfil-input"
-                  type="text"
-                  bind:value={nomeNovoPerfil}
-                  class="input input-bordered input-primary"
-                  placeholder="Ex: RH, Financeiro, Gestor"
-                  disabled={perfilSendoEditado !== null &&
-                    !perfilSendoEditado.customizado}
-                />
-              </div>
+						<div class="form-control md:col-span-2">
+							<label class="label" for="duplicar-novo-perfil">
+								<span class="label-text font-semibold">Duplicar permissões de</span>
+							</label>
+							<select
+								id="duplicar-novo-perfil"
+								class="select select-bordered"
+								bind:value={roleParaDuplicar}
+							>
+								<option value="">Iniciar perfil vazio</option>
+								{#if rolesQuery.data}
+									{#each rolesQuery.data as roleDuplicavel (roleDuplicavel._id)}
+										<option value={roleDuplicavel._id}>
+											{roleDuplicavel.descricao} — nível {roleDuplicavel.nivel}
+										</option>
+									{/each}
+								{/if}
+							</select>
+						</div>
+					</div>
 
-              <div class="form-control md:col-span-2">
-                <label class="label" for="descricao-perfil-input">
-                  <span class="label-text">Descrição</span>
-                </label>
-                <textarea
-                  id="descricao-perfil-input"
-                  bind:value={descricaoNovoPerfil}
-                  class="textarea textarea-bordered textarea-primary min-h-[120px]"
-                  placeholder="Breve descrição das responsabilidades e limites de atuação deste perfil."
-                ></textarea>
-              </div>
+					{#if roleDuplicacaoSelecionada}
+						<div class="border-base-200 bg-base-100/80 rounded-2xl border p-4">
+							<div class="flex flex-wrap items-center justify-between gap-4">
+								<div>
+									<p class="text-base-content font-semibold">
+										Permissões a serem copiadas de <span class="font-bold"
+											>{roleDuplicacaoSelecionada.descricao}</span
+										>
+									</p>
+									<p class="text-base-content/70 text-sm">
+										As permissões atuais serão reaproveitadas automaticamente para o novo perfil.
+									</p>
+								</div>
+								{#if resumoPermissoesDuplicacao}
+									<div class="flex items-center gap-4 text-sm">
+										<span class="badge badge-outline badge-sm">
+											{resumoPermissoesDuplicacao.totalRecursos} recursos
+										</span>
+										<span class="badge badge-outline badge-sm">
+											{resumoPermissoesDuplicacao.totalAcoes} ações
+										</span>
+									</div>
+								{:else}
+									<span class="loading loading-dots loading-sm text-primary"></span>
+								{/if}
+							</div>
+						</div>
+					{/if}
 
-              <div class="form-control max-w-xs">
-                <label class="label" for="nivel-perfil-input">
-                  <span class="label-text">Nível de Acesso (0-5) *</span>
-                </label>
-                <input
-                  id="nivel-perfil-input"
-                  type="number"
-                  bind:value={nivelNovoPerfil}
-                  min="0"
-                  max="5"
-                  class="input input-bordered input-secondary"
-                  disabled={perfilSendoEditado !== null &&
-                    !perfilSendoEditado.customizado}
-                />
-              </div>
-            </div>
-          </section>
-
-          <div
-            class="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between"
-          >
-            <p class="text-sm text-base-content/60">
-              Campos marcados com * são obrigatórios.
-            </p>
-            <div class="flex flex-wrap gap-3">
-              <button
-                type="button"
-                class="btn btn-ghost"
-                onclick={fecharModalGerenciarPerfis}
-                disabled={processando}
-              >
-                Cancelar
-              </button>
-              <button
-                type="button"
-                class="btn btn-primary"
-                disabled={!nomeNovoPerfil.trim() || processando}
-                onclick={perfilSendoEditado ? editarPerfil : criarNovoPerfil}
-              >
-                {#if processando}
-                  <span class="loading loading-spinner"></span>
-                  Processando...
-                {:else}
-                  {perfilSendoEditado ? "Salvar Alterações" : "Criar Perfil"}
-                {/if}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop">
-        <button
-          type="button"
-          onclick={fecharModalGerenciarPerfis}
-          aria-label="Fechar modal">Fechar</button
-        >
-      </form>
-    </dialog>
-  {/if}
+					<div class="flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between">
+						<p class="text-base-content/60 text-xs">
+							Campos marcados com * são obrigatórios. As alterações entram em vigor imediatamente
+							após a criação.
+						</p>
+						<div class="flex flex-wrap gap-3">
+							<button
+								type="button"
+								class="btn btn-ghost"
+								onclick={fecharModalNovoPerfil}
+								disabled={criandoNovoPerfil}
+							>
+								Cancelar
+							</button>
+							<button
+								type="button"
+								class="btn btn-primary"
+								disabled={!podeSalvarNovoPerfil}
+								onclick={criarNovoPerfil}
+							>
+								{#if criandoNovoPerfil}
+									<span class="loading loading-spinner"></span>
+									Criando perfil...
+								{:else}
+									Salvar perfil
+								{/if}
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<form method="dialog" class="modal-backdrop">
+				<button type="button" onclick={fecharModalNovoPerfil} aria-label="Fechar modal">
+					fechar
+				</button>
+			</form>
+		</dialog>
+	{/if}
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
index f342979..38f7b96 100644
--- a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
@@ -1,873 +1,818 @@
 <script lang="ts">
-  import { useConvexClient, useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import { goto } from "$app/navigation";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  // Tipos baseados nos retornos das queries do backend
-  type Usuario = {
-    _id: Id<"usuarios">;
-    matricula: string;
-    nome: string;
-    email: string;
-    ativo: boolean;
-    bloqueado?: boolean;
-    motivoBloqueio?: string;
-    primeiroAcesso: boolean;
-    ultimoAcesso?: number;
-    criadoEm: number;
-    role: {
-      _id: Id<"roles">;
-      _creationTime?: number;
-      criadoPor?: Id<"usuarios">;
-      customizado?: boolean;
-      descricao: string;
-      editavel?: boolean;
-      nome: string;
-      nivel: number;
-      setor?: string;
-      erro?: boolean;
-    };
-    funcionario?: {
-      _id: Id<"funcionarios">;
-      nome: string;
-      matricula?: string;
-      descricaoCargo?: string;
-      simboloTipo: "cargo_comissionado" | "funcao_gratificada";
-    };
-    avisos?: Array<{
-      tipo: "erro" | "aviso" | "info";
-      mensagem: string;
-    }>;
-  };
+	// Tipos baseados nos retornos das queries do backend
+	type Usuario = {
+		_id: Id<'usuarios'>;
+		matricula: string;
+		nome: string;
+		email: string;
+		ativo: boolean;
+		bloqueado?: boolean;
+		motivoBloqueio?: string;
+		primeiroAcesso: boolean;
+		ultimoAcesso?: number;
+		criadoEm: number;
+		role: {
+			_id: Id<'roles'>;
+			_creationTime?: number;
+			criadoPor?: Id<'usuarios'>;
+			customizado?: boolean;
+			descricao: string;
+			editavel?: boolean;
+			nome: string;
+			nivel: number;
+			setor?: string;
+			erro?: boolean;
+		};
+		funcionario?: {
+			_id: Id<'funcionarios'>;
+			nome: string;
+			matricula?: string;
+			descricaoCargo?: string;
+			simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
+		};
+		avisos?: Array<{
+			tipo: 'erro' | 'aviso' | 'info';
+			mensagem: string;
+		}>;
+	};
 
-  type Funcionario = {
-    _id: Id<"funcionarios">;
-    nome: string;
-    matricula?: string;
-    cpf?: string;
-    rg?: string;
-    nascimento?: string;
-    email?: string;
-    telefone?: string;
-    endereco?: string;
-    cep?: string;
-    cidade?: string;
-    uf?: string;
-    simboloId: Id<"simbolos">;
-    simboloTipo: "cargo_comissionado" | "funcao_gratificada";
-    admissaoData?: string;
-    desligamentoData?: string;
-    descricaoCargo?: string;
-  };
+	type Funcionario = {
+		_id: Id<'funcionarios'>;
+		nome: string;
+		matricula?: string;
+		cpf?: string;
+		rg?: string;
+		nascimento?: string;
+		email?: string;
+		telefone?: string;
+		endereco?: string;
+		cep?: string;
+		cidade?: string;
+		uf?: string;
+		simboloId: Id<'simbolos'>;
+		simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
+		admissaoData?: string;
+		desligamentoData?: string;
+		descricaoCargo?: string;
+	};
 
-  type Gestor = Doc<"usuarios"> | null;
+	type Gestor = Doc<'usuarios'> | null;
 
-  type TimeComDetalhes = Doc<"times"> & {
-    gestor: Gestor;
-    totalMembros: number;
-  };
+	type TimeComDetalhes = Doc<'times'> & {
+		gestor: Gestor;
+		totalMembros: number;
+	};
 
-  type MembroTime = Doc<"timesMembros"> & {
-    funcionario: Doc<"funcionarios"> | null;
-  };
+	type MembroTime = Doc<'timesMembros'> & {
+		funcionario: Doc<'funcionarios'> | null;
+	};
 
-  type TimeComMembros = Doc<"times"> & {
-    gestor: Gestor;
-    membros: MembroTime[];
-  };
+	type TimeComMembros = Doc<'times'> & {
+		gestor: Gestor;
+		membros: MembroTime[];
+	};
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  // Queries
-  const timesQuery = useQuery(api.times.listar, {});
-  const usuariosQuery = useQuery(api.usuarios.listar, {});
-  const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+	// Queries
+	const timesQuery = useQuery(api.times.listar, {});
+	const usuariosQuery = useQuery(api.usuarios.listar, {});
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
 
-  const times = $derived((timesQuery?.data || []) as TimeComDetalhes[]);
-  const usuarios = $derived((usuariosQuery?.data || []) as Usuario[]);
-  const funcionarios = $derived(
-    (funcionariosQuery?.data || []) as Funcionario[],
-  );
+	const times = $derived((timesQuery?.data || []) as TimeComDetalhes[]);
+	const usuarios = $derived((usuariosQuery?.data || []) as Usuario[]);
+	const funcionarios = $derived((funcionariosQuery?.data || []) as Funcionario[]);
 
-  const carregando = $derived(
-    timesQuery === undefined ||
-      usuariosQuery === undefined ||
-      funcionariosQuery === undefined,
-  );
+	const carregando = $derived(
+		timesQuery === undefined || usuariosQuery === undefined || funcionariosQuery === undefined
+	);
 
-  // Estados
-  let modoEdicao = $state(false);
-  let timeEmEdicao = $state<TimeComDetalhes | null>(null);
-  let mostrarModalMembros = $state(false);
-  let timeParaMembros = $state<TimeComMembros | null>(null);
-  let mostrarConfirmacaoExclusao = $state(false);
-  let timeParaExcluir = $state<TimeComDetalhes | null>(null);
-  let processando = $state(false);
+	// Estados
+	let modoEdicao = $state(false);
+	let timeEmEdicao = $state<TimeComDetalhes | null>(null);
+	let mostrarModalMembros = $state(false);
+	let timeParaMembros = $state<TimeComMembros | null>(null);
+	let mostrarConfirmacaoExclusao = $state(false);
+	let timeParaExcluir = $state<TimeComDetalhes | null>(null);
+	let processando = $state(false);
 
-  // Form
-  let formNome = $state("");
-  let formDescricao = $state("");
-  let formGestorId = $state("");
-  let formCor = $state("#3B82F6");
+	// Form
+	let formNome = $state('');
+	let formDescricao = $state('');
+	let formGestorId = $state('');
+	let formCor = $state('#3B82F6');
 
-  // Membros
-  let membrosDisponiveis = $derived(
-    funcionarios.filter((f: Funcionario) => {
-      // Verificar se o funcionário já está em algum time ativo
-      const jaNaEquipe = timeParaMembros?.membros?.some(
-        (m: MembroTime) => m.funcionario?._id === f._id,
-      );
-      return !jaNaEquipe;
-    }),
-  );
+	// Membros
+	let membrosDisponiveis = $derived(
+		funcionarios.filter((f: Funcionario) => {
+			// Verificar se o funcionário já está em algum time ativo
+			const jaNaEquipe = timeParaMembros?.membros?.some(
+				(m: MembroTime) => m.funcionario?._id === f._id
+			);
+			return !jaNaEquipe;
+		})
+	);
 
-  // Cores predefinidas
-  const coresDisponiveis = [
-    "#3B82F6", // Blue
-    "#10B981", // Green
-    "#F59E0B", // Yellow
-    "#EF4444", // Red
-    "#8B5CF6", // Purple
-    "#EC4899", // Pink
-    "#14B8A6", // Teal
-    "#F97316", // Orange
-  ];
+	// Cores predefinidas
+	const coresDisponiveis = [
+		'#3B82F6', // Blue
+		'#10B981', // Green
+		'#F59E0B', // Yellow
+		'#EF4444', // Red
+		'#8B5CF6', // Purple
+		'#EC4899', // Pink
+		'#14B8A6', // Teal
+		'#F97316' // Orange
+	];
 
-  function novoTime() {
-    modoEdicao = true;
-    timeEmEdicao = null;
-    formNome = "";
-    formDescricao = "";
-    formGestorId = "";
-    formCor =
-      coresDisponiveis[Math.floor(Math.random() * coresDisponiveis.length)];
-  }
+	function novoTime() {
+		modoEdicao = true;
+		timeEmEdicao = null;
+		formNome = '';
+		formDescricao = '';
+		formGestorId = '';
+		formCor = coresDisponiveis[Math.floor(Math.random() * coresDisponiveis.length)];
+	}
 
-  function editarTime(time: TimeComDetalhes) {
-    modoEdicao = true;
-    timeEmEdicao = time;
-    formNome = time.nome;
-    formDescricao = time.descricao || "";
-    formGestorId = time.gestorId;
-    formCor = time.cor || "#3B82F6";
-  }
+	function editarTime(time: TimeComDetalhes) {
+		modoEdicao = true;
+		timeEmEdicao = time;
+		formNome = time.nome;
+		formDescricao = time.descricao || '';
+		formGestorId = time.gestorId;
+		formCor = time.cor || '#3B82F6';
+	}
 
-  function cancelarEdicao() {
-    modoEdicao = false;
-    timeEmEdicao = null;
-    formNome = "";
-    formDescricao = "";
-    formGestorId = "";
-    formCor = "#3B82F6";
-  }
+	function cancelarEdicao() {
+		modoEdicao = false;
+		timeEmEdicao = null;
+		formNome = '';
+		formDescricao = '';
+		formGestorId = '';
+		formCor = '#3B82F6';
+	}
 
-  async function salvarTime() {
-    if (!formNome.trim() || !formGestorId) {
-      alert("Preencha todos os campos obrigatórios!");
-      return;
-    }
+	async function salvarTime() {
+		if (!formNome.trim() || !formGestorId) {
+			alert('Preencha todos os campos obrigatórios!');
+			return;
+		}
 
-    processando = true;
-    try {
-      if (timeEmEdicao) {
-        await client.mutation(api.times.atualizar, {
-          id: timeEmEdicao._id,
-          nome: formNome,
-          descricao: formDescricao || undefined,
-          gestorId: formGestorId as Id<"usuarios">,
-          cor: formCor,
-        });
-      } else {
-        await client.mutation(api.times.criar, {
-          nome: formNome,
-          descricao: formDescricao || undefined,
-          gestorId: formGestorId as Id<"usuarios">,
-          cor: formCor,
-        });
-      }
-      cancelarEdicao();
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      alert("Erro ao salvar: " + errorMessage);
-    } finally {
-      processando = false;
-    }
-  }
+		processando = true;
+		try {
+			if (timeEmEdicao) {
+				await client.mutation(api.times.atualizar, {
+					id: timeEmEdicao._id,
+					nome: formNome,
+					descricao: formDescricao || undefined,
+					gestorId: formGestorId as Id<'usuarios'>,
+					cor: formCor
+				});
+			} else {
+				await client.mutation(api.times.criar, {
+					nome: formNome,
+					descricao: formDescricao || undefined,
+					gestorId: formGestorId as Id<'usuarios'>,
+					cor: formCor
+				});
+			}
+			cancelarEdicao();
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			alert('Erro ao salvar: ' + errorMessage);
+		} finally {
+			processando = false;
+		}
+	}
 
-  function confirmarExclusao(time: TimeComDetalhes) {
-    timeParaExcluir = time;
-    mostrarConfirmacaoExclusao = true;
-  }
+	function confirmarExclusao(time: TimeComDetalhes) {
+		timeParaExcluir = time;
+		mostrarConfirmacaoExclusao = true;
+	}
 
-  async function excluirTime() {
-    if (!timeParaExcluir) return;
+	async function excluirTime() {
+		if (!timeParaExcluir) return;
 
-    processando = true;
-    try {
-      await client.mutation(api.times.desativar, { id: timeParaExcluir._id });
-      mostrarConfirmacaoExclusao = false;
-      timeParaExcluir = null;
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      alert("Erro ao excluir: " + errorMessage);
-    } finally {
-      processando = false;
-    }
-  }
+		processando = true;
+		try {
+			await client.mutation(api.times.desativar, { id: timeParaExcluir._id });
+			mostrarConfirmacaoExclusao = false;
+			timeParaExcluir = null;
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			alert('Erro ao excluir: ' + errorMessage);
+		} finally {
+			processando = false;
+		}
+	}
 
-  async function abrirGerenciarMembros(time: TimeComDetalhes) {
-    const detalhes = await client.query(api.times.obterPorId, { id: time._id });
-    if (detalhes) {
-      timeParaMembros = detalhes as TimeComMembros;
-      mostrarModalMembros = true;
-    }
-  }
+	async function abrirGerenciarMembros(time: TimeComDetalhes) {
+		const detalhes = await client.query(api.times.obterPorId, { id: time._id });
+		if (detalhes) {
+			timeParaMembros = detalhes as TimeComMembros;
+			mostrarModalMembros = true;
+		}
+	}
 
-  async function adicionarMembro(funcionarioId: string) {
-    if (!timeParaMembros) return;
+	async function adicionarMembro(funcionarioId: string) {
+		if (!timeParaMembros) return;
 
-    processando = true;
-    try {
-      await client.mutation(api.times.adicionarMembro, {
-        timeId: timeParaMembros._id,
-        funcionarioId: funcionarioId as Id<"funcionarios">,
-      });
+		processando = true;
+		try {
+			await client.mutation(api.times.adicionarMembro, {
+				timeId: timeParaMembros._id,
+				funcionarioId: funcionarioId as Id<'funcionarios'>
+			});
 
-      // Recarregar detalhes do time
-      const detalhes = await client.query(api.times.obterPorId, {
-        id: timeParaMembros._id,
-      });
-      if (detalhes) {
-        timeParaMembros = detalhes as TimeComMembros;
-      }
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      alert("Erro: " + errorMessage);
-    } finally {
-      processando = false;
-    }
-  }
+			// Recarregar detalhes do time
+			const detalhes = await client.query(api.times.obterPorId, {
+				id: timeParaMembros._id
+			});
+			if (detalhes) {
+				timeParaMembros = detalhes as TimeComMembros;
+			}
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			alert('Erro: ' + errorMessage);
+		} finally {
+			processando = false;
+		}
+	}
 
-  async function removerMembro(membroId: string) {
-    if (!confirm("Deseja realmente remover este membro do time?")) return;
+	async function removerMembro(membroId: string) {
+		if (!confirm('Deseja realmente remover este membro do time?')) return;
 
-    processando = true;
-    try {
-      await client.mutation(api.times.removerMembro, {
-        membroId: membroId as Id<"timesMembros">,
-      });
+		processando = true;
+		try {
+			await client.mutation(api.times.removerMembro, {
+				membroId: membroId as Id<'timesMembros'>
+			});
 
-      // Recarregar detalhes do time
-      if (timeParaMembros) {
-        const detalhes = await client.query(api.times.obterPorId, {
-          id: timeParaMembros._id,
-        });
-        if (detalhes) {
-          timeParaMembros = detalhes as TimeComMembros;
-        }
-      }
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      alert("Erro: " + errorMessage);
-    } finally {
-      processando = false;
-    }
-  }
+			// Recarregar detalhes do time
+			if (timeParaMembros) {
+				const detalhes = await client.query(api.times.obterPorId, {
+					id: timeParaMembros._id
+				});
+				if (detalhes) {
+					timeParaMembros = detalhes as TimeComMembros;
+				}
+			}
+		} catch (e: unknown) {
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			alert('Erro: ' + errorMessage);
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalMembros() {
-    mostrarModalMembros = false;
-    timeParaMembros = null;
-  }
+	function fecharModalMembros() {
+		mostrarModalMembros = false;
+		timeParaMembros = null;
+	}
 </script>
 
-<ProtectedRoute
-  allowedRoles={["ti_master", "admin", "ti_usuario"]}
-  maxLevel={2}
->
-  <main class="container mx-auto px-4 py-6 max-w-7xl">
-    <!-- Breadcrumb -->
-    <div class="text-sm breadcrumbs mb-4">
-      <ul>
-        <li>
-          <a href="/ti" class="text-primary hover:underline"
-            >Tecnologia da Informação</a
-          >
-        </li>
-        <li>Gestão de Times</li>
-      </ul>
-    </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={2}>
+	<main class="container mx-auto max-w-7xl px-4 py-6">
+		<!-- Breadcrumb -->
+		<div class="breadcrumbs mb-4 text-sm">
+			<ul>
+				<li>
+					<a href={resolve('/ti')} class="text-primary hover:underline">Tecnologia da Informação</a>
+				</li>
+				<li>Gestão de Times</li>
+			</ul>
+		</div>
 
-    <!-- Header -->
-    <div class="mb-6">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-4">
-          <div class="p-3 bg-secondary/10 rounded-xl">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-8 w-8 text-secondary"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-              />
-            </svg>
-          </div>
-          <div>
-            <h1 class="text-3xl font-bold text-base-content">
-              Gestão de Times
-            </h1>
-            <p class="text-base-content/60 mt-1">
-              Organize funcionários em equipes e defina gestores
-            </p>
-          </div>
-        </div>
-        <div class="flex gap-2">
-          <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 19l-7-7m0 0l7-7m-7 7h18"
-              />
-            </svg>
-            Voltar
-          </button>
-          <button class="btn btn-primary gap-2" onclick={novoTime}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 4v16m8-8H4"
-              />
-            </svg>
-            Novo Time
-          </button>
-        </div>
-      </div>
-    </div>
+		<!-- Header -->
+		<div class="mb-6">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-4">
+					<div class="bg-secondary/10 rounded-xl p-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-secondary h-8 w-8"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h1 class="text-base-content text-3xl font-bold">Gestão de Times</h1>
+						<p class="text-base-content/60 mt-1">
+							Organize funcionários em equipes e defina gestores
+						</p>
+					</div>
+				</div>
+				<div class="flex gap-2">
+					<button class="btn btn-ghost gap-2" onclick={() => goto(resolve('/ti'))}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 19l-7-7m0 0l7-7m-7 7h18"
+							/>
+						</svg>
+						Voltar
+					</button>
+					<button class="btn btn-primary gap-2" onclick={novoTime}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Novo Time
+					</button>
+				</div>
+			</div>
+		</div>
 
-    <!-- Formulário de Edição -->
-    {#if modoEdicao}
-      <div
-        class="card bg-linear-to-br from-primary/10 to-primary/5 shadow-xl mb-6 border-2 border-primary/20"
-      >
-        <div class="card-body">
-          <h2 class="card-title text-xl mb-4">
-            {timeEmEdicao ? "Editar Time" : "Novo Time"}
-          </h2>
+		<!-- Formulário de Edição -->
+		{#if modoEdicao}
+			<div
+				class="card from-primary/10 to-primary/5 border-primary/20 mb-6 border-2 bg-linear-to-br shadow-xl"
+			>
+				<div class="card-body">
+					<h2 class="card-title mb-4 text-xl">
+						{timeEmEdicao ? 'Editar Time' : 'Novo Time'}
+					</h2>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label" for="nome">
-                <span class="label-text font-semibold">Nome do Time *</span>
-              </label>
-              <input
-                id="nome"
-                type="text"
-                class="input input-bordered"
-                bind:value={formNome}
-                placeholder="Ex: Equipe Administrativa"
-              />
-            </div>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div class="form-control">
+							<label class="label" for="nome">
+								<span class="label-text font-semibold">Nome do Time *</span>
+							</label>
+							<input
+								id="nome"
+								type="text"
+								class="input input-bordered"
+								bind:value={formNome}
+								placeholder="Ex: Equipe Administrativa"
+							/>
+						</div>
 
-            <div class="form-control">
-              <label class="label" for="gestor">
-                <span class="label-text font-semibold">Gestor *</span>
-              </label>
-              <select
-                id="gestor"
-                class="select select-bordered"
-                bind:value={formGestorId}
-              >
-                <option value="">Selecione um gestor</option>
-                {#each usuarios as usuario}
-                  <option value={usuario._id}>{usuario.nome}</option>
-                {/each}
-              </select>
-            </div>
+						<div class="form-control">
+							<label class="label" for="gestor">
+								<span class="label-text font-semibold">Gestor *</span>
+							</label>
+							<select id="gestor" class="select select-bordered" bind:value={formGestorId}>
+								<option value="">Selecione um gestor</option>
+								{#each usuarios as usuario (usuario._id)}
+									<option value={usuario._id}>{usuario.nome}</option>
+								{/each}
+							</select>
+						</div>
 
-            <div class="form-control md:col-span-2">
-              <label class="label" for="descricao">
-                <span class="label-text font-semibold">Descrição</span>
-              </label>
-              <textarea
-                id="descricao"
-                class="textarea textarea-bordered"
-                bind:value={formDescricao}
-                placeholder="Descrição opcional do time"
-                rows="2"
-              ></textarea>
-            </div>
+						<div class="form-control md:col-span-2">
+							<label class="label" for="descricao">
+								<span class="label-text font-semibold">Descrição</span>
+							</label>
+							<textarea
+								id="descricao"
+								class="textarea textarea-bordered"
+								bind:value={formDescricao}
+								placeholder="Descrição opcional do time"
+								rows="2"
+							></textarea>
+						</div>
 
-            <div class="form-control">
-              <label class="label" for="cor">
-                <span class="label-text font-semibold">Cor do Time</span>
-              </label>
-              <div class="flex gap-2 flex-wrap">
-                {#each coresDisponiveis as cor}
-                  <button
-                    type="button"
-                    class="w-10 h-10 rounded-lg border-2 transition-all hover:scale-110"
-                    style="background-color: {cor}; border-color: {formCor ===
-                    cor
-                      ? '#000'
-                      : cor}"
-                    onclick={() => (formCor = cor)}
-                    aria-label="Selecionar cor"
-                  ></button>
-                {/each}
-              </div>
-            </div>
-          </div>
+						<div class="form-control">
+							<label class="label" for="cor">
+								<span class="label-text font-semibold">Cor do Time</span>
+							</label>
+							<div class="flex flex-wrap gap-2">
+								{#each coresDisponiveis as cor (cor)}
+									<button
+										type="button"
+										class="h-10 w-10 rounded-lg border-2 transition-all hover:scale-110"
+										style="background-color: {cor}; border-color: {formCor === cor ? '#000' : cor}"
+										onclick={() => (formCor = cor)}
+										aria-label="Selecionar cor"
+									></button>
+								{/each}
+							</div>
+						</div>
+					</div>
 
-          <div class="card-actions justify-end mt-6">
-            <button
-              class="btn btn-ghost"
-              onclick={cancelarEdicao}
-              disabled={processando}
-            >
-              Cancelar
-            </button>
-            <button
-              class="btn btn-primary"
-              onclick={salvarTime}
-              disabled={processando}
-            >
-              {processando ? "Salvando..." : "Salvar"}
-            </button>
-          </div>
-        </div>
-      </div>
-    {/if}
+					<div class="card-actions mt-6 justify-end">
+						<button class="btn btn-ghost" onclick={cancelarEdicao} disabled={processando}>
+							Cancelar
+						</button>
+						<button class="btn btn-primary" onclick={salvarTime} disabled={processando}>
+							{processando ? 'Salvando...' : 'Salvar'}
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Lista de Times -->
-    {#if carregando}
-      <div class="flex justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {:else}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {#each times.filter((t: TimeComDetalhes) => t.ativo) as time}
-          <div
-            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all border-l-4"
-            style="border-color: {time.cor || '#3B82F6'}"
-          >
-            <div class="card-body">
-              <div class="flex items-start justify-between mb-2">
-                <div class="flex items-center gap-2">
-                  <div
-                    class="w-3 h-3 rounded-full"
-                    style="background-color: {time.cor || '#3B82F6'}"
-                  ></div>
-                  <h2 class="card-title text-lg">{time.nome}</h2>
-                </div>
-                <div class="dropdown dropdown-end">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-sm btn-square"
-                    aria-label="Menu do time"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                      />
-                    </svg>
-                  </button>
-                  <ul
-                    role="menu"
-                    class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 border border-base-300"
-                  >
-                    <li>
-                      <button type="button" onclick={() => editarTime(time)}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                          />
-                        </svg>
-                        Editar
-                      </button>
-                    </li>
-                    <li>
-                      <button
-                        type="button"
-                        onclick={() => abrirGerenciarMembros(time)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-                          />
-                        </svg>
-                        Gerenciar Membros
-                      </button>
-                    </li>
-                    <li>
-                      <button
-                        type="button"
-                        onclick={() => confirmarExclusao(time)}
-                        class="text-error"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                          />
-                        </svg>
-                        Desativar
-                      </button>
-                    </li>
-                  </ul>
-                </div>
-              </div>
+		<!-- Lista de Times -->
+		{#if carregando}
+			<div class="flex items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				{#each times.filter((t: TimeComDetalhes) => t.ativo) as time (time._id)}
+					<div
+						class="card bg-base-100 border-l-4 shadow-xl transition-all hover:shadow-2xl"
+						style="border-color: {time.cor || '#3B82F6'}"
+					>
+						<div class="card-body">
+							<div class="mb-2 flex items-start justify-between">
+								<div class="flex items-center gap-2">
+									<div
+										class="h-3 w-3 rounded-full"
+										style="background-color: {time.cor || '#3B82F6'}"
+									></div>
+									<h2 class="card-title text-lg">{time.nome}</h2>
+								</div>
+								<div class="dropdown dropdown-end">
+									<button
+										type="button"
+										class="btn btn-ghost btn-sm btn-square"
+										aria-label="Menu do time"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-5 w-5"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+											/>
+										</svg>
+									</button>
+									<ul
+										role="menu"
+										class="dropdown-content menu bg-base-100 rounded-box border-base-300 z-1 w-52 border p-2 shadow-xl"
+									>
+										<li>
+											<button type="button" onclick={() => editarTime(time)}>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+													/>
+												</svg>
+												Editar
+											</button>
+										</li>
+										<li>
+											<button type="button" onclick={() => abrirGerenciarMembros(time)}>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+													/>
+												</svg>
+												Gerenciar Membros
+											</button>
+										</li>
+										<li>
+											<button
+												type="button"
+												onclick={() => confirmarExclusao(time)}
+												class="text-error"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+													/>
+												</svg>
+												Desativar
+											</button>
+										</li>
+									</ul>
+								</div>
+							</div>
 
-              <p class="text-sm text-base-content/70 mb-3 min-h-[2rem]">
-                {time.descricao || "Sem descrição"}
-              </p>
+							<p class="text-base-content/70 mb-3 min-h-8 text-sm">
+								{time.descricao || 'Sem descrição'}
+							</p>
 
-              <div class="divider my-2"></div>
+							<div class="divider my-2"></div>
 
-              <div class="space-y-2">
-                <div class="flex items-center gap-2 text-sm">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <span class="text-base-content/70"
-                    ><strong>Gestor:</strong>
-                    {time.gestor?.nome || "Não definido"}</span
-                  >
-                </div>
-                <div class="flex items-center gap-2 text-sm">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-                    />
-                  </svg>
-                  <span class="text-base-content/70"
-                    ><strong>Membros:</strong>
-                    <span class="badge badge-primary badge-sm"
-                      >{time.totalMembros || 0}</span
-                    ></span
-                  >
-                </div>
-              </div>
+							<div class="space-y-2">
+								<div class="flex items-center gap-2 text-sm">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+									<span class="text-base-content/70"
+										><strong>Gestor:</strong>
+										{time.gestor?.nome || 'Não definido'}</span
+									>
+								</div>
+								<div class="flex items-center gap-2 text-sm">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+										/>
+									</svg>
+									<span class="text-base-content/70"
+										><strong>Membros:</strong>
+										<span class="badge badge-primary badge-sm">{time.totalMembros || 0}</span></span
+									>
+								</div>
+							</div>
 
-              <div class="card-actions justify-end mt-4">
-                <button
-                  class="btn btn-sm btn-outline btn-primary"
-                  onclick={() => abrirGerenciarMembros(time)}
-                >
-                  Ver Detalhes
-                </button>
-              </div>
-            </div>
-          </div>
-        {/each}
+							<div class="card-actions mt-4 justify-end">
+								<button
+									class="btn btn-sm btn-outline btn-primary"
+									onclick={() => abrirGerenciarMembros(time)}
+								>
+									Ver Detalhes
+								</button>
+							</div>
+						</div>
+					</div>
+				{/each}
 
-        {#if times.filter((t: TimeComDetalhes) => t.ativo).length === 0}
-          <div class="col-span-full">
-            <div
-              class="flex flex-col items-center justify-center py-16 text-center"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-16 w-16 text-base-content/30"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                />
-              </svg>
-              <h3 class="text-xl font-semibold mt-4">Nenhum time cadastrado</h3>
-              <p class="text-base-content/60 mt-2">
-                Clique em "Novo Time" para criar seu primeiro time
-              </p>
-            </div>
-          </div>
-        {/if}
-      </div>
-    {/if}
+				{#if times.filter((t: TimeComDetalhes) => t.ativo).length === 0}
+					<div class="col-span-full">
+						<div class="flex flex-col items-center justify-center py-16 text-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-base-content/30 h-16 w-16"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+								/>
+							</svg>
+							<h3 class="mt-4 text-xl font-semibold">Nenhum time cadastrado</h3>
+							<p class="text-base-content/60 mt-2">
+								Clique em "Novo Time" para criar seu primeiro time
+							</p>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
 
-    <!-- Modal de Gerenciar Membros -->
-    {#if mostrarModalMembros && timeParaMembros}
-      <dialog class="modal modal-open">
-        <div class="modal-box max-w-4xl">
-          <h3 class="font-bold text-2xl mb-4 flex items-center gap-2">
-            <div
-              class="w-3 h-3 rounded-full"
-              style="background-color: {timeParaMembros.cor}"
-            ></div>
-            {timeParaMembros.nome}
-          </h3>
+		<!-- Modal de Gerenciar Membros -->
+		{#if mostrarModalMembros && timeParaMembros}
+			<dialog class="modal modal-open">
+				<div class="modal-box max-w-4xl">
+					<h3 class="mb-4 flex items-center gap-2 text-2xl font-bold">
+						<div class="h-3 w-3 rounded-full" style="background-color: {timeParaMembros.cor}"></div>
+						{timeParaMembros.nome}
+					</h3>
 
-          <!-- Membros Atuais -->
-          <div class="mb-6">
-            <h4 class="font-bold text-lg mb-3">
-              Membros Atuais ({timeParaMembros.membros?.length || 0})
-            </h4>
+					<!-- Membros Atuais -->
+					<div class="mb-6">
+						<h4 class="mb-3 text-lg font-bold">
+							Membros Atuais ({timeParaMembros.membros?.length || 0})
+						</h4>
 
-            {#if timeParaMembros.membros && timeParaMembros.membros.length > 0}
-              <div class="space-y-2 max-h-60 overflow-y-auto">
-                {#each timeParaMembros.membros as membro}
-                  <div
-                    class="flex items-center justify-between p-3 bg-base-200 rounded-lg"
-                  >
-                    <div class="flex items-center gap-3">
-                      <div class="avatar placeholder">
-                        <div
-                          class="bg-primary text-primary-content rounded-full w-10"
-                        >
-                          <span class="text-xs"
-                            >{membro.funcionario?.nome
-                              .substring(0, 2)
-                              .toUpperCase()}</span
-                          >
-                        </div>
-                      </div>
-                      <div>
-                        <div class="font-semibold">
-                          {membro.funcionario?.nome}
-                        </div>
-                        <div class="text-xs text-base-content/50">
-                          Desde {new Date(
-                            membro.dataEntrada,
-                          ).toLocaleDateString("pt-BR")}
-                        </div>
-                      </div>
-                    </div>
-                    <button
-                      class="btn btn-sm btn-error btn-square"
-                      onclick={() => removerMembro(membro._id)}
-                      disabled={processando}
-                      aria-label="Remover membro"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-4 w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                {/each}
-              </div>
-            {:else}
-              <div class="alert alert-info">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  class="stroke-current shrink-0 w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <span>Nenhum membro neste time ainda.</span>
-              </div>
-            {/if}
-          </div>
+						{#if timeParaMembros.membros && timeParaMembros.membros.length > 0}
+							<div class="max-h-60 space-y-2 overflow-y-auto">
+								{#each timeParaMembros.membros as membro (membro._id)}
+									<div class="bg-base-200 flex items-center justify-between rounded-lg p-3">
+										<div class="flex items-center gap-3">
+											<div class="avatar placeholder">
+												<div class="bg-primary text-primary-content w-10 rounded-full">
+													<span class="text-xs"
+														>{membro.funcionario?.nome.substring(0, 2).toUpperCase()}</span
+													>
+												</div>
+											</div>
+											<div>
+												<div class="font-semibold">
+													{membro.funcionario?.nome}
+												</div>
+												<div class="text-base-content/50 text-xs">
+													Desde {new Date(membro.dataEntrada).toLocaleDateString('pt-BR')}
+												</div>
+											</div>
+										</div>
+										<button
+											class="btn btn-sm btn-error btn-square"
+											onclick={() => removerMembro(membro._id)}
+											disabled={processando}
+											aria-label="Remover membro"
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg>
+										</button>
+									</div>
+								{/each}
+							</div>
+						{:else}
+							<div class="alert alert-info">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									class="h-6 w-6 shrink-0 stroke-current"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									></path>
+								</svg>
+								<span>Nenhum membro neste time ainda.</span>
+							</div>
+						{/if}
+					</div>
 
-          <div class="divider"></div>
+					<div class="divider"></div>
 
-          <!-- Adicionar Membros -->
-          <div>
-            <h4 class="font-bold text-lg mb-3">Adicionar Membros</h4>
+					<!-- Adicionar Membros -->
+					<div>
+						<h4 class="mb-3 text-lg font-bold">Adicionar Membros</h4>
 
-            {#if membrosDisponiveis.length > 0}
-              <div class="space-y-2 max-h-60 overflow-y-auto">
-                {#each membrosDisponiveis as funcionario}
-                  <div
-                    class="flex items-center justify-between p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
-                  >
-                    <div class="flex items-center gap-3">
-                      <div class="avatar placeholder">
-                        <div
-                          class="bg-neutral text-neutral-content rounded-full w-10"
-                        >
-                          <span class="text-xs"
-                            >{funcionario.nome
-                              .substring(0, 2)
-                              .toUpperCase()}</span
-                          >
-                        </div>
-                      </div>
-                      <div>
-                        <div class="font-semibold">{funcionario.nome}</div>
-                        <div class="text-xs text-base-content/50">
-                          {funcionario.matricula || "S/N"}
-                        </div>
-                      </div>
-                    </div>
-                    <button
-                      class="btn btn-sm btn-primary"
-                      onclick={() => adicionarMembro(funcionario._id)}
-                      disabled={processando}
-                    >
-                      Adicionar
-                    </button>
-                  </div>
-                {/each}
-              </div>
-            {:else}
-              <div class="alert">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  class="stroke-current shrink-0 w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  ></path>
-                </svg>
-                <span>Todos os funcionários já estão em times.</span>
-              </div>
-            {/if}
-          </div>
+						{#if membrosDisponiveis.length > 0}
+							<div class="max-h-60 space-y-2 overflow-y-auto">
+								{#each membrosDisponiveis as funcionario (funcionario._id)}
+									<div
+										class="bg-base-200 hover:bg-base-300 flex items-center justify-between rounded-lg p-3 transition-colors"
+									>
+										<div class="flex items-center gap-3">
+											<div class="avatar placeholder">
+												<div class="bg-neutral text-neutral-content w-10 rounded-full">
+													<span class="text-xs"
+														>{funcionario.nome.substring(0, 2).toUpperCase()}</span
+													>
+												</div>
+											</div>
+											<div>
+												<div class="font-semibold">{funcionario.nome}</div>
+												<div class="text-base-content/50 text-xs">
+													{funcionario.matricula || 'S/N'}
+												</div>
+											</div>
+										</div>
+										<button
+											class="btn btn-sm btn-primary"
+											onclick={() => adicionarMembro(funcionario._id)}
+											disabled={processando}
+										>
+											Adicionar
+										</button>
+									</div>
+								{/each}
+							</div>
+						{:else}
+							<div class="alert">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									class="h-6 w-6 shrink-0 stroke-current"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									></path>
+								</svg>
+								<span>Todos os funcionários já estão em times.</span>
+							</div>
+						{/if}
+					</div>
 
-          <div class="modal-action">
-            <button class="btn" onclick={fecharModalMembros}>Fechar</button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button
-            type="button"
-            onclick={fecharModalMembros}
-            aria-label="Fechar modal">Fechar</button
-          >
-        </form>
-      </dialog>
-    {/if}
+					<div class="modal-action">
+						<button class="btn" onclick={fecharModalMembros}>Fechar</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button type="button" onclick={fecharModalMembros} aria-label="Fechar modal"
+						>Fechar</button
+					>
+				</form>
+			</dialog>
+		{/if}
 
-    <!-- Modal de Confirmação de Exclusão -->
-    {#if mostrarConfirmacaoExclusao && timeParaExcluir}
-      <dialog class="modal modal-open">
-        <div class="modal-box">
-          <h3 class="font-bold text-lg">Confirmar Desativação</h3>
-          <p class="py-4">
-            Tem certeza que deseja desativar o time <strong
-              >{timeParaExcluir.nome}</strong
-            >? Todos os membros serão removidos.
-          </p>
-          <div class="modal-action">
-            <button
-              class="btn"
-              onclick={() => (mostrarConfirmacaoExclusao = false)}
-              disabled={processando}
-            >
-              Cancelar
-            </button>
-            <button
-              class="btn btn-error"
-              onclick={excluirTime}
-              disabled={processando}
-            >
-              {processando ? "Processando..." : "Desativar"}
-            </button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button
-            type="button"
-            onclick={() => (mostrarConfirmacaoExclusao = false)}
-            aria-label="Fechar modal">Fechar</button
-          >
-        </form>
-      </dialog>
-    {/if}
-  </main>
+		<!-- Modal de Confirmação de Exclusão -->
+		{#if mostrarConfirmacaoExclusao && timeParaExcluir}
+			<dialog class="modal modal-open">
+				<div class="modal-box">
+					<h3 class="text-lg font-bold">Confirmar Desativação</h3>
+					<p class="py-4">
+						Tem certeza que deseja desativar o time <strong>{timeParaExcluir.nome}</strong>? Todos
+						os membros serão removidos.
+					</p>
+					<div class="modal-action">
+						<button
+							class="btn"
+							onclick={() => (mostrarConfirmacaoExclusao = false)}
+							disabled={processando}
+						>
+							Cancelar
+						</button>
+						<button class="btn btn-error" onclick={excluirTime} disabled={processando}>
+							{processando ? 'Processando...' : 'Desativar'}
+						</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button
+						type="button"
+						onclick={() => (mostrarConfirmacaoExclusao = false)}
+						aria-label="Fechar modal">Fechar</button
+					>
+				</form>
+			</dialog>
+		{/if}
+	</main>
 </ProtectedRoute>
diff --git a/packages/backend/convex/roles.ts b/packages/backend/convex/roles.ts
index 6f9d25f..f21547e 100644
--- a/packages/backend/convex/roles.ts
+++ b/packages/backend/convex/roles.ts
@@ -1,35 +1,125 @@
-import { v } from "convex/values";
-import { query } from "./_generated/server";
+import { v } from 'convex/values';
+import { query, mutation } from './_generated/server';
+import type { Id } from './_generated/dataModel';
+import { getCurrentUserFunction } from './auth';
 
 /**
  * Listar todas as roles
  */
 export const listar = query({
-  args: {},
-  handler: async (ctx) => {
-    return await ctx.db.query("roles").collect();
-  },
+	args: {},
+	handler: async (ctx) => {
+		return await ctx.db.query('roles').collect();
+	}
 });
 
 /**
  * Buscar role por ID
  */
 export const buscarPorId = query({
-  args: {
-    roleId: v.id("roles"),
-  },
-  returns: v.union(
-    v.object({
-      _id: v.id("roles"),
-      nome: v.string(),
-      descricao: v.string(),
-      nivel: v.number(),
-      setor: v.optional(v.string()),
-    }),
-    v.null()
-  ),
-  handler: async (ctx, args) => {
-    return await ctx.db.get(args.roleId);
-  },
+	args: {
+		roleId: v.id('roles')
+	},
+	returns: v.union(
+		v.object({
+			_id: v.id('roles'),
+			nome: v.string(),
+			descricao: v.string(),
+			nivel: v.number(),
+			setor: v.optional(v.string())
+		}),
+		v.null()
+	),
+	handler: async (ctx, args) => {
+		return await ctx.db.get(args.roleId);
+	}
 });
 
+const slugify = (value: string) =>
+	value
+		.normalize('NFD')
+		.replace(/[\u0300-\u036f]/g, '')
+		.trim()
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, '_')
+		.replace(/^_+|_+$/g, '')
+		.replace(/_{2,}/g, '_');
+
+export const criar = mutation({
+	args: {
+		nome: v.string(),
+		descricao: v.string(),
+		nivel: v.number(),
+		setor: v.optional(v.string()),
+		copiarDeRoleId: v.optional(v.id('roles'))
+	},
+	returns: v.union(
+		v.object({ sucesso: v.literal(true), roleId: v.id('roles') }),
+		v.object({ sucesso: v.literal(false), erro: v.string() })
+	),
+	handler: async (ctx, args) => {
+		const usuarioAtual = await getCurrentUserFunction(ctx);
+		if (!usuarioAtual) {
+			return { sucesso: false as const, erro: 'nao_autenticado' };
+		}
+
+		const roleAtual = await ctx.db.get(usuarioAtual.roleId);
+		if (!roleAtual || roleAtual.nivel > 1) {
+			return { sucesso: false as const, erro: 'sem_permissao' };
+		}
+
+		const nomeNormalizado = slugify(args.nome);
+		if (!nomeNormalizado) {
+			return { sucesso: false as const, erro: 'nome_invalido' };
+		}
+
+		const existente = await ctx.db
+			.query('roles')
+			.withIndex('by_nome', (q) => q.eq('nome', nomeNormalizado))
+			.unique();
+
+		if (existente) {
+			return { sucesso: false as const, erro: 'nome_ja_utilizado' };
+		}
+
+		let permissoesParaCopiar: Array<Id<'permissoes'>> = [];
+
+		if (args.copiarDeRoleId) {
+			const roleOrigem = await ctx.db.get(args.copiarDeRoleId);
+			if (!roleOrigem) {
+				return { sucesso: false as const, erro: 'role_origem_nao_encontrada' };
+			}
+
+			const permissoesOrigem = await ctx.db
+				.query('rolePermissoes')
+				.withIndex('by_role', (q) => q.eq('roleId', args.copiarDeRoleId!))
+				.collect();
+
+			permissoesParaCopiar = permissoesOrigem.map((item) => item.permissaoId);
+		}
+
+		const nivelAjustado = Math.min(Math.max(Math.round(args.nivel), 0), 10);
+		const setor = args.setor?.trim();
+
+		const roleId = await ctx.db.insert('roles', {
+			nome: nomeNormalizado,
+			descricao: args.descricao.trim() || args.nome.trim(),
+			nivel: nivelAjustado,
+			setor: setor && setor.length > 0 ? setor : undefined,
+			customizado: true,
+			criadoPor: usuarioAtual._id,
+			editavel: true
+		});
+
+		if (permissoesParaCopiar.length > 0) {
+			for (const permissaoId of permissoesParaCopiar) {
+				await ctx.db.insert('rolePermissoes', {
+					roleId,
+					permissaoId
+				});
+			}
+		}
+
+		return { sucesso: true as const, roleId };
+	}
+});