/* Elegir la lectura "una pregunta a la vez" (ver static/js/reading-wizard.js). */
.rw-hidden { display: none !important; }

.rw {
  background: var(--ink-soft, #141e30);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 32px);
  margin: 0 0 1rem;
}
/* Dentro del panel de interpretacion ya hay una caja: no duplicarla. */
.interpret-stepper .rw { background: none; border: 0; padding: 0; }

.rw-bars { display: flex; gap: 8px; margin-bottom: 22px; }
.rw-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(148, 163, 184, .22); transition: background .25s ease; }
.rw-bars i.on { background: var(--gold, #f5a623); }

.rw-step {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim, #94a3b8);
}
.rw-q {
  margin: 0 0 18px;
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 400;
  color: var(--star, #f1f5f9);
  outline: none;
}

.rw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .rw-grid, .rw-grid--3 { grid-template-columns: 1fr; }
}

.rw-choice {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  width: 100%;
  min-height: 72px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: var(--ink-elev, #1a2840);
  color: var(--star, #f1f5f9);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.rw-choice:hover { border-color: rgba(245, 166, 35, .55); }
.rw-choice:active { transform: scale(.99); }
.rw-choice:focus-visible { outline: 2px solid var(--gold, #f5a623); outline-offset: 2px; }
.rw-choice.is-on { border-color: var(--gold, #f5a623); background: var(--gold-soft, rgba(245, 166, 35, .12)); }
.rw-choice-title { font-size: 17px; font-weight: 500; }
.rw-choice-hint { font-size: 14px; color: var(--paper-dim, #94a3b8); }

.rw-summary { margin: -8px 0 18px; color: var(--paper-dim, #94a3b8); font-size: 15px; }
.rw-action .btn { width: 100%; }
.rw-action { margin-bottom: 4px; }

.rw-back {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 18px;
  color: var(--gold, #f5a623);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .rw-bars i, .rw-choice { transition: none; }
}