/* nonimob: modelo das telas de acesso (login, recuperar senha, criar conta).
   Split no desktop (marca à esquerda, formulário à direita); empilhado no mobile
   (marca-hero no topo, formulário abaixo). Reutiliza tokens/.campo/.btn/.selo/.nib-logo
   do styles.css. Corte mobile/desktop em 1024px. */

.acesso-wrap{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr}
@media (min-width:1024px){.acesso-wrap{grid-template-columns:1fr 1fr}}

/* ---- Painel de marca / valor (esquerda no desktop; topo no mobile) ---- */
.acesso-marca{
  position:relative;overflow:hidden;
  background:var(--verde-mata);color:#fff;
  display:flex;flex-direction:column;
  padding:var(--s-4) var(--pad-lateral) var(--s-5);
}
@media (min-width:1024px){.acesso-marca{padding:var(--s-8) var(--s-8)}}
.acesso-marca-topo{
  position:relative;z-index:1;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:var(--s-6);
}
.acesso-marca-topo img{height:30px;width:auto;display:block}
.acesso-marca-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:460px}
.acesso-marca .selo{align-self:flex-start;background:transparent;color:var(--verde-claro);border:2px solid var(--verde-claro)}
.acesso-marca h1{font-family:var(--fonte-titulo);font-weight:700;font-size:26px;line-height:1.15;margin:var(--s-4) 0 var(--s-3)}
@media (min-width:1024px){.acesso-marca h1{font-size:34px}}
.acesso-marca .lead{color:rgba(255,255,255,.85);margin-bottom:0;max-width:42ch}
@media (min-width:1024px){.acesso-marca .lead{margin-bottom:var(--s-6)}}

/* Bullets: só no desktop (hero compacto no mobile) */
.acesso-beneficios{display:none;list-style:none;margin:0;padding:0}
@media (min-width:1024px){.acesso-beneficios{display:grid;gap:var(--s-3)}}
.acesso-beneficios li{display:flex;align-items:flex-start;gap:10px;color:rgba(255,255,255,.92)}
.acesso-beneficios svg{flex:none;margin-top:3px;color:var(--verde-claro)}

/* CTA no hero. Mobile: link em uma linha abaixo do lead (bullets ocultos).
   Desktop: botão abaixo dos bullets. */
.acesso-marca-cta{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;margin-top:var(--s-5)}
@media (min-width:1024px){.acesso-marca-cta{display:block;margin-top:var(--s-7)}}
.acesso-marca-cta p{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:var(--s-3)}
.acesso-marca-cta .btn{gap:8px}
@media (max-width:1023px){
  .acesso-marca-cta p{margin-bottom:0;font-size:15px}
  .acesso-marca-cta .btn{background:transparent;color:var(--verde-claro);min-height:0;padding:0;border-radius:0;font-size:15px;text-decoration:underline;text-underline-offset:3px}
  .acesso-marca-cta .btn:hover{background:transparent}
  .acesso-marca-cta .btn:active{transform:none}
  .acesso-marca-cta .btn svg{display:none}
}

/* Tagline no rodapé do painel (só desktop) e símbolo decorativo ao fundo */
.acesso-marca-rodape{display:none}
@media (min-width:1024px){.acesso-marca-rodape{display:block;position:relative;z-index:1;flex:none;margin-top:var(--s-6);font-size:13px;color:rgba(255,255,255,.6)}}
.acesso-simbolo{position:absolute;right:-40px;bottom:-40px;width:min(46%,320px);opacity:.06;pointer-events:none;z-index:0}

/* Toggle de tema no painel (fundo sempre escuro). O show/hide dos ícones
   sol/lua já vem do styles.css. */
.acesso-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;border-radius:999px;cursor:pointer;
  background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff;
  transition:background-color .2s;
}
.acesso-toggle:hover{background:rgba(255,255,255,.08)}
.acesso-toggle svg{width:20px;height:20px}

/* ---- Painel do formulário (direita no desktop; abaixo no mobile) ---- */
.acesso-form{
  background:var(--fundo);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s-6) var(--pad-lateral) var(--s-8);
}
@media (min-width:1024px){.acesso-form{padding:var(--s-8) var(--s-8)}}
.acesso-form-card{width:100%;max-width:400px;margin-inline:auto}
.acesso-form-card h2{font-family:var(--fonte-titulo);font-weight:700;font-size:24px;line-height:1.2}
.acesso-form-card .sub{color:var(--cinza-texto);margin:var(--s-2) 0 var(--s-6)}
.acesso-mensagem{border:1px solid var(--cinza-borda-card);border-radius:var(--raio-campo);padding:12px 14px;margin:0 0 var(--s-5);font-size:14px;font-weight:700;color:var(--cinza-texto);background:var(--verde-suave)}
.acesso-mensagem.info{color:var(--cinza-texto)}
.acesso-mensagem.success{color:var(--verde-direto)}
.acesso-mensagem.warn{color:#B7791F;background:rgba(230,169,74,.12);border-color:rgba(230,169,74,.35)}
.acesso-mensagem.error{color:var(--vermelho-aviso);background:rgba(179,38,30,.10);border-color:rgba(179,38,30,.30)}
.acesso-loader{color:var(--cinza-texto);font-weight:700;margin-bottom:var(--s-5)}
/* Poucos campos nessas telas: o espaçamento é igual em mobile e desktop (elas
   cabem bem). Escopo .acesso-form: não afeta o .campo global do form da home. */
.acesso-form .campo{margin-bottom:var(--s-5)}

/* Senha com botão mostrar/ocultar */
.campo-senha{position:relative}
.campo-senha input{padding-right:64px}
.btn-ver-senha{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;cursor:pointer;padding:8px 10px;border-radius:8px;font-family:var(--fonte-titulo);font-weight:600;font-size:13px;color:var(--cinza-texto)}
.btn-ver-senha:hover{color:var(--tinta)}

/* Medidor de força da senha (criar conta) */
.senha-forca{margin-top:8px}
.senha-forca-barra{height:6px;border-radius:999px;background:var(--cinza-borda-card);overflow:hidden}
.senha-forca-nivel{height:100%;width:0;border-radius:999px;transition:width .2s,background-color .2s}
.senha-forca-texto{font-size:12px;margin-top:6px;color:var(--cinza-texto)}
.senha-forca[data-nivel="1"] .senha-forca-nivel{width:33%;background:var(--vermelho-aviso)}
.senha-forca[data-nivel="2"] .senha-forca-nivel{width:66%;background:#E6A94A}
.senha-forca[data-nivel="3"] .senha-forca-nivel{width:100%;background:var(--verde-direto)}
.acesso-erro{color:var(--vermelho-aviso);font-size:13px;margin-top:6px}
.acesso-regras{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 var(--s-5)}
.acesso-regras span{border:1px solid var(--cinza-borda-card);border-radius:999px;padding:5px 9px;font-size:12px;color:var(--cinza-texto)}
.acesso-regras span.ok{border-color:rgba(30,190,110,.45);background:var(--verde-suave);color:var(--verde-direto);font-weight:700}

/* Mensagem de sucesso (recuperar senha) */
.acesso-sucesso{text-align:center}
.acesso-sucesso-icone{width:56px;height:56px;border-radius:999px;background:var(--verde-suave);color:var(--verde-direto);display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--s-4)}
.acesso-sucesso h2{font-family:var(--fonte-titulo);font-weight:700;font-size:24px;line-height:1.2}
.acesso-sucesso p{color:var(--cinza-texto);margin:var(--s-3) 0 var(--s-5)}
.acesso-sucesso strong{color:var(--tinta)}

/* Linha de opções (login) */
.acesso-opcoes{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--s-5);font-size:14px;flex-wrap:wrap}
.acesso-lembrar{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--tinta)}
.acesso-lembrar input{width:18px;height:18px;accent-color:var(--verde-direto)}
.acesso-esqueci{color:var(--verde-direto);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Rodapé do formulário */
.acesso-rodape{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--cinza-borda-card);text-align:center;display:grid;gap:var(--s-3)}
.acesso-link{color:var(--cinza-texto);font-size:14px}
.acesso-link a{color:var(--verde-direto);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.acesso-voltar{color:var(--cinza-texto);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.acesso-voltar:hover{color:var(--tinta)}

/* ---- Wizard de cadastro (abre após o clique no link mágico) ---- */
/* Chip sempre em verde escuro fixo (#1B4A37): resolve claro e escuro sem flip. */
.acesso-confirmado{display:inline-flex;align-items:center;gap:8px;background:#1B4A37;color:var(--verde-claro);font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;margin-bottom:var(--s-4)}
.acesso-confirmado svg{flex:none}
.acesso-confirmado strong{color:#fff;font-weight:700}
.wizard-progresso{margin-bottom:var(--s-5)}
.wizard-progresso-texto{font-size:13px;color:var(--cinza-texto);margin-bottom:8px}
.wizard-progresso-barra{height:6px;border-radius:999px;background:var(--cinza-borda-card);overflow:hidden}
.wizard-progresso-nivel{height:100%;width:33%;background:var(--verde-direto);border-radius:999px;transition:width .3s}
.wizard-etapa{display:none}
.wizard-etapa.ativa{display:block}
.wizard-opcoes{display:grid;gap:10px;margin-bottom:var(--s-5)}
.wizard-opcao{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--cinza-borda-campo);border-radius:var(--raio-campo);cursor:pointer;transition:border-color .15s,background-color .15s}
.wizard-opcao:hover{border-color:var(--verde-direto)}
.wizard-opcao input{width:20px;height:20px;accent-color:var(--verde-direto);flex:none}
.wizard-opcao-texto strong{display:block;color:var(--tinta);font-weight:700;line-height:1.3}
.wizard-opcao-texto span{font-size:13px;color:var(--cinza-texto)}
.wizard-opcao:has(input:checked){border-color:var(--verde-direto);background:var(--verde-suave)}
.wizard-acoes{display:flex;gap:12px;margin-top:var(--s-2)}
.wizard-acoes .btn{flex:1}
.btn:disabled{opacity:.5;cursor:not-allowed}