/* Portal do Investidor — Recuperação de senha — Nova Marca
   Figma: node 8247:9290 (desk) / 8247:9006 (mobo)

   Mesmo "casco" das outras telas do portal (gradiente, esferas, alerta,
   card com header deep-blue) — ver portal-login.css pros mesmos comentários
   de contexto. Formulário (nomes de campo, action, hidden inputs,
   ValidaFormSenha(), AJAX pro handle-password-reset.php) deliberadamente
   intocado — só estilo novo em cima. */

.nm-portal-recuperar.todoContainer.padrao {
  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-recuperar .overlayPortal {
  display: none;
}

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

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

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

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

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

.nm-portal-recuperar__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-recuperar__esfera--1 {
    top: calc(50% + 206.5px);
    left: calc(50% + 139px);
  }

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

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

  /* Figma mobile: alerta começa a 30px do topo, não 96px (--nm-space-9) —
     mesmo ajuste das outras telas (o container legado usa
     justify-content:center, que sem essa troca empurra tudo pro meio da
     tela em vez de respeitar o padding-top). */
  .nm-portal-recuperar.todoContainer.padrao {
    padding-top: 30px;
    justify-content: flex-start;
  }
}

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

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

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

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

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

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

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

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

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

.nm-portal-recuperar .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-recuperar .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 + subtítulo ---------- */

.nm-portal-recuperar .tituloForm.padrao {
  margin: 0 0 var(--nm-space-2) !important; /* 8px até o subtítulo (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-recuperar .p-padrao {
  margin: 0 0 var(--nm-space-7) !important; /* 40px até o 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 !important;
}

.nm-portal-recuperar .p-padrao strong {
  font-weight: var(--nm-font-weight-semibold);
  color: var(--nm-color-deep-blue);
}

/* ---------- Confirmação (Figma node 8247:9319) ---------- */
/* Mesmo card/header — só o miolo muda: título+subtítulo trocam de texto e o
   botão de ação vira um botão secundário (outline), não o pill azul cheio. */

.nm-portal-recuperar__sucesso .p-padrao {
  margin-bottom: var(--nm-space-5) !important; /* 24px até o botão (Figma) — não os 40px do form */
}

.nm-portal-recuperar__btn-secundario {
  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-recuperar__btn-secundario:hover {
  background: rgba(57, 186, 229, 0.08);
}

/* ---------- Campo de e-mail ---------- */
/* Mesmo padrão .inptPadraoNovoPrtal/.labelInterno do login (floating label
   já existe em footer-portal-novo.php) — ver portal-login.css pro mesmo
   fix do "notch" (background branco do label vazando fora do input). */

.nm-portal-recuperar .inptPadraoNovoPrtal {
  width: 424px;
  max-width: 100%;
  margin: 0 auto var(--nm-space-7); /* 40px até o botão (Figma) */
}

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

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

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

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

.nm-portal-recuperar .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-recuperar .formPadrao input[type="submit"]:hover {
  opacity: 0.92;
}

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

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

  .nm-portal-recuperar .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-recuperar .caixaLogin .logoFrm img {
    width: 98px;
    height: 40px;
  }

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

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

  .nm-portal-recuperar .p-padrao {
    margin-bottom: var(--nm-space-5) !important; /* 24px (Figma mobile) */
  }

  /* Figma mobile: campo e botão ocupam a largura total do conteúdo (329px),
     não os 424px fixos do desktop. */
  .nm-portal-recuperar .inptPadraoNovoPrtal,
  .nm-portal-recuperar .formPadrao input[type="submit"] {
    width: 100% !important;
  }
}