/* ==========================================================================
   Ícones — ver components/ui/icones.js

   Um estilo só: traço de 2, 24×24, cor herdada. O tamanho do DESENHO e o
   tamanho do ALVO DE CLIQUE são coisas diferentes — `.icone` cuida do
   desenho, `.btn-icone` garante que o alvo nunca fique menor que
   `--toque-min`, mesmo com o ícone pequeno no meio.
   ========================================================================== */

.icone {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* Ícone acompanhando texto dentro de um botão/link já herda o alinhamento do
   flex de `.btn`; aqui só garante que ele não estique. */
.btn > .icone { margin-right: calc(var(--e-1) * -1); }

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* O alvo é o botão, não o desenho: acertar 20px de ícone com o dedo no
     estoque é o tipo de detalhe que faz o auditor errar o toque. */
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  border: none;
  border-radius: var(--raio);
  background: none;
  color: var(--texto-2);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}

.btn-icone:hover:not(:disabled) { background: var(--surface-2); color: var(--texto); }
.btn-icone:active:not(:disabled) { transform: translateY(1px); }
.btn-icone:disabled { opacity: .5; cursor: not-allowed; }

/* Estado ligado/desligado (lanterna, teclado da tela): o próprio botão mostra
   que está ativo, não só o `aria-pressed` para o leitor de tela. */
.btn-icone[aria-pressed="true"] { background: var(--azul-100); color: var(--azul-700); }

/* Ação destrutiva: a cor entra só no hover, para a lixeira não gritar em
   toda linha da tabela. */
.btn-icone--perigo:hover:not(:disabled) { background: var(--falta-100); color: var(--falta); }

/* Sobre fundo escuro (topbar, visor da câmera). */
.btn-icone--claro { color: var(--neutro-0); }
.btn-icone--claro:hover:not(:disabled) { background: rgba(255, 255, 255, .16); color: var(--neutro-0); }

/* Grupo de ações numa linha de tabela: junta os botões sem colar. */
.acoes-linha { display: flex; align-items: center; gap: var(--e-1); }