/* Botões — todo botão tem fundo; o que muda é a intensidade. Uma ação
   primária por tela: o único bloco de azul sólido. Variantes sobrescrevem
   só os tokens (mini-API).

   Largura mínima igual para todos: numa fila de ações, a ação e o seu
   cancelamento precisam ler como um par, não como dois tamanhos. */

.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  /* line-height explícito: <button> usa o normal do navegador e <a> herdaria
     o 1.55 do body, o que dava dois botões de alturas diferentes lado a lado */
  line-height: 1.25;
  padding: 10px 22px; min-width: 7.5rem; justify-content: center;
  /* rótulo numa linha só: como itens de flex os botões encolhiam e quebravam
     o texto em duas linhas, dando alturas diferentes na mesma fila */
  white-space: nowrap;
  border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--btn-color, var(--ink-muted));
  background: var(--btn-bg, var(--surface-2));
  transition: background .12s ease, color .12s ease;

  &:hover {
    color: var(--btn-color-hover, var(--btn-color, var(--ink)));
    background: var(--btn-bg-hover, var(--btn-bg, var(--surface-2)));
  }

  &[disabled] { opacity: .4; cursor: not-allowed; }
}

/* A travessia para a tela vizinha tem duas formas, e nunca as duas ao mesmo
   tempo: a calha, onde a folha deixa margem para ela, e este botão onde não
   deixa. Escondido por padrão para não precisar de um min-width que teria de
   acertar a fronteira por fora — o ponto de troca é o mesmo 72rem de
   folha.css, escrito uma vez em cada lado. */
.btn--travessia { display: none; }

@media (max-width: 72rem) {
  .btn--travessia { display: inline-flex; }
}

/* O recorte vindo da ficha do paciente — o botão que diz o corte e o desfaz.
   Nome de exame é frase: quando não couber, a reticência cede a linha para a
   busca, que é o controle mais usado da barra. `flex: none` porque o .painel é
   flex e este botão não encolhe junto com o campo de busca. */
.btn--recorte {
  flex: none; max-width: 24rem;

  & span { overflow: hidden; text-overflow: ellipsis; }
}

/* O botão que mora na barra do app — hoje só a saída. O .btn de tela tem
   7.5rem de largura mínima e 10px de altura interna, medidas de uma fila de
   ações onde ele faz par com "Marcar"; sozinho no teto, aquele tamanho vira o
   objeto mais pesado da página. Variante e não classe própria em barra.css:
   duas classes de componente empatam em especificidade (0,1,0) e quem decide
   passa a ser a ordem dos arquivos, que esta convenção não garante. */
.btn--barra { min-width: 0; padding: 6px 14px; font-size: 12.5px; }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-color: var(--accent-ink);
  --btn-bg-hover: var(--accent-hover);
  --btn-color-hover: var(--accent-ink);
}

.btn--secondary {
  --btn-bg: var(--accent-soft);
  --btn-color: var(--accent);
  --btn-bg-hover: var(--accent);
  --btn-color-hover: var(--accent-ink);
}

.btn--danger {
  --btn-bg: var(--urgent-soft);
  --btn-color: var(--urgent);
  --btn-bg-hover: var(--urgent);
  --btn-color-hover: var(--accent-ink);
}

/* Fila de ações — serve modal e tela. Um par, sempre na mesma forma: a ação
   que avança primeiro, em azul sólido; a saída dela colada ao lado, em cinza.
   Cancelar, fechar e desistir são o mesmo papel — o outro desfecho da mesma
   superfície — e por isso andam juntos da ação, nunca na outra ponta. */
.actions { display: flex; align-items: center; gap: 14px; }

/* Empurra para a ponta oposta o botão que não é o caminho esperado. */
.actions > .push { margin-left: auto; }