/* ============================================================
   As telas do servidor de autorizacao, no desenho da landing.

   Login e pagina de erro sao as duas unicas telas que este servico
   desenha, e sao a primeira coisa que alguem ve do produto — antes
   do app, antes de qualquer sessao. Elas nao podem parecer "a tela
   do backend": quem sai da landing e cai aqui tem que reconhecer o
   mesmo produto.

   Por que uma folha propria e nao o CSS do Next: este servidor nao
   tem build de front. Aqui e Thymeleaf servindo HTML direto, e os
   valores abaixo sao a copia deliberada dos tokens `--gf-*` de
   `web/app/globals.css`. Mudou a identidade la, muda aqui — sao
   dois processos separados, e nao ha como uma importar da outra
   sem acoplar o deploy dos dois.

   Gramatica do desenho, que e a da landing:
     - raio ZERO em tudo; regua e moldura de 2px
     - alinhamento a esquerda, nunca centralizado
     - vermelho como acento pontual, nunca como fundo de area
     - titulo 800 com tracking negativo, entrando por mascara
   ============================================================ */

/* CLARA e FIXA (decisao de 04/08/2026, por cima da 5d escura): a mesma luz
   das paginas de entrada do produto — quem vem de /entrar nao muda de mundo.
   Continua nao seguindo preferencia de ninguem: nao ha sessao aqui, e a
   tela que "adivinha" o modo abre clara num computador e escura no outro.
   Fixa, ela e assinatura. */
:root {
  --gf-bg: #f3f2f2;
  --gf-surface: #ffffff;
  --gf-text: #201e1d;
  --gf-accent: #dd2b0f;
  --gf-accent-600: #c22405;
  --gf-accent-700: #ae1800;
  /* erro nao e acento: aviso de credencial e semantica de perigo, e
     continua vermelho mesmo com a marca azul */
  --gf-erro: #dc2626;
  --gf-erro-escuro: #b91c1c;
  --gf-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --gf-suave: color-mix(in srgb, #201e1d 62%, transparent);
  --gf-campo: #f4f3f3;

  --gf-edge: clamp(20px, 5vw, 72px);
  --gf-wrap: 1260px;
  --gf-altura-nav: 66px;

  /* a mesma curva de saida da landing: sai rapido, assenta devagar */
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--gf-bg);
  color: var(--gf-text);
  /* Archivo e a familia da landing. O fallback nao e enfeite: se a fonte nao
     chegar, a pagina cai numa grotesca do sistema e continua legivel — login
     nao pode depender de rede de terceiro para funcionar. */
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2 {
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
}

/* ---- estrutura ---- */

.gf-wrap {
  width: 100%;
  max-width: var(--gf-wrap);
  margin: 0 auto;
  padding-left: var(--gf-edge);
  padding-right: var(--gf-edge);
}

.gf-nav {
  height: var(--gf-altura-nav);
  border-bottom: 2px solid var(--gf-divider);
  display: flex;
  align-items: center;
}

.gf-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.gf-quadrado {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--gf-accent);
}

.gf-palco {
  min-height: calc(100vh - var(--gf-altura-nav));
  display: flex;
  align-items: center;
  padding: clamp(32px, 7vh, 88px) 0;
}

/* Duas colunas: o cartaz a esquerda, o formulario a direita.
   A da direita e mais estreita de proposito — o formulario nao deve
   crescer com a tela, ele tem largura de leitura. */
.gf-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  width: 100%;
}

@media (max-width: 900px) {
  .gf-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .gf-palco { align-items: flex-start; padding-top: 40px; }
}

/* ---- cartaz ---- */

.gf-kicker {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gf-accent-700);
  margin-bottom: 18px;
}

.gf-titulo {
  font-size: clamp(34px, 4.2vw, 46px);
}

/* Cada linha do titulo mora numa mascara e sobe de baixo. O par
   padding/margin de .09em existe para o `overflow: hidden` nao decapitar as
   descidas — o "g" de "Gestao". */
.gf-mascara {
  display: block;
  overflow: hidden;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}

.gf-mascara > span { display: block; }

/* A segunda linha do titulo e o identificador do ambiente. Vem em vermelho e
   com quebra forcada: e a informacao de seguranca desta tela — saber em QUAL
   conta se esta entrando antes de digitar a senha. */
.gf-alvo {
  color: var(--gf-accent);
  overflow-wrap: anywhere;
}

.gf-regua {
  height: 0;
  border: 0;
  border-top: 2px solid var(--gf-divider);
  margin: 28px 0 0;
  transform-origin: left center;
}

.gf-legenda {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 13.5px;
  color: var(--gf-suave);
}

/* ---- formulario ---- */

/* Moldura de 2px, como os blocos de acao da landing. O deslocamento negativo
   no desktop faz o cartao invadir a coluna do titulo: e o unico elemento que
   quebra a grade, e e ele que tira a tela do lugar-comum "caixa centralizada". */
/* Cartao MACIO, e nao moldura de 2px (tela 5d do Respiro): no escuro o que
   separa e profundidade — fundo um degrau acima do palco, canto de 16 e um
   fio quase invisivel. A moldura dura com a barra de acento era o desenho
   Modernist antigo. */
.gf-cartao {
  position: relative;
  background: var(--gf-surface);
  border: 1px solid color-mix(in srgb, var(--gf-text) 9%, transparent);
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 24px 60px -38px rgb(24 20 18 / 0.35);
}

@media (min-width: 901px) {
  .gf-cartao { margin-left: -32px; }
}

.gf-cartao h2 {
  font-size: 18px;
  margin-bottom: 4px;
}

.gf-cartao-contexto {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--gf-suave);
}

.gf-campo { margin-bottom: 14px; }

.gf-campo label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gf-suave);
  margin-bottom: 7px;
}

/* a linha do rotulo com um link a direita — "Senha ....... Esqueci minha
   senha", como a referencia poe */
/* campo com icone dentro, como a 5c desenha */
.gf-campo-icone { position: relative; }

.gf-campo-icone > svg {
  position: absolute;
  left: 13px;
  top: 50%;
  translate: 0 -50%;
  color: color-mix(in srgb, var(--gf-text) 45%, transparent);
  pointer-events: none;
}

.gf-campo-icone .gf-input { padding-left: 40px; }

.gf-campo-icone .gf-input-com-olho { padding-right: 46px; }

/* o botao-olho da senha */
.gf-olho {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--gf-text) 45%, transparent);
  cursor: pointer;
}

.gf-olho:hover { color: var(--gf-text); }

.gf-olho[data-visivel="sim"] .gf-olho-ver { display: none; }
.gf-olho[data-visivel="nao"] .gf-olho-esconder { display: none; }

.gf-campo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.gf-campo-linha .gf-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--gf-accent-700);
  text-decoration: none;
}

.gf-campo-linha .gf-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.gf-input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  font-family: inherit;
  font-size: 14px;
  color: var(--gf-text);
  caret-color: var(--gf-accent);
  background: var(--gf-campo);
  border: 1.5px solid color-mix(in srgb, var(--gf-text) 14%, transparent);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

.gf-input:hover { border-color: color-mix(in srgb, var(--gf-text) 55%, transparent); }

/* Foco marcado por DUAS coisas — borda e traco inferior — e nao so por cor:
   num campo vermelho sobre bege, "so cor" e o tipo de sinal que desaparece
   para quem nao distingue o vermelho. */
.gf-input:focus {
  outline: none;
  border-color: var(--gf-accent-600);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gf-accent) 18%, transparent);
}

.gf-input::placeholder { color: color-mix(in srgb, var(--gf-text) 38%, transparent); }

/* ---- a faixa do identificador (cartaz da 5d) ---- */

.gf-faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--gf-text) 9%, transparent);
  border-radius: 12px;
  background: var(--gf-surface);
}

.gf-faixa-rotulo {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gf-suave);
}

.gf-faixa-alvo {
  margin: 0;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--gf-accent-600);
  overflow-wrap: anywhere;
}

/* o chip do canto do topo: diz DE QUEM e esta tela */
.gf-nav-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--gf-text) 14%, transparent);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gf-suave);
}

.gf-nav-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
}

/* ---- botao ---- */

.gf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  margin-top: 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  background: var(--gf-accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.gf-btn:hover { background: var(--gf-accent-600); }
.gf-btn:active { background: var(--gf-accent-700); }
.gf-btn:focus-visible { outline: 2px solid var(--gf-text); outline-offset: 3px; }

.gf-btn svg {
  flex: none;
  transition: transform 0.25s var(--ease-saida);
}

.gf-btn:hover svg { transform: translateX(4px); }

/* botao secundario, da tela de erro */
.gf-btn-contorno {
  background: transparent;
  color: var(--gf-text);
  border: 2px solid var(--gf-text);
}

.gf-btn-contorno:hover { background: color-mix(in srgb, var(--gf-text) 8%, transparent); }
.gf-btn-contorno:active { background: color-mix(in srgb, var(--gf-text) 15%, transparent); }

.gf-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--gf-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gf-link:hover { color: var(--gf-text); }

/* ---- avisos ---- */

.gf-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 22px;
  padding: 12px 14px;
  border: 2px solid var(--gf-divider);
  font-size: 13.5px;
}

.gf-aviso-erro {
  border-color: var(--gf-accent);
  color: var(--gf-accent-700);
}

.gf-aviso .gf-quadrado {
  width: 10px;
  height: 10px;
  margin-top: 6px;
}

.gf-aviso-erro .gf-quadrado { background: var(--gf-accent); }

/* ---- a caixinha "nao sou um robo" (captcha proprio) ----
   Marcacao nossa, e nao o web component do ALTCHA: custom element traz a
   propria folha e nao acompanha esta. Ver templates/login.html. */
.gf-captcha {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1.5px solid color-mix(in srgb, var(--gf-text) 14%, transparent);
  border-radius: 12px;
  background: var(--gf-surface);
  font: inherit;
  font-size: 12.5px;
  color: var(--gf-text);
  text-align: left;
  cursor: pointer;
}

.gf-captcha[data-estado="pendente"]:hover { border-color: var(--gf-accent); }

/* marcada ou contando, o cursor deixa de convidar ao clique */
.gf-captcha[data-estado="pronto"],
.gf-captcha[data-estado="verificando"] { cursor: default; }

/* a caixa em si */
.gf-captcha-caixa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--gf-divider);
  color: #fff;
}

/* vazia enquanto pendente; o giro so existe durante a conta */
.gf-captcha-giro { display: none; }
.gf-captcha[data-estado="verificando"] .gf-captcha-giro {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--gf-divider);
  border-top-color: var(--gf-accent);
  border-radius: 50%;
  animation: gf-girar 0.7s linear infinite;
}

.gf-captcha-certo { display: none; }
.gf-captcha[data-estado="pronto"] .gf-captcha-caixa {
  border-color: var(--gf-accent);
  background: var(--gf-accent);
}
.gf-captcha[data-estado="pronto"] .gf-captcha-certo { display: block; }

.gf-captcha[data-estado="falhou"] {
  border-color: var(--gf-accent);
  color: var(--gf-accent-700);
}
.gf-captcha[data-estado="falhou"] .gf-captcha-caixa { border-color: var(--gf-accent); }

@keyframes gf-girar { to { transform: rotate(360deg); } }

/* quem pediu menos movimento no sistema nao ve o giro — o estado continua
   legivel pelo texto ao lado, que e o que de fato informa */
@media (prefers-reduced-motion: reduce) {
  .gf-captcha[data-estado="verificando"] .gf-captcha-giro { animation: none; }
}

/* ---- pagina de erro ---- */

.gf-status {
  font-size: clamp(96px, 18vw, 200px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--gf-accent);
}

/* o cartao da tela de erro nao tem titulo; a explicacao e o conteudo dele,
   entao ela ganha o corpo que a legenda do login nao precisa ter */
.gf-cartao-detalhe {
  margin: 0;
  font-size: 15.5px;
  color: var(--gf-suave);
}

/* menor que o titulo do login: aqui quem carrega o peso e o numero acima */
.gf-erro-titulo {
  font-size: clamp(30px, 4.4vw, 54px);
  margin-top: 24px;
}

.gf-erro-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.gf-erro-acoes .gf-btn { width: auto; padding: 0 26px; margin-top: 0; }

/* ============================================================
   MOVIMENTO
   Uma orquestracao de entrada, escalonada, e nada depois disso.
   O titulo NUNCA parte de opacity 0: o Chrome ignora elemento
   transparente ao medir LCP, e um fade de meio segundo aqui
   custaria meio segundo de LCP. Ele so translada.
   ============================================================ */

.gf-sobe {
  animation: gf-sobe 950ms var(--ease-saida) both;
  animation-delay: var(--atraso, 0ms);
}

.gf-surge {
  opacity: 0;
  animation: gf-surge 900ms var(--ease-saida) forwards;
  animation-delay: var(--atraso, 0ms);
}

.gf-estica {
  transform: scaleX(0);
  animation: gf-estica 900ms var(--ease-saida) forwards;
  animation-delay: var(--atraso, 0ms);
}

@keyframes gf-sobe {
  from { transform: translateY(108%); }
  to { transform: translateY(0); }
}

@keyframes gf-surge {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes gf-estica {
  to { transform: scaleX(1); }
}

/* Quem pediu menos movimento ve a tela pronta, e nao a tela devagar:
   reduzir a duracao ainda entregaria o deslocamento que causa o mal-estar. */
@media (prefers-reduced-motion: reduce) {
  .gf-sobe,
  .gf-surge,
  .gf-estica {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .gf-btn svg { transition: none; }
}