.voucher-page {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 8% 0%, rgba(30, 174, 229, .10), transparent 28rem),
        radial-gradient(circle at 92% 18%, rgba(39, 207, 164, .09), transparent 30rem),
        linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
    color: #0b1f3a;
    padding: clamp(4.25rem, 7vw, 7rem) 1.5rem 5rem;
}

.voucher-page__shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.voucher-page__ambient {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(18px);
    opacity: .55;
}

.voucher-page__ambient--one {
    width: 18rem;
    height: 18rem;
    left: -8rem;
    top: 14rem;
    background: rgba(25, 145, 238, .08);
}

.voucher-page__ambient--two {
    width: 20rem;
    height: 20rem;
    right: -9rem;
    top: 30rem;
    background: rgba(36, 198, 164, .07);
}

.voucher-page__header {
    max-width: 760px;
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
    text-align: center;
}

.voucher-page__eyebrow,
.voucher-guide__eyebrow,
.voucher-viewer__eyebrow,
.voucher-query__card-heading > div > span {
    display: block;
    color: #078fae;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.voucher-page__header h1 {
    margin: .7rem 0 .9rem;
    font-size: clamp(2.25rem, 4.5vw, 4.15rem);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 800;
    color: #071b34;
}

.voucher-page__header p {
    margin: 0 auto;
    color: #60738a;
    font-size: clamp(1rem, 1.6vw, 1.14rem);
    line-height: 1.7;
    max-width: 640px;
}

.voucher-query {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.25rem, 3vw, 2.4rem);
    align-items: stretch;
}

.voucher-query__card,
.voucher-guide {
    border-radius: 28px;
    min-width: 0;
}

.voucher-query__card {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(155, 180, 205, .38);
    box-shadow: 0 28px 70px rgba(23, 55, 87, .11);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.voucher-query__card-heading {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid #e6eef6;
    margin-bottom: 1.5rem;
}

.voucher-query__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    color: #058eae;
    background: linear-gradient(145deg, #e8f9ff, #e7fff8);
    border: 1px solid #caedf1;
}

.voucher-query__icon svg,
.voucher-field__control > svg,
.voucher-field__select > svg:not(.voucher-field__chevron),
.voucher-form__privacy svg,
.voucher-form__submit svg,
.voucher-help svg,
.voucher-viewer svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.voucher-query__icon svg { width: 23px; height: 23px; }

.voucher-query__card-heading h2 {
    margin: .2rem 0 0;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    letter-spacing: -.025em;
    font-weight: 800;
}

.voucher-form {
    display: grid;
    gap: 1.15rem;
}

.voucher-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.voucher-field { min-width: 0; }

.voucher-field label {
    display: block;
    margin: 0 0 .45rem;
    font-size: .84rem;
    font-weight: 750;
    color: #17324e;
}

.voucher-field small {
    display: block;
    margin-top: .38rem;
    color: #7c8da0;
    font-size: .76rem;
    line-height: 1.4;
}

.voucher-field__control,
.voucher-field__select,
.voucher-field__amount {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    border: 1px solid #ccdae8;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.voucher-field__select {
    position: relative;
    grid-template-columns: 45px minmax(0, 1fr) 38px;
}

.voucher-field__amount {
    grid-template-columns: 55px minmax(0,1fr);
}

.voucher-field__control:focus-within,
.voucher-field__select:focus-within,
.voucher-field__amount:focus-within {
    border-color: #23b6d4;
    box-shadow: 0 0 0 4px rgba(24, 178, 209, .11);
}

.voucher-field__control > svg,
.voucher-field__select > svg:not(.voucher-field__chevron) {
    width: 19px;
    height: 19px;
    justify-self: center;
    color: #7592ab;
}

.voucher-field__mini,
.voucher-field__amount > span {
    display: grid;
    place-items: center;
    height: 100%;
    border-right: 1px solid #d9e4ee;
    color: #53728f;
    font-weight: 800;
    font-size: .82rem;
}

.voucher-field__amount > span { font-size: .92rem; }

.voucher-field input,
.voucher-field select {
    appearance: none;
    width: 100%;
    height: 52px;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #15314c;
    font: inherit;
    padding: 0 .85rem;
}

.voucher-field select { cursor: pointer; padding-right: .25rem; }
.voucher-field input::placeholder { color: #9aabbc; }

.voucher-field__chevron {
    width: 16px !important;
    height: 16px !important;
    color: #6f8499 !important;
    pointer-events: none;
}

.voucher-form__status {
    min-height: 0;
    padding: 0;
    border-radius: 13px;
    font-size: .86rem;
    line-height: 1.45;
}

.voucher-form__status:not(:empty) {
    padding: .85rem 1rem;
    border: 1px solid #d6e2ec;
    background: #f7fafc;
}

.voucher-form__status[data-tone="danger"] { color: #a31d2c; background: #fff4f5; border-color: #ffd2d8; }
.voucher-form__status[data-tone="warning"] { color: #875c00; background: #fffaed; border-color: #f8e2a6; }
.voucher-form__status[data-tone="success"] { color: #08745d; background: #effcf8; border-color: #c3eee2; }

.voucher-form__submit {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    color: #fff;
    background: linear-gradient(100deg, #168ef0 0%, #15b7d2 52%, #24cfa5 100%);
    box-shadow: 0 15px 34px rgba(12, 149, 205, .23);
    font-weight: 800;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.voucher-form__submit:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(12,149,205,.29); }
.voucher-form__submit:disabled { cursor: wait; opacity: .76; transform: none; }
.voucher-form__submit > svg { width: 20px; height: 20px; }
.voucher-form__arrow { margin-left: .15rem; }

.voucher-form__spinner {
    width: 19px;
    height: 19px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: voucher-spin .7s linear infinite;
    display: none;
}

.voucher-form.is-loading .voucher-form__spinner { display: block; }
.voucher-form.is-loading .voucher-form__submit > svg { display: none; }

.voucher-form__privacy {
    margin: -.2rem 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .45rem;
    color: #7c8da0;
    font-size: .74rem;
    text-align: center;
}

.voucher-form__privacy svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: .05rem; }

.voucher-guide {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 78% 10%, rgba(17,190,212,.24), transparent 18rem),
        radial-gradient(circle at 16% 90%, rgba(38,212,165,.16), transparent 19rem),
        linear-gradient(145deg, #071c38 0%, #06162e 56%, #071b32 100%);
    border: 1px solid rgba(68, 146, 196, .28);
    padding: clamp(1.65rem, 3.2vw, 2.55rem);
    box-shadow: 0 28px 75px rgba(2, 18, 39, .2);
}

.voucher-guide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(80,166,214,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(80,166,214,.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
    pointer-events: none;
}

.voucher-guide > * { position: relative; z-index: 1; }

.voucher-guide__visual {
    height: 152px;
    position: relative;
    margin-bottom: 1.2rem;
}

.voucher-guide__orb {
    position: absolute;
    width: 180px;
    height: 90px;
    border-radius: 50%;
    background: #1cbbce;
    opacity: .16;
    filter: blur(28px);
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.voucher-guide__paper {
    position: absolute;
    width: 126px;
    height: 150px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-3deg);
    border-radius: 13px;
    padding: 1.2rem .9rem;
    background: linear-gradient(180deg,#fff,#edf9fc);
    box-shadow: 0 25px 50px rgba(0,0,0,.3), 0 0 0 1px rgba(115,224,235,.24);
}

.voucher-guide__paper > span { display:block; height:5px; border-radius:5px; background:#d1e1eb; margin-bottom:7px; }
.voucher-guide__paper > span:first-child { width:62%; background:#1ac2c2; }
.voucher-guide__paper > span:nth-child(2) { width:84%; }
.voucher-guide__paper > span:nth-child(3) { width:70%; }
.voucher-guide__paper > div { display:flex; gap:5px; margin:20px 0 14px; }
.voucher-guide__paper i { height:27px; flex:1; background:#d7e8f1; border-radius:4px; }
.voucher-guide__paper strong { color:#0e8299; font-size:.8rem; letter-spacing:.12em; }

.voucher-guide__check {
    position: absolute;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    left: calc(50% + 43px);
    top: 64%;
    background: linear-gradient(145deg,#12b998,#32d49f);
    border: 4px solid #081a33;
    box-shadow: 0 10px 25px rgba(23,203,166,.35);
}

.voucher-guide__check svg { width:21px; height:21px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.voucher-guide h2 {
    margin: .55rem 0 .75rem;
    max-width: 520px;
    font-size: clamp(1.65rem, 3.1vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
}

.voucher-guide > p {
    color: #9fb5cb;
    line-height: 1.7;
    margin: 0 0 1.55rem;
}

.voucher-guide__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.voucher-guide__steps li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .72rem .8rem;
    border-radius: 13px;
    border: 1px solid rgba(118,173,211,.15);
    background: rgba(6, 42, 71, .38);
}

.voucher-guide__steps li > span {
    color: #2bd4c0;
    font-weight: 850;
    font-size: .74rem;
    letter-spacing: .08em;
}

.voucher-guide__steps strong,
.voucher-guide__steps small { display:block; }
.voucher-guide__steps strong { font-size:.86rem; }
.voucher-guide__steps small { margin-top:.12rem; color:#8fa9c2; font-size:.75rem; }

.voucher-guide__formats {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.3rem;
}

.voucher-guide__formats span {
    padding: .48rem .72rem;
    border-radius: 999px;
    color: #b8f6eb;
    border: 1px solid rgba(61,216,188,.28);
    background: rgba(26,144,136,.12);
    font-size: .74rem;
    font-weight: 750;
}

.voucher-help {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    color: #3c5570;
    background: rgba(255,255,255,.66);
    border: 1px solid rgba(164,187,207,.32);
}

.voucher-help > div { display:flex; align-items:center; gap:.75rem; min-width:0; }
.voucher-help svg { width:22px; height:22px; flex:0 0 22px; color:#0ba4b7; }
.voucher-help strong, .voucher-help span { display:block; }
.voucher-help strong { color:#18334f; font-size:.88rem; }
.voucher-help span { margin-top:.13rem; font-size:.78rem; }
.voucher-help a { flex:0 0 auto; color:#078fae; text-decoration:none; font-weight:800; font-size:.82rem; }

.voucher-viewer[hidden] { display: none !important; }

.voucher-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 12px;
}

.voucher-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 16, 36, .78);
    backdrop-filter: blur(13px);
}

.voucher-viewer__dialog {
    position: relative;
    width: min(1260px, 100%);
    max-height: calc(100dvh - 24px);
    min-height: min(760px, calc(100dvh - 24px));
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(195,214,229,.78);
    box-shadow: 0 35px 100px rgba(0,10,28,.42);
}

.voucher-viewer__header {
    min-width: 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding: 1.05rem 1.25rem;
    border-bottom:1px solid #e2ebf3;
    background: linear-gradient(135deg,#fff,#f5fbff);
}

.voucher-viewer__identity { display:flex; align-items:center; gap:.8rem; min-width:0; }
.voucher-viewer__icon { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:13px; color:#098da9; background:#eaf9fc; }
.voucher-viewer__icon svg { width:22px; height:22px; }
.voucher-viewer__identity h2 { margin:.15rem 0 .12rem; font-size:1.18rem; font-weight:850; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voucher-viewer__identity p { margin:0; color:#7a8da0; font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voucher-viewer__header-actions { display:flex; align-items:center; gap:.65rem; flex:0 0 auto; }

.voucher-viewer__status {
    border-radius:999px;
    padding:.46rem .7rem;
    font-size:.71rem;
    font-weight:800;
    color:#4e657a;
    background:#eef4f8;
}
.voucher-viewer__status[data-tone="success"] { color:#08765d; background:#e7f9f2; }
.voucher-viewer__status[data-tone="danger"] { color:#a52230; background:#ffedf0; }
.voucher-viewer__status[data-tone="warning"] { color:#865c00; background:#fff5d8; }

.voucher-viewer__close {
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid #d7e3ed;
    display:grid;
    place-items:center;
    color:#3e5972;
    background:#fff;
}
.voucher-viewer__close svg { width:19px; height:19px; }

.voucher-viewer__toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.75rem 1.25rem;
    border-bottom:1px solid #e5edf4;
    background:#fff;
}

.voucher-viewer__formats { display:flex; gap:.4rem; min-width:0; overflow:auto; scrollbar-width:none; }
.voucher-viewer__formats::-webkit-scrollbar { display:none; }
.voucher-viewer__formats button {
    border:1px solid transparent;
    border-radius:10px;
    background:#f1f5f8;
    color:#5d7288;
    padding:.58rem .8rem;
    white-space:nowrap;
    font-size:.77rem;
    font-weight:800;
}
.voucher-viewer__formats button.is-active { color:#057d9b; background:#e9f9fb; border-color:#bce9ed; box-shadow:inset 0 -2px #15b7c0; }

.voucher-viewer__tools { display:flex; gap:.45rem; flex:0 0 auto; }
.voucher-viewer__tools button,
.voucher-viewer__footer button {
    border:1px solid #d9e4ec;
    border-radius:10px;
    background:#fff;
    color:#29445d;
    padding:.57rem .75rem;
    display:flex;
    align-items:center;
    gap:.42rem;
    font-size:.76rem;
    font-weight:800;
}
.voucher-viewer__tools svg { width:16px; height:16px; }
.voucher-viewer__tools .voucher-viewer__download { border-color:#bee8e3; color:#077a67; background:#effbf8; }

.voucher-viewer__canvas {
    position:relative;
    min-height:0;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,.9), transparent 28rem),
        linear-gradient(135deg,#e8eef3,#f4f7fa);
}

.voucher-viewer__frame {
    width:100%;
    height:100%;
    min-height:420px;
    border:0;
    background:transparent;
}

.voucher-viewer__loading,
.voucher-viewer__error {
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    place-content:center;
    justify-items:center;
    text-align:center;
    padding:2rem;
    color:#526980;
}

.voucher-viewer__loading > span {
    width:34px;
    height:34px;
    border:3px solid #cfe4ed;
    border-top-color:#16adbe;
    border-radius:50%;
    animation:voucher-spin .75s linear infinite;
    margin-bottom:.8rem;
}

.voucher-viewer__loading strong,
.voucher-viewer__error strong { color:#18344f; font-size:.95rem; }
.voucher-viewer__loading small { margin-top:.2rem; color:#8497a9; font-size:.76rem; }
.voucher-viewer__error > span { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; margin-bottom:.75rem; color:#a42936; background:#ffecef; font-weight:900; }
.voucher-viewer__error p { margin:.35rem 0 .85rem; font-size:.8rem; }
.voucher-viewer__error button { border:0; border-radius:10px; padding:.6rem .9rem; color:#fff; background:#0c8ea9; font-weight:800; }

.voucher-viewer__footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.72rem 1.25rem;
    border-top:1px solid #e2ebf3;
    background:#fff;
}
.voucher-viewer__footer p { margin:0; min-width:0; display:flex; align-items:center; gap:.6rem; }
.voucher-viewer__footer strong { font-size:.78rem; color:#18344e; }
.voucher-viewer__footer span { font-size:.72rem; color:#8495a5; }

body.voucher-viewer-open { overflow:hidden; }

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

@media (hover:hover) {
    .voucher-viewer__tools button:hover,
    .voucher-viewer__footer button:hover,
    .voucher-viewer__formats button:hover { border-color:#a8cedd; background:#f4fbfd; }
    .voucher-help a:hover { color:#056f88; }
}

@media (max-width: 980px) {
    .voucher-page { padding-top:3.6rem; }
    .voucher-query { grid-template-columns:1fr; }
    .voucher-guide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:2rem; }
    .voucher-guide__visual { grid-row:1 / span 4; align-self:center; height:220px; margin:0; }
    .voucher-guide__steps, .voucher-guide__formats { grid-column:2; }
    .voucher-viewer__dialog { width:100%; }
}

@media (max-width: 700px) {
    .voucher-page { padding:3rem 1rem 3.5rem; }
    .voucher-page__header h1 { font-size:clamp(2.15rem,10vw,3rem); }
    .voucher-query__card, .voucher-guide { border-radius:22px; }
    .voucher-query__card { padding:1.2rem; }
    .voucher-form__row { grid-template-columns:1fr; gap:1.15rem; }
    .voucher-guide { display:block; padding:1.35rem; }
    .voucher-guide__visual { height:142px; margin-bottom:1rem; }
    .voucher-guide__steps, .voucher-guide__formats { grid-column:auto; }
    .voucher-help { align-items:flex-start; flex-direction:column; }
    .voucher-viewer { padding:0; }
    .voucher-viewer__dialog { height:100dvh; max-height:100dvh; min-height:100dvh; border-radius:0; border:0; }
    .voucher-viewer__header { padding:.8rem .85rem; }
    .voucher-viewer__icon { width:38px; height:38px; flex-basis:38px; }
    .voucher-viewer__identity h2 { font-size:1rem; max-width:50vw; }
    .voucher-viewer__identity p, .voucher-viewer__eyebrow { display:none; }
    .voucher-viewer__status { display:none; }
    .voucher-viewer__toolbar { align-items:stretch; flex-direction:column; padding:.62rem .8rem; gap:.6rem; }
    .voucher-viewer__formats { width:100%; }
    .voucher-viewer__formats button { flex:1 0 auto; }
    .voucher-viewer__tools { display:grid; grid-template-columns:1fr 1fr; }
    .voucher-viewer__tools button { justify-content:center; }
    .voucher-viewer__frame { min-height:0; }
    .voucher-viewer__footer { padding:.65rem .8rem; }
    .voucher-viewer__footer p span { display:none; }
}

@media (max-width: 430px) {
    .voucher-query__card-heading { align-items:flex-start; }
    .voucher-query__icon { width:43px; height:43px; flex-basis:43px; }
    .voucher-field__control, .voucher-field__select, .voucher-field__amount { min-height:52px; }
    .voucher-field input, .voucher-field select { height:50px; }
    .voucher-form__privacy { text-align:left; }
    .voucher-viewer__footer p { display:none; }
    .voucher-viewer__footer { justify-content:flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .voucher-form__submit,
    .voucher-field__control,
    .voucher-field__select,
    .voucher-field__amount { transition:none; }
    .voucher-form__spinner,
    .voucher-viewer__loading > span { animation-duration:1.5s; }
}

@media (forced-colors: active) {
    .voucher-form__submit,
    .voucher-guide,
    .voucher-viewer__formats button.is-active { forced-color-adjust:auto; }
}

/* Final visual containment after responsive QA. */
.voucher-guide h2 {
    color: #ffffff;
}

@media (max-width: 700px) {
    .voucher-guide__visual {
        height: 176px;
        margin-bottom: .8rem;
    }

    .voucher-guide__paper {
        width: 118px;
        height: 142px;
        top: 44%;
    }

    .voucher-guide__check {
        top: 58%;
    }
}

/* === CLEM VOUCHER 09 - CIERRE UI INTERACTIVO === */
/*
   Alcance:
   - compacta la cabecera de /Voucher;
   - mantiene el título en una línea en desktop;
   - convierte el panel derecho en una guía funcional por foco;
   - NO modifica viewer PDF, backend, endpoints ni lógica de consulta.
*/
.voucher-page {
    padding-top: clamp(1.35rem, 2.35vw, 2.15rem);
}

.voucher-page__header {
    max-width: 1180px;
    margin-bottom: clamp(1.25rem, 2.2vw, 1.8rem);
}

.voucher-page__header h1 {
    margin: .42rem 0 .55rem;
    font-size: clamp(2.1rem, 3.25vw, 3.3rem);
    line-height: 1.04;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.voucher-page__header p {
    max-width: 760px;
    font-size: clamp(.96rem, 1.25vw, 1.08rem);
    line-height: 1.52;
}

.voucher-query {
    gap: clamp(1rem, 2vw, 1.7rem);
}

.voucher-query__card {
    padding: clamp(1.35rem, 2.2vw, 1.9rem);
}

.voucher-query__card-heading {
    padding-bottom: 1rem;
    margin-bottom: 1.15rem;
}

.voucher-form {
    gap: .98rem;
}

/* Interactive guide */
.voucher-guide--interactive {
    display: flex;
    flex-direction: column;
    padding: clamp(1.35rem, 2.5vw, 1.9rem);
    min-height: 0;
}

.voucher-guide__intro {
    position: relative;
    z-index: 2;
}

.voucher-guide__intro h2 {
    margin: .45rem 0 .55rem;
    max-width: 560px;
    font-size: clamp(1.55rem, 2.5vw, 2.05rem);
    line-height: 1.08;
}

.voucher-guide__intro > p {
    margin: 0;
    max-width: 590px;
    color: #9fb5cb;
    font-size: .92rem;
    line-height: 1.55;
}

.voucher-guide__receipt-stage {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    min-height: 318px;
    padding: 1.05rem 0 .85rem;
}

.voucher-guide__receipt-stage::before {
    content: "";
    position: absolute;
    width: min(82%, 390px);
    height: 66%;
    border-radius: 50%;
    background: rgba(24, 193, 207, .16);
    filter: blur(42px);
    pointer-events: none;
}

.voucher-guide__receipt {
    position: relative;
    width: min(350px, 84%);
    padding: 1rem 1.05rem 1.05rem;
    border-radius: 17px;
    color: #162b42;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
    border: 1px solid rgba(126, 211, 225, .58);
    box-shadow: 0 24px 55px rgba(0, 10, 28, .34), 0 0 0 1px rgba(255,255,255,.56) inset;
    transform: rotate(-1deg);
}

.voucher-guide__receipt-brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .65rem;
    color: #0c7690;
}

.voucher-guide__receipt-brand strong {
    font-size: .83rem;
    letter-spacing: .08em;
}

.voucher-guide__receipt-brand small {
    color: #8ba0b3;
    font-size: .62rem;
}

.voucher-guide__divider {
    height: 1px;
    margin: .55rem 0;
    background: #e0eaf1;
}

.voucher-guide__zone {
    position: relative;
    min-width: 0;
    padding: .42rem .52rem;
    border: 2px solid transparent;
    border-radius: 9px;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.voucher-guide__zone::after {
    content: "AQUÍ";
    position: absolute;
    top: -.72rem;
    right: .45rem;
    padding: .18rem .38rem;
    border-radius: 999px;
    color: #fff;
    background: #168de8;
    box-shadow: 0 5px 13px rgba(22, 141, 232, .28);
    font-size: .48rem;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .18s ease, transform .18s ease;
}

.voucher-guide__zone.is-guide-active {
    z-index: 3;
    border-color: #22a8f2;
    background: rgba(27, 161, 239, .075);
    box-shadow: 0 0 0 5px rgba(33, 170, 242, .12), 0 9px 20px rgba(32, 123, 187, .12);
    transform: translateY(-1px);
}

.voucher-guide__zone.is-guide-active::after {
    opacity: 1;
    transform: translateY(0);
}

.voucher-guide__zone-label {
    display: block;
    margin-bottom: .05rem;
    color: #8195a8;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.voucher-guide__zone strong {
    display: block;
    overflow: hidden;
    color: #142c43;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voucher-guide__zone--document {
    text-align: center;
}

.voucher-guide__zone--document strong {
    color: #0b7190;
    font-size: .85rem;
}

.voucher-guide__receipt-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin: .38rem 0 .6rem;
}

.voucher-guide__receipt-lines {
    display: grid;
    gap: .34rem;
    margin: .5rem .2rem .7rem;
}

.voucher-guide__receipt-lines span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #e4edf3;
}

.voucher-guide__receipt-lines span:nth-child(2) { width: 82%; }
.voucher-guide__receipt-lines span:nth-child(3) { width: 67%; }

.voucher-guide__receipt-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .27rem .65rem;
    padding: .45rem .5rem;
    color: #7d91a4;
    border-top: 1px solid #e4ecf2;
    font-size: .62rem;
}

.voucher-guide__receipt-summary strong {
    color: #64798c;
    font-weight: 700;
}

.voucher-guide__zone--total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: .15rem;
    padding-top: .52rem;
    padding-bottom: .52rem;
}

.voucher-guide__zone--total > span {
    color: #112d47;
    font-size: .76rem;
    font-weight: 900;
}

.voucher-guide__zone--total strong {
    color: #087f9b;
    font-size: 1rem;
}

.voucher-guide__hint {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 62px;
    padding: .72rem .8rem;
    border: 1px solid rgba(69, 175, 207, .22);
    border-radius: 14px;
    background: rgba(8, 48, 77, .55);
}

.voucher-guide__hint-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #39dccb;
    background: rgba(29, 182, 184, .12);
    border: 1px solid rgba(49, 211, 202, .2);
}

.voucher-guide__hint-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.voucher-guide__hint strong,
.voucher-guide__hint span {
    display: block;
}

.voucher-guide__hint strong {
    color: #fff;
    font-size: .84rem;
}

.voucher-guide__hint span {
    margin-top: .1rem;
    color: #94acc2;
    font-size: .74rem;
    line-height: 1.35;
}

.voucher-guide--interactive .voucher-guide__formats {
    position: relative;
    z-index: 2;
    margin-top: .85rem;
}

@media (max-width: 1080px) {
    .voucher-page__header h1 {
        white-space: normal;
    }
}

@media (max-width: 980px) {
    .voucher-page {
        padding-top: 1.65rem;
    }

    .voucher-page__header {
        margin-bottom: 1.35rem;
    }

    .voucher-guide--interactive {
        display: block;
    }

    .voucher-guide__receipt-stage {
        min-height: 300px;
    }
}

@media (max-width: 700px) {
    .voucher-page {
        padding-top: 1.35rem;
    }

    .voucher-page__header h1 {
        margin-top: .35rem;
        font-size: clamp(2rem, 9.2vw, 2.75rem);
        line-height: 1.02;
    }

    .voucher-page__header p {
        font-size: .94rem;
    }

    .voucher-guide--interactive {
        padding: 1.25rem;
    }

    .voucher-guide__intro h2 {
        font-size: 1.55rem;
    }

    .voucher-guide__receipt-stage {
        min-height: 292px;
        padding: .9rem 0 .65rem;
    }

    .voucher-guide__receipt {
        width: min(330px, 92%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .voucher-guide__zone,
    .voucher-guide__zone::after {
        transition: none;
    }
}

/* === CLEM VOUCHER 09 - PULIDO FINAL VISOR === */
/* UI/UX only. No API, backend, PDF or lookup changes. */

.voucher-guide__hint-icon {
    color: #5fe4d6;
    background: linear-gradient(145deg, rgba(23,190,190,.20), rgba(23,133,214,.14));
    border-color: rgba(78,222,213,.32);
    box-shadow: 0 8px 22px rgba(0,23,44,.18);
}
.voucher-guide__hint-icon svg { width:19px; height:19px; stroke-width:1.65; }

.voucher-guide__formats span {
    display:inline-flex;
    align-items:center;
    gap:.38rem;
    min-height:34px;
}
.voucher-guide__formats svg {
    width:15px;
    height:15px;
    flex:0 0 15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Premium CLEM header for the PDF viewer. */
.voucher-viewer__header {
    position:relative;
    overflow:hidden;
    padding:1.12rem 1.3rem;
    border-bottom:1px solid rgba(75,169,204,.22);
    color:#fff;
    background:
        radial-gradient(circle at 82% -35%, rgba(38,216,190,.20), transparent 21rem),
        radial-gradient(circle at 18% 130%, rgba(31,144,239,.22), transparent 24rem),
        linear-gradient(122deg,#06182f 0%,#082743 55%,#063b49 100%);
}
.voucher-viewer__header::before {
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:3px;
    background:linear-gradient(90deg,#1c8ff3 0%,#1cc6d1 50%,#2bd19d 100%);
}
.voucher-viewer__header::after {
    content:"";
    position:absolute;
    width:260px;
    height:160px;
    right:11%;
    top:-125px;
    border-radius:50%;
    border:1px solid rgba(87,225,215,.18);
    box-shadow:0 0 70px rgba(32,204,192,.12);
    pointer-events:none;
}
.voucher-viewer__identity,
.voucher-viewer__header-actions { position:relative; z-index:1; }

.voucher-viewer__icon {
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:15px;
    color:#5fe3da;
    background:linear-gradient(145deg,rgba(21,146,221,.18),rgba(29,207,174,.15));
    border:1px solid rgba(105,222,218,.28);
    box-shadow:0 12px 28px rgba(0,11,27,.20), inset 0 1px rgba(255,255,255,.06);
}
.voucher-viewer__eyebrow { color:#42d9d5; }
.voucher-viewer__identity h2 { color:#fff; font-size:1.22rem; letter-spacing:-.018em; }
.voucher-viewer__identity p { color:#9fb9cf; }

/* SUNAT status becomes a trust signal. */
.voucher-viewer__status {
    min-height:42px;
    display:inline-flex;
    align-items:center;
    gap:.46rem;
    padding:.42rem .68rem;
    border:1px solid rgba(166,196,214,.22);
    color:#d8e6ef;
    background:rgba(255,255,255,.075);
    box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.voucher-viewer__status::before {
    content:"SUNAT";
    padding-right:.48rem;
    border-right:1px solid currentColor;
    opacity:.72;
    font-size:.57rem;
    font-weight:900;
    letter-spacing:.09em;
}
.voucher-viewer__status[data-tone="success"] {
    color:#064c3d;
    border-color:rgba(73,219,168,.55);
    background:linear-gradient(135deg,#bdf8df 0%,#dcfaec 100%);
    box-shadow:0 8px 22px rgba(20,190,137,.18), inset 0 1px rgba(255,255,255,.8);
}
.voucher-viewer__status[data-tone="success"]::after {
    content:"✓";
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:#12a878;
    font-size:.68rem;
    font-weight:900;
}
.voucher-viewer__status[data-tone="warning"] {
    color:#734b00;
    border-color:rgba(241,184,68,.50);
    background:linear-gradient(135deg,#fff0bb,#fff7dc);
}
.voucher-viewer__status[data-tone="danger"] {
    color:#7e1d2a;
    border-color:rgba(231,93,112,.42);
    background:linear-gradient(135deg,#ffd8de,#fff0f2);
}
.voucher-viewer__status[data-tone="warning"]::after,
.voucher-viewer__status[data-tone="danger"]::after {
    content:"!";
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    font-size:.7rem;
    font-weight:900;
}
.voucher-viewer__status[data-tone="warning"]::after { background:#d99513; }
.voucher-viewer__status[data-tone="danger"]::after { background:#d64659; }

.voucher-viewer__close {
    color:#d9eaf4;
    border-color:rgba(181,215,232,.23);
    background:rgba(255,255,255,.075);
    backdrop-filter:blur(8px);
}

.voucher-viewer__formats button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.38rem;
}
.voucher-viewer__formats button svg {
    width:15px;
    height:15px;
    flex:0 0 15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.voucher-viewer__footer button[data-voucher-new-query] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.43rem;
    min-height:40px;
    color:#173d59;
    border-color:#cfe0ea;
    background:linear-gradient(180deg,#fff,#f6fbfd);
}
.voucher-viewer__footer button[data-voucher-new-query] svg {
    width:16px;
    height:16px;
    fill:none;
    stroke:#078fae;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media (hover:hover) {
    .voucher-viewer__close:hover {
        color:#fff;
        border-color:rgba(111,226,218,.38);
        background:rgba(26,188,190,.13);
    }
    .voucher-viewer__footer button[data-voucher-new-query]:hover {
        border-color:#9ed7df;
        background:#effbfd;
    }
}

@media (max-width:700px) {
    .voucher-viewer__header { padding:.78rem .82rem; }
    .voucher-viewer__icon { width:40px; height:40px; flex-basis:40px; }
    .voucher-viewer__status {
        display:inline-flex;
        min-height:36px;
        padding:.34rem .5rem;
        font-size:.66rem;
    }
    .voucher-viewer__status::before { display:none; }
    .voucher-viewer__status[data-tone="success"]::after,
    .voucher-viewer__status[data-tone="warning"]::after,
    .voucher-viewer__status[data-tone="danger"]::after {
        width:18px;
        height:18px;
    }
    .voucher-viewer__formats button { gap:.3rem; }
    .voucher-viewer__formats button svg { width:14px; height:14px; }
}

@media (max-width:430px) {
    .voucher-viewer__status { max-width:116px; }
    .voucher-viewer__footer button[data-voucher-new-query] { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
    .voucher-viewer__header::after { display:none; }
}

/* === CLEM VOUCHER 09 - MODAL APROBADO === */
/*
   Diseño aprobado por el usuario:
   - header claro y limpio;
   - identidad navy/cyan sobria;
   - estado SUNAT destacado sin sobrecarga;
   - toolbar blanca;
   - canvas PDF oscuro como protagonista;
   - footer limpio.
   SOLO VISUAL. No modifica comportamiento ni API.
*/

.voucher-viewer__backdrop {
    background: rgba(0, 20, 43, .76);
    backdrop-filter: blur(12px);
}

.voucher-viewer__dialog {
    width: min(1280px, calc(100vw - 32px));
    max-height: calc(100dvh - 30px);
    min-height: min(760px, calc(100dvh - 30px));
    border-radius: 24px;
    border: 1px solid rgba(189, 208, 223, .82);
    background: #ffffff;
    box-shadow:
        0 34px 90px rgba(0, 16, 39, .36),
        0 8px 28px rgba(0, 24, 48, .14);
}

/* Header claro, inspirado directamente en el prototipo aprobado. */
.voucher-viewer__header {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 1.25rem 1.55rem;
    color: #0b2c53;
    border-bottom: 1px solid #e2eaf1;
    background:
        radial-gradient(circle at 83% 15%, rgba(55, 205, 199, .12), transparent 19rem),
        radial-gradient(circle at 68% 110%, rgba(52, 153, 234, .08), transparent 24rem),
        linear-gradient(115deg, #ffffff 0%, #fbfdff 58%, #f3fbfd 100%);
}

/* Quita por completo la línea superior agresiva del diseño anterior. */
.voucher-viewer__header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 48%;
    height: 100%;
    pointer-events: none;
    opacity: .72;
    background:
        radial-gradient(110% 76% at 100% 0%, transparent 58%, rgba(72, 177, 223, .12) 58.4%, transparent 59.1%),
        radial-gradient(110% 76% at 100% 8%, transparent 62%, rgba(67, 199, 190, .10) 62.4%, transparent 63.1%),
        radial-gradient(110% 76% at 100% 18%, transparent 67%, rgba(80, 160, 220, .08) 67.4%, transparent 68.1%);
}

.voucher-viewer__header::after {
    display: none;
}

.voucher-viewer__identity,
.voucher-viewer__header-actions {
    position: relative;
    z-index: 2;
}

.voucher-viewer__identity {
    gap: 1rem;
}

.voucher-viewer__icon {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 16px;
    color: #dffbff;
    border: 1px solid rgba(32, 101, 150, .24);
    background: linear-gradient(145deg, #0b2f57 0%, #071c3e 100%);
    box-shadow:
        0 10px 24px rgba(2, 36, 73, .20),
        inset 0 1px rgba(255,255,255,.08);
}

.voucher-viewer__icon::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #f8fdff;
    background: #17cbb6;
    box-shadow: 0 4px 10px rgba(23, 203, 182, .26);
}

.voucher-viewer__icon svg {
    width: 25px;
    height: 25px;
}

.voucher-viewer__eyebrow {
    display: block;
    color: #0799b4;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .115em;
}

.voucher-viewer__identity h2 {
    margin: .22rem 0 .12rem;
    color: #0b2b54;
    font-size: clamp(1.12rem, 1.75vw, 1.42rem);
    font-weight: 880;
    letter-spacing: -.024em;
}

.voucher-viewer__identity p {
    display: block;
    color: #73879c;
    font-size: .78rem;
}

/* Estado SUNAT: visible, premium y sobrio. */
.voucher-viewer__status {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    padding: .45rem .78rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
    box-shadow: none;
}

.voucher-viewer__status::before {
    content: "SUNAT";
    padding-right: .55rem;
    border-right: 1px solid currentColor;
    opacity: .78;
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.voucher-viewer__status[data-tone="success"] {
    color: #087059;
    border: 1px solid #c8eee2;
    background: linear-gradient(180deg, #e5faf3 0%, #dff7ee 100%);
    box-shadow: 0 6px 18px rgba(23, 161, 123, .08);
}

.voucher-viewer__status[data-tone="success"]::after {
    content: "✓";
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #14a981;
    font-size: .68rem;
    font-weight: 900;
}

.voucher-viewer__status[data-tone="warning"] {
    color: #805a0a;
    border: 1px solid #f1dfad;
    background: #fff8e7;
}

.voucher-viewer__status[data-tone="danger"] {
    color: #973044;
    border: 1px solid #efcbd3;
    background: #fff0f3;
}

.voucher-viewer__close {
    width: 44px;
    height: 44px;
    color: #143b60;
    border: 1px solid #d7e3ed;
    background: rgba(255,255,255,.88);
    box-shadow: 0 5px 14px rgba(14, 45, 75, .07);
    backdrop-filter: none;
}

.voucher-viewer__close:hover {
    color: #0c6f8b;
    border-color: #b8dce5;
    background: #f6fcfd;
}

/* Toolbar blanca, limpia, sin competir con el comprobante. */
.voucher-viewer__toolbar {
    min-height: 76px;
    padding: .78rem 1.25rem;
    border-bottom: 1px solid #e4ebf1;
    background: #fff;
    box-shadow: 0 4px 14px rgba(13, 39, 65, .025);
}

.voucher-viewer__formats {
    gap: .46rem;
}

.voucher-viewer__formats button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: .62rem .92rem;
    color: #52697f;
    border: 1px solid #edf1f4;
    border-radius: 11px;
    background: #f4f7f9;
    box-shadow: none;
}

.voucher-viewer__formats button svg {
    width: 15px;
    height: 15px;
    color: #5b7288;
}

.voucher-viewer__formats button.is-active {
    color: #07577c;
    border-color: #1bb9cf;
    background: #f8fcfd;
    box-shadow:
        0 0 0 1px rgba(27, 185, 207, .08),
        0 5px 14px rgba(15, 137, 166, .08);
}

.voucher-viewer__formats button.is-active svg {
    color: #099db5;
}

.voucher-viewer__tools {
    gap: .55rem;
}

.voucher-viewer__tools button {
    min-height: 44px;
    padding: .62rem 1rem;
    border-radius: 11px;
    border: 1px solid #d7e2eb;
    color: #163d61;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(9, 35, 62, .04);
}

.voucher-viewer__tools .voucher-viewer__download {
    color: #ffffff;
    border-color: #0b7195;
    background: linear-gradient(135deg, #075883 0%, #087ca0 58%, #0aa3a7 100%);
    box-shadow: 0 7px 17px rgba(4, 96, 131, .18);
}

.voucher-viewer__tools .voucher-viewer__download:hover {
    color: #fff;
    border-color: #065d7d;
    background: linear-gradient(135deg, #064f77 0%, #076f91 58%, #088f96 100%);
}

/* El PDF sigue siendo el protagonista visual. */
.voucher-viewer__canvas {
    background:
        radial-gradient(circle at 50% 30%, rgba(22, 52, 78, .58), transparent 34rem),
        linear-gradient(135deg, #07172a 0%, #0b1d32 52%, #091625 100%);
}

/* Footer claro y discreto como el prototipo aprobado. */
.voucher-viewer__footer {
    min-height: 66px;
    padding: .72rem 1.25rem;
    border-top: 1px solid #e2eaf1;
    background: #ffffff;
}

.voucher-viewer__footer strong {
    color: #193a57;
}

.voucher-viewer__footer span {
    color: #8596a7;
}

.voucher-viewer__footer button[data-voucher-new-query] {
    min-height: 42px;
    padding: .58rem .88rem;
    color: #244762;
    border: 1px solid #d5e1e9;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(11, 38, 64, .035);
}

.voucher-viewer__footer button[data-voucher-new-query] svg {
    color: #0b8eaa;
    stroke: currentColor;
}

/* Desktop: mantener proporción refinada del prototipo. */
@media (min-width: 701px) {
    .voucher-viewer {
        padding: 15px 16px;
    }

    .voucher-viewer__dialog {
        height: min(820px, calc(100dvh - 30px));
    }
}

/* Responsive: misma identidad visual, sin forzar desktop en móvil. */
@media (max-width: 700px) {
    .voucher-viewer {
        padding: 0;
    }

    .voucher-viewer__dialog {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
    }

    .voucher-viewer__header {
        min-height: auto;
        padding: .8rem .85rem;
    }

    .voucher-viewer__header::before {
        width: 66%;
        opacity: .48;
    }

    .voucher-viewer__icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }

    .voucher-viewer__icon::after {
        width: 11px;
        height: 11px;
        right: -2px;
        bottom: 3px;
        border-width: 1px;
    }

    .voucher-viewer__identity {
        gap: .65rem;
    }

    .voucher-viewer__identity h2 {
        max-width: 46vw;
        font-size: .95rem;
    }

    .voucher-viewer__identity p,
    .voucher-viewer__eyebrow {
        display: none;
    }

    .voucher-viewer__status {
        min-height: 34px;
        padding: .3rem .48rem;
        font-size: .64rem;
    }

    .voucher-viewer__status::before {
        display: none;
    }

    .voucher-viewer__status[data-tone="success"]::after {
        width: 17px;
        height: 17px;
    }

    .voucher-viewer__close {
        width: 38px;
        height: 38px;
    }

    .voucher-viewer__toolbar {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        padding: .62rem .8rem;
        gap: .6rem;
    }

    .voucher-viewer__formats {
        width: 100%;
    }

    .voucher-viewer__tools {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .voucher-viewer__footer {
        min-height: 58px;
        padding: .58rem .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voucher-viewer__header::before {
        opacity: .5;
    }
}