/* fige.css  ·  as duas unicas telas que o Atlas de arquivo unico nao tinha.
   ============================================================================
   Aqui entram SO a tela de senha e o estado de carregando. Nada de prancha:
   o estilo de prancha vem de `atlas.css` e de `atlas_<nome>.css`, gerados, e
   escrever regra de prancha aqui criaria a segunda folha divergente que o
   `V3-04k` deste projeto ja mostrou como termina.

   Tudo em token do design system EDP, nos dois temas. Nenhuma cor na mao: o
   `atlas_map.js` levou um item de dívida por ter `#2b323d` cravado, e no tema
   claro aquilo pintava a area de fora como a mais escura do mapa.
   ============================================================================ */

/* ── a tela de senha, no padrao do PORTAO do arquivo protegido ──────────────
   Pedido de Leonardo em 24/08/2026. Portado do `bases/src/gate.html`: a tarja
   transversal de sigilo, a marca, o lettering, a linha de restricao em versalete
   mono, o cadeado desenhado e o rodape de proveniencia.

   TRES DIFERENCAS DELIBERADAS em relacao ao portao:
   1. o portao tem UM campo e o centraliza; aqui sao dois e o e-mail fica a
      esquerda, porque e-mail centralizado le mal.
   2. o portao e slate por construcao, porque o arquivo cifrado nao tem
      alternador de tema. Aqui tudo sai de token e a tela segue os dois temas.
   3. a validade de sete dias nao existe aqui: ela e do arquivo distribuido. No
      servidor quem revoga e o `--remover`, e vale no pedido seguinte.
   ────────────────────────────────────────────────────────────────────────── */

#fige-login{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--void); padding:26px; overflow:hidden;
  /* os dois halos do portao. Em token, entao no tema claro eles quase somem, que
     e o certo: fundo claro com halo forte vira mancha. */
  background-image:
    radial-gradient(ellipse 70% 45% at 22% -6%, color-mix(in srgb, var(--amber) 9%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 40% at 88% 4%, color-mix(in srgb, var(--mt) 5%, transparent), transparent 60%);
}

/* A TARJA DE SIGILO, `AJ-S1`: atravessa a tela por tras da caixa, em diagonal,
   com o texto repetido para nao haver angulo em que passe despercebida.
   `pointer-events:none` para nao roubar o clique do campo. */
#fige-login .lgtarja{
  position:fixed; left:-12%; right:-12%; top:50%;
  transform:translateY(-50%) rotate(-4deg);
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--alert) 14%, transparent) 0 18px,
    color-mix(in srgb, var(--alert) 5%, transparent) 18px 36px);
  border-top:1px solid color-mix(in srgb, var(--alert) 50%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--alert) 50%, transparent);
  padding:9px 0; overflow:hidden; white-space:nowrap;
  pointer-events:none; z-index:0;
}
#fige-login .lgtarja span{
  font-family:var(--mono); font-size:11px; letter-spacing:.32em; color:var(--alert);
  text-transform:uppercase; padding:0 26px;
}

#fige-login .lgcx{
  position:relative; z-index:1;
  width:100%; max-width:462px;
  background:linear-gradient(165deg, var(--slab), var(--pit));
  border:1px solid var(--edge); border-radius:3px;
  padding:36px 34px;
}
/* o risco de duas cores no topo da caixa, como no portao */
#fige-login .lgcx::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--amber), var(--mt) 55%, transparent);
}

/* A MARCA segue a MESMA regra do Atlas: a clara aparece no slate e a escura no
   tema claro. Os nomes vem de la e nao se invertem aqui. */
#fige-login .lgmarca{height:26px; width:auto; display:block; margin:0 auto 16px; opacity:.95}
#fige-login .lgmarca.claro{display:none}
html[data-tema=slate] #fige-login .lgmarca.claro{display:block}
html[data-tema=slate] #fige-login .lgmarca.escuro{display:none}

#fige-login .lgbrand{
  font-family:var(--disp); font-weight:600; font-size:25px; letter-spacing:-.015em;
  color:var(--ink); margin-bottom:4px; line-height:1.1;
}
#fige-login .lgbrand em{font-style:italic; color:var(--amber)}
#fige-login .lgrest{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--ink3);
  text-transform:uppercase; margin-bottom:22px;
}

/* o cadeado, desenhado em CSS como no portao: sem imagem e sem fonte de icone */
#fige-login .lglock{
  width:32px; height:32px; border:1.5px solid var(--amber-d); border-radius:3px;
  position:relative; margin-bottom:20px;
}
#fige-login .lglock::before{
  content:""; position:absolute; left:50%; top:-9px; width:16px; height:14px;
  transform:translateX(-50%);
  border:1.5px solid var(--amber-d); border-bottom:0; border-radius:8px 8px 0 0;
}
#fige-login .lglock::after{
  content:""; position:absolute; left:50%; top:10px; width:5px; height:9px;
  transform:translateX(-50%); background:var(--amber); border-radius:1px;
}

#fige-login .lgd{
  color:var(--ink2); font-size:12.5px; line-height:1.55; margin-bottom:24px;
}
#fige-login .lgd b{color:var(--ink); font-weight:600}

#fige-login label{
  font-family:var(--mono); font-size:9px; letter-spacing:.17em; color:var(--ink3);
  text-transform:uppercase; display:block; margin-bottom:14px;
}
#fige-login input{
  display:block; width:100%; margin-top:8px;
  background:var(--void); border:1px solid var(--edge2); color:var(--ink);
  font-family:var(--mono); font-size:15px; letter-spacing:.04em;
  padding:13px 14px; border-radius:3px;
  /* `box-sizing` explicito: sem ele o enchimento soma na largura e o campo
     transborda a caixa, que e a familia do defeito dos selects que
     transbordaram 50 a 69 px quando o `.fx` do Atlas virou inline-flex. */
  box-sizing:border-box;
}
#fige-login input:focus{outline:0; border-color:var(--amber)}

#fige-login button{
  width:100%; margin-top:12px; background:var(--amber); color:var(--void);
  border:0; border-radius:3px; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; padding:14px; cursor:pointer;
  font-weight:700;
}
#fige-login button:hover{opacity:.88}
#fige-login button:disabled{opacity:.4; cursor:wait}

#fige-login .lgerro{
  color:var(--alert); font-family:var(--mono); font-size:11px;
  margin-top:12px; min-height:17px; text-align:center; line-height:1.5;
}
/* `[hidden]` do agente de usuario tem especificidade ZERO e perde de qualquer
   regra de classe. Ja mordeu este projeto no `.pa[hidden]`. */
#fige-login .lgerro[hidden]{display:none}

#fige-login .lgft{
  margin-top:16px; padding-top:15px; border-top:1px solid var(--edge);
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  color:var(--ink3); line-height:1.7;
}

/* ── o estado de carregando ───────────────────────────────────────────────── */
/*
   OCULTAR NAO E REMOVER, e a escolha e a mesma do interruptor de margem: a
   prancha que esta carregando fica com o conteudo esmaecido e a CAIXA no lugar.
   Com `display:none` a pagina reflui, e numa tela com grade e tabela refluir e
   onde nasce desalinhamento.

   E o aviso e uma faixa no topo da secao, nao um girador no centro: girador no
   centro de uma secao de 3.000 px de altura fica fora da tela de quem esta no
   comeco dela.
*/
.view.carregando{position:relative}
.view.carregando > *{opacity:.35; transition:opacity .12s}
.view.carregando::after{
  content:"carregando os dados desta prancha";
  position:sticky; top:0; display:block; z-index:5;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); background:var(--pit);
  border:1px solid var(--edge); border-left:2px solid var(--amber);
  border-radius:var(--r); padding:9px 12px; margin-bottom:14px;
  opacity:1;
}

/* ── quem esta dentro, no fim da barra ────────────────────────────────────────
   O UNICO elemento visual novo em nove pranchas. Ele existe porque acesso
   individual sem um lugar que diga de quem e o acesso, e sem um jeito de sair,
   e acesso individual pela metade.

   O botao reusa `.temabtn`, a classe do botao de tema e do de margem, entao ele
   nasce com o desenho deles nos dois temas e nao inventa nada. */
.fige-eu{
  margin:14px 10px 0; padding-top:12px;
  border-top:1px solid var(--edge);
}
.fige-eu .eun{
  font-family:var(--lbl); font-size:12px; font-weight:600; color:var(--ink);
  line-height:1.3;
  /* NOME LONGO NAO EMPURRA A BARRA. Ela tem largura fixa em `--sbw`, e um nome de
     quatro palavras transbordaria: corta com reticencia e o inteiro fica no
     `title`. Cortar no meio de uma palavra e pior que cortar com marca, porque o
     leitor tenta ler e nao consegue. */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fige-eu .eue{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink3);
  margin:2px 0 9px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}