/* Portal do Investidor — Login — Nova Marca
   Figma: Site Update Nova Marca — node 8247:9426

   Escopado em .nm-portal-login (classe extra em .todoContainer.padrao,
   page-login-app-portal.php) — .caixaLogin/.inptPadraoNovoPrtal/.labelInterno
   etc. (css-portal-novo.css) são usados por OUTRAS telas do portal
   (cadastro, recuperar senha...) que ainda não foram refeitas; sem esse
   escopo, essas regras novas vazariam pra lá também.

   Mecânica de label flutuante (classes .inptPadraoNovoPrtalFocus/
   .ativoDigitado no foco/blur do input) já existe em footer-portal-novo.php
   — não mexido aqui, só reestilizado. Mesma lógica pro <form>, nomes de
   campo, action, hidden inputs: tudo como estava, só around-the-form visual
   mudou. Novo: botão de mostrar/esconder senha (portal-login.js) — não
   existia nessa tela (só na de cadastro, com outro id). */

.nm-portal-login.todoContainer.padrao {
  /* O shorthand "background" já redefine background-image pro degradê —
     uma 2ª declaração "background-image: none" depois dessa anularia o
     degradê de novo (CSS resolve a última declaração do MESMO bloco). O
     !important aqui já basta pra vencer o background-image:url(...)
     !important legado (.padraoPortal .todoContainer.padrao, mesma
     especificidade de 3 classes — empate resolvido por ordem de carga, e
     este arquivo carrega depois). */
  background: var(--nm-gradient-portal-login) !important;
  overflow: hidden;
  padding: var(--nm-space-9) var(--nm-space-4);
  gap: var(--nm-space-4);
}

.nm-portal-login .overlayPortal {
  display: none; /* overlay escuro era pro bg antigo (foto) — o degradê novo não precisa */
}

/* ---------- Esferas decorativas ---------- */

.nm-portal-login__esferas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.nm-portal-login__esfera {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
}

.nm-portal-login__esfera--1 {
  width: 395px;
  height: 395px;
  top: calc(50% + 92.5px);
  left: calc(50% + 378.5px);
  transform: translate(-50%, -50%);
}

.nm-portal-login__esfera--2 {
  width: 300px;
  height: 300px;
  top: calc(50% + 375px);
  left: calc(50% + 207px);
  transform: translate(-50%, -50%);
}

.nm-portal-login__esfera--3 {
  width: 499px;
  height: 499px;
  top: calc(50% - 274.5px);
  left: calc(50% + 549.5px);
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  /* Mobo / Login (Figma node 8247:9172) — posições próprias, não é o
     desktop encolhido. Lá o container das esferas tem 1080px de altura e
     fica deslocado 114px abaixo do centro real do frame (852px) — por isso
     cada offset abaixo já soma esse deslocamento (50% + 114px + offset do
     Figma), senão as esferas saem da posição vistas no frame mobile. */
  .nm-portal-login__esfera--1 {
    /* Mesmo tamanho do desktop (Figma não encolhe as esferas no mobile,
       só reposiciona — elas saem mais pra fora da viewport estreita). */
    top: calc(50% + 206.5px);
    left: calc(50% + 139px);
  }

  .nm-portal-login__esfera--2 {
    top: calc(50% + 489px);
    left: calc(50% - 32.5px);
  }

  .nm-portal-login__esfera--3 {
    top: calc(50% - 160.5px);
    left: calc(50% + 310px);
  }
}

/* ---------- Alerta (acima do card) ---------- */

.nm-portal-login .alerta-portal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 648px;
  margin: 0 auto !important;
  display: flex !important;
  align-items: flex-start;
  gap: var(--nm-space-4);
  padding: var(--nm-space-4) !important;
  background: #656565 !important;
  border-radius: var(--nm-radius-md) !important;
  box-sizing: border-box;
}

.nm-portal-login .alerta-portal-icone {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.nm-portal-login .alerta-portal-icone img {
  display: block;
  width: 100%;
  height: 100%;
}

.nm-portal-login .alerta-portal-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-2);
}

.nm-portal-login .alerta-portal-titulo {
  margin: 0 !important;
  color: var(--nm-color-white) !important;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-semibold) !important;
  font-size: var(--nm-font-size-md); /* 18px no Figma, 20px é o token mais próximo pra cima — ok, mesmo princípio dos outros ajustes */
  line-height: var(--nm-line-height-base);
}

.nm-portal-login .alerta-portal-texto,
.nm-portal-login .alerta-portal-texto p {
  margin: 0 !important;
  color: var(--nm-color-white) !important;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base) !important;
  line-height: var(--nm-line-height-base) !important;
}

.nm-portal-login .alerta-portal-texto strong,
.nm-portal-login .alerta-portal-texto b {
  font-weight: var(--nm-font-weight-semibold) !important;
  color: var(--nm-color-white) !important;
}

.nm-portal-login .alerta-portal-texto a {
  color: var(--nm-color-white) !important;
  text-decoration: underline !important;
}

/* ---------- Card do form ---------- */

.nm-portal-login .caixaLogin {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 648px;
  margin: 0 !important;
  background: var(--nm-color-white);
  border-radius: var(--nm-radius-md);
  overflow: hidden;
}

/* Geometria de "escape" do padding (margem negativa, width calc) agora é
   padrão compartilhado — ver portal-auth-shared.css e a classe
   .nm-portal-auth-header no HTML (page-login-app-portal.php). Aqui só o que
   é específico desta tela: cor, padding interno, gap. */
.nm-portal-login .caixaLogin .headerBanner {
  background: var(--nm-color-deep-blue);
  border-radius: 0;
  padding: var(--nm-space-6) var(--nm-space-6); /* 32px */
  gap: var(--nm-space-6);
}

.nm-portal-login .caixaLogin .logoFrm img {
  width: 156px;
  height: 64px;
}

.nm-portal-login .caixaLogin .headerBanner .separadorVertical {
  background: #425071;
  width: 1px;
  height: 64px;
  margin-left: 0;
  margin-right: 0;
}

.nm-portal-login .caixaLogin .headerBanner h1 {
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-light);
  font-size: var(--nm-font-size-xl); /* 28px */
  line-height: var(--nm-line-height-lg); /* 32px */
  margin: 0;
}

.nm-portal-login .caixaLogin .formPadrao {
  /* Alimentam a geometria compartilhada do header (.nm-portal-auth-header em
     portal-auth-shared.css) — mudou o padding aqui, o header acompanha
     sozinho, em qualquer breakpoint. */
  --nm-portal-form-pad-y: var(--nm-space-7); /* 40px */
  --nm-portal-form-pad-x: var(--nm-space-6); /* 32px */
  padding: var(--nm-portal-form-pad-y) var(--nm-portal-form-pad-x) var(--nm-space-7);
}

.nm-portal-login .caixaLogin .formPadrao form {
  margin-bottom: 0;
}

.nm-portal-login .tituloForm {
  color: var(--nm-color-deep-blue);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-md); /* 20px */
  line-height: var(--nm-line-height-md); /* 28px */
  margin-bottom: var(--nm-space-6); /* 32px */
}

/* ---------- Campos ---------- */

.nm-portal-login .GroupCampo {
  margin-bottom: var(--nm-space-4); /* 16px entre os dois campos */
}

.nm-portal-login .GroupCampo.GrupoSenha {
  margin-bottom: var(--nm-space-2); /* 8px até "Esqueceu a senha?" */
}

.nm-portal-login .inptPadraoNovoPrtal {
  position: relative;
  border: 1px solid var(--nm-color-border) !important;
  border-radius: var(--nm-radius-md) !important; /* 16px */
  height: 56px;
}

.nm-portal-login .inptPadraoNovoPrtal.inptPadraoNovoPrtalFocus,
.nm-portal-login .inptPadraoNovoPrtal.ativoDigitado {
  border-color: var(--nm-color-deep-blue) !important;
}

.nm-portal-login .inptPadraoNovoPrtal input {
  width: calc(100% - 4px);
  color: var(--nm-color-chumbo) !important;
  font-family: var(--nm-font-family) !important;
  /* O input não tem border:none no CSS legado — a borda nativa do browser
     (cantos retos) vaza por trás do canto arredondado do wrapper (16px),
     criando aquele "entalhe" no canto superior esquerdo do campo. */
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Espaço pro botão de mostrar/esconder senha não ficar embaixo do texto */
.nm-portal-login .GrupoSenha input {
  width: calc(100% - 4px - 40px);
}

.nm-portal-login .labelInterno {
  /* .labelInterno{background:white} (css.css) é incondicional — no estado
     parado (sem foco, sem valor) isso desenha um retângulo branco atrás do
     texto do label que corta a curva do border-radius do campo por baixo,
     um "entalhe" no canto. Só deveria ter fundo branco quando flutua sobre
     a borda (estado focado/preenchido, onde isso já é feito à parte). */
  background: transparent !important;
  color: var(--nm-color-chumbo);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
}

.nm-portal-login .inptPadraoNovoPrtalFocus .labelInterno,
.nm-portal-login .ativoDigitado .labelInterno {
  background: var(--nm-color-white) !important;
  color: var(--nm-color-deep-blue) !important;
}

/* Botão de mostrar/esconder senha (novo nesta tela — portal-login.js) */
.nm-portal-login #togglePasswordLogin {
  position: absolute;
  right: var(--nm-space-4); /* 16px */
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;
}

.nm-portal-login #togglePasswordLogin img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Esqueceu a senha / botão / cadastro ---------- */

.nm-portal-login .caixaLogin .submits .login-options {
  margin-bottom: var(--nm-space-5); /* 24px */
}

.nm-portal-login .submits .login-options .lembrar-senha {
  color: var(--nm-color-deep-blue);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
}

.nm-portal-login .formPadrao input[type="submit"] {
  background: var(--nm-color-blue);
  border-radius: var(--nm-radius-pill);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  transition: opacity 0.2s ease;
}

.nm-portal-login .formPadrao input[type="submit"]:hover {
  background: var(--nm-color-blue);
  opacity: 0.85;
}

.nm-portal-login .msgCadastro {
  margin-top: var(--nm-space-7); /* 40px */
  margin-bottom: 0;
  text-align: center;
  color: var(--nm-color-chumbo);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
}

.nm-portal-login .msgCadastro a {
  color: var(--nm-color-blue);
  text-decoration: none;
}

.nm-portal-login .msgCadastro a:hover {
  text-decoration: underline;
}

.nm-portal-login .error-message {
  max-width: 424px;
  margin: 0 auto var(--nm-space-4);
  color: #D64545;
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  text-align: center;
}

/* ---------- Voltar a home ---------- */

.nm-portal-login .link-home {
  position: relative;
  z-index: 1;
  bottom: auto;
  width: auto;
  margin-top: 186px;
}

.nm-portal-login .link-home a {
  gap: var(--nm-space-2); /* 8px */
}

.nm-portal-login .link-home svg {
  display: block;
  width: 24px;
  height: 24px;
}

.nm-portal-login .link-home span {
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
}



@media (max-width: 768px) {
  .nm-portal-login.todoContainer.padrao {
    padding-top: 30px;
  }

  /* 186px (desktop) foi calibrado pra empurrar o link até perto do rodapé
     quando o conteúdo cabe na tela e o flex column centraliza (justify-
     content:center) — no mobile o conteúdo costuma ser mais alto que a
     viewport, então isso só empurraria o link pra fora da tela. Aqui o
     pedido é "48px depois do form": o container (.todoContainer.padrao) já
     tem gap:16px entre todos os filhos, então o margin-top aqui só precisa
     completar a diferença (48-16=32), senão os dois somam e dá 64px. */
  .nm-portal-login .link-home {
    margin-top: 32px;
  }
}


@media (max-width: 480px) {
  /* Valores desta seção vêm do Figma mobile (node 8247:9172), não são mais
     estimativa — card 361px, campos 329px (16px de gutter de cada lado). */
  .nm-portal-login .caixaLogin .formPadrao {
    --nm-portal-form-pad-y: var(--nm-space-8); /* 48px */
    --nm-portal-form-pad-x: var(--nm-space-4); /* 16px */
    padding: var(--nm-portal-form-pad-y) var(--nm-portal-form-pad-x) var(--nm-space-7);
  }

  .nm-portal-login .caixaLogin .headerBanner {
    padding: 36px var(--nm-space-4); /* logo (40px) centralizado num header de 112px */
    gap: var(--nm-space-4);
  }

  .nm-portal-login .caixaLogin .logoFrm img {
    width: 98px;
    height: 40px;
  }

  .nm-portal-login .caixaLogin .headerBanner .separadorVertical {
    height: 48px;
  }

  .nm-portal-login .caixaLogin .headerBanner h1 {
    font-size: var(--nm-font-size-md); /* 20px — "Portal do Investidor" não cabe em 28px numa tela estreita ao lado do logo */
    line-height: var(--nm-line-height-md);
  }
}