/* ============================================================
   AS TELAS DE ENTRAR NO VISUAL NOVO

   Entrar, recuperar a senha, trocar a senha, escolher a loja e "sem
   permissão". Não têm menu: são um cartão no meio da tela. No visual
   novo o cartão é uma lâmina de vidro sobre a pedra, a mesma matéria das
   telas de trabalho, e o botão de entrar é a pílula laranja da marca.

   A EVF tem, na entrada, uma foto de capa ao lado do formulário. Aqui
   ficou de fora de propósito: o CRM não tem uma foto própria da loja, e
   foto de carro qualquer seria enfeite. Com uma foto da JRK, dá para
   trazer a capa.

   Carrega DEPOIS do <style> de cada tela (as telas escrevem as mesmas
   classes), e por isso ganha delas no mesmo peso.
   ============================================================ */

/* ---------- o cartão: vidro sobre a pedra ----------
   Aqui o vidro desfoca de verdade: o cartão está sobre o campo, e não
   dentro de outra lâmina. */
.cartao{
  border-radius:var(--r-menu);
  /* sem o fundo branco que cada tela pinta por baixo: é ele que tirava o vidro */
  background-color:transparent;
  background-image:var(--vidro-brilho),var(--vidro-face);
  background-size:100% 150px,100% 100%;background-repeat:no-repeat,repeat;
  border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-relevo),var(--elevacao-3);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .cartao{-webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque)}
}
.titulo-acesso{letter-spacing:-.026em}

/* ---------- os campos: vidro claro, anel laranja no foco ---------- */
.campo-caixa{
  background:rgba(255,255,255,.7);border:1px solid var(--linha-forte);border-radius:var(--r-item);
  transition:box-shadow var(--tempo-rapido) var(--curva),background-color var(--tempo-rapido) var(--curva);
}
.campo-caixa:focus-within{border-color:transparent;background:#fff;box-shadow:0 0 0 2px var(--laranja)}
.campo-caixa input:focus-visible{outline:none}
/* O iPhone amplia a página inteira com letra menor que 16px no campo, e
   não desfaz. Só no toque; no computador segue o desenho. */
@media (pointer:coarse){ .campo-caixa input{font-size:16px} }
.olho:hover{background:transparent}
@media (hover:hover) and (pointer:fine){ .olho:hover{background:rgba(22,23,26,.07);color:var(--tinta)} }

/* ---------- o botão de entrar: a pílula laranja ---------- */
.btn-entrar{
  border-radius:var(--r-pilula);background:var(--laranja-face);box-shadow:var(--laranja-relevo),var(--laranja-sombra);
  transition:transform var(--tempo-aperto) var(--curva),box-shadow var(--tempo-rapido) var(--curva);
}
.btn-entrar:hover{background:var(--laranja-face);transform:none}
.btn-entrar:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .btn-entrar:not(:disabled):hover{transform:translateY(-2px)}
  .btn-entrar:not(:disabled):hover:active{transform:translateY(-2px) scale(.98)}
}
.link{color:var(--laranja-texto)}
.erro{border-radius:var(--r-item)}
.aviso{border-radius:var(--r-item);box-shadow:inset 0 0 0 1px rgba(68,84,106,.14)}
.regras .marca{background:rgba(22,23,26,.12)}

/* ---------- escolher a loja: cada loja é uma peça de vidro ---------- */
.opcao-loja{
  border-radius:var(--r-painel);
  background:linear-gradient(177deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.64) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px var(--contorno-fraco),var(--elevacao-1);
  transition:transform var(--tempo-rapido) var(--curva),box-shadow var(--tempo-rapido) var(--curva);
}
.opcao-loja:hover{transform:none}
.opcao-loja:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .opcao-loja:not(:disabled):hover{transform:translateY(-2px);
    box-shadow:inset 0 0 0 1.5px var(--laranja),0 10px 24px -14px rgba(240,86,54,.55)}
}
.ol-logo,.d-ico{background:#FBECE7;color:var(--laranja-texto)}
.destino{background:rgba(255,255,255,.6);border-color:var(--contorno-fraco);border-radius:var(--r-item)}

/* A frase que fica FORA do cartão, direto sobre a pedra (a do "sem
   permissão"): o cinza quieto foi medido para o vidro, e sobre a pedra
   dava 3,4:1. O tom dela é escurecido só ali, pela variável. */
.caixa-acesso>p{--quieto:#34363B}