/* C-01 Botões. Panel size by default (44px); inside .app the primary size is 52px. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--btn-panel); padding: 0 18px;
  border: none; border-radius: var(--r-field-panel);
  font: inherit; font-size: var(--fs-body-panel); font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.app .botao { height: var(--btn-app); border-radius: var(--r-button-app); font-size: 16px; }
.botao--largo { width: 100%; }
.botao--primario { background: var(--brand); color: var(--on-brand); }
.botao--secundario { background: var(--surface); color: var(--ink); border: 1px solid var(--border); font-weight: 500; }
.botao--ultimo { background: var(--accent); color: var(--brand); }
.botao--link {
  height: auto; min-height: var(--touch-min); padding: 0 var(--sp-2);
  background: transparent; color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
}
.botao--perigo { background: transparent; color: var(--danger); padding: 0 var(--sp-2); }
.botao--icone { width: var(--btn-panel); padding: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.app .botao--icone { width: var(--btn-app); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.botao--enviando { cursor: progress; }
.botao--enviando::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent; opacity: 0.8;
  animation: botao-gira 0.8s linear infinite;
}
@keyframes botao-gira { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .painel .botao:not(:disabled):hover { filter: brightness(1.12); }
}
/* Confirmation after copying ("Copiado!", 2 s). Green = done only. */
.botao--copiado { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }