/*
 * ONBOARDING
 * Checklist de primeiros passos no topo do dashboard (contas novas).
 * Reaproveita o bloco .panel; só estiliza a lista de passos.
 */

/* Espaço entre o checklist e a faixa de KPIs logo abaixo. */
.onboarding {
  margin-bottom: var(--space-5);
}

.onboarding__progress {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* A lista de passos é uma .divided-list (10_list.css); aqui só o específico.
   O <li> mantém .onboarding__step para o layout mobile e o modifier --done. */

/* Marcador: número (pendente) ou check verde (feito). */
.onboarding__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
}

.onboarding__check svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-success);
}

.onboarding__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.onboarding__body {
  flex: 1 1 auto;
  min-width: 0;
}

.onboarding__step-title {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.onboarding__step--done .onboarding__step-title {
  color: var(--color-text-muted);
}

.onboarding__step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.onboarding__tag {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* Mobile: o passo empilha e o botão vai para baixo, alinhado ao texto. */
@media (max-width: 640px) {
  .onboarding__step {
    flex-wrap: wrap;
  }

  .onboarding__body {
    flex-basis: calc(100% - 1.75rem - var(--space-3));
  }

  .onboarding__step .btn,
  .onboarding__tag {
    margin-left: calc(1.75rem + var(--space-3));
  }
}