/* =========================================================================
   GDI ONLine — Autenticação
   Depende de gdi-tokens.css. Independe de gdi-components.css, exceto por
   .gdi-btn / .gdi-input / .gdi-label, que reaproveita.

   As classes .gdi-alert e .gdi-check são de uso geral — mova para
   gdi-components.css quando outra tela precisar delas.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
/* Tela dividida ao meio: metade institucional, metade acesso. */
.gdi-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ---- Painel esquerdo: identidade + estado do ambiente ------------------ */
.gdi-auth__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gdi-s7);
  padding: var(--gdi-s7) 56px;
  background: var(--gdi-shell);
  color: var(--gdi-shell-ink);
  overflow: hidden;
}

/* Malha de 1px — a referência é a grid de dados que o sistema entrega.
   Tem que ser quase invisível: se der para "ver o padrão", está forte demais. */
.gdi-auth__aside::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
  mask-image: radial-gradient(120% 90% at 15% 20%, #000 30%, transparent 75%);
  pointer-events: none;
}
.gdi-auth__aside > * { position: relative; }

/* Peça de abertura do painel: símbolo grande à esquerda, letreiro à direita,
   os dois centrados entre si. */
.gdi-auth__brand {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vh, 24px);
  flex-wrap: wrap;
}
/* ⚠️ Os dois tamanhos acompanham a ALTURA da janela, não a largura. Presos em
   pixel fixo o painel estourava no notebook de 1366×768 — e como o aside é
   overflow:hidden, a lista de recursos e o rodapé sumiam sem aviso nenhum. */
.gdi-auth__simbolo {
  display: block;
  width: clamp(112px, 17vh, 178px);
  height: auto;
  flex: 0 0 auto;
}
/* ⚠️ A largura subiu 43% junto com a arte. Ao aumentar o "ONLine" e a
   assinatura dentro do arquivo, o desenho ficou mais largo: mantida a largura
   antiga, quem encolheria na tela seria o "GDI" — o contrário do pedido. */
.gdi-auth__logo {
  display: block;
  width: min(80%, clamp(295px, 40vh, 430px));
  height: auto;
}

/* ⚠️ Sem `margin-top:auto` aqui de propósito. Com o rótulo grande no topo,
   duas margens automáticas (esta e a do status) dividiam a sobra e abriam um
   vazio entre a marca e a chamada em telas altas. A sobra toda vai para o
   status, que é quem deve ficar colado no rodapé. */
.gdi-auth__pitch { margin-top: 0; }
/* ⚠️ Uma linha só, sem quebra. Como a frase é fixa e o painel é metade da
   janela, o corpo tem de ser FLUIDO: em pixel fixo ela estouraria o painel
   (que é overflow:hidden) e sumiria pela direita sem aviso nenhum.
   A conta veio de medida, não de chute: esta frase ocupa 21 px de largura para
   cada 1 px de corpo, e o espaço útil é 50vw menos os 112 px de recuo — daí
   `50vw/21 - 112/21`, ou seja 2,38vw - 5,3px. Usei 2,34vw - 6px para sobrar
   uma folga, e travei em 34 px para não virar outdoor no monitor 4K. */
.gdi-auth__pitch h1 {
  font-size: clamp(15px, calc(2.34vw - 6px), 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--gdi-shell-ink-on);
}
.gdi-auth__pitch p {
  margin: var(--gdi-s3) 0 0;
  font-size: var(--gdi-fs-md);
  color: var(--gdi-shell-ink);
  max-width: 52ch;
}

/* Checklist de recursos no painel institucional */
/* ⚠️ Sem o `max-width: 48ch` de antes: com o texto 30% maior aquele limite
   quebrava o primeiro item em três linhas enquanto sobrava meio painel vazio à
   direita. Agora a lista usa a mesma largura da chamada, logo acima. */
.gdi-auth__features {
  list-style: none; margin: var(--gdi-s5) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--gdi-s4);
}
.gdi-auth__features li {
  display: flex; align-items: flex-start; gap: var(--gdi-s3);
  /* 30% acima do corpo padrão: é o texto que vende o sistema, não uma legenda */
  font-size: calc(var(--gdi-fs-md) * 1.3); line-height: 1.4; color: var(--gdi-shell-ink);
}
/* Ícone branco, sem caixa. A caixinha com fundo e borda dava peso de botão a
   algo que é só um marcador — sem ela a lista respira e o traço aparece. A
   largura fixa continua, senão os textos deixariam de alinhar entre si. */
.gdi-auth__features .ic {
  flex: 0 0 auto; width: 30px; height: calc(var(--gdi-fs-md) * 1.3 * 1.4);
  display: grid; place-items: center;
  font-size: 22px;
  color: var(--gdi-shell-ink-on);
}
.gdi-auth__soon {
  margin: var(--gdi-s4) 0 0; font-size: calc(var(--gdi-fs-sm) * 1.3);
  color: var(--gdi-shell-ink-mute); display: flex; align-items: center; gap: 8px;
}
.gdi-auth__soon i { color: var(--gdi-shell-ink-on); font-size: 19px; }

/* ---- Bloco de estado: valores em monoespaçada, alinhados em coluna ----- */
.gdi-auth__status { margin-top: auto; border-top: 1px solid var(--gdi-shell-line); padding-top: var(--gdi-s4); }
.gdi-auth__status dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gdi-s2) var(--gdi-s5);
  align-items: baseline;
}
.gdi-auth__status dt {
  font-size: var(--gdi-fs-micro);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gdi-shell-ink-mute);
}
.gdi-auth__status dd {
  margin: 0;
  font-family: var(--gdi-font-mono);
  font-size: var(--gdi-fs-sm);
  color: var(--gdi-shell-ink-on);
  display: flex; align-items: center; gap: var(--gdi-s2);
}
.gdi-auth__status .gdi-dot { flex: 0 0 auto; }
.gdi-auth__status .is-ok      { color: #4ADE80; }
.gdi-auth__status .is-bad     { color: #FCA5A5; }
.gdi-auth__status .is-waiting { color: var(--gdi-shell-ink-mute); }

.gdi-auth__legal {
  font-size: var(--gdi-fs-xs);
  color: var(--gdi-shell-ink-mute);
}

/* ---- Painel direito: o formulário ------------------------------------- */
.gdi-auth__panel {
  display: grid;
  place-items: center;
  padding: var(--gdi-s6);
  background: var(--gdi-surface);
  border-left: 1px solid var(--gdi-line);
}
.gdi-auth__form { width: 100%; max-width: 400px; }
/* ⚠️ Só o login centraliza. Cadastro, "esqueceu a senha" e "redefinir" usam a
   mesma casca e continuam alinhados à esquerda — centralizar tudo por baixo
   dos panos mudaria três telas que ninguém pediu para mexer. */
.gdi-auth__form--centro { text-align: center; }

/* A ilustração acompanha a altura da janela como o resto: em notebook baixo
   ela cede espaço ao formulário em vez de empurrá-lo para fora. */
.gdi-auth__arte {
  display: block;
  width: min(100%, clamp(210px, 30vh, 330px));
  height: auto;
  margin: 0 auto var(--gdi-s4);
}

.gdi-auth__title { font-size: 26px; letter-spacing: -.015em; line-height: 1.2; }
.gdi-auth__lead {
  margin: 6px 0 var(--gdi-s6);
  font-size: var(--gdi-fs-sm);
  color: var(--gdi-ink-mute);
}
/* o formulário é centrado, mas rótulo e campo continuam alinhados à esquerda */
.gdi-auth__fields { display: flex; flex-direction: column; gap: var(--gdi-s4); text-align: left; }

/* Rótulo do acesso em caixa normal. O padrão do sistema é caixa-alta miúda,
   certo numa tela de parâmetros com dezenas de campos — aqui são dois, e a
   caixa-alta deixava a tela com cara de formulário de consulta. */
.gdi-auth__fields .gdi-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gdi-ink);
}

/* Mesma medida de campo nas quatro telas de acesso (login, primeiro acesso,
   recuperar e redefinir): elas aparecem em sequência no mesmo fluxo e um campo
   mudando de altura no meio do caminho salta aos olhos. */
.gdi-auth__fields .gdi-input { height: 48px; border-radius: 10px; font-size: 15px; }

/* Campo com ícone dentro. Vale só no acesso — nas 45 telas do sistema o campo
   padrão continua sendo o da regra global, sem ícone. */
.gdi-authfield { position: relative; display: block; }
.gdi-authfield > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--gdi-ink-mute); pointer-events: none;
  transition: color var(--gdi-t);
}
.gdi-authfield .gdi-input {
  width: 100%; height: 48px;
  padding-left: 42px; padding-right: 14px;
  border-radius: 10px;
  font-size: 15px;
}
.gdi-authfield:focus-within > i { color: var(--gdi-action); }
/* o campo de senha abre espaço para o olho */
.gdi-authfield:has(.gdi-authfield__olho) .gdi-input { padding-right: 44px; }
.gdi-authfield__olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--gdi-ink-mute); cursor: pointer;
  transition: background var(--gdi-t), color var(--gdi-t);
}
.gdi-authfield__olho:hover { background: var(--gdi-surface-2); color: var(--gdi-ink); }
.gdi-authfield__olho:focus-visible { outline: 2px solid var(--gdi-action); outline-offset: 1px; }

/* Lista de links das telas de cadastro / recuperação de senha */
.gdi-auth__links {
  display: flex; justify-content: space-between; gap: var(--gdi-s3);
  margin-top: var(--gdi-s4);
  font-size: var(--gdi-fs-sm);
}
.gdi-auth__links a { color: var(--gdi-action); text-decoration: none; }
.gdi-auth__links a:hover { text-decoration: underline; }

/* "Lembrar de mim" à esquerda, "Esqueceu a senha?" à direita */
.gdi-auth__linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gdi-s3);
  margin-top: var(--gdi-s4);
  font-size: var(--gdi-fs-sm);
}
/* sobrou um item só na linha (o "Esqueceu a senha?", depois que o "Lembrar de
   mim" saiu): o space-between o deixaria colado à esquerda */
.gdi-auth__linha--fim { justify-content: flex-end; }
.gdi-auth__linha a { color: var(--gdi-action); text-decoration: none; }
.gdi-auth__linha a:hover { text-decoration: underline; }

.gdi-auth__submit {
  width: 100%; height: 48px; margin-top: var(--gdi-s5);
  font-size: 15px; font-weight: 600; border-radius: 10px;
}
.gdi-auth__foot {
  margin-top: var(--gdi-s6);
  padding-top: var(--gdi-s4);
  border-top: 1px solid var(--gdi-line);
  font-size: var(--gdi-fs-xs);
  color: var(--gdi-ink-mute);
}

/* -------------------------------------------------------------------------
   Alerta — uso geral
   ------------------------------------------------------------------------- */
.gdi-alert {
  display: flex; align-items: flex-start; gap: var(--gdi-s2);
  padding: var(--gdi-s3);
  margin-bottom: var(--gdi-s4);
  border: 1px solid var(--gdi-line);
  border-left: 3px solid var(--gdi-ink-mute);
  border-radius: var(--gdi-radius);
  background: var(--gdi-surface-2);
  font-size: var(--gdi-fs-sm);
  line-height: 1.45;
}
.gdi-alert i { font-size: 15px; line-height: 1.3; flex: 0 0 auto; }
.gdi-alert.is-bad  { border-color: var(--gdi-line); border-left-color: var(--gdi-bad);  background: var(--gdi-bad-soft);  color: var(--gdi-bad); }
.gdi-alert.is-warn { border-color: var(--gdi-line); border-left-color: var(--gdi-warn); background: var(--gdi-warn-soft); color: var(--gdi-warn); }
.gdi-alert.is-ok   { border-color: var(--gdi-line); border-left-color: var(--gdi-ok);   background: var(--gdi-ok-soft);   color: var(--gdi-ok); }

/* -------------------------------------------------------------------------
   Checkbox — uso geral
   ------------------------------------------------------------------------- */
.gdi-check { display: inline-flex; align-items: center; gap: var(--gdi-s2); cursor: pointer; font-size: var(--gdi-fs-sm); }
.gdi-check input {
  appearance: none;
  width: 16px; height: 16px; flex: 0 0 auto;
  border: 1px solid var(--gdi-line-strong);
  border-radius: var(--gdi-radius-sm);
  background: var(--gdi-surface);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--gdi-t), border-color var(--gdi-t);
}
.gdi-check input:checked { background: var(--gdi-action); border-color: var(--gdi-action); }
.gdi-check input:checked::after {
  content: "";
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.gdi-check input:focus-visible { outline: 2px solid var(--gdi-action); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   Telas estreitas: o painel vira uma faixa de cabeçalho
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .gdi-auth { grid-template-columns: 1fr; }
  .gdi-auth__aside { gap: var(--gdi-s5); padding: var(--gdi-s5) var(--gdi-s5) var(--gdi-s6); }
  /* Sem largura para os dois lado a lado, a marca empilha (flex-wrap) e vira o
     lockup vertical. Aí o símbolo precisa ceder um pouco: no empilhamento ele
     compete com o letreiro em vez de acompanhá-lo. */
  .gdi-auth__simbolo { width: clamp(96px, 13vh, 120px); }
  /* No celular a frase VOLTA a quebrar: numa linha só ela sairia da tela ou
     ficaria ilegível de tão pequena. A linha única é regra do desktop. */
  .gdi-auth__pitch h1 { font-size: 22px; max-width: none; white-space: normal; }
  .gdi-auth__pitch p { display: none; }
  .gdi-auth__features, .gdi-auth__soon { display: none; }
  .gdi-auth__status, .gdi-auth__legal { display: none; }
  .gdi-auth__panel { border-left: 0; align-items: start; }
}