# 📝 Padronização de Tipografia - Módulo RH

## 🎯 Objetivo
Padronizar todos os tamanhos de fonte no módulo RH para garantir legibilidade adequada, seguindo os padrões dos agents de UX (FontQualityAgent e UIAdaptationAgent).

## ✅ Padrões Implementados

### Tamanhos Mínimos
- **Texto mínimo legível**: `text-sm` (14px) - substitui `text-xs` (12px)
- **Labels**: `text-sm` (14px) - mínimo para legibilidade
- **Corpo de texto**: `text-base` (16px) - padrão recomendado
- **Subtítulos**: `text-lg` (18px) ou maior
- **Títulos**: `text-2xl` (24px) ou maior

### Substituições Realizadas
- `text-xs` → `text-sm` (12px → 14px)
- `text-[10px]` → `text-sm` (10px → 14px)
- `text-[11px]` → `text-sm` (11px → 14px)
- `text-[12px]` → `text-sm` (12px → 14px)

## 📋 Arquivos Corrigidos

### Componentes Base
- ✅ `src/features/rh/components/ExcelTable.jsx`
  - Container principal: `text-xs` → `text-sm`
  - Headers de coluna: `text-[11px]` → `text-sm`
  - Loading overlay: `text-[10px]` → `text-sm`
  - Footer pagination: `text-[10px]` e `text-[11px]` → `text-sm`

### Views Principais
- ✅ `src/features/rh/views/GestaoAniversariantesView.jsx`
  - Subtítulo: `text-[11px]` → `text-sm sm:text-base`
  - Labels de cards: `text-xs` → `text-sm`
  - Badges de status: `text-xs` → `text-sm`
  - Meses no quantitativo: `text-xs` → `text-sm`
  - Data de nascimento: `text-xs` → `text-sm`

- ✅ `src/features/rh/views/ContratosExperienciaView.jsx`
  - Subtítulo: `text-[11px]` → `text-sm sm:text-base`
  - Labels de cards: `text-xs` → `text-sm`
  - Badges de status: `text-xs` → `text-sm`
  - Datas: `text-xs` → `text-sm`

### Layout
- ✅ `src/features/rh/components/layout/RhSidebar.jsx`
  - Avatar fallback: `text-xs` → `text-sm`

## 🛠️ Utilitário Criado

### `src/features/rh/utils/typography.js`
Sistema de padronização de tipografia com:
- Constantes de tamanhos mínimos e padrão
- Helper `applyTypography()` para aplicar classes padronizadas
- Mapeamento de substituições

## 📊 Benefícios

### Legibilidade
- ✅ Textos mínimos de 14px garantem leitura confortável
- ✅ Melhor contraste e hierarquia visual
- ✅ Acessibilidade aprimorada

### Consistência
- ✅ Padrão único em todo o módulo RH
- ✅ Facilita manutenção futura
- ✅ Alinhado com agents de UX

### Responsividade
- ✅ Uso de classes responsivas (`sm:text-base`)
- ✅ Adaptação adequada a diferentes telas

## 🔄 Próximos Passos

### Arquivos que ainda precisam de correção:
1. `src/features/rh/components/EmployeeDetailPanel.jsx` - Muitas ocorrências de `text-[10px]` e `text-xs`
2. Outras views do RH que ainda usam tamanhos pequenos

### Recomendações:
- Usar o helper `applyTypography()` para novos componentes
- Revisar periodicamente com FontQualityAgent
- Manter consistência com padrões do CNAB

## 📚 Referências
- FontQualityAgent: `.agent/agents/FONT_QUALITY_AGENT.md`
- UIAdaptationAgent: `.agent/agents/UI_ADAPTATION_AGENT.md`
- Sistema de tipografia CNAB: `src/features/financeiro-cnab/components/CnabExcelTable.jsx`
