/* ─────────────────────────────────────────────────────────────────────────
   Tela de login do FP — desenho de 20/08/2026.

   Folha AUTÔNOMA: login.html não estende web_base.html, então o style.css
   nem é carregado aqui. Nada nesta folha depende dele, e nada dela vaza para
   o app — as duas só se encontram no `.login-*` que não existe do outro lado.

   Por isso os valores são hex e não `var(--azul-medio)`: sem o style.css não
   há token nenhum definido. São os do handoff, que são os do manual.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* SEM paleta local. Cor, logo e nome da casa vêm de marca.css, carregado
     antes desta folha no <head> do login.html — é a fonte única das duas
     marcas, e é o que faz o toggle Sole/Mirante funcionar sem esta tela
     saber que ele existe.

     Ficou aqui só o que é DESTA tela. O que saiu, e por quê: a paleta
     inteira estava cravada em hex, e o `--action-primary` era #4A89B9,
     mais claro que o #3A6E97 do resto do app — inconsistência introduzida
     em 20/08 ao seguir o protótipo ao pé da letra. O #4A89B9 não sumiu:
     virou o HOVER, que é onde a casa manda clarear. */
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --duration-fast: 160ms;
  --ease: cubic-bezier(.2, 0, .2, 1);
  --transition-color: color var(--duration-fast) var(--ease),
                      background-color var(--duration-fast) var(--ease),
                      border-color var(--duration-fast) var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Mirante ────────────────────────────────────────────────────────────
   A classe vai no <html> (e não no <body>) porque o script que a aplica roda
   no <head>, antes de o <body> existir — é o que garante que a página já
   nasça na marca certa, sem piscar.

   Os valores são os mesmos de `body.ds-mirante` no style.css: verde #0F6E56
   e #085041 no lugar do azul, ocre #BA7517, neutros quentes. A exceção é
   --surface-sunken: o painel de marca não tem par exato na Mirante, então é
   o neutro quente equivalente ao #EBEEF2 da Sole (mesmo degrau de contraste
   contra o branco). Se o manual da Mirante tiver o valor exato, é trocar
   aqui e em lugar nenhum mais. */
/* O bloco `:root.ds-mirante` que existia aqui foi removido: a Mirante agora
   é declarada uma vez só, em marca.css. Era a duplicata que este pacote de
   tokens veio resolver. */

/* ── Seletor de marca ───────────────────────────────────────────────────
   Mesmo par de botões da topbar do app (.brandseg), aqui no alto da coluna
   do formulário. A escolha grava no MESMO localStorage['sole_brand'], então
   quem entra na Mirante continua na Mirante do outro lado do login. */
.login-marcas {
  position: absolute;
  top: 40px; right: 40px;
  display: inline-flex;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  overflow: hidden;
}
.login-marcas button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-color);
}
.login-marcas button:hover { color: var(--text-heading); }
.login-marcas button.on { background: var(--action-primary); color: #fff; }
.login-marcas button:focus-visible { outline: 2px solid var(--action-primary-hover); outline-offset: -2px; }


/* ── Duas colunas: marca à esquerda, formulário à direita ─────────────── */
.login-corpo {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 520px;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text-body);
  background: var(--surface-canvas);
}

.login-marca {
  background: var(--surface-sunken);
  border-right: 1px solid var(--border-hairline);
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
/* A logo, pelo token da marca. `background-size: contain` mantém a proporção
   do arquivo (5782x2020 = 2.86) sem depender de largura declarada — foi por
   largura que ela derreteu antes: .login-marca é flex em COLUNA, e o
   `align-items: stretch` padrão estica os filhos na LARGURA.

   48px de altura, e não os 30 do handoff: em 30 ela sumia num painel de
   830px (conferido em tela, 20/08). É o único número desta folha que
   diverge do pacote de design de propósito. */
.login-logo {
  align-self: flex-start;
  width: 138px;    /* 48 x 2.86 */
  height: 48px;
  background: var(--logo-marca) left center / contain no-repeat;
}

.login-marca h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--text-heading);
  max-width: 20ch;
  margin: 0;
}
.login-marca p {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 46ch;
}
.login-pe { font-size: 13px; color: var(--text-muted); max-width: 52ch; margin: 0; }
/* O nome vem do token, por `content` — não por JS depois do DOM pronto, que
   deixaria "Sole Capital" aparecer por um instante na tela da Mirante. */
.login-pe::after { content: var(--marca-nome); }

/* ── Coluna do formulário ─────────────────────────────────────────────── */
.login-form { position: relative; display: grid; place-items: center; padding: 40px; }
.login-caixa { width: 100%; max-width: 360px; }

.login-caixa h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text-heading);
  margin: 12px 0 32px;
}

/* O gesto tipográfico da marca, o mesmo da Home: 11px, caixa alta,
   entreletra larga. Serve de rótulo de seção E de rótulo de campo. */
.login-rotulo {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}
.login-caixa > .login-rotulo { color: var(--text-accent); }

.login-campos { display: grid; gap: 24px; }
.login-campo { display: grid; gap: 8px; }

/* Campo de linha única: sem caixa, só a base — igual ao da Home. */
.login-campo input {
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  background: transparent;
  padding: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--text-heading);
  outline: none;
  width: 100%;
  transition: var(--transition-color);
}
.login-campo input::placeholder { color: var(--text-muted); }
/* O autofill do Chrome pinta o campo de amarelo e ignora `background`.
   A sombra interna de 100px é o único jeito de cobri-lo sem !important. */
.login-campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-heading);
  box-shadow: 0 0 0 100px var(--surface-canvas) inset;
}

.login-btn {
  height: 40px;
  width: 100%;
  border-radius: 6px;
  background: var(--action-primary);
  border: 1px solid var(--action-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition-color), opacity var(--duration-fast) var(--ease);
}
.login-btn:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.login-btn:active { background: var(--action-primary-press); border-color: var(--action-primary-press); }
.login-btn:disabled { opacity: .6; cursor: default; }

.login-suporte { margin: 16px 0 0; font-size: 13px; color: var(--text-muted); }

/* ── Alerta de erro ───────────────────────────────────────────────────── */
/* Os campos NÃO ficam vermelhos: o alerta carrega o erro sozinho. Pintar os
   dois é dizer a mesma coisa duas vezes, e sugere que o campo está mal
   preenchido quando o problema pode ser só a senha. */
.login-alerta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 24px;
  border: 1px solid var(--border-alert-negative);
  border-radius: 6px;
  background: var(--surface-alert-negative);
}
.login-alerta-marca {
  width: 6px; height: 6px;
  margin-top: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--data-negative);
}
.login-alerta-titulo { font-size: 14px; font-weight: 500; color: var(--text-heading); }
.login-alerta-detalhe { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin-top: 2px; }

/* ── Foco visível, obrigatório em todo controle ─────────────────────────
   O handoff pede `outline: 2px` em tudo. No botão está certo. No campo, que
   é só uma linha de base, o retângulo aparece em volta de nada — um quadro
   azul flutuando sem caixa que o justifique. O foco continua obrigatório e
   continua ÓBVIO, só que na linguagem do campo: a linha engrossa e vai para
   o azul. Feito com box-shadow, e não com border-width, para o campo não
   pular 1px ao ganhar foco. */
.login-btn:focus-visible {
  outline: 2px solid var(--action-primary-hover);
  outline-offset: 2px;
}
.login-campo input:focus,
.login-campo input:focus-visible {
  outline: none;
  border-bottom-color: var(--action-primary);
  box-shadow: 0 1px 0 0 var(--action-primary);
}

/* ── Uma coluna: o painel de marca vira cabeçalho ─────────────────────── */
@media (max-width: 900px) {
  .login-corpo { grid-template-columns: 1fr; }
  .login-marca { padding: 32px; gap: 24px; }
  .login-marca h1 { font-size: 28px; }
  .login-marca p, .login-pe { display: none; }
  .login-form { padding: 32px; place-items: start center; }
  .login-marcas { position: static; margin-bottom: 24px; align-self: end; }
}