/* USAVisa Travel - V4 skin for /tramite and its immediate screens (doc 043).
   Everything is scoped under body.uv-v4, so the legacy look of every other page that shares
   these views is untouched. Colors, typography, buttons, inputs, tabs, cards and alerts only:
   no layout or logic changes.
   Load order: v4/tokens.css, v3/components.css, then this file (after the legacy page CSS). */

/* ---------- Forced light theme ----------
   The head partial is shared with the rest of the site, so <html data-theme="light"> is set by a
   script at the top of <body>. These values are a safety net: even if that attribute is missing,
   the dark token blocks of tokens.css (which live on :root) can never reach this page. */
body.uv-v4 {
    color-scheme: light;
    --brand-sky: #eaf0fd;
    --surface-000: #ffffff;
    --surface-100: #f5f7fb;
    --surface-200: #ffffff;
    --ink: #0a1f44;
    --ink-muted: #4a5571;
    --ink-subtle: #7c87a1;
    --line: #dde2ec;
    --line-strong: #7c87a1;
    --action: #dc0326;
    --action-hover: #b8001f;
    --on-action: #ffffff;
    --action-soft: #fde8eb;
    --on-action-soft: #b8001f;
    --focus: #1f4fd1;
    --success: #0f7a4a;
    --success-soft: #e3f4ec;
    --danger: #9e1a2a;
    --shadow-card: 0 1px 2px rgba(10,31,68,0.06), 0 8px 24px rgba(10,31,68,0.08);
}

body.uv-v4 .uv-header,
body.uv-v4 main {
    font-family: var(--font-sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

body.uv-v4 main :focus-visible,
body.uv-v4 .uv-header :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* ---------- Header (header_v4.php, tramite variant) ---------- */
body.uv-v4 .v3-header { display: block; height: auto; padding: 0; }
body.uv-v4 .v3-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
    height: var(--header-h); padding: 0 var(--space-16);
    max-width: calc(var(--container-max) + 48px); margin: 0 auto;
}
body.uv-v4 .uv-header__help { gap: 6px; }
body.uv-v4 .uv-header__help .uv-icon { width: 18px; height: 18px; }
body.uv-v4 .uv-header .uv-btn { min-height: var(--tap-min); }
@media (min-width: 960px) {
    body.uv-v4 .v3-header__inner { padding: 0 var(--space-24); }
    body.uv-v4 .uv-header__logo { height: 34px; }
}

/* ---------- Shared cards ---------- */
body.uv-v4 .tramite-ultralight__card,
body.uv-v4 .tramite-status__card,
body.uv-v4 .tramite-additional__card {
    background: var(--surface-200);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* The legacy pages reserved room for the fixed 118px navbar; the V4 header is sticky and 60px. */
body.uv-v4 .tramite-ultralight,
body.uv-v4 .tramite-status {
    padding-top: var(--space-32);
    padding-bottom: var(--space-48);
    min-height: calc(100vh - var(--header-h));
    background: var(--surface-100);
}
body.uv-v4 .tramite-additional {
    padding: var(--space-32) 0 var(--space-48);
    background: var(--surface-100);
}
body.uv-v4.tramite-additional-body { background: var(--surface-100); color: var(--ink); }

@media (min-width: 768px) {
    body.uv-v4 .tramite-ultralight,
    body.uv-v4 .tramite-status { padding-top: var(--space-48); padding-bottom: var(--space-80); }
    body.uv-v4 .tramite-additional { padding: var(--space-48) 0 var(--space-80); }
}

/* ---------- Badge / pretitle ---------- */
body.uv-v4 .tramite-ultralight__badge,
body.uv-v4 .tramite-additional__badge,
body.uv-v4 .tramite-status__pretitle {
    background: var(--brand-sky);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: var(--radius-pill);
}

/* ---------- Typography ---------- */
body.uv-v4 .tramite-ultralight__title,
body.uv-v4 .tramite-additional__title,
body.uv-v4 .tramite-status__title {
    font-family: var(--font-sans);
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.02em;
}
body.uv-v4 .tramite-ultralight__subtitle,
body.uv-v4 .tramite-additional__subtitle,
body.uv-v4 .tramite-status__description {
    font-family: var(--font-sans);
    color: var(--ink-muted);
}
body.uv-v4 .tramite-status__hint,
body.uv-v4 .tramite-ultralight__footer-link { color: var(--ink-muted); }
body.uv-v4 .tramite-status__hint a,
body.uv-v4 .tramite-ultralight__footer-link a { color: var(--action); font-weight: 700; }
body.uv-v4 .tramite-status__hint a:hover,
body.uv-v4 .tramite-ultralight__footer-link a:hover { color: var(--action-hover); }

/* ---------- Labels and helper text ---------- */
body.uv-v4 .tramite-ultralight__label {
    font-family: var(--font-sans);
    color: var(--ink-muted);
    font-weight: 700;
}
body.uv-v4 .tramite-ultralight__label-icon { color: var(--brand-navy, var(--ink)); }
body.uv-v4 .tramite-ultralight__helper-text { color: var(--ink-muted); font-family: var(--font-sans); }
/* Labels of the "additional info" form carry style="color:gray" inline, so !important is required */
body.uv-v4 .tramite-additional__card label.control-label { color: var(--ink-muted) !important; font-family: var(--font-sans); font-weight: 700; }

/* ---------- Inputs and selects ---------- */
body.uv-v4 .tramite-ultralight__input,
body.uv-v4 .tramite-ultralight__select,
body.uv-v4 .tramite-additional__card .form-control {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--surface-000);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
}
body.uv-v4 .tramite-ultralight__input:hover,
body.uv-v4 .tramite-ultralight__select:hover,
body.uv-v4 .tramite-additional__card .form-control:hover { border-color: var(--ink); }
body.uv-v4 .tramite-ultralight__input:focus,
body.uv-v4 .tramite-ultralight__select:focus,
body.uv-v4 .tramite-additional__card .form-control:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(31, 79, 209, 0.18);
}
body.uv-v4 .tramite-ultralight__input::placeholder,
body.uv-v4 .tramite-ultralight__phone-input::placeholder,
body.uv-v4 .tramite-additional__card .form-control::placeholder { color: var(--ink-subtle); }
body.uv-v4 .tramite-ultralight__select-icon,
body.uv-v4 .tramite-ultralight__phone-selector-icon { color: var(--ink-muted); }

/* Phone field (country selector + number) */
body.uv-v4 .tramite-ultralight__phone-wrapper {
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-000);
}
body.uv-v4 .tramite-ultralight__phone-wrapper:hover { border-color: var(--ink); box-shadow: none; }
body.uv-v4 .tramite-ultralight__phone-wrapper:focus-within {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(31, 79, 209, 0.18);
    background: var(--surface-000);
}
body.uv-v4 .tramite-ultralight__phone-selector-container {
    background: var(--surface-100);
    border-right: 1.5px solid var(--line);
}
body.uv-v4 .tramite-ultralight__phone-wrapper:focus-within .tramite-ultralight__phone-selector-container {
    background: var(--surface-100);
    border-right-color: var(--line-strong);
}
body.uv-v4 .tramite-ultralight__phone-selector,
body.uv-v4 .tramite-ultralight__phone-input { font-family: var(--font-sans); color: var(--ink); }
body.uv-v4 .tramite-ultralight__phone-prefix { color: var(--ink-subtle); }
body.uv-v4 .tramite-ultralight__phone-wrapper::before { display: none; }

/* Native menus own their open state and placement. Apply focus/hover decoration
   without animation; focus alone does not mean "open". */
body.uv-v4 select.tramite-ultralight__select,
body.uv-v4 select.tramite-ultralight__phone-selector,
body.uv-v4 .tramite-additional__card select.form-control,
body.uv-v4 .tramite-ultralight__phone-wrapper,
body.uv-v4 .tramite-ultralight__phone-selector-container,
body.uv-v4 .tramite-ultralight__phone-selector-icon,
body.uv-v4 .tramite-ultralight__select-icon { transition: none; }
body.uv-v4 .tramite-ultralight__phone-selector:focus + .tramite-ultralight__phone-selector-icon,
body.uv-v4 .tramite-ultralight__select:focus + .tramite-ultralight__select-icon {
    transform: translateY(-50%);
}
/* Keep desktop mouse interaction in the browser's in-page native picker.
   Coarse pointers and unsupported browsers retain their platform picker. */
@supports (appearance: base-select) and selector(::picker(select)) {
    @media (hover: hover) and (pointer: fine) {
        body.uv-v4 :is(select.tramite-ultralight__select, select.tramite-ultralight__phone-selector, .tramite-additional__card select.form-control):not([multiple]):not([hidden]):is(:not([size]), [size="1"]),
        body.uv-v4 :is(select.tramite-ultralight__select, select.tramite-ultralight__phone-selector, .tramite-additional__card select.form-control):not([multiple]):not([hidden]):is(:not([size]), [size="1"])::picker(select) { appearance: base-select; }
        body.uv-v4 :is(select.tramite-ultralight__select, select.tramite-ultralight__phone-selector, .tramite-additional__card select.form-control):not([multiple]):not([hidden]):is(:not([size]), [size="1"]) { display: flex; align-items: center; }
        body.uv-v4 :is(select.tramite-ultralight__select, select.tramite-ultralight__phone-selector, .tramite-additional__card select.form-control):not([multiple]):not([hidden]):is(:not([size]), [size="1"])::picker-icon { display: none; }
        body.uv-v4 :is(select.tramite-ultralight__select, select.tramite-ultralight__phone-selector, .tramite-additional__card select.form-control):not([multiple]):not([hidden]):is(:not([size]), [size="1"])::picker(select) {
            background: var(--surface-000);
            color: var(--ink);
            border: 1px solid var(--line-strong);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-card);
            padding: var(--space-4);
            max-block-size: 50dvh;
            overflow-y: auto;
        }
        body.uv-v4 :is(select.tramite-ultralight__select, select.tramite-ultralight__phone-selector, .tramite-additional__card select.form-control):not([multiple]):not([hidden]):is(:not([size]), [size="1"]) option {
            min-block-size: var(--tap-min);
            padding: var(--space-8) var(--space-12);
            font: inherit;
            white-space: normal;
        }
        body.uv-v4 :is(select.tramite-ultralight__select, select.tramite-ultralight__phone-selector, .tramite-additional__card select.form-control):not([multiple]):not([hidden]):is(:not([size]), [size="1"]) option:is(:checked, :focus-visible, :hover) {
            background: var(--brand-sky);
            color: var(--ink);
        }
        body.uv-v4 select.tramite-ultralight__phone-selector {
            min-block-size: 0;
            line-height: normal;
        }
    }
}


/* Validation states (FormValidation toggles has-error / has-success) */
body.uv-v4 .tramite-ultralight__input.has-error,
body.uv-v4 .tramite-ultralight__input-group.has-error .tramite-ultralight__input,
body.uv-v4 .tramite-ultralight__phone-wrapper.has-error { border-color: var(--action); }
body.uv-v4 .tramite-ultralight__input.has-error:focus,
body.uv-v4 .tramite-ultralight__input-group.has-error .tramite-ultralight__input,
body.uv-v4 .tramite-ultralight__phone-wrapper.has-error:focus-within { box-shadow: 0 0 0 3px rgba(220, 3, 38, 0.15); }
body.uv-v4 .tramite-ultralight__input.has-success,
body.uv-v4 .tramite-ultralight__input-group.has-success .tramite-ultralight__input,
body.uv-v4 .tramite-ultralight__phone-wrapper.has-success { border-color: var(--success); }
body.uv-v4 .tramite-ultralight__input.has-success:focus,
body.uv-v4 .tramite-ultralight__input-group.has-success .tramite-ultralight__input,
body.uv-v4 .tramite-ultralight__phone-wrapper.has-success:focus-within { box-shadow: 0 0 0 3px rgba(15, 122, 74, 0.15); }
body.uv-v4 .tramite-additional__card .has-error .form-control { border-color: var(--action); box-shadow: none; }
body.uv-v4 .tramite-additional__card .has-error .form-control:focus { border-color: var(--action); box-shadow: 0 0 0 3px rgba(220, 3, 38, 0.15); }
body.uv-v4 .tramite-additional__card .has-error .help-block,
body.uv-v4 .tramite-additional__card .has-error .control-label { color: var(--danger); }
body.uv-v4 .tramite-additional__card .has-success .form-control { border-color: var(--success); box-shadow: none; }

/* ---------- Primary buttons (uv-btn--primary look, pill, red) ---------- */
body.uv-v4 .tramite-ultralight__submit,
body.uv-v4 .tramite-additional__submit,
body.uv-v4 .tramite-status__actions .btn {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    min-height: var(--button-lg);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
body.uv-v4 .tramite-ultralight__submit,
body.uv-v4 .tramite-additional__submit,
body.uv-v4 .tramite-status__actions .btn--primary {
    background: var(--action);
    color: var(--on-action);
}
body.uv-v4 .tramite-ultralight__submit:hover,
body.uv-v4 .tramite-additional__submit:hover,
body.uv-v4 .tramite-status__actions .btn--primary:hover {
    background: var(--action-hover);
    color: var(--on-action);
    box-shadow: none;
    transform: none;
}
body.uv-v4 .tramite-ultralight__submit:active,
body.uv-v4 .tramite-additional__submit:active,
body.uv-v4 .tramite-status__actions .btn:active { transform: translateY(1px); }
body.uv-v4 .tramite-ultralight__submit:disabled { background: var(--action); opacity: .6; transform: none; }
body.uv-v4 .tramite-ultralight__submit { width: 100%; }

/* Secondary / ghost button of the status page (uv-btn--secondary look) */
body.uv-v4 .tramite-status__actions .btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}
body.uv-v4 .tramite-status__actions .btn--ghost:hover {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

/* ---------- "Nueva gestión / Ya soy cliente" tabs ---------- */
/* The view's inline <style> sets display/flex-direction with !important and we leave that alone. */
body.uv-v4 .tramite-toggle {
    background: var(--brand-sky);
    border-radius: var(--radius-pill);
    padding: 4px;
}
body.uv-v4 .tramite-toggle__option {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--ink-muted);
    border-radius: var(--radius-pill);
}
body.uv-v4 .tramite-toggle__option:hover { color: var(--ink); }
body.uv-v4 .tramite-toggle__option.active-tab,
body.uv-v4 .tramite-toggle__option:has(input:checked) {
    background: var(--surface-000);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}
/* The radio is visually hidden, so surface keyboard focus on the whole tab */
body.uv-v4 .tramite-toggle__option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Helper, alerts and errors ---------- */
body.uv-v4 .tramite-helper {
    background: var(--brand-sky);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--font-sans);
}
body.uv-v4 .tramite-error,
body.uv-v4 small.tramite-ultralight__error-message,
body.uv-v4 .tramite-ultralight__card .alert-danger,
body.uv-v4 .tramite-additional__card .alert-danger {
    background: var(--action-soft);
    border: 1px solid rgba(220, 3, 38, 0.25);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-family: var(--font-sans);
}
body.uv-v4 small.tramite-ultralight__error-message svg { color: var(--action); }
body.uv-v4 .tramite-form-errors {
    margin: 0 0 var(--space-16);
    padding: var(--space-12) var(--space-16);
    text-align: left;
    font-size: 14px;
    line-height: 20px;
}
body.uv-v4 .tramite-form-errors p { margin: 0; }
body.uv-v4 .tramite-form-errors p + p { margin-top: var(--space-4); }

/* ---------- Trust row ---------- */
body.uv-v4 .tramite-ultralight__trust { border-top: 1px solid var(--line); }
body.uv-v4 .tramite-ultralight__trust-item,
body.uv-v4 .tramite-additional__trust { color: var(--ink-muted); font-family: var(--font-sans); }
body.uv-v4 .tramite-ultralight__trust-item svg,
body.uv-v4 .tramite-additional__trust-item svg { color: var(--success); }
body.uv-v4 .tramite-ultralight__trust-divider { color: var(--line-strong); }

/* ---------- Checkboxes of the additional-info form ---------- */
body.uv-v4 .tramite-additional__checkbox-group label { color: var(--ink-muted); font-family: var(--font-sans); }
body.uv-v4 .tramite-additional__checkbox-group a { color: var(--action); }

/* ---------- Success message after "Ya soy cliente" (injected by the page script) ---------- */
body.uv-v4 .tramite-success__title { color: var(--ink); font-family: var(--font-sans); font-weight: 800; }
body.uv-v4 .tramite-success__text { color: var(--ink-muted); }
body.uv-v4 .tramite-success__hint { color: var(--ink-muted); }
body.uv-v4 .tramite-success__hint a { color: var(--action); font-weight: 700; }

/* ---------- Status page icon + tips ---------- */
body.uv-v4 .tramite-status__card--success .tramite-status__icon { background: var(--success-soft); color: var(--success); }
body.uv-v4 .tramite-status__card--error .tramite-status__icon { background: var(--action-soft); color: var(--danger); }
body.uv-v4 .tramite-status__card--info .tramite-status__icon { background: var(--brand-sky); color: var(--ink); }
body.uv-v4 .tramite-status__card--success .tramite-status__pretitle { background: var(--success-soft); color: var(--success); }
body.uv-v4 .tramite-status__card--error .tramite-status__pretitle { background: var(--action-soft); color: var(--danger); }
body.uv-v4 .tramite-status__card--info .tramite-status__pretitle { background: var(--brand-sky); color: var(--ink); }
body.uv-v4 .tramite-status__tips { background: var(--surface-100); color: var(--ink-muted); border-radius: var(--radius-md); font-family: var(--font-sans); }
body.uv-v4 .tramite-status__tips strong { color: var(--ink); }

/* ---------- V4 footer (layout/partials/footer_v4.php), same rules as v3/home.css ---------- */
body.uv-v4 .v3-container { max-width: var(--container-max); margin: 0 auto; }
body.uv-v4 .v3-footer { background: var(--surface-inverse); color: var(--on-inverse-muted); padding: 0 var(--space-16) var(--space-32); border-top: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body.uv-v4 .v3-footer .v3-container { padding-top: var(--space-32); }
body.uv-v4 .v3-footer__logo { height: 30px; width: auto; display: block; }
body.uv-v4 .v3-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin: var(--space-24) 0; }
body.uv-v4 .v3-footer__links a { color: var(--on-inverse); text-decoration: none; font-weight: 600; font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
body.uv-v4 .v3-footer__legal { margin: 0; font-size: 13px; line-height: 20px; }
body.uv-v4 .v3-footer :focus-visible { outline-color: var(--on-inverse); }
body.uv-v4 .v3-footer__contact { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin: 0 0 var(--space-16); font-size: 14px; }
body.uv-v4 .v3-footer__contact a,
body.uv-v4 .v3-footer__contact span { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 32px; }
body.uv-v4 .v3-footer__contact a { color: var(--on-inverse); font-weight: 600; text-decoration: none; }
body.uv-v4 .v3-footer__contact .uv-icon { width: 18px; height: 18px; }
body.uv-v4 .v3-footer__links--legal { margin-top: 0; }
body.uv-v4 .v3-footer__links--legal a { font-weight: 500; color: var(--on-inverse-muted); }
@media (max-width: 576px) { body.uv-v4 .v3-footer { padding-bottom: 96px; } }

/* ---------- Floating WhatsApp button (footer_v4 renders .v3-wa-float; position in v3/home.css) ---------- */
/* Give the page room so it cannot cover the CTA at the end of the form. */
/* tramite-skin.js hides it while it would cover a form field or a primary button */
body.uv-v4 .v3-wa-float { transition: bottom .2s ease, opacity .15s ease, visibility .15s ease; }
body.uv-v4 .v3-wa-float.uv-float-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 576px) {
    body.uv-v4 .tramite-ultralight__card,
    body.uv-v4 .tramite-status__card { padding-bottom: 32px; }
    body.uv-v4 .tramite-ultralight,
    body.uv-v4 .tramite-status,
    body.uv-v4 .tramite-additional { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    body.uv-v4 .tramite-ultralight__submit,
    body.uv-v4 .tramite-additional__submit,
    body.uv-v4 .tramite-status__actions .btn,
    body.uv-v4 .tramite-toggle__option,
    body.uv-v4 .v3-wa-float { transition: none; }
}

/* Equal tab tracks must shrink below each label's intrinsic width on narrow phones. */
body.uv-v4 .tramite-toggle { min-width: 0; width: 100%; box-sizing: border-box; gap: 4px; }
body.uv-v4 .tramite-toggle__option {
    flex: 1 1 0; min-width: 0; box-sizing: border-box; min-height: var(--tap-min);
    padding: 8px 4px; white-space: normal; overflow-wrap: normal;
    line-height: 1.25; font-size: clamp(12px, 3.5vw, 14px);
}