/* login.css — acesso à EntreGÔ RJ Centro.
 *
 * Reescrito na Onda E sobre shared/tokens.css. O protótipo trazia um design
 * system inteiro só para esta página (Inter, creme #F6F4F1, tinta #111112,
 * prefixo .nx-) que não tinha NADA em comum com o app em que ele entrava.
 * Agora é o mesmo produto: Archivo, o acento da marca, os mesmos raios e
 * sombras das outras 40 telas.
 */

* , *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.55;
}

/* ─── Estrutura ───────────────────────────────────────────────── */
.lg-shell { min-height: 100%; display: grid; place-items: center; padding: 24px; }

/* 🔴 Fundo num tom de azul bem claro (2026-09-10), não branco puro — o
 * card precisa se destacar da página, que também é branca (`--color-base`).
 * `--color-accent-soft` já existe em `tokens.css` (o mesmo tom usado nos
 * estados de foco/hover ao redor da marca) — reaproveitado aqui em vez de
 * inventar um cinza neutro, pra a página inteira continuar na paleta única.
 * A sombra sobe de `--shadow-lg` pra `--shadow-xl` pelo mesmo motivo: o
 * card tinha só a borda de 1px separando ele da página branca atrás. */
.lg-card {
  width: min(940px, 100%);
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

/* `min-height` para o cartão NÃO pular de tamanho a cada tela: login,
 * redefinir senha e primeiro acesso têm quantidades diferentes de campo, e
 * sem piso o cartão encolhia de 471px para 394px entre uma e outra — a caixa
 * dança debaixo do cursor no meio do fluxo. O piso é o da tela mais alta. */
.lg-form {
  padding: 40px 44px;
  display: flex; flex-direction: column;
  min-height: 452px;
  /* Coluna de grid tem piso `auto`: sem isto, QUALQUER filho largo demais
   * (foi o caso das caixas do código) empurra o cartão inteiro em vez de
   * ser contido. Cinto e suspensório do conserto acima. */
  min-width: 0;
}

/* 🔴 Fundo do painel em degradê azul (2026-09-10) — `app/marca-rjcentro-clara.png`
 * é a variante de texto CLARO (branco), feita pra este fundo escuro/colorido;
 * a variante escura (`marca-rjcentro.png`) ficaria ilegível aqui.
 * Gradiente diagonal dentro da MESMA rampa de azul da marca — `--color-accent`
 * no canto claro até `--color-accent-900` no escuro — não é cor nova, é a
 * paleta que já existe em `tokens.css` esticada num degradê.
 * ponytail: se o arquivo voltar pra variante de texto escuro, este fundo tem
 * de virar claro (ou seguir `--color-surface`) junto — texto escuro sobre
 * este gradiente ficaria ilegível na metade escura. */
.lg-panel {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-900) 100%);
  display: grid; place-items: center;
  padding: 28px;
  border-left: 1px solid var(--color-border);
}
/* Proporcional ao painel, não 230px fixos: a arte é uma faixa 487×275 e, no
 * tamanho fixo, sobrava painel vazio em volta dela nas três telas. */
.lg-panel img {
  max-width: 88%; max-height: 82%;
  width: auto; height: auto; object-fit: contain;
}

@media (max-width: 860px) {
  .lg-card { grid-template-columns: 1fr; }
  .lg-panel { display: none; }
  .lg-form { padding: 32px 24px; }
}

/* ─── Texto ───────────────────────────────────────────────────── */
.lg-h {
  margin: 0 0 6px; font-size: 21px; line-height: 1.25;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  letter-spacing: -0.01em;
}
.lg-sub { margin: 0 0 22px; font-size: 13px; color: var(--color-text-secondary); }
.lg-sub b { color: var(--color-text-primary); font-weight: 600; }

.lg-field { margin-bottom: 14px; }
.lg-label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
}

/* ─── Campos ──────────────────────────────────────────────────── */
.lg-in {
  display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 12px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.lg-in:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.lg-in[data-err="true"] { border-color: var(--color-danger); }
.lg-in .ic { color: var(--color-text-muted); flex-shrink: 0; }
.lg-in input {
  flex: 1; min-width: 0; height: 100%;
  border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 13.5px; color: var(--color-text-primary);
}
.lg-in input::placeholder { color: var(--color-text-muted); }

.lg-eye {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-muted); padding: 4px; display: inline-flex;
  border-radius: var(--radius-xs);
}
.lg-eye:hover { color: var(--color-text-secondary); }

/* ─── Código de 6 dígitos ─────────────────────────────────────── */
/* 🔴 `minmax(0,1fr)` e `min-width:0`, não `1fr` sozinho: um <input> tem largura
 * intrínseca de ~20 caracteres (o atributo `size` padrão), e trilha `1fr` tem
 * piso `auto`. As seis caixas se recusavam a encolher, a coluna do formulário
 * inchava para ~1740px, e o cartão inteiro estourava — a tela do código saía
 * do enquadramento levando o botão "Confirmar e entrar" para fora da janela.
 * Só aparecia com 2FA ativo, que é o caminho obrigatório de todo login. */
.lg-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.lg-otp input {
  width: 100%; min-width: 0;
  height: 54px; text-align: center;
  font-family: var(--font-mono); font-size: 20px; font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  outline: none;
}
.lg-otp input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.lg-otp[data-err="true"] input { border-color: var(--color-danger); }

/* ─── Força da senha ──────────────────────────────────────────── */
.lg-force { margin-top: 10px; }
.lg-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.lg-bars i {
  height: 4px; border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background var(--duration-fast) var(--ease-out);
}
.lg-reqs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lg-req {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--color-text-muted);
}
.lg-req[data-ok="true"] { color: var(--color-success); }

/* ─── Alertas ─────────────────────────────────────────────────── */
.lg-alert {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; margin-bottom: 16px;
  border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.5;
  border: 1px solid transparent;
}
.lg-alert b { display: block; font-weight: 600; }
.lg-alert .ic { flex-shrink: 0; margin-top: 1px; }
.lg-alert[data-t="err"]  { background: color-mix(in srgb, var(--color-danger) 10%, transparent);  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);  color: var(--color-danger); }
.lg-alert[data-t="warn"] { background: color-mix(in srgb, var(--color-warning) 10%, transparent); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); color: var(--color-warning); }
.lg-alert[data-t="ok"]   { background: color-mix(in srgb, var(--color-success) 10%, transparent); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); color: var(--color-success); }
.lg-alert .act {
  display: block; margin-top: 6px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}

.lg-hint {
  display: flex; align-items: center; gap: 5px;
  margin: 6px 0 0; font-size: 11.5px; color: var(--color-text-muted);
}
.lg-hint[data-tone="warn"] { color: var(--color-warning); }
.lg-hint[data-tone="err"]  { color: var(--color-danger); }

/* ─── Linha de opções ─────────────────────────────────────────── */
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }

.lg-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer; user-select: none;
}
.lg-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-box {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface-raised);
  color: transparent;
}
.lg-check input:checked + .lg-box {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent);
}
.lg-check input:focus-visible + .lg-box {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.lg-link, .lg-back {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--color-text-secondary);
  padding: 0; text-decoration: none;
}
/* Tinta e sublinhado, não o acento: no standalone o único elemento colorido
 * da tela é o botão primário, e é isso que faz o olho ir para ele. Link em
 * accent no meio do texto disputa com o botão e some quando os dois estão
 * lado a lado ("Lembrar de mim / Esqueci minha senha" logo acima do Entrar). */
.lg-link:hover, .lg-back:hover {
  color: var(--color-text-primary); text-decoration: underline;
}
.lg-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 18px; }

/* ─── Botões ──────────────────────────────────────────────────── */
.lg-btn {
  width: 100%; height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-on-accent);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.lg-btn:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.lg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.lg-btn.ghost {
  background: transparent; color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
}
.lg-btn.ghost:hover:not(:disabled) { background: var(--color-surface-raised); color: var(--color-text-primary); }

.lg-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: lg-rot 700ms linear infinite;
}
@keyframes lg-rot { to { transform: rotate(360deg); } }

/* ─── Rodapé ──────────────────────────────────────────────────── */
.lg-foot {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 12.5px; color: var(--color-text-secondary); text-align: center;
}
.lg-foot b { color: var(--color-text-primary); font-weight: 600; cursor: pointer; }
.lg-foot b:hover { text-decoration: underline; }

.lg-resend {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 18px; font-size: 12.5px; color: var(--color-text-muted);
}
.lg-resend button {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--color-accent); padding: 0;
}
.lg-resend button:disabled { color: var(--color-text-muted); cursor: default; font-weight: 500; }

/* ── Ativação do 2FA (bootstrap do 1º fator) ────────────────────────────── */
.lg-qr {
  display: flex; justify-content: center;
  margin: var(--space-4) 0;
}
.lg-qr img {
  width: 176px; height: 176px;
  /* O QR precisa de fundo claro para ler no tema escuro. */
  background: #fff; padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.lg-codes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  margin: var(--space-4) 0;
}
.lg-codes code {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  text-align: center; padding: var(--space-2) var(--space-1);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  color: var(--color-text-primary);
  user-select: all;
}

/* Trocar de fator: vários links empilhados sob o botão, não um parágrafo. */
.lg-foot .lg-link { display: block; margin: 2px auto; }