/* ============================================================
   Login — split screen: marca à esquerda, formulário à direita
   ============================================================ */

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--bg-primary);
}

/* ---------- Painel da marca ---------- */

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 56px;
  overflow: hidden;
  border-right: 1px solid var(--border-color);
  background:
    radial-gradient(ellipse 70% 55% at 10% 5%, rgba(76, 125, 240, 0.13), transparent 62%),
    radial-gradient(ellipse 55% 55% at 92% 88%, rgba(139, 92, 246, 0.09), transparent 62%),
    var(--bg-primary);
}

/* Grade pontilhada ao fundo. O traçado vem do <pattern> SVG no HTML; aqui só
   posicionamos, damos a cor (via currentColor) e apagamos as bordas com a
   máscara, para a grade não competir com o texto. */
.brand-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: #333c4c;
  opacity: 1;
  /* A máscara ancora a grade no rodapé, canto inferior direito do painel, e a
     dissolve subindo — assim ela preenche a área vazia abaixo dos domínios sem
     passar por trás do título nem do parágrafo. O núcleo opaco (até 26%) é o
     que dá presença; abaixo disso o pontilhado some no fundo. */
  mask-image: radial-gradient(ellipse 78% 62% at 88% 92%, #000 26%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 88% 92%, #000 26%, transparent 78%);
}

.brand-header,
.brand-body,
.brand-footer {
  position: relative;
  z-index: 1;
}

/* Vertical: símbolo sobre o logotipo. Dimensionado pela largura, não pela
   altura — o viewBox é 1998×833, então travar a altura deixaria a marca larga
   demais para o canto. */
.brand-logo {
  width: 132px;
  height: auto;
}

.brand-body {
  max-width: 580px;
}

.brand-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
}

.brand-title {
  font-size: clamp(32px, 4.1vw, 52px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 22px;
}

.brand-title strong {
  font-weight: 700;
}

.brand-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 500px;
  margin-bottom: 36px;
}

/* ---------- Capacidades ---------- */
/* Cards com ícone, lado a lado. O rótulo quebra em duas linhas por <br> no
   HTML, não por wrap automático: assim as quatro caixas mantêm a mesma altura
   independentemente do tamanho da palavra. */

.capacidade-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}

.capacidade-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 13px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  transition: background var(--transition-fast), transform var(--transition-fast);
}

/* Borda em degradê diagonal: verde Mobidash no canto inferior direito,
   dissolvendo para a borda neutra em direção ao topo-esquerda.

   O ::before desenha um retângulo com o gradiente e a máscara recorta o miolo,
   sobrando só o anel de 1px. A alternativa mais curta (duas camadas de fundo
   com padding-box/border-box) não serve aqui: como o preenchimento do card é
   translúcido, o gradiente apareceria por baixo dele e tingiria o card inteiro
   de verde, em vez de ficar só na borda. */
.capacidade-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* 162° em vez de 135°: o eixo do degradê fica quase vertical, então o verde
     se concentra na base e o topo permanece neutro. A leve inclinação é o que
     ainda leva um pouco de cor para a lateral direita. */
  background: linear-gradient(162deg,
    var(--border-color) 0%,
    var(--border-color) 54%,
    rgba(203, 244, 28, 0.14) 80%,
    rgba(203, 244, 28, 0.52) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: background var(--transition-fast);
}

.capacidade-item:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  transform: translateY(-2px);
}

.capacidade-item:hover::before {
  background: linear-gradient(162deg,
    var(--border-color-light) 0%,
    var(--border-color-light) 50%,
    rgba(203, 244, 28, 0.24) 78%,
    rgba(203, 244, 28, 0.72) 100%
  );
}

.capacidade-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}

.capacidade-icone svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capacidade-nome {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.brand-footer {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Painel do formulário ---------- */

.form-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* O padding extra à esquerda abre espaço para a faixa vertical sem empurrar
     o card para fora do centro óptico do painel. */
  padding: 44px 48px 44px 82px;
  /* Quase preto e neutro, em vez do --bg-secondary azulado. Valor local: só o
     painel de login escurece; sidebar e demais superfícies seguem iguais. */
  background: #08090a;
}

/* ---------- Faixa vertical ---------- */

.faixa-lateral {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 34px 0;
  /* Branco translúcido bem baixo: separa a faixa do fundo o suficiente para
     ela existir como coluna, sem virar um bloco à parte. */
  background: rgba(255, 255, 255, 0.022);
  border-right: 1px solid var(--border-color);
  pointer-events: none;
}

.faixa-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  flex-shrink: 0;
}

/* vertical-rl gira o texto; o rotate(180deg) inverte para ele ser lido de
   baixo para cima, que é a convenção para faixa em borda lateral. */
.faixa-texto {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.login-card {
  width: 100%;
  max-width: 384px;
}

/* Saudação + marca, no lugar do antigo "ACESSO RESTRITO". A marca substitui o
   título em texto, então ela é que carrega o peso visual do cabeçalho. */
.login-boas-vindas {
  margin-bottom: 16px;
}

.login-saudacao {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.login-logo {
  width: 100%;
  height: auto;
}

.login-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

/* ---------- Formulário ---------- */

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 9px;
}

.form-control {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control::placeholder {
  color: var(--text-muted);
}

/* ---------- Mostrar/ocultar senha ---------- */

.campo-com-olho {
  position: relative;
}

/* O padding à direita abre o vão para o botão. Sem ele a senha passaria por
   baixo do olho assim que ficasse longa. */
.campo-com-olho .form-control {
  padding-right: 44px;
}

.olho {
  position: absolute;
  top: 0;
  right: 0;
  /* Altura cheia do campo: o alvo de clique é a faixa inteira à direita, e não
     só o desenho de 18px. */
  height: 100%;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

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

.olho:focus-visible {
  outline: none;
  color: var(--accent-tinta);
}

.olho .icon {
  width: 18px;
  height: 18px;
}

/* Um ícone por estado, trocados por `aria-pressed` — o mesmo atributo que
   conta o estado para o leitor de tela governa o desenho, então não há como
   os dois discordarem. Pressionado = senha à mostra = ícone de ocultar. */
.olho .olho-ocultar,
.olho[aria-pressed="true"] .olho-ver {
  display: none;
}

.olho[aria-pressed="true"] .olho-ocultar {
  display: block;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-control.is-invalid {
  border-color: var(--danger);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.form-error {
  color: var(--danger-tinta);
  font-size: 12px;
  margin-top: 6px;
  min-height: 16px;
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 26px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-row input {
  accent-color: var(--accent);
  cursor: pointer;
}

/* Virou <button> quando ganhou função de verdade — antes era um <a href="#">
   que não levava a lugar nenhum. Botão traz consigo o estilo do navegador
   (fundo, borda, fonte própria), e as três primeiras linhas o desfazem para
   ele voltar a parecer o link discreto que sempre foi. */
.forgot-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.forgot-link:hover {
  color: var(--accent-tinta);
}

/* ---------- Recuperação de senha ---------- */
/* Divide o cartão com o formulário de entrada: um por vez, trocados pelo JS.
   Nada de posicionamento aqui — os dois ocupam o mesmo lugar no fluxo, e é o
   `hidden` que decide qual existe. */

.recuperar-texto {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* O aviso de enviado. Fica na cor de acento porque é a única confirmação que a
   pessoa recebe — o resultado de verdade chega por e-mail, e pode demorar. */
.recuperar-rot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-tinta);
}

.recuperar-rot .icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}

/* Saída discreta de propósito: ela concorre com o botão principal, e quem
   chegou até aqui quer enviar o link, não voltar. */
.voltar-login {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 9px;
  background: none;
  border: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.voltar-login:hover {
  color: var(--accent-tinta);
}

/* ---------- Botão ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 15px 20px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast), opacity var(--transition-fast);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 26px var(--accent-glow);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-block {
  width: 100%;
}

.btn-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

/* ---------- Rodapé do card ---------- */

.login-foot {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-secondary);
}

.login-version {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Responsivo ---------- */

@media (max-width: 1180px) {
  .brand-panel { padding: 36px 40px; }
  /* O 4º valor preserva o espaço da faixa vertical — usar o shorthand de dois
     valores aqui zeraria o padding-left da regra base e o card invadiria a
     faixa. */
  .form-panel { padding: 36px 32px 36px 70px; }
  /* Quatro colunas ficariam estreitas demais para o rótulo de duas linhas. */
  .capacidade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 400px; }
}

/* Abaixo de 900px o split empilha: marca vira cabeçalho compacto e o
   formulário assume o resto da tela. */
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }

  .brand-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 30px 26px 34px;
    gap: 24px;
  }

  .brand-waves { display: none; }
  .brand-title { font-size: clamp(26px, 7vw, 36px); margin-bottom: 16px; }
  .brand-text { margin-bottom: 22px; font-size: 13.5px; }
  .brand-footer { display: none; }

  /* Empilhado, a faixa não tem altura suficiente para o texto girado. */
  .faixa-lateral { display: none; }
  .form-panel { padding: 34px 26px 46px; }
  .login-card { max-width: 100%; }
  .brand-logo { width: 108px; }
  .login-saudacao { font-size: 30px; }
}

@media (max-width: 560px) {
  .capacidade-list { gap: 8px; max-width: 100%; }
  .capacidade-item { padding: 12px 11px; gap: 9px; }
  .capacidade-nome { font-size: 10px; }
}


/* ============================================================
   CELULAR — o formulário sobe para dentro da primeira tela
   ============================================================
   Medido numa tela de 375×812, antes desta regra: o botão "Entrar" ficava a
   999px do topo. Era preciso ROLAR 233px para vê-lo, numa página cuja função
   inteira é um botão. Num aparelho mais baixo — o iPhone SE tem 667px — a
   distância cresce.

   O painel da marca sozinho ocupava 490px, 60% da tela.

   A regra empilhada de 900px já existia e está certa para tablet. O que falta é
   admitir que em 640px a marca não é o assunto: quem abre esta página no
   celular veio entrar, não ler a proposta de valor. Ela continua ali, abaixo,
   para quem rolar.
   ============================================================ */

@media (max-width: 640px) {
  /* SAI O TEXTO LONGO e SAEM OS QUATRO CARTÕES de capacidade. São eles o volume
     — juntos passam de 300px. O logo e o título ficam: é o que identifica a
     plataforma, e cabe em pouco mais de 100px. */
  .brand-text,
  .capacidade-list { display: none; }

  .brand-panel {
    padding: 22px 22px 24px;
    gap: 14px;
  }

  .brand-title {
    font-size: clamp(22px, 6.4vw, 28px);
    margin-bottom: 0;
  }

  /* A saudação do cartão também encolhe: "Bem-vindo ao" mais o logo somavam
     mais que o título da marca logo acima, repetindo a mesma informação em
     dois tamanhos. */
  .login-card { padding-top: 22px; }
  .login-boas-vindas { margin-bottom: 14px; }
  .login-saudacao { font-size: 12px; }
  .login-logo { max-width: 190px; }
}

/* Aparelho BAIXO — a régua aqui é a altura, não a largura.
   Num iPhone SE (375×667) a regra acima ainda deixava o botão 45px abaixo da
   dobra. Largura não era o problema: o painel da marca já estava em 194px.
   Era a altura da janela, e é ela que esta consulta mede — a primeira do
   projeto a fazê-lo. */
@media (max-width: 640px) and (max-height: 720px) {
  /* Sai o sobretítulo: "AMBIENTE CORPORATIVO DE ANÁLISE" acima de "Análise que
     sustenta a decisão" diz a mesma coisa duas vezes, e custa 30px com a
     margem. */
  .brand-eyebrow { display: none; }

  .brand-panel { padding: 16px 22px 18px; gap: 10px; }
  .brand-logo { width: 108px; }
  .brand-title { font-size: 21px; }
  .form-panel { padding: 20px 22px; }
  .login-card { padding-top: 10px; }
}