/*
 * shared/components.css — componentes compartilhados do design system (Sprint 13)
 * ------------------------------------------------------------------
 * Começa com a TAB BAR canônica: a mesma altura, fonte, peso, padding e
 * sublinhado ativo em todos os módulos. Antes cada módulo replicava
 * .tab/.tabs/.tab-bar com valores divergentes (13 vs 13.5px, 400 vs 500 vs
 * 600, 0.5 vs 1 vs 2px de borda, padding diferente) — por isso pareciam de
 * alturas/tamanhos diferentes.
 *
 * Consome as variáveis do shared/theme.css. INCLUIR DEPOIS do theme.css:
 *     <link rel="stylesheet" href="/shared/theme.css">
 *     <link rel="stylesheet" href="/shared/components.css">
 * O módulo NÃO deve redefinir .tab/.tabs/.tab-bar localmente (senão o inline
 * vence e volta a divergir). Cobre os DOIS nomes de container que existiam
 * (.tabs e .tab-bar), então não precisa mexer no markup nem no JS.
 * ------------------------------------------------------------------
 */

.tabs,
.tab-bar{
  display:flex;
  align-items:center;
  gap:2px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 12px;
  overflow-x:auto;
}

.tab{
  font-family:var(--font,inherit);
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  padding:11px 16px;
  border:none;
  background:none;
  color:var(--text2);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap;
  cursor:pointer;
  transition:color .15s,border-color .15s;
}
.tab:hover{ color:var(--text); }
.tab.active{
  color:var(--blue);
  border-bottom-color:var(--blue);
  font-weight:600;
}
[data-theme="dark"] .tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}