/* ------------------------------------------------------------------------
   As telas do servidor de autorizacao no desenho 3b (12/08/2026).

   Portado do HTML de referencia do Kesley. Fonte: Poppins — a MESMA do
   sistema interno no estilo padrao (moderno); o Archivo ficou so na landing.
   Os icones sao SVG inline no proprio template: login nao ganha uma fonte de
   icones inteira por meia duzia de desenhos.

   Folha propria, e nao a gf.css da landing: as telas deste servidor agora
   tem cara propria, e remendar a folha da landing faria as duas envelhecerem
   grudadas. O captcha e o olho da senha continuam com os MESMOS ids — o
   script do template nao mudou.
   ------------------------------------------------------------------------ */

:root {
  /* fundo 3b: cinza-azulado, sem nenhum bege */
  --bg:          #eceef2;
  --bg-top:      #f7f8fa;
  --surface:     #ffffff;
  --field-bg:    #f8f9fb;

  /* marca */
  --brand:       #d92d11;
  --brand-dark:  #b8240c;
  --brand-tint:  #fbe9e5;
  --brand-soft:  #fef3f2;
  --brand-line:  #fbd8d2;
  --brand-ink:   #97240d;
  --brand-ink-2: #b7503c;

  /* texto e linhas */
  --ink:      #131620;
  --ink-2:    #454c5a;
  --ink-3:    #626a7a;
  --ink-4:    #78808f;
  --ink-5:    #98a0b0;
  --icon:     #a8b0bf;
  --line:     #dfe3ea;
  --line-2:   #e4e8ef;

  --ok: #16a34a;
  --r-card: 18px;
  --r-field: 11px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
  position: relative; overflow-x: hidden;
}

/* camadas de fundo — o que tira o "chapado" */
.bg-fade, .bg-halo { position: fixed; pointer-events: none; z-index: 0; }
.bg-fade {
  left: 0; right: 0; top: 0; height: 520px;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%);
}
.bg-halo {
  right: -120px; top: 120px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 45, 17, .07) 0%, rgba(217, 45, 17, 0) 68%);
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
svg { flex: none; }

/* ---------- header ---------- */
.site-header {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 34px; padding: 22px 56px;
  border-bottom: 1px solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.logo-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--brand); flex: none; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; color: var(--ink-3); }
.site-nav a { color: inherit; }
.site-nav a:hover { color: var(--ink); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.btn {
  border: 0; border-radius: 99px; padding: 9px 18px;
  font: 600 14px Poppins, sans-serif; cursor: pointer;
  transition: background .14s, border-color .14s;
}
.btn--outline { background: none; border: 1px solid #d3d9e2; color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-dark); color: #fff; }

/* ---------- corpo ---------- */
.login-main {
  position: relative; z-index: 1; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 80px;
  padding: 68px 56px 40px; align-items: start;
  max-width: 1440px; width: 100%; margin: 0 auto;
}

.hero { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--brand); flex: none; }
.hero h1 {
  margin: 0; font-size: clamp(44px, 5.4vw, 78px);
  line-height: .95; font-weight: 700; letter-spacing: -.035em;
}
.hero > p {
  margin: 0; max-width: 450px; font-size: 14.5px; line-height: 1.65;
  color: var(--ink-3); text-wrap: pretty;
}

.tenant {
  display: flex; align-items: center; gap: 20px; max-width: 540px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 18px 22px; box-shadow: 0 2px 14px rgba(19, 22, 32, .05);
}
.tenant-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-5);
}
.tenant-name { font-size: 25px; font-weight: 700; color: var(--brand); letter-spacing: -.02em; }
.tenant-switch {
  margin-left: auto; flex: none; font-size: 13.5px; font-weight: 600;
  color: var(--ink); border-bottom: 1.5px solid var(--ink);
}
.tenant-switch:hover { color: var(--brand); border-color: var(--brand); }

.trust {
  display: flex; flex-wrap: wrap; gap: 22px; max-width: 540px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.trust div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-4); }
.trust svg { color: var(--ink-5); }
.trust .is-ok { color: var(--ok); }

/* ---------- cartao ---------- */
.card {
  background: var(--surface); border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 30px 60px -22px rgba(19, 22, 32, .30), 0 2px 6px rgba(19, 22, 32, .06);
}
.card-rule { height: 4px; background: var(--brand); }
.card-body { padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 18px; }
.card-title { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.card-sub { font-size: 13.5px; color: var(--ink-4); margin-top: 5px; }

/* avisos: o de sessao encerrada e os de erro usam a mesma moldura */
.notice {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: var(--r-field); padding: 13px 14px;
}
.notice svg { color: var(--brand); margin-top: 1px; }
.notice strong { display: block; font-size: 13px; font-weight: 600; color: var(--brand-ink); }
.notice span { font-size: 12.5px; line-height: 1.45; color: var(--brand-ink-2); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field-head { display: flex; align-items: baseline; }
.field-label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.field-link { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--brand); }
.input {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-field); background: var(--field-bg);
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.input > svg { color: var(--icon); }
.input input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: 400 14px Poppins, sans-serif; color: var(--ink);
}
.input input::placeholder { color: var(--ink-5); }
.input:focus-within {
  background: #fff; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(19, 22, 32, .06), inset 0 0 0 .5px var(--ink);
}
.input .toggle {
  border: 0; background: none; padding: 0; margin-left: auto;
  cursor: pointer; color: var(--icon); display: grid; place-items: center;
}
.input .toggle:hover { color: var(--ink-3); }
/* o olho alterna os dois desenhos pelo estado, como sempre fez */
.toggle[data-visivel="nao"] .quando-visivel { display: none; }
.toggle[data-visivel="sim"] .quando-oculto { display: none; }

/* a caixinha "nao sou um robo" — protocolo ALTCHA, aparencia da casa */
.captcha {
  display: flex; align-items: center; gap: 9px;
  border: 0; background: none; padding: 0;
  font: 400 13px Poppins, sans-serif; color: var(--ink-2);
  cursor: pointer; user-select: none; text-align: left;
}
.captcha-caixa {
  width: 17px; height: 17px; border: 1.5px solid #c6ccd6; border-radius: 5px;
  flex: none; display: grid; place-items: center; position: relative;
}
.captcha-giro {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--brand-line); border-top-color: var(--brand);
  display: none; animation: captcha-gira .7s linear infinite;
}
@keyframes captcha-gira { to { transform: rotate(360deg); } }
.captcha-certo { display: none; color: #fff; }
.captcha[data-estado="verificando"] .captcha-giro { display: block; }
.captcha[data-estado="pronto"] .captcha-caixa { background: var(--brand); border-color: var(--brand); }
.captcha[data-estado="pronto"] .captcha-certo { display: block; }
.captcha[data-estado="falhou"] .captcha-caixa { border-color: var(--brand); }
.captcha[data-estado="falhou"] { color: var(--brand-ink); }

.submit {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; border: 0; border-radius: 12px; background: var(--brand); color: #fff;
  font: 600 15px Poppins, sans-serif; cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 45, 17, .32);
  transition: background .14s, transform .1s;
}
.submit:hover { background: var(--brand-dark); }
.submit:active { transform: translateY(1px); }
.card-foot { text-align: center; font-size: 12.5px; color: var(--ink-4); }
.card-foot a { font-weight: 600; }

/* o formulario empilha com o mesmo respiro do restante do cartao */
.card-body form { display: flex; flex-direction: column; gap: 18px; }

/* ---------- erro.html: o numero em corpo de cartaz ---------- */
.status-erro {
  margin: 0; font-size: clamp(80px, 12vw, 150px); line-height: .9;
  font-weight: 700; letter-spacing: -.035em; color: var(--ink);
}

/* ---------- footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; padding: 20px 56px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-4);
}
.site-footer .logo-dot { width: 8px; height: 8px; }
.footer-links { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.footer-links a { color: inherit; }
.footer-links a:hover { color: var(--ink); }
.lang {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .08em; color: var(--ink-5); text-transform: uppercase;
}

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .login-main { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 48px 32px; }
  .card { max-width: 480px; }
  .site-nav { display: none; }
}
@media (max-width: 680px) {
  .site-header { padding: 16px 20px; gap: 12px; }
  .header-actions .btn--outline { display: none; }
  .login-main { padding: 20px 20px 28px; }
  .hero { padding-top: 0; }
  .site-footer { padding: 18px 20px; flex-wrap: wrap; }
  .footer-links { gap: 14px; }
  /* 16px no campo: abaixo disso o iPhone da zoom ao focar — a mesma regra
     que o sistema interno aplica desde 10/08 */
  .input input { font-size: 16px; }

  /* ------------------------------------------------------------------
     NO CELULAR, O FORMULARIO VEM PRIMEIRO.

     A pagina empilha hero (titulo grande, selos de confianca) e depois o
     cartao. Num telefone isso obriga a ROLAR a tela inteira para chegar ao
     campo de senha — quem veio entrar tem de trabalhar antes de poder
     entrar, e a primeira coisa que a pessoa faz no produto e uma tarefa
     que ninguem pediu.

     `order` inverte so a apresentacao: a ordem do HTML continua com o
     titulo antes, que e o que o leitor de tela e o buscador leem. Trocar a
     ordem no proprio HTML resolveria o celular e pioraria os dois.

     O texto NAO some — ele desce. Quem chega pelo link de um convite ainda
     precisa saber em que sistema esta entrando; o que muda e que isso
     deixa de ficar entre a pessoa e o teclado.
     ------------------------------------------------------------------ */
  /* `align-items: stretch` REPETIDO aqui, e nao herdado: a regra base declara
     `align-items: start` para o GRID, onde ela alinha no eixo vertical e nao
     mexe na largura. Ao trocar para flex-column o eixo transversal vira o
     horizontal, e o mesmo `start` passa a significar "nao estique" — o cartao
     encolhe para a largura do proprio conteudo, que deu 450px num telefone de
     375px e criou rolagem lateral. Medido, nao suposto. */
  .login-main {
    display: flex; flex-direction: column; gap: 24px; align-items: stretch;
  }
  .card { order: 1; margin: 0; }
  .hero { order: 2; gap: 16px; }

  /* o essencial do hero fica: em que cliente se esta entrando. O resto e
     apresentacao, e apresentacao nao disputa espaco com o teclado */
  .hero .eyebrow,
  .hero > p,
  .trust { display: none; }

  .hero h1 { font-size: 22px; line-height: 1.25; }
}

/* Telefone baixo (o iPhone SE tem 667px de altura). Aqui o alvo nao e "caber
   o formulario", que ja cabe: e a pagina INTEIRA nao rolar. Medido no
   Chrome sem tela a 375x667 — antes destas linhas o documento tinha 782px de
   altura, e sobrava rolagem so para o rodape e o bloco do cliente. */
@media (max-width: 680px) and (max-height: 720px) {
  .hero h1 { display: none; }
  .login-main { gap: 16px; padding: 14px 20px 16px; }
  .card-body { padding: 24px 22px 26px; gap: 14px; }
  .site-header { padding: 12px 20px; }
  /* os links legais continuam a um toque em qualquer outra tela; aqui eles so
     empurrariam para fora da vista o "voce esta entrando em", que e a
     informacao que impede alguem de digitar a senha no cliente errado */
  .site-footer { display: none; }
}