/* entrada.css — telas de entrada da Rede de Negócios, na identidade Tríade.
 *
 * Lê SÓ os tokens de `gws/gws.css` (D50, D51, regra G11): nenhuma cor escrita à
 * mão, nenhuma medida em `px` salvo bordas e contornos, que devem mesmo ser px.
 * Modo claro e escuro vêm de graça — os tokens semânticos já trocam sozinhos
 * por `prefers-color-scheme` e por `[data-theme]`.
 *
 * Namespace `.ge-*` («GWS entrada»), como no kickoff: este arquivo nunca se
 * cruza com o shell da aplicação, que tem os seus próprios prefixos.
 *
 * Alvo de qualidade (G12): alvos de toque de 2.75rem (44 px), nada em `px` na
 * tipografia, sem rolagem horizontal a 360 px, foco sempre visível, movimento
 * respeitando a preferência do sistema.
 */

*, *::before, *::after { box-sizing: border-box; }

.ge {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--gws-bg-subtle);
  color: var(--gws-text);
  font: var(--gws-text-body);
  -webkit-text-size-adjust: 100%;
}

.ge-sprite { display: none; }

.ge-ic {
  width: 1.25rem; height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── pular para o conteúdo ────────────────────────────────────────────── */
.ge-pular {
  position: absolute; left: -100vw; top: var(--gws-space-2);
  z-index: 10;
  padding: var(--gws-space-2) var(--gws-space-4);
  background: var(--gws-surface);
  color: var(--gws-link);
  border: 1px solid var(--gws-border);
}
.ge-pular:focus { left: var(--gws-space-2); }

/* ── cabeçalho ────────────────────────────────────────────────────────── */
.ge-topo {
  border-bottom: 1px solid var(--gws-border);
  background: var(--gws-bg);
}
.ge-topo-in {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--gws-space-4);
  display: flex;
  align-items: center;
  gap: var(--gws-space-4);
  flex-wrap: wrap;
}
.ge-marca { display: inline-flex; align-items: center; }
.ge-marca img { display: block; height: 2.25rem; width: auto; }

.ge-rot {
  margin: 0;
  font: var(--gws-text-label);
  letter-spacing: var(--gws-tracking-mono);
  text-transform: uppercase;
  color: var(--gws-text-muted);
}
.ge-rot-topo { margin-left: auto; }

/* ── corpo ────────────────────────────────────────────────────────────── */
.ge-main {
  flex: 1;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--gws-space-8) var(--gws-space-4);
}
.ge-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gws-space-8);
  align-items: start;
}

.ge-cartao {
  background: var(--gws-surface);
  border: 1px solid var(--gws-border);
  border-top: 3px solid var(--gws-accent);
  border-radius: var(--gws-radius-md);
  box-shadow: var(--gws-shadow-sm);
  padding: var(--gws-space-8) var(--gws-space-6);
}
.ge-cartao h1 {
  font: var(--gws-text-h2);
  margin: var(--gws-space-1) 0 var(--gws-space-3);
  color: var(--gws-text);
}
.ge-lede {
  margin: 0 0 var(--gws-space-6);
  color: var(--gws-text-muted);
  font: var(--gws-text-body);
}

/* ── mensagens ────────────────────────────────────────────────────────── */
.ge-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--gws-space-2);
  margin: 0 0 var(--gws-space-5);
  padding: var(--gws-space-3) var(--gws-space-4);
  border: 1px solid var(--gws-border);
  border-left: 3px solid var(--gws-border);
  border-radius: var(--gws-radius-sm);
  font: var(--gws-text-small);
}
.ge-msg--erro { border-left-color: var(--gws-danger); color: var(--gws-danger); }
.ge-msg--ok   { border-left-color: var(--gws-success); color: var(--gws-success); }

/* ── formulário ───────────────────────────────────────────────────────── */
.ge-form { display: flex; flex-direction: column; gap: var(--gws-space-5); }

.ge-campo { display: flex; flex-direction: column; gap: var(--gws-space-2); }
.ge-campo > span {
  font: var(--gws-text-label);
  letter-spacing: var(--gws-tracking-mono);
  text-transform: uppercase;
  color: var(--gws-text-muted);
}
.ge-campo input {
  min-height: 2.75rem;                 /* 44 px — alvo de toque (G12) */
  width: 100%;
  padding: var(--gws-space-2) var(--gws-space-3);
  font: var(--gws-text-body);
  color: var(--gws-text);
  background: var(--gws-bg);
  border: 1px solid var(--gws-border);
  border-radius: var(--gws-radius-sm);
}
.ge-campo input:hover { border-color: var(--gws-secondary); }

/* código de 6 dígitos: monoespaçado e espaçado, para se conferir de relance */
.ge-codigo {
  font-family: var(--gws-font-mono) !important;
  letter-spacing: 0.4em;
  font-size: 1.25rem;
  max-width: 11rem;
}
.ge-mono { font-family: var(--gws-font-mono); font-size: 0.875rem; overflow-wrap: anywhere; }

.ge-botao {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gws-space-2);
  padding: var(--gws-space-2) var(--gws-space-6);
  font: var(--gws-text-body);
  font-weight: 500;
  color: var(--gws-on-primary);
  background: var(--gws-primary);
  border: 1px solid var(--gws-primary);
  border-radius: var(--gws-radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.ge-botao:hover { background: var(--gws-secondary); border-color: var(--gws-secondary); }
.ge-botao--largo { width: 100%; }
.ge-botao--terc {
  color: var(--gws-link);
  background: transparent;
  border-color: var(--gws-border);
}
.ge-botao--terc:hover { background: var(--gws-bg-subtle); border-color: var(--gws-secondary); }

.ge-acoes { display: flex; flex-wrap: wrap; gap: var(--gws-space-3); }
.ge-acoes form { margin: 0; }

.ge-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gws-space-3) var(--gws-space-5);
  margin: var(--gws-space-6) 0 0;
  padding-top: var(--gws-space-5);
  border-top: 1px solid var(--gws-border);
}
.ge-links a:not(.ge-botao) {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--gws-link);
  font: var(--gws-text-small);
}
.ge-links form { margin: 0; }

/* ── grupos de campos (primeiro acesso, ativação do 2º fator) ─────────── */
.ge-grupo {
  margin: 0;
  padding: var(--gws-space-5);
  border: 1px solid var(--gws-border);
  border-radius: var(--gws-radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--gws-space-4);
}
.ge-grupo legend {
  padding: 0 var(--gws-space-2);
  font: var(--gws-text-label);
  letter-spacing: var(--gws-tracking-mono);
  text-transform: uppercase;
  color: var(--gws-text-muted);
}
.ge-grupo p { margin: 0; }

.ge-dica {
  font: var(--gws-text-small);
  color: var(--gws-text-muted);
}

/* escolha (rádio): a área clicável é a linha inteira, com 2.75rem de altura */
.ge-escolha {
  display: flex;
  align-items: flex-start;
  gap: var(--gws-space-3);
  min-height: 2.75rem;
  padding: var(--gws-space-2) 0;
  font: var(--gws-text-body);
  cursor: pointer;
}
.ge-escolha input[type="radio"] {
  width: 1.25rem; height: 1.25rem;
  margin: 0.15rem 0 0;
  flex: none;
  accent-color: var(--gws-primary);
}

/* QR do autenticador: fundo claro sempre, senão some no modo escuro */
.ge-qr {
  align-self: flex-start;
  padding: var(--gws-space-3);
  background: var(--gws-neutro-0);
  border: 1px solid var(--gws-border);
  border-radius: var(--gws-radius-sm);
}
.ge-qr svg { display: block; width: 100%; max-width: 12rem; height: auto; color: var(--gws-abismo); }

.ge-chave {
  padding: var(--gws-space-2) var(--gws-space-3);
  background: var(--gws-bg-subtle);
  border: 1px solid var(--gws-border);
  border-radius: var(--gws-radius-sm);
  letter-spacing: 0.08em;
}

/* ── painel do sistema ────────────────────────────────────────────────── */
.ge-sistema {
  padding: var(--gws-space-6);
  border: 1px solid var(--gws-border);
  border-radius: var(--gws-radius-md);
  background: var(--gws-bg);
}
.ge-sistema-nome {
  font: var(--gws-text-h3);
  margin: var(--gws-space-2) 0 var(--gws-space-3);
  color: var(--gws-text);
}
.ge-sistema-texto {
  margin: 0 0 var(--gws-space-6);
  color: var(--gws-text-muted);
  font: var(--gws-text-small);
}
.ge-ficha { margin: 0; display: grid; gap: var(--gws-space-3); }
.ge-ficha > div {
  display: flex; justify-content: space-between; gap: var(--gws-space-4);
  padding-bottom: var(--gws-space-3);
  border-bottom: 1px solid var(--gws-border);
}
.ge-ficha > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ge-ficha dt {
  font: var(--gws-text-label);
  letter-spacing: var(--gws-tracking-mono);
  text-transform: uppercase;
  color: var(--gws-text-muted);
}
.ge-ficha dd { margin: 0; font: var(--gws-text-small); color: var(--gws-text); }

/* ── rodapé ───────────────────────────────────────────────────────────── */
.ge-rodape {
  border-top: 1px solid var(--gws-border);
  background: var(--gws-bg);
}
.ge-rodape-in {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--gws-space-5) var(--gws-space-4);
  display: flex; flex-wrap: wrap; gap: var(--gws-space-3) var(--gws-space-6);
  align-items: center;
  font: var(--gws-text-small);
  color: var(--gws-text-muted);
}
.ge-rodape p { margin: 0; }
.ge-rodape-marca { font-weight: 600; color: var(--gws-text); }
.ge-rodape-nota { display: flex; align-items: center; gap: var(--gws-space-2); }

/* ── foco: sempre visível, sempre no token de foco ────────────────────── */
.ge a:focus-visible,
.ge button:focus-visible,
.ge input:focus-visible,
.ge summary:focus-visible {
  outline: 2px solid var(--gws-focus);
  outline-offset: 2px;
}
.ge-campo input:focus-visible { border-color: var(--gws-focus); }

/* ── adaptação ────────────────────────────────────────────────────────── */
/* 52rem: o painel do sistema deixa de caber ao lado e passa para baixo do
   cartão — a ordem importa, o formulário vem primeiro em telas estreitas. */
@media (max-width: 52rem) {
  .ge-grade { grid-template-columns: 1fr; gap: var(--gws-space-6); }
  .ge-main { padding: var(--gws-space-6) var(--gws-space-4); }
  .ge-rot-topo { margin-left: 0; flex-basis: 100%; }
}

/* 26rem (416 px): a 360 px o cartão não pode ter folga lateral grande, senão a
   linha de formulário empurra a página e nasce rolagem horizontal. */
@media (max-width: 26rem) {
  .ge-cartao { padding: var(--gws-space-6) var(--gws-space-4); }
  .ge-topo-in, .ge-main, .ge-rodape-in { padding-left: var(--gws-space-4); padding-right: var(--gws-space-4); }
  .ge-links { gap: var(--gws-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .ge *, .ge *::before, .ge *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}