/* ============================================================
   GymPR — gerador de ficha (Fase 2b)
   Reusa os tokens de gympr-site.css. Mobile-first: cada passo
   cabe na tela sem scroll.
   ============================================================ */

.gen-wrap { max-width: 560px; margin: 0 auto; padding: 24px 20px 64px; }

.gen-lead { font-family: var(--b); font-size: 16px; line-height: 1.5; color: var(--fg-2); margin: 8px 0 28px; max-width: 46ch; }

/* Uma tela por vez. `data-screen` é escrito pelo controlador. */
#gen-screen > [data-when]           { display: none; }
#gen-screen[data-screen="steps"]     [data-when="steps"],
#gen-screen[data-screen="loading"]   [data-when="loading"],
#gen-screen[data-screen="structure"] [data-when="structure"],
#gen-screen[data-screen="routine"]   [data-when="routine"],
#gen-screen[data-screen="pain"]      [data-when="pain"],
#gen-screen[data-screen="error"]     [data-when="error"] { display: block; }

#gen-progress { font-family: var(--m); font-size: 13px; color: var(--fg-3); margin: 0 0 8px; }
#gen-back { background: none; border: 0; color: var(--fg-3); font: inherit; cursor: pointer; padding: 4px 0; }
#gen-question { font-family: var(--d); font-size: 30px; line-height: 1.15; margin: 8px 0 24px; color: var(--fg); }

#gen-options { display: grid; gap: 10px; }
.gen-option {
  font: inherit; text-align: left; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg);
  cursor: pointer; min-height: 56px;
}
.gen-option:hover, .gen-option:focus-visible {
  border-color: var(--green-line); background: var(--green-soft); outline: none;
}

.gen-day { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0 0 12px; background: var(--bg-1); }
.gen-day-name  { font-family: var(--d); font-size: 20px; margin: 0; color: var(--fg); }
.gen-day-count { font-family: var(--m); font-size: 13px; color: var(--green); margin: 2px 0 12px; }

/* Silhueta do exercício escondido. Larguras alternadas pra não virar
   um bloco chapado — parece lista, que é o que é. */
.gen-blur {
  display: block; height: 12px; margin: 8px 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-3), var(--line));
}
.gen-blur:nth-child(odd)  { width: 78%; }
.gen-blur:nth-child(even) { width: 56%; }

#gen-email {
  width: 100%; font: inherit; padding: 15px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); margin: 20px 0 10px;
}

/* Erro de validação do email. Some quando vazio (sem caixa, sem borda) —
   quando tem texto ganha moldura + ícone, pra não depender só da cor. */
.gen-email-error { margin: 0; font-size: 13px; font-weight: 700; color: var(--fg); }
.gen-email-error:not(:empty) {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2);
}
.gen-email-error:not(:empty)::before { content: "⚠ "; }

#gen-reveal, .gen-cta {
  display: block; width: 100%; text-align: center; font: inherit; font-weight: 700;
  padding: 16px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--green); color: var(--green-ink); text-decoration: none;
}
#gen-reveal[disabled] { opacity: .6; cursor: progress; }
.gen-fine { font-size: 13px; color: var(--fg-3); margin: 10px 0 0; }
.gen-fine a { color: var(--fg-2); }

.gen-exercise {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line-2);
}
.gen-exercise img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--bg-3); }
.gen-exercise-name { margin: 0; color: var(--fg); }
.gen-exercise-sets { margin: 0; font-family: var(--m); font-size: 13px; color: var(--fg-2); }

#gen-error { color: var(--fg-2); margin: 12px 0; }