/* =========================================================================
 * yve-codigo.css — o campo do código da verificação em duas etapas
 * -------------------------------------------------------------------------
 * Comum às portas de login. Hoje quem pede o código é a Central de Acesso
 * (acesso.html), nas três pinturas: ERP, CRM e a entrada sem destino. Porta
 * nova que passar a pedir: `class="yv-codigo"` no <input type="text"> e
 * `yv-campo-codigo` no `.campo` em volta, e este <link> na página.
 *
 * Nenhuma cor escrita. O cursor segue `--yv-acento`, e a borda e o anel do
 * foco continuam sendo os da página, que também leem o acento. Quem define
 * o acento é `yve-login.css`, por `data-sistema`: verde no ERP, violeta no
 * CRM, azul na loja e no blog, o par da marca sem destino.
 *
 * Por que um arquivo próprio, e não o bloco <style> da página: a CSP só
 * aceita o bloco embutido pelo hash, e mexer nele obriga a trocar o
 * `.htaccess` de cada domínio antes da página. Folha externa entra pelo
 * 'self'. E não em `yve-login.css`, porque ele vai carimbado (`?v=`) em
 * dezenas de páginas que não têm este campo.
 *
 * Especificidade: a página estiliza `input[type="text"]` (0,1,1) num <style>
 * que vem DEPOIS deste <link>. O seletor daqui (0,2,1) vence sem !important.
 * ========================================================================= */

input[type="text"].yv-codigo {
  display: block;
  width: 100%;
  min-height: 58px;
  /* O `letter-spacing` sobra também depois do último caractere, e o texto
     centralizado fica meio espaço para a esquerda. O acréscimo à esquerda
     devolve o código ao centro. */
  padding: 12px 16px 12px calc(16px + .28em);
  text-align: center;
  font-family: var(--yv-fonte, "Poppins", system-ui, sans-serif);
  font-size: clamp(24px, 7vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .28em;
  /* Dígitos de mesma largura: o código não "anda" enquanto é digitado. */
  font-variant-numeric: tabular-nums;
  /* Os códigos de recuperação têm letras (ABCD-EF23) e a API ignora a caixa.
     Mostrar sempre em maiúsculas deixa o que se digita igual ao papel. */
  text-transform: uppercase;
  caret-color: var(--yv-acento);
}

input[type="text"].yv-codigo::placeholder {
  font-weight: 300;
  opacity: .7;
}

.yv-campo-codigo > label { text-align: center; }

/* Celular estreito (iPhone SE, 320 px): o código de recuperação tem nove
   caracteres e precisa caber sem rolar dentro do campo. */
@media (max-width: 360px) {
  input[type="text"].yv-codigo {
    letter-spacing: .18em;
    padding-left: calc(16px + .18em);
  }
}