/* =====================================================================
   O CARTÃO DA PORTA DE ENTRADA, pelo desenho aprovado pelo dono em 09/11/2026: duas colunas.
   Esquerda: a marca da empresa (dado, nunca fixo: o logo ou a sigla, o nome, os textos) e as boas-vindas. Direita: o
   que fazer (entrar, ou o recado de quem ainda não tem acesso).
   Serve à página /entrar/ e à prévia da aba Marca do painel (comum/entrada.js). As colunas empilham pela largura de
   quem segura o cartão (@container en: o palco da página, ou a moldura da prévia), e não pela da janela: a prévia de
   celular, dentro do painel no computador, sai igual ao celular de verdade.
   Só tokens (painel/comum/tokens.css, --en-*): nenhum px nem hex cru aqui, fora as condições de @container.
   --en-destaque é a cor da marca: o JS troca, já ajustada para o contraste AA sobre o cartão.
   ===================================================================== */
.en-palco,.pn-previa-tela{container:en/inline-size}

.en-cartao{--en-destaque:var(--en-destaque-padrao);
  display:grid;grid-template-columns:var(--en-esquerda) minmax(0,1fr);inline-size:min(var(--en-largura),100%);
  min-block-size:min(var(--en-altura),100dvh - 2*var(--en-margem));
  border:var(--e-fio) solid var(--en-linha);border-radius:var(--en-raio);background:var(--en-cartao-dir);box-shadow:var(--en-sombra);overflow:hidden}
/* enquanto a marca não chega, o cartão fica vazio (sem piscar o nome padrão antes do da empresa). O data-holo é a
   prova de que o JS roda (painel/comum/tema.js o põe): sem JS, o cartão mostra o que o HTML traz, e o botão funciona. */
html[data-holo] .en-cartao:not([data-pronto])>*{visibility:hidden}

/* ---------- os rótulos com letra espaçada (os dois lados) ---------- */
.en-rotulo{display:flex;align-items:center;gap:var(--b);color:var(--en-destaque);
  font:800 var(--en-t-rotulo)/var(--b2) var(--pn-fonte);letter-spacing:.16em;text-transform:uppercase}
.en-ponto{flex:none;inline-size:var(--en-ponto);block-size:var(--en-ponto);border-radius:50%;background:var(--en-destaque);
  box-shadow:0 0 0 var(--e-fio-2) color-mix(in srgb,var(--en-destaque) 25%,transparent)}

/* ---------- a coluna da marca ---------- */
.en-esquerda{display:flex;flex-direction:column;min-inline-size:var(--pn-zero);padding:var(--en-pad);
  border-inline-end:var(--e-fio) solid var(--en-linha);
  background:radial-gradient(ellipse 90% 45% at 0% 100%,color-mix(in srgb,var(--en-destaque) 9%,transparent),transparent 75%),var(--en-cartao)}
.en-marca{display:flex;align-items:flex-start;gap:var(--s-entre-2)}
.en-selo{flex:none;display:grid;place-items:center;inline-size:var(--en-selo);block-size:var(--en-selo);border-radius:var(--en-raio-2);
  border:var(--e-fio) solid color-mix(in srgb,var(--en-destaque) 38%,transparent);background:color-mix(in srgb,var(--en-destaque) 12%,var(--en-cartao));
  color:var(--en-destaque);font:800 var(--en-t-selo)/1 var(--pn-fonte);letter-spacing:-.04em}
.en-selo small{font-size:var(--en-t-selo-2);letter-spacing:0}
/* o logo da empresa no lugar da sigla: só <img src> (o arquivo vem de /api/publico/logo), na altura do selo */
.en-logo{flex:none;display:block;block-size:var(--en-selo);inline-size:auto;max-inline-size:var(--en-logo-max);object-fit:contain;object-position:left center}
.en-nome{display:grid;padding-block-start:var(--e-fio-2);font:800 var(--en-t-nome)/1.2 var(--pn-fonte);letter-spacing:.05em;text-transform:uppercase;overflow-wrap:anywhere}
.en-nome-2{color:var(--en-destaque)}
.en-nome-2:empty{display:none}
.en-sub{margin-block-start:var(--b);color:var(--en-tinta-2);font:500 var(--en-t-sub)/var(--b2) var(--pn-fonte);letter-spacing:0;text-transform:none}
.en-sub:empty{display:none}

.en-boas-vindas{margin-block:calc(var(--b8) + var(--b2)) auto;padding-block-end:var(--s-estr-3)}
.en-titulo{margin-block-start:var(--b2);font:800 var(--en-t-titulo)/var(--en-lh-titulo) var(--pn-fonte);letter-spacing:-.045em;overflow-wrap:break-word}
.en-titulo>span{display:block}
.en-destaque{color:var(--en-destaque)}
.en-descricao{max-inline-size:var(--en-desc);margin-block-start:var(--s-entre-3);color:var(--en-tinta-2);font:400 var(--en-t-desc)/var(--en-lh-desc) var(--pn-fonte)}

.en-pe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--b) var(--s-entre-2);padding-block-start:var(--s-in-3);
  border-block-start:var(--e-fio) solid var(--en-linha);color:var(--en-tinta-2);font:500 var(--en-t-rotulo)/var(--b2) var(--pn-fonte)}
.en-pe-nome{font-weight:800;letter-spacing:.12em;text-transform:uppercase}

/* ---------- a coluna da ação ---------- */
.en-direita{display:flex;flex-direction:column;min-inline-size:var(--pn-zero);padding:var(--en-pad) var(--en-pad-dir)}
.en-acao-titulo{margin-block-start:var(--b);font:800 var(--en-t-titulo-dir)/1.2 var(--pn-fonte);letter-spacing:-.025em}
.en-acao-texto{max-inline-size:var(--en-texto);margin-block-start:var(--b2);color:var(--en-tinta-2)}
.en-acao-corpo{flex:1;margin-block:var(--s-estr-2)}
.en-nota{display:flex;align-items:flex-start;gap:var(--s-in-2);padding-block-start:var(--s-in-3);border-block-start:var(--e-fio) solid var(--en-linha);
  color:var(--en-tinta-2);font:500 var(--en-t-nota)/1.5 var(--pn-fonte)}
.en-nota .pn-icone{color:var(--en-destaque);inline-size:var(--b3);block-size:var(--b3);margin-block-start:calc(-1*var(--e-fio-2))}

/* o botão de entrar: chapado, na cor da marca */
.en-botao{min-block-size:var(--b6);padding-inline:var(--s-in-3);border-color:var(--en-destaque);background:var(--en-destaque);color:var(--ac-sobre-ligue);font-size:var(--e-t-body)}
.en-botao:hover{background:color-mix(in srgb,var(--en-destaque) 86%,var(--pn-tinta))}

/* ---------- o login em dois passos (decisão 0011): o e-mail, depois o código ---------- */
.en-form{display:grid;gap:var(--s-entre-2);max-inline-size:var(--en-texto)}
.en-form .pn-campo,.en-form .pn-alerta{margin:var(--pn-zero)}
.en-form .pn-campo input{min-block-size:var(--b6);background:var(--en-fundo);border-color:var(--pn-linha-2);font-size:var(--e-t-body)}
.en-form .pn-campo[data-campo="codigo"] input{font-size:var(--e-t-sub);font-weight:700;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.en-form .en-botao{inline-size:100%}
.en-email{color:var(--en-tinta-2);overflow-wrap:anywhere}
.en-email strong{color:var(--pn-tinta);font-weight:600}
.en-recado{color:var(--en-tinta-2);font-size:var(--e-t-mini);line-height:var(--e-lh-mini)}
.en-recado:empty{display:none}
.en-outras{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-in-1) var(--s-entre-2)}
/* os botões de texto do passo 2: o alvo tem a altura de um controle, o texto sublinhado na cor da marca */
.en-link{min-block-size:var(--e-ctl);padding:var(--pn-zero);border:0;background:none;color:var(--en-destaque);cursor:pointer;
  font:600 var(--e-t-body)/var(--e-lh-body) var(--pn-fonte);text-decoration:underline;text-underline-offset:.2em}
.en-link:hover{text-decoration-thickness:var(--e-fio-2)}
.en-link:disabled{color:var(--en-tinta-2);text-decoration:none;cursor:not-allowed;font-variant-numeric:tabular-nums}

/* ---------- estreito (o celular, ou a prévia de celular): as colunas empilham ---------- */
@container en (max-width:728px){
  .en-cartao{grid-template-columns:minmax(0,1fr);min-block-size:auto}
  .en-esquerda{padding:var(--en-pad-celular);border-inline-end:0;border-block-end:var(--e-fio) solid var(--en-linha)}
  .en-boas-vindas{margin-block:var(--s-estr-3) var(--pn-zero);padding-block-end:var(--s-estr-2)}

  .en-pe{margin-block-start:var(--s-estr-2)}
  .en-direita{padding:var(--en-pad-celular)}
  .en-acao-titulo{font-size:var(--en-t-titulo-dir-celular)}
  .en-botao{inline-size:100%}
  .en-form{max-inline-size:none}
}

@media (prefers-reduced-motion:no-preference){
  .en-botao{transition:background-color var(--pn-rapido) ease-out,border-color var(--pn-rapido) ease-out}
}