/* RCTECH — Cotizador wizard. Scoped to this module; depends on css/rc-modern.css tokens. */

/* Half the shared .rc-page-hero h1 size — this page's headline is a lead-in
   to the wizard card below, not the page's main visual anchor. Safe to
   override here since cotizador.css only loads on this page. */
.rc-page-hero h1 { font-size: clamp(1.2rem, 2.2vw, 1.875rem); }

/* Center only the headline over the wizard card — the breadcrumb stays
   left-aligned per the shared page-hero convention used site-wide.
   text-align alone isn't enough: the h1 has an inline max-width (22ch) that
   narrows its box below the wrap's full width, and without auto margins
   that narrowed box still sits flush left, so its centered text still
   visually leans left. */
.rc-page-hero h1 { text-align: center; margin-left: auto; margin-right: auto; }

/* Kill the "gelatinous" left-right wobble reported on mobile: dragging a
   finger sideways was rubber-banding the whole page. overflow-x:hidden was
   already set on body (rc-modern.css) but not on html, and neither disabled
   the elastic bounce itself — overscroll-behavior-x is the property that
   actually does that. touch-action:pan-y on the card is a second, more
   targeted line of defense: it tells the browser this element only ever
   pans vertically, so a sideways drag can't shove/rubber-band it at all,
   regardless of what's causing any stray horizontal overflow. */
@media (max-width: 760px) {
  html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  .rcw-card {
    touch-action: pan-y;
  }
}

.rcw-section { padding-bottom: var(--rc-section-pad); }

.rcw-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  box-shadow: var(--rc-shadow-2);
  padding: 40px 44px 32px;
}

@media (max-width: 640px) {
  .rcw-card { padding: 28px 20px 24px; border-radius: var(--rc-radius-sm); }
}

/* ---------- Progress ---------- */
.rcw-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.rcw-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--rc-bg-soft);
  overflow: hidden;
}
.rcw-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--rc-blue);
  border-radius: 999px;
  transition: width 0.4s var(--rc-ease);
}
.rcw-progress-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rc-blue-dark);
  min-width: 3ch;
  text-align: right;
}

/* ---------- Steps ---------- */
.rcw-step {
  display: none;
}
.rcw-step.is-active {
  display: block;
  animation: rcw-step-in 0.35s var(--rc-ease);
}
@keyframes rcw-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.rcw-question {
  font-size: 1.35rem;
  line-height: 1.3;
  margin-bottom: 20px;
}
/* JS focuses each step's heading (tabindex="-1") on step change purely so
   screen readers announce it — it's never reached by Tab, so the visible
   focus ring would only ever show as an unwanted flash. Covers the result
   step's <h2> too (".rcw-result h2"), which has no .rcw-question class. */
.rcw-step h2:focus { outline: none; }

/* Groups multiple sub-questions on one screen (e.g. POS status + business
   type, or system + terminals) — a divider between them keeps each
   question visually distinct even though they share one Continue. */
.rcw-subq + .rcw-subq {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rc-border);
}
/* Answering one question auto-scrolls the next .rcw-subq into view (see
   cotizador.js) — this keeps it from landing flush under the sticky header
   (.rc-header) instead of with a little breathing room below it. */
.rcw-subq {
  scroll-margin-top: 100px;
}

.rcw-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--rc-border-strong);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--rc-ink);
  transition: border-color 0.2s var(--rc-ease), background 0.2s var(--rc-ease);
}
.rcw-checkbox:hover { border-color: var(--rc-blue); background: var(--rc-surface-tint); }
.rcw-checkbox input { width: 18px; height: 18px; accent-color: var(--rc-blue); flex-shrink: 0; }

.rcw-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--rc-surface-tint);
  color: var(--rc-blue-dark);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
.rcw-info svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

/* ---------- Option rows (Sí/No, single list) ---------- */
.rcw-options {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}
.rcw-option {
  font-family: var(--rc-font);
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--rc-ink);
  background: var(--rc-surface);
  border: 1px solid var(--rc-border-strong);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s var(--rc-ease), background 0.2s var(--rc-ease), transform 0.15s var(--rc-ease);
}
.rcw-option:hover { border-color: var(--rc-blue); background: var(--rc-surface-tint); }
.rcw-option:active { transform: scale(0.99); }
.rcw-option:focus-visible { outline: 2px solid var(--rc-blue); outline-offset: 2px; }
.rcw-option.is-selected {
  border-color: var(--rc-blue);
  background: var(--rc-surface-tint);
  color: var(--rc-blue-dark);
  font-weight: 600;
}

/* ---------- Icon cards (business type) ---------- */
.rcw-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 560px) {
  .rcw-cards { grid-template-columns: repeat(2, 1fr); }
}
.rcw-card-tile {
  font-family: var(--rc-font);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rc-ink);
  background: var(--rc-surface);
  border: 1px solid var(--rc-border-strong);
  border-radius: 14px;
  padding: 20px 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--rc-ease), background 0.2s var(--rc-ease), transform 0.15s var(--rc-ease);
}
.rcw-card-tile:hover { border-color: var(--rc-blue); background: var(--rc-surface-tint); }
.rcw-card-tile:active { transform: scale(0.98); }
.rcw-card-tile:focus-visible { outline: 2px solid var(--rc-blue); outline-offset: 2px; }
.rcw-card-tile.is-selected {
  border-color: var(--rc-blue);
  background: var(--rc-surface-tint);
  color: var(--rc-blue-dark);
}
.rcw-card-icon { color: var(--rc-blue-dark); }
.rcw-card-icon svg { width: 30px; height: 30px; }

/* ---------- Form fields ---------- */
.rcw-field { margin-bottom: 14px; }
.rcw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rcw-field-row .rcw-field { margin-bottom: 14px; }
@media (max-width: 560px) {
  .rcw-field-row { grid-template-columns: 1fr; }
}
.rcw-field input {
  width: 100%;
  font-family: var(--rc-font);
  font-size: 1rem;
  color: var(--rc-ink);
  background: var(--rc-surface);
  border: 1px solid var(--rc-border-strong);
  border-radius: 12px;
  padding: 15px 16px;
  transition: border-color 0.2s var(--rc-ease);
}
.rcw-field input::placeholder { color: var(--rc-ink-faint); }
.rcw-field input:focus { outline: none; border-color: var(--rc-blue); }
.rcw-field input.is-invalid { border-color: #d93025; }

/* ---------- Actions ---------- */
.rcw-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.rcw-continue { flex: 1; justify-content: center; }
.rcw-back-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--rc-border-strong);
  background: var(--rc-surface);
  color: var(--rc-ink-muted);
  cursor: pointer;
  transition: border-color 0.2s var(--rc-ease), color 0.2s var(--rc-ease);
}
.rcw-back-btn svg { width: 18px; height: 18px; }
.rcw-back-btn:hover { border-color: var(--rc-blue); color: var(--rc-blue-dark); }
.rcw-back-btn[hidden] { display: none; }

.rcw-continue:disabled,
.rcw-continue[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* ---------- Inline form message (submit errors) ---------- */
.rcw-form-message {
  display: none;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  margin-top: 4px;
}
.rcw-form-message.is-visible { display: flex; }
.rcw-form-message--error { background: #fdecea; color: #c62828; }

/* ---------- Result screen ---------- */
.rcw-result { text-align: center; padding: 8px 0; }
.rcw-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rc-surface-tint);
  color: var(--rc-blue-dark);
  margin-bottom: 18px;
}
.rcw-result-icon svg { width: 26px; height: 26px; }
.rcw-result h2 { font-size: 1.4rem; margin-bottom: 10px; }
.rcw-result p { color: var(--rc-ink-muted); max-width: 42ch; margin: 0 auto 24px; line-height: 1.6; }
.rcw-result-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.rcw-result-link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rc-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Trust note ---------- */
.rcw-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rc-border);
  color: var(--rc-ink-faint);
  font-size: 0.82rem;
  text-align: center;
}
.rcw-note svg { width: 16px; height: 16px; flex-shrink: 0; }