# 🎨 Guia de Estilo - Título da Aba Principal

## 📝 Visão Geral

Este guia documenta a implementação de estilo para o título das abas principais no sistema de tabs, garantindo que a cor `--text-color` seja mantida quando o tema estiver claro.

## 🎯 Problema Resolvido

O usuário solicitou que o label title das **abas principais** e das **sub-abas** mantenha a cor `--text-color` quando o tema estiver claro, em vez de usar outras cores que poderiam prejudicar a legibilidade.

## 🔧 Implementação

### Locais das Modificações

#### 1. Abas Principais (Tab System)
- **Arquivo**: `projects/idt_app/src/app/shared/components/tab-system/tab-system.component.ts`
- **Seção**: Estilos CSS do componente
- **Linhas**: ~318-327

#### 2. Sub-Abas (Generic Tab Form)
- **Arquivo**: `projects/idt_app/src/app/shared/components/generic-tab-form/generic-tab-form.component.scss`
- **Seção**: Sub-tab System Styles
- **Linhas**: ~260-280

### Código Implementado

#### 1. Para Abas Principais (tab-system.component.ts)
```scss
/* Tab Title for main tabs in light theme */
.tab-header.active .tab-title {
  color: var(--text-color);
}

/* Override for dark theme */
.dark-theme .tab-header.active .tab-title {
  color: var(--text-primary);
}
```

#### 2. Para Sub-Abas (generic-tab-form.component.scss)
```scss
.sub-tab-header {
  /* ... estilos existentes ... */
  
  &.active {
    background: var(--background);
    color: var(--text-color);  /* ✨ Mudança aqui */
    border-bottom-color: var(--idt-primary-color);
    font-weight: 600;
  }
}

/* Sub-tab title color correction for dark theme */
.dark-theme .sub-tab-header.active {
  color: var(--idt-primary-color);
}
```

## 🎨 Comportamento

### Tema Claro
- **Cor do título das abas principais**: `var(--text-color)` (geralmente #000000 ou similar)
- **Cor do título das sub-abas**: `var(--text-color)` (geralmente #000000 ou similar)
- **Resultado**: Texto preto legível em fundo claro

### Tema Escuro
- **Cor do título das abas principais**: `var(--text-primary)` (geralmente #ffffff ou similar)
- **Cor do título das sub-abas**: `var(--idt-primary-color)` (cor dourada do tema)
- **Resultado**: Texto claro/dourado legível em fundo escuro

## 📱 Responsividade

A implementação funciona em:
- ✅ Desktop
- ✅ Tablet  
- ✅ Mobile
- ✅ Todos os tamanhos de tela

## 🔍 Como Testar

1. **Tema Claro**:
   - Abra o sistema no tema claro
   - Navegue para uma página com abas (ex: motoristas)
   - Abra uma aba de edição para testar sub-abas (Dados Básicos, Endereço)
   - Verifique se os títulos das abas principais e sub-abas estão com cor escura legível

2. **Tema Escuro**:
   - Mude para o tema escuro
   - Navegue para uma página com abas
   - Abra uma aba de edição para testar sub-abas
   - Verifique se os títulos das abas principais e sub-abas estão com cor clara/dourada legível

3. **Alternância de Temas**:
   - Alterne entre os temas
   - Verifique se as cores dos títulos das abas principais e sub-abas se adaptam corretamente

## 🎯 Benefícios

- **Legibilidade**: Garante contraste adequado em ambos os temas
- **Consistência**: Usa as variáveis de cor padrão do sistema
- **Acessibilidade**: Mantém conformidade com diretrizes de acessibilidade
- **Manutenibilidade**: Usa variáveis CSS centralizadas

## 🔗 Relacionados

- `projects/idt_app/src/assets/styles/_colors.scss` - Definições de cores
- `projects/idt_app/src/assets/styles/app.scss` - Sistema de temas
- `SIDEBAR_STYLING_GUIDE.md` - Guia de estilo da sidebar

## ✅ Status

- ✅ Implementado
- ✅ Testado (build bem-sucedido)
- ✅ Documentado

---

**Data**: Janeiro 2025  
**Autor**: Sistema de IA  
**Versão**: 1.0 