/* O widget `abas` (FeitoWeb.Widgets.Layout, docs/telas.md §2). As abas que trocam o que a tela mostra (.abas, o
   botão [role=tab]). Trazido da casca na etapa 0 (26/10/2026). Regra (docs/telas.md §4, o teste
   test/feito_web/widgets_regra_test.exs): cor só por token (var(--…), com a cor de hoje como reserva); cor nova é
   token novo, no style.css (claro) e no temas.css (escuro e acrílico). Ligado no layout raiz logo depois do
   style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca (visual.css, componentes.css, navegacao.css, temas.css,
   fonte.css e a escala gerada por `mix casca.escala`) vestem por cima, como vestem tudo. Mudou este arquivo: `mix
   casca.escala` (o ./servidor faz sozinho). */

/* — de style.css */
.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--linha); margin-bottom: 18px; flex-wrap: wrap; }
.abas a { padding: 9px 14px; text-decoration: none; color: var(--suave); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.abas a.on { color: var(--verde-esc); border-color: var(--verde); }

/* — de componentes.css */
/* abas sem recarregar (abas_js()): o botão veste o mesmo que o link das abas de página (style.css:84-85) */
.abas [role="tab"] { padding: 9px 14px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  background: none; color: var(--suave); font: inherit; font-weight: 600; cursor: pointer; }
.abas [role="tab"][aria-selected="true"] { color: var(--verde-esc); border-color: var(--verde); }

/* A contagem da aba (26/10/2026: «Abertos 3»), em cinza, e a aba que é link (o modo :patch: a aba no endereço) com o
   mesmo desenho do botão. */
.abas .abas-n { color: var(--suave); font-weight: 500; }
.abas a[role="tab"][aria-selected="true"] .abas-n { color: inherit; }