/* =====================================================================
   Cadastro — reskin (ADR-037, Fase 1). Tudo escopado sob .ds para não
   vazar nas telas legadas. Reusa os componentes do DS (.field/.input/.btn/
   .check/.mark) — aqui vai só o shell split-panel, o step indicator e o
   re-estilo dos hooks portados (senha-regras, feedback do doc, NomeEmpresa).
   ===================================================================== */

/* overflow-x: clip (não hidden) — clipa a rolagem lateral SEM criar contêiner de
   rolagem, preservando o position:sticky do painel de marca (hidden quebrava o sticky). */
.ds.cad-body { margin: 0; background: var(--color-bg-soft); color: var(--color-text); font-family: var(--font-body); overflow-x: clip; }

/* ---------- Header mobile (menu simples; só < desktop) ---------- */
.ds .cad-mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-sm) var(--space-md); background: #fff;
    border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20;
}
.ds .cad-mobile-header__logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--color-purple-700); }
.ds .cad-mobile-header__logo img { width: auto; height: 26px; }
.ds .cad-mobile-header__logo:hover { text-decoration: none; }
.ds .cad-mobile-header .btn { padding: 8px 16px; }
@media (min-width: 992px) { .ds .cad-mobile-header { display: none; } }

/* ---------- Shell split-panel ---------- */
.ds .cad-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }

@media (min-width: 992px) {
    .ds .cad-shell { grid-template-columns: minmax(360px, 40%) 1fr; }
}

/* Painel da marca (esquerda, só desktop). Sticky 100vh: logo no topo, bloco de
   marca embaixo (space-between), como no modelo — não "flutua" quando o form rola. */
.ds .cad-brand { display: none; }

@media (min-width: 992px) {
    .ds .cad-brand {
        position: sticky; top: 0; align-self: start; height: 100vh; overflow: hidden;
        display: flex; flex-direction: column; justify-content: space-between;
        background: linear-gradient(160deg, var(--color-purple-700) 0%, var(--color-purple-900) 100%);
        color: #fff; padding: var(--space-2xl);
    }
    .ds .cad-brand__watermark {
        position: absolute; right: -90px; bottom: -90px; width: 420px; opacity: .10;
        filter: brightness(0) invert(1); pointer-events: none;
    }
    .ds .cad-brand__logo { position: relative; z-index: 1; display: inline-flex; flex-direction: column; gap: 6px; color: #fff; align-items: flex-start; }
    .ds .cad-brand__logo img { height: 40px; width: auto; }
    .ds .cad-brand__logo:hover { text-decoration: none; }
    .ds .cad-brand__tag { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: #C9B8E6; }
    .ds .cad-brand__inner { position: relative; z-index: 1; max-width: 420px; }
    .ds .cad-brand__headline {
        font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.25;
        letter-spacing: var(--tracking-title); margin: 0 0 var(--space-sm); color: #fff;
    }
    .ds .cad-brand__sub { font-size: var(--fs-body); color: #D9CBEF; margin: 0 0 var(--space-xl); max-width: 380px; }
    .ds .cad-brand__benefits { list-style: none; padding: 0; margin: 0; }
    .ds .cad-brand__benefits li { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-md); font-size: var(--fs-body); color: #EFE8FA; }
    .ds .cad-brand__benefits i { color: var(--color-accent); width: 22px; text-align: center; flex: 0 0 auto; }
}

/* Painel do formulário (direita) — coluna: card + rodapé empilhados e centrados. */
.ds .cad-main { display: flex; flex-direction: column; align-items: center; padding: var(--space-lg); }
.ds .cad-card { width: 100%; max-width: 680px; background: #fff; border: 1px solid #EEE5F5; border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); padding: var(--space-xl); margin: var(--space-md) 0; }

@media (min-width: 992px) { .ds .cad-card { padding: var(--space-xl) var(--space-2xl); } }

/* Rodapé (todas as viewports; ancorado embaixo quando sobra espaço) */
.ds .cad-footer { width: 100%; max-width: 680px; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-md) var(--space-md); text-align: center; }
.ds .cad-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-md); }
.ds .cad-footer__links a { font-size: var(--fs-sm); color: var(--color-text-muted); }
.ds .cad-footer__links a:hover { color: var(--color-purple-700); }
.ds .cad-footer__copy { font-size: var(--fs-xs); color: var(--color-text-muted); }

.ds .cad-card__head { margin-bottom: var(--space-md); }
.ds .cad-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); letter-spacing: var(--tracking-title); margin: 0 0 6px; }
.ds .cad-card__subtitle { color: var(--color-text-muted); font-size: var(--fs-body); margin: 0; }
.ds .cad-card__login { text-align: center; margin: var(--space-lg) 0 0; font-size: var(--fs-sm); }

/* ---------- Step indicator (hexágonos) ---------- */
.ds .cad-stepper { margin-bottom: var(--space-lg); }
.ds .cad-stepper__list { display: flex; list-style: none; padding: 0; margin: 0; }
.ds .cad-step { flex: 1; position: relative; text-align: center; }

/* Conector entre passos */
.ds .cad-step::before {
    content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 2px;
    background: var(--color-border); z-index: 0;
}
.ds .cad-step:first-child::before { display: none; }
.ds .cad-step.is-completed::before, .ds .cad-step.is-active::before { background: var(--color-purple-400); }

.ds .cad-step__link { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; color: inherit; }
.ds .cad-step__link:hover { text-decoration: none; }

.ds .cad-step__hex {
    position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-border); color: var(--color-text-muted);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
    transition: background var(--dur-normal) var(--ease-smooth), color var(--dur-normal) var(--ease-smooth);
}
.ds .cad-step__check { display: none; font-size: 14px; }
.ds .cad-step__label { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 500; }

.ds .cad-step.is-active .cad-step__hex { background: var(--color-purple-700); color: #fff; }
.ds .cad-step.is-active .cad-step__label { color: var(--color-purple-700); font-weight: 700; }

.ds .cad-step.is-completed .cad-step__hex { background: var(--color-purple-500); color: #fff; }
.ds .cad-step.is-completed .cad-step__num { display: none; }
.ds .cad-step.is-completed .cad-step__check { display: inline; }
.ds .cad-step.is-completed .cad-step__label { color: var(--color-purple-700); }

.ds a.cad-step__link:hover .cad-step__hex { background: var(--color-purple-700); }
.ds a.cad-step__link:focus-visible .cad-step__hex { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.ds .cad-step.is-disabled .cad-step__link { cursor: default; }

@media (max-width: 480px) { .ds .cad-step__label { display: none; } }

/* ---------- Grid do formulário ---------- */
.ds .cad-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); }
.ds .cad-form .cad-col-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .ds .cad-form { grid-template-columns: 1fr; } }

.ds .cad-form__section-title { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); margin: var(--space-md) 0 var(--space-sm); color: var(--color-text); }

/* Mensagem de erro por campo (alvo do data-valmsg-for) */
.ds .field__error { display: block; min-height: 16px; margin-top: 4px; font-size: var(--fs-xs); color: var(--color-error); }
.ds .input.is-invalid, .ds .select.is-invalid { border-color: var(--color-error); }
.ds .input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, .14); }

/* Erro geral (ModelState "Erro") */
.ds .cad-erro-geral { grid-column: 1 / -1; }
.ds .cad-erro-geral .field__error { font-size: var(--fs-sm); }
.ds .cad-erro-geral .field__error:empty { display: none; }
.ds .cad-erro-login { margin-top: 6px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.ds .cad-erro-login a { font-weight: 600; }

/* ---------- NomeEmpresa: reservado até detectar PJ (cadastro-express.js toggla .show).
   visibility (não display:none) mantém a célula do grid ocupada — assim Nome e Sobrenome
   ficam sempre na mesma linha; no CPF a coluna 2 da 1ª linha só fica vazia. ---------- */
.ds #NomeEmpresa-wrapper { visibility: hidden; }
.ds #NomeEmpresa-wrapper.show { visibility: visible; }

/* ---------- Campo único CPF/CNPJ — feedback (campo-unico-doc.js) ---------- */
.ds .campo-unico-doc-feedback { min-height: 18px; margin-top: 4px; font-size: var(--fs-xs); }
.ds .campo-unico-doc-feedback.texto-sucesso { color: var(--color-success); }
.ds .campo-unico-doc-feedback.texto-erro { color: var(--color-error); }

/* ---------- Checklist de regras de senha (senha-regras.js) ---------- */
.ds .senha-regras { margin-top: 8px; font-size: var(--fs-xs); line-height: 1.5; }
.ds .senha-regras-titulo { margin: 0 0 4px; color: var(--color-text-muted); font-weight: 600; }
.ds .senha-regras ul { list-style: none; padding: 0; margin: 0; }
.ds .senha-regra { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease-smooth); }
.ds .senha-regra .senha-regra-icone { display: inline-block; width: 16px; text-align: center; font-weight: 700; }
.ds .senha-regra.ok { color: var(--color-success); }
.ds .senha-regra.opcional { color: #9A93A8; }

/* Termos (checkbox) */
.ds .cad-termos { grid-column: 1 / -1; margin: var(--space-sm) 0; }

/* Ações */
.ds .cad-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-md); margin-top: var(--space-md); flex-wrap: wrap; }
.ds .cad-captcha { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); }

/* Aperto no mobile: menos padding (dá espaço p/ o reCAPTCHA de 302px) e captcha centrado. */
@media (max-width: 640px) {
    .ds .cad-main { padding: var(--space-sm); }
    .ds .cad-card { padding: var(--space-lg) var(--space-md); }
    .ds .cad-captcha { justify-content: center; }
    .ds .cad-acoes { justify-content: center; }
    .ds .cad-acoes .btn { width: 100%; }
}

/* ---------- Confirmação de e-mail (Fatia 3) ---------- */
.ds .cad-email { text-align: center; padding: var(--space-md) 0 var(--space-sm); }
.ds .cad-email__icon { --mark-size: 64px; font-size: 26px; margin-bottom: var(--space-md); }
.ds .cad-email__texto { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 460px; margin: 0 auto var(--space-lg); }

/* ---------- Sucesso (Fatia 3) ---------- */
.ds .cad-sucesso { text-align: center; padding: var(--space-sm) 0 var(--space-lg); }
.ds .cad-sucesso__check { --mark-size: 64px; font-size: 28px; margin-bottom: var(--space-md); }
.ds .cad-sucesso__texto { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 460px; margin: 0 auto var(--space-lg); }
.ds .cad-sucesso__cta { display: inline-flex; }

.ds .cad-sucesso-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); flex-wrap: wrap; }
.ds .cad-sucesso-card--upgrade { background: var(--color-bg-soft); }
.ds .cad-sucesso-card__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); margin: 0; }
@media (max-width: 560px) {
    .ds .cad-sucesso-card { flex-direction: column; align-items: stretch; text-align: left; }
    .ds .cad-sucesso-card .btn { width: 100%; }
}

/* ---------- Endereço (Fatia 2) ---------- */
.ds .ds-uf { text-transform: uppercase; max-width: 90px; }

/* ---------- Negócio / segmentação (Fatia 2) ---------- */
.ds .cad-seg__group { border: 0; padding: 0; margin: 0 0 var(--space-lg); }
.ds .cad-seg__legend { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-sm); padding: 0; }
.ds .cad-seg__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Toggle Sim/Não e chips de canais (hooks do segmentacao.js: .seg-active) */
.ds .seg-toggle, .ds .seg-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-family: var(--font-body); font-weight: 600; color: var(--color-text);
    background: #fff; border: 1px solid var(--color-border); border-radius: 999px;
    transition: all var(--dur-fast) var(--ease-smooth);
}
.ds .seg-toggle { padding: 10px 26px; font-size: var(--fs-body); }
.ds .seg-chip { padding: 8px 16px; font-size: var(--fs-sm); }
.ds .seg-toggle:hover, .ds .seg-chip:hover { border-color: var(--color-purple-400); }
.ds .seg-toggle:focus-visible, .ds .seg-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.ds .seg-toggle.seg-active, .ds .seg-chip.seg-active {
    background: var(--color-purple-700); border-color: var(--color-purple-700); color: #fff;
}

.ds .seg-detalhes { margin-top: var(--space-sm); }
.ds .seg-detalhes[hidden] { display: none !important; }

.ds .cad-seg__acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); flex-wrap: wrap; }
.ds .cad-seg__pular { font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: underline; }
.ds .cad-seg__pular:hover { color: var(--color-purple-700); }
@media (max-width: 640px) {
    .ds .cad-seg__acoes { flex-direction: column-reverse; align-items: stretch; }
    .ds .cad-seg__acoes .btn { width: 100%; }
    .ds .cad-seg__pular { text-align: center; }
}

/* ---------- Overlay de transição ---------- */
.ds .cad-wait { position: fixed; inset: 0; background: rgba(255,255,255,.75); z-index: 9999; align-items: center; justify-content: center; }
.ds .cad-wait__spinner { font-size: 40px; color: var(--color-purple-700); }