diff --git a/pages/ManageCourses.tsx b/pages/ManageCourses.tsx
index 9983fc6..8289935 100644
--- a/pages/ManageCourses.tsx
+++ b/pages/ManageCourses.tsx
@@ -634,7 +634,7 @@ const CourseModal: React.FC<{
               <div>
                 <label className="text-xs text-gray-400 uppercase font-bold tracking-wider mb-1 block">Publicação</label>
                 <select value={status} onChange={(e) => setStatus(e.target.value as Course['status'])} className="w-full bg-black/50 text-white border border-white/10 rounded-xl px-3 py-2.5 text-xs focus:outline-none focus:border-orange-500/50">
-                  <option value="draft" className="bg-zinc-900">Salvar como rascunho</option>
+                  <option value="draft" className="bg-zinc-900">Salvar como não publicado</option>
                   <option value="published" className="bg-zinc-900">Publicar agora</option>
                 </select>
               </div>
@@ -745,7 +745,7 @@ const CourseModal: React.FC<{
             </div>
             <div className="mt-5 flex flex-col-reverse gap-3 border-t border-white/5 pt-5 sm:flex-row sm:justify-between">
               <button type="button" onClick={() => setEditorStep(2)} className="inline-flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold text-gray-300 hover:bg-white/5 hover:text-white"><ChevronLeft className="w-4 h-4" /> Voltar para aulas</button>
-              <button type="button" onClick={() => void handleSubmit()} disabled={isSubmitting} className="inline-flex items-center justify-center gap-2 rounded-xl bg-orange-500 px-6 py-3 text-sm font-extrabold text-white shadow-lg shadow-orange-500/20 transition-colors hover:bg-orange-600 disabled:opacity-60">{isSubmitting ? 'Salvando...' : status === 'draft' ? 'Salvar como rascunho' : 'Salvar e publicar'}</button>
+              <button type="button" onClick={() => void handleSubmit()} disabled={isSubmitting} className="inline-flex items-center justify-center gap-2 rounded-xl bg-orange-500 px-6 py-3 text-sm font-extrabold text-white shadow-lg shadow-orange-500/20 transition-colors hover:bg-orange-600 disabled:opacity-60">{isSubmitting ? 'Salvando...' : status === 'draft' ? 'Salvar como não publicado' : 'Salvar e publicar'}</button>
             </div>
           </div>
         </div>
@@ -970,7 +970,7 @@ export const ManageCourses: React.FC = () => {
   const handleDuplicate = async (id: string) => {
     try {
       await duplicateCourse(id);
-      showToast('Cópia criada como rascunho.', 'success');
+      showToast('Cópia criada como não publicada.', 'success');
       loadData();
     } catch (error) {
       showToast(error instanceof Error ? error.message : 'Não foi possível duplicar este curso.', 'error');
@@ -1123,7 +1123,7 @@ export const ManageCourses: React.FC = () => {
                     <div className="absolute top-3 left-3 bg-black/70 backdrop-blur-md px-2.5 py-1 rounded-[980px] text-caption font-semibold uppercase tracking-caption text-white border border-white/10">
                       {course.category}
                     </div>
-                    {course.status === 'draft' && <div className="absolute top-3 right-3 bg-amber-500/20 backdrop-blur-md px-2.5 py-1 rounded-[980px] text-caption font-semibold uppercase tracking-caption text-amber-300 border border-amber-500/30">Rascunho</div>}
+                    {course.status === 'draft' && <div className="absolute top-3 right-3 bg-amber-500/20 backdrop-blur-md px-2.5 py-1 rounded-[980px] text-caption font-semibold uppercase tracking-caption text-amber-300 border border-amber-500/30">Não publicado</div>}
                   </div>
 
                   {/* Body */}
diff --git a/pages/SuperAdmin.tsx b/pages/SuperAdmin.tsx
index 9a44fab..f863b46 100644
--- a/pages/SuperAdmin.tsx
+++ b/pages/SuperAdmin.tsx
@@ -59,17 +59,17 @@ export const SuperAdmin: React.FC = () => {
   </main>;
 };
 
-const ContentPanel: React.FC<{ paths: LearningPath[]; homeConfiguration: HomeConfiguration | null; categories: Array<{ id: string; name: string; position: number; isActive: boolean }>; homeCourses: CourseOption[]; newCategory: string; setNewCategory: (value: string) => void; setHomeConfiguration: React.Dispatch<React.SetStateAction<HomeConfiguration | null>>; onCreateCategory: (event: React.FormEvent) => void; onToggleCategory: (category: { id: string; name: string; position: number; isActive: boolean }) => void; onMoveHomeCourse: (courseId: string, direction: -1 | 1) => void; onSaveHome: () => void; onNewPath: () => void; onEditPath: (path: LearningPath) => void; onDeletePath: (path: LearningPath) => void }> = ({ paths, homeConfiguration, categories, homeCourses, newCategory, setNewCategory, setHomeConfiguration, onCreateCategory, onToggleCategory, onMoveHomeCourse, onSaveHome, onNewPath, onEditPath, onDeletePath }) => <><div className="grid grid-cols-1 xl:grid-cols-[1.1fr_.9fr] gap-6 mb-6"><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><div className="flex items-start justify-between gap-4"><div><h2 className="text-lg font-bold text-white">Formações</h2><p className="text-sm text-gray-500 mt-1">Uma sequência ordenada de cursos existentes.</p></div><button onClick={onNewPath} className="inline-flex shrink-0 items-center gap-2 rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-orange-600"><Plus className="h-4 w-4" /> Nova formação</button></div><div className="mt-5 space-y-3">{paths.length === 0 ? <div className="rounded-xl border border-dashed border-white/15 px-4 py-8 text-center text-sm text-gray-500">Nenhuma formação criada ainda.</div> : paths.map((path) => <div key={path.id} className="flex items-center gap-3 rounded-xl bg-white/[0.03] p-3"><div className="h-12 w-20 shrink-0 overflow-hidden rounded-lg bg-zinc-900">{path.coverImageUrl ? <img src={path.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <FolderKanban className="m-3 h-6 w-6 text-orange-400" />}</div><div className="min-w-0 flex-1"><div className="flex items-center gap-2"><p className="truncate font-semibold text-white">{path.title}</p><span className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase ${path.status === 'published' ? 'bg-emerald-500/15 text-emerald-400' : 'bg-amber-500/15 text-amber-300'}`}>{path.status === 'published' ? 'Publicada' : 'Rascunho'}</span></div><p className="mt-1 text-xs text-gray-500">{path.courses.length} {path.courses.length === 1 ? 'curso' : 'cursos'}</p></div><button onClick={() => onEditPath(path)} className="rounded-lg p-2 text-gray-400 hover:bg-white/10 hover:text-white" title="Editar formação"><Pencil className="h-4 w-4" /></button><button onClick={() => void onDeletePath(path)} className="rounded-lg p-2 text-gray-500 hover:bg-red-500/15 hover:text-red-400" title="Excluir formação"><Trash2 className="h-4 w-4" /></button></div>)}</div></section><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><h2 className="text-lg font-bold text-white">Página inicial</h2><p className="text-sm text-gray-500 mt-1 mb-4">Escolha o curso do banner e a ordem da vitrine de cursos.</p>{homeConfiguration && <div className="space-y-3"><label className="block text-xs font-semibold uppercase tracking-wider text-gray-500">Banner principal</label><select value={homeConfiguration.featuredCourseId || ''} onChange={(event) => setHomeConfiguration((current) => current ? { ...current, featuredCourseId: event.target.value || null } : current)} className="w-full rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white"><option value="">Sem curso em destaque</option>{homeConfiguration.courses.filter((course) => course.status === 'published').map((course) => <option key={course.id} value={course.id}>{course.title}</option>)}</select><div className="rounded-xl bg-black/20 p-2"><p className="mb-2 px-1 text-xs text-gray-500">Ordem da vitrine</p>{homeCourses.map((course, index) => <div key={course.id} className="flex items-center gap-2 px-1 py-1.5 text-sm text-gray-300"><span className="w-5 text-xs text-gray-600">{index + 1}</span><span className="flex-1 truncate">{course.title}</span><button onClick={() => onMoveHomeCourse(course.id, -1)} disabled={index === 0} className="p-1 text-gray-400 disabled:opacity-20"><ArrowUp className="h-3.5 w-3.5" /></button><button onClick={() => onMoveHomeCourse(course.id, 1)} disabled={index === homeCourses.length - 1} className="p-1 text-gray-400 disabled:opacity-20"><ArrowDown className="h-3.5 w-3.5" /></button></div>)}</div><button onClick={onSaveHome} className="rounded-xl bg-white/10 px-4 py-2.5 text-sm font-semibold text-white hover:bg-white/15">Salvar página inicial</button></div>}</section></div><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><h2 className="text-lg font-bold text-white">Categorias de cursos</h2><p className="mb-4 text-sm text-gray-500">Aparecem no editor de cursos e na biblioteca.</p><form onSubmit={onCreateCategory} className="flex max-w-xl gap-2 mb-4"><input value={newCategory} onChange={(event) => setNewCategory(event.target.value)} placeholder="Nome da nova categoria" className="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white" /><button className="rounded-xl bg-orange-500 px-4 text-sm font-semibold text-white hover:bg-orange-600">Adicionar</button></form><div className="flex flex-wrap gap-2">{categories.map((category) => <button key={category.id} onClick={() => onToggleCategory(category)} className={`rounded-full px-3 py-1.5 text-xs font-semibold ${category.isActive ? 'bg-emerald-500/15 text-emerald-400' : 'bg-white/10 text-gray-500 line-through'}`}>{category.name}</button>)}</div></section></>;
+const ContentPanel: React.FC<{ paths: LearningPath[]; homeConfiguration: HomeConfiguration | null; categories: Array<{ id: string; name: string; position: number; isActive: boolean }>; homeCourses: CourseOption[]; newCategory: string; setNewCategory: (value: string) => void; setHomeConfiguration: React.Dispatch<React.SetStateAction<HomeConfiguration | null>>; onCreateCategory: (event: React.FormEvent) => void; onToggleCategory: (category: { id: string; name: string; position: number; isActive: boolean }) => void; onMoveHomeCourse: (courseId: string, direction: -1 | 1) => void; onSaveHome: () => void; onNewPath: () => void; onEditPath: (path: LearningPath) => void; onDeletePath: (path: LearningPath) => void }> = ({ paths, homeConfiguration, categories, homeCourses, newCategory, setNewCategory, setHomeConfiguration, onCreateCategory, onToggleCategory, onMoveHomeCourse, onSaveHome, onNewPath, onEditPath, onDeletePath }) => <><div className="grid grid-cols-1 xl:grid-cols-[1.1fr_.9fr] gap-6 mb-6"><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><div className="flex items-start justify-between gap-4"><div><h2 className="text-lg font-bold text-white">Formações</h2><p className="text-sm text-gray-500 mt-1">Uma sequência ordenada de cursos existentes.</p></div><button onClick={onNewPath} className="inline-flex shrink-0 items-center gap-2 rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-orange-600"><Plus className="h-4 w-4" /> Nova formação</button></div><div className="mt-5 space-y-3">{paths.length === 0 ? <div className="rounded-xl border border-dashed border-white/15 px-4 py-8 text-center text-sm text-gray-500">Nenhuma formação criada ainda.</div> : paths.map((path) => <div key={path.id} className="flex items-center gap-3 rounded-xl bg-white/[0.03] p-3"><div className="h-12 w-20 shrink-0 overflow-hidden rounded-lg bg-zinc-900">{path.coverImageUrl ? <img src={path.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <FolderKanban className="m-3 h-6 w-6 text-orange-400" />}</div><div className="min-w-0 flex-1"><div className="flex items-center gap-2"><p className="truncate font-semibold text-white">{path.title}</p><span className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase ${path.status === 'published' ? 'bg-emerald-500/15 text-emerald-400' : 'bg-amber-500/15 text-amber-300'}`}>{path.status === 'published' ? 'Publicado' : 'Não publicado'}</span></div><p className="mt-1 text-xs text-gray-500">{path.courses.length} {path.courses.length === 1 ? 'curso' : 'cursos'}</p></div><button onClick={() => onEditPath(path)} className="rounded-lg p-2 text-gray-400 hover:bg-white/10 hover:text-white" title="Editar formação"><Pencil className="h-4 w-4" /></button><button onClick={() => void onDeletePath(path)} className="rounded-lg p-2 text-gray-500 hover:bg-red-500/15 hover:text-red-400" title="Excluir formação"><Trash2 className="h-4 w-4" /></button></div>)}</div></section><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><h2 className="text-lg font-bold text-white">Página inicial</h2><p className="text-sm text-gray-500 mt-1 mb-4">Escolha o curso do banner e a ordem da vitrine de cursos.</p>{homeConfiguration && <div className="space-y-3"><label className="block text-xs font-semibold uppercase tracking-wider text-gray-500">Banner principal</label><select value={homeConfiguration.featuredCourseId || ''} onChange={(event) => setHomeConfiguration((current) => current ? { ...current, featuredCourseId: event.target.value || null } : current)} className="w-full rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white"><option value="">Sem curso em destaque</option>{homeConfiguration.courses.filter((course) => course.status === 'published').map((course) => <option key={course.id} value={course.id}>{course.title}</option>)}</select><div className="rounded-xl bg-black/20 p-2"><p className="mb-2 px-1 text-xs text-gray-500">Ordem da vitrine</p>{homeCourses.map((course, index) => <div key={course.id} className="flex items-center gap-2 px-1 py-1.5 text-sm text-gray-300"><span className="w-5 text-xs text-gray-600">{index + 1}</span><span className="flex-1 truncate">{course.title}</span><button onClick={() => onMoveHomeCourse(course.id, -1)} disabled={index === 0} className="p-1 text-gray-400 disabled:opacity-20"><ArrowUp className="h-3.5 w-3.5" /></button><button onClick={() => onMoveHomeCourse(course.id, 1)} disabled={index === homeCourses.length - 1} className="p-1 text-gray-400 disabled:opacity-20"><ArrowDown className="h-3.5 w-3.5" /></button></div>)}</div><button onClick={onSaveHome} className="rounded-xl bg-white/10 px-4 py-2.5 text-sm font-semibold text-white hover:bg-white/15">Salvar página inicial</button></div>}</section></div><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><h2 className="text-lg font-bold text-white">Categorias de cursos</h2><p className="mb-4 text-sm text-gray-500">Aparecem no editor de cursos e na biblioteca.</p><form onSubmit={onCreateCategory} className="flex max-w-xl gap-2 mb-4"><input value={newCategory} onChange={(event) => setNewCategory(event.target.value)} placeholder="Nome da nova categoria" className="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white" /><button className="rounded-xl bg-orange-500 px-4 text-sm font-semibold text-white hover:bg-orange-600">Adicionar</button></form><div className="flex flex-wrap gap-2">{categories.map((category) => <button key={category.id} onClick={() => onToggleCategory(category)} className={`rounded-full px-3 py-1.5 text-xs font-semibold ${category.isActive ? 'bg-emerald-500/15 text-emerald-400' : 'bg-white/10 text-gray-500 line-through'}`}>{category.name}</button>)}</div></section></>;
 
 const PeoplePanel: React.FC<{ users: ManagedUser[]; isLoading: boolean; query: string; setQuery: (value: string) => void; accessLink: string; inviteEmail: string; setInviteEmail: (value: string) => void; inviteRole: 'student' | 'instructor'; setInviteRole: (value: 'student' | 'instructor') => void; selectedUser: ManagedUserDetail | null; setSelectedUser: (user: ManagedUserDetail | null) => void; updatingUserId: string | null; loadingDetailId: string | null; currentUserId?: string; onInvite: (event: React.FormEvent) => void; onUpdateUser: (account: ManagedUser, update: Partial<Pick<ManagedUser, 'role' | 'isActive'>>) => void; onShowDetail: (account: ManagedUser) => void; onResetPassword: (account: ManagedUser) => void; onExport: () => void }> = ({ users, isLoading, query, setQuery, accessLink, inviteEmail, setInviteEmail, inviteRole, setInviteRole, selectedUser, setSelectedUser, updatingUserId, loadingDetailId, currentUserId, onInvite, onUpdateUser, onShowDetail, onResetPassword, onExport }) => <><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5 mb-6"><h2 className="text-lg font-bold text-white mb-4">Convidar usuário</h2><form onSubmit={onInvite} className="flex flex-col md:flex-row gap-3"><input required type="email" value={inviteEmail} onChange={(event) => setInviteEmail(event.target.value)} placeholder="E-mail do convidado" className="flex-1 rounded-xl bg-zinc-900 border border-white/10 px-4 py-2.5 text-sm text-white" /><select value={inviteRole} onChange={(event) => setInviteRole(event.target.value as 'student' | 'instructor')} className="rounded-xl bg-zinc-900 border border-white/10 px-4 py-2.5 text-sm text-white"><option value="student">Aluno</option><option value="instructor">Instrutor</option></select><button className="rounded-xl bg-orange-500 hover:bg-orange-600 px-5 py-2.5 text-sm font-semibold text-white">Gerar convite</button></form>{accessLink && <div className="mt-4 flex gap-2"><input readOnly value={accessLink} className="flex-1 rounded-xl bg-black border border-white/10 px-3 py-2 text-xs text-gray-300" /><button onClick={() => navigator.clipboard.writeText(accessLink)} className="rounded-xl bg-white/10 px-4 text-xs font-semibold">Copiar</button></div>}</section>{selectedUser && <section className="rounded-2xl border border-orange-500/30 bg-zinc-950/80 p-5 mb-6"><div className="flex items-start justify-between gap-4"><div><p className="text-xs uppercase tracking-wider text-orange-400 font-semibold">Detalhes do usuário</p><h2 className="text-lg font-bold text-white mt-1">{selectedUser.name}</h2><p className="text-sm text-gray-400">{selectedUser.email} · {roleLabel[selectedUser.role]}</p></div><button onClick={() => setSelectedUser(null)} className="text-xs text-gray-400 hover:text-white">Fechar</button></div><div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-5 text-sm"><DetailMetric label="Aulas concluídas" value={selectedUser.completedLessons.toString()} /><DetailMetric label="Última atividade" value={selectedUser.lastLearningAt ? new Intl.DateTimeFormat('pt-BR', { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(selectedUser.lastLearningAt)) : 'Sem atividade'} /><DetailMetric label="Status" value={selectedUser.isActive ? 'Ativo' : 'Desativado'} /></div></section>}<section className="rounded-2xl border border-white/10 bg-zinc-950/80 overflow-hidden"><div className="p-5 border-b border-white/10 flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between"><h2 className="text-lg font-bold text-white">Usuários</h2><div className="flex gap-2"><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar por nome ou e-mail" className="w-full sm:w-80 rounded-xl bg-zinc-900 border border-white/10 px-4 py-2.5 text-sm text-white" /><button onClick={onExport} className="rounded-xl bg-white/10 px-3 text-sm text-white hover:bg-white/15" title="Exportar CSV"><Download className="h-4 w-4" /></button></div></div>{isLoading ? <div className="h-64 flex items-center justify-center"><Loader2 className="w-8 h-8 animate-spin text-orange-400" /></div> : <div className="overflow-x-auto"><table className="w-full min-w-[760px] text-left text-sm"><thead className="bg-white/[0.03] text-xs uppercase tracking-wider text-gray-500"><tr><th className="px-5 py-4">Usuário</th><th className="px-5 py-4">Perfil</th><th className="px-5 py-4">Status</th><th className="px-5 py-4">Cadastro</th><th className="px-5 py-4">Ações</th></tr></thead><tbody className="divide-y divide-white/5">{users.map((account) => { const isCurrentUser = account.id === currentUserId; const isUpdating = updatingUserId === account.id; return <tr key={account.id} className="text-gray-300"><td className="px-5 py-4"><div className="font-semibold text-white">{account.name}</div><div className="text-xs text-gray-500 mt-1">{account.email}</div></td><td className="px-5 py-4"><select value={account.role} disabled={isCurrentUser || isUpdating} onChange={(event) => onUpdateUser(account, { role: event.target.value as ManagedUser['role'] })} className="rounded-lg bg-zinc-900 border border-white/10 px-3 py-2 text-xs text-white disabled:opacity-50">{Object.entries(roleLabel).map(([role, label]) => <option key={role} value={role}>{label}</option>)}</select></td><td className="px-5 py-4"><button disabled={isCurrentUser || isUpdating} onClick={() => onUpdateUser(account, { isActive: !account.isActive })} className={`inline-flex items-center gap-2 rounded-full px-3 py-2 text-xs font-semibold disabled:opacity-50 ${account.isActive ? 'bg-emerald-500/15 text-emerald-400' : 'bg-red-500/15 text-red-400'}`}>{account.isActive ? <UserCheck className="w-3.5 h-3.5" /> : <UserX className="w-3.5 h-3.5" />}{account.isActive ? 'Ativo' : 'Desativado'}</button></td><td className="px-5 py-4 text-xs text-gray-500">{new Intl.DateTimeFormat('pt-BR').format(new Date(account.createdAt))}</td><td className="px-5 py-4"><div className="flex items-center gap-3"><button disabled={loadingDetailId === account.id} onClick={() => onShowDetail(account)} className="text-xs font-semibold text-gray-300 hover:text-white">{loadingDetailId === account.id ? 'Carregando...' : 'Detalhes'}</button><button disabled={isUpdating} onClick={() => onResetPassword(account)} className="text-xs font-semibold text-orange-400 hover:text-orange-300">Redefinir senha</button></div></td></tr>; })}</tbody></table></div>}</section></>;
 
-const PathEditor: React.FC<{ input: LearningPathInput; setInput: React.Dispatch<React.SetStateAction<LearningPathInput>>; courses: CourseOption[]; selectedCourses: CourseOption[]; editing: boolean; isSaving: boolean; isUploadingCover: boolean; coverInputRef: React.RefObject<HTMLInputElement | null>; onClose: () => void; onSave: (event: React.FormEvent) => void; onUpload: (file: File) => void; onToggleCourse: (id: string) => void; onMoveCourse: (id: string, direction: -1 | 1) => void }> = ({ input, setInput, courses, selectedCourses, editing, isSaving, isUploadingCover, coverInputRef, onClose, onSave, onUpload, onToggleCourse, onMoveCourse }) => <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm"><form onSubmit={onSave} className="max-h-[92vh] w-full max-w-5xl overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950 shadow-2xl"><div className="sticky top-0 z-10 flex items-start justify-between border-b border-white/10 bg-zinc-950 px-6 py-5"><div><p className="text-xs font-bold uppercase tracking-wider text-orange-400">Formação</p><h2 className="mt-1 text-xl font-bold text-white">{editing ? 'Editar formação' : 'Nova formação'}</h2><p className="mt-1 text-sm text-gray-500">Organize cursos existentes na ordem em que os alunos devem assisti-los.</p></div><button type="button" onClick={onClose} className="rounded-full p-2 text-gray-400 hover:bg-white/10 hover:text-white"><X className="h-5 w-5" /></button></div><div className="grid gap-6 p-6 lg:grid-cols-[.85fr_1.15fr]"><div className="space-y-4"><input ref={coverInputRef} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(event) => { const file = event.target.files?.[0]; if (file) onUpload(file); event.currentTarget.value = ''; }} /><button type="button" onClick={() => coverInputRef.current?.click()} className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl border border-dashed border-white/20 bg-zinc-900 text-sm text-gray-400">{input.coverImageUrl ? <img src={input.coverImageUrl} alt="Prévia da capa" className="h-full w-full object-cover" /> : <span className="flex flex-col items-center gap-2"><Upload className="h-5 w-5 text-orange-400" />Enviar capa da formação</span>}{isUploadingCover && <span className="absolute inset-0 flex items-center justify-center bg-black/70"><Loader2 className="h-6 w-6 animate-spin text-orange-400" /></span>}</button><Field label="Título"><input required value={input.title} onChange={(event) => setInput((current) => ({ ...current, title: event.target.value }))} placeholder="Ex.: Formação em Tráfego Pago" className="input" /></Field><Field label="Descrição"><textarea value={input.description} onChange={(event) => setInput((current) => ({ ...current, description: event.target.value }))} placeholder="O que o aluno vai construir nesta formação?" rows={4} className="input resize-none" /></Field><label className="flex items-center justify-between rounded-xl bg-white/[0.03] p-3 text-sm"><span className="text-gray-300">Publicação</span><select value={input.status} onChange={(event) => setInput((current) => ({ ...current, status: event.target.value as 'draft' | 'published' }))} className="rounded-lg border border-white/10 bg-zinc-900 px-2 py-1.5 text-xs text-white"><option value="draft">Salvar como rascunho</option><option value="published">Publicar formação</option></select></label></div><div><div className="mb-3"><h3 className="font-semibold text-white">Cursos da formação</h3><p className="mt-1 text-sm text-gray-500">Selecione e ordene os cursos. Uma formação publicada só pode conter cursos publicados.</p></div><div className="space-y-2 rounded-xl border border-white/10 bg-black/20 p-3">{selectedCourses.length === 0 ? <p className="px-2 py-4 text-center text-sm text-gray-500">Selecione os cursos abaixo para montar a formação.</p> : selectedCourses.map((course, index) => <div key={course.id} className="flex items-center gap-3 rounded-lg bg-white/[0.04] px-3 py-2.5"><span className="w-5 text-xs font-bold text-orange-400">{index + 1}</span><span className="flex-1 truncate text-sm font-medium text-white">{course.title}</span><button type="button" onClick={() => onMoveCourse(course.id, -1)} disabled={index === 0} className="p-1 text-gray-400 disabled:opacity-20"><ArrowUp className="h-4 w-4" /></button><button type="button" onClick={() => onMoveCourse(course.id, 1)} disabled={index === selectedCourses.length - 1} className="p-1 text-gray-400 disabled:opacity-20"><ArrowDown className="h-4 w-4" /></button><button type="button" onClick={() => onToggleCourse(course.id)} className="p-1 text-gray-500 hover:text-red-400"><X className="h-4 w-4" /></button></div>)}</div><div className="mt-4 max-h-56 space-y-1 overflow-y-auto rounded-xl border border-white/10 p-2">{courses.filter((course) => course.status !== 'archived').sort((a, b) => a.title.localeCompare(b.title)).map((course) => { const selected = input.courseIds.includes(course.id); return <button type="button" key={course.id} onClick={() => onToggleCourse(course.id)} className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm ${selected ? 'bg-orange-500/15 text-orange-100' : 'hover:bg-white/[0.04] text-gray-300'}`}><span className={`flex h-4 w-4 items-center justify-center rounded border ${selected ? 'border-orange-500 bg-orange-500 text-white' : 'border-white/25'}`}>{selected ? '✓' : ''}</span><span className="flex-1 truncate">{course.title}</span><span className={`text-[10px] font-bold uppercase ${course.status === 'published' ? 'text-emerald-400' : 'text-amber-300'}`}>{course.status === 'published' ? 'Publicado' : 'Rascunho'}</span></button>; })}</div></div></div><div className="flex items-center justify-end gap-3 border-t border-white/10 px-6 py-4"><button type="button" onClick={onClose} className="rounded-xl px-4 py-2.5 text-sm font-semibold text-gray-300 hover:bg-white/10">Cancelar</button><button disabled={isSaving || isUploadingCover} className="rounded-xl bg-orange-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-orange-600 disabled:opacity-50">{isSaving ? 'Salvando...' : editing ? 'Salvar formação' : 'Criar formação'}</button></div></form></div>;
+const PathEditor: React.FC<{ input: LearningPathInput; setInput: React.Dispatch<React.SetStateAction<LearningPathInput>>; courses: CourseOption[]; selectedCourses: CourseOption[]; editing: boolean; isSaving: boolean; isUploadingCover: boolean; coverInputRef: React.RefObject<HTMLInputElement | null>; onClose: () => void; onSave: (event: React.FormEvent) => void; onUpload: (file: File) => void; onToggleCourse: (id: string) => void; onMoveCourse: (id: string, direction: -1 | 1) => void }> = ({ input, setInput, courses, selectedCourses, editing, isSaving, isUploadingCover, coverInputRef, onClose, onSave, onUpload, onToggleCourse, onMoveCourse }) => <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm"><form onSubmit={onSave} className="max-h-[92vh] w-full max-w-5xl overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950 shadow-2xl"><div className="sticky top-0 z-10 flex items-start justify-between border-b border-white/10 bg-zinc-950 px-6 py-5"><div><p className="text-xs font-bold uppercase tracking-wider text-orange-400">Formação</p><h2 className="mt-1 text-xl font-bold text-white">{editing ? 'Editar formação' : 'Nova formação'}</h2><p className="mt-1 text-sm text-gray-500">Organize cursos existentes na ordem em que os alunos devem assisti-los.</p></div><button type="button" onClick={onClose} className="rounded-full p-2 text-gray-400 hover:bg-white/10 hover:text-white"><X className="h-5 w-5" /></button></div><div className="grid gap-6 p-6 lg:grid-cols-[.85fr_1.15fr]"><div className="space-y-4"><input ref={coverInputRef} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(event) => { const file = event.target.files?.[0]; if (file) onUpload(file); event.currentTarget.value = ''; }} /><button type="button" onClick={() => coverInputRef.current?.click()} className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl border border-dashed border-white/20 bg-zinc-900 text-sm text-gray-400">{input.coverImageUrl ? <img src={input.coverImageUrl} alt="Prévia da capa" className="h-full w-full object-cover" /> : <span className="flex flex-col items-center gap-2"><Upload className="h-5 w-5 text-orange-400" />Enviar capa da formação</span>}{isUploadingCover && <span className="absolute inset-0 flex items-center justify-center bg-black/70"><Loader2 className="h-6 w-6 animate-spin text-orange-400" /></span>}</button><Field label="Título"><input required value={input.title} onChange={(event) => setInput((current) => ({ ...current, title: event.target.value }))} placeholder="Ex.: Formação em Tráfego Pago" className="input" /></Field><Field label="Descrição"><textarea value={input.description} onChange={(event) => setInput((current) => ({ ...current, description: event.target.value }))} placeholder="O que o aluno vai construir nesta formação?" rows={4} className="input resize-none" /></Field><label className="flex items-center justify-between rounded-xl bg-white/[0.03] p-3 text-sm"><span className="text-gray-300">Publicação</span><select value={input.status} onChange={(event) => setInput((current) => ({ ...current, status: event.target.value as 'draft' | 'published' }))} className="rounded-lg border border-white/10 bg-zinc-900 px-2 py-1.5 text-xs text-white"><option value="draft">Salvar como não publicado</option><option value="published">Publicar formação</option></select></label></div><div><div className="mb-3"><h3 className="font-semibold text-white">Cursos da formação</h3><p className="mt-1 text-sm text-gray-500">Selecione e ordene os cursos. Uma formação publicada só pode conter cursos publicados.</p></div><div className="space-y-2 rounded-xl border border-white/10 bg-black/20 p-3">{selectedCourses.length === 0 ? <p className="px-2 py-4 text-center text-sm text-gray-500">Selecione os cursos abaixo para montar a formação.</p> : selectedCourses.map((course, index) => <div key={course.id} className="flex items-center gap-3 rounded-lg bg-white/[0.04] px-3 py-2.5"><span className="w-5 text-xs font-bold text-orange-400">{index + 1}</span><span className="flex-1 truncate text-sm font-medium text-white">{course.title}</span><button type="button" onClick={() => onMoveCourse(course.id, -1)} disabled={index === 0} className="p-1 text-gray-400 disabled:opacity-20"><ArrowUp className="h-4 w-4" /></button><button type="button" onClick={() => onMoveCourse(course.id, 1)} disabled={index === selectedCourses.length - 1} className="p-1 text-gray-400 disabled:opacity-20"><ArrowDown className="h-4 w-4" /></button><button type="button" onClick={() => onToggleCourse(course.id)} className="p-1 text-gray-500 hover:text-red-400"><X className="h-4 w-4" /></button></div>)}</div><div className="mt-4 max-h-56 space-y-1 overflow-y-auto rounded-xl border border-white/10 p-2">{courses.filter((course) => course.status !== 'archived').sort((a, b) => a.title.localeCompare(b.title)).map((course) => { const selected = input.courseIds.includes(course.id); return <button type="button" key={course.id} onClick={() => onToggleCourse(course.id)} className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm ${selected ? 'bg-orange-500/15 text-orange-100' : 'hover:bg-white/[0.04] text-gray-300'}`}><span className={`flex h-4 w-4 items-center justify-center rounded border ${selected ? 'border-orange-500 bg-orange-500 text-white' : 'border-white/25'}`}>{selected ? '✓' : ''}</span><span className="flex-1 truncate">{course.title}</span><span className={`text-[10px] font-bold uppercase ${course.status === 'published' ? 'text-emerald-400' : 'text-amber-300'}`}>{course.status === 'published' ? 'Publicado' : 'Não publicado'}</span></button>; })}</div></div></div><div className="flex items-center justify-end gap-3 border-t border-white/10 px-6 py-4"><button type="button" onClick={onClose} className="rounded-xl px-4 py-2.5 text-sm font-semibold text-gray-300 hover:bg-white/10">Cancelar</button><button disabled={isSaving || isUploadingCover} className="rounded-xl bg-orange-500 px-5 py-2.5 text-sm font-semibold text-white hover:bg-orange-600 disabled:opacity-50">{isSaving ? 'Salvando...' : editing ? 'Salvar formação' : 'Criar formação'}</button></div></form></div>;
 const Field: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => <div><label className="mb-1.5 block text-xs font-semibold uppercase tracking-wider text-gray-500">{label}</label>{children}</div>;
 const TabButton: React.FC<{ active: boolean; onClick: () => void; label: string }> = ({ active, onClick, label }) => <button onClick={onClick} className={`border-b-2 px-4 py-3 text-sm font-semibold transition-colors ${active ? 'border-orange-500 text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}>{label}</button>;
 const StatCard: React.FC<{ icon: React.ReactNode; label: string; value: number }> = ({ icon, label, value }) => <div className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><div className="flex items-center gap-2 text-orange-400 mb-3">{icon}<span className="text-xs font-semibold uppercase tracking-wider">{label}</span></div><div className="text-3xl font-bold text-white">{value}</div></div>;
 const DetailMetric: React.FC<{ label: string; value: string }> = ({ label, value }) => <div className="rounded-xl bg-white/[0.03] px-4 py-3"><div className="text-xs text-gray-500">{label}</div><div className="text-sm font-semibold text-white mt-1">{value}</div></div>;
 
-const TrailManager: React.FC<{ trails: LearningPath[]; onNew: () => void; onOpen: (trail: LearningPath) => void }> = ({ trails, onNew, onOpen }) => <section className="overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/80"><div className="flex items-center justify-between gap-4 border-b border-white/10 p-5"><div><h2 className="text-lg font-bold text-white">Trilhas</h2><p className="mt-1 text-sm text-gray-500">Sequências ordenadas de cursos. Abra uma trilha para editar sua capa, descrição e conteúdo.</p></div><button onClick={onNew} className="inline-flex shrink-0 items-center gap-2 rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-orange-600"><Plus className="h-4 w-4" /> Nova trilha</button></div><div className="divide-y divide-white/5">{trails.length === 0 ? <p className="p-10 text-center text-sm text-gray-500">Nenhuma trilha criada ainda.</p> : trails.map((trail) => <button key={trail.id} onClick={() => onOpen(trail)} className="flex w-full items-center gap-4 px-5 py-4 text-left transition hover:bg-white/[0.03]"><div className="h-14 w-24 shrink-0 overflow-hidden rounded-xl bg-zinc-900">{trail.coverImageUrl ? <CourseCoverImage source={trail.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <div className="flex h-full items-center justify-center"><FolderKanban className="h-6 w-6 text-orange-400" /></div>}</div><div className="min-w-0 flex-1"><div className="flex items-center gap-2"><p className="truncate font-semibold text-white">{trail.title}</p><span className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase ${trail.status === 'published' ? 'bg-emerald-500/15 text-emerald-400' : 'bg-amber-500/15 text-amber-300'}`}>{trail.status === 'published' ? 'Publicada' : 'Rascunho'}</span></div><p className="mt-1 truncate text-xs text-gray-500">{trail.courses.length} {trail.courses.length === 1 ? 'curso' : 'cursos'} · {trail.description || 'Sem descrição'}</p></div><span className="inline-flex items-center gap-1.5 text-xs font-semibold text-orange-300">Gerenciar <Pencil className="h-3.5 w-3.5" /></span></button>)}</div></section>;
+const TrailManager: React.FC<{ trails: LearningPath[]; onNew: () => void; onOpen: (trail: LearningPath) => void }> = ({ trails, onNew, onOpen }) => <section className="overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/80"><div className="flex items-center justify-between gap-4 border-b border-white/10 p-5"><div><h2 className="text-lg font-bold text-white">Trilhas</h2><p className="mt-1 text-sm text-gray-500">Sequências ordenadas de cursos. Abra uma trilha para editar sua capa, descrição e conteúdo.</p></div><button onClick={onNew} className="inline-flex shrink-0 items-center gap-2 rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-orange-600"><Plus className="h-4 w-4" /> Nova trilha</button></div><div className="divide-y divide-white/5">{trails.length === 0 ? <p className="p-10 text-center text-sm text-gray-500">Nenhuma trilha criada ainda.</p> : trails.map((trail) => <button key={trail.id} onClick={() => onOpen(trail)} className="flex w-full items-center gap-4 px-5 py-4 text-left transition hover:bg-white/[0.03]"><div className="h-14 w-24 shrink-0 overflow-hidden rounded-xl bg-zinc-900">{trail.coverImageUrl ? <CourseCoverImage source={trail.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <div className="flex h-full items-center justify-center"><FolderKanban className="h-6 w-6 text-orange-400" /></div>}</div><div className="min-w-0 flex-1"><div className="flex items-center gap-2"><p className="truncate font-semibold text-white">{trail.title}</p><span className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase ${trail.status === 'published' ? 'bg-emerald-500/15 text-emerald-400' : 'bg-amber-500/15 text-amber-300'}`}>{trail.status === 'published' ? 'Publicado' : 'Não publicado'}</span></div><p className="mt-1 truncate text-xs text-gray-500">{trail.courses.length} {trail.courses.length === 1 ? 'curso' : 'cursos'} · {trail.description || 'Sem descrição'}</p></div><span className="inline-flex items-center gap-1.5 text-xs font-semibold text-orange-300">Gerenciar <Pencil className="h-3.5 w-3.5" /></span></button>)}</div></section>;
 
 const CategoryManager: React.FC<{ categories: Array<{ id: string; name: string; position: number; isActive: boolean }>; newCategory: string; setNewCategory: (value: string) => void; onCreate: (event: React.FormEvent) => void; onToggle: (category: { id: string; name: string; position: number; isActive: boolean }) => void }> = ({ categories, newCategory, setNewCategory, onCreate, onToggle }) => <section className="mt-6 rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><h2 className="text-lg font-bold text-white">Categorias das trilhas</h2><p className="mt-1 text-sm text-gray-500">Organize os temas disponíveis para cursos e trilhas.</p><form onSubmit={onCreate} className="mt-4 flex max-w-xl gap-2"><input value={newCategory} onChange={(event) => setNewCategory(event.target.value)} placeholder="Nome da categoria" className="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white" /><button className="rounded-xl bg-white/10 px-4 text-sm font-semibold text-white hover:bg-white/15">Adicionar</button></form><div className="mt-4 flex flex-wrap gap-2">{categories.map((category) => <button key={category.id} onClick={() => onToggle(category)} className={`rounded-full px-3 py-1.5 text-xs font-semibold ${category.isActive ? 'bg-emerald-500/15 text-emerald-400' : 'bg-white/10 text-gray-500 line-through'}`}>{category.name}</button>)}</div></section>;
 
@@ -99,9 +99,9 @@ const CoursesPanel: React.FC<{ courses: CourseOption[]; onManage: () => void }>
   visibleCourses.forEach((course) => {
     (byTrail[course.category] ||= []).push(course);
   });
-  return <section className="rounded-2xl border border-white/10 bg-zinc-950/80 overflow-hidden"><div className="flex items-center justify-between gap-4 border-b border-white/10 p-5"><div><h2 className="text-lg font-bold text-white">Cursos</h2><p className="mt-1 text-sm text-gray-500">Visualize cada curso pela sua capa e Trilha.</p></div><button onClick={onManage} className="rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white">Gerenciar cursos</button></div>{courses.length === 0 ? <p className="p-8 text-sm text-gray-500">Nenhum curso cadastrado.</p> : <><div className="flex flex-col gap-2 border-b border-white/10 p-4 sm:flex-row"><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar curso" className="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white" /><select value={selectedTrail} onChange={(event) => setSelectedTrail(event.target.value)} className="rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white"><option value="all">Todas as Trilhas</option>{trails.map((trail) => <option key={trail} value={trail}>{trail}</option>)}</select></div>{visibleCourses.length === 0 ? <p className="p-10 text-center text-sm text-gray-500">Nenhum curso encontrado.</p> : <div className="divide-y divide-white/10">{Object.entries(byTrail).sort(([a], [b]) => a.localeCompare(b, 'pt-BR')).map(([trail, trailCourses]) => <section key={trail} className="p-5"><div className="mb-3 flex items-center gap-2"><h3 className="font-semibold text-orange-300">{trail}</h3><span className="text-xs text-gray-600">{trailCourses.length} {trailCourses.length === 1 ? 'curso' : 'cursos'}</span></div><div className="grid gap-3 xl:grid-cols-2">{trailCourses.map((course) => <div key={course.id} className="flex items-center gap-3 rounded-xl border border-white/10 bg-black/20 p-3"><div className="h-14 w-24 shrink-0 overflow-hidden rounded-lg bg-zinc-900">{course.coverImageUrl ? <CourseCoverImage source={course.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <div className="h-full w-full bg-gradient-to-br from-zinc-800 to-zinc-950" />}</div><div className="min-w-0 flex-1"><p className="truncate font-semibold text-white">{course.title}</p><span className={`mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-bold uppercase ${course.status === 'published' ? 'bg-emerald-500/15 text-emerald-400' : 'bg-amber-500/15 text-amber-300'}`}>{course.status === 'published' ? 'Publicado' : 'Rascunho'}</span></div><button onClick={onManage} className="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-semibold text-gray-300 hover:bg-white/10">Editar</button></div>)}</div></section>)}</div>}</>}</section>;
+  return <section className="rounded-2xl border border-white/10 bg-zinc-950/80 overflow-hidden"><div className="flex items-center justify-between gap-4 border-b border-white/10 p-5"><div><h2 className="text-lg font-bold text-white">Cursos</h2><p className="mt-1 text-sm text-gray-500">Visualize cada curso pela sua capa e Trilha.</p></div><button onClick={onManage} className="rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white">Gerenciar cursos</button></div>{courses.length === 0 ? <p className="p-8 text-sm text-gray-500">Nenhum curso cadastrado.</p> : <><div className="flex flex-col gap-2 border-b border-white/10 p-4 sm:flex-row"><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar curso" className="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white" /><select value={selectedTrail} onChange={(event) => setSelectedTrail(event.target.value)} className="rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white"><option value="all">Todas as Trilhas</option>{trails.map((trail) => <option key={trail} value={trail}>{trail}</option>)}</select></div>{visibleCourses.length === 0 ? <p className="p-10 text-center text-sm text-gray-500">Nenhum curso encontrado.</p> : <div className="divide-y divide-white/10">{Object.entries(byTrail).sort(([a], [b]) => a.localeCompare(b, 'pt-BR')).map(([trail, trailCourses]) => <section key={trail} className="p-5"><div className="mb-3 flex items-center gap-2"><h3 className="font-semibold text-orange-300">{trail}</h3><span className="text-xs text-gray-600">{trailCourses.length} {trailCourses.length === 1 ? 'curso' : 'cursos'}</span></div><div className="grid gap-3 xl:grid-cols-2">{trailCourses.map((course) => <div key={course.id} className="flex items-center gap-3 rounded-xl border border-white/10 bg-black/20 p-3"><div className="h-14 w-24 shrink-0 overflow-hidden rounded-lg bg-zinc-900">{course.coverImageUrl ? <CourseCoverImage source={course.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <div className="h-full w-full bg-gradient-to-br from-zinc-800 to-zinc-950" />}</div><div className="min-w-0 flex-1"><p className="truncate font-semibold text-white">{course.title}</p><span className={`mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-bold uppercase ${course.status === 'published' ? 'bg-emerald-500/15 text-emerald-400' : 'bg-amber-500/15 text-amber-300'}`}>{course.status === 'published' ? 'Publicado' : 'Não publicado'}</span></div><button onClick={onManage} className="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-semibold text-gray-300 hover:bg-white/10">Editar</button></div>)}</div></section>)}</div>}</>}</section>;
 };
 
-const PathManager: React.FC<{ title: string; description: string; paths: LearningPath[]; onNew: () => void; onEdit: (path: LearningPath) => void; onDelete: (path: LearningPath) => void }> = ({ title, description, paths, onNew, onEdit, onDelete }) => <section className="rounded-2xl border border-white/10 bg-zinc-950/80 overflow-hidden"><div className="flex items-center justify-between gap-4 border-b border-white/10 p-5"><div><h2 className="text-lg font-bold text-white">{title}</h2><p className="mt-1 text-sm text-gray-500">{description}</p></div><button onClick={onNew} className="inline-flex items-center gap-2 rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white"><Plus className="h-4 w-4" /> Nova</button></div><div className="divide-y divide-white/5">{paths.length === 0 ? <div className="p-10 text-center text-sm text-gray-500">Nenhuma {title.toLowerCase()} criada ainda.</div> : paths.map((path) => <div key={path.id} className="flex items-center gap-4 p-4"><div className="h-12 w-20 shrink-0 overflow-hidden rounded-lg bg-zinc-900">{path.coverImageUrl ? <img src={path.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <FolderKanban className="m-3 h-6 w-6 text-orange-400" />}</div><div className="min-w-0 flex-1"><p className="truncate font-semibold text-white">{path.title}</p><p className="mt-1 text-xs text-gray-500">{path.courses.length} {path.courses.length === 1 ? 'curso' : 'cursos'} · {path.status === 'published' ? 'Publicada' : 'Rascunho'}</p></div><button onClick={() => onEdit(path)} className="rounded-lg border border-white/10 p-2 text-gray-300 hover:bg-white/10" title="Editar"><Pencil className="h-4 w-4" /></button><button onClick={() => void onDelete(path)} className="rounded-lg border border-red-500/20 p-2 text-red-400 hover:bg-red-500/10" title="Excluir"><Trash2 className="h-4 w-4" /></button></div>)}</div></section>;
+const PathManager: React.FC<{ title: string; description: string; paths: LearningPath[]; onNew: () => void; onEdit: (path: LearningPath) => void; onDelete: (path: LearningPath) => void }> = ({ title, description, paths, onNew, onEdit, onDelete }) => <section className="rounded-2xl border border-white/10 bg-zinc-950/80 overflow-hidden"><div className="flex items-center justify-between gap-4 border-b border-white/10 p-5"><div><h2 className="text-lg font-bold text-white">{title}</h2><p className="mt-1 text-sm text-gray-500">{description}</p></div><button onClick={onNew} className="inline-flex items-center gap-2 rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white"><Plus className="h-4 w-4" /> Nova</button></div><div className="divide-y divide-white/5">{paths.length === 0 ? <div className="p-10 text-center text-sm text-gray-500">Nenhuma {title.toLowerCase()} criada ainda.</div> : paths.map((path) => <div key={path.id} className="flex items-center gap-4 p-4"><div className="h-12 w-20 shrink-0 overflow-hidden rounded-lg bg-zinc-900">{path.coverImageUrl ? <img src={path.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <FolderKanban className="m-3 h-6 w-6 text-orange-400" />}</div><div className="min-w-0 flex-1"><p className="truncate font-semibold text-white">{path.title}</p><p className="mt-1 text-xs text-gray-500">{path.courses.length} {path.courses.length === 1 ? 'curso' : 'cursos'} · {path.status === 'published' ? 'Publicado' : 'Não publicado'}</p></div><button onClick={() => onEdit(path)} className="rounded-lg border border-white/10 p-2 text-gray-300 hover:bg-white/10" title="Editar"><Pencil className="h-4 w-4" /></button><button onClick={() => void onDelete(path)} className="rounded-lg border border-red-500/20 p-2 text-red-400 hover:bg-red-500/10" title="Excluir"><Trash2 className="h-4 w-4" /></button></div>)}</div></section>;
 
 const HomePanel: React.FC<{ homeConfiguration: HomeConfiguration | null; homeCourses: CourseOption[]; categories: Array<{ id: string; name: string; position: number; isActive: boolean }>; newCategory: string; setNewCategory: (value: string) => void; setHomeConfiguration: React.Dispatch<React.SetStateAction<HomeConfiguration | null>>; onCreateCategory: (event: React.FormEvent) => void; onToggleCategory: (category: { id: string; name: string; position: number; isActive: boolean }) => void; onMoveHomeCourse: (courseId: string, direction: -1 | 1) => void; onSaveHome: () => void }> = ({ homeConfiguration, homeCourses, categories, newCategory, setNewCategory, setHomeConfiguration, onCreateCategory, onToggleCategory, onMoveHomeCourse, onSaveHome }) => <div className="grid gap-6 xl:grid-cols-[1fr_.8fr]"><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><h2 className="text-lg font-bold text-white">Página inicial</h2><p className="mb-5 mt-1 text-sm text-gray-500">Defina o conteúdo principal e a ordem dos cursos.</p>{homeConfiguration && <div className="space-y-4"><select value={homeConfiguration.featuredCourseId || ''} onChange={(event) => setHomeConfiguration((current) => current ? { ...current, featuredCourseId: event.target.value || null } : current)} className="w-full rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white"><option value="">Sem conteúdo em destaque</option>{homeConfiguration.courses.filter((course) => course.status === 'published').map((course) => <option key={course.id} value={course.id}>{course.title}</option>)}</select><div className="rounded-xl bg-black/20 p-3">{homeCourses.map((course, index) => <div key={course.id} className="flex items-center gap-2 py-2 text-sm text-gray-300"><span className="w-5 text-xs text-gray-600">{index + 1}</span><span className="flex-1 truncate">{course.title}</span><button onClick={() => onMoveHomeCourse(course.id, -1)} disabled={index === 0} className="p-1 disabled:opacity-20"><ArrowUp className="h-4 w-4" /></button><button onClick={() => onMoveHomeCourse(course.id, 1)} disabled={index === homeCourses.length - 1} className="p-1 disabled:opacity-20"><ArrowDown className="h-4 w-4" /></button></div>)}</div><button onClick={onSaveHome} className="rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white">Salvar página inicial</button></div>}</section><section className="rounded-2xl border border-white/10 bg-zinc-950/80 p-5"><h2 className="text-lg font-bold text-white">Categorias</h2><form onSubmit={onCreateCategory} className="mt-4 flex gap-2"><input value={newCategory} onChange={(event) => setNewCategory(event.target.value)} placeholder="Nova categoria" className="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white" /><button className="rounded-xl bg-white/10 px-4 text-sm font-semibold text-white">Adicionar</button></form><div className="mt-4 flex flex-wrap gap-2">{categories.map((category) => <button key={category.id} onClick={() => onToggleCategory(category)} className={`rounded-full px-3 py-1.5 text-xs font-semibold ${category.isActive ? 'bg-emerald-500/15 text-emerald-400' : 'bg-white/10 text-gray-500 line-through'}`}>{category.name}</button>)}</div></section></div>;
diff --git a/pages/TrailDetail.tsx b/pages/TrailDetail.tsx
index a081699..79c2e56 100644
--- a/pages/TrailDetail.tsx
+++ b/pages/TrailDetail.tsx
@@ -96,5 +96,5 @@ export const TrailDetail: React.FC = () => {
 
   if (isLoading) return <main className="flex min-h-[65vh] items-center justify-center pt-24"><Loader2 className="h-8 w-8 animate-spin text-orange-400" /></main>;
 
-  return <main className="mx-auto min-h-screen max-w-6xl px-5 pb-20 pt-28 sm:px-8"><div className="mb-6 flex flex-wrap items-center justify-between gap-3"><button onClick={() => navigate('/admin')} className="inline-flex items-center gap-2 text-sm font-semibold text-gray-400 transition hover:text-orange-300"><ArrowLeft className="h-4 w-4" /> Voltar para trilhas</button>{trail?.status === 'published' && <button type="button" onClick={() => navigate(`/trilhas/${trail.id}`)} className="inline-flex items-center gap-2 rounded-xl border border-white/10 px-3 py-2 text-sm font-semibold text-gray-300 transition hover:bg-white/10 hover:text-white"><ExternalLink className="h-4 w-4 text-orange-400" /> Ver página pública</button>}</div><form onSubmit={save} className="overflow-hidden rounded-3xl border border-white/10 bg-zinc-950/80 shadow-2xl shadow-black/30"><section className="border-b border-white/10 bg-gradient-to-r from-orange-500/15 via-zinc-950 to-zinc-950 p-6 sm:p-8"><div className="flex flex-col gap-6 md:flex-row"><button type="button" onClick={() => coverInput.current?.click()} className="group relative aspect-video w-full shrink-0 overflow-hidden rounded-2xl border border-dashed border-orange-500/40 bg-black/30 md:w-64" disabled={isUploading}>{input.coverImageUrl ? <CourseCoverImage source={input.coverImageUrl} alt="Capa da trilha" className="h-full w-full object-cover transition group-hover:scale-105" /> : <div className="flex h-full flex-col items-center justify-center gap-2 text-sm text-gray-500"><Upload className="h-6 w-6 text-orange-400" /> Enviar capa</div>}<span className="absolute inset-x-0 bottom-0 bg-black/70 px-3 py-2 text-xs font-semibold text-white">{isUploading ? 'Enviando...' : 'Alterar capa'}</span></button><input ref={coverInput} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(event) => { void uploadCover(event.target.files?.[0]); event.currentTarget.value = ''; }} /><div className="min-w-0 flex-1"><p className="text-xs font-bold uppercase tracking-[0.18em] text-orange-400">{isNew ? 'Nova trilha' : 'Trilha de cursos'}</p><label className="mt-3 block"><span className="sr-only">Nome da trilha</span><input value={input.title} onChange={(event) => setInput((current) => ({ ...current, title: event.target.value }))} placeholder="Nome da trilha" maxLength={160} required className="w-full border-0 bg-transparent p-0 text-3xl font-bold tracking-tight text-white outline-none placeholder:text-gray-600 sm:text-4xl" /></label><textarea value={input.description} onChange={(event) => setInput((current) => ({ ...current, description: event.target.value }))} placeholder="Explique o objetivo desta trilha e para quem ela foi criada." maxLength={2000} rows={3} className="mt-4 w-full resize-none rounded-xl border border-white/10 bg-black/25 px-4 py-3 text-sm leading-6 text-gray-300 outline-none transition focus:border-orange-500/60" /></div></div></section><section className="p-6 sm:p-8"><div className="flex flex-col justify-between gap-4 border-b border-white/10 pb-5 sm:flex-row sm:items-end"><div><h2 className="text-xl font-bold text-white">Cursos da trilha</h2><p className="mt-1 text-sm text-gray-500">A ordem abaixo é a sequência que os alunos verão.</p></div><div className="flex items-center gap-3"><select value={input.status} onChange={(event) => setInput((current) => ({ ...current, status: event.target.value as LearningPathInput['status'] }))} className="rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white"><option value="draft">Rascunho</option><option value="published">Publicada</option></select>{!isNew && <button type="button" onClick={deleteTrail} className="rounded-xl border border-red-500/30 px-3 py-2.5 text-sm font-semibold text-red-400 transition hover:bg-red-500/10"><Trash2 className="h-4 w-4" /></button>}</div></div><div className="mt-5 flex gap-2"><select defaultValue="" onChange={(event) => { if (event.target.value) { setInput((current) => ({ ...current, courseIds: [...current.courseIds, event.target.value] })); event.target.value = ''; } }} className="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-900 px-4 py-3 text-sm text-white"><option value="">Adicionar curso existente</option>{availableCourses.map((course) => <option key={course.id} value={course.id}>{course.title}</option>)}</select></div><div className="mt-5 space-y-3">{selectedCourses.length === 0 ? <div className="rounded-2xl border border-dashed border-white/15 px-5 py-12 text-center text-sm text-gray-500">Adicione o primeiro curso para criar esta trilha.</div> : selectedCourses.map((course, index) => <article key={course.id} className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 p-3 sm:gap-4"><span className="w-6 shrink-0 text-center text-xs font-bold text-orange-300">{index + 1}</span><div className="h-14 w-24 shrink-0 overflow-hidden rounded-xl bg-zinc-900">{course.coverImageUrl ? <CourseCoverImage source={course.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <div className="flex h-full items-center justify-center"><BookOpen className="h-5 w-5 text-orange-400" /></div>}</div><div className="min-w-0 flex-1"><p className="truncate font-semibold text-white">{course.title}</p><p className="mt-1 text-xs text-gray-500">{course.status === 'published' ? 'Publicado' : 'Rascunho'} · {course.category}</p></div><div className="flex items-center gap-1"><button type="button" onClick={() => moveCourse(course.id, -1)} disabled={index === 0} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-white disabled:opacity-25" title="Mover para cima"><ArrowUp className="h-4 w-4" /></button><button type="button" onClick={() => moveCourse(course.id, 1)} disabled={index === selectedCourses.length - 1} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-white disabled:opacity-25" title="Mover para baixo"><ArrowDown className="h-4 w-4" /></button><button type="button" onClick={() => navigate(`/gerenciar?editar=${course.id}`)} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-orange-300" title="Editar curso"><Pencil className="h-4 w-4" /></button><button type="button" onClick={() => removeCourse(course.id)} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-white" title="Remover da trilha"><X className="h-4 w-4" /></button><button type="button" onClick={() => void archiveCourse(course)} className="rounded-lg p-2 text-gray-500 transition hover:bg-red-500/10 hover:text-red-400" title="Arquivar curso"><Trash2 className="h-4 w-4" /></button></div></article>)}</div></section><footer className="flex justify-end border-t border-white/10 bg-black/20 p-5 sm:px-8"><button disabled={isSaving} className="inline-flex min-w-40 items-center justify-center gap-2 rounded-xl bg-orange-500 px-5 py-3 text-sm font-bold text-white shadow-lg shadow-orange-500/20 transition hover:bg-orange-600 disabled:opacity-60">{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} Salvar trilha</button></footer></form></main>;
+  return <main className="mx-auto min-h-screen max-w-6xl px-5 pb-20 pt-28 sm:px-8"><div className="mb-6 flex flex-wrap items-center justify-between gap-3"><button onClick={() => navigate('/admin')} className="inline-flex items-center gap-2 text-sm font-semibold text-gray-400 transition hover:text-orange-300"><ArrowLeft className="h-4 w-4" /> Voltar para trilhas</button>{trail?.status === 'published' && <button type="button" onClick={() => navigate(`/trilhas/${trail.id}`)} className="inline-flex items-center gap-2 rounded-xl border border-white/10 px-3 py-2 text-sm font-semibold text-gray-300 transition hover:bg-white/10 hover:text-white"><ExternalLink className="h-4 w-4 text-orange-400" /> Ver página pública</button>}</div><form onSubmit={save} className="overflow-hidden rounded-3xl border border-white/10 bg-zinc-950/80 shadow-2xl shadow-black/30"><section className="border-b border-white/10 bg-gradient-to-r from-orange-500/15 via-zinc-950 to-zinc-950 p-6 sm:p-8"><div className="flex flex-col gap-6 md:flex-row"><button type="button" onClick={() => coverInput.current?.click()} className="group relative aspect-video w-full shrink-0 overflow-hidden rounded-2xl border border-dashed border-orange-500/40 bg-black/30 md:w-64" disabled={isUploading}>{input.coverImageUrl ? <CourseCoverImage source={input.coverImageUrl} alt="Capa da trilha" className="h-full w-full object-cover transition group-hover:scale-105" /> : <div className="flex h-full flex-col items-center justify-center gap-2 text-sm text-gray-500"><Upload className="h-6 w-6 text-orange-400" /> Enviar capa</div>}<span className="absolute inset-x-0 bottom-0 bg-black/70 px-3 py-2 text-xs font-semibold text-white">{isUploading ? 'Enviando...' : 'Alterar capa'}</span></button><input ref={coverInput} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(event) => { void uploadCover(event.target.files?.[0]); event.currentTarget.value = ''; }} /><div className="min-w-0 flex-1"><p className="text-xs font-bold uppercase tracking-[0.18em] text-orange-400">{isNew ? 'Nova trilha' : 'Trilha de cursos'}</p><label className="mt-3 block"><span className="sr-only">Nome da trilha</span><input value={input.title} onChange={(event) => setInput((current) => ({ ...current, title: event.target.value }))} placeholder="Nome da trilha" maxLength={160} required className="w-full border-0 bg-transparent p-0 text-3xl font-bold tracking-tight text-white outline-none placeholder:text-gray-600 sm:text-4xl" /></label><textarea value={input.description} onChange={(event) => setInput((current) => ({ ...current, description: event.target.value }))} placeholder="Explique o objetivo desta trilha e para quem ela foi criada." maxLength={2000} rows={3} className="mt-4 w-full resize-none rounded-xl border border-white/10 bg-black/25 px-4 py-3 text-sm leading-6 text-gray-300 outline-none transition focus:border-orange-500/60" /></div></div></section><section className="p-6 sm:p-8"><div className="flex flex-col justify-between gap-4 border-b border-white/10 pb-5 sm:flex-row sm:items-end"><div><h2 className="text-xl font-bold text-white">Cursos da trilha</h2><p className="mt-1 text-sm text-gray-500">A ordem abaixo é a sequência que os alunos verão.</p></div><div className="flex items-center gap-3"><select value={input.status} onChange={(event) => setInput((current) => ({ ...current, status: event.target.value as LearningPathInput['status'] }))} className="rounded-xl border border-white/10 bg-zinc-900 px-3 py-2.5 text-sm text-white"><option value="draft">Não publicado</option><option value="published">Publicado</option></select>{!isNew && <button type="button" onClick={deleteTrail} className="rounded-xl border border-red-500/30 px-3 py-2.5 text-sm font-semibold text-red-400 transition hover:bg-red-500/10"><Trash2 className="h-4 w-4" /></button>}</div></div><div className="mt-5 flex gap-2"><select defaultValue="" onChange={(event) => { if (event.target.value) { setInput((current) => ({ ...current, courseIds: [...current.courseIds, event.target.value] })); event.target.value = ''; } }} className="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-900 px-4 py-3 text-sm text-white"><option value="">Adicionar curso existente</option>{availableCourses.map((course) => <option key={course.id} value={course.id}>{course.title}</option>)}</select></div><div className="mt-5 space-y-3">{selectedCourses.length === 0 ? <div className="rounded-2xl border border-dashed border-white/15 px-5 py-12 text-center text-sm text-gray-500">Adicione o primeiro curso para criar esta trilha.</div> : selectedCourses.map((course, index) => <article key={course.id} className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 p-3 sm:gap-4"><span className="w-6 shrink-0 text-center text-xs font-bold text-orange-300">{index + 1}</span><div className="h-14 w-24 shrink-0 overflow-hidden rounded-xl bg-zinc-900">{course.coverImageUrl ? <CourseCoverImage source={course.coverImageUrl} alt="" className="h-full w-full object-cover" /> : <div className="flex h-full items-center justify-center"><BookOpen className="h-5 w-5 text-orange-400" /></div>}</div><div className="min-w-0 flex-1"><p className="truncate font-semibold text-white">{course.title}</p><p className="mt-1 text-xs text-gray-500">{course.status === 'published' ? 'Publicado' : 'Não publicado'} · {course.category}</p></div><div className="flex items-center gap-1"><button type="button" onClick={() => moveCourse(course.id, -1)} disabled={index === 0} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-white disabled:opacity-25" title="Mover para cima"><ArrowUp className="h-4 w-4" /></button><button type="button" onClick={() => moveCourse(course.id, 1)} disabled={index === selectedCourses.length - 1} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-white disabled:opacity-25" title="Mover para baixo"><ArrowDown className="h-4 w-4" /></button><button type="button" onClick={() => navigate(`/gerenciar?editar=${course.id}`)} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-orange-300" title="Editar curso"><Pencil className="h-4 w-4" /></button><button type="button" onClick={() => removeCourse(course.id)} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-white" title="Remover da trilha"><X className="h-4 w-4" /></button><button type="button" onClick={() => void archiveCourse(course)} className="rounded-lg p-2 text-gray-500 transition hover:bg-red-500/10 hover:text-red-400" title="Arquivar curso"><Trash2 className="h-4 w-4" /></button></div></article>)}</div></section><footer className="flex justify-end border-t border-white/10 bg-black/20 p-5 sm:px-8"><button disabled={isSaving} className="inline-flex min-w-40 items-center justify-center gap-2 rounded-xl bg-orange-500 px-5 py-3 text-sm font-bold text-white shadow-lg shadow-orange-500/20 transition hover:bg-orange-600 disabled:opacity-60">{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />} Salvar trilha</button></footer></form></main>;
 };