/* ┌───────────────────────────────────────────────────────────────────────┐
   │  PROIBIDO EDITAR — este arquivo é do DESIGN SYSTEM AGRES              │
   │  Cópia sincronizada: o próximo ds:sync sobrescreve.                   │
   │  Precisa mudar? Fale com o Marketing (Ricardo Bonin).                 │
   └───────────────────────────────────────────────────────────────────────┘

   TELA DE LOGIN — duas colunas: capa de marca à esquerda, ação à direita.

   POR QUE EXISTE (02/10/2026)

   Nove apps têm tela de login e pelo menos o GED copiou a da intranet inteira,
   com o gradiente azul junto. Quando o Ricardo pediu "tirar o azul, deixar
   cinza e pôr a logo da Tecomec", a correção teria de ser feita nove vezes —
   e as nove chances de errar são o que este arquivo existe para evitar.

   O desenho é o da intranet, aprovado em 02/10. O que está aqui NÃO é uma
   sugestão: cada valor abaixo que tem comentário saiu de um defeito medido.

   COMO USAR

   1. `.login-grid` no contêiner das duas colunas. Na intranet é o <body>;
      num app Next é a <div> da rota — por isso a regra é de CLASSE e não de
      elemento.
   2. A marcação está em TELA-DE-LOGIN.md, para copiar.
   3. Os tokens (`--ag-bg`, `--ag-text`, `--ag-charcoal-*`) vêm do
      `tokens.css`/`agres-barra.css`. Sem eles as reservas seguram, mas o tema
      escuro não acompanha.

   O QUE ESTE ARQUIVO NÃO FAZ

   Não estiliza o seu provedor de entrada. O botão é `.login-btn`, seja ele
   Microsoft, magic-link ou isoFarm. O `.ms-btn` continua valendo como apelido,
   porque é o nome que a intranet e os apps que copiaram dela já usam. */

/* O componente se basta: a tela de login costuma ser a ÚNICA página pública do
   app e às vezes nasce sem o reset global. Sem isto o `border: 1px` do botão
   fica FORA da largura — ele passou de 360x50 para 362x52 quando esta folha
   substituiu o <style> da intranet, que trazia o `box-sizing` no topo. Em app
   com Tailwind ou reset próprio, é redundante e inofensivo. */
.login-grid,
.login-grid *,
.login-grid *::before,
.login-grid *::after { box-sizing: border-box; }

.login-grid {
  --login-ctrl-topo: 18px;
  --login-ctrl-tam: 38px;

  /* ── OS TOKENS DE TEMA, com nome próprio ──────────────────────────────────
     Apontado pelo chat do FROTA em 02/10, e reproduzido aqui num iframe com
     esta folha e SEM o tokens.css: com `data-theme="dark"` ligado, TODOS os
     valores saíam idênticos ao claro — o painel ficava `rgb(247,249,252)`
     dentro de um app em tema escuro. A causa era minha: a folha lia `--ag-bg`,
     `--ag-surface`, `--ag-text`, `--ag-text-muted`, `--ag-text-subtle` e
     `--ag-border` com RESERVA CLARA. Um app Next não tem esses nomes, caía na
     reserva — e reserva não sabe de tema.

     A saída é a mesma da `agres-barra.css`: nome PRÓPRIO para cada um, que
     encadeia primeiro para o token do padrão (quem tem o tokens.css vence),
     depois para o nome que os apps Next usam, e só então para o literal. Um
     `--ag-bg: var(--ag-bg, …)` seria ciclo e não resolveria nada — é por isso
     que o nome tem de mudar.

     Conferido nos cinco apps Next (frotas, ged, export, suporte, crm): os
     quatro nomes deles são COR CHEIA, não triplete HSL, então servem direto
     numa propriedade de cor. */
  --ag-login-fundo:  var(--ag-bg, var(--background, #F7F9FC));
  --ag-login-super:  var(--ag-surface, var(--card, #FFFFFF));
  --ag-login-tinta:  var(--ag-text, var(--foreground, #08101A));
  /* ARMADILHA, trazida pelo chat do Export: eles ligaram `--ag-text-muted` ao
     `--muted` do app à mão, e faz sentido — em SETE dos oito apps Next o
     `--muted` é cor de TEXTO (#4a5566, ou o charcoal-500 no frota). Mas no
     avaliacao-rh ele é `oklch(0.97 0 0)`, QUASE BRANCO: ali vale o sentido do
     shadcn, onde `--muted` é fundo e quem é texto é `--muted-foreground`.
     Encadear para `--muted` daria texto quase branco sobre painel quase branco
     num dos oito. Então o degrau é o `--muted-foreground`, que tem sentido
     único — e o literal já é o mesmo #4A5566 que sete deles usam, de modo que
     ninguém perde nada. No app, ligar ao `--muted` continua certo onde ele é
     texto; o que o PADRÃO não pode é generalizar isso. */
  --ag-login-apoio:  var(--ag-text-muted, var(--muted-foreground, #4A5566));
  --ag-login-sutil:  var(--ag-text-subtle, var(--muted-foreground, #687588));
  --ag-login-linha:  var(--ag-border, var(--border, rgba(8, 16, 26, 0.1)));

  /* A FONTE — quatro degraus, e o terceiro veio do chat do Atendimento (02/10).
     Eles relataram a tela saindo em `system-ui`; a causa era estarem na 1.49.0,
     onde a reserva era literalmente `system-ui` e não passava por lugar nenhum.
     Mas a sugestão deles continua valendo para a 1.50.0, por um motivo que eu
     não tinha visto:

     `"Agres Sans"` como literal só funciona para quem registra a face com ESSE
     nome — a intranet, via `agres-fontes.css`. App Next que usa `next/font`
     recebe um nome GERADO (`__agresSans_…`) e o expõe só na variável. O
     literal nunca casa ali.

     `--font-agres-sans` é o nome que os OITO apps Next usam (conferido por
     grep em whatsapp, ged, suporte, crm, export, frotas, midias e
     avaliacao-rh).

     A ORDEM DOS DOIS DEGRAUS IMPORTA, e eu a tinha errado. Pus o `--font-sans`
     primeiro, raciocinando que onde ele existe já é a pilha completa. O chat do
     Atendimento mediu e mostrou o furo: **`@import "tailwindcss"` emite um
     `--font-sans` PADRÃO** — está no `theme.css` do pacote, uma pilha genérica
     de `-apple-system, BlinkMacSystemFont, …`. Conferido aqui no pacote e no
     CSS já construído do avaliacao-rh.

     Ou seja: em app Tailwind o `--font-sans` existe SEMPRE. Com ele primeiro, o
     degrau do `--font-agres-sans` nunca era alcançado, e um app que esquecesse
     de sobrescrever o `--font-sans` cairia na fonte do sistema com a Agres Sans
     definida ali do lado. Hoje os oito sobrescrevem — então funcionava por
     acaso, não por construção.

     O nome ESPECÍFICO vem antes do genérico: `--font-agres-sans` só existe onde
     o `next/font` pôs a Agres Sans; `--font-sans` existe em todo app Tailwind,
     valendo o que valer.

     (E a pergunta que eu tinha deixado em aberto tem resposta: `@theme inline`
     EMITE a propriedade no `:root` — medido pelo Atendimento no Tailwind 4.3.3,
     inclusive para variável que nenhuma classe usa.)

     As reservas genéricas ficam FORA do `var()`, na pilha: assim valem mesmo
     quando um dos degraus resolve e a face não carrega. */
  --ag-login-fonte:  var(--ag-font-body, var(--font-agres-sans, var(--font-sans, "Agres Sans"))), Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ag-login-titulo: var(--ag-font-heading, var(--font-heading, var(--ag-login-fonte)));

  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  font-family: var(--ag-login-fonte);
  color: var(--ag-login-tinta);
  background: var(--ag-charcoal-900, #08101A);
}

/* ── Controles de idioma e tema, fixos no canto ──────────────────────────────
   ARMADILHA: eles são `fixed`, e o que está ATRÁS deles muda com a largura —
   no desktop é o painel (claro no tema claro), no celular é o hero (escuro
   nos dois temas). Brancos fixos, como nasceram, davam 1,05:1 contra o painel
   claro: invisíveis. Aqui seguem o tema, e a media query de 820px devolve o
   branco, onde o fundo volta a ser o hero. Medido depois: 12,03 no claro,
   8,09 no escuro, 10,45 sobre o hero. */
.login-grid .login-controls {
  position: fixed; top: var(--login-ctrl-topo); right: 18px; z-index: 5;
  display: inline-flex; align-items: center; gap: var(--ag-sp-2, 8px);
}
.login-grid .login-controls .hdr-circle {
  width: var(--login-ctrl-tam); height: var(--login-ctrl-tam);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ag-radius-full, 999px);
  border: 1px solid var(--ag-login-linha);
  background: var(--ag-login-super);
  color: var(--ag-login-apoio);
  font: inherit; font-size: var(--ag-text-xs, 12px); font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--ag-transition, .18s), border-color var(--ag-transition, .18s), background var(--ag-transition, .18s);
}
.login-grid .login-controls .hdr-circle:hover {
  color: var(--ag-login-tinta); border-color: var(--ag-login-sutil);
}
.login-grid .login-controls .hdr-circle svg { width: 18px; height: 18px; }

/* ── Esquerda: a capa de marca ───────────────────────────────────────────────
   GRAFITE, NÃO AZUL (Ricardo, 02/10). O que fazia a tela "ser azul" eram dois
   radiais coloridos (azul #1668AC e teal #1A8F84) sobre um gradiente #0A3F70.
   O realce agora é branco a 7%: escurece junto com o fundo em vez de virar
   outra cor. Os dois tons são os charcoal do padrão, os mesmos da barra
   escura — cinza daqui é este cinza, não um neutro novo. */
.login-grid .login-hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px; color: var(--ag-text-on-dark, #F7F9FC); overflow: hidden;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(150deg, var(--ag-charcoal-700, #1F2530) 0%, var(--ag-charcoal-900, #08101A) 62%);
}
.login-grid .login-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(160deg, #000, transparent 70%);
  pointer-events: none;
}

.login-grid .login-hero__top { position: relative; z-index: 1; }

/* A logo: 40px.
   Esteve em 52, por uma conta que eu fiz com o critério errado. "Tecomec
   Brasil S.A." é desenhado em TRÊS linhas empilhadas de 32px dentro da caixa
   de 112 — 0,286 da altura cada, medido no arquivo —, e eu dimensionei a logo
   para que ESSE texto ficasse confortável de ler. Dava 414px de largura, 52%
   do hero a 1440. O Ricardo olhou e disse: grande demais.

   O critério certo é outro: o nome da empresa dentro da marca não precisa ser
   LIDO, porque o rodapé já traz "© 2026 Tecomec Brasil S.A." como texto. O que
   precisa ler é o "tecomec". A 40px a logo mede 318px (40% do hero) e o
   wordmark continua folgado.

   O piso continua sendo 36 — abaixo disso o nome da empresa deixa de ser
   sequer uma textura reconhecível.

   `height` SEMPRE pareado com `width: auto`: o atributo width do HTML traz os
   891 reais do arquivo (contra o salto de layout) e, sem o `auto`, estica a
   imagem — foi o que aconteceu com a logo de um rodapé. */
.login-grid .login-hero__top img { height: 40px; width: auto; display: block; }

.login-grid .login-hero__center { position: relative; z-index: 1; max-width: 46ch; }
.login-grid .login-hero__center h1 {
  font-family: var(--ag-login-titulo);
  font-weight: 800; font-style: italic;
  font-size: clamp(2rem, 3vw + 1rem, 3.1rem); line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 16px;
}
.login-grid .login-hero__center p {
  font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0;
}
.login-grid .login-hero__foot {
  position: relative; z-index: 1; font-size: 12.5px; color: rgba(255,255,255,.55);
}

/* ── Direita: a ação ─────────────────────────────────────────────────────────
   A borda só trabalha no tema ESCURO: ali o hero (#08101A) e o painel
   (#0F151C) ficam a meio tom de distância e a divisão das colunas desaparece.
   No tema claro o painel é quase branco contra um hero quase preto — a borda
   existe e ninguém vê. */
.login-grid .login-panel {
  background: var(--ag-login-fundo);
  border-left: 1px solid var(--ag-login-linha);
  display: flex; align-items: center; justify-content: center; padding: 40px 28px;
}
.login-grid .login-card { width: 100%; max-width: 360px; text-align: center; }
.login-grid .login-card h2 {
  font-family: var(--ag-login-titulo);
  font-weight: 700; font-size: 22px; margin: 0 0 6px; color: var(--ag-login-tinta);
}
.login-grid .login-card p {
  margin: 0 0 28px; color: var(--ag-login-apoio); font-size: 14.5px; line-height: 1.5;
}

/* O botão. `--ag-text`/`--ag-bg` em vez de um grafite fixo: no tema escuro os
   dois trocam de lado sozinhos e o botão vira claro sobre fundo escuro. Um
   grafite fixo sumiria dentro do painel escuro.
   `.ms-btn` é apelido — ver o cabeçalho. */
.login-grid .login-btn,
.login-grid .ms-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 50px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--ag-login-fundo);
  background: var(--ag-login-tinta);
  border: 1px solid var(--ag-login-tinta);
  border-radius: var(--ag-radius-md, 10px); text-decoration: none; cursor: pointer;
  transition: background var(--ag-transition, .18s), border-color var(--ag-transition, .18s);
}
.login-grid .login-btn:hover,
.login-grid .ms-btn:hover {
  background: var(--ag-charcoal-700, #1F2530); border-color: var(--ag-charcoal-700, #1F2530);
}
.dark .login-grid .login-btn:hover,
.dark .login-grid .ms-btn:hover,
[data-theme="dark"] .login-grid .login-btn:hover,
[data-theme="dark"] .login-grid .ms-btn:hover {
  background: #fff; border-color: #fff;
}
/* o quadriculado da Microsoft precisa do branco atrás para não sumir no botão */
.login-grid .login-btn svg,
.login-grid .ms-btn svg {
  width: 20px; height: 20px; flex-shrink: 0; background: #fff; border-radius: 3px; padding: 1px;
}

/* `-muted`, não `-subtle`: a 12,5px o subtle (#687588) dá 4,44:1 contra o
   painel claro, um fio abaixo dos 4,5 que texto pequeno pede. */
.login-grid .login-note { margin-top: 18px; font-size: 12.5px; color: var(--ag-login-apoio); }

.login-grid :focus-visible { outline: 2px solid var(--ag-focus-ring, #1668AC); outline-offset: 2px; }

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .login-grid { grid-template-columns: 1fr; }

  /* O padding de cima é a altura dos controles fixos + 14 de folga. Com os 32
     de antes, a logo começava em 32 e os botões (fixos, de 18 a 56) cobriam
     41px do fim dela — justo o "Tecomec Brasil S.A." — a 375px. A saída é
     EMPURRAR a logo para baixo, não encolher: a 36 ela já está no limite de
     leitura. */
  .login-grid .login-hero {
    padding: calc(var(--login-ctrl-topo) + var(--login-ctrl-tam) + 14px) 28px 32px;
    gap: 28px; min-height: 46vh;
  }
  /* App que NÃO põe os controles não paga o espaço deles. O GED é o caso: não
     tem espanhol nem tema escuro, e pôr dois botões mortos na tela de entrada
     seria pior que não tê-los (decisão do chat deles, 02/10). Sem esta regra o
     hero reservava 70px de topo para nada.
     Especificidade: `:not(:has(.login-controls))` vale uma classe, então o
     seletor é 0,3,0 contra os 0,2,0 da regra acima — ganha sem depender da
     ordem. */
  .login-grid:not(:has(.login-controls)) .login-hero { padding-top: 32px; }

  /* a 375px sobram 319 de largura, e a logo mede 7,955 x a altura: o teto é 40.
     36 deixa folga para o 360 também. */
  .login-grid .login-hero__top img { height: 36px; }
  .login-grid .login-hero__foot { display: none; }
  /* uma coluna: a borda passa a ser de cima */
  .login-grid .login-panel {
    padding: 32px 24px 48px; border-left: 0; border-top: 1px solid var(--ag-login-linha);
  }
  /* aqui os controles estão sobre o HERO, escuro nos dois temas */
  .login-grid .login-controls .hdr-circle {
    border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85);
  }
  .login-grid .login-controls .hdr-circle:hover { color: #fff; border-color: rgba(255,255,255,.55); }
}

/* ── TEMA ESCURO: só os seis tokens ──────────────────────────────────────────
   Nada de regra nova — os mesmos nomes apontando para o outro lado. Quem tem o
   `tokens.css` do padrão não muda nada aqui: o `--ag-bg` dele já virou sozinho
   e o encadeamento continua preferindo o token do app. Isto serve a quem NÃO
   tem, que até agora via o painel claro com o tema escuro ligado.

   `.dark` e `[data-theme="dark"]`: os dois, como no `agres-barra.css`. Dos
   cinco apps Next, o frota usa `.dark`.

   O LIMITE, medido e deixado assim de propósito: se o app vira os tokens dele
   no `.dark` mas o seletor que chega é `data-theme="dark"` (ou o contrário),
   esta regra dispara e lê o `--background` do app, que naquele estado ainda é
   o claro — e o painel fica claro. A saída NÃO é parar de preferir o token do
   app: aí a tela de login usaria um cinza diferente do resto do app, que é
   pior e aparece sempre. **Use o mesmo sinal de tema que os seus tokens
   usam.** Se o seu app alterna por classe, alterne por classe. */
.dark .login-grid,
[data-theme="dark"] .login-grid {
  --ag-login-fundo: var(--ag-bg, var(--background, #0F151C));
  --ag-login-super: var(--ag-surface, var(--card, #1A2027));
  --ag-login-tinta: var(--ag-text, var(--foreground, #EAEEF2));
  --ag-login-apoio: var(--ag-text-muted, var(--muted-foreground, #AEB7C2));
  --ag-login-sutil: var(--ag-text-subtle, var(--muted-foreground, #7E8893));
  --ag-login-linha: var(--ag-border, var(--border, rgba(255, 255, 255, 0.10)));
}