/* ============================================
   IntegraRenave — cadastro e login (CNPJ)
   ============================================ */

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
}

/* ---------- Lateral com mascote ---------- */
.auth-lateral {
  background: var(--azul-escuro);
  color: #d7e0f2;
  padding: 48px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

html[data-tema="colorido"] .auth-lateral { background: linear-gradient(160deg, #3b0764, #831843); }

.auth-lateral .logo { color: #fff; }

.auth-lateral-conteudo { margin: auto 0; position: relative; z-index: 1; }

.auth-lateral h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.7px;
  line-height: 1.25;
  margin-bottom: 14px;
}

.auth-lateral p { font-size: 0.98rem; max-width: 380px; }

.auth-lateral-mascote {
  height: 260px;
  width: auto;
  margin: 28px auto 0;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.4));
}

.auth-beneficios { list-style: none; display: grid; gap: 12px; margin-top: 26px; }

.auth-beneficios li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; }

.auth-beneficios .ic { width: 18px; height: 18px; color: var(--laranja); margin-top: 3px; }

/* ---------- Área do formulário ---------- */
.auth-conteudo {
  padding: 40px clamp(24px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--fundo);
}

.auth-caixa { width: 100%; max-width: 640px; margin: 0 auto; }

.auth-abas {
  display: flex;
  gap: 6px;
  background: var(--azul-claro);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 28px;
  width: fit-content;
}

.auth-aba {
  border: none;
  background: transparent;
  padding: 10px 26px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.auth-aba.ativa { background: var(--superficie); color: var(--titulo); box-shadow: var(--sombra); }

.auth-caixa h1 { color: var(--titulo); font-size: 1.6rem; letter-spacing: -0.6px; margin-bottom: 6px; }

.auth-caixa .subtitulo { color: var(--texto-suave); font-size: 0.95rem; margin-bottom: 28px; }

/* ---------- Etapas (wizard) ---------- */
.etapas {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}

.etapa-passo {
  flex: 1;
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto-suave);
}

.etapa-passo::before {
  content: "";
  height: 5px;
  border-radius: 99px;
  background: var(--borda);
  transition: background 0.3s;
}

.etapa-passo.ativa { color: var(--laranja-texto); }
.etapa-passo.ativa::before { background: var(--grad-primario); }
.etapa-passo.concluida { color: var(--verde-texto); }
.etapa-passo.concluida::before { background: var(--verde); }

/* ---------- Formulários ---------- */
.form-etapa { display: none; }
.form-etapa.ativa { display: block; }

.form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-linha.tripla { grid-template-columns: 2fr 1fr 1fr; }
.form-linha.unica { grid-template-columns: 1fr; }

.grupo-cnpj { display: flex; gap: 10px; align-items: flex-end; }
.grupo-cnpj .campo { flex: 1; }

.form-titulo-secao {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--laranja-texto);
  margin: 26px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-titulo-secao:first-child { margin-top: 0; }

/* ---------- Avisos: movidos para style.css (uso compartilhado) ---------- */

/* ---------- Força da senha ---------- */
.forca-senha { display: grid; gap: 6px; margin-top: 4px; }

.forca-barras { display: flex; gap: 5px; }

.forca-barras span {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--borda);
  transition: background 0.25s;
}

.forca-rotulo { font-size: 0.76rem; font-weight: 700; color: var(--texto-suave); }

.forca-1 span:nth-child(-n+1), .forca-2 span:nth-child(-n+2) { background: var(--vermelho); }
.forca-3 span:nth-child(-n+3) { background: var(--laranja); }
.forca-4 span:nth-child(-n+4) { background: var(--verde); }
.forca-5 span:nth-child(-n+5) { background: var(--verde); }

/* ---------- Aceites ---------- */
.aceite {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 0.87rem;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.2s;
  background: var(--superficie);
}

.aceite:hover { border-color: var(--laranja); }

.aceite input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--laranja); flex: none; }

.aceite a { color: var(--laranja-texto); font-weight: 700; }

/* ---------- Navegação do wizard ---------- */
.form-acoes {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.form-acoes .btn { min-width: 150px; }

/* ---------- Código de verificação ---------- */
.codigo-demo {
  text-align: center;
  background: var(--azul-claro);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.codigo-demo .codigo {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--titulo);
}

.codigo-demo p { font-size: 0.8rem; color: var(--texto-suave); }

.campo-codigo input {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 10px;
}

/* ---------- Login extra ---------- */
.login-extra {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 14px 0 24px;
  font-size: 0.85rem;
}

.login-extra a { color: var(--laranja-texto); font-weight: 700; text-decoration: none; }

/* .ver-senha agora vive dentro de .campo-input-wrap (style.css) —
   posicionado relativo ao input, imune a variações de altura do label */

.voltar-site {
  margin-top: 26px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.voltar-site:hover { color: var(--laranja-texto); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-lateral { display: none; }
  .auth-conteudo { padding: 32px 20px; }
  .form-linha, .form-linha.tripla { grid-template-columns: 1fr; }
  .grupo-cnpj { flex-direction: column; align-items: stretch; }
}