/* Tela de entrada (5.13.0): painel institucional em Azul Toga à esquerda e o
 * formulário à direita; no celular, o painel vira um cabeçalho compacto.
 * Só tokens; o dourado do selo é o da autenticidade. */
@layer telas {
  .porta-entrada {
    display: grid; grid-template-columns: minmax(320px, 44%) minmax(0, 1fr); align-items: stretch; justify-content: stretch;
    padding: 0; background: var(--fundo); overflow: auto;
  }
  .porta-entrada.oculto { display: none; }

  /* painel institucional */
  .entrada-painel {
    position: relative; display: flex; align-items: center; overflow: hidden; padding: var(--e-7) var(--e-6);
    background: var(--entrada-painel); color: var(--texto-sobre-marca);
  }
  .entrada-fundo {
    position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--entrada-ouro);
    stroke-width: 1.2; opacity: .16; pointer-events: none;
  }
  .entrada-identidade { position: relative; display: grid; gap: var(--e-3); max-width: 420px; }
  .entrada-selo {
    display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%;
    border: 2px solid var(--entrada-ouro); box-shadow: inset 0 0 0 6px var(--entrada-painel), inset 0 0 0 7px var(--entrada-ouro);
    background: var(--entrada-painel);
  }
  .entrada-selo img { width: 56px; height: 56px; object-fit: contain; }
  .entrada-nome { font-size: var(--fs-7); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
  .entrada-orgao { color: var(--entrada-texto-suave); font-size: var(--fs-4); }
  .entrada-filete { display: block; width: 44px; height: 2px; margin: var(--e-2) 0; background: var(--entrada-ouro); }
  .entrada-frase { margin: 0; font-size: var(--fs-5); font-weight: 500; line-height: 1.35; }
  .entrada-garantias { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
  .entrada-garantias li { display: flex; align-items: center; gap: var(--e-2); color: var(--entrada-texto-suave); font-size: var(--fs-3); }
  .entrada-garantias .icone { width: 18px; height: 18px; flex-shrink: 0; color: var(--entrada-ouro); }
  .entrada-links { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-4); }
  .entrada-links a { color: var(--texto-sobre-marca); font-size: var(--fs-3); font-weight: 500; text-underline-offset: 3px; }
  .entrada-links a:hover { color: var(--entrada-ouro); }
  .entrada-links a:focus-visible { outline: 2px solid var(--entrada-ouro); outline-offset: 2px; border-radius: var(--raio-1); }

  /* formulário */
  .entrada-lado { display: flex; align-items: center; justify-content: center; padding: var(--e-6) var(--e-5); background: var(--fundo); }
  .porta-entrada .cartao-login {
    width: min(380px, 100%); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  html[data-tema="escuro"] .porta-entrada .cartao-login { background: transparent; }
  .entrada-titulo { margin: 0; color: var(--texto); font-size: var(--fs-6); font-weight: 600; }
  .entrada-subtitulo { margin: var(--e-1) 0 var(--e-5); color: var(--texto-2); font-size: var(--fs-3); }
  .porta-entrada .cartao-login .campo { margin-bottom: var(--e-4); }
  .porta-entrada .cartao-login .campo label { color: var(--texto); font-size: var(--fs-2); font-weight: 500; }
  .porta-entrada .cartao-login .campo input { width: 100%; min-height: 44px; font-size: var(--fs-4); }
  .entrada-senha { position: relative; }
  .entrada-senha input { padding-right: 88px; }
  .entrada-mostrar {
    position: absolute; top: 50%; right: var(--e-1); transform: translateY(-50%); min-height: 34px; padding: 0 var(--e-3);
    border: 0; border-radius: var(--raio-1); background: transparent; color: var(--link); font: inherit; font-size: var(--fs-2);
    font-weight: 500; cursor: pointer;
  }
  .entrada-mostrar:hover { background: var(--acao-suave); }
  .entrada-caps { margin: var(--e-1) 0 0; color: var(--atencao); font-size: var(--fs-2); }
  .porta-entrada .cartao-login .entrada-botao { width: 100%; min-height: 44px; margin-top: var(--e-2); font-size: var(--fs-4); }
  .porta-entrada .cartao-login .entrada-botao[aria-busy="true"] { opacity: .8; cursor: progress; }
  .porta-entrada .nota-login { margin-top: var(--e-4); color: var(--texto-2); font-size: var(--fs-2); }
  .porta-entrada .aviso-login { margin-bottom: var(--e-4); }
  .entrada-digitos { display: flex; gap: var(--e-2); justify-content: space-between; margin: 0 0 var(--e-3); padding: 0; border: 0; }
  .entrada-digitos input {
    width: 48px; height: 56px; padding: 0; text-align: center; font-size: var(--fs-6); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .entrada-voltar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); margin: var(--e-3) 0 0; }
  .entrada-rodape {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3);
    margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--linha);
  }
  .tema-entrada button { min-height: 32px; padding: 0 var(--e-3); font-size: var(--fs-2); }
  .entrada-versao { color: var(--texto-3); font-size: var(--fs-1); }
  .cartao-login.entrada-troca { animation: entrada-troca var(--t-2) var(--curva); }
  @keyframes entrada-troca { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* celular: o painel vira cabeçalho compacto; frase, garantias e desenho somem */
  @media (max-width: 760px) {
    .porta-entrada { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .entrada-painel { padding: var(--e-4) var(--e-4); }
    .entrada-fundo, .entrada-frase, .entrada-garantias, .entrada-filete { display: none; }
    .entrada-identidade { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--e-3); row-gap: 0; }
    .entrada-selo { grid-row: span 2; width: 52px; height: 52px; box-shadow: none; }
    .entrada-selo img { width: 34px; height: 34px; }
    .entrada-nome { font-size: var(--fs-5); }
    .entrada-orgao { font-size: var(--fs-2); }
    .entrada-links { grid-column: 1 / -1; margin-top: var(--e-2); gap: var(--e-3); }
    .entrada-lado { align-items: flex-start; padding: var(--e-5) var(--e-4); }
    .entrada-digitos input { width: 42px; height: 50px; }
  }
}
@media (prefers-reduced-motion: reduce) { .cartao-login.entrada-troca { animation: none; } }