/* Estado vazio: título, uma frase e a ação que resolve. Não é card: contorno tracejado, sem elevação. */

.empty-state {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  border: 1px dashed var(--line);
  border-radius: var(--radius-surface);
}

h2.empty-state-title {
  margin: 0;
  font-size: var(--font-size-card);
}

/* A página inteira vazia (primeiro acesso): o título é o da página, sem contorno. */
.empty-state:has(> h1) {
  padding: 0;
  border: 0;
}

h1.empty-state-title {
  margin: 0;
}

.empty-state > p {
  margin: 0 0 var(--space-2);
}

@media (width <= 390px) {
  .empty-state {
    padding: var(--space-4);
  }
}

/* Progresso real do começo (#275): o que já foi feito e o próximo passo, com ícone e texto, nunca só cor. */
.empty-state-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.empty-state-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.empty-state-step-icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state-steps [data-state="done"] {
  color: var(--muted);
}

.empty-state-steps [data-state="done"] .empty-state-step-icon {
  color: var(--success);
}

.empty-state-steps [data-state="next"] {
  font-weight: 700;
}

.empty-state-steps [data-state="next"] .empty-state-step-icon {
  color: var(--accent);
}

.empty-state-step-status {
  color: var(--muted);
  font-size: var(--font-size-support);
  font-weight: 400;
}

.empty-state-step-status::before {
  content: "· ";
}