/* ROA Credit — the qualification form (aplicar.html)
   Source of truth: AESTHETIC-THESIS.md §7. Governing law: EXPLAIN every
   field, never cut one. One question per screen, 56px tap targets, 24px
   questions, 20px body. BANNED here as everywhere: gradients of any kind,
   text-shadow, emoji, colour as the only signal. Loads after tokens.css
   and base.css. */

/* ── Shell ─────────────────────────────────────────────────────────── */
.form-shell {
  padding-block: var(--s-6) var(--s-9);
}

.wizard { display: block; }

.wizard-topbar {
  margin-bottom: var(--s-5);
}

.wizard-progress {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-muted);
}

/* Each question lives on its own screen. No-JS baseline: every screen is
   a normal block, stacked, scrollable — the whole form on one page.
   JS adds [data-active] to exactly one screen per form and hides the
   rest via the rule below; without JS this rule never applies. */
.screen {
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--border);
}
.screen:first-of-type { padding-top: 0; }
.screen:last-of-type { border-bottom: 0; }

.wizard[data-js-enhanced] .screen { display: none; }
.wizard[data-js-enhanced] .screen[data-active] { display: block; }

/* Plain (question-free) screens: bridge, E0, confirmation */
.screen--plain {
  padding-block: var(--s-7);
}
[data-js-enhanced-root] .screen--plain:not([data-active]) { display: none; }

.screen-question {
  font-family: var(--font-display);
  font-size: var(--t-question);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
  padding: 0;
  border: 0;
  text-wrap: balance;
}
.screen-question--sub { font-size: var(--t-decision); margin-top: var(--s-6); }

fieldset {
  border: 0;
  margin: 0 0 var(--s-5);
  padding: 0;
  min-width: 0;
}

.screen-help {
  font-size: var(--t-body);
  color: var(--ink-muted);
  margin: 0 0 var(--s-5);
  max-width: var(--measure);
}

.reassurance {
  font-size: var(--t-body);
  color: var(--ink-muted);
  margin: var(--s-4) 0 0;
  max-width: var(--measure);
}

/* ── Tap-select groups — radio and checkbox share the same look ─────── */
.tap-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}

.tap-option {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--t-body);
  line-height: var(--lh-tight);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tap-option:hover { background: var(--surface-raised); }

.tap-option input[type="radio"],
.tap-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--primary);
}

.tap-option span { flex: 1 1 auto; }

.tap-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--surface-raised);
  font-weight: 700;
}

/* ── Text and phone fields ───────────────────────────────────────────── */
.field-label {
  display: block;
  font-size: var(--t-body);
  font-weight: 700;
  margin: var(--s-5) 0 var(--s-2);
}

.text-field input[type="text"],
.text-field input[type="tel"],
.phone-field input[type="tel"] {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-decision);
  font-variant-numeric: tabular-nums;
}

.phone-field {
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
}
.phone-prefix {
  display: flex;
  align-items: center;
  padding-inline: var(--s-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  font-size: var(--t-decision);
  font-weight: 700;
}
.phone-field input[type="tel"] { flex: 1 1 auto; }

/* ── Consent checkboxes — habeas data. Full contrast, body size,
   never a grey box, never pre-checked (enforced in markup, not CSS). ── */
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 0 0 var(--s-4);
  cursor: pointer;
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  accent-color: var(--primary);
}
.consent-check:has(input:checked) {
  border-color: var(--primary);
  background: var(--surface-raised);
}
.consent-check a { font-weight: 700; }

/* ── Errors — plain Spanish, reassuring, never colour-only ──────────── */
.field-error {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin: var(--s-2) 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  border-left: 4px solid var(--danger);
  background: var(--danger-tint);
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 700;
}
.field-error::before {
  content: "Atención:";
  font-weight: 700;
}
.field-error[hidden] { display: none; }

/* ── Navigation band — Continuar always the primary, full-width ─────── */
.screen-nav {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.screen-nav--split { flex-direction: column; }

.btn-link {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: var(--s-2) 0;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: var(--tap);
}
.btn-link:hover { color: var(--ink); }

/* ── E0 and other plain screens — prose, not a form ──────────────────── */
.screen--plain h2 { font-size: var(--t-h2); }
.screen--plain h3 { font-size: var(--t-h3); margin-top: var(--s-6); }
.screen--plain p { font-size: var(--t-body); }
.screen--plain .lead { font-size: var(--t-decision); }

.plain-list {
  margin: 0 0 var(--s-5);
  padding-left: var(--s-5);
  font-size: var(--t-body);
}
.plain-list li { margin-bottom: var(--s-3); }

.fine-print {
  font-size: var(--t-small);
  color: var(--ink-muted);
}

/* ── Confirmation screen — calm, administrative, receipt-like ───────── */
.screen--confirm [data-radicado-display],
.screen--confirm [data-telefono-display] {
  font-variant-numeric: tabular-nums;
}

/* ── Resume banner — shown by JS when a saved answer set is restored ── */
.resume-banner {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--radius);
  border-left: 4px solid var(--info);
  background: var(--info-tint);
  font-size: var(--t-body);
}
.resume-banner__label { font-weight: 700; }
.resume-banner button {
  background: none; border: 0; padding: 0;
  color: var(--primary); font-weight: 700; text-decoration: underline;
  cursor: pointer; font-size: var(--t-body); font-family: var(--font-ui);
}

/* ── Reveal targets (conditional sub-fields) ─────────────────────────── */
[data-reveal-target][hidden] { display: none; }