/* USAVisa 2026 components — mirrors components/bundle.css of the "USAVisa Travel 2026" design system.
   Requires tokens.css. Wrap the page in .uv. */

.uv, .uv * { box-sizing: border-box; }
.uv {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface-000);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.uv :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.uv-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.uv-muted { color: var(--ink-muted); }

/* ---------- Button ---------- */
.uv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: var(--tap-min); padding: 0 22px;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: 700 16px/20px var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.uv-btn:active { transform: translateY(1px); }
.uv-btn--primary { background: var(--action); color: var(--on-action); }
.uv-btn--primary:hover { background: var(--action-hover); }
.uv-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.uv-btn--secondary:hover { border-color: var(--ink); }
.uv-btn--ghost { background: transparent; color: var(--ink); padding: 0 8px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.uv-btn--inverse { background: var(--on-inverse); color: var(--brand-navy); }
.uv-btn--lg { min-height: var(--button-lg); padding: 0 28px; font-size: 17px; }
.uv-btn--block { display: flex; width: 100%; }
.uv-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Badge ---------- */
.uv-badge {
  display: inline-flex; align-items: center; gap: var(--space-4);
  height: 26px; padding: 0 10px; border-radius: var(--radius-pill);
  font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}
.uv-badge .uv-icon { width: 14px; height: 14px; }
.uv-badge--choice { background: var(--action-soft); color: var(--on-action-soft); }
.uv-badge--info { background: var(--brand-sky); color: var(--ink); }
.uv-badge--success { background: var(--success-soft); color: var(--success); }

/* ---------- Header ---------- */
.uv-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  height: var(--header-h); padding: 0 var(--space-16);
  background: var(--surface-000); border-bottom: 1px solid var(--line);
}
.uv-header__brand { display: flex; align-items: center; gap: var(--space-8); text-decoration: none; color: var(--ink); }
.uv-header__logo { height: 30px; width: auto; display: block; }
.uv-logo--dark { display: none; }
[data-theme="dark"] .uv-logo--light { display: none; }
[data-theme="dark"] .uv-logo--dark { display: block; }
.uv-header__name { font: 800 16px/20px var(--font-sans); letter-spacing: -0.01em; }
.uv-header__name span { font-weight: 500; color: var(--ink-muted); }
.uv-header__actions { display: flex; align-items: center; gap: var(--space-4); }
.uv-header__menu { width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; border: 0; background: none; color: var(--ink); border-radius: var(--radius-pill); cursor: pointer; }
.uv-header__menu .uv-icon { width: 24px; height: 24px; }
.uv-header .uv-btn { min-height: var(--tap-min); padding: 0 16px; font-size: 14px; }

/* ---------- Sticky CTA (mobile) ---------- */
.uv-sticky {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-200); box-shadow: var(--shadow-sticky);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.uv-sticky__price { flex: none; display: flex; flex-direction: column; }
.uv-sticky__price small { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.uv-sticky__price strong { font: 800 18px/22px var(--font-sans); letter-spacing: -0.01em; }
.uv-sticky .uv-btn { flex: 1; }
@media (min-width: 960px) { .uv-sticky--mobile-only { display: none; } }

/* ---------- Trust bar ---------- */
.uv-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--radius-md); overflow: hidden; }
.uv-trust__item { background: var(--surface-200); padding: var(--space-16); display: flex; flex-direction: column; gap: 2px; }
.uv-trust__value { font: 800 28px/32px var(--font-sans); letter-spacing: -0.02em; display: flex; align-items: center; gap: 6px; }
.uv-trust__value .uv-icon { width: 20px; height: 20px; color: var(--star); fill: var(--star); stroke: var(--star); }
.uv-trust__label { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
@media (min-width: 720px) { .uv-trust { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Price card (transfer first) ---------- */
.uv-price {
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-24) var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-16); max-width: var(--measure);
}
.uv-price__head { display: flex; flex-direction: column; gap: var(--space-8); }
.uv-price__title { font: 700 22px/28px var(--font-sans); letter-spacing: -0.01em; margin: 0; }
.uv-price__lead { margin: 0; color: var(--ink-muted); }
.uv-price__qty { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.uv-price__qty-label { display: flex; flex-direction: column; }
.uv-price__qty-label strong { font-weight: 600; }
.uv-price__qty-label small { font: 500 13px/20px var(--font-sans); color: var(--success); }
.uv-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); height: var(--tap-min); }
.uv-stepper button { width: var(--tap-min); height: var(--tap-min); margin: -1.5px 0; border: 0; background: none; color: var(--ink); font: 600 20px/1 var(--font-sans); cursor: pointer; border-radius: var(--radius-pill); }
.uv-stepper output { min-width: 28px; text-align: center; font-weight: 700; }
.uv-price__box { background: var(--brand-sky); border-radius: var(--radius-md); padding: var(--space-16); display: flex; flex-direction: column; gap: 6px; }
.uv-price__method { display: flex; align-items: center; gap: var(--space-8); font: 600 14px/20px var(--font-sans); }
.uv-price__amount { display: flex; align-items: baseline; gap: var(--space-8); }
.uv-price__currency { font: 700 16px/20px var(--font-sans); color: var(--ink-muted); }
.uv-price__value { font: 800 44px/44px var(--font-sans); letter-spacing: -0.03em; }
.uv-price__save { font: 600 14px/20px var(--font-sans); color: var(--success); display: flex; align-items: center; gap: 6px; }
.uv-price__save .uv-icon { width: 16px; height: 16px; }
.uv-price__alt { display: flex; align-items: flex-start; gap: var(--space-8); font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.uv-price__alt strong { color: var(--ink); font-weight: 700; }
/* MercadoPago pago único (doc 042): precio MP tachado + % off sobre el precio de transferencia */
.uv-price__anchor { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; font: 500 15px/20px var(--font-sans); color: var(--ink-muted); }
.uv-price__anchor s { font-variant-numeric: tabular-nums; }
.uv-price__anchor .uv-badge { height: 22px; padding: 0 8px; letter-spacing: .04em; }
.uv-badge[hidden] { display: none; }
.uv-price__methods { display: block; margin: 2px 0 0; font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.uv-price__note { text-align: center; font: 500 13px/20px var(--font-sans); color: var(--ink-muted); margin: 0; }
.uv-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.uv-checks li { display: flex; gap: var(--space-12); align-items: flex-start; }
.uv-checks .uv-icon { color: var(--success); margin-top: 2px; }
@media (min-width: 720px) { .uv-price { padding: var(--space-32); } }

/* ---------- Choice list (radio cards, e.g. payment method) ---------- */
.uv-choices { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.uv-choice {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-12);
  min-height: var(--tap-min); margin: 0; padding: var(--space-16);
  background: var(--surface-200); border: 1.5px solid var(--line); border-radius: var(--radius-md);
  font: 400 15px/24px var(--font-sans); color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.uv-choice:hover { border-color: var(--line-strong); }
.uv-choice input[type="radio"] {
  -webkit-appearance: none; appearance: none; display: grid; place-items: center;
  width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-000); cursor: pointer;
}
.uv-choice input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--ink); transform: scale(0); transition: transform .15s ease; }
.uv-choice input[type="radio"]:checked { border-color: var(--ink); }
.uv-choice input[type="radio"]:checked::before { transform: scale(1); }
.uv-choice input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.uv-choice:has(input:checked), .uv-choice.is-active { border-color: var(--ink); background: var(--brand-sky); }
.uv-choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uv-choice__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-8); font: 700 16px/22px var(--font-sans); }
.uv-choice__desc { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.uv-choice__price { text-align: right; white-space: nowrap; font: 800 17px/22px var(--font-sans); letter-spacing: -0.01em; }
@media (max-width: 559px) {
  .uv-choice { grid-template-columns: 22px minmax(0, 1fr); align-items: start; }
  .uv-choice__price { grid-column: 2; text-align: left; }
}

/* ---------- Plan card ---------- */
.uv-plan {
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12);
}
.uv-plan__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12); }
.uv-plan__title { font: 700 17px/24px var(--font-sans); margin: 0; }
.uv-plan__desc { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.uv-plan__price { text-align: right; flex: none; }
.uv-plan__price small { display: block; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.uv-plan__price strong { font: 800 26px/30px var(--font-sans); letter-spacing: -0.02em; }
.uv-plan__meta { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.uv-plan__meta span { display: inline-flex; align-items: center; gap: 6px; }
.uv-plan__meta .uv-icon { width: 16px; height: 16px; }

/* ---------- Compare table (plans side by side; stacks per row below 720px) ---------- */
.uv-compare-wrap { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.uv-compare { width: 100%; border-collapse: collapse; font: 500 14px/20px var(--font-sans); }
.uv-compare th, .uv-compare td { padding: var(--space-12) var(--space-16); text-align: left; vertical-align: top; }
.uv-compare tbody tr { border-top: 1px solid var(--line); }
.uv-compare thead th { font: 700 15px/20px var(--font-sans); background: var(--surface-100); }
.uv-compare thead .uv-compare__featured { background: var(--brand-sky); }
.uv-compare tbody th { font-weight: 700; }
.uv-compare td { color: var(--ink-muted); }
.uv-compare__value { display: inline-flex; align-items: flex-start; gap: 6px; }
.uv-compare__yes { color: var(--success); }
.uv-compare__no { color: var(--ink-subtle); }
.uv-compare__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 719px) {
  .uv-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .uv-compare, .uv-compare tbody, .uv-compare tr, .uv-compare th, .uv-compare td { display: block; }
  .uv-compare tbody tr { padding: var(--space-16); }
  .uv-compare tbody tr:first-child { border-top: 0; }
  .uv-compare tbody th { padding: 0 0 var(--space-8); }
  .uv-compare td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-12); padding: var(--space-4) 0; }
  .uv-compare td::before { content: attr(data-plan); color: var(--ink); font-weight: 600; }
}

/* ---------- Steps ---------- */
.uv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.uv-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-16); position: relative; padding-bottom: var(--space-24); }
.uv-step:last-child { padding-bottom: 0; }
.uv-step::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--line); border-radius: 2px; }
.uv-step:last-child::before { display: none; }
.uv-step__num { width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--brand-sky); color: var(--ink); font: 800 16px/1 var(--font-sans); }
.uv-step:last-child .uv-step__num { background: var(--action); color: var(--on-action); }
.uv-step__title { font: 700 17px/24px var(--font-sans); margin: 8px 0 4px; }
.uv-step__text { margin: 0; color: var(--ink-muted); }

/* ---------- Review ---------- */
.uv-review { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.uv-review__who { display: flex; align-items: center; gap: var(--space-12); }
.uv-review__avatar { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--brand-sky); display: grid; place-items: center; font: 700 14px/1 var(--font-sans); }
.uv-review__name { font-weight: 700; line-height: 20px; }
.uv-review__date { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.uv-review__stars { display: flex; gap: 2px; color: var(--star); }
.uv-review__stars .uv-icon { width: 16px; height: 16px; fill: var(--star); stroke: var(--star); }
.uv-review__text { margin: 0; }
.uv-review__source { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.uv-review__stars .uv-icon.is-empty { fill: none; stroke: var(--line-strong); }
.uv-review__reply { background: var(--surface-100); border-radius: var(--radius-sm); padding: var(--space-12) var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); }
.uv-review__reply-title { display: flex; align-items: center; gap: var(--space-8); font: 700 13px/20px var(--font-sans); }
.uv-review__reply-title .uv-icon { width: 16px; height: 16px; color: var(--ink-muted); }
.uv-review__reply p { margin: 0; font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.uv-review__more { align-self: flex-start; min-height: var(--tap-min); margin: calc(var(--space-12) * -1) 0; padding: 0; border: 0; background: none; color: var(--ink); font: 700 15px/20px var(--font-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.uv-review__more[hidden] { display: none; }

/* ---------- Chip (filter toggle) ---------- */
.uv-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.uv-chip {
  display: inline-flex; align-items: center; gap: var(--space-8); flex: none;
  min-height: var(--tap-min); padding: 0 var(--space-16);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-200); color: var(--ink); font: 600 15px/20px var(--font-sans); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.uv-chip:hover { border-color: var(--ink); }
.uv-chip__count { font-weight: 500; color: var(--ink-muted); }
.uv-chip .uv-icon { display: none; width: 16px; height: 16px; }
.uv-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface-000); }
.uv-chip[aria-pressed="true"] .uv-chip__count { color: inherit; }
.uv-chip[aria-pressed="true"] .uv-icon { display: block; }

/* ---------- Status (result of a payment or an access request) ---------- */
.uv-status {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-16);
  max-width: var(--measure); margin: 0 auto; padding: var(--space-32) var(--space-16); text-align: center;
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.uv-status__icon { width: 64px; height: 64px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--brand-sky); color: var(--ink); }
.uv-status__icon .uv-icon { width: 32px; height: 32px; }
.uv-status--success .uv-status__icon { background: var(--success-soft); color: var(--success); }
.uv-status--warning .uv-status__icon { color: var(--warning); }
.uv-status--danger .uv-status__icon { background: var(--action-soft); color: var(--danger); }
.uv-status__title { font: 800 30px/36px var(--font-sans); letter-spacing: -0.015em; margin: 0; }
.uv-status__text { margin: 0; max-width: 520px; color: var(--ink-muted); font-size: 17px; line-height: 26px; }
.uv-status__text strong { color: var(--ink); }
.uv-status__actions { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; max-width: 360px; }
.uv-status__note { margin: 0; font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
@media (min-width: 720px) { .uv-status { padding: var(--space-48) var(--space-32); } }

/* ---------- FAQ ---------- */
.uv-faq { display: flex; flex-direction: column; gap: var(--space-8); }
.uv-faq details { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); }
.uv-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--tap-min); padding: var(--space-12) var(--space-16); font: 700 16px/22px var(--font-sans); }
.uv-faq summary::-webkit-details-marker { display: none; }
.uv-faq summary .uv-icon { transition: transform .2s ease; color: var(--ink-muted); }
.uv-faq details[open] summary .uv-icon { transform: rotate(180deg); }
.uv-faq details p { margin: 0; padding: 0 var(--space-16) var(--space-16); color: var(--ink-muted); }

/* ---------- Link row (services & tools) ---------- */
.uv-links { display: flex; flex-direction: column; background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.uv-link { display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); min-height: 64px; text-decoration: none; color: var(--ink); }
.uv-link + .uv-link { border-top: 1px solid var(--line); }
.uv-link__icon { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--brand-sky); display: grid; place-items: center; color: var(--ink); }
.uv-link__title { font-weight: 700; line-height: 20px; display: flex; align-items: center; gap: var(--space-8); }
.uv-link__desc { display: block; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.uv-link > .uv-icon { color: var(--ink-subtle); }

/* ---------- Blog card ---------- */
.uv-post { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-16); align-items: start; text-decoration: none; color: var(--ink); }
.uv-post__img { width: 88px; height: 88px; border-radius: var(--radius-md); background: var(--brand-sky); color: var(--ink-subtle); overflow: hidden; display: grid; place-items: center; }
.uv-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uv-post__body { display: flex; flex-direction: column; gap: 4px; }
.uv-post__cat { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.uv-post__title { font: 700 16px/22px var(--font-sans); margin: 0; }
.uv-post__meta { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
@media (min-width: 720px) {
  .uv-post { grid-template-columns: 1fr; }
  .uv-post__img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

/* ---------- Sections ---------- */
.uv-section { padding: var(--space-48) var(--space-16); }
.uv-section--alt { background: var(--surface-100); }
.uv-section--inverse { background: var(--surface-inverse); color: var(--on-inverse); }
.uv-section__eyebrow { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-8); }
.uv-section__title { font: 800 30px/36px var(--font-sans); letter-spacing: -0.015em; margin: 0 0 var(--space-24); }
@media (min-width: 960px) { .uv-section { padding: var(--space-80) var(--space-24); } }

/* ---------- Step bar (segmented progress of a multi-step form) ----------
   nav.uv-stepbar > ol.uv-stepbar__list > li.uv-stepbar__item--{completed|active|available|blocked}
   > a.uv-stepbar__seg (span with aria-disabled when blocked). One flexible segment per step,
   no scroll. Names under each segment; from 900px down only the active name; below 720px
   no names and the __now line ("Paso N de M · nombre") instead. */
.uv-stepbar { font-family: var(--font-sans); }
.uv-stepbar__list { display: flex; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.uv-stepbar__item { flex: 1 1 0; min-width: 0; }
.uv-stepbar__seg { position: relative; display: flex; flex-direction: column; gap: var(--space-8); width: 100%; min-height: var(--tap-min); padding: var(--space-4) 0; border-radius: var(--radius-sm); color: var(--ink); font: 500 13px/20px var(--font-sans); text-decoration: none; }
.uv-stepbar__seg:hover { color: var(--ink); text-decoration: none; }
a.uv-stepbar__seg:not([aria-current]):hover .uv-stepbar__text { text-decoration: underline; text-underline-offset: 3px; }
.uv-stepbar__seg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.uv-stepbar__item--active .uv-stepbar__seg { cursor: default; }
.uv-stepbar__item--blocked .uv-stepbar__seg { color: var(--ink-muted); cursor: default; }
.uv-stepbar__bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--line); transition: background-color .15s ease; }
.uv-stepbar__item--completed .uv-stepbar__bar { background: var(--ink); }
.uv-stepbar__item--active .uv-stepbar__bar { background: var(--action); }
.uv-stepbar__item--available .uv-stepbar__bar { background: var(--line-strong); }
.uv-stepbar__label { display: flex; align-items: flex-start; gap: var(--space-8); min-width: 0; }
.uv-stepbar__marker { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; font: 700 12px/1 var(--font-sans); }
.uv-stepbar__marker .uv-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.uv-stepbar__item--completed .uv-stepbar__marker { background: var(--ink); color: var(--surface-000); }
.uv-stepbar__item--active .uv-stepbar__marker { background: var(--action); color: var(--on-action); }
.uv-stepbar__item--available .uv-stepbar__marker { border: 2px solid var(--ink); color: var(--ink); }
.uv-stepbar__item--blocked .uv-stepbar__marker { color: var(--ink-muted); }
.uv-stepbar__item--blocked .uv-stepbar__marker .uv-icon { width: 16px; height: 16px; stroke-width: 1.75; }
.uv-stepbar__text { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
.uv-stepbar__item--active .uv-stepbar__text { font-weight: 700; }
.uv-stepbar__state,
.uv-stepbar__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.uv-stepbar__now { display: none; }
@media (max-width: 1099px) {
  .uv-stepbar__seg { font-size: 12px; line-height: 16px; }
  .uv-stepbar__marker { width: 18px; height: 18px; }
}
@media (max-width: 899px) {
  .uv-stepbar__item--active { flex-grow: 2; }
  .uv-stepbar__item:not(.uv-stepbar__item--active) .uv-stepbar__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 719px) {
  .uv-stepbar__list { gap: var(--space-4); margin-block: calc(var(--space-12) * -1); }
  .uv-stepbar__item--active { flex-grow: 1; }
  .uv-stepbar__seg { justify-content: center; padding: 0; }
  .uv-stepbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .uv-stepbar__now { display: block; margin: var(--space-4) 0 0; color: var(--ink-muted); font: 500 13px/20px var(--font-sans); }
  .uv-stepbar__now strong { color: var(--ink); font-weight: 700; }
}

/* ---------- Progress (navy fill, success when complete, no knob) ---------- */
.uv-progress { display: block; width: 100%; height: 8px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.uv-progress__bar { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .15s ease; }
.uv-progress--done .uv-progress__bar { background: var(--success); }

/* ---------- Stages (process tracker: icon + word per state) ---------- */
.uv-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.uv-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); text-align: center; }
.uv-stage::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; border-radius: 2px; background: var(--line); }
.uv-stage:first-child::before { display: none; }
.uv-stage--done::before, .uv-stage--current::before { background: var(--ink); }
.uv-stage__marker { width: 32px; height: 32px; margin-bottom: var(--space-4); border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--surface-100); border: 2px solid var(--line); color: var(--ink-subtle); font: 800 14px/1 var(--font-sans); }
.uv-stage__marker .uv-icon { width: 16px; height: 16px; stroke-width: 2.5; }
.uv-stage--done .uv-stage__marker { background: var(--ink); border-color: var(--ink); color: var(--surface-000); }
.uv-stage--current .uv-stage__marker { background: var(--surface-000); border-color: var(--ink); color: var(--ink); }
.uv-stage__label { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.uv-stage--done .uv-stage__label, .uv-stage--current .uv-stage__label { color: var(--ink); }
.uv-stage--current .uv-stage__label { font-weight: 700; }
.uv-stage__state { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.uv-stage--done .uv-stage__state { color: var(--success); }
.uv-stages__summary { display: none; margin: var(--space-12) 0 0; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.uv-stages__summary strong { color: var(--ink); font-weight: 700; }
@media (max-width: 719px) {
  .uv-stage__label, .uv-stage__state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .uv-stages__summary { display: block; }
}

/* ---------- Notice (inline status message: icon + text, never color alone) ---------- */
.uv-notice { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); background: var(--brand-sky); color: var(--ink); font: 500 14px/20px var(--font-sans); }
.uv-notice > .uv-icon { flex: none; color: var(--ink); }
.uv-notice strong { font-weight: 700; }
.uv-notice--success { background: var(--success-soft); }
.uv-notice--success > .uv-icon { color: var(--success); }
.uv-notice--danger { background: var(--action-soft); }
.uv-notice--danger > .uv-icon { color: var(--danger); }
.uv-notice--neutral { background: var(--surface-100); border: 1px solid var(--line); }

/* No-JS fallback: follow the OS theme for the logo swap */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .uv-logo--light { display: none; }
  :root:not([data-theme]) .uv-logo--dark { display: block; }
}