/* Cadastro (login#52), conforme o Figma: cartão branco centralizado, medalhas e barra de progresso. */
:root {
  --cad-laranja: #bf5922;
  --cad-laranja-escuro: #a24a1b;
  --cad-amarelo: #ffc107;
  --cad-texto: #3d3d3d;
  --cad-rotulo: #6b6b6b;
  --cad-borda: #8a8a8a;
  --cad-cinza: #f2f2f2;
  --cad-sanfona: #dcdcdc;
  --cad-erro: #b3261e;
}

.cad-pagina { padding: 2rem 1rem; }
.cad-cartao {
  background: #fff;
  border-radius: 8px;
  max-width: 780px;
  margin: 0 auto;
  padding: 1.25rem 2.5rem 2rem;
  color: var(--cad-texto);
}
.cad-cartao--estreito { max-width: 460px; }
@media (max-width: 576px) { .cad-cartao { padding: 1rem; } }

.cad-medalhas { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.cad-medalhas img { width: 22px; height: auto; }
.cad-progresso {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: #e6e6e6;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.cad-progresso__barra {
  height: 100%;
  background: repeating-linear-gradient(-45deg, var(--cad-amarelo) 0 10px, #ffd24d 10px 20px);
}
.cad-progresso__texto {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; color: var(--cad-texto);
}

.cad-intro { text-align: center; margin-bottom: 1.5rem; }
.cad-titulo-secao { color: var(--cad-laranja); font-size: 1.05rem; font-weight: 500; margin: 1rem 0; }

.cad-grade { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cad-col-12 { grid-column: span 12; }
.cad-col-8 { grid-column: span 8; }
.cad-col-6 { grid-column: span 6; }
.cad-col-5 { grid-column: span 5; }
.cad-col-4 { grid-column: span 4; }
.cad-col-3 { grid-column: span 3; }
@media (max-width: 768px) { .cad-col-8, .cad-col-6, .cad-col-5, .cad-col-4, .cad-col-3 { grid-column: span 12; } }

.cad-campo label { display: block; color: var(--cad-rotulo); font-size: 0.9rem; margin-bottom: 0.3rem; }
.cad-campo .cad-obrigatorio { color: var(--cad-laranja); }
.cad-campo input:not([type="checkbox"]),
.cad-campo select,
.cad-campo textarea {
  width: 100%;
  border: 1px solid var(--cad-borda);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  background: #fff;
}
.cad-campo { position: relative; min-width: 0; }
/* O select escondido pelo select2 não pode herdar a largura e o padding dos campos (estoura a página). */
.cad-campo select.select2-hidden-accessible { width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }
.cad-campo .select2-container { width: 100% !important; }
.cad-campo .select2-container .select2-selection--single,
.cad-campo .select2-container .select2-selection--multiple {
  border: 1px solid var(--cad-borda);
  border-radius: 10px;
  min-height: 38px;
}
/* O tema centraliza textarea[placeholder] com line-height de 175px. */
.cad-campo textarea { line-height: 1.5; text-align: left; height: auto; min-height: 110px; resize: vertical; }
.cad-campo--erro input, .cad-campo--erro select, .cad-campo--erro textarea { border-color: var(--cad-erro); }
.cad-erro { color: var(--cad-erro); font-size: 0.8rem; margin: 0.25rem 0 0; }
.cad-ajuda { font-size: 0.8rem; margin-top: 0.25rem; }
.cad-ajuda a, .cad-link { color: var(--cad-laranja); text-decoration: none; }
.cad-contador { text-align: right; color: #9a9a9a; font-size: 0.8rem; }

.cad-alerta {
  border: 1px solid var(--cad-erro);
  color: var(--cad-erro);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.cad-aviso { border-color: var(--cad-laranja); color: var(--cad-texto); }

.cad-aceites { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin: 1.5rem 0 1rem; }
.cad-aceites label { font-size: 0.85rem; }

.cad-acoes { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.cad-botao {
  min-width: 125px;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.75rem;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cad-botao--primario { background: var(--cad-laranja); color: #fff; }
.cad-botao--primario:hover { background: var(--cad-laranja-escuro); color: #fff; }
.cad-botao--secundario { background: var(--cad-cinza); color: var(--cad-texto); }
.cad-botao--pequeno { min-width: 0; padding: 0.35rem 1.1rem; font-size: 0.85rem; }
.cad-pular { text-align: center; border-top: 1px solid #9a9a9a; max-width: 260px; margin: 1rem auto 0; padding-top: 0.75rem; }
.cad-pular a { color: #7a7a7a; text-decoration: none; }

.cad-sanfona { margin-top: 1rem; }
.cad-sanfona details { border-radius: 8px; overflow: hidden; margin-bottom: 0.75rem; background: #f7f7f7; }
.cad-sanfona summary {
  list-style: none;
  cursor: pointer;
  background: var(--cad-sanfona);
  padding: 0.65rem 1rem;
  font-weight: 500;
  display: flex; justify-content: space-between; align-items: center;
}
.cad-sanfona summary::-webkit-details-marker { display: none; }
.cad-sanfona summary::after { content: "\2304"; font-size: 1.1rem; }
.cad-sanfona details[open] summary::after { content: "\2303"; }
.cad-sanfona__corpo { padding: 0.75rem 1rem 1rem; }

.cad-itens { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.cad-itens li { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; }
.cad-itens img { width: 32px; }
.cad-itens small { display: block; color: var(--cad-rotulo); }
.cad-itens form { margin-left: auto; }

.cad-rede__rotulo { display: flex; align-items: center; gap: 0.35rem; }
.cad-rede__rotulo img { width: 16px; }
.cad-chave { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--cad-rotulo); margin-top: 0.3rem; }
.cad-chave.form-check { padding-left: 0; flex-direction: row-reverse; justify-content: flex-end; }
.cad-chave .form-check-input { margin: 0; float: none; background-color: #fbe3d4; border-color: #fbe3d4; }
.cad-chave .form-check-input:checked { background-color: var(--cad-laranja); border-color: var(--cad-laranja); }

.cad-final { text-align: center; }
.cad-final__nivel { color: var(--cad-laranja); font-weight: 500; }
.cad-final__nivel strong { color: #e8a317; font-size: 1.3rem; }
.cad-final__nivel--bronze strong { color: #b06a2c; }
.cad-final__nivel--prata strong { color: #8d8d8d; }
.cad-final__caixa {
  border: 1px solid var(--cad-borda);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin: 1.5rem auto;
  max-width: 300px;
  font-size: 0.85rem;
}
.cad-final__caixa button { background: none; border: 0; padding: 0; color: var(--cad-laranja); text-decoration: underline; }