@layer componentes {
  button,
  .botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-em-0-35);
    min-height: var(--alvo);
    min-width: var(--alvo);
    padding: var(--espaco-em-0-45) var(--espaco-em-0-85);
    border: var(--borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
    cursor: pointer;
    text-align: center;
    white-space: normal;
    max-width: 100%;
  }

  a.botao {
    color: var(--cor-texto);
    text-decoration: none;
  }

  button:active,
  .botao:active,
  .cartao:active,
  .cartao-molde:active,
  .cartao:has(.cartao-abrir:active),
  .cartao-molde:has(.cartao-abrir:active) {
    box-shadow: var(--sombra-aperta);
  }

  button:disabled,
  .botao:disabled,
  .botao[aria-disabled="true"] {
    border-style: dashed;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
  }

  .botao--principal {
    background: var(--cor-acao-principal);
    font-family: var(--titulo);
    font-weight: var(--fonte-peso-titulo);
  }

  button[aria-pressed="true"],
  button[aria-selected="true"],
  button[aria-checked="true"],
  .botao[aria-pressed="true"],
  .botao[aria-selected="true"],
  .botao[aria-checked="true"] {
    background: var(--cor-selecionado);
    box-shadow: var(--sombra-aperta);
    transform: translate(var(--sombra-deslocamento), var(--sombra-deslocamento));
  }

  @media (forced-colors: active) {
    button[aria-pressed="true"],
    button[aria-selected="true"],
    button[aria-checked="true"],
    .botao[aria-pressed="true"],
    .botao[aria-selected="true"],
    .botao[aria-checked="true"] {
      border-color: Highlight;
      outline: var(--foco-largura) solid Highlight;
      outline-offset: var(--foco-afastamento);
    }
  }

  #categorias button[data-categoria="comidinhas"],
  .botao--categoria[data-categoria="comidinhas"] { --cor-cat: var(--cor-categoria-comidinhas); }
  #categorias button[data-categoria="doces"],
  .botao--categoria[data-categoria="doces"] { --cor-cat: var(--cor-categoria-doces); }
  #categorias button[data-categoria="frutas"],
  .botao--categoria[data-categoria="frutas"] { --cor-cat: var(--cor-categoria-frutas); }
  #categorias button[data-categoria="bichinhos"],
  .botao--categoria[data-categoria="bichinhos"] { --cor-cat: var(--cor-categoria-bichinhos); }
  #categorias button[data-categoria="mar"],
  .botao--categoria[data-categoria="mar"] { --cor-cat: var(--cor-categoria-mar); }
  #categorias button[data-categoria="natureza"],
  .botao--categoria[data-categoria="natureza"] { --cor-cat: var(--cor-categoria-natureza); }
  #categorias button[data-categoria="fantasia"],
  .botao--categoria[data-categoria="fantasia"] { --cor-cat: var(--cor-categoria-fantasia); }
  #categorias button[data-categoria="datas"],
  .botao--categoria[data-categoria="datas"] { --cor-cat: var(--cor-categoria-datas); }
  #categorias button[data-categoria="coisinhas"],
  .botao--categoria[data-categoria="coisinhas"] { --cor-cat: var(--cor-categoria-coisinhas); }

  #categorias button,
  .botao--categoria {
    color: var(--cor-texto);
    background: var(--cor-cat, var(--cor-superficie));
  }

  /* V1: na categoria o fundo colorido continua; o selecionado vem do ✓ e do "colado" */
  #categorias button[aria-pressed="true"],
  .botao--categoria[aria-pressed="true"] {
    background: var(--cor-cat, var(--cor-selecionado));
  }

  @media (max-width: 699px) {
    #atalhos button,
    #categorias button,
    .faixa-atalhos button,
    .faixa-categorias button {
      white-space: nowrap;
    }
  }
}