/* ──────────────────────────────────────────────────────────────────────────
   css/36-form-ux.css — Kit de Padroes, Nivel 3 (secao "Teclado")

   O visual das duas coisas que js/app/form-ux.js acrescenta:
     .fux-kbd        a dica "Ctrl+Enter" dentro do botao de salvar
     .fux-enviando   o form enquanto a trava de submit esta armada

   Sem bloco @media (prefers-color-scheme: dark): o portal nao tem tema escuro
   por preferencia do sistema, e um bloco desses pintaria estes dois elementos
   de escuro no meio da tela clara.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── A dica de atalho no botao ─────────────────────────────────────────── */

.fux-kbd {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 6px;          /* raio de selo: menor que o do controle (10px) */
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  opacity: .72;                /* so a dica desbota; o rotulo do botao nao */
  white-space: nowrap;
}

/* Em barra estreita a dica e a primeira coisa que sai — o rotulo do botao vale
   mais que o atalho, e o title continua respondendo no hover. */
@media (max-width: 720px) {
  .fux-kbd { display: none; }
}

/* ─── O form enquanto salva ─────────────────────────────────────────────── */

.fux-enviando {
  /* Nao mexe em pointer-events: os campos seguem legiveis, selecionaveis e
     focaveis. Quem trava o segundo envio e o evento de submit, no JS. */
  cursor: progress;
}

.fux-enviando button[type=submit][disabled],
.fux-enviando input[type=submit][disabled] {
  cursor: progress;
  opacity: .62;
}

/* A barra fina que corre por baixo do botao diz "esta indo" sem ocupar espaco
   nem trocar o rotulo — trocar o texto do botao mudaria a largura dele e a
   barra de acao inteira andaria. */
.fux-enviando button[type=submit][disabled] {
  position: relative;
  overflow: hidden;
}
.fux-enviando button[type=submit][disabled]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: .55;
  transform-origin: left center;
  animation: fux-progresso 2.5s linear forwards;   /* o mesmo TRAVA_MS do JS */
}

@keyframes fux-progresso {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fux-enviando button[type=submit][disabled]::after { animation: none; opacity: .35; transform: scaleX(1); }
}

/* ─── Foco visivel na caixa do modal ────────────────────────────────────── */

/* Em tela de toque o foco vai para a caixa do modal, nao para o campo. Sem esta
   regra o navegador desenha um anel de foco na caixa inteira, que fica com cara
   de erro. O dialogo ja esta em destaque: o anel nao acrescenta nada. */
.modal-overlay > [tabindex="-1"]:focus,
.modal-overlay > [tabindex="-1"]:focus-visible {
  outline: none;
}