/**
 * @file
 * A faixa "Nova versão disponível" — ver assets/js/pfkt-nova-versao.js.
 *
 * MORA NO TEMA, e não no módulo que publica o build, pela regra do
 * pfkt-tokens.css: componente compartilhado definido em módulo perde a disputa
 * de cascata em silêncio (o tema carrega depois da maioria dos módulos). Só
 * consome tokens — nenhum literal de cor, raio ou tipo.
 *
 * O par informativo (`--pfkt-info` / `--pfkt-info-soft` / `--pfkt-info-line`) é
 * o certo aqui: a mensagem não é boa nem ruim, é uma disponibilidade — e é
 * exatamente para o que a linha `--pfkt-info-line` foi criada, segundo o
 * comentário dela no arquivo de tokens.
 */

.pfkt-nova-versao {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1060; /* acima do modal (1050) e do backdrop (1040) do Bootstrap 4 */
  max-width: 360px;
  padding: 14px 16px;
  border: 1px solid var(--pfkt-info-line);
  border-radius: var(--pfkt-radius-surface);
  background: var(--pfkt-info-soft);
  box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
  font-family: var(--pfkt-font);
}

.pfkt-nova-versao__titulo {
  display: block;
  margin-bottom: 4px;
  color: var(--pfkt-info);
  font-size: var(--pfkt-txt-14);
  font-weight: var(--pfkt-peso-forte);
}

/* `--pfkt-info` é tinta de RÓTULO; a frase de leitura pede a tinta de texto do
   sistema, que dá 12,69:1 sobre esta superfície. Mesma distinção que os tokens
   fazem entre `--pfkt-warn` e `--pfkt-warn-ink`. */
.pfkt-nova-versao__corpo {
  margin: 0 0 12px;
  color: var(--pfkt-ink);
  font-size: var(--pfkt-txt-12-5);
  line-height: 1.45;
}

.pfkt-nova-versao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* No telefone a faixa ocupa a largura, senão os dois botões do sistema
   (12,5px, `white-space: nowrap`) não cabem lado a lado nos 360px. */
@media (max-width: 575.98px) {
  .pfkt-nova-versao {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
  }
}