/* Tema do login do .MAQ.
   ─────────────────────────────────────────────────────────────────────────────
   O bloco `:root` abaixo e' EXCERTO VERBATIM de RatApp/html/tema.css (o design
   system Ergui, tokens do CRM em vanilla, hoje em CRM, RatApp e PreventivasApp).
   Foi extraido por script, nao redigitado.

   POR QUE EXCERTO E NAO `@import 'tema.css'`: esta tela carrega SEM sessao, e
   servir `tema.css` como arquivo proprio obrigaria a abrir a allowlist
   pre-autenticacao do nginx (`location ~ ^/(login\.js|tema-login\.css|icon-...)$`)
   — mais um arquivo publico sem auth, e duas asseracoes novas no
   tests/nginx_security_test.sh. O que impede deriva nao e' o arquivo separado, e'
   a trava em scripts/com_release_gate.mjs, que compara este bloco com o do tema
   e FALHA se divergir.

   ⚠️ NAO EDITAR OS TOKENS A MAO. Identidade se muda no tema, nos quatro lugares.
   A versao anterior deste arquivo jurava no comentario que os tokens eram "iguais
   aos do app" e eram um hibrido de tres origens (--ergui do app, --ink do tema,
   --linha e --apagado de lugar nenhum). Comentario que ninguem podia conferir foi
   a causa-raiz; por isso agora ha uma trava, e nao uma promessa.

   ⚠️ A COSTURA E' CONHECIDA E DELIBERADA (decisao do dono, 05/09/2026): esta tela
   fala o sistema Ergui/CRM (cartao arredondado, sombra, #f7ac00) e o app que ela
   abre fala o sistema client-facing do mockup_portfolio_campo/DESIGN.md
   (superficies planas, Arial, #f5a800). Ver a excecao registrada lá.

   Work Sans NAO e' carregada aqui: seriam 50 KB a mais na superficie
   pre-autenticacao, um flash de fallback na primeira tela e uma costura mais
   forte com o Arial do app. Sem ela o `--sans` cai em ui-sans-serif/system-ui,
   que no iPhone e' a mesma SF que esta tela ja usava. */

:root {
  /* superficie */
  --bg:          #f6f6f5;
  --surface:     #ffffff;
  --surface-2:   #fafafa;          /* cabecalho de tabela, rodape de painel */

  /* tinta — .35/.45 do CRM NAO sao usados em texto (ver cabecalho) */
  --ink:         #1b1a19;
  --ink-2:       rgba(0,0,0,.62);  /* 6,2:1 — rotulo, metadado */
  --ink-3:       rgba(0,0,0,.55);  /* 4,8:1 — piso AA, texto terciario */
  --faint:       rgba(0,0,0,.38);  /* SO decorativo: glifo, separador, disabled */

  /* marca — #f7ac00 da 1,9:1 sobre branco: nunca como cor de texto */
  --brand:       #f7ac00;
  --brand-ink:   #b45309;          /* 5,0:1 — o "amber-700" que o CRM ja usa */
  --brand-15:    rgba(247,172,0,.15);
  --brand-20:    rgba(247,172,0,.20);
  --brand-40:    rgba(247,172,0,.40);
  --brand-50:    rgba(247,172,0,.50);
  --ring:        rgba(247,172,0,.30);

  /* linhas */
  --line:        rgba(0,0,0,.10);
  --line-forte:  rgba(0,0,0,.15);
  --line-soft:   rgba(0,0,0,.05);
  --hover:       rgba(0,0,0,.05);

  /* semantica */
  --ok:      #059669;  --ok-ink:   #065f46;  --ok-bg:   #ecfdf5;  --ok-line:   #a7f3d0;
  --bad:     #dc2626;  --bad-ink:  #b91c1c;  --bad-bg:  #fef2f2;  --bad-line:  #fecaca;
  --info:    #2563eb;  --info-ink: #1d4ed8;  --info-bg: #eff6ff;  --info-line: #bfdbfe;

  /* forma — container 16, controle 12, micro 8, pill */
  --r-card: 16px;  --r-ctrl: 12px;  --r-mini: 8px;  --r-pill: 9999px;

  /* elevacao — card NAO tem sombra no CRM; so popover, drawer e modal */
  --sh-card:  0 1px 3px 0 rgb(0 0 0/.10), 0 1px 2px -1px rgb(0 0 0/.10);
  --sh-pop:   0 10px 15px -3px rgb(0 0 0/.10), 0 4px 6px -4px rgb(0 0 0/.10);
  --sh-modal: 0 20px 25px -5px rgb(0 0 0/.10), 0 8px 10px -6px rgb(0 0 0/.10);

  /* tipografia — Work Sans variavel, uma familia so (o CRM nao usa mono) */
  --sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-2xs: 11px;  --t-xs: 12px;  --t-sm: 13px;
  --t-base: 14px; --t-lg: 20px;  --t-xl: 24px;

  /* movimento */
  --ease: cubic-bezier(.22,1,.36,1);   /* ease-out-quint */
  --dur:  .18s;
}

/* ── Tela ─────────────────────────────────────────────────────────────────────
   Copia de RatApp/html/style.css:186-224 (#telaLogin + .login-*), para que as
   duas telas de login da casa sejam a mesma tela. */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
}

.entrada {
  width: 100%;
  max-width: 24rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);   /* o unico cartao com sombra, igual ao CRM */
  padding: 32px 28px;
  text-align: center;
}

.login-titulo {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
  white-space: nowrap;
}
/* `.m-e` e' o logotipo (".ERGUI"), decorativo — a WCAG 1.4.3 isenta marca. A
   metade que e' texto de verdade ("MAQ") fica em --ink. Mesmo par do RatApp. */
.login-titulo .m-e { color: var(--brand); }
.login-titulo .m-p { color: var(--ink); }

.login-subtitulo {
  margin: 6px 0 28px;
  font-size: var(--t-base);
  color: var(--ink-3);
}

/* O botao aqui dentro e' um iframe do Google Identity Services: nao da para
   estilizar. Fica o widget padrao, que e' o que o time ja reconhece. */
.botao-google { display: flex; justify-content: center; min-height: 44px; }

/* ── Aviso e recuperacao ──────────────────────────────────────────────────────
   Vieram de incidente, nao de gosto: em 25/08/2026 um aparelho ficou sem NENHUM
   caminho de volta ao login. Nao remover. */

.aviso {
  margin: 18px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--bad-line);
  border-radius: var(--r-mini);
  background: var(--bad-bg);
  color: var(--bad-ink);
  font-size: var(--t-sm);
  text-align: left;
}
.aviso.espera {
  border-color: var(--info-line);
  background: var(--info-bg);
  color: var(--info-ink);
}

.recuperacao {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 14px; margin-top: 12px;
}
.recuperacao[hidden] { display: none; }
.recuperacao button,
.recuperacao a {
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line-forte); border-radius: var(--r-ctrl);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.recuperacao button:hover,
.recuperacao a:hover { background: var(--hover); }
.recuperacao button:focus-visible,
.recuperacao a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.rodape {
  margin: 26px 0 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.5;
}