/* ==========================================================================
   PRISMA · components/abas.css — ABAS EM PÍLULA  (D-014 · brief §etapa 5)
   --------------------------------------------------------------------------
   Nasceu em "O que o PRISMA pode preparar" (Home, 19/09/2026). A versão anterior
   era uma LISTA de seis linhas no escuro, longe do painel que controlava: lia
   como tabela vazia. Aba em pílula fica COLADA ao painel e cabe numa linha.

   ANATOMIA (o estado mora no ARIA, como em todo o sistema):
     <div class="abas" role="tablist" aria-label="…">
       <button class="aba" role="tab" aria-selected="true"  aria-controls="painel">Aula</button>
       <button class="aba" role="tab" aria-selected="false" aria-controls="painel" tabindex="-1">Atividade</button>
     </div>
     <div role="tabpanel" id="painel" aria-labelledby="…" tabindex="0">…</div>

   TECLADO: setas trocam de aba, Home/End vão às pontas. Troca por TECLADO não
   anima (skill animate: ação de teclado é instantânea); por clique, o painel
   faz um crossfade curto com leve desfoque.
   A selecionada é placa clara invertida — o mesmo gesto do chip ativo sobre a cena.
   ========================================================================== */
.abas { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.aba {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--espaco-5);
  border: 0; border-radius: var(--radius-full);
  background-color: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-default);
  color: var(--text-secondary); font-size: var(--body-sm-size); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard);
}
.aba:hover { color: var(--text-primary); background-color: var(--surface-3); }
.aba[aria-selected="true"] { background-color: var(--text-primary); color: var(--background-canvas); box-shadow: none; }

/* em tela estreita a fileira rola de lado em vez de quebrar; o layout dá o sangramento */
.abas--rolavel { scrollbar-width: none; }
.abas--rolavel::-webkit-scrollbar { display: none; }
@media (max-width: 720px) { .abas--rolavel { flex-wrap: nowrap; overflow-x: auto; } }