style: melhora layout de login e settings

- Badge Helpdesk preta com texto branco
- Texto maior no painel direito das páginas de auth
- Badge de papel preta em settings
- Adiciona descrição na seção Segurança
- Espaçamento entre título e campos no formulário de login
- Autocomplete nos inputs de senha
- Link de notificações funcional no menu do usuário
- Fallback do avatar com fundo cinza e texto preto

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/login-form.tsx

@@ -64,7 +64,7 @@ export function LoginForm({ className, callbackUrl, disabled = false, ...props }
       {...props}
     >
       <FieldGroup>
-        <div className="flex flex-col items-center gap-1 text-center">
+        <div className="flex flex-col items-center gap-1 text-center pb-4">
           <h1 className="text-2xl font-bold">Acesse sua conta</h1>
           <p className="text-muted-foreground text-sm text-balance">
             Informe seu e-mail corporativo e senha para continuar atendendo os chamados.

src/components/nav-user.tsx

@@ -70,6 +70,10 @@ export function NavUser({ user }: NavUserProps) {
     router.push("/settings")
   }, [router])
 
+  const handleNotifications = useCallback(() => {
+    router.push("/settings/notifications")
+  }, [router])
+
   const handleSignOut = useCallback(async () => {
     if (isSigningOut) return
     setIsSigningOut(true)
@@ -94,9 +98,9 @@ export function NavUser({ user }: NavUserProps) {
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <Avatar className="h-8 w-8 rounded-lg grayscale">
+              <Avatar className="h-8 w-8 rounded-lg">
                 <AvatarImage src={normalizedUser.avatarUrl ?? undefined} alt={displayName} />
-                <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
+                <AvatarFallback className="rounded-lg bg-neutral-200 text-neutral-700 font-medium">{initials}</AvatarFallback>
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{displayName}</span>
@@ -117,7 +121,7 @@ export function NavUser({ user }: NavUserProps) {
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar className="h-8 w-8 rounded-lg">
                   <AvatarImage src={normalizedUser.avatarUrl ?? undefined} alt={displayName} />
-                  <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
+                  <AvatarFallback className="rounded-lg bg-neutral-200 text-neutral-700 font-medium">{initials}</AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{displayName}</span>
@@ -138,9 +142,14 @@ export function NavUser({ user }: NavUserProps) {
                 <IconUserCircle className="size-4" />
                 <span>Meu perfil</span>
               </DropdownMenuItem>
-              <DropdownMenuItem disabled>
+              <DropdownMenuItem
+                onSelect={(event) => {
+                  event.preventDefault()
+                  handleNotifications()
+                }}
+              >
                 <IconNotification className="size-4" />
-                <span>Notificações (em breve)</span>
+                <span>Notificações</span>
               </DropdownMenuItem>
             </DropdownMenuGroup>
             {!isDesktopShell && !isMachineSession ? (

src/components/settings/settings-content.tsx

@@ -54,11 +54,11 @@ const ROLE_LABELS: Record<string, string> = {
 }
 
 const ROLE_COLORS: Record<string, string> = {
-  admin: "bg-cyan-100 text-cyan-800 border-cyan-300",
-  manager: "bg-cyan-50 text-cyan-700 border-cyan-200",
-  agent: "bg-cyan-50 text-cyan-600 border-cyan-200",
-  collaborator: "bg-neutral-100 text-neutral-600 border-neutral-200",
-  customer: "bg-neutral-100 text-neutral-600 border-neutral-200",
+  admin: "bg-neutral-900 text-white border-neutral-900",
+  manager: "bg-neutral-800 text-white border-neutral-800",
+  agent: "bg-neutral-700 text-white border-neutral-700",
+  collaborator: "bg-neutral-600 text-white border-neutral-600",
+  customer: "bg-neutral-500 text-white border-neutral-500",
 }
 
 const SETTINGS_ACTIONS: SettingsAction[] = [
@@ -240,11 +240,14 @@ export function SettingsContent() {
             </Card>
 
             <Card className="rounded-2xl border border-border/60 bg-white shadow-sm">
-              <CardHeader className="pb-3">
+              <CardHeader className="pb-2">
                 <CardTitle className="flex items-center gap-2 text-sm font-semibold text-neutral-900">
                   <Clock className="size-4 text-neutral-500" />
                   Segurança
                 </CardTitle>
+                <CardDescription className="text-xs text-neutral-500">
+                  Gerencie a segurança da sua conta
+                </CardDescription>
               </CardHeader>
               <CardContent className="space-y-2">
                 <Button variant="outline" size="sm" className="w-full justify-start gap-2" asChild>
@@ -443,7 +446,7 @@ function ProfileEditCard({
           <div className="relative group">
             <Avatar className="size-20 border-4 border-white shadow-lg ring-2 ring-neutral-200">
               <AvatarImage src={localAvatarUrl ?? undefined} alt={name} />
-              <AvatarFallback className="bg-gradient-to-br from-cyan-500 to-cyan-600 text-xl font-semibold text-white">
+              <AvatarFallback className="bg-neutral-200 text-xl font-semibold text-neutral-700">
                 {initials}
               </AvatarFallback>
             </Avatar>
@@ -518,12 +521,14 @@ function ProfileEditCard({
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
                 placeholder="Nova senha"
+                autoComplete="new-password"
               />
               <Input
                 type="password"
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 placeholder="Confirmar senha"
+                autoComplete="new-password"
               />
             </div>
             <p className="text-xs text-neutral-400">