/* Páginas internas do netspaces.com.br: cadastro, "preparando", afiliados.
   Reusa os tokens e os componentes de formulário do styles.css (--red, .cf-field,
   .btn-submit, .form-feedback, .container) — aqui só o que é específico delas.
   Todas têm o header escuro fixo, então o conteúdo começa abaixo de 72px. */

.page {
  min-height: 100vh;
  background: var(--light);
  padding: 112px 0 64px;
}

.page-narrow { max-width: 560px; margin: 0 auto; }
.page-wide   { max-width: 960px; margin: 0 auto; }

.page-head { text-align: center; margin-bottom: 28px; }
.page-head h1 {
  font-size: 30px;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.page-head p { color: var(--gray); font-size: 15px; line-height: 1.6; }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
}
.card + .card { margin-top: 20px; }

/* ── Selo do plano (preço + demonstração) ───────────────────────────────── */
.plan-badge {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--red-light);
  border: 1px solid rgba(225,29,72,.15);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
  text-align: center;
}
.plan-badge .price { font-size: 26px; font-weight: 800; color: var(--red); letter-spacing: -.02em; }
.plan-badge .per   { font-size: 14px; color: var(--gray); }
.plan-badge .trial {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-2);
}

/* ── Seletor de produtos do cadastro ─────────────────────────────────────── */
.product-picker { margin-bottom: 22px; }
.product-picker .pp-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray);
  margin-bottom: 10px;
}
.pp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pp-row + .pp-row { margin-top: 8px; }
.pp-row:hover { border-color: var(--red); }
.pp-row.on { border-color: var(--red); background: var(--red-light); }
.pp-row input { width: 18px; height: 18px; accent-color: var(--red); flex-shrink: 0; }
.pp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-name { font-weight: 700; color: var(--dark); font-size: 15px; }
.pp-name .pp-req {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}
.pp-desc { font-size: 12.5px; color: var(--gray); }
.pp-price { font-weight: 800; color: var(--red); white-space: nowrap; font-size: 15px; }
.pp-price .per { font-size: 12px; color: var(--gray); font-weight: 500; }
.pp-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--red-light);
  border: 1px solid rgba(225,29,72,.15);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--dark-2);
}
.pp-total strong { font-size: 22px; font-weight: 800; color: var(--red); letter-spacing: -.02em; }
.pp-total .per { font-size: 13px; color: var(--gray); font-weight: 500; }
.product-picker .trial {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-2);
  text-align: center;
}

/* ── Aviso de indicação (?ref=) ──────────────────────────────────────────── */
.ref-note {
  display: none;
  align-items: center;
  gap: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.ref-note.show { display: flex; }

/* ── Lista de garantias sob o formulário ─────────────────────────────────── */
.assurances { list-style: none; margin-top: 18px; display: grid; gap: 8px; }
.assurances li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--gray); line-height: 1.5;
}
.assurances i { color: var(--store); margin-top: 3px; flex-shrink: 0; }

.field-hint { font-size: 12px; color: var(--gray-light); margin-top: 5px; line-height: 1.4; }

/* Erro de validação: mesma linguagem da caixa vermelha do ERP. */
.form-error-box {
  display: none;
  gap: 12px;
  background: var(--red-light);
  border: 1px solid rgba(225,29,72,.25);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--red-dark);
}
.form-error-box.show { display: flex; }
.form-error-box ul { margin: 6px 0 0 16px; }
.form-error-box i { margin-top: 2px; }

/* `.hp-field` (honeypot) vive no styles.css: ele é usado também pelo formulário
   de contato da HOME, que carrega só aquele arquivo. */

/* ── Tela "preparando seu sistema" ───────────────────────────────────────── */
.prep-steps { list-style: none; margin: 26px 0; display: grid; gap: 2px; }
.prep-step {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 4px;
  font-size: 14.5px;
  color: var(--gray-light);
  transition: color .3s;
}
.prep-step .ico {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: all .3s;
}
.prep-step.done { color: var(--dark-2); }
.prep-step.done .ico { background: var(--store); border-color: var(--store); color: #fff; }
.prep-step.doing { color: var(--dark); font-weight: 600; }
.prep-step.doing .ico { border-color: var(--red); color: var(--red); }

.prep-note {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 13px;
  color: var(--gray);
  line-height: 1.55;
}
.prep-elapsed { font-size: 12px; color: var(--gray-light); text-align: center; margin-top: 14px; }

.btn-go {
  display: none;
  width: 100%;
  height: 50px;
  background: var(--store);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15.5px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  transition: filter .2s;
}
.btn-go.show { display: flex; }
.btn-go:hover { filter: brightness(1.07); }

/* ── Afiliados ───────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: all .2s;
}
.tab.active { color: var(--red); border-bottom-color: var(--red); }

.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.kpi strong { display: block; font-size: 22px; font-weight: 800; color: var(--dark); letter-spacing: -.02em; }
.kpi span { font-size: 12px; color: var(--gray); text-transform: uppercase; letter-spacing: .04em; }
.kpi.kpi-pending strong { color: var(--store); }

/* Link de indicação: o afiliado copia e divulga. */
.ref-link-box {
  display: flex; gap: 8px; align-items: stretch;
  margin-top: 8px;
}
.ref-link-box input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: var(--font);
  color: var(--dark-2);
  background: var(--light);
}
.btn-copy {
  padding: 0 16px;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.btn-copy:hover { background: var(--dark-2); }

.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--light);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.data-table td { padding: 12px; border-bottom: 1px solid var(--border); color: var(--dark-2); }
.data-table tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tag-ativo   { background: #dcfce7; color: #166534; }
.tag-demo    { background: #dbeafe; color: #1e40af; }
.tag-pendente{ background: #fef3c7; color: #92400e; }
.tag-inativo { background: #f1f5f9; color: var(--gray); }
.tag-pago    { background: #dcfce7; color: #166534; }

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-light);
}
.empty i { font-size: 34px; margin-bottom: 12px; display: block; opacity: .5; }
.empty p { font-size: 14px; }

.aff-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.aff-bar h1 { font-size: 24px; font-weight: 800; color: var(--dark); letter-spacing: -.02em; }
.aff-bar .who { font-size: 13px; color: var(--gray); margin-top: 3px; }
.btn-link {
  background: none;
  border: none;
  color: var(--gray);
  font-family: var(--font);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover { color: var(--red); }

.how-list { list-style: none; display: grid; gap: 16px; margin-top: 6px; }
.how-list li { display: flex; gap: 14px; align-items: flex-start; }
.how-list .n {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.how-list strong { display: block; color: var(--dark); font-size: 14.5px; margin-bottom: 3px; }
.how-list p { color: var(--gray); font-size: 13.5px; line-height: 1.55; }

@media (max-width: 640px) {
  .page { padding: 96px 0 48px; }
  .page-head h1 { font-size: 24px; }
  .card { padding: 20px; }
  .kpi-row { grid-template-columns: 1fr; }
}