/* 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 var(--btn-pad-end, 22px) 10px var(--btn-pad-start, 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;

  & svg { width: 14px; height: 14px; flex: none; }

  &: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 no masthead é o último recurso: a calha leva à vizinha onde a
   folha deixa margem (de 72rem para cima, folha.css), os atalhos da barra
   levam a qualquer tela enquanto cabem (de 45rem para cima, barra.css), e
   este botão só aparece onde não sobra nenhum dos dois. 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 45rem de barra.css. */
.btn--travessia { display: none; }

@media (max-width: 45rem) {
  .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 — a saída, o tema e os atalhos. 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;

  /* O atalho da tela em que se está: azul sólido. O secundário de antes era
     fraco demais para dizer onde se está (proposta em docs/mockup-barra-ativa.html,
     variante A aprovada em 19/10/2026). O hover não muda: ele não leva a lugar novo. */
  &[aria-current] {
    --btn-bg: var(--accent); --btn-color: var(--accent-ink);
    --btn-bg-hover: var(--accent); --btn-color-hover: var(--accent-ink);
  }
}

/* Os dois botões do topo da ficha, a volta e o cadastro: menores que o .btn
   de fila de ações, porque ficam acima do nome e não podem pesar mais que ele. */
.btn--trilha { min-width: 0; padding: 7px 14px; font-size: 13px; }

.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; }