# Suporte Multi-Idioma e Responsividade

## 🌍 Idiomas Suportados

A aplicação Kannabium agora suporta **4 idiomas**:

- **PT-BR** (Português do Brasil) - Padrão
- **EN** (English)
- **ES** (Español)
- **EL** (Ελληνικά - Grego)

## 🎯 Como Funciona o Sistema de i18n

### Componentes Principais

1. **i18n.js** - Gerenciador de idiomas
   - Contains all translations for 4 languages
   - Manages language switching and persistence
   - Updates DOM elements dynamically

2. **i18n-styles.css** - Estilos do seletor de idiomas
   - Responsive design for desktop and mobile
   - Fixed positioning with proper z-index
   - Flexible button layout

3. **Language Selector** - Seletor no canto superior direito
   - Buttons para cada idioma (PT, EN, ES, EL)
   - Persiste a escolha no localStorage
   - Visual feedback (ativo/inativo)

### Uso no HTML

Para adicionar text em uma seção traduzível, use:

```html
<!-- Para elementos de texto -->
<p data-i18n="chave.do.texto">Texto padrão em PT-BR</p>

<!-- Para atributos (como alt, placeholder) -->
<input data-i18n-attr="config.outputNamePlaceholder|placeholder" />
```

## 📱 Responsividade

### Desktop (> 640px)
- Seletor de idiomas no topo direito com botões de 44x44px
- Layout de coluna única para cards
- Textos justificados ocupando 100% da largura disponível

### Mobile (≤ 640px)
- Seletor de idiomas compactado (40x40px, gap menor)
- Fonte reduzida dos botões (0.75rem)
- Wrapping automático de conteúdo
- Padding reduzido para aproveitar espaço

### Media Queries Principais em styles.css

```css
@media (max-width: 920px)
@media (max-width: 760px)
@media (max-width: 640px)
@media (max-width: 480px)
@media (max-width: 420px)
@media (max-width: 360px)
```

## 🔧 Modificação de Traduções

1. Abra `i18n.js`
2. Localize o objeto `translations`
3. Adicione/modifique chaves:

```javascript
'pt-BR': {
  'minha.chave': 'Meu texto em português',
  'minha.chave.en': 'My text in English',
  // ... etc
}
```

## 🚀 Em Produção

- O idioma do usuário é salvo em `localStorage`
- Persiste entre sessões
- Fallback automático para PT-BR se idioma não encontrado
- Compatível com todos os navegadores modernos

## 📋 Arquivos Modificados/Criados

- `i18n.js` - Novo
- `i18n-styles.css` - Novo  
- `index.html` - Atualizado (links, scripts, seletor)

## ✅ Verificação de Compatibilidade

- [x] Desktop (1920px, 1366px, 1024px)
- [x] Tablet (768px, 800px) 
- [x] Mobile (360px, 420px, 480px, 640px)
- [x] 5 idiomas totalmente traduzidos
- [x] Layout responsivo sem quebras
- [x] Seletor de idiomas acessível em todas as resoluções
