/* Tela de cadastro do lojista (/cadastro). */
.cad { gap: 20px; }
.cad-progresso { display: flex; flex-direction: column; gap: 8px; }
.cad-etapa { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cad-etapa__titulo { padding: 0; font-size: 1.05rem; font-weight: 650; margin-bottom: 16px; }
.cad-etapa__titulo:focus { outline: none; }
.cad-etapa__titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }

/* Escolha pessoa física / empresa */
.cad-tipo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cad-tipo__opcao { position: relative; cursor: pointer; }
.cad-tipo__opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cad-tipo__caixa {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; border-radius: var(--raio-p);
  border: 1.5px solid var(--borda-forte); background: var(--superficie-2); transition: border-color .12s, background .12s;
}
.cad-tipo__caixa > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cad-tipo__caixa .icone { width: 22px; height: 22px; color: var(--texto-3); flex: none; }
.cad-tipo__opcao:hover .cad-tipo__caixa { border-color: var(--primaria); }
.cad-tipo__opcao input:checked + .cad-tipo__caixa { border-color: var(--primaria); background: var(--primaria-suave); }
.cad-tipo__opcao input:checked + .cad-tipo__caixa .icone { color: var(--primaria); }
.cad-tipo__opcao input:focus-visible + .cad-tipo__caixa { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Endereço: CEP + rua, número + complemento, bairro */
.cad-endereco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
.cad-endereco__bairro { grid-column: 1 / -1; }

/* Senha */
.cad-senha { position: relative; }
.cad-senha .entrada { padding-right: 46px; width: 100%; }
.cad-senha__olho { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.cad-forca { display: flex; flex-direction: column; gap: 6px; }
.cad-forca__barras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cad-forca__barras span { height: 4px; border-radius: 99px; background: var(--superficie-3); transition: background .2s; }
.cad-forca[data-nivel="1"] .cad-forca__barras span:nth-child(-n+1) { background: var(--perigo); }
.cad-forca[data-nivel="2"] .cad-forca__barras span:nth-child(-n+2) { background: var(--alerta); }
.cad-forca[data-nivel="3"] .cad-forca__barras span:nth-child(-n+3) { background: var(--sucesso); }
.cad-forca[data-nivel="4"] .cad-forca__barras span { background: var(--sucesso); }
.cad-forca[data-nivel="1"] .campo__ajuda { color: var(--perigo); }
.cad-forca[data-nivel="2"] .campo__ajuda { color: var(--alerta); }
.cad-forca[data-nivel="3"] .campo__ajuda, .cad-forca[data-nivel="4"] .campo__ajuda { color: var(--sucesso); }

.cad-erro-geral { font-size: 13.5px; padding: 10px 12px; border-radius: var(--raio-p); background: var(--perigo-suave); }
.cad-erro-geral a { color: inherit; text-decoration: underline; font-weight: 600; }
.cad-acoes { display: flex; gap: 10px; }
.cad-acoes .botao--primario { flex: 1; }

@media (max-width: 720px) {
  .cad-endereco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cad-endereco__cep, .cad-endereco__rua { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .cad-tipo { grid-template-columns: minmax(0, 1fr); }
}