/* ============================================================
   FINANCESAPP — WIZARD DE CADASTRO (Quiz de configuração inicial)
   Carregue após style_fase_b.css. Não altera nenhum estilo
   existente; apenas adiciona regras novas para #form-wizard e
   a transição "wipe" ao sair do cadastro.
   ============================================================ */

/* Necessário para o overlay de wipe se posicionar sobre o card */
.login-card {
  position: relative;
  overflow: hidden;
}

/* ------------------------------------------------------------
   TRANSIÇÃO WIPE (esquerda → direita)
   ------------------------------------------------------------ */
.wipe-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  transform: translateX(-100%);
  pointer-events: none;
  display: none;
}
.wipe-overlay.rodando {
  display: block;
  animation: wipeAcross 0.85s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes wipeAcross {
  0%   { transform: translateX(-100%); }
  48%  { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------
   ESTRUTURA GERAL DO WIZARD
   ------------------------------------------------------------ */
#form-wizard { display: flex; flex-direction: column; gap: 16px; }

.wizard-progress {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 4px;
}
.wizard-dot {
  width: 26px; height: 6px; border-radius: 4px;
  background: var(--bg3); border: 1px solid var(--border);
  transition: background 0.25s ease, border-color 0.25s ease, width 0.25s ease;
}
.wizard-dot.active { background: var(--accent); border-color: var(--accent); width: 34px; }
.wizard-dot.concluido { background: var(--green); border-color: var(--green); }

.wizard-step { display: none; flex-direction: column; gap: 14px; animation: fadeIn 0.3s ease; }
.wizard-step.active { display: flex; }

.wizard-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; margin: 0; }
.wizard-subtitle { font-size: 13px; color: var(--text2); margin: -8px 0 0; line-height: 1.5; }

/* ------------------------------------------------------------
   CARDS DE OPÇÃO (perfil, recebimento, meta sim/não)
   ------------------------------------------------------------ */
.wizard-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.wizard-options-2col { grid-template-columns: repeat(2, 1fr); }

.wizard-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 10px; text-align: center;
  background: var(--bg3); border: 1.5px solid var(--border); border-radius: 12px;
  color: var(--text2); cursor: pointer; font-family: var(--font-body);
  transition: border-color 0.2s ease, transform 0.15s ease, color 0.2s ease, background 0.2s ease;
}
.wizard-card:hover { border-color: var(--text3); transform: translateY(-2px); }
.wizard-card.active {
  border-color: var(--accent); color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
}
.wizard-card-icone { font-size: 24px; }
.wizard-card-label { font-size: 13px; font-weight: 600; }

/* Perfil tem 5 opções: deixa a última ocupar a linha toda em telas estreitas */
#wizard-perfil-options { grid-template-columns: repeat(2, 1fr); }
#wizard-perfil-options .wizard-card:last-child { grid-column: span 2; }

/* ------------------------------------------------------------
   BLOCOS CONDICIONAIS (dia único / múltiplos dias / meta)
   ------------------------------------------------------------ */
.wizard-sub-block {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; animation: fadeIn 0.25s ease;
}

.wizard-dia-add-row { display: flex; gap: 8px; }
.wizard-dia-add-row input { flex: 1; }
.wizard-dia-add-row .btn-secondary { white-space: nowrap; }

.wizard-dias-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wizard-dia-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 8px 6px 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.wizard-dia-chip button {
  background: none; border: none; color: var(--text3); cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 13px; line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.wizard-dia-chip button:hover { background: var(--red); color: #fff; }

.wizard-meta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.wizard-icone-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.wizard-icone-btn {
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; padding: 8px 0; border-radius: 10px;
  background: var(--bg2); border: 1.5px solid var(--border); cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.wizard-icone-btn:hover { transform: translateY(-1px); }
.wizard-icone-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg2)); }

/* ------------------------------------------------------------
   NAVEGAÇÃO
   ------------------------------------------------------------ */
.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.wizard-nav button { flex: 1; }

@media (max-width: 480px) {
  .wizard-options { grid-template-columns: 1fr 1fr; }
  .wizard-meta-row { grid-template-columns: 1fr; }
  .wizard-icone-grid { grid-template-columns: repeat(5, 1fr); }
}