/* O PORTAO DO LOGIN -- ticket 03 (sessao.js), redesenhado em 2026-09-29 com o /impeccable.

   A TELA DIVIDIDA. A direita e o painel de sempre: papel, grade e tinta do DESIGN.md, a mesma tipografia
   das outras telas. A esquerda e a VITRINE: uma metade escura de altura inteira, com a Pati de corpo inteiro.
   O preto da vitrine e o preto da propria imagem (#000), e por isso ela nao aparece "numa foto com
   moldura" -- a metade escura e a sala dela. O filete azul do uniforme vira a linha que separa as duas.

   Carregado pelas quatro telas DEPOIS da folha de cada uma: usa os tokens que cada uma ja define (--tinta,
   --papel, --conteudo, --alerta, --u, --grade) e so passos da escala fechada -- 34, 17, 15, 12 e 11px na
   ficha, nos Indicadores e na Administracao; na TV, os passos fluidos da parede (--tv-*). */

/* ============================== O PALCO ============================== */

.portao {
  /* O preto da vitrine e o azul do filete sao da IMAGEM e da marca, e nao do tema: nao mudam de noite. */
  --vitrine: #000000;
  --filete: #3496ae;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(300px, 40%) 1fr;
  overflow-y: auto;
  background: var(--papel);
  color: var(--conteudo);
}

/* ============================== A VITRINE ============================== */

.portao__vitrine {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  background: var(--vitrine);
}

/* Ela entra UMA vez: sai do desfoque e chega de baixo, devagar, e fica. E o unico movimento da pagina. */
.portao__pati {
  display: block;
  height: min(94vh, 1200px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* O preto da foto nao e perfeitamente uniforme (medido: #000 no alto, #040405 junto das botas), e a borda
     do retangulo aparecia. As BORDAS DA FOTO se dissolvem no preto da vitrine -- as bordas do quadro, e nao
     o contorno dela. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(to top, transparent, #000 7%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
              linear-gradient(to top, transparent, #000 7%);
  mask-composite: intersect;
  animation: portao-chega 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* O filete se desenha de cima a baixo junto com ela: a linha do uniforme que separa as duas metades. */
.portao__vitrine::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: var(--filete);
  box-shadow: 0 0 18px 1px rgba(52, 150, 174, 0.55);
  transform-origin: top;
  animation: portao-filete 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* No canto de cima, que e preto vazio: embaixo ela ficava por cima das botas. */
.portao__assinatura {
  position: absolute;
  left: calc(var(--u) * 7);
  top: calc(var(--u) * 7);
  display: grid;
  gap: calc(var(--u) * 1);
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: #a8b6bb;          /* 9,7:1 sobre o preto */
}
.portao__assinatura-nome {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7fd0e4;          /* o azul claro da rendicao noturna: 12,4:1 sobre o preto */
}

@keyframes portao-chega {
  from { opacity: 0; filter: blur(10px); transform: translateY(24px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
@keyframes portao-filete {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ============================== O FORMULARIO ============================== */

.portao__lado {
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 10) calc(var(--u) * 8);
  background: var(--papel) var(--grade);
}

.portao__folha { width: 100%; max-width: 380px; }

/* O escudo da Portaria Remota: 96px, largo o bastante para "PORTARIA REMOTA", escrito nele, se ler. */
.portao__escudo {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 0 calc(var(--u) * 8);
}

.portao__titulo {
  margin: 0 0 calc(var(--u) * 3);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.portao__texto {
  margin: 0 0 calc(var(--u) * 8);
  font-size: 15px;
  line-height: 1.45;
  color: var(--conteudo-fraco);
  text-wrap: pretty;
}

.portao__form { display: grid; gap: calc(var(--u) * 5); }

.portao__campo { display: grid; gap: calc(var(--u) * 2); }

.portao__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* 17px e nao menos: abaixo de 16px o iPhone amplia a pagina ao tocar no campo. Sem caixa: uma linha de
   tinta embaixo, como o campo de uma ficha a ser preenchida -- e ela engrossa e acende ao receber o foco. */
.portao__entrada {
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--u) * 2) 0 calc(var(--u) * 2.5);
  border: 0;
  border-bottom: 1px solid var(--tinta);
  border-radius: 0;
  background: transparent;
  color: var(--conteudo);
  caret-color: var(--filete);
  font-family: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  font-size: 17px;
  transition: box-shadow 160ms ease-out;
}
.portao__entrada:focus { outline: none; }
.portao__entrada:focus-visible { box-shadow: 0 2px 0 0 var(--filete); border-bottom-color: var(--filete); }
.portao__entrada::selection { background: var(--filete); color: #ffffff; }

.portao__erro {
  margin: 0;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border: 1px solid var(--alerta);
  font-size: 15px;
  line-height: 1.45;
  color: var(--alerta);
}

.portao__botao,
.portao__sair,
.portao__voltar {
  min-height: 48px;
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  border: 1px solid var(--tinta);
  border-radius: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.portao__botao {
  margin-top: calc(var(--u) * 2);
  background: var(--tinta);
  color: var(--sobre-tinta);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 6px 16px -8px rgba(29, 92, 107, 0.6);
}
.portao__botao:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 10px 22px -10px rgba(29, 92, 107, 0.75); }
.portao__botao:disabled { opacity: 0.6; cursor: progress; }
.portao__sair,
.portao__voltar { background: transparent; color: var(--tinta); }
.portao__sair:hover { background: var(--tinta); color: var(--sobre-tinta); }
.portao__voltar { width: 100%; margin-top: calc(var(--u) * 3); border-color: transparent; }
.portao__voltar:hover { text-decoration: underline; text-underline-offset: 3px; }
.portao__botao:focus-visible,
.portao__sair:focus-visible,
.portao__voltar:focus-visible,
.portao__link:focus-visible { outline: 2px solid var(--filete); outline-offset: 3px; }

.portao__acoes {
  display: grid;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 6);
}

.portao__link {
  display: block;
  padding: calc(var(--u) * 3) 0;
  border-bottom: 1px solid var(--tinta-fraca);
  font-size: 17px;
  color: var(--tinta);
  text-decoration: none;
}
.portao__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A pagina por baixo nao rola enquanto o portao esta aberto. */
body[data-portao="aberto"] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .portao__pati,
  .portao__vitrine::after { animation: none; }
  .portao__entrada,
  .portao__botao,
  .portao__sair { transition: none; }
}

/* ============================== A CONTA NA NAVEGACAO ============================== */

/* O nome de quem entrou e o Sair -- ou o Entrar. Mesmo registro dos links ao lado: caixa alta, 11px. */
.conta {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.conta:empty { display: none; }
.conta__nome {
  color: var(--conteudo-fraco);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 12px;
  font-weight: 400;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conta__botao {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.conta__botao:hover { text-decoration: underline; text-underline-offset: 3px; }
.conta__botao:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Na ficha a conta e mais uma linha do pe do talao, como as portas acima dela. */
.talao__portas .conta { display: flex; justify-content: space-between; }

/* ============================== NA PAREDE ============================== */

/* Na TV o portao e lido de longe: a mesma tela dividida, nos passos da parede. E ela que diz, em letras que
   se leem da mesa do 600, que a tela parou de receber dados porque a sessao terminou. */
.portao--tv { grid-template-columns: 38% 1fr; }
.portao--tv .portao__lado { padding: calc(var(--u) * 12); }
.portao--tv .portao__folha { max-width: min(52vw, 1300px); }
.portao--tv .portao__escudo { width: clamp(120px, 8vw, 300px); margin-bottom: calc(var(--u) * 10); }
.portao--tv .portao__assinatura,
.portao--tv .portao__assinatura-nome,
.portao--tv .portao__rotulo,
.portao--tv .portao__botao,
.portao--tv .portao__sair,
.portao--tv .portao__voltar { font-size: var(--tv-rotulo); }
.portao--tv .portao__titulo { font-size: var(--tv-desfecho); }
.portao--tv .portao__texto,
.portao--tv .portao__erro,
.portao--tv .portao__entrada,
.portao--tv .portao__link { font-size: var(--tv-linha); }
.portao--tv .portao__botao,
.portao--tv .portao__sair,
.portao--tv .portao__voltar { min-height: 0; padding: calc(var(--u) * 4) calc(var(--u) * 6); }

/* A conta da TV aparece junto com a volta -- so quando alguem mexe --, no canto oposto. */
.conta--tv {
  position: fixed;
  left: calc(var(--u) * 6);
  bottom: calc(var(--u) * 6);
  z-index: 10;
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  background: var(--papel);
  border: 1px solid var(--tinta);
  font-size: var(--tv-rotulo);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.conta--tv .conta__nome { font-size: var(--tv-rotulo); }
body[data-mao] .conta--tv,
.conta--tv:focus-within { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .conta--tv { transition: none; } }

/* ============================== TELEFONE E TABLET EM PE ============================== */

/* Abaixo de 760px a vitrine vira uma faixa no topo: a Pati do peito para cima, e o formulario embaixo. O
   filete passa a ser a linha de baixo da faixa. */
@media (max-width: 760px) {
  .portao { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .portao__vitrine { min-height: 0; height: 34vh; max-height: 300px; }
  .portao__vitrine::after { top: auto; bottom: 0; width: 100%; height: 2px; transform-origin: left; animation-name: portao-filete-deitado; }
  .portao__pati { height: 100%; width: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
  .portao__pati { -webkit-mask-image: none; mask-image: none; }
  /* Na faixa a foto ocupa tudo e nao sobra canto vazio: a assinatura cairia no cabelo dela. */
  .portao__assinatura { display: none; }
  .portao__lado { place-items: start center; padding: calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 10); }
  .portao__escudo { width: 72px; margin-bottom: calc(var(--u) * 5); }
}
@keyframes portao-filete-deitado {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}