/* ═══════════════════════════════════════════════════════════════════
   COP SISTEMA — Design Tokens v1.0
   Auditoria de base realizada em junho/2026
   
   USO: Importe este arquivo ANTES do app.css em todas as páginas.
   Substitua gradualmente os valores hardcoded pelos tokens abaixo.
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   1. PALETA BASE (cores fixas — não mudam com tema)
   ──────────────────────────────────────────────
   
   Diagnóstico da auditoria:
   O sistema usa DUAS famílias de azul-teal em paralelo:
   - #326274 / #2d6a7f (diferença de apenas 8% de luminosidade)
   - #1e4f61 / #1a2e35 (sombras do mesmo teal)
   Consolidamos tudo em uma escala única de 6 passos.
*/

:root {
  /* Teal — cor primária do COP */
  --cop-teal-900: #0e2233;   /* fundo escuro profundo (antigo #1a2e35 / #1e293b) */
  --cop-teal-800: #1e4f61;   /* header em estado comprimido, nav ativo escuro */
  --cop-teal-700: #2d6a7f;   /* alias: --primary usado no app.css / hub.php */
  --cop-teal-600: #326274;   /* alias: --primary variante (eram usados indistintamente) */
  --cop-teal-500: #4a9a8a;   /* teal suave — ações secundárias, ícones de suporte */
  --cop-teal-100: #e8f4f8;   /* alias: --primary-l / --teal-lt / fundo suave de seleção */
  --cop-teal-050: #f0f4f5;   /* alias: --bg — fundo de página */

  /* Gold — cor de destaque/acento */
  --cop-gold-900: #1a1508;   /* fundo escuro do trial CTA */
  --cop-gold-700: #8b6f47;   /* variante muted — subtítulos de destaque */
  --cop-gold-600: #a07830;   /* alias: --gold do hub.php */
  --cop-gold-500: #c4a96d;   /* gold institucional (landing pages, nav-drop) */
  --cop-gold-400: #d4a017;   /* versão mais vibrante usada em badges de assinatura */
  --cop-gold-300: #f4c430;   /* warning vivido / highlight */
  --cop-gold-100: #fef9e7;   /* fundo suave gold */
  --cop-gold-050: #fdf6e8;   /* alias: --gold-lt do hub */

  /* Neutros — cinza frio (Tailwind slate/gray) */
  --cop-gray-950: #0f172a;   /* dark mode fundo profundo */
  --cop-gray-900: #1f2937;   /* alias: --text — cor de texto principal */
  --cop-gray-800: #1e293b;   /* dark mode card */
  --cop-gray-700: #374151;   /* textos de tabela no dark */
  --cop-gray-600: #475569;   /* alias: #475569 — texto de suporte forte */
  --cop-gray-500: #64748b;   /* sub-texto médio */
  --cop-gray-400: #6b7280;   /* alias: --sub — subtítulo e placeholder */
  --cop-gray-450: #5f6e7e;   /* texto muted acessível — 5,2:1 no branco, 4,7:1 no fundo de página (WCAG AA) */
  --cop-gray-300: #9ca3af;   /* bordas fortes e decoração — NÃO usar como cor de texto (2,5:1) */
  --cop-gray-200: #94a3b8;   /* variante de mute */
  --cop-gray-150: #e5e7eb;   /* alias: --border — divisor padrão */
  --cop-gray-100: #f3f4f6;   /* fundo de thead de tabela */
  --cop-gray-050: #f9fafb;   /* hover de linha de tabela */

  /* Semânticas — estados e feedbacks */
  --cop-success-700: #15803d;
  --cop-success-600: #166534;  /* texto em badges de sucesso */
  --cop-success-500: #22c55e;  /* ícone sucesso / check */
  --cop-success-400: #27ae60;  /* alias: --success alternativo */
  --cop-success-400b: #28a745; /* alias legado Bootstrap */
  --cop-success-100: #d4edda;
  --cop-success-050: #f0fdf4;

  --cop-danger-700: #991b1b;
  --cop-danger-600: #dc2626;
  --cop-danger-500: #e74c3c;   /* alias legado Bootstrap */
  --cop-danger-400: #dc3545;   /* alias legado Bootstrap */
  --cop-danger-100: #fee2e2;
  --cop-danger-050: #fef2f2;

  --cop-warning-800: #78350f;
  --cop-warning-700: #92400e;  /* texto em badges warning */
  --cop-warning-600: #d97706;
  --cop-warning-500: #f59e0b;  /* alias: --warning */
  --cop-warning-400: #fbbf24;
  --cop-warning-100: #fef3c7;
  --cop-warning-050: #fffbeb;

  --cop-info-700: #1e40af;
  --cop-info-600: #1d4ed8;
  --cop-info-500: #3b82f6;     /* alias: --info */
  --cop-info-100: #dbeafe;
  --cop-info-050: #eff6ff;

  /* Especiais — cores de categoria/módulo */
  --cop-purple: #8b5fa8;       /* módulo financeiro / tags especiais */
  --cop-violet:        #7c3aed;       /* badge beta */
  --cop-violet-lt:     #ede9fe;       /* fundo suave violeta — badge COLETA, botão orçamento */
  --cop-violet-border: #c4b5fd;       /* borda violeta — botão orçamento */
  --cop-orange: #e07b3a;       /* módulo configurações / alertas de ação — só fundo/borda/ícone grande */
  --cop-orange-text: #a8500f;  /* laranja acessível p/ texto (5,5:1 branco, 5,0:1 página) */
  --cop-orange-lt: #fdf0e8;
  --cop-cyan-text: #2b767a;    /* verde-azulado acessível p/ texto (5,3:1 branco, 4,8:1 página) — substitui #5ab4b8 em texto */
  --cop-salmon: #d97757;       /* atividades / notificações */
  --cop-brown: #8b6f47;        /* categorias de obra / ambiente */
  --cop-whatsapp: #25D366;     /* botão WhatsApp — nunca alterar */

  --cop-danger-soft:   #fdf0f0;   /* fundo suave zona de perigo (lgpd danger-zone) */
  --cop-brown-dark:    #7c2d12;   /* marrom escuro — títulos de alerta crítico */
  --cop-mauve:         #8e44ad;   /* roxo genérico — KPI 30 dias / indicadores */
  --cop-gray-hover:    #e3eaeb;   /* cinza hover — perm-off:hover na equipe */
}


/* ──────────────────────────────────────────────
   2. TOKENS SEMÂNTICOS — TEMA CLARO (padrão)
   ──────────────────────────────────────────────
   
   Diagnóstico: o app.css atual já tem uma estrutura de tokens via :root,
   mas muitos componentes ignoram as variáveis e usam hex hardcoded inline.
   Esta seção formaliza os tokens semânticos e adiciona camadas que faltavam.
*/

:root {
  /* Superfícies */
  --surface-page:    var(--cop-teal-050);   /* fundo de página (#f0f4f5) */
  --surface-card:    #ffffff;               /* card, modal, painel */
  --surface-overlay: rgba(0,0,0,0.45);      /* backdrop de modal */
  --surface-input:   #fafafa;              /* fundo de input em repouso */
  --surface-input-focus: #ffffff;
  --surface-table-head: var(--cop-gray-050);
  --surface-row-hover:  var(--cop-gray-050);
  --surface-selected:   var(--cop-teal-100);

  /* Bordas */
  --border-default:  var(--cop-gray-150);   /* #e5e7eb */
  --border-strong:   var(--cop-gray-300);
  --border-focus:    var(--cop-teal-600);
  --border-input:    var(--cop-gray-150);
  --border-card:     var(--cop-gray-150);

  /* Texto */
  --text-primary:    var(--cop-gray-900);   /* #1f2937 */
  --text-secondary:  var(--cop-gray-400);   /* #6b7280 */
  --text-muted:      var(--cop-gray-450);   /* #5f6e7e — acessível (era #9ca3af, 2,5:1) */
  --text-inverted:   #ffffff;
  --text-link:       var(--cop-teal-600);
  --text-danger:     var(--cop-danger-600);
  --text-success:    var(--cop-success-600);
  --text-warning:    var(--cop-warning-700);

  /* Marca / Primária */
  --brand-primary:     var(--cop-teal-600);  /* #326274 — cor do header */
  --brand-primary-dk:  var(--cop-teal-800);  /* hover/pressed */
  --brand-primary-lt:  var(--cop-teal-100);  /* fundo suave de seleção */
  --brand-accent:      var(--cop-gold-500);  /* #c4a96d — drop na nav, detalhes */

  /* Sombras */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);   /* --shadow atual */
  --shadow-md:  0 2px 8px rgba(45,106,127,0.08);
  --shadow-lg:  0 4px 24px rgba(0,0,0,0.10);
  --shadow-xl:  0 8px 40px rgba(0,0,0,0.18);
  --shadow-2xl: 0 20px 60px rgba(0,0,0,0.25); /* modal */
  --shadow-focus: 0 0 0 3px rgba(50,98,116,0.15); /* ring de foco */

  /* Raios de borda
     DIAGNÓSTICO: o sistema usa 4 / 6 / 7 / 8 / 9 / 10 / 12 / 14 / 18 / 20px.
     Consolidamos em 5 tamanhos com semântica clara.
  */
  --radius-sm:  4px;   /* microcomponentes: badges pequenos, separadores */
  --radius-md:  8px;   /* padrão: inputs, botões, cards menores (--radius atual) */
  --radius-lg:  12px;  /* cards principais, modais */
  --radius-xl:  16px;  /* cards de destaque, painéis laterais */
  --radius-full: 9999px; /* pills, badges arredondados */

  /* Espaçamento — escala de 4px
     DIAGNÓSTICO: padding usa 4/5/6/7/8/9/10/12/14/18/20/24/28/40px sem escala.
     Consolidamos em 10 passos.
  */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Tipografia
     DIAGNÓSTICO: o sistema usa Inter + JetBrains Mono no app.css,
     mas vários arquivos carregam Nunito, Playfair Display, Plus Jakarta Sans,
     Cormorant Garamond, DM Sans separadamente e sem consistência.
     A fonte oficial do SISTEMA é Inter. As outras pertencem às landing pages.
  */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;  /* memorial e proposta */
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Escala tipográfica
     DIAGNÓSTICO: o sistema usa 9 / 10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 13.5
     / 14 / 15 / 16 / 17 / 18 / 20 / 22 / 24 / 28 / 34 / 36 / 40px.
     São 20 tamanhos distintos para um sistema que poderia operar com 8.
  */
  --text-2xs:  10px;  /* labels de tabela uppercase, badges de status */
  --text-xs:   11px;  /* labels de formulário uppercase, metadados */
  --text-sm:   12px;  /* texto de tabela, tooltips, breadcrumb */
  --text-base: 13px;  /* texto de interface padrão (botões, inputs, células) */
  --text-md:   14px;  /* texto corrido em cards, listas */
  --text-lg:   16px;  /* subtítulos de seção */
  --text-xl:   18px;  /* títulos de card/modal */
  --text-2xl:  22px;  /* títulos de página */
  --text-3xl:  28px;  /* KPI values grandes */
  --text-4xl:  36px;  /* display / números de destaque */
  --text-kpi:      34px;   /* valores numéricos de KPI — manter 34px */
  --text-2xl-plus: 24px;   /* títulos de seção maiores — manter 24px */
  --text-xl-plus:  20px;   /* subtítulos médios — manter 20px */

  /* Pesos tipográficos */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line-heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Transições */
  --transition-fast:   all 0.10s ease;
  --transition-base:   all 0.15s ease;
  --transition-slow:   all 0.25s ease;
  --transition-colors: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;

  /* Z-index — camadas de sobreposição */
  --z-base:        1;
  --z-dropdown:   50;
  --z-sticky:    100;   /* header fixo atual */
  --z-overlay:   999;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* Aliases de compatibilidade — mantém o app.css funcionando sem quebras */
  --primary:   var(--brand-primary);
  --primary-d: var(--brand-primary-dk);
  --primary-l: var(--brand-primary-lt);
  --success:   var(--cop-success-400b);
  --warning:   var(--cop-warning-500);
  --danger:    var(--cop-danger-400);
  --info:      var(--cop-info-500);
  --bg:        var(--surface-page);
  --card:      var(--surface-card);
  --border:    var(--border-default);
  --text:      var(--text-primary);
  --sub:       var(--text-secondary);
  --mute:      var(--text-muted);
  --radius:    var(--radius-md);
  --shadow:    var(--shadow-sm);
}


/* ──────────────────────────────────────────────
   3. TEMA ESCURO
   ──────────────────────────────────────────────
   
   Nota: o dark mode atual usa muitos valores hardcoded espalhados pelo app.css.
   Centralizando aqui os tokens semânticos, o dark mode fica automático para
   qualquer componente que use as variáveis acima.
*/

:root[data-theme="dark"] {
  /* Superfícies */
  --surface-page:       #0e1620;
  --surface-card:       #1a2333;
  --surface-overlay:    rgba(0,0,0,0.70);
  --surface-input:      #0e1620;
  --surface-input-focus: #131e2c;
  --surface-table-head: #131c28;
  --surface-row-hover:  #1f2a38;
  --surface-selected:   rgba(50,98,116,0.25);

  /* Bordas */
  --border-default:  #2a3546;
  --border-strong:   #3a4a60;
  --border-focus:    var(--cop-teal-500);
  --border-input:    #2a3546;
  --border-card:     #2a3546;

  /* Texto */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #8494a8;   /* era #64748b (3,1:1 no card escuro) — agora ~5:1 */
  --cop-orange-text: #f0a06a;  /* variante clara do laranja-texto p/ fundo escuro */
  --cop-cyan-text:   #7cc4c8;  /* variante clara do ciano-texto p/ fundo escuro */
  --text-inverted:  #0e1620;
  --text-link:      #5ab4d4;
  --text-danger:    #ff8a8a;
  --text-success:   #8ad9a3;
  --text-warning:   #ffd97a;

  /* Sombras (mais intensas no dark para criar contraste) */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.30);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.35);
  --shadow-lg:  0 4px 24px rgba(0,0,0,0.40);
  --shadow-xl:  0 8px 40px rgba(0,0,0,0.50);
  --shadow-2xl: 0 20px 60px rgba(0,0,0,0.60);
  --shadow-focus: 0 0 0 3px rgba(90,180,212,0.20);
}


/* ──────────────────────────────────────────────
   4. COMPONENTES GLOBAIS — TOKENS APLICADOS
   ──────────────────────────────────────────────
   
   Estes overrides garantem que os componentes do app.css
   passem a consumir os tokens semânticos acima.
   Cole este bloco no final do app.css (ou importe após ele).
*/

/* Acessibilidade — foco visível por teclado (item 13 da auditoria UX).
   !important é proposital: vence os outline:none legados espalhados no CSS.
   Só aparece em navegação por teclado (:focus-visible), não em clique de mouse. */
:focus-visible {
  outline: 2px solid var(--border-focus, #326274) !important;
  outline-offset: 2px;
}

/* Superfície de página */
body {
  font-family: var(--font-sans);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* Cards */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Inputs */
.form-control,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="date"],
input[type="search"], textarea, select {
  background: var(--surface-input);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: var(--transition-colors);
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
  background: var(--surface-input-focus);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* Labels de formulário */
.form-group label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Botões */
.btn {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}
.btn-sm { font-size: var(--text-xs); padding: 4px 11px; }
.btn-lg { font-size: var(--text-md); padding: 11px 28px; }
.btn-primary { background: var(--brand-primary); color: var(--text-inverted); }
.btn-primary:hover { background: var(--brand-primary-dk); opacity: 1; }

/* Tabelas */
.tbl th {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  background: var(--surface-table-head);
}
.tbl td {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.tbl tbody tr:hover { background: var(--surface-row-hover); }

/* Badges */
.badge { font-size: var(--text-xs); font-weight: var(--weight-bold); }

/* Modais */
.modal-box {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
}
.modal-overlay { background: var(--surface-overlay); }
.modal-header h3 { font-size: var(--text-xl); color: var(--text-primary); }

/* Navegação de abas (header) */
.nav-tabs a {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.nav-tabs a.nav-drop-before { border-left-color: var(--brand-accent); }

/* Títulos de card */
.card-header h3 { font-size: var(--text-md); font-weight: var(--weight-bold); }
.card-header h3::before { background: var(--brand-primary); }

/* KPI valores */
.kpi-card .kpi-val { font-size: var(--text-4xl); font-weight: var(--weight-extrabold); }
.kpi-card .kpi-lbl { font-size: var(--text-2xs); font-weight: var(--weight-bold); }


/* ──────────────────────────────────────────────
   OVERRIDES MOBILE
   16px mínimo em campos evita zoom automático do Safari.
   44px mínimo em alvos de toque (WCAG 2.5.8 / Apple HIG).
   ────────────────────────────────────────────── */
@media (max-width: 820px) {
  .form-control,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="date"],
  input[type="search"], select {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { font-size: 16px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

/* ──────────────────────────────────────────────
   5. MAPA DE CONSOLIDAÇÃO DE CORES
   ──────────────────────────────────────────────
   
   USE ESTE MAPA para substituir hex hardcoded nos arquivos PHP.
   Quando encontrar o hex à esquerda, substitua pelo token à direita.
   
   AZUL-TEAL (primária)
   #326274  →  var(--brand-primary)     ou  var(--cop-teal-600)
   #2d6a7f  →  var(--brand-primary)     (eram usados indistintamente)
   #1e4f61  →  var(--brand-primary-dk)  ou  var(--cop-teal-800)
   #1a2e35  →  var(--cop-teal-900)
   #1e293b  →  var(--cop-teal-900)
   #4a9a8a  →  var(--cop-teal-500)
   #e8f4f8  →  var(--brand-primary-lt)  ou  var(--cop-teal-100)
   #f0f4f5  →  var(--surface-page)
   #e8f4f7  →  var(--cop-teal-100)
   #f1f7f9  →  var(--cop-teal-100)
   
   GOLD (acento)
   #c4a96d  →  var(--brand-accent)      ou  var(--cop-gold-500)
   #d4a017  →  var(--cop-gold-400)
   #a07830  →  var(--cop-gold-600)
   #8b6f47  →  var(--cop-gold-700)
   #f4c430  →  var(--cop-gold-300)
   #fbbf24  →  var(--cop-warning-400)
   
   TEXTO
   #1f2937  →  var(--text-primary)
   #6b7280  →  var(--text-secondary)
   #9ca3af  →  var(--text-muted)
   #94a3b8  →  var(--text-muted)
   #475569  →  var(--cop-gray-600)
   
   BORDAS / NEUTROS
   #e5e7eb  →  var(--border-default)
   #f9fafb  →  var(--surface-table-head)
   #f3f4f6  →  var(--cop-gray-100)
   
   SUCESSO
   #27ae60, #28a745, #22c55e  →  var(--cop-success-400b) ou var(--success)
   #155724, #166534            →  var(--text-success)
   #d4edda, #d1fae5            →  var(--cop-success-100)
   
   PERIGO
   #dc3545, #e74c3c, #dc2626  →  var(--danger)
   #991b1b                     →  var(--text-danger)
   #fee2e2, #f8d7da            →  var(--cop-danger-100)
   
   ALERTA
   #f59e0b, #d97706           →  var(--warning)
   #92400e, #78350f           →  var(--text-warning)
   #fef3c7, #fff3cd           →  var(--cop-warning-100)
   
   INFO
   #3b82f6, #1e40af           →  var(--info)
   #dbeafe                    →  var(--cop-info-100)
*/


/* ──────────────────────────────────────────────
   6. AUDITORIA: INCONSISTÊNCIAS IDENTIFICADAS
   ──────────────────────────────────────────────
   (comentários para guiar o Flávio na refatoração)
   
   CRÍTICO — impacto visual imediato
   ----------------------------------
   [C1] Dois azuis primários em paralelo: #326274 (app.css) vs #2d6a7f (hub, header).
        Diferença de ~8% de luminosidade — perceptível em componentes adjacentes.
        → Unificar em var(--brand-primary) definido aqui como #326274.
   
   [C2] Fontes carregadas mas não usadas sistematicamente:
        Nunito (2 versões diferentes de pesos) em alguns módulos
        Playfair Display em modal específico
        Plus Jakarta Sans em outro arquivo
        → Remover todas. O sistema usa APENAS Inter + JetBrains Mono.
   
   [C3] Emojis como ícones funcionais (✅ ✏ 🗑 📋 📦 etc.) em 20+ variantes.
        Renderização inconsistente entre Android/iOS/Windows.
        → Substituir por SVG inline ou ícones de biblioteca (Heroicons/Lucide).
   
   [C4] 20 tamanhos de fonte distintos (9px a 40px).
        → Migrar para a escala de 10 passos definida neste arquivo.
   
   MODERADO — prejudica consistência mas não quebra a UX
   -------------------------------------------------------
   [M1] Border-radius com 10 variações (4/6/7/8/9/10/12/14/18/20px).
        → Migrar para os 5 passos: --radius-sm/md/lg/xl/full.
   
   [M2] Padding sem escala: valores como 7px, 9px, 13.5px, 12.5px, 18px coexistem
        com os valores da escala de 4px sem critério aparente.
        → Migrar para --space-1 a --space-12.
   
   [M3] #475569 e #5a7380 e #96adb5 usados como "sub-texto" em paralelo.
        São 3 tons de cinza diferentes para o mesmo papel semântico.
        → Consolidar: --text-secondary para todos.
   
   [M4] Box-shadows com dois sistemas: rgba(0,0,0,X) e rgba(45,106,127,X).
        O segundo é mais sofisticado (tinted shadow na cor primária) mas só aparece
        em alguns modais. O padrão usa sombra neutra.
        → Adotar sombras tintadas como padrão nos componentes principais.
   
   BAIXO — refinamentos de polish
   --------------------------------
   [B1] gap: 5px, 6px, 8px, 10px, 12px, 14px usados no mesmo flex container
        dependendo do arquivo. Consolidar em múltiplos de 4px.
   
   [B2] Botão "Entendido ✓" no popup usa emoji como sufixo de texto.
        → Substituir por ícone SVG ou remover o símbolo.
   
   [B3] font-weight: 800 e 900 aparecem 115+ vezes.
        Inter Regular não tem variações em 900 na versão carregada (400;500;600;700;800).
        O 900 está sendo interpolado pelo browser.
        → Limitar a 800 como peso máximo, ou adicionar wght@900 ao import.
   
   [B4] Drag & drop de abas de navegação usa cursor:grab mas não tem feedback
        de zona de drop visual consistente. Só o border-left gold aparece.
        → Adicionar background de highlight na zona de soltura.
*/