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/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">