/* Portal do Investidor — Cadastro — Nova Marca
   Figma: node 8247:9210 (desk, cadastro) / 8247:9268 (desk, confirmação)
   Mobile não fornecido para esta tela — espaçamentos mobile estimados a
   partir do mesmo padrão já usado nas outras telas do portal (login,
   recuperar senha); conferir contra o Figma se/quando o link mobile vier.

   Mesmo "casco" das outras telas do portal (gradiente, esferas, card com
   header deep-blue) — ver portal-login.css pros mesmos comentários de
   contexto. Formulário (nomes de campo, validação de senha, checkboxes de
   interesse/fundos, reCAPTCHA, AJAX pro gravaDadosPortalNovo.php/
   gravaPrefsPortalNovo.php) deliberadamente intocado — só estilo novo em
   cima. Campos "Área" e os checkboxes de interesse/fundos não aparecem no
   Figma (que só mostra Nome/E-mail/Empresa/Celular/Senha) — por decisão
   explícita, mantidos no formulário e só restilizados no mesmo padrão. */

.nm-portal-cadastro.todoContainer.padrao {
  /* !important: #cadastro-app-portal .todoContainer.padrao (ID, css-portal-novo.css)
     tem padding-bottom:48px próprio — ID vence qualquer pilha de classes. */
  background: var(--nm-gradient-portal-login) !important;
  overflow: hidden;
  padding: var(--nm-space-9) var(--nm-space-4) !important;
  gap: var(--nm-space-4);
}

.nm-portal-cadastro .overlayPortal {
  display: none;
}

/* ---------- Esferas decorativas (iguais às outras telas do portal) ---------- */

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

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

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

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

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

@media (max-width: 768px) {
  .nm-portal-cadastro__esfera--1 {
    top: calc(50% + 206.5px);
    left: calc(50% + 139px);
  }

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

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

  .nm-portal-cadastro.todoContainer.padrao {
    padding-top: 30px;
    justify-content: flex-start;
  }
}

/* ---------- Alerta (acima do card, se os campos ACF existirem) ---------- */

.nm-portal-cadastro .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-cadastro .alerta-portal-icone {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

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

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

.nm-portal-cadastro .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);
  line-height: var(--nm-line-height-base);
}

.nm-portal-cadastro .alerta-portal-texto,
.nm-portal-cadastro .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-cadastro .alerta-portal-texto strong,
.nm-portal-cadastro .alerta-portal-texto b {
  font-weight: var(--nm-font-weight-semibold) !important;
  color: var(--nm-color-white) !important;
}

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

/* ---------- Card ---------- */

.nm-portal-cadastro .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;
}

.nm-portal-cadastro .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-cadastro .caixaLogin .logoFrm img {
  width: 156px;
  height: 64px;
}

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

.nm-portal-cadastro .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-cadastro .caixaLogin .formPadrao {
  --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);
}

/* ---------- Título + "já tem conta" ---------- */

.nm-portal-cadastro .tituloForm {
  margin: 0 0 var(--nm-space-2) !important; /* 8px (Figma) */
  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 */
  text-align: center;
}

.nm-portal-cadastro .msgLogin {
  margin: 0 0 var(--nm-space-6); /* 32px até o 1º campo (Figma) */
  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);
  text-align: center;
}

.nm-portal-cadastro .msgLogin a {
  color: var(--nm-color-blue);
  text-decoration: underline;
}

/* ---------- Campos (Nome, E-mail, Empresa, Área, Celular) ---------- */
/* Mesmo padrão .inptPadraoNovoPrtal/.labelInterno do login — ver
   portal-login.css pro mesmo fix do "notch" (background branco do label
   vazando fora do input). Aplica em TODOS os campos do form, incluindo
   "Área" (não existe no Figma, mas segue o mesmo visual por consistência). */

.nm-portal-cadastro .inptPadraoNovoPrtal {
  margin-bottom: var(--nm-space-5); /* 24px entre campos (Figma) */
}

.nm-portal-cadastro .inptPadraoNovoPrtal input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  width: calc(100% - 4px);
}

.nm-portal-cadastro .labelInterno {
  background: transparent !important;
}

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

.nm-portal-cadastro .GroupCampo.FormPadraoErro {
  border-color: #D64545 !important;
}

/* "*campo obrigatório" (mensagem de erro de e-mail já cadastrado reaproveita
   a mesma classe/estilo em #emailMessage) — cola 4px no campo, 16px antes do
   próximo (total 24px, igual ao gap padrão entre campos — ver Figma). */
.nm-portal-cadastro #emailMessage {
  margin: 4px 0 var(--nm-space-4) !important;
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-sm);
  color: #D64545 !important;
}

.nm-portal-cadastro .GrupoSenha {
  margin-top: calc(var(--nm-space-5) * -1 + var(--nm-space-4)); /* celular→senha é 16px, não 24px (Figma) */
}

/* ---------- Checkboxes (interesse / fundos) — não existem no Figma, só
   restilizados pra ficarem consistentes com o resto do form. ---------- */

.nm-portal-cadastro .inputCheckbox {
  margin-bottom: var(--nm-space-5);
  font-family: var(--nm-font-family);
}

.nm-portal-cadastro .inputCheckbox > p {
  margin: 0 0 var(--nm-space-3);
  color: var(--nm-color-deep-blue);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-base);
}

.nm-portal-cadastro .inputCheckbox .dp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nm-space-2) var(--nm-space-5);
}

.nm-portal-cadastro .inputCheckbox .dp > div {
  display: flex;
  align-items: center;
  gap: var(--nm-space-2);
}

.nm-portal-cadastro .inputCheckbox label {
  color: var(--nm-color-chumbo);
  font-size: var(--nm-font-size-base);
}

.nm-portal-cadastro .inputCheckbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--nm-color-blue);
}

/* ---------- Senha + toggle de visibilidade ---------- */

.nm-portal-cadastro .iptnSenha {
  position: relative;
}

.nm-portal-cadastro .iptnSenha input {
  width: calc(100% - 44px) !important;
}

.nm-portal-cadastro #togglePassword {
  position: absolute;
  right: var(--nm-space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* ---------- Regras de senha (ícones já são injetados via JS existente —
   só padroniza o tamanho/alinhamento aqui) ---------- */

.nm-portal-cadastro .password-rules {
  margin: var(--nm-space-2) 0 var(--nm-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-2);
  margin: 0 auto;
  margin-bottom: 24px;
}

.nm-portal-cadastro .password-rules.email-valid {
  display: none;
}

.nm-portal-cadastro .password-rules p {
  display: flex;
  align-items: center;
  gap: var(--nm-space-2);
  margin: 0;
  color: var(--nm-color-chumbo);
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-sm);
  line-height: var(--nm-line-height-base);
}

.nm-portal-cadastro .password-rules p svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.nm-portal-cadastro .password-rules .state-invalid,
.nm-portal-cadastro .password-rules .state-valid {
  display: none;
}

.nm-portal-cadastro .password-rules .state-invalid.invalid,
.nm-portal-cadastro .password-rules .state-valid.valid {
  display: block;
}

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

.nm-portal-cadastro .formPadrao input[type="submit"] {
  display: block !important;
  width: 424px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  height: 48px !important;
  border: none !important;
  border-radius: var(--nm-radius-pill) !important;
  background: var(--nm-color-blue) !important;
  color: var(--nm-color-white) !important;
  font-family: var(--nm-font-family) !important;
  font-weight: var(--nm-font-weight-medium) !important;
  font-size: var(--nm-font-size-base) !important;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.nm-portal-cadastro .formPadrao input[type="submit"]:hover {
  opacity: 0.92;
}

.nm-portal-cadastro .formPadrao input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- Confirmação (Figma node 8247:9268) ---------- */
/* Mesmo card/header — o JS existente troca #formCadastro por .sucesso no
   sucesso do cadastro (sem redirect de página). */

.nm-portal-cadastro .sucesso {
  /* .sucesso (sem escopo, css-portal-novo.css) tem height:492px fixo — troca
     pra auto, senão o conteúdo pode cortar/sobrar espaço dependendo do
     tamanho do texto/viewport. */
  height: auto;
  margin-bottom: 0;
}

.nm-portal-cadastro .sucesso h2 {
  margin: 0 0 var(--nm-space-2);
  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);
  text-align: center;
}

.nm-portal-cadastro .sucesso p {
  margin: 0 0 var(--nm-space-7); /* 40px até o botão (Figma) */
  color: var(--nm-color-chumbo);
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  text-align: center;
}

.nm-portal-cadastro .sucesso a {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: var(--nm-space-3) var(--nm-space-8); /* 12px 48px */
  height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--nm-color-blue);
  border-radius: var(--nm-radius-pill);
  background: transparent;
  color: var(--nm-color-blue);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-base);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nm-portal-cadastro .sucesso a:hover {
  background: rgba(57, 186, 229, 0.08);
}

/* ---------- Link "voltar pra home" (igual ao login) ---------- */

.nm-portal-cadastro .link-home {
  position: relative;
  z-index: 1;
  margin-top: 32px;
}

 .nm-portal-cadastro span {
    text-align: left;
  }

.nm-portal-cadastro .link-home a {
  display: flex;
  align-items: center;
  gap: var(--nm-space-2);
  color: var(--nm-color-white);
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  text-decoration: none;
}

@media (max-width: 480px) {
  .nm-portal-cadastro .caixaLogin .headerBanner {
    padding: var(--nm-space-6) var(--nm-space-4); /* 32px */
    gap: var(--nm-space-4);
  }

  .nm-portal-cadastro .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);
  }

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

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

  .nm-portal-cadastro .caixaLogin .headerBanner h1 {
    font-size: var(--nm-font-size-md);
    line-height: var(--nm-line-height-md);
  }

  .nm-portal-cadastro .formPadrao input[type="submit"] {
    width: 100% !important;
  }
}