/* CSS Variables — design tokens (see design/cripto-envio.pen / L2) */
:root {
    /* Surface */
    --bg: #0a0a0a;
    --bg-elev-1: #0f0f0f;
    --bg-elev-2: #111111;
    --bg-elev-3: #1a1a1a;
    --border: #1f1f1f;
    --border-strong: #2a2a2a;

    /* Foreground */
    --text: #ffffff;
    --text-muted: #a8a8a8;
    --text-subtle: #888888;
    --text-faint: #666666;

    /* Accent & semantic */
    --accent: #4a9fd8;
    --accent-soft: #b3d9f0;
    --accent-glow: rgba(74, 159, 216, 0.15);
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.15);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.10);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.15);

    /* Type */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Geist', 'Inter', system-ui, sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Layout: the one shared content-column width every section (Send, Gas,
       Taxes, Track, Help) aligns to. Fluid below it — small screens fill the
       shell padding instead. */
    --content-col: 720px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 14px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 24px 80px -20px rgba(74, 159, 216, 0.25);

    /* Theme-dependent details that used to be hard-coded: outlines drawn as a
       translucent layer over the surface, text on an accent fill, and the
       stronger tints of semantic colours used as text. */
    --line-overlay: rgba(255, 255, 255, 0.18);
    --line-overlay-strong: rgba(255, 255, 255, 0.32);
    --hover-overlay: rgba(255, 255, 255, 0.04);
    --on-accent: #0a0a0a;
    --warning-text: #fbbf24;
    --error-text: #f87171;
    --violet: #a78bfa;
    --teal-text: #6fe3c0;
    /* Solid icon tiles tuned for the dark surface; translucent tints in light. */
    --tile-blue: #0f2233;
    --tile-blue-soft: #0d1620;
    --tile-green: #102b1d;
    --tile-violet: #1c1530;
    --tile-amber: #241c0a;
    --line-success: #1f3b2a;
    --bg-chip: #14141a;

    --transition: 0.2s ease;
    color-scheme: dark;
}

/* Light theme. Chosen with the header toggle and stored under the same key as
   the operations console (localStorage "rmt-theme"), so both follow one choice.
   Without a stored choice the site stays dark, as it always was. Only tokens
   change here: every rule above reads them. */
:root[data-theme="light"] {
    color-scheme: light;

    --bg: #f6f7f9;
    --bg-elev-1: #ffffff;
    --bg-elev-2: #ffffff;
    --bg-elev-3: #eef1f4;
    --border: #e1e5ea;
    --border-strong: #cdd3da;

    --text: #0d1117;
    --text-muted: #475261;
    --text-subtle: #5f6b7a;
    --text-faint: #8a94a1;

    --accent: #1f78b8;
    --accent-soft: #155d91;
    --accent-glow: rgba(31, 120, 184, 0.12);
    --success: #15803d;
    --success-bg: rgba(21, 128, 61, 0.10);
    --warning: #b45309;
    --warning-bg: rgba(180, 83, 9, 0.10);
    --error: #dc2626;
    --error-bg: rgba(220, 38, 38, 0.10);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 6px 14px rgba(15, 23, 42, 0.10);
    --shadow-glow: 0 24px 80px -24px rgba(31, 120, 184, 0.28);

    --line-overlay: rgba(15, 23, 42, 0.16);
    --line-overlay-strong: rgba(15, 23, 42, 0.30);
    --hover-overlay: rgba(15, 23, 42, 0.04);
    --on-accent: #ffffff;
    --warning-text: #b45309;
    --error-text: #b91c1c;
    --violet: #6d28d9;
    --teal-text: #0f766e;
    --tile-blue: rgba(31, 120, 184, 0.12);
    --tile-blue-soft: rgba(31, 120, 184, 0.06);
    --tile-green: rgba(21, 128, 61, 0.12);
    --tile-violet: rgba(109, 40, 217, 0.12);
    --tile-amber: rgba(180, 83, 9, 0.12);
    --line-success: rgba(21, 128, 61, 0.35);
    --bg-chip: #eef1f4;
}


/* ============================================================
   01 · RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
}

/* tabular-nums everywhere we render amounts / hashes / counters */
.font-mono,
.tracking-code,
.wallet-address,
.amount-value,
.recipient-name {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   02 · APP SHELL
   ============================================================ */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow-x: hidden;
}

.app-header {
    padding: var(--space-4) var(--space-6);
    /* Three tracks with equal outer ones rather than space-between. The logo is
       much wider than the language switch, so a plain flex row left the nav
       sitting right of the page centre — visibly out of line with the centred
       hero pill below it. Here the nav owns the middle track, so it centres on
       the page instead of on whatever space its neighbours leave over. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-6);
    border-bottom: 1px solid var(--border);
}

/* Grid items stretch by default; these two stay their own size at the edges. */
.app-header > .logo { justify-self: start; }
/* Pinned to the last track so the gate page, which drops the nav, keeps its
   controls on the right instead of letting them slide into the empty middle. */
.app-header-actions {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.app-nav {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
}

.app-nav-link {
    color: var(--text-subtle);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    transition: var(--transition);
}

.app-nav-link:hover { color: var(--text); }

.app-nav-link.is-active {
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-full);
    padding: 4px 12px;
}

.app-nav-link.is-active:hover {
    background: var(--accent);
    color: var(--bg);
}

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--line-overlay);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.lang-switcher:hover {
    border-color: var(--line-overlay-strong);
}

.lang-switcher svg { color: var(--text-muted); }

/* Signed-in visitor: the name before the "@" of their verified address. Same
   pill as its neighbours but not a control, so no hover state. The operations
   console mirrors this trio — language, account, sign out — in the same order. */
.account-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 14rem;
    padding: 6px 12px;
    border: 1px solid var(--line-overlay);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.55;
}

.account-chip svg { flex-shrink: 0; color: var(--text-muted); }

.account-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Light/dark switch: same icon-only square pill as sign out. Shows the sun in
   the dark theme (switch to light) and the moon in the light one. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    background: transparent;
    border: 1px solid var(--line-overlay);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.55;
    cursor: pointer;
    transition: var(--transition);
}

.theme-toggle[hidden] { display: none; }

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--line-overlay-strong);
    color: var(--text);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Take the row's height from the text pills beside it, so adding this button
   never makes the header taller. */
.theme-toggle { align-self: stretch; }
/* One icon at a time. The hide rules must out-rank ".theme-toggle svg", or
   the dark theme shows both icons side by side. */
.theme-toggle svg { display: block; }
.theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }

.logout-form {
    display: flex;
    margin: 0;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--line-overlay);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    cursor: pointer;
    transition: var(--transition);
}

/* Icon only: the label lives in aria-label and title. Square, so it lines up
   with the pills beside it. */
.logout-button {
    justify-content: center;
    padding-inline: 9px;
}

.logout-button:hover,
.logout-button:focus-visible {
    border-color: var(--accent);
    color: var(--text);
}

.logout-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.app-main {
    flex: 1;
    padding: var(--space-8) var(--space-6);
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
}

.app-footer {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-faint);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.app-footer a {
    color: var(--accent);
    text-decoration: none;
}

.app-footer a:hover {
    text-decoration: underline;
}

.footer-trust {
    color: var(--text-faint);
    letter-spacing: 0.14em;
    margin-bottom: var(--space-2);
}


/* ============================================================
   03 · LOGO
   ============================================================ */
.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    line-height: 1;
}

.logo-text {
    letter-spacing: -0.02em;
}

.logo-accent {
    color: var(--accent);
}


/* ============================================================
   04 · HERO  &  EYEBROWS
   ============================================================ */
.hero {
    text-align: center;
    margin-bottom: var(--space-8);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--text);
    margin-bottom: var(--space-4);
}

.hero-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--accent-soft);
    margin-bottom: var(--space-4);
}

.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent);
}


/* ============================================================
   05 · CARDS & SURFACES
   ============================================================ */
.card {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.card-elevated {
    box-shadow: var(--shadow-glow);
}

.card-main {
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-glow);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
}

.card-subtitle {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin-bottom: var(--space-6);
}


/* ============================================================
   06 · BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 22px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-soft);
}

.btn-primary:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--line-overlay);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--line-overlay-strong);
    background: var(--hover-overlay);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover:not(:disabled) {
    color: var(--text);
}

.btn-destructive {
    background: transparent;
    color: var(--error);
    border-color: rgba(239, 68, 68, 0.4);
}

.btn-destructive:hover:not(:disabled) {
    background: var(--error-bg);
}

.btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    color: var(--text);
    border-color: var(--line-overlay);
}

.btn-icon:hover:not(:disabled) {
    border-color: var(--line-overlay-strong);
    background: var(--hover-overlay);
}

.btn-block {
    width: 100%;
}

.btn-large {
    padding: 16px 24px;
    font-size: 0.9375rem;
}

.btn-small {
    padding: 8px 14px;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: var(--space-6);
}

.btn-back:hover {
    color: var(--accent);
}

.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 5px 9px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-copy:hover {
    color: var(--text);
    border-color: var(--line-overlay-strong);
}

.btn-copy.is-copied {
    color: var(--success);
    border-color: rgba(34, 197, 94, 0.45);
    background: var(--success-bg);
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.form-actions .btn {
    flex: 1;
}


/* ============================================================
   07 · FORM FIELDS
   ============================================================ */
.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: var(--space-2);
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-sans);
    font-size: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-input::placeholder {
    color: var(--text-faint);
}

.form-input-mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.form-hint {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
}

.form-required {
    color: var(--error);
    margin-left: 4px;
    font-weight: 700;
}

.form-input.is-invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.form-error {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--error);
    display: none;
}

.form-error.is-visible {
    display: block;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 560px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-section-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: var(--space-6) 0 var(--space-3);
}

.form-section-eyebrow--muted {
    color: var(--text-subtle);
}

.form-required-legend {
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.form-required-legend .form-required {
    margin-left: 0;
    margin-right: 4px;
}

/* Phone field with locked +53 prefix */
.phone-field {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.phone-field .phone-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-right: none;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    user-select: none;
    white-space: nowrap;
}

.phone-field .phone-prefix-flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
}

.phone-field .phone-input {
    flex: 1;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    letter-spacing: 0.04em;
}

.phone-field .phone-input.is-invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Deposit expiry — large live countdown */
.deposit-expiry {
    margin: var(--space-6) 0;
    padding: var(--space-5) var(--space-6);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.deposit-expiry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
}

.deposit-expiry-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.deposit-expiry-pulse {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: deposit-pulse 1.6s infinite;
}

@keyframes deposit-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 159, 216, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 159, 216, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 159, 216, 0); }
}

.deposit-expiry-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
}

.deposit-expiry-time {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: 3.25rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
    color: var(--accent);
    transition: color 0.4s ease;
}

.deposit-expiry-units {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.32em;
    color: var(--text-faint);
    text-transform: uppercase;
}

.deposit-expiry-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.deposit-expiry-bar-fill {
    height: 100%;
    width: 100%;
    background: var(--accent);
    transition: width 1s linear, background-color 0.4s ease;
}

.deposit-expiry-hint {
    font-size: 0.8125rem;
    color: var(--text-subtle);
    line-height: 1.55;
    text-align: center;
    margin: 0;
}

/* Warning + critical states */
.deposit-expiry.is-warning .deposit-expiry-time,
.deposit-expiry.is-warning .deposit-expiry-bar-fill {
    background-color: var(--warning);
    color: var(--warning);
}
.deposit-expiry.is-warning .deposit-expiry-eyebrow { color: var(--warning); }

.deposit-expiry.is-critical .deposit-expiry-time,
.deposit-expiry.is-critical .deposit-expiry-bar-fill {
    background-color: var(--error);
    color: var(--error);
}
.deposit-expiry.is-critical .deposit-expiry-eyebrow { color: var(--error); }

.deposit-expiry.is-expired .deposit-expiry-time { color: var(--text-faint); background: none; }
.deposit-expiry.is-expired .deposit-expiry-bar-fill { width: 0% !important; }
.deposit-expiry.is-expired .deposit-expiry-pulse { animation: none; }

/* Generic field block (label above value, used in summary widgets) */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
}

.field-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.field-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    color: var(--text);
}

.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Amount swap (You send / Recipient gets) */
.amount-swap {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
}

.amount-swap .field-amount + .swap-button-wrap {
    margin: -2px 0;
}

.field-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    gap: var(--space-3);
}

.field-amount-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: var(--space-2);
}

.field-amount-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
}

.field-amount-value--receive {
    color: var(--accent-soft);
}

.swap-button-wrap {
    display: flex;
    justify-content: center;
    padding: 6px 0;
    position: relative;
    z-index: 1;
}

.swap-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    color: var(--accent);
    cursor: pointer;
    transition: var(--transition);
}

.swap-button:hover {
    color: var(--accent-soft);
    transform: rotate(180deg);
}

.currency-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
}

.currency-pill::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--success);
}

.currency-pill--cup::before { background: var(--accent); }


/* ============================================================
   08 · BADGES & PILLS
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    /* Never let a flex parent squeeze the pill: shrinking its content box makes
       the dot / text spill outside the rounded border. */
    flex-shrink: 0;
    white-space: nowrap;
}

.badge::before {
    content: "";
    flex: none; /* keep the dot at its size inside the pill, never shrunk out */
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
}

/* Group of pills on the right of a field-row (e.g. RED / TOKEN). Keeps the pills
   together and lets them wrap on narrow screens instead of overflowing. */
.badge-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

/* Field row that may wrap its right-hand content below the label on narrow
   screens (used for the RED / TOKEN pills so they never overflow the card). */
.field-row--wrap {
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

/* On phones, stack the label over its pills so the row can never overflow the
   card horizontally (grid card + long labels leave little room otherwise). */
@media (max-width: 480px) {
    .field-row--wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    .field-row--wrap .badge-group {
        justify-content: flex-start;
    }
}

.badge--success {
    background: var(--success-bg);
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--success);
}

.badge--info {
    background: var(--accent-glow);
    border-color: rgba(74, 159, 216, 0.4);
    color: var(--accent);
}

.badge--warning {
    background: var(--warning-bg);
    border-color: rgba(245, 158, 11, 0.4);
    color: var(--warning);
}

.badge--error {
    background: var(--error-bg);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--error);
}

.badge--neutral {
    background: transparent;
    border-color: var(--line-overlay);
    color: var(--text-muted);
}

.badge--neutral::before { display: none; }

.badge--verified {
    background: var(--success-bg);
    color: var(--success);
}

.badge--verified::before { display: none; }


/* ============================================================
   09 · CALLOUTS  (inline warnings / info / errors)
   ============================================================ */
.callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.callout--warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.30);
    color: var(--warning);
}

.callout--info {
    background: rgba(74, 159, 216, 0.06);
    border-color: rgba(74, 159, 216, 0.30);
    color: var(--accent);
}

.callout--error {
    background: var(--error-bg);
    border-color: rgba(239, 68, 68, 0.40);
    color: var(--error);
}


/* ============================================================
   10 · TIMELINE  (status / receipt steps)
   ============================================================ */
.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.timeline--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.timeline-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex: 1;
}

.timeline--horizontal .timeline-step {
    flex-direction: column;
    gap: var(--space-3);
}

.timeline-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.6875rem;
}

.timeline-step--done .timeline-step-icon {
    background: var(--success);
    color: var(--bg);
}

.timeline-step--active .timeline-step-icon {
    background: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.timeline-step--pending .timeline-step-icon {
    background: var(--bg-elev-3);
    border: 1px solid var(--border-strong);
    color: var(--text-faint);
}

.timeline-step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-step-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text);
}

.timeline-step--pending .timeline-step-title {
    color: var(--text-subtle);
}

.timeline-step-time {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-subtle);
}

.timeline-step--active .timeline-step-time {
    color: var(--accent);
}


/* ============================================================
   11 · STAT STRIP
   ============================================================ */
.stat-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elev-1);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.stat-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
}


/* ============================================================
   12 · FEATURES GRID
   ============================================================ */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-8);
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--accent-glow);
    color: var(--accent);
    border-radius: var(--radius-lg);
    font-size: 1.25rem;
    line-height: 1;
}

.feature h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
}

.feature p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-subtle);
}


/* ============================================================
   13 · METHOD SELECTOR  (kept for templates/partials/method_selector)
   ============================================================ */
.method-selector {
    text-align: center;
    position: relative;
}

/* "Novedades" corner pill — same format as the "Próximamente" method badges, in
   green, pinned to the top-right corner of the panel. */
.method-news-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--success-bg);
    color: var(--success);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: var(--radius-full);
}

.form-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--space-3);
}

.method-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
}

.method-subtitle {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin-bottom: var(--space-8);
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* A real <button>, not a div with a click handler: as divs these cards were
   completely inoperable by keyboard — Tab never reached them, Enter and Space did
   nothing, and only a mouse could open a delivery method (WCAG 2.1.1 / 4.1.2).
   .remesa-entry-card is already a <button> for the equivalent card in the remittance
   flow, so this makes the two consistent.
   Buttons need their UA defaults undone: they do not inherit the page font or
   colour, and default to shrink-to-fit width with centred text. */
.method-card {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font: inherit;
    color: inherit;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}

/* Keyboard focus, matching .remesa-entry-card:focus-visible. Without it the cards
   would be reachable but there would be no way to tell which one you are on. */
.method-card:focus-visible {
    border-color: var(--accent);
    background: var(--bg-elev-1);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.method-card:hover {
    border-color: var(--accent);
    background: var(--bg-elev-1);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

.method-card:active {
    transform: translateY(0);
}

/* Informational (not-yet-clickable) delivery options: presented as clean cards, not
   greyed-out/disabled — the "Próximamente" badge already signals they're upcoming. */
.method-card-disabled {
    cursor: default;
}

.method-card-disabled:hover {
    border-color: var(--border);
    background: var(--bg);
    transform: none;
    box-shadow: none;
}

.method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.method-icon-miusd {
    background: rgba(34, 197, 94, 0.10);
    color: var(--success);
}

.method-icon-cup {
    background: var(--accent-glow);
    color: var(--accent);
}

.method-icon-clasica {
    background: rgba(139, 92, 246, 0.10);
    color: var(--violet);
}

/* display: block because these are <span>s now. <button> only accepts phrasing
   content, so the former <h3> and <p> could not stay — a heading or paragraph inside
   a button is invalid HTML and assistive tech handles it inconsistently. The card's
   job is "activate this option", so button semantics matter more here than the
   heading level; overall heading structure is a separate concern. */
.method-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-1);
}

.method-description {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-subtle);
    line-height: 1.45;
    margin-bottom: var(--space-3);
}

.method-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--success-bg);
    color: var(--success);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: var(--radius-full);
}

.method-badge-secondary {
    background: var(--accent-glow);
    color: var(--accent);
}

.method-badge-coming {
    background: rgba(139, 92, 246, 0.12);
    color: var(--violet);
}

.method-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}


/* ============================================================
   14 · FORM HEADER
   ============================================================ */
.form-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.form-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.form-header-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

.form-header-subtitle {
    font-size: 0.8125rem;
    color: var(--text-subtle);
}


/* ============================================================
   15 · RECIPIENT FOUND
   ============================================================ */
.recipient-found {
    animation: fadeIn 0.3s ease;
}

.recipient-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
}

.recipient-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--accent-glow);
    color: var(--accent);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

.recipient-details {
    flex: 1;
    min-width: 0;
}

.recipient-name {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
}

.recipient-type {
    font-size: 0.75rem;
    color: var(--text-subtle);
    margin-top: 2px;
}

.recipient-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--success);
    color: var(--bg);
    border-radius: var(--radius-full);
    font-weight: bold;
    flex-shrink: 0;
}


/* ============================================================
   16 · POW STATUS
   ============================================================ */
.pow-status {
    padding: var(--space-3) var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.pow-status-inline {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--border);
    font-size: 0.75rem;
    margin-bottom: var(--space-4);
}

.pow-working {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.pow-complete {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--success);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
}

.pow-error {
    color: var(--error);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}


/* ============================================================
   17 · TURNSTILE
   ============================================================ */
.turnstile-container {
    margin-bottom: var(--space-4);
    display: flex;
    justify-content: center;
}

.turnstile-success {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--success-bg);
    color: var(--success);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    animation: fadeIn 0.3s ease;
}

/* Card that frames the "are you a robot?" verification before the pay button. */
.captcha-card {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: border-color var(--transition);
}
.captcha-card.is-verified {
    border-color: var(--success);
}
.captcha-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.captcha-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--success-bg);
    color: var(--success);
}
.captcha-card-text { display: flex; flex-direction: column; gap: 2px; }
.captcha-card-title { font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.captcha-card-subtitle { font-size: 0.8125rem; color: var(--text-subtle); line-height: 1.4; }
.captcha-card .turnstile-container { margin-bottom: 0; }


/* ============================================================
   18 · DEPOSIT RESULT
   ============================================================ */
.deposit-result {
    animation: fadeIn 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Step indicator (Details ✓ → Deposit • → Confirmation) */
.step-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    align-self: center;
    margin-bottom: var(--space-2);
}

.step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
}

.step-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

.step--done .step-icon { background: var(--success); color: var(--bg); }
.step--done .step-label { color: var(--text-subtle); }

.step--active .step-icon { background: var(--accent); color: var(--bg); }
.step--active .step-label { color: var(--text); font-weight: 500; }

.step--pending .step-icon {
    background: var(--bg-elev-3);
    border: 1px solid var(--border-strong);
    color: var(--text-faint);
}
.step--pending .step-label { color: var(--text-faint); }

.step-line {
    width: 32px;
    height: 1px;
    background: var(--border-strong);
}

.step-line--done { background: var(--success); }

/* Status + timer row above the deposit card */
.deposit-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.deposit-timer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.deposit-timer svg { color: var(--text-subtle); }
.deposit-timer strong { color: var(--text); font-weight: 500; }
.deposit-timer-label { color: var(--text-muted); }

/* Two-column QR + details card */
.deposit-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elev-2);
    overflow: hidden;
    box-shadow: var(--shadow-glow);
}

.deposit-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8);
    background: var(--bg);
    border-right: 1px solid var(--border);
}

.deposit-qr .qr-image {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-md);
    background: #fff;
    padding: 12px;
}

.deposit-qr-caption {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    text-align: center;
    max-width: 220px;
}

.deposit-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    min-width: 0;
}

/* Secondary row: tracking code + listening indicator */
.deposit-secondary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.deposit-secondary-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* What happens next */
.next-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.next-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.next-step-num {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--accent);
}

.next-step-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text);
}

.next-step-body {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-subtle);
}

.success-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: 6px 12px;
    background: var(--success-bg);
    border: 1px solid rgba(34, 197, 94, 0.40);
    color: var(--success);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.success-icon {
    font-size: 0.875rem;
    line-height: 1;
}

.wallet-section {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-6);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.qr-code {
    padding: 14px;
    background: #ffffff;
    border-radius: var(--radius-md);
    line-height: 0;
}

.qr-image {
    display: block;
    width: 200px;
    height: 200px;
}

.wallet-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.wallet-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: var(--space-2);
}

.wallet-address-container {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-elev-1);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.wallet-address {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    word-break: break-all;
    text-align: left;
    color: var(--text);
}

.network-info {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-subtle);
}

.network-info strong {
    color: var(--text);
    font-weight: 500;
}

.expiry-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: var(--warning);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.tracking-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.tracking-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.tracking-code-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tracking-code {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
}

.instructions {
    padding: var(--space-2) 0;
}

.instructions h4 {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--space-3);
    font-weight: 500;
}

.instructions ol {
    padding-left: 1.25rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.instructions li {
    margin-bottom: var(--space-2);
}


/* ============================================================
   19 · TRACKING STATUS
   ============================================================ */
.tracking-result {
    animation: fadeIn 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Track page header (above the live status card) */
.track-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.track-crumbs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.track-crumb {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    text-decoration: none;
}

.track-crumb:hover { color: var(--text-muted); }

.track-crumb--current { color: var(--text); }

.track-crumb-sep { color: var(--border-strong); }

.track-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: var(--space-3);
}

.track-subtitle {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* Tracking card container — replaces the loose details boxes */
.tracking-card {
    padding: 0;
    overflow: hidden;
}

.tracking-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8);
}

.tracking-hero-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.tracking-hero-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-end;
}

.tracking-amount {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.tracking-amount-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text);
}

.tracking-amount-ccy {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-subtle);
}

.tracking-divider {
    height: 1px;
    background: var(--border);
}

.tracking-timeline {
    padding: var(--space-6) var(--space-8);
}

.tracking-waiting {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-8);
}

.tracking-waiting-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.status-indicator {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
}

.status-success {
    background: var(--success-bg);
    border-color: rgba(34, 197, 94, 0.40);
    color: var(--success);
}

.status-success .status-indicator { background: var(--success); }

.status-warning {
    background: var(--warning-bg);
    border-color: rgba(245, 158, 11, 0.40);
    color: var(--warning);
}

.status-warning .status-indicator {
    background: var(--warning);
    animation: pulse 1.5s infinite;
}

.status-info {
    background: var(--accent-glow);
    border-color: rgba(74, 159, 216, 0.40);
    color: var(--accent);
}

.status-info .status-indicator {
    background: var(--accent);
    animation: pulse 1.5s infinite;
}

.status-error {
    background: var(--error-bg);
    border-color: rgba(239, 68, 68, 0.40);
    color: var(--error);
}

.status-error .status-indicator { background: var(--error); }

.completion-details,
.pending-details,
.waiting-details,
.expired-details,
.failed-details {
    padding: var(--space-6);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.amount-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.amount-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.amount-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--text);
    line-height: 1;
}

.success-message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.progress-bar {
    height: 4px;
    background: var(--bg-elev-3);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: var(--space-3);
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    animation: progressPulse 1.5s ease-in-out infinite;
}

.waiting-animation {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.waiting-animation .dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: var(--radius-full);
    animation: bounce 1.4s infinite ease-in-out both;
}

.waiting-animation .dot:nth-child(1) { animation-delay: -0.32s; }
.waiting-animation .dot:nth-child(2) { animation-delay: -0.16s; }

.auto-refresh-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
}

.final-actions {
    display: flex;
    gap: var(--space-3);
}


/* ============================================================
   20 · ERROR
   ============================================================ */
.error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-8);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--error-bg);
    border: 1px solid rgba(239, 68, 68, 0.40);
    color: var(--error);
    border-radius: var(--radius-full);
    font-size: 1.5rem;
}

.error-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.error-hint {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 380px;
}

.error-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    /* .btn is white-space: nowrap and these children don't flex, so without wrap a
       pair of buttons wider than the viewport overflowed BOTH edges symmetrically
       (justify-content: center splits the overflow) — putting the recovery controls
       of a primary flow half off-screen. The ≤640px block stacks them outright;
       this keeps any intermediate width, or a longer translation, from doing it. */
    flex-wrap: wrap;
}


/* ============================================================
   21 · LOADING
   ============================================================ */
.loading-container {
    text-align: center;
    padding: var(--space-8);
}

.spinner {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-3);
}

.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


/* ============================================================
   22 · HTMX
   ============================================================ */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-request .btn-text {
    opacity: 0.5;
}


/* ============================================================
   23 · CLASICA / PLACEHOLDER
   ============================================================ */
.miusd-form,
.cup-digital-form,
.clasica-placeholder {
    animation: fadeIn 0.3s ease;
}

.placeholder-content {
    text-align: center;
    padding: var(--space-4) 0;
}

.placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-6);
    background: rgba(139, 92, 246, 0.10);
    border-radius: var(--radius-full);
    color: var(--violet);
}

/* Blue/info variant (e.g. the CADECA daily-limit notice): a bold, animated icon
   with a soft pulsing ring to draw the eye without alarming the customer. */
.placeholder-icon--info {
    background: var(--accent-glow);
    color: var(--accent);
    position: relative;
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation: info-breathe 2.4s ease-in-out infinite;
}

.placeholder-icon--info::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-full);
    border: 2px solid var(--accent);
    opacity: 0;
    animation: info-ring 2.4s ease-out infinite;
}

.placeholder-icon--info > svg {
    position: relative;
    z-index: 1;
}

@keyframes info-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { transform: scale(1.05); box-shadow: 0 0 26px 2px var(--accent-glow); }
}

@keyframes info-ring {
    0% { transform: scale(0.85); opacity: 0.55; }
    70% { opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .placeholder-icon--info,
    .placeholder-icon--info::before {
        animation: none;
    }
}

.placeholder-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}

.placeholder-description {
    color: var(--text-muted);
    max-width: 340px;
    margin: 0 auto var(--space-6);
    line-height: 1.55;
    font-size: 0.9375rem;
}

.placeholder-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.placeholder-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.feature-dot {
    width: 5px;
    height: 5px;
    background: var(--violet);
    border-radius: var(--radius-full);
}


/* ============================================================
   24 · ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}


/* ============================================================
   24b · RATE WIDGET  (home page hero)
   ============================================================ */
.rate-widget {
    padding: 0;
    overflow: hidden;
}

.rate-widget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-8);
}

.rate-widget-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.rate-widget-side--right {
    align-items: flex-end;
    text-align: right;
}

.rate-widget-amount {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.rate-widget-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text);
}

.rate-widget-num--receive {
    color: var(--accent-soft);
}

.rate-widget-ccy {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-subtle);
    line-height: 1;
}

.rate-widget-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-strong);
    background: var(--bg-elev-3);
    border-radius: var(--radius-full);
    color: var(--accent);
    flex-shrink: 0;
}

.rate-widget-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-8);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.rate-widget-meta-left {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.rate-widget-eta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
}

.rate-widget-eta-icon {
    color: var(--accent);
}


/* ============================================================
   24c · TRUST STRIP
   ============================================================ */
.trust-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) 0;
}

.trust-strip-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.trust-strip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-12);
}

.trust-mark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}


/* ============================================================
   25 · RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .app-header {
        /* Back to flex here: the nav wraps onto a full-width row of its own, which
           the three-track grid above cannot express. */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4);
    }

    .app-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: var(--space-4);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: var(--space-2);
        border-top: 1px solid var(--border);
    }

    .app-nav::-webkit-scrollbar { display: none; }

    .app-nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .app-main {
        padding: var(--space-6) var(--space-4);
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 0.9375rem;
    }

    .card {
        padding: var(--space-6);
    }

    .form-actions {
        flex-direction: column;
    }

    /* Same treatment as .form-actions above: on a phone these are the retry and
       support controls on an error card, so they get the full width each rather
       than competing for one row they don't fit in. */
    .error-actions {
        flex-direction: column;
    }

    .wallet-section {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .wallet-address {
        font-size: 0.6875rem;
    }

    /* Stack. This block used to re-declare the desktop repeat(3, 1fr) and only
       tighten the gap, so three columns survived down to 375px — where the third
       card was clipped away entirely and its text cut mid-word.
       Three 1fr tracks are not as flexible as they look: grid items default to
       min-width: auto, so a track cannot shrink below its content's min-content
       width. With the card padding and labels that floor exceeded a third of the
       available 293px, the row grew past the viewport, and .app-container's
       overflow-x: hidden clipped the overflow instead of letting it scroll — so the
       card was not merely cut off, it was unreachable. */
    .method-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .method-card {
        padding: var(--space-4);
    }

    .stat-strip {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .stat-divider {
        width: 100%;
        height: 1px;
    }

    .timeline--horizontal {
        flex-direction: column;
        gap: var(--space-4);
    }

    .timeline--horizontal .timeline-step {
        flex-direction: row;
        gap: var(--space-3);
    }

    .final-actions {
        flex-direction: column;
    }

    .rate-widget-row {
        flex-direction: column;
        gap: var(--space-6);
        padding: var(--space-6);
    }

    .rate-widget-side,
    .rate-widget-side--right {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .rate-widget-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .rate-widget-num {
        font-size: 2.25rem;
    }

    .rate-widget-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-6);
    }

    .rate-widget-meta-left {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .trust-strip-row {
        gap: var(--space-6);
    }

    .trust-mark {
        font-size: 0.875rem;
    }

    .deposit-card {
        grid-template-columns: 1fr;
    }

    .deposit-qr {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .deposit-status-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .deposit-secondary-row {
        grid-template-columns: 1fr;
    }

    .next-steps {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .step-indicator {
        gap: var(--space-2);
    }

    .step-line {
        width: 16px;
    }

    .step-label {
        display: none;
    }

    .step--active .step-label {
        display: inline;
    }

    .tracking-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-6);
    }

    .tracking-hero-right {
        align-items: flex-start;
    }

    .tracking-amount-num {
        font-size: 2.25rem;
    }

    .tracking-timeline,
    .tracking-waiting {
        padding: var(--space-4) var(--space-6);
    }
}

@media (max-width: 480px) {
    .account-chip { max-width: 8rem; }
}

@media (max-width: 360px) {
    .account-chip {
        padding-inline: 9px;
    }

    .account-chip-name { display: none; }

}

/* ============================================================
   Gas cylinder service
   ============================================================ */

/* Home: services section */
.services {
    margin-bottom: var(--space-8);
}
.services-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--text-faint);
    text-align: center;
    margin-bottom: var(--space-4);
}
.services-grid {
    display: grid;
    /* Track count follows the number of cards rather than being pinned at 3: with
       the gas-coupon card disabled the two remaining services fill the row instead
       of leaving a hole, and the third column comes back on its own if it returns.
       880px of main minus padding still fits three 220px tracks. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color var(--transition), transform var(--transition);
}
.service-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.service-card--featured {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
/* ---- UNAVAILABLE: one treatment for every blocked control ----------------
   A control whose payment rail is out of service — a home service card, a
   delivery-option row, anything added later. ONE rule so the same condition
   never renders three ways across flows.
   Grey and inert, deliberately NOT error red or warning amber: those mean the
   user did something that needs fixing, and a counterparty being down is
   neither. Reserving them here keeps them meaningful where they belong (a
   rejected card, a failed payment).
   grayscale() is what makes it unmistakable — it drains the coloured icon too,
   so a dead card stops resembling the live ones beside it.
   What separates this from --soon ("not built yet") is the copy, not the
   colour, so the distinction survives for anyone who cannot see colour. */
.service-card--down,
.remesa-entry-card.is-unavailable {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(1);
    border-color: var(--border);
    background: var(--bg);
    box-shadow: none;
    transform: none;
}
/* Every hover/focus affordance the live control has, cancelled explicitly.
   Listed rather than left to inheritance so adding an effect to the live rule
   later cannot silently light up a dead control. */
.service-card--down:hover,
.service-card--down:focus,
.service-card--down:focus-visible,
.service-card--down:active,
.remesa-entry-card.is-unavailable:hover,
.remesa-entry-card.is-unavailable:focus,
.remesa-entry-card.is-unavailable:focus-visible,
.remesa-entry-card.is-unavailable:active {
    transform: none;
    border-color: var(--border);
    background: var(--bg);
    box-shadow: none;
    outline: none;
}
/* The status line, in both flows: a muted uppercase mono label where the live
   control shows its call to action. */
.service-cta--down,
.remesa-entry-card.is-unavailable .remesa-entry-choose {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* No forward arrow on something that leads nowhere. */
.service-card--down .service-arrow,
.remesa-entry-card.is-unavailable .remesa-entry-arrow {
    display: none;
}
/* The out-of-service mark sits inline with its label everywhere it appears, at
   the label's own size. One partial renders it (partials/icon_unavailable), so
   a state cannot end up without it. */
.icon-unavailable {
    flex: 0 0 auto;
}
.btn .icon-unavailable {
    margin-right: 6px;
    vertical-align: -0.125em;
}
/* No corner pill on a blocked card, deliberately.
   The `.service-top .badge` slot is pinned to the corner and reserves 56px for a
   short label like NEW. "No disponible" needs ~108px, and at the 3-column grid
   width (880px container -> ~234px of card content) that left ~74px for a title
   like "Pago de impuesto de vehículos" — five wrapped lines, or an overlap when
   pinned. Moving it in-flow only traded the overlap for the wrapping.
   So the state lives in the CTA row instead, which spans the full card width and
   cannot collide with anything. Nothing is lost: that row reads FUERA DE SERVICIO
   with a prohibition icon, on a card that is already fully greyscaled — and one
   signal beats two that say the same thing while squeezing the title. */
.service-cta--down {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Blocked-service panel: the flow's own "this cannot run right now" state.
   A panel rather than an inline warning line because it is not a field to fix,
   it is the whole service being shut. */
.service-blocked {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elev-1);
}
.service-blocked-icon {
    flex: 0 0 auto;
    color: var(--text-muted);
    line-height: 0;
    margin-top: 1px;
    /* The shared icon is 1em; the panel is the one place it reads at 20px. */
    font-size: 20px;
}
.service-blocked-body { display: flex; flex-direction: column; gap: 2px; }
.service-blocked-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text);
}
.service-blocked-text {
    margin: 0;
    font-size: 0.84375rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* A bare fieldset so `disabled` can switch off every control at once without
   the browser's default border/margin showing up as a box around the form. */
.form-fieldset-bare {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.form-fieldset-bare[disabled] { opacity: 0.55; }

.service-card--soon {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
.service-card--soon:hover {
    transform: none;
    border-color: var(--border);
}
.service-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* The NEW badge pins to the card corner so long service names keep the full
   row width next to the icon; badged rows reserve the corner for line 1. */
.service-top--badged { padding-right: 56px; }
.service-top .badge {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
}
.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--accent-glow);
    color: var(--accent);
}
.service-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}
.service-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-subtle);
    margin: 0;
}
.service-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent);
}

/* Flow step scaffolding */
.gas-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.gas-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
}
.gas-breadcrumb a { color: var(--text-faint); text-decoration: none; }
.gas-breadcrumb a:hover { color: var(--text-muted); }
.gas-breadcrumb span:last-child { color: var(--text-muted); }
.gas-step-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.gas-progress {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.gas-progress span {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border);
}
.gas-progress span.is-active { background: var(--accent); }

/* Selects */
.gas-select-wrap { position: relative; }
.gas-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding-right: var(--space-8);
    cursor: pointer;
}
.gas-select-chevron {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
}

.gas-textarea { resize: vertical; min-height: 64px; font-family: var(--font-sans); }
.gas-banner { margin-bottom: var(--space-6); }

/* Calendar */
.gas-cal {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elev-1);
    padding: var(--space-4);
}
.gas-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.gas-cal-month { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.gas-cal-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
}
.gas-cal-arrow:hover { border-color: var(--border-strong); color: var(--text); }
.gas-cal-wd {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.gas-cal-wd span {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
}
.gas-cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.gas-cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 58px;
    border-radius: var(--radius-md);
    cursor: pointer;
}
.gas-cal-day--blank { background: transparent; cursor: default; }
.gas-cal-day input { position: absolute; opacity: 0; pointer-events: none; }
.gas-cal-num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); }
.gas-cal-slots { font-family: var(--font-mono); font-size: 0.625rem; color: var(--accent); }
.gas-cal-day--avail { background: var(--bg-elev-3); border: 1px solid var(--border); }
.gas-cal-day--avail:hover { border-color: var(--accent); }
.gas-cal-day--full { background: var(--bg); border: 1px solid var(--border); cursor: not-allowed; }
.gas-cal-day--full .gas-cal-num, .gas-cal-day--full .gas-cal-slots { color: var(--text-faint); }
/* Partial availability: some cylinders left, but not enough for the coupon's qty. */
.gas-cal-day--short { border-color: rgba(234, 179, 8, 0.35); }
.gas-cal-day--short .gas-cal-slots { color: var(--warning-text); }
.gas-cal-day--past { cursor: not-allowed; }
.gas-cal-day--past .gas-cal-num { color: var(--text-faint); }
.gas-cal-day--weekend { background: var(--bg); border: 1px dashed var(--border); cursor: not-allowed; }
.gas-cal-day--weekend .gas-cal-num, .gas-cal-day--weekend .gas-cal-slots { color: var(--text-faint); }
.gas-cal-day--sel { background: var(--accent); }
.gas-cal-day--sel .gas-cal-num, .gas-cal-day--sel .gas-cal-slots { color: var(--bg); font-weight: 600; }
/* selected day = available cell whose radio is checked */
.gas-cal-day--avail:has(input:checked) { background: var(--accent); border-color: var(--accent); }
.gas-cal-day--avail:has(input:checked) .gas-cal-num,
.gas-cal-day--avail:has(input:checked) .gas-cal-slots { color: var(--bg); font-weight: 600; }
.gas-cal-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-subtle);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-elev-1);
}
.gas-success-icon--error { background: var(--error-bg); color: var(--error); border-color: rgba(239, 68, 68, 0.4); }
.gas-cal-legend {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
    font-size: 0.75rem;
    color: var(--text-subtle);
}
.gas-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gas-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gas-dot--sel { background: var(--accent); }
.gas-dot--avail { background: var(--bg-elev-3); border: 1px solid var(--border); }
.gas-dot--full { background: var(--bg); border: 1px solid var(--border); }

/* Payment: order + quantity */
.gas-order, .gas-totals {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}
.gas-order { background: var(--bg-elev-1); }
.gas-totals { background: var(--bg); }
.gas-order-row, .gas-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gas-order-name { font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.gas-order-sku { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-faint); margin-top: 2px; }
.gas-order-price { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-muted); }
.gas-divider { height: 1px; background: var(--border); margin: var(--space-3) 0; }
.gas-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.gas-qty-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--text); cursor: pointer;
}
.gas-qty-btn:hover { background: var(--bg-elev-2); }
.gas-qty-num {
    width: 44px; height: 38px;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--border-strong);
    border-right: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.9375rem;
}

/* Payment: method tiles — compact square grid (3 + 2) */
.gas-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.gas-method {
    --m: var(--accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 124px;
    padding: var(--space-3) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elev-1);
    cursor: pointer;
    position: relative;
    text-align: center;
    box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.35);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.gas-method:hover:not(.is-disabled):not(.is-selected) {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.5);
}
.gas-method:hover:not(.is-disabled) .gas-method-icon {
    filter: brightness(1.18);
}
.gas-method input { position: absolute; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------
   Keyboard focus for the tile-style radios.

   Three components hide the real <input> the same way — position: absolute with
   opacity: 0 — so Tab reaches it (opacity does not remove an element from the focus
   order) while nothing on screen changes: computed styles were byte-identical
   focused vs blurred. WCAG 2.4.7, on a purchase form and on the payment-method
   choice of a money transfer.

   Grouped rather than copied three times because the cause and the fix are one
   thing. :has() is already what these controls use for their checked state (see
   .remesa-option:has(input:checked) below), so leaning on it here adds no new
   browser requirement. .gas-cal-day is included even though the calendar is not
   currently routed: it is the same defect, and one line now beats shipping it later.
   ------------------------------------------------------------ */
.gas-method:has(input:focus-visible),
.remesa-option:has(input:focus-visible),
.gas-cal-day:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.gas-method.is-selected {
    border-color: var(--m);
    box-shadow:
        inset 0 0 0 1px var(--m),
        0 0 18px -2px color-mix(in srgb, var(--m) 34%, transparent),
        0 3px 10px -2px rgba(0, 0, 0, 0.4);
}
.gas-method.is-disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.gas-method-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--m) 26%, transparent), color-mix(in srgb, var(--m) 7%, transparent));
    border: 1px solid color-mix(in srgb, var(--m) 30%, transparent);
    color: var(--m); flex-shrink: 0;
    transition: filter 0.18s ease;
}
.gas-method-name {
    font-size: 0.78rem; font-weight: 500; color: var(--text);
    line-height: 1.2; letter-spacing: -0.01em;
}
.gas-method-desc {
    font-size: 0.625rem; color: var(--text-subtle);
    line-height: 1.3; letter-spacing: 0;
}
.gas-method-soon {
    font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-subtle);
}
.gas-method-check {
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px; border-radius: var(--radius-full);
    background: var(--m); display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--m) 50%, transparent);
}
.gas-method.is-selected .gas-method-check { display: inline-flex; }
.gas-method-check::after {
    content: ""; width: 5px; height: 9px;
    border: solid var(--bg); border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

/* Payment: contextual note for the selected method */
.gas-method-note {
    --m: var(--accent);
    display: flex; align-items: center; gap: 9px;
    margin-top: var(--space-2); margin-bottom: var(--space-2);
    padding: 10px 12px; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--m) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--m) 22%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.gas-method-note svg { color: var(--m); flex-shrink: 0; }
.gas-method-note span {
    font-size: 0.72rem; line-height: 1.35;
    color: color-mix(in srgb, var(--m) 45%, var(--text));
}

/* Payment: order card product thumbnail */
.gas-order-product { display: flex; align-items: center; gap: 12px; }
.gas-order-thumb {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #f0883e, #db5c2b); color: #fff;
    box-shadow: 0 4px 12px -4px rgba(240, 136, 62, 0.55);
}
.gas-order-product + .gas-order-price,
.gas-order-row .gas-order-price {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    font-family: var(--font-display); font-size: 0.9375rem;
    font-weight: 600; color: var(--text);
}
.gas-order-price span {
    font-family: var(--font-mono); font-size: 0.625rem;
    font-weight: 400; color: var(--text-faint);
}
/* One coupon == one balita: the per-balita price IS the price to pay, so show it
   prominently in the product row (the separate grand-total row is gone). */
.gas-order-row .gas-order-price--lg { font-size: 1.5rem; line-height: 1.1; }

/* Payment: pickup free + CTA */
.gas-totals .gas-total-row span.gas-total-free { color: var(--success); }
.gas-pay-cta {
    background: linear-gradient(145deg, #5aaee6, #3f90cc);
    box-shadow: 0 6px 20px -4px rgba(74, 159, 216, 0.55);
}
.gas-pay-cta:hover:not(:disabled) {
    background: linear-gradient(145deg, #6bb8ea, #4a9bd6);
    box-shadow: 0 8px 24px -4px rgba(74, 159, 216, 0.65);
}
.gas-pay-cta:disabled {
    background: var(--bg-elev-2); box-shadow: none;
}

/* Payment: secure step tag with icon */
.gas-step-tag { display: inline-flex; align-items: center; gap: 6px; }
.gas-step-tag svg { color: var(--accent); }

/* Gas checkout: keep the whole flow as a tidy, centered phone-width column */
.gas-card {
    max-width: var(--content-col);
    margin-left: auto;
    margin-right: auto;
}

/* ── CADECA deposit screen (uniform blue accent) ───────────────────── */
.gas-cadeca-code {
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-lg);
    background: var(--bg-elev-1);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45),
        0 0 26px -2px color-mix(in srgb, var(--accent) 26%, transparent);
}
.gas-cadeca-code-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-3);
}
.gas-cadeca-code-label {
    font-family: var(--font-mono); font-size: 0.625rem;
    letter-spacing: 0.1em; color: color-mix(in srgb, var(--accent) 55%, var(--text-muted));
}
.gas-cadeca-amt {
    font-family: var(--font-mono); font-size: 0.6875rem;
    color: color-mix(in srgb, var(--accent) 70%, var(--text));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    border-radius: var(--radius-full); padding: 4px 10px;
}
.gas-cadeca-code-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-3);
}
.gas-cadeca-value {
    font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500;
    letter-spacing: 0.06em; color: var(--text); word-break: break-all;
}
.gas-cadeca-copy {
    color: var(--accent) !important; flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius-md); padding: 8px 12px;
}
.gas-cadeca-copy:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.gas-cadeca-expiry {
    display: flex; align-items: center; gap: 7px;
    color: var(--text-muted); font-size: 0.75rem;
}
.gas-cadeca-expiry svg { color: var(--text-faint); }

/* Two-code CADECA screen: step badge + state pill on each code card */
.gas-cadeca-code--active { /* keeps the default accent glow */ }
.gas-cadeca-code--locked {
    border-color: var(--border);
    background: var(--bg-elev-1);
    box-shadow: none;
}
.gas-code-step {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
    letter-spacing: 0.1em; color: var(--text-subtle);
}
.gas-code-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: var(--radius-full);
    font-size: 0.625rem; font-weight: 600; color: var(--bg);
    background: var(--text-subtle);
}
.gas-cadeca-code--active .gas-code-step { color: var(--accent); }
.gas-cadeca-code--active .gas-code-step-num { background: var(--accent); }
.gas-code-state {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: var(--radius-full); padding: 3px 9px;
}
.gas-code-state--live {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.gas-code-state-dot {
    width: 6px; height: 6px; border-radius: var(--radius-full);
    background: var(--accent); animation: gas-pulse 1.4s ease-in-out infinite;
}
.gas-code-state--locked {
    color: var(--text-muted);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
}
.gas-code-state--locked svg { color: var(--text-muted); }
/* Locked coupon: dim the code so it reads as not-yet-active, but stays legible
   and copyable so the buyer can save it now. */
.gas-cadeca-code--locked .gas-cadeca-value { color: var(--text-subtle); }
.gas-cadeca-code--locked .gas-cadeca-code-label { color: var(--text-faint); }

/* "once paid, unlocks" connector between the two code cards */
.gas-code-link {
    display: flex; align-items: center; gap: var(--space-3);
    margin: calc(-1 * var(--space-2)) 0 var(--space-3); padding: 0 var(--space-2);
}
.gas-code-link-line { flex: 1; height: 1px; background: var(--border); }
.gas-code-link-text {
    font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}

/* "Save your coupon" — high-emphasis keep-it card (it's their proof of payment) */
.gas-keep-card {
    display: flex; align-items: flex-start; gap: 14px;
    margin: var(--space-4) 0; padding: 16px;
    border: 1px solid rgba(245, 158, 11, 0.40);
    border-left: 3px solid var(--warning);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 26px -12px rgba(245, 158, 11, 0.45);
}
.gas-keep-icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px;
    color: var(--warning);
    background: rgba(245, 158, 11, 0.18);
    animation: gas-keepopen-pulse 1.9s ease-in-out infinite;
}
.gas-keep-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gas-keep-title {
    font-size: 0.9375rem; font-weight: 600; color: var(--warning-text); line-height: 1.35;
}
.gas-keep-text { margin: 0; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }
.gas-keep-text strong { color: var(--text); }
.gas-cadeca-foot {
    margin: var(--space-3) 0 0; text-align: center;
    font-size: 0.75rem; color: var(--text-faint); line-height: 1.5;
}

/* Collapsible section (How to pay) — native <details>, collapsed by default */
.gas-collapse { width: 100%; }
.gas-collapse-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); cursor: pointer; list-style: none;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elev-1);
    transition: border-color 0.18s ease, background 0.18s ease;
}
.gas-collapse-head::-webkit-details-marker { display: none; }
.gas-collapse-head::marker { content: ""; }
.gas-collapse-head:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
.gas-collapse-title { font-size: 0.8125rem; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
.gas-collapse-chevron { color: var(--text-subtle); flex-shrink: 0; transition: transform 0.22s ease; }
.gas-collapse[open] .gas-collapse-chevron { transform: rotate(180deg); }
.gas-collapse .gas-steps { margin: var(--space-2) 0 0; }

/* CADECA branch selector */
.gas-branch { margin-bottom: var(--space-4); }
.gas-branch-select-wrap { position: relative; display: flex; align-items: center; }
.gas-branch-pin {
    position: absolute; left: 14px; color: var(--accent); pointer-events: none;
}
.gas-branch-caret {
    position: absolute; right: 14px; color: var(--text-muted); pointer-events: none;
}
.gas-branch-select {
    width: 100%; padding-left: 40px; padding-right: 38px;
    appearance: none; -webkit-appearance: none; cursor: pointer;
}
.gas-branch-addr {
    margin: var(--space-2) 0 0; padding-left: 2px;
    font-size: 0.75rem; color: var(--text-muted); line-height: 1.4;
}

/* Inline CADECA branch picker on the payment-method screen */
.gas-cadeca-picker {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 9%, transparent),
            color-mix(in srgb, var(--accent) 4%, transparent)),
        var(--bg-elev-1);
    box-shadow: 0 0 18px -6px color-mix(in srgb, var(--accent) 40%, transparent);
    animation: gas-picker-in 0.22s ease;
}
.gas-cadeca-picker[hidden] { display: none; }
@keyframes gas-picker-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.gas-cadeca-picker-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3);
    font-size: 0.8125rem; font-weight: 600; color: var(--text);
}
.gas-cadeca-picker-head svg { color: var(--accent); flex-shrink: 0; }
.gas-branch-empty {
    margin: 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.45;
}

/* Read-only chosen branch on the deposit screen */
.gas-branch-chosen {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.gas-branch-chosen .gas-branch-pin { color: var(--accent); flex-shrink: 0; }
.gas-branch-chosen-name {
    flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--text);
}
.gas-branch-chosen-check { color: var(--accent); flex-shrink: 0; }

/* CADECA "we'll text you" notice */
.gas-cadeca-sms {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    margin-bottom: var(--space-3);
}
.gas-cadeca-sms svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.gas-cadeca-sms p { margin: 0; font-size: 0.8125rem; color: var(--text-subtle); line-height: 1.45; }
.gas-cadeca-sms strong { color: var(--text); }

.gas-steps {
    list-style: none; margin: 0 0 var(--space-4) 0; padding: 4px var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg-elev-1);
}
.gas-step-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) 0;
}
.gas-step-item + .gas-step-item { border-top: 1px solid var(--border); }
.gas-step-num {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.gas-step-text { font-size: 0.8125rem; color: var(--text-subtle); line-height: 1.4; }
.gas-total-row { font-size: 0.875rem; color: var(--text-subtle); margin-bottom: var(--space-2); }
.gas-total-row span:last-child { color: var(--text); }
.gas-total-row--grand { margin: 0; }
.gas-total-row--grand span:first-child { font-size: 1rem; font-weight: 600; color: var(--text); }
.gas-total-row--grand span:last-child { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }

/* Confirmation */
.gas-success {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-3); margin-bottom: var(--space-6);
}
.gas-success-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: var(--radius-full);
    background: var(--success-bg); color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.4);
}
.gas-done-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em;
    color: var(--success); background: var(--success-bg);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--radius-full); padding: 4px 10px;
}
/* Info variant — e.g. "already redeemed" state (neutral, not a fresh success) */
.gas-success-icon--info {
    background: rgba(74, 159, 216, 0.12); color: var(--accent);
    border-color: rgba(74, 159, 216, 0.40);
}
.gas-done-tag--info {
    color: var(--accent); background: rgba(74, 159, 216, 0.12);
    border-color: rgba(74, 159, 216, 0.40);
}
.gas-code-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-8); margin-bottom: var(--space-6);
    border: 1px solid var(--accent); border-radius: var(--radius-lg);
    background: var(--bg-elev-1); box-shadow: var(--shadow-glow);
}
.gas-code-label {
    font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
    color: var(--text-subtle);
}
.gas-code-row { display: inline-flex; align-items: center; gap: var(--space-3); }
.gas-code { font-size: 2.5rem; font-weight: 500; letter-spacing: 0.1em; color: var(--text); }
.gas-code-hint { font-size: 0.8125rem; color: var(--text-subtle); text-align: center; }
.gas-summary {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg); margin-bottom: var(--space-6);
}
.gas-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
}
.gas-summary-row:not(:last-child) { border-bottom: 1px solid var(--bg-elev-3); }
.gas-summary-row span:first-child { font-size: 0.875rem; color: var(--text-subtle); }
.gas-summary-row span:last-child { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.gas-reminder { margin-bottom: var(--space-6); }
.gas-final-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.gas-redeem-hint { font-size: 0.8125rem; color: var(--text-subtle); text-align: center; margin-top: calc(-1 * var(--space-1)); }

@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; }
    .gas-cal-day { height: 48px; }
    .gas-code { font-size: 2rem; }
}

/* Paying screen */
.gas-pay-qr {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    padding: var(--space-2) 0;
}
.gas-qr-card { background: #fff; padding: 12px; border-radius: var(--radius-lg); display: inline-flex; }
.gas-qr-img { display: block; width: 200px; height: 200px; border-radius: 4px; }
.gas-qr-hint { font-size: 0.8125rem; color: var(--text-faint); }
.gas-qr-expiry {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: -2px;
    font-size: 0.75rem; color: var(--text-faint); letter-spacing: 0.01em;
}
.gas-qr-expiry .font-mono { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gas-qr-expiry-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--text-faint); opacity: 0.7;
}
.gas-qr-expiry.is-warning { color: var(--warning); }
.gas-qr-expiry.is-warning .font-mono { color: var(--warning); }
.gas-qr-expiry.is-warning .gas-qr-expiry-dot { background: var(--warning); opacity: 1; animation: gas-qr-expiry-pulse 1.4s ease-in-out infinite; }
.gas-qr-expiry.is-critical { color: var(--error); }
.gas-qr-expiry.is-critical .font-mono { color: var(--error); }
.gas-qr-expiry.is-critical .gas-qr-expiry-dot { background: var(--error); opacity: 1; animation: gas-qr-expiry-pulse 0.9s ease-in-out infinite; }
.gas-qr-expiry.is-expired { color: var(--text-faint); }
.gas-qr-expiry.is-expired .gas-qr-expiry-dot { background: var(--text-faint); animation: none; }
@keyframes gas-qr-expiry-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.4; }
}
.gas-pay-card {
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev-1);
}
/* "Keep this page open" — friendly-but-important warning on the paying screen.
   Sits below the deposit/operation card with clear breathing room above it. */
.gas-keepopen {
    display: flex; align-items: center; gap: 14px;
    margin-top: var(--space-6); margin-bottom: var(--space-6);
    padding: 16px;
    border: 1px solid rgba(245, 158, 11, 0.40);
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 26px -10px rgba(245, 158, 11, 0.45);
}
.gas-keepopen-icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px;
    color: var(--warning);
    background: rgba(245, 158, 11, 0.18);
    animation: gas-keepopen-pulse 1.9s ease-in-out infinite;
}
@keyframes gas-keepopen-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    70%      { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); }
}
.gas-keepopen-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gas-keepopen-title {
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--warning-text);
}
.gas-keepopen-text { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
    .gas-keepopen-icon, .gas-keep-icon { animation: none; }
}
/* Red/danger variant — e.g. "don't lose your coupon" on the coupon-ready screen */
.gas-keepopen--danger {
    border-color: rgba(239, 68, 68, 0.40);
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 26px -10px rgba(239, 68, 68, 0.45);
}
.gas-keepopen--danger .gas-keepopen-icon {
    color: var(--error);
    background: rgba(239, 68, 68, 0.18);
    animation-name: gas-keepopen-pulse-danger;
}
.gas-keepopen--danger .gas-keepopen-title { color: var(--error-text); }
@keyframes gas-keepopen-pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    70%      { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
}
.gas-pay-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: var(--space-4) var(--space-4);
}
.gas-pay-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gas-pay-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-faint); }
.gas-pay-value { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; color: var(--text); }
.gas-pay-value--addr { font-size: 0.9375rem; word-break: break-all; }
.gas-ref-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4); border: 1px solid var(--bg-elev-3);
    border-radius: var(--radius-lg); background: var(--bg);
    font-size: 0.875rem; color: var(--text-subtle);
}
.gas-ref-row span:last-child { color: var(--text); }
/* Placeholder for a coupon code that stays hidden until payment is confirmed
   (every non-CADECA screen — the code only appears once the coupon is paid). */
.gas-ref-pending {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; color: var(--text-faint);
}
.gas-ref-pending svg { color: var(--text-faint); flex-shrink: 0; }
.gas-listen {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding-top: var(--space-2); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint);
}
.gas-listen-dot {
    width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent);
    animation: gas-pulse 1.4s ease-in-out infinite;
}

/* Verifying screen */
.gas-spinner {
    width: 52px; height: 52px; border-radius: var(--radius-full);
    border: 3px solid var(--bg-elev-3); border-top-color: var(--accent);
    animation: gas-spin 0.9s linear infinite;
}
.gas-vsteps { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; }
.gas-vstep { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.gas-vstep-dot {
    width: 32px; height: 32px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.gas-vstep-dot--done { background: var(--success-bg); border: 1px solid rgba(34,197,94,0.4); color: var(--success); }
.gas-vstep-dot--active { background: var(--accent-glow); border: 1px solid var(--accent); }
.gas-vstep-dot--active::after {
    content: ""; width: 10px; height: 10px; border-radius: var(--radius-full);
    background: var(--accent); animation: gas-pulse 1.4s ease-in-out infinite;
}
.gas-vstep-dot--pending { background: var(--bg-elev-1); border: 1px solid var(--border); }
.gas-vstep-label { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.gas-vstep-label--muted { color: var(--text-subtle); }

@keyframes gas-spin { to { transform: rotate(360deg); } }
@keyframes gas-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   Coupon flow — dashboard (buy / redeem selector) + buyer details
   ============================================================ */

/* Selector: "buy a coupon" vs "redeem a coupon" */
.coupon-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.coupon-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), transform var(--transition);
}
.coupon-action--primary {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.coupon-action-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.coupon-action-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--accent-glow);
    color: var(--accent);
}
.coupon-action-titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}
.coupon-action-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.2px;
}
.coupon-action-badge {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.5px;
    color: var(--text-subtle);
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
}
.coupon-action--primary .coupon-action-badge {
    color: var(--accent);
    border-color: rgba(74, 159, 216, 0.4);
}
.coupon-action-desc {
    color: var(--text-subtle);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
}
.coupon-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg);
    border: 1px solid var(--bg-elev-3);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition);
}
.coupon-track:hover { border-color: var(--border-strong); color: var(--text); }
.coupon-track-left { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Collapsible, fully-optional buyer details on the buy form */
.gas-buyer {
    margin-top: var(--space-4);
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.gas-buyer-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text);
    text-align: left;
    font: inherit;
    transition: background var(--transition);
}
.gas-buyer-head:hover { background: var(--hover-overlay); }
.gas-buyer-head-left { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent); }
.gas-buyer-head-title { font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.gas-buyer-badge {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.5px;
    color: var(--text-subtle);
    padding: 2px 8px;
    border: 1px solid var(--line-overlay);
    border-radius: var(--radius-full);
}
.gas-buyer-chevron { color: var(--text-subtle); transition: transform var(--transition); flex: 0 0 auto; }
.gas-buyer.is-open .gas-buyer-chevron { transform: rotate(180deg); }
.gas-buyer-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
}
.gas-buyer-body[hidden] { display: none; }
.gas-buyer-body .form-group { margin-bottom: 0; }

/* Coupon buy: availability banner + blocked (no-availability) state */
.coupon-avail {
    --c: var(--success);
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: var(--space-4);
    padding: 12px 14px; border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--c) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
}
.coupon-avail--ok { --c: var(--success); }
.coupon-avail--warn { --c: var(--warning); }
.coupon-avail-icon { color: var(--c); flex-shrink: 0; margin-top: 1px; }
.coupon-avail-body { display: flex; flex-direction: column; gap: 2px; }
.coupon-avail-title {
    font-size: 0.82rem; font-weight: 600;
    color: color-mix(in srgb, var(--c) 55%, var(--text));
}
.coupon-avail-text { font-size: 0.74rem; line-height: 1.4; color: var(--text-muted); }

/* Legacy blocked-form state kept for defensive rendering paths. The current
   coupon flow warns about availability but keeps purchase enabled. */
.coupon-buy-form.is-blocked {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.4);
}
.coupon-buy-form.is-blocked .gas-pay-cta { cursor: not-allowed; }
.coupon-submit-error {
    margin-top: var(--space-4);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--error) 26%, transparent);
    background: color-mix(in srgb, var(--error) 9%, transparent);
    color: color-mix(in srgb, var(--error) 60%, var(--text));
    font-size: 0.82rem;
    line-height: 1.4;
}
.coupon-submit-error[hidden] { display: none; }

/* ============================================================
   Inline request error — injected by app.js next to the form whose request
   failed, so the form and everything typed into it survive the failure. Matches
   .coupon-submit-error, plus room for the retry button.
   ============================================================ */
.inline-request-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--error) 26%, transparent);
    background: color-mix(in srgb, var(--error) 9%, transparent);
}

.inline-request-error-text {
    margin: 0;
    color: color-mix(in srgb, var(--error) 60%, var(--text));
    font-size: 0.82rem;
    line-height: 1.45;
}

/* ============================================================
   Confirm modal — styled warning dialog (replaces native confirm).
   Used by the coupon "Cancelar" double-check on the QR screen and by the
   leave-payment guard on the remittance/tax crypto QR screens.
   ============================================================ */
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.confirm-modal[hidden] { display: none; }

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.66);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: confirm-fade 0.16s ease;
}

.confirm-modal-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    text-align: center;
    animation: confirm-pop 0.18s ease;
}

.confirm-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--warning-bg);
    color: var(--warning);
}

.confirm-modal-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
}

.confirm-modal-text {
    margin: 0 0 var(--space-6);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.confirm-modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* Mobile: dock the card to the bottom as a thumb-friendly sheet. */
@media (max-width: 560px) {
    .confirm-modal { align-items: flex-end; padding: 0; }
    .confirm-modal-card {
        max-width: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
        animation: confirm-slide 0.2s ease;
    }
    @keyframes confirm-slide { from { transform: translateY(100%); } to { transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-modal-backdrop, .confirm-modal-card { animation: none; }
}

/* Payment terms (remittance review): a confirm-modal with a list the sender has
   to read and a box to tick before the payment address is generated. */
.terms-modal-card {
    max-width: 460px;
    max-height: calc(100vh - 2 * var(--space-4));
    overflow-y: auto;
}
.terms-modal-intro {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.terms-list {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text);
}
.terms-list li + li { margin-top: var(--space-2); }
.terms-list-strong { font-weight: 600; }
.terms-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    text-align: left;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}
.terms-check input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--accent);
}
@media (max-width: 560px) {
    .terms-modal-card { max-height: 90vh; }
}

/* ============================================================
   REMITTANCE (criptoenvío) · guided flow (design/remesa-criptoenvio.pen)
   Labelled 5-step stepper · selectable option rows · amount + fee breakdown
   ============================================================ */

/* --- Labelled stepper --- */
.remesa-stepper {
    display: flex;
    align-items: center;
    margin: var(--space-5) 0 var(--space-6);
}
.remesa-stepi {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}
.remesa-stepi-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    flex: 0 0 auto;
}
.remesa-stepi-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    white-space: nowrap;
}
.remesa-stepi-line {
    flex: 1 1 auto;
    height: 1px;
    margin: 0 var(--space-2);
    background: var(--border);
    min-width: 8px;
}
.remesa-stepi-line.is-done { background: var(--success); }
.remesa-stepi.is-active .remesa-stepi-dot {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.remesa-stepi.is-active .remesa-stepi-label { color: var(--text); }
.remesa-stepi.is-done .remesa-stepi-dot {
    background: var(--success-bg);
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--success);
}
.remesa-stepi.is-done .remesa-stepi-label { color: var(--text-subtle); }

/* --- Selectable option rows --- */
.remesa-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Selectable rows — exact values from design/remesa-criptoenvio.pen */
.remesa-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}
.remesa-option:hover { border-color: var(--border-strong); }
.remesa-option input { position: absolute; opacity: 0; pointer-events: none; }
.remesa-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--bg-elev-1);
    color: var(--text-subtle);
}
.remesa-icon-mibi    { background: var(--tile-blue); color: var(--accent); }
.remesa-icon-crypto  { background: var(--tile-green); color: var(--success); }
.remesa-icon-clasica { background: var(--tile-violet); color: var(--violet); }
.remesa-icon-cadeca  { background: var(--tile-amber); color: var(--warning); }
.remesa-icon-card    { background: var(--tile-blue); color: var(--accent); }
.remesa-icon-zelle   { background: var(--tile-violet); color: var(--violet); }
.remesa-option-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.remesa-option-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}
.remesa-option-desc { font-size: 0.8125rem; color: var(--text-subtle); line-height: 1.4; }
.remesa-option-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    transition: var(--transition);
}
.remesa-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--bg);
}
.remesa-option:has(input:checked) .remesa-option-radio {
    border-color: var(--accent);
    background: var(--accent);
}
/* Filled blue radio shows a dark checkmark (matches the .pen ✓ glyph) */
.remesa-option:has(input:checked) .remesa-option-radio::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Disabled ("coming soon") payment option: greyed out and non-interactive. */
.remesa-option--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.remesa-option--disabled:hover { border-color: var(--border); }
.remesa-option-soon {
    font-size: 0.625rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    padding: 2px 7px;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Summary "Change" rows --- */
.remesa-summary-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.remesa-summary-rows { gap: 10px; }
.remesa-summary-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.remesa-summary-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    flex: 0 0 auto;
}
.remesa-summary-val {
    flex: 1 1 auto;
    font-size: 0.875rem;
    color: var(--text);
}
.remesa-change {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
}
.remesa-change:hover { text-decoration: underline; }

/* --- Amount input (design: #111 box, big mono number, neutral USD pill) --- */
.remesa-amount-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 18px 20px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: text;
    transition: border-color var(--transition);
}
.remesa-amount-box:focus-within { border-color: var(--accent); }
.remesa-amount-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; cursor: text; }
.remesa-amount-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    color: var(--text-subtle);
}
.remesa-amount-num {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 2.125rem;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    outline: none;
}
.remesa-amount-num::-webkit-outer-spin-button,
.remesa-amount-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.remesa-amount-num { -moz-appearance: textfield; }
.remesa-amount-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 12px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text);
}
.remesa-amount-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--success); }
.remesa-amount-chev { color: var(--text-subtle); font-size: 0.6875rem; }

/* --- Fee breakdown (design: var(--bg-elev-1) boxed card, divider before total) --- */
.remesa-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.remesa-bd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-muted);
}
.remesa-bd-val { font-family: var(--font-mono); color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.remesa-bd-divider { height: 1px; background: var(--border); margin: 2px 0; }
.remesa-bd-total > span:first-child { color: var(--text); font-size: 0.9375rem; }
.remesa-bd-total .remesa-bd-val { color: var(--accent-soft); font-size: 1.125rem; font-weight: 600; }

.remesa-footer-note {
    margin-top: var(--space-3);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    text-align: center;
}

/* ============================================================
   REMITTANCE flow · steps 4–8 + Card/Zelle
   ============================================================ */
.remesa-delivery-badge { display:inline-flex; margin-bottom: var(--space-5); }

/* Beneficiary lookup */
.remesa-lookup { display:flex; gap: var(--space-2); }
.remesa-lookup .form-input { flex:1 1 auto; }
.remesa-lookup .btn { flex:0 0 auto; white-space:nowrap; }

/* Review rows */
.remesa-rev-group { margin-bottom: var(--space-5); }
.remesa-rev-eyebrow {
    display:block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: var(--space-2);
}
.remesa-rev-row {
    display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem; color: var(--text-subtle);
}
.remesa-rev-row > span:first-child { flex:0 0 auto; }
.remesa-rev-val { font-family: var(--font-mono); color: var(--text); text-align:right; font-variant-numeric: tabular-nums; }
.remesa-rev-totals { margin: var(--space-5) 0; border-top:1px solid var(--border); }
.remesa-rev-grand { border-bottom:none; }
.remesa-rev-grand > span:first-child { color: var(--text); font-weight:500; }
.remesa-rev-grand .remesa-rev-val { color: var(--accent-soft); font-size: 1.0625rem; font-weight:600; }

/* Payment-screen header order ref */
.remesa-order { display:inline-flex; align-items:center; gap: var(--space-2); }
.remesa-pay .deposit-card { margin-top: var(--space-4); }

/* Result screens */
.remesa-result-head { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom: var(--space-6); }
.remesa-result-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:64px; height:64px; border-radius: var(--radius-full);
}
.remesa-result-icon--ok { background: var(--success-bg); color: var(--success); }
.remesa-result-icon--warn { background: rgba(245,158,11,0.14); color: var(--warning); }
.remesa-result-icon--err { background: rgba(239,68,68,0.14); color: var(--error); }

.remesa-received { text-align:center; margin: var(--space-2) 0 var(--space-6); }
.remesa-received-label {
    display:block; font-family: var(--font-mono); font-size: 0.6875rem;
    letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: var(--space-2);
}
.remesa-received-amount { display:inline-flex; align-items:baseline; gap: var(--space-2); }
.remesa-received-num {
    font-family: var(--font-mono); font-size: 2.5rem; font-weight:600;
    color: var(--accent-soft); font-variant-numeric: tabular-nums; letter-spacing:-0.01em;
}
.remesa-received-ccy { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-subtle); }

/* Processing spinner + checklist */
.remesa-spinner {
    width:48px; height:48px; border-radius: var(--radius-full);
    border: 3px solid var(--border); border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.remesa-checklist { display:flex; flex-direction:column; gap: var(--space-1); }
.remesa-check {
    display:flex; align-items:center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elev-1); border:1px solid var(--border);
    border-radius: var(--radius-md);
}
.remesa-check-dot {
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; flex:0 0 auto; border-radius: var(--radius-full);
    background: var(--bg-elev-2); border:1px solid var(--border);
    color: var(--text-faint); font-family: var(--font-mono); font-size:0.75rem;
}
.remesa-check.is-done .remesa-check-dot { background: var(--success-bg); border-color: rgba(34,197,94,0.4); color: var(--success); }
.remesa-check.is-active .remesa-check-dot { background: var(--accent-glow); border-color: var(--accent); }
.remesa-check-pulse { display:block; width:8px; height:8px; border-radius: var(--radius-full); background: var(--accent); animation: pulse 1.5s infinite; }
.remesa-check-body { display:flex; flex-direction:column; gap:1px; }
.remesa-check-title { font-size: 0.875rem; color: var(--text); font-weight:500; }
.remesa-check.is-active .remesa-check-title { color: var(--text); }
.remesa-check:not(.is-done):not(.is-active) .remesa-check-title { color: var(--text-faint); }
.remesa-check-sub { font-size: 0.75rem; color: var(--text-faint); }

/* Card brands + Zelle how-to */
.remesa-cardbrands { display:flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.remesa-brand {
    font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em;
    padding: 4px 9px; border:1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-subtle); background: var(--bg-elev-1);
}
.remesa-howto { margin-bottom: var(--space-5); }
.remesa-howto-list { margin: var(--space-3) 0 0; padding-left: var(--space-5); display:flex; flex-direction:column; gap: var(--space-2); }
.remesa-howto-list li { font-size: 0.875rem; color: var(--text-subtle); line-height:1.45; }

/* ============================================================
   REMITTANCE flow · button + action-row fidelity to the .pen
   (scoped to .remesa-scope so the rest of the app is untouched)
   ============================================================ */
.remesa-scope .btn {
    min-height: 48px;
    font-weight: 600;
    border-radius: 6px;
}
.remesa-scope .btn-large { min-height: 48px; font-size: 0.9375rem; }
/* Primary = solid accent with dark label (design: var(--accent) bg, var(--bg) text) */
.remesa-scope .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.remesa-scope .btn-primary:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft); }
/* Secondary = dark fill + var(--border-strong) border + white label */
.remesa-scope .btn-secondary { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.remesa-scope .btn-secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-elev-1); }
/* Two-button rows: secondary sizes to its label (min 150px so a short "Back"
   still reads as a button); primary fills the rest — mirrors the .pen
   Back(180)+Continue(fill) row without clipping longer labels. */
.remesa-scope .form-actions { gap: 12px; }
.remesa-scope .form-actions .btn-secondary { flex: 0 0 auto; min-width: 150px; }
.remesa-scope .form-actions .btn-primary { flex: 1 1 auto; }

/* Remittance · typography + field polish to match the .pen */
.remesa-scope .gas-step-tag { color: var(--accent-soft); letter-spacing: 0.13em; }
.remesa-scope .card-title { font-size: 1.625rem; letter-spacing: -0.02em; }
.remesa-scope .card-subtitle { color: var(--text-muted); }
.remesa-scope .form-section-eyebrow { color: var(--accent-soft); }
.remesa-scope .form-input { border-radius: 8px; }
.remesa-scope .form-input:focus { border-color: var(--accent); box-shadow: var(--shadow-glow); outline: none; }
/* The stepper + summary rows sit closer to the heading in the .pen */
.remesa-scope .remesa-stepper { margin: var(--space-4) 0 var(--space-5); }
.remesa-scope .remesa-delivery-badge { margin-top: var(--space-1); }

/* ============================================================
   REMITTANCE flow · WRAPPER spacing — match the .pen content
   rhythm (vertical flex, uniform gap:18) so nothing is cramped.
   ============================================================ */
.remesa-scope .card { padding: 36px 30px 44px; }
.remesa-scope .gas-card { max-width: var(--content-col); }

/* Each step/result flows vertically with one consistent gap. */
.remesa-scope .gas-step,
.remesa-scope .gas-step > form,
.remesa-scope .remesa-result { display: flex; flex-direction: column; gap: 18px; }

/* `gap` is the single source of block spacing — neutralize the ad-hoc margins
   (incl. inline style="margin-*") that used to leave sections/buttons touching. */
.remesa-scope .gas-step-head,
.remesa-scope .card-title,
.remesa-scope .card-subtitle,
.remesa-scope .remesa-stepper,
.remesa-scope .remesa-summary-rows,
.remesa-scope .remesa-delivery-badge,
.remesa-scope .remesa-amount-box,
.remesa-scope .remesa-breakdown,
.remesa-scope .remesa-footer-note,
.remesa-scope .remesa-rev-group,
.remesa-scope .remesa-rev-totals,
.remesa-scope .remesa-checklist,
.remesa-scope .remesa-received,
.remesa-scope .remesa-result-head,
.remesa-scope .remesa-howto,
.remesa-scope .remesa-cardbrands,
.remesa-scope .deposit-status-row,
.remesa-scope .deposit-expiry,
.remesa-scope .deposit-card,
.remesa-scope .deposit-secondary-row,
.remesa-scope .form-group,
.remesa-scope .form-section-eyebrow,
.remesa-scope .form-actions,
.remesa-scope .gas-step > .callout,
.remesa-scope .gas-step > .field { margin: 0 !important; }

/* Tighten the heading cluster: eyebrow/title/subtitle read as one group. */
.remesa-scope .gas-step > form { width: 100%; }
.remesa-scope .card-subtitle { margin-top: -8px !important; }

/* A touch of air inside the result/processing header cluster. */
.remesa-scope .remesa-result-head { gap: 6px; }
.remesa-scope .remesa-received { display: flex; flex-direction: column; gap: 6px; align-items: center; }

/* ============================================================
   REMITTANCE flow · form fields (design/remesa-criptoenvio.pen)
   Field card wrapper + text input + label/hint styling.
   ============================================================ */
/* Fields live inside a #111 card (padding 24, gap 16) like the .pen. */
.remesa-scope .remesa-fieldcard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.remesa-scope .remesa-fieldcard .form-group,
.remesa-scope .remesa-fieldcard .form-row { margin: 0; }
.remesa-scope .remesa-fieldcard .form-section-eyebrow { margin: 4px 0 0; }

/* Text inputs: radius 6, var(--bg) fill, 13/14 padding, var(--border) border. */
.remesa-scope .form-input {
    padding: 13px 14px;
    font-size: 0.9375rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.remesa-scope .form-input::placeholder { color: var(--text-faint); }
.remesa-scope .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(74, 159, 216, 0.12);
    outline: none;
}
/* Labels = uppercase mono #888; hints = mono #666 (matches the .pen). */
.remesa-scope .form-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 8px;
}
.remesa-scope .form-hint {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
    line-height: 1.4;
    margin-top: 8px;
}
.remesa-scope .form-required { color: var(--accent); margin-left: 3px; }
/* The verify button matches the input height and doesn't shrink. */
.remesa-scope .remesa-lookup { display: flex; gap: 10px; align-items: stretch; }
.remesa-scope .remesa-lookup .form-input { flex: 1 1 auto; }
.remesa-scope .remesa-lookup .btn { flex: 0 0 auto; min-height: 0; padding: 0 18px; }
/* Verified beneficiary card inside the field card. */
.remesa-scope .remesa-found {
    margin: 0;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--line-success);
    border-radius: 6px;
}
/* expiry / cvv side-by-side row inside the field card. */
.remesa-scope .remesa-fieldcard .form-row { display: flex; gap: 12px; }
.remesa-scope .remesa-fieldcard .form-row .form-group { flex: 1 1 0; }

/* ============================================================
   REMITTANCE · ENTRY screen (receive-method picker)
   Eye-catching start — 3 big actionable cards that each route into
   their own stepped flow. Matches design/remesa-criptoenvio.pen
   "ENTRY · Receive method" (web + mobile).
   ============================================================ */
/* The picker needs more room than the 600px flow column. */
.remesa-scope .gas-card:has(.remesa-entry) { max-width: var(--content-col); }

.remesa-entry-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    margin-top: var(--space-1);
}
.remesa-entry-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--accent-soft);
}
.remesa-scope .remesa-entry-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.12;
    margin: 0;
}

/* Higher specificity than `.remesa-scope .gas-step > form` (which would
   otherwise force this form to flex-column). */
.remesa-scope .gas-step > form.remesa-entry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: var(--space-2);
}
.remesa-entry-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 232px;
    padding: 22px;
    text-align: left;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    transition: var(--transition);
}
/* No card is highlighted by default; the accent border appears on the hovered
   (or keyboard-focused) card so selection intent follows the pointer. */
.remesa-entry-card:hover,
.remesa-entry-card:focus-visible {
    background: var(--tile-blue-soft);
    border-color: var(--accent);
    box-shadow: 0 0 24px -6px rgba(74, 159, 216, 0.35);
    transform: translateY(-2px);
}
.remesa-entry-card:hover .remesa-entry-choose,
.remesa-entry-card:focus-visible .remesa-entry-choose { color: var(--accent); }
.remesa-entry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 12px;
}
.remesa-entry-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.remesa-entry-name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
}
.remesa-entry-desc {
    font-family: var(--font-mono);
    font-size: 0.78125rem;
    color: var(--text-subtle);
    line-height: 1.45;
}
.remesa-entry-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.remesa-entry-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    background: var(--bg-chip);
    font-family: var(--font-mono);
    font-size: 0.65625rem;
    color: var(--text-muted);
}
.remesa-entry-badge.is-ok { background: var(--tile-green); border-color: rgba(34, 197, 94, 0.4); color: var(--success); }
.remesa-entry-foot { display: flex; align-items: center; justify-content: space-between; }
.remesa-entry-choose { font-family: var(--font-display); font-size: 0.84375rem; font-weight: 600; color: var(--text-muted); }
.remesa-entry-arrow { color: var(--text-faint); transition: var(--transition); flex: 0 0 auto; }
.remesa-entry-card:hover .remesa-entry-arrow,
.remesa-entry-card:focus-visible .remesa-entry-arrow { color: var(--accent); transform: translateX(3px); }
/* A delivery rail the wallet reports as closed (maintenance, or its external
   counterparty is down). The row stays visible so the sender can see the option
   exists and is temporarily out — hiding it would read as "we never offered
   this". `disabled` on the <button> is what actually blocks it; this is only
   presentation, so the gate does not depend on the stylesheet loading. */
/* Mobile: stack the cards as compact horizontal rows (matches the .pen
   mobile entry frame). */
@media (max-width: 680px) {
    .remesa-scope .gas-card:has(.remesa-entry) { max-width: none; }
    .remesa-entry-head { align-items: flex-start; text-align: left; }
    .remesa-scope .remesa-entry-title { font-size: 1.5rem; }
    .remesa-scope .gas-step > form.remesa-entry-grid { grid-template-columns: 1fr; gap: 12px; }
    .remesa-entry-card {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        min-height: 0;
        padding: 16px;
    }
    .remesa-entry-card .remesa-entry-foot { flex: 0 0 auto; }
    .remesa-entry-choose { display: none; }
}

/* ============================================================
   REMITTANCE · stepper — compact mobile variant
   Desktop shows the labelled dot stepper (.remesa-stepper); on a phone
   the 4 labels overflow, so we swap to a thin progress bar + caption
   ("Step X of 4 · Name"). Matches the .pen mobile flow frames.
   ============================================================ */
.remesa-stepper-m { display: none; }
.remesa-stepm-track { display: flex; gap: 5px; }
.remesa-stepm-seg {
    flex: 1 1 0;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border);
    transition: background var(--transition);
}
.remesa-stepm-seg.is-on { background: var(--accent); }
.remesa-stepm-cap {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--text-faint);
}
.remesa-stepm-cap b { color: var(--accent-soft); font-weight: 500; }

@media (max-width: 680px) {
    /* The labelled dot stepper + the redundant "STEP X OF 4" eyebrow give way
       to the compact bar (which already states the step + name). The dot
       stepper hides in every flow that renders it (remesa, impuestos, coupon);
       the eyebrow tag only hides in the remesa flow, where every screen has
       the compact bar as its replacement. */
    .remesa-stepper { display: none; }
    .remesa-scope .gas-step-head .gas-step-tag { display: none; }
    .remesa-stepper-m { display: flex; flex-direction: column; gap: 9px; }
}

/* ============================================================
   REMITTANCE · optional sender details (collapsible disclosure)
   Sender info is optional, so it sits collapsed by default and
   expands to add name / email / ID.
   ============================================================ */
.remesa-scope .remesa-sender {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    overflow: hidden;
}
.remesa-scope .remesa-sender-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.remesa-sender-summary::-webkit-details-marker { display: none; }
.remesa-sender-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.remesa-sender-icon { color: var(--text-subtle); flex: 0 0 auto; }
.remesa-sender-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.remesa-sender-opt {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    background: var(--bg-chip);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: var(--text-faint);
}
.remesa-sender-chev { color: var(--text-faint); flex: 0 0 auto; transition: transform var(--transition); }
.remesa-sender[open] .remesa-sender-chev { transform: rotate(180deg); }
.remesa-sender-summary:hover .remesa-sender-chev { color: var(--text-subtle); }
.remesa-sender-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--border);
}

/* Remittance CLÁSICA (card) payout — two-column field rows */
.remesa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, 12px); }
@media (max-width: 420px) { .remesa-row2 { grid-template-columns: 1fr; } }

/* ============================================================
   Help / step-by-step guide page (templates/pages/help.html)
   ============================================================ */
.page-help {
    width: 100%;
    max-width: var(--content-col);
    margin-inline: auto;
}

/* Track pages share the same standard column as the service cards. */
.page-track,
.page-track-lookup {
    width: 100%;
    max-width: var(--content-col);
    margin-inline: auto;
}

/* "Mis códigos": the sender's CADECA pickup codes, newest first. */
.codes-warning {
    margin: 0 0 var(--space-4);
    font-size: 0.8125rem;
    color: var(--text-subtle);
    text-align: center;
}
.codes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.codes-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.codes-item-code {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-4);
}
.codes-code {
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--text);
    overflow-wrap: anywhere;
}
.codes-item-details { margin-bottom: 0; }
.codes-item-details .remesa-rev-row:last-child { border-bottom: none; }
.codes-item-details a.remesa-rev-val { color: var(--accent); text-decoration: none; }
.codes-item-details a.remesa-rev-val:hover { text-decoration: underline; }
.codes-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.codes-pager > :first-child { justify-self: start; }
.codes-pager > :last-child { justify-self: end; }
.codes-pager-pos {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-subtle);
}

.help-header {
    display: flex; flex-direction: column; gap: var(--space-4);
    margin-bottom: var(--space-14);
    padding-bottom: var(--space-6); border-bottom: 1px solid var(--border);
}
.help-title {
    font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 800;
    letter-spacing: -0.025em; line-height: 1.08; color: var(--text);
}
.help-subtitle {
    font-size: 1rem; line-height: 1.5; color: var(--text-muted); max-width: 64ch;
}
.help-download { margin-top: var(--space-2); }
.help-download .btn { width: auto; }

.help-phase { margin-top: var(--space-14); }
.help-phase-head {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
    margin-bottom: var(--space-8);
}
.help-phase-tag {
    display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; padding: 7px 14px; border-radius: var(--radius-full);
}
.help-phase-head--buy .help-phase-tag {
    color: var(--accent-soft); background: var(--accent-glow); border: 1px solid rgba(74, 159, 216, 0.4);
}
.help-phase-head--redeem .help-phase-tag {
    color: var(--teal-text); background: rgba(22, 184, 148, 0.14); border: 1px solid rgba(22, 184, 148, 0.4);
}
.help-phase-head--cadeca .help-phase-tag {
    color: var(--warning-text); background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.42);
}
.help-phase-intro {
    font-size: 0.9375rem; line-height: 1.45; color: var(--text-muted); max-width: 64ch;
}

/* Horizontal filmstrip: device bezels connected by arrows. */
.help-strip {
    display: flex; align-items: flex-start; justify-content: center;
    gap: var(--space-1);
}
.help-step {
    flex: 1 1 0; min-width: 0; max-width: 168px;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.help-bezel {
    position: relative; width: 100%; height: 268px;
    padding: 8px; background: var(--bg-elev-1);
    border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.help-shot {
    display: block; width: 100%; height: 100%;
    object-fit: contain; border-radius: 10px;
}
.help-step-num {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-full);
    font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 800; color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.help-step-num--buy { background: var(--accent); }
.help-step-num--redeem { background: #16b894; }
.help-step-num--cadeca { background: var(--warning); }
.help-step-title {
    font-size: 0.8125rem; font-weight: 700; color: var(--text);
    line-height: 1.2; text-align: center;
}

/* Arrow sits at the bezel's height so it lines up with the screen, not the caption. */
.help-arrow {
    flex: 0 0 auto; height: 268px;
    display: flex; align-items: center; justify-content: center;
}
.help-arrow--buy { color: var(--accent); }
.help-arrow--redeem { color: #16b894; }
.help-arrow--cadeca { color: var(--warning); }

.help-footnote {
    margin-top: var(--space-14); padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    font-size: 0.8125rem; line-height: 1.6; color: var(--text-subtle);
}

@media (max-width: 720px) {
    .help-header { margin-bottom: var(--space-10); }
    .help-phase { margin-top: var(--space-10); }
    /* Drop the filmstrip into a 2-column grid; arrows no longer make sense. */
    .help-strip {
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5) var(--space-4); justify-content: stretch;
    }
    .help-step { max-width: none; }
    .help-bezel { height: auto; aspect-ratio: 150 / 280; }
    .help-arrow { display: none; }
}

/* ============================================================
   ACCESS GATE (/acceso)
   The verified-email checkpoint in front of the whole site. It is
   the first thing a visitor sees, so it stays deliberately bare:
   one card, one field, no navigation to wander off into.
   ============================================================ */

.page-gate {
    max-width: 440px;
    margin: 0 auto;
    padding: var(--space-10) 0;
}

.gate-card {
    text-align: left;
}

.gate-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    margin-bottom: var(--space-3);
}

.gate-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: var(--space-2);
}

.gate-subtitle {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--space-6);
    /* Addresses are long and unbreakable; let them wrap rather than
       widen the card on a phone. */
    overflow-wrap: anywhere;
}

/* The six-digit field: wide tracking so the visitor can check what
   they typed against the email at a glance. */
.gate-code-input {
    font-size: 1.5rem;
    letter-spacing: 0.4em;
    text-align: center;
    padding-left: var(--space-4);
}

.gate-code-input::placeholder {
    letter-spacing: 0.4em;
    color: var(--text-faint);
}

.gate-footnote {
    margin-top: var(--space-5);
    text-align: center;
    font-size: 0.875rem;
}

.gate-footnote a {
    color: var(--accent);
    text-decoration: none;
}

.gate-footnote a:hover,
.gate-footnote a:focus-visible {
    text-decoration: underline;
}

.gate-legal {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-faint);
}

/* Email step: what the site does, beside the card on wide screens and
   above it on narrow ones, so a first-time visitor knows what they are
   signing in to before being asked for an address. */
.page-gate--intro {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--space-10);
    align-items: start;
}

.gate-intro .eyebrow {
    margin-bottom: var(--space-4);
}

.gate-intro-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.375rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: var(--space-3);
}

.gate-intro-lead {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.gate-features {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-6);
    display: grid;
    gap: var(--space-4);
}

.gate-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.gate-feature-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: var(--accent-glow);
    color: var(--accent);
}

.gate-feature-name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 2px;
}

.gate-feature-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-subtle);
}

.gate-intro-note {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--text-faint);
}

@media (max-width: 760px) {
    .page-gate--intro {
        grid-template-columns: minmax(0, 1fr);
        max-width: 440px;
        gap: var(--space-8);
        padding: var(--space-6) 0;
    }
}

/* Server-rendered failures on the gate. Unlike .form-error these are
   always visible when present: the page only renders one after a
   rejected submission. */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: var(--space-5);
}

.alert-error {
    background: var(--error-bg);
    border: 1px solid var(--error);
    color: var(--text);
}


/* ============================================================
   FAILURE SCREENS · support contact
   ============================================================ */

/* Support contact: the line and the phone number, as GoGas renders it.
   Replaced a mailto: button (an address nobody had asked for, which a phone
   browser often cannot open) — see templates/partials/support_contact.html. */
.support-contact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elev-2);
}

.support-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-glow);
    color: var(--accent);
}

.support-contact-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.support-contact-text strong {
    font-weight: 600;
    color: var(--text);
}

/* The number is the actionable half, so it carries the emphasis: monospace and
   accent-coloured, and it must never wrap mid-number. */
.support-phone-num {
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.support-phone-num:hover,
.support-phone-num:focus-visible {
    text-decoration: underline;
}