@charset "utf-8";
/* Botoes e barras de acao. `.button` e `button` andam juntos de proposito:
   um link e um <button> tem de sair identicos na tela. */

.actions {
  display: flex;
  gap: 10px;
}

/* Link com `secondary`/`danger`/`small` e BOTAO mesmo sem a classe `.button`:
   varios templates escrevem <a class="secondary small"> (abas de Pessoas,
   Hoje/Todos, Editar, Abrir...) e, sem isto, o link saia sublinhado e roxo de
   "visitado" em cima do fundo cinza -- ilegivel. */
/* :where() tem especificidade ZERO: o link ganha a forma de botao, mas a COR
   continua vindo de .secondary/.danger logo abaixo. Com `a.secondary` puro, o
   azul daqui ganharia do cinza do .secondary (0-1-1 contra 0-1-0) e todo link
   secundario sairia azul. */
.button,
button,
:where(a.secondary, a.danger, a.small) {
  display: inline-block;
  background: #1769aa;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 15px;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  transition: filter .12s, box-shadow .12s, transform .05s;
}

/* link-botao nao muda de cor por ja ter sido visitado */
.button:visited,
a.secondary:visited,
a.danger:visited,
a.small:visited {
  color: #fff;
}

/* Estados. O hover ESCURECE (filter) em vez de trocar o background: assim
   vale para todo botao, inclusive os de cor propria (Patio, Ficha, x de
   remover), sem pinta-los de azul ao passar o mouse. */
.button:hover,
button:hover:not(:disabled),
a.secondary:hover,
a.danger:hover,
a.small:hover {
  filter: brightness(.9);
  text-decoration: none;
}

.button:active,
button:active:not(:disabled),
a.secondary:active,
a.danger:active,
a.small:active {
  transform: translateY(1px);
}

/* foco so pelo teclado (Tab): o clique do mouse nao deixa anel */
.button:focus-visible,
button:focus-visible,
a.secondary:focus-visible,
a.danger:focus-visible,
a.small:focus-visible {
  outline: 2px solid #1769aa;
  outline-offset: 2px;
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.secondary {
  background: #5d6872;
}

.danger {
  background: #b33a3a;
}

.small {
  padding: 7px 10px;
  font-size: 13px;
}

.rowactions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.rowactions form {
  margin: 0;
}