/* ============================================
   MAPA DE TALENTOS RH - GLOBAL STYLES
   Versão 2.0 (Modular)
   ============================================ */

/* ============================================
   IMPORTS DOS MÓDULOS (CÓDIGO PRIMEIRO)
   ============================================ */

   @import url('base.css');
   @import url('componentes.css');
   @import url('paginas.css');
   @import url('responsivo.css');
   @import url('utils.css');
   
   
   /* ============================================
      DOCUMENTAÇÃO (ABAIXO DO CÓDIGO)
      ============================================ */
   
   /*
      ┌─────────────────────────────────────────────────────────────────────────────┐
      │                           DIVISÃO DOS ARQUIVOS CSS                          │
      ├─────────────────┬───────────────────────────────────────────────────────────┤
      │  ARQUIVO        │  CONTEÚDO                                                │
      ├─────────────────┼───────────────────────────────────────────────────────────┤
      │  base.css       │  ESTRUTURA BASE (todas as páginas)                        │
      │                 │  • Reset CSS, body, cores, fontes                         │
      │                 │  • Layout principal (app-container)                       │
      │                 │  • Sidebar (todos os HTMLs que têm menu lateral)         │
      │                 │  • Topbar (todas as páginas internas)                     │
      │                 │  • Footer (landing page)                                  │
      │                 │                                                           │
      │                 │  HTMLs relacionados:                                      │
      │                 │  - dashboard.html                                        │
      │                 │  - criar-avaliacao.html                                  │
      │                 │  - teste.html                                            │
      │                 │  - resultado.html                                        │
      │                 │  - login.html (sidebar não, mas compartilha header)      │
      ├─────────────────┼───────────────────────────────────────────────────────────┤
      │  componentes.css│  COMPONENTES REUTILIZÁVEIS (todas as páginas)             │
      │                 │  • Cards (dashboard, resultado)                           │
      │                 │  • Botões (btn-primary, btn-ai, btn-secondary)           │
      │                 │  • Tabelas (últimas avaliações)                           │
      │                 │  • Modais (sucesso, compartilhar, cadastro)               │
      │                 │  • Formulários (inputs, selects, checkboxes, radios)     │
      │                 │  • Tooltips (ícones de ajuda)                            │
      │                 │  • Badges, Alerts, Loadings, Toasts                       │
      │                 │                                                           │
      │                 │  HTMLs relacionados:                                     │
      │                 │  - dashboard.html                                        │
      │                 │  - criar-avaliacao.html                                  │
      │                 │  - teste.html                                            │
      │                 │  - resultado.html                                        │
      │                 │  - login.html                                            │
      │                 │  - index.html                                            │
      │                 │                                                           │
      │                 │  JS relacionados:                                        │
      │                 │  - components.js (toasts, modais)                        │
      │                 │  - auth.js (modais de login/cadastro)                    │
      ├─────────────────┼───────────────────────────────────────────────────────────┤
      │  paginas.css    │  ESTILOS ESPECÍFICOS POR PÁGINA                          │
      │                 │                                                           │
      │                 │  • LANDING PAGE (index.html)                             │
      │                 │    - Hero section                                        │
      │                 │    - Catálogo de testes (carregado via JS)               │
      │                 │    - Planos e preços (dinâmico do banco)                 │
      │                 │    - Diferenciais                                        │
      │                 │    - CTA e Footer                                        │
      │                 │                                                           │
      │                 │  • DASHBOARD (dashboard.html)                            │
      │                 │    - Cards de métricas                                   │
      │                 │    - Insights rápidos                                    │
      │                 │    - Tabela de últimas avaliações                        │
      │                 │    - Tooltips específicos                                │
      │                 │    - Dropdown do usuário                                 │
      │                 │                                                           │
      │                 │  • CRIAR AVALIAÇÃO (criar-avaliacao.html)                │
      │                 │    - Formulário de dados do participante                 │
      │                 │    - Grid de checkboxes dos testes                       │
      │                 │    - Bloqueio visual (test-item-blocked)                 │
      │                 │    - Contador de selecionados                            │
      │                 │    - Mensagem de upgrade                                 │
      │                 │    - Modal de sucesso                                    │
      │                 │                                                           │
      │                 │  • TESTE (teste.html)                                    │
      │                 │    - Container do teste                                  │
      │                 │    - Card de perguntas                                   │
      │                 │    - Opções de resposta (radio buttons)                  │
      │                 │    - Barra de progresso (teste + geral)                  │
      │                 │    - Botões de navegação                                 │
      │                 │                                                           │
      │                 │  • RESULTADO (resultado.html)                            │
      │                 │    - Cabeçalho com nome do participante                  │
      │                 │    - Score card com pontuação                            │
      │                 │    - Lista de testes realizados                          │
      │                 │    - Detalhamento por competência                        │
      │                 │    - Pontos fortes e pontos de atenção                   │
      │                 │    - Botão de análise IA                                 │
      │                 │                                                           │
      │                 │  • AUTENTICAÇÃO (login.html)                             │
      │                 │    - Container centralizado                              │
      │                 │    - Card de login                                       │
      │                 │    - Modal de cadastro                                   │
      │                 │    - Modal de recuperação de senha                       │
      │                 │    - Select de planos (dinâmico do banco)                │
      ├─────────────────┼───────────────────────────────────────────────────────────┤
      │  responsivo.css │  RESPONSIVIDADE (todas as páginas)                       │
      │                 │  • Media query 1024px (tablet)                           │
      │                 │  • Media query 768px (mobile)                            │
      │                 │  • Media query 480px (mobile pequeno)                    │
      │                 │  • Media print (impressão)                               │
      │                 │                                                           │
      │                 │  HTMLs relacionados: TODOS                              │
      ├─────────────────┼───────────────────────────────────────────────────────────┤
      │  utils.css      │  CLASSES UTILITÁRIAS (todas as páginas)                  │
      │                 │  • text-center, text-left, text-right                    │
      │                 │  • mt-8, mt-16, mb-8, mb-16, p-4, p-8                    │
      │                 │  • hidden, w-100, cursor-pointer                         │
      │                 │  • text-success, text-error, text-warning                │
      │                 │                                                           │
      │                 │  HTMLs relacionados: TODOS                              │
      └─────────────────┴───────────────────────────────────────────────────────────┘
   
      ============================================
      CORES PRINCIPAIS:
      ============================================
      - Primária (ações, links, destaque): #1D4ED8 (azul)
      - IA (botões de análise, recursos premium): #6D28D9 (roxo)
      - Sucesso (status concluído, positivo): #059669 (verde)
      - Fundo principal (background da plataforma): #F8FAFC (cinza claro)
      - Texto principal (títulos, menus, informações): #0F172A (cinza escuro)
      - Aviso (alerta, limite, atenção): #F59E0B (amarelo)
      - Erro (cancelar, excluir, negativo): #EF4444 (vermelho)
   
      ============================================
      FONTE PRINCIPAL:
      ============================================
      Inter (Google Fonts) - usada em toda a interface
   
      ============================================
      ARQUIVOS JS RELACIONADOS (por página):
      ============================================
   
      ┌─────────────────┬─────────────────────────────────────────────────────────┐
      │  PÁGINA         │  JS RELACIONADO                                        │
      ├─────────────────┼─────────────────────────────────────────────────────────┤
      │  index.html     │  supabase.js, loadTests(), loadPlans()                 │
      ├─────────────────┼─────────────────────────────────────────────────────────┤
      │  login.html     │  supabase.js, auth.js, loadPlansToSelect()             │
      ├─────────────────┼─────────────────────────────────────────────────────────┤
      │  dashboard.html │  supabase.js, auth.js, components.js                   │
      │                 │  loadDashboardData(), loadRecentBundles()              │
      ├─────────────────┼─────────────────────────────────────────────────────────┤
      │ criar-avaliacao │  supabase.js, auth.js, components.js                   │
      │      .html      │  loadPlanData(), loadTests(), createAssessment()       │
      ├─────────────────┼─────────────────────────────────────────────────────────┤
      │  teste.html     │  supabase.js, init(), loadTestQuestions()              │
      │                 │  submitAllTests(), renderTest()                        │
      ├─────────────────┼─────────────────────────────────────────────────────────┤
      │  resultado.html │  supabase.js, loadResult(), renderResult()             │
      │                 │  generateIaAnalysis()                                  │
      └─────────────────┴─────────────────────────────────────────────────────────┘
   */
   
   /* ============================================
      FIM DO ARQUIVO GLOBAL
      ============================================ */