/* =============================================================================
   Tela de CADASTRO — mesma linguagem visual da tela de login.

   Carregada DEPOIS de views/_css/login-novo.css, que já traz:
     - a paleta neutra e os tokens de marca (--lg-*, emitidos por _tema.php);
     - o painel institucional inteiro (.lg-hero e filhos), que aqui é o MESMO
       markup, vindo de views/login/_hero.php.

   Este arquivo cuida só do que a tela de cadastro tem a mais: um formulário
   longo, em seções, com campos em duas colunas.

   Sem Bootstrap e sem Font Awesome, como no login: o grid é próprio (.cd-linha)
   e os ícones são SVG inline. Ficam apenas os CSS dos plugins de que o
   cadastro.js depende (chosen, sweetalert) — e nem esses trazem cor de marca.

   REGRA DE OURO: nenhuma cor de marca fixa aqui. Tudo por token.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    background: var(--lg-fundo);
    color: var(--lg-texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   Esqueleto da página
   ============================================================================= */

.cd-pagina {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cd-area {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: 22px 16px 40px;
}

.cd-card {
    width: 100%;
    max-width: 560px;
    background: var(--lg-superficie);
    border: 1px solid var(--lg-borda);
    border-radius: var(--lg-raio);
    box-shadow: var(--lg-sombra);
    padding: 26px 22px;
}

.cd-card-titulo {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.cd-card-sub {
    margin: 0 0 22px;
    color: var(--lg-texto-suave);
    font-size: .92rem;
}

/* =============================================================================
   Seções do formulário

   O formulário é longo (conta, dados, acesso, endereço, termos). Sem divisão
   ele vira uma parede de campos: a numeração dá noção de progresso e a legenda
   diz o que se pede em cada etapa — sem transformar numa wizard de vários
   passos, que aqui só aumentaria o número de toques.
   ============================================================================= */

.cd-secao { margin-bottom: 26px; }
.cd-secao:last-of-type { margin-bottom: 0; }

.cd-secao-cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--lg-borda);
}

/* O número usa a cor da loja — e o texto dele vem do MESMO par calculado por
   luminância que o botão usa, senão em loja de cor clara (#FFDD00) o número
   sumiria. */
.cd-secao-numero {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lg-primaria);
    color: var(--lg-primaria-texto);
    font-size: .78rem;
    font-weight: 700;
}

.cd-secao-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* =============================================================================
   Grid dos campos

   Grid próprio em vez do .row/.col-md-* do Bootstrap 3. Dois motivos:
     1. o Bootstrap não é mais carregado aqui;
     2. `.row` tem clearfix em ::before/::after — virariam itens de grid e
        empurrariam o primeiro campo de posição (armadilha já registrada no
        projeto).

   ⚠️ Os contêineres que o cadastro.js alterna com .show()/.hide()
   (#formularioPessoaFisica, #formularioPessoaJuridica, #rowCodigoExternoPolo,
   #rowCodigoExternoColaborador) são BLOCO, nunca grid: o jQuery.show() devolve
   `display:block` inline e mataria o grid.
   ============================================================================= */

.cd-linha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
}

.cd-campo { margin-bottom: 16px; min-width: 0; }

.cd-campo label,
.cd-campo .control-label {
    display: block;
    margin-bottom: 6px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--lg-texto);
}

/* "(usado para login)" e afins: informação de apoio, não rótulo. */
.cd-campo label small {
    font-weight: 400;
    color: var(--lg-texto-suave);
}

/* Linha rótulo + "Isento", nas inscrições estadual/municipal. */
.cd-label-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.cd-label-linha > label { margin-bottom: 0; }

.cd-isento {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--lg-texto-suave);
    cursor: pointer;
}

/* =============================================================================
   Campos

   ⚠️ NADA de `!important` em border-color: o cadastro.js marca campo inválido
   escrevendo `style="border-color:#FA5858"` direto no elemento, e um !important
   aqui venceria o inline e apagaria a sinalização de erro.
   ============================================================================= */

.cd-card .form-control {
    width: 100%;
    height: auto;
    padding: 11px 13px;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--lg-texto);
    background: var(--lg-superficie);
    border: 1px solid var(--lg-borda-forte);
    border-radius: var(--lg-raio-campo);
    box-shadow: none;
    transition: border-color var(--lg-transicao), box-shadow var(--lg-transicao);
}

.cd-card .form-control::placeholder { color: #9AA6B2; }

/* Foco neutro fixo, igual ao login: derivado da marca, o anel some nas lojas de
   cor clara — e foco é acessibilidade, não decoração. */
.cd-card .form-control:focus {
    outline: none;
    border-color: var(--lg-foco-borda);
    box-shadow: 0 0 0 4px var(--lg-foco);
}

.cd-card select.form-control { appearance: none; }

/* =============================================================================
   CEP: campo + botão de busca

   Substitui o .input-group do Bootstrap por flex. Mesmo resultado, sem depender
   do framework, e sem os cantos quadrados que o input-group força.
   ============================================================================= */

.cd-cep { display: flex; gap: 8px; }
.cd-cep .form-control { flex: 1 1 auto; }

.cd-botao-icone {
    flex: 0 0 auto;
    width: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lg-primaria);
    color: var(--lg-primaria-texto);
    border: 1px solid transparent;
    border-radius: var(--lg-raio-campo);
    cursor: pointer;
    transition: background var(--lg-transicao);
}
.cd-botao-icone:hover { background: var(--lg-primaria-hover); }
.cd-botao-icone:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--lg-foco); }
.cd-botao-icone svg { width: 18px; height: 18px; display: block; }

/* =============================================================================
   Senha: olho, força e requisitos
   Nomes de classe vindos do markup atual — o cadastro.js depende deles.
   ============================================================================= */

.password-wrapper { position: relative; }
.password-wrapper .form-control { padding-right: 46px; }

.btn-toggle-password {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--lg-texto-suave);
    cursor: pointer;
}
.btn-toggle-password:hover { color: var(--lg-texto); background: var(--lg-fundo); }
.btn-toggle-password:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lg-foco); }
.btn-toggle-password svg { width: 18px; height: 18px; display: block; }

.password-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.strength-bar {
    flex: 1 1 auto;
    height: 5px;
    background: var(--lg-borda);
    border-radius: 999px;
    overflow: hidden;
}

/* Semáforo: fraca/média/forte são estado do sistema, não identidade da marca —
   por isso é a única família de cores fixas aqui, como o vermelho de erro. */
.strength-fill { height: 100%; width: 0; border-radius: 999px; transition: width var(--lg-transicao), background var(--lg-transicao); }
.strength-fill.weak   { width: 33%; background: #C0392B; }
.strength-fill.medium { width: 66%; background: #B26A00; }
.strength-fill.strong { width: 100%; background: #1E7A46; }

.strength-text { font-size: .78rem; font-weight: 600; }
.strength-text.weak   { color: #C0392B; }
.strength-text.medium { color: #B26A00; }
.strength-text.strong { color: #1E7A46; }

.password-requirements {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--lg-fundo);
    border: 1px solid var(--lg-borda);
    border-radius: var(--lg-raio-campo);
}

.requirements-title {
    margin: 0 0 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--lg-texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.password-requirements ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }

.password-requirements li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--lg-texto-suave);
    transition: color var(--lg-transicao);
}

.password-requirements .req-icon {
    flex: 0 0 auto;
    width: 15px; height: 15px;
    color: var(--lg-borda-forte);
    transition: color var(--lg-transicao);
}

/* .valid é posta pelo cadastro.js conforme a senha digitada. */
.password-requirements li.valid { color: #1E7A46; }
.password-requirements li.valid .req-icon { color: #1E7A46; }

/* =============================================================================
   Aviso de qual credencial faz o login (e-mail ou CPF/CNPJ)
   ============================================================================= */

.cd-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 11px 13px;
    background: var(--lg-fundo);
    border: 1px solid var(--lg-borda);
    border-left: 3px solid var(--lg-primaria);
    border-radius: var(--lg-raio-campo);
    font-size: .84rem;
    color: var(--lg-texto-suave);
}
.cd-aviso strong { color: var(--lg-texto); }
.cd-aviso svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }

/* =============================================================================
   iCheck (radios de tipo de conta e checkboxes "Isento")

   O cadastro.js inicializa o plugin com os nomes de classe abaixo; eles não
   podem mudar sem mexer no JS, que é COMPARTILHADO com a tela antiga. Então o
   nome fica ("square-green") e o visual é redefinido aqui em CSS puro, na cor da
   loja — a tela antiga continua com o sprite verde, porque não carrega este
   arquivo. Sprite de imagem, além de não seguir o tema, não escala em tela
   retina.
   ============================================================================= */

.cd-card .icheckbox_square-green,
.cd-card .iradio_square-green,
.cd-card .icheckbox_sm,
.cd-card .iradio_sm {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 20px; height: 20px;
    margin: 0 8px 0 0;
    padding: 0;
    background: var(--lg-superficie);
    border: 1.5px solid var(--lg-borda-forte);
    cursor: pointer;
    transition: border-color var(--lg-transicao), background var(--lg-transicao);
}

.cd-card .icheckbox_square-green,
.cd-card .icheckbox_sm { border-radius: 6px; }

.cd-card .iradio_square-green,
.cd-card .iradio_sm { border-radius: 50%; }

.cd-card .icheckbox_sm,
.cd-card .iradio_sm { width: 17px; height: 17px; }

.cd-card .icheckbox_square-green.hover,
.cd-card .iradio_square-green.hover,
.cd-card .icheckbox_sm.hover,
.cd-card .iradio_sm.hover { border-color: var(--lg-foco-borda); }

.cd-card .icheckbox_square-green.checked,
.cd-card .iradio_square-green.checked,
.cd-card .icheckbox_sm.checked,
.cd-card .iradio_sm.checked {
    background: var(--lg-primaria);
    border-color: var(--lg-primaria);
}

/* A marca do "checado" é desenhada com border, então herda a cor de texto
   calculada por luminância — some do jeito certo tanto em loja escura quanto
   clara. */
.cd-card .icheckbox_square-green.checked::after,
.cd-card .icheckbox_sm.checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    width: 5px; height: 9px;
    margin: -6px 0 0 -3px;
    border: solid var(--lg-primaria-texto);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cd-card .iradio_square-green.checked::after,
.cd-card .iradio_sm.checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--lg-primaria-texto);
}

.cd-card .icheckbox_sm.checked::after { width: 4px; height: 8px; margin: -5px 0 0 -2px; }
.cd-card .iradio_sm.checked::after    { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }

/* O input real é escondido pelo plugin (position:absolute, opacity:0). */
.cd-card .icheckbox_square-green > input,
.cd-card .iradio_square-green > input,
.cd-card .icheckbox_sm > input,
.cd-card .iradio_sm > input { position: absolute; opacity: 0; margin: 0; }

/* Tipo de conta: as três opções em linha, com área de toque confortável. */
.cd-tipos { display: flex; flex-wrap: wrap; gap: 10px; }

.cd-tipos label {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid var(--lg-borda);
    border-radius: var(--lg-raio-campo);
    cursor: pointer;
    transition: border-color var(--lg-transicao), background var(--lg-transicao);
}
.cd-tipos label:hover { background: var(--lg-fundo); }

/* =============================================================================
   Chosen (estado e cidade)
   O plugin traz CSS próprio; aqui só o encaixe no campo desta tela.
   ============================================================================= */

.cd-card .chosen-container { width: 100% !important; font-size: .95rem; }

.cd-card .chosen-container-single .chosen-single {
    height: auto;
    padding: 11px 13px;
    background: var(--lg-superficie);
    border: 1px solid var(--lg-borda-forte);
    border-radius: var(--lg-raio-campo);
    box-shadow: none;
    color: var(--lg-texto);
    line-height: 1.4;
}

.cd-card .chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--lg-foco-borda);
    box-shadow: 0 0 0 4px var(--lg-foco);
}

.cd-card .chosen-container .chosen-drop {
    border-color: var(--lg-borda-forte);
    border-radius: 0 0 var(--lg-raio-campo) var(--lg-raio-campo);
    box-shadow: var(--lg-sombra);
}

.cd-card .chosen-container .chosen-results li.highlighted {
    background: var(--lg-primaria);
    color: var(--lg-primaria-texto);
}

/* =============================================================================
   Termos de uso
   ============================================================================= */

.cd-termos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    padding: 13px 15px;
    background: var(--lg-fundo);
    border: 1px solid var(--lg-borda);
    border-radius: var(--lg-raio-campo);
    font-size: .85rem;
    transition: border-color var(--lg-transicao), background var(--lg-transicao);
}

.cd-termos label { margin: 0; cursor: pointer; color: var(--lg-texto-suave); }

/* Links dos termos: neutros, não a cor da loja — mesmo motivo do login, em loja
   de cor clara texto na marca some sobre fundo claro. O sublinhado é que
   sinaliza o link. */
.cd-termos a { color: var(--lg-link); font-weight: 600; text-decoration: underline; }
.cd-termos a:hover { color: var(--lg-link-hover); }

/* .termos-error é posta/retirada pelo cadastro.js quando o aceite falta. */
.cd-termos.termos-error {
    border-color: var(--lg-erro);
    background: var(--lg-erro-fundo);
}

/* =============================================================================
   Ação principal e rodapé do cartão
   ============================================================================= */

.cd-botao {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lg-primaria-texto);
    background: var(--lg-primaria);
    border: 1px solid transparent;
    border-radius: var(--lg-raio-campo);
    cursor: pointer;
    transition: background var(--lg-transicao), transform var(--lg-transicao);
}
.cd-botao:hover { background: var(--lg-primaria-hover); }
.cd-botao:active { transform: translateY(1px); }
.cd-botao:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--lg-foco); }
.cd-botao svg { width: 18px; height: 18px; }

.cd-rodape {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--lg-borda);
    text-align: center;
    font-size: .88rem;
    color: var(--lg-texto-suave);
}
.cd-rodape a { color: var(--lg-link); font-weight: 600; text-decoration: none; }
.cd-rodape a:hover { color: var(--lg-link-hover); text-decoration: underline; }

/* =============================================================================
   Desktop

   Mesmo ponto de corte do login (992px), de propósito: as duas telas são o
   mesmo fluxo e virar duas colunas em larguras diferentes deixaria a costura
   aparente.

   O hero fica mais estreito que no login (34% contra 46%): aqui a coluna da
   direita carrega um formulário de duas colunas, e não um cartão de 440px.
   E fica GRUDADO no topo — o formulário é longo, e sem isso a marca sai de vista
   já no segundo campo, deixando o resto da rolagem sem contexto.

   ⚠️ O hero NÃO rola: quem rola é só o formulário, na barra da janela. Duas
   barras na mesma tela já é ruim; pior, a segunda não rolava conteúdo nenhum.
   O `.lg-hero::after` do login é um arco decorativo `position:absolute` com
   `bottom:-95%` — ele cai ~920px ABAIXO da borda de baixo do painel, e a base
   (`login-novo.css`) o recorta com `overflow:hidden`. Trocar isso por
   `overflow-y:auto` aqui transformava o arco recortado em área rolável: barra
   com ~2x a altura da viewport, rolando decoração. Deixe o `overflow` da base.
   ============================================================================= */

@media (min-width: 992px) {

    .cd-pagina { flex-direction: row; align-items: stretch; }

    .cd-pagina .lg-hero {
        flex: 0 0 34%;
        max-width: 440px;
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        /* Sem `overflow` aqui de propósito: vale o `hidden` da base — ver o
           aviso no topo deste bloco. */
    }

    .cd-area { align-items: flex-start; padding: 40px 32px; }

    .cd-card { max-width: 720px; padding: 38px 36px; }
    .cd-card-titulo { font-size: 1.6rem; }
    .cd-card-sub { margin-bottom: 26px; }

    /* Duas colunas só a partir daqui: no celular campo lado a lado espreme o
       toque e obriga a zoom. */
    .cd-linha-2 { grid-template-columns: 1fr 1fr; }
    .cd-linha-3 { grid-template-columns: 1fr 1fr 1fr; }
    .cd-linha-83 { grid-template-columns: 2fr 1fr; }
    .cd-linha-cep { grid-template-columns: minmax(0, 240px); }
}

/* Viewport BAIXA (notebook de 768px de altura, janela reduzida, barra de
   favoritos): o hero está travado em 100vh e agora não rola, então o que não
   couber é RECORTADO — e o que fica por último é o contato da loja, informação
   útil. Em vez de deixar o corte decidir, o que sai é o bloco do meio: os
   benefícios institucionais, conteúdo secundário, os mesmos que já saem no
   celular pelo mesmo motivo. Sem eles o painel fecha em ~470px (marca + frase
   + contato + assinatura), então cabe folgado em qualquer altura real. */
@media (min-width: 992px) and (max-height: 780px) {
    .cd-pagina .lg-beneficios { display: none; }
}

@media (min-width: 1400px) {
    .cd-card { max-width: 780px; padding: 44px 42px; }
}

/* =============================================================================
   Movimento
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}