/* ============================================================================
   O TOQUE
   Compartilhado pelo Portal, pela Biblioteca, pelo Catálogo e pelo Acervo.
   O Orçamento de Campo tem a mesma regra em src/index.css, porque lá o CSS
   é gerado pelo Tailwind e não dá para vir por arquivo externo.

   POR QUE ISTO EXISTE, 01/09/2026

   Pedido do Gabriel: "bem gostoso de clicar, se possível adiciona até um
   efeito na hora que clica em qualquer item". Não é enfeite: num sistema que
   a equipe usa em celular, dentro do cliente, o dedo cobre o que foi tocado.
   Sem resposta visual a pessoa não sabe se o toque pegou, e toca de novo.
   Duplo envio de formulário nasce assim.

   O EFEITO É UM SÓ, E É PEQUENO: a peça afunda um pouco e escurece um pouco.
   Vale para botão, item de menu, cartão e linha de lista, para o sistema
   inteiro responder do mesmo jeito.

   Nada de animação longa. Aqui ela precisa acontecer DENTRO do tempo do
   toque, senão vira atraso em vez de resposta.
   ============================================================================ */

.bt, .item, .aba, .doc, .prod, .atalho, .navItem, .fila li,
.olho, .fecha, .sair, .assin, .versao .vTopo{
  transition:transform .12s cubic-bezier(.2,.7,.3,1),
             filter .12s ease,
             background-color .15s ease,
             border-color .15s ease,
             box-shadow .18s ease;
}

.bt:active, .item:active, .aba:active, .doc:active, .prod:active,
.atalho:active, .navItem:active, .fila li:active,
.olho:active, .fecha:active, .sair:active, .versao .vTopo:active{
  transform:scale(.975);
  filter:brightness(.97);
}

/* Cartão grande afunda menos: em peça larga, o mesmo 2,5% vira um salto
   visível e parece defeito. */
.doc:active, .prod:active{ transform:scale(.99) }

/* Botão cheio já é escuro; escurecer mais some. Nele o efeito é o contrário. */
.bt.forte:active, .botao:active{ filter:brightness(1.06) }

/* O foco pelo teclado precisa continuar visível, e o anel não pode ser o
   mesmo desenho do toque: quem navega por Tab não está clicando. */
.bt:focus-visible, .item:focus-visible, .aba:focus-visible,
.doc:focus-visible, .prod:focus-visible, .atalho:focus-visible,
.navItem:focus-visible{
  outline:2px solid var(--blue, #4551a3);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .bt, .item, .aba, .doc, .prod, .atalho, .navItem, .fila li,
  .olho, .fecha, .sair{ transition:none }
  .bt:active, .item:active, .aba:active, .doc:active, .prod:active,
  .atalho:active, .navItem:active, .fila li:active{ transform:none }
}