/* ==========================================================================
   A porta de entrada do portal, no padrão BCM.

   O mesmo login do painel (/gestao) e de todo sistema BCM: o painel da marca
   com o degradê à esquerda, o cartão à direita, e no celular a marca vira
   faixa. As regras são as do casco (gestao/padrao-bcm/bcm-sistema.css, bloco
   LOGIN, e as peças .btn, .campo, .ent e .rot que ele usa), presas a
   #accessGate para não vazar para o resto do portal. Os ids continuam os do
   portal.js: só o desenho mudou.
   ========================================================================== */

#accessGate { font-family: var(--pilha-texto); color: var(--txt); background: var(--fundo); -webkit-font-smoothing: antialiased }
#accessGate *, #accessGate *::before, #accessGate *::after { box-sizing: border-box }
#accessGate [hidden] { display: none !important }
#accessGate .vt-ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: var(--traco-menu); stroke-linecap: round; stroke-linejoin: round; flex: none }

/* peças do casco que o login usa */
#accessGate .rot { font: 700 var(--txt-sm) var(--pilha-texto); color: var(--txt2) }
#accessGate .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); height: var(--alt-ctrl); padding: 0 var(--esp-4);
  border: none; border-radius: var(--raio-2); background: var(--prim); color: var(--prim-txt);
  font: 700 var(--txt-sm) var(--pilha-texto); cursor: pointer; transition: filter var(--dur-1), background var(--dur-1);
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)) } /* bcm-ok: brilho de topo do botão, o mesmo do casco */
#accessGate .btn:hover { filter: brightness(1.08) }
#accessGate .btn:active { transform: translateY(1px) }
#accessGate .btn:disabled { opacity: .55; cursor: not-allowed; transform: none }
[data-tema="escuro"] #accessGate .btn { box-shadow: 0 2px 10px rgba(79,169,238,.22) } /* bcm-ok: halo da primária no escuro, o mesmo do casco */
#accessGate .campo { display: flex; flex-direction: column; gap: 6px }
#accessGate .campo > label { font: var(--peso-numeros) var(--txt-xs) var(--pilha-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--txt2) }
#accessGate .ent { height: var(--alt-ctrl); padding: 0 var(--esp-3); border: 1px solid var(--borda-ctrl); border-radius: var(--raio-2); background: var(--campo-fundo);
  color: var(--txt); font: var(--peso-padrao) var(--txt-md) var(--pilha-texto); width: 100% }
#accessGate .ent:hover { border-color: var(--txt) }
#accessGate .ent:focus { border-color: var(--prim); box-shadow: var(--anel); outline: 2px solid transparent; outline-offset: 2px }

/* o login */
main.login#accessGate { display: flex; height: var(--vp-h); min-height: var(--vp-h); padding: 0; flex: none; position: fixed; inset: 0; z-index: 50; overflow: auto }
#accessGate .login-marca, #accessGate .login-lado { min-height: min-content }
/* lado da marca: sempre à esquerda, sempre escuro nos dois temas */
#accessGate .login-marca { flex: 0 0 var(--login-marca-l); display: flex; flex-direction: column; justify-content: space-between; padding: var(--login-marca-pad);
  background: var(--deg-marca-fundo) }
#accessGate .login-logo { width: var(--logo-login-l); height: var(--logo-login-a); object-fit: contain; object-position: left center; align-self: flex-start; margin-bottom: var(--logo-respiro) }
#accessGate .login-texto { display: flex; flex-direction: column; gap: var(--esp-3) }
#accessGate .login-manifesto { font: var(--peso-apoio) var(--tit-3xl)/1.02 var(--pilha-titulo); color: var(--login-txt); letter-spacing: .02em }
#accessGate .login-sub { font: var(--peso-apoio) var(--txt-lg)/1.6 var(--pilha-texto); color: var(--login-txt2); max-width: 340px }
#accessGate .login-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4) }
#accessGate .login-versao { font: var(--peso-padrao) var(--txt-sm) var(--pilha-texto); color: var(--login-txt3) }
#accessGate .login-tema { width: var(--login-tema); height: var(--login-tema); flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); /* bcm-ok: branco composto sobre o degradê, como no casco */
  color: var(--login-txt2); cursor: pointer; border-radius: var(--raio-2); transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease }
#accessGate .login-tema:hover { background: rgba(255,255,255,.10); color: var(--login-txt); border-color: rgba(255,255,255,.22) } /* bcm-ok: o mesmo branco composto, um degrau acima */
#accessGate .login-tema:focus-visible { outline: 2px solid var(--login-txt); outline-offset: 2px }
[data-tema="escuro"] #accessGate .vt-ic-sol, [data-tema="claro"] #accessGate .vt-ic-lua { display: none }
/* lado do formulário */
#accessGate .login-lado { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px }
#accessGate .login-cartao { width: var(--login-cartao-l); max-width: 100%; padding: var(--login-cartao-pad); display: flex; flex-direction: column; gap: var(--login-cartao-gap);
  background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-5); box-shadow: var(--sombra), var(--brilho) }
#accessGate .login-form { display: flex; flex-direction: column; gap: var(--login-cartao-gap) }
#accessGate .login-cab { display: flex; flex-direction: column; gap: var(--esp-2) }
#accessGate .login-tit { font: var(--peso-apoio) var(--tit-2xl) var(--pilha-titulo); letter-spacing: .02em; margin: 0; color: var(--txt) }
#accessGate .login-dica { font-weight: var(--peso-apoio); font-size: var(--txt-md); line-height: 1.5 }
#accessGate .login-senha { position: relative; display: flex }
#accessGate .login-senha .ent { padding-right: 42px }
#accessGate .login-olho { position: absolute; right: var(--esp-1); top: var(--esp-1); width: var(--login-olho); height: var(--login-olho);
  display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--txt2); cursor: pointer; border-radius: var(--raio-1) }
#accessGate .login-olho:hover { color: var(--prim); background: var(--hover) }
#accessGate .login-olho .icone-ocultar, #accessGate .login-olho[aria-pressed="true"] .icone-ver { display: none }
#accessGate .login-olho[aria-pressed="true"] .icone-ocultar { display: block }
#accessGate .login-entrar { height: var(--login-btn-alt); font-size: var(--txt-lg); width: 100% }
#accessGate .login-aviso { display: flex; gap: var(--esp-2); padding: var(--esp-3); border-radius: var(--raio-2); background: var(--al-bg); color: var(--al);
  font: var(--peso-padrao) var(--txt-sm)/1.5 var(--pilha-texto) }
#accessGate .login-aviso .vt-ic { margin-top: 2px }
/* os avisos da entrada: aparelho aguardando, erro e a trava por tentativas */
#accessGate .alert-info, #accessGate .alert-error, #accessGate .alert-lockout { display: none; margin: 0; padding: var(--esp-3); border-radius: var(--raio-2);
  font: var(--peso-padrao) var(--txt-sm)/1.5 var(--pilha-texto); text-align: left; border: 0 }
#accessGate .alert-info.active, #accessGate .alert-error.active, #accessGate .alert-lockout.active { display: block }
#accessGate .alert-info { background: var(--prim-suave); color: var(--prim) }
#accessGate .alert-error { background: var(--err-bg); color: var(--err) }
#accessGate .alert-lockout { background: var(--al-bg); color: var(--al) }

/* NO CELULAR A MARCA VIRA FAIXA, E NÃO SOME (o mesmo do casco): em cima o logo,
   o manifesto e o tema; a linha de apoio e a versão descem para o pé. */
@media (max-width: 860px) {
  /* o portal.js abre a porta com style="display:flex" e a fecha com display:none:
     no celular ela é grade enquanto está aberta, e some quando ele a fecha */
  main.login#accessGate:not([style*="none"]) { display: grid !important }
  main.login#accessGate { height: auto; grid-template-columns: 1fr auto; align-content: start; padding: 0 var(--login-pad-mobile-x) }
  main.login#accessGate::before { content: ''; grid-column: 1 / -1; grid-row: 1 / 3; margin: 0 calc(-1 * var(--login-pad-mobile-x)); background: var(--deg-marca-fundo) }
  #accessGate .login-marca, #accessGate .login-texto, #accessGate .login-rodape { display: contents }
  #accessGate .login-logo { grid-column: 1; grid-row: 1; align-self: center; margin: calc(var(--login-faixa-cima) + env(safe-area-inset-top, 0px)) 0 var(--esp-4);
    width: 150px; height: 66px }
  #accessGate .login-tema { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; margin: calc(var(--login-faixa-cima) + env(safe-area-inset-top, 0px)) 0 var(--esp-4) }
  #accessGate .login-manifesto { grid-column: 1 / -1; grid-row: 2; font-size: var(--tit-lg); line-height: 1.15; margin-bottom: var(--login-faixa-baixo) }
  #accessGate .login-lado { grid-column: 1 / -1; grid-row: 3; flex: none; align-items: flex-start; padding: var(--esp-6) 0 var(--esp-5) }
  #accessGate .login-sub { grid-column: 1 / -1; grid-row: 4; font-size: var(--txt-sm); max-width: none; color: var(--txt2) }
  #accessGate .login-versao { grid-column: 1 / -1; grid-row: 5; color: var(--txt3); margin-bottom: calc(var(--esp-6) + env(safe-area-inset-bottom, 0px)) }
  #accessGate .login-cartao { width: 100%; max-width: var(--login-cartao-l); padding: 0; background: transparent; border: none; box-shadow: none; justify-self: center }
}