:root{--colpay-primary:#21214f;--colpay-accent:#00cdc7}.front-v2{min-height:100vh;color:#26263d}.front-v2 .bg-primary{background-color:var(--colpay-primary)!important}.front-v2 .text-primary{color:var(--colpay-primary)!important}.front-v2 .btn-primary{background-color:var(--colpay-primary);border-color:var(--colpay-primary)}.front-v2 .btn-primary:hover,.front-v2 .btn-primary:focus{background-color:#30306d;border-color:#30306d}.front-v2 .btn-outline-primary{color:var(--colpay-primary);border-color:var(--colpay-primary)}.front-v2 .btn-outline-primary:hover{background-color:var(--colpay-primary);color:#fff}.front-hero{overflow:hidden}.front-hero-image{max-height:430px}.py-lg-6{padding-top:5rem!important;padding-bottom:5rem!important}.front-footer a{text-decoration:none}.front-footer a:hover{text-decoration:underline}.front-auth-card{max-width:1000px;margin-inline:auto;border-radius:.5rem;overflow:hidden}.front-auth-logo{max-height:70px}.front-auth-card img{max-height:360px}.front-reading{max-width:900px}.front-rich-content img{max-width:100%;height:auto}.front-rich-content table{width:100%}.front-excerpt{color:#6c757d}.front-v2 label{font-weight:600}.front-v2 .navbar .nav-link.active{font-weight:700}.front-v2 .card{border-radius:.6rem}.front-v2 .ptsu-hero{max-height:240px}@media(max-width:767.98px){.py-lg-6{padding-top:3rem!important;padding-bottom:3rem!important}.front-v2 .display-5{font-size:2.25rem}}

/* Bootstrap 5.1 compatibility for status badges used by transferred templates. */
.front-v2 .text-bg-primary { color: #fff !important; background-color: var(--colpay-primary) !important; }
.front-v2 .text-bg-secondary { color: #fff !important; background-color: #6c757d !important; }
.front-v2 .text-bg-success { color: #fff !important; background-color: #198754 !important; }
.front-v2 .text-bg-danger { color: #fff !important; background-color: #dc3545 !important; }
.front-v2 .text-bg-warning { color: #212529 !important; background-color: #ffc107 !important; }
.front-v2 .text-bg-info { color: #212529 !important; background-color: #0dcaf0 !important; }
.front-v2 .text-bg-light { color: #212529 !important; background-color: #f8f9fa !important; }

.front-payment-proof-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    margin-right: .4rem;
    color: #fff;
    background: var(--colpay-primary);
    border-radius: .45rem;
    font-weight: 800;
    place-items: center;
}

/* Login advertisement: parity with the traditional post-login announcement. */
#loginAdsModal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 390px;
    margin: 12px auto;
}

#loginAdsModal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(11, 19, 37, .3);
}

#loginAdsModal .modal-body {
    padding: 14px 14px 6px;
}

#loginAdsModal .login-ad__image-link {
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 9px;
    background: #eef0f3;
}

#loginAdsModal .login-ad__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#loginAdsModal .login-ad__title {
    margin: 14px 0 8px;
    color: #101828;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

#loginAdsModal .login-ad__description {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-line;
}

#loginAdsModal .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    padding: 12px 14px 14px;
    border: 0;
}

#loginAdsModal .login-ad__close,
#loginAdsModal .login-ad__cta {
    min-height: 44px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

#loginAdsModal .login-ad__close {
    border: 0;
    background: transparent;
    color: #21214f;
}

#loginAdsModal .login-ad__close:hover,
#loginAdsModal .login-ad__close:focus {
    background: #f2f4f7;
}

#loginAdsModal .login-ad__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid #21214f;
    background: #21214f;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

#loginAdsModal .login-ad__cta:hover,
#loginAdsModal .login-ad__cta:focus {
    border-color: #17173b;
    background: #17173b;
    color: #fff;
}

@media (min-width: 576px) {
    #loginAdsModal .modal-dialog {
        margin: 28px auto;
    }
}

.traditional-auth{background:linear-gradient(135deg,#f8faff 0%,#eef3ff 50%,#f8fbff 100%);min-height:100vh}.traditional-auth .auth-shell{display:flex;min-height:100vh;padding-bottom:2rem;padding-top:2rem}.traditional-auth .auth-shell-inner{margin:auto;width:100%;max-width:1060px}.traditional-auth .auth-back-nav{margin:0 auto .85rem;max-width:1000px}.traditional-auth .auth-back-link{align-items:center;color:var(--colpay-primary);display:inline-flex;font-size:1.05rem;font-weight:600;gap:.5rem;text-decoration:underline;text-underline-offset:.2rem}.traditional-auth .auth-flashes{margin-inline:auto;max-width:1000px}.traditional-auth .front-auth-card{border:1px solid rgba(33,33,79,.08);border-radius:.75rem;box-shadow:0 1rem 3rem rgba(33,33,79,.13)!important}.traditional-auth .front-auth-card>div:first-child{background:#fff}.traditional-auth .front-auth-logo{width:auto;max-width:100%;max-height:70px}.traditional-auth .front-auth-card .form-control,.traditional-auth .front-auth-card .form-select{border-color:#cfd5e2;min-height:44px}.traditional-auth .front-auth-card .form-control:focus,.traditional-auth .front-auth-card .form-select:focus{border-color:var(--colpay-accent);box-shadow:0 0 0 .2rem rgba(0,205,199,.16)}.traditional-auth .auth-visual-panel{align-items:center;background:#f5f7fc;flex-direction:column;justify-content:center;padding:2.5rem}.traditional-auth .auth-registration-guidance{justify-content:flex-start}.traditional-auth .auth-register-illustration{margin:1rem auto;max-height:215px}.traditional-auth .auth-recommendations{list-style:none;margin:0;padding:0;width:100%}.traditional-auth .auth-recommendations li{align-items:flex-start;display:flex;gap:.75rem;margin-top:.8rem}.traditional-auth .auth-recommendations p{color:#6c757d;font-size:.9rem;margin:.15rem 0 0}.traditional-auth .auth-recommendation-number{align-items:center;background:var(--colpay-accent);border-radius:50%;color:#fff;display:inline-flex;flex:0 0 26px;font-weight:700;height:26px;justify-content:center}.traditional-auth .auth-footer{color:#6c757d;font-size:.82rem;margin-top:1.25rem;text-align:center}.traditional-auth .auth-footer p:last-child{font-size:.75rem}.traditional-auth :focus-visible{outline:3px solid rgba(0,205,199,.45);outline-offset:2px}

@media(max-width:767.98px){.traditional-auth .auth-shell{padding-bottom:1.25rem;padding-top:1.25rem}.traditional-auth .auth-back-nav{margin-bottom:.65rem}.traditional-auth .front-auth-card{border-radius:.6rem}.traditional-auth .front-auth-card>div:first-child,.traditional-auth .front-auth-card .card-body{padding:1.5rem!important}.traditional-auth .front-auth-logo{max-height:58px}}
.view-ad-frame {
    width: 100%;
    min-height: 62vh;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    background: #fff;
}

/* Commission center parity with the traditional Front. */
.front-commission__header,.front-commission__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}.front-commission__toolbar{padding:1rem;border:1px solid var(--front-border,#dfe5ec);border-radius:1rem;background:var(--front-surface,#fff)}.front-commission__search{flex:1 1 19rem}.front-commission__plans{margin:0;padding:0;border:0}.front-commission__plans legend{font-size:.82rem;font-weight:700;margin-bottom:.45rem}.front-commission__pill,.front-commission__section,.front-commission__profile{border:1px solid var(--front-border,#dfe5ec);background:#fff;color:#334155;padding:.55rem .85rem;min-height:42px;cursor:pointer}.front-commission__pill:first-of-type,.front-commission__section:first-child,.front-commission__profile:first-child{border-radius:.75rem 0 0 .75rem}.front-commission__pill:last-of-type,.front-commission__section:last-child,.front-commission__profile:last-child{border-radius:0 .75rem .75rem 0}.front-commission__pill.is-active,.front-commission__section.is-active,.front-commission__profile.is-active{background:#1459d9;border-color:#1459d9;color:#fff}.front-commission__sections,.front-commission__profiles{display:flex;overflow-x:auto;margin-bottom:1rem}.front-commission__sections{border-bottom:1px solid var(--front-border,#dfe5ec);padding-bottom:.75rem}.front-commission__profiles{gap:.4rem}.front-commission__profiles .front-commission__profile{border-radius:.75rem;white-space:nowrap}.front-commission__requirements{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.15rem;margin-bottom:1.25rem;border:1px solid #b8d7ff;border-radius:1rem;background:#eff7ff}.front-commission__requirements>div{display:flex;align-items:center;gap:.75rem}.front-commission__requirements-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#1459d9;color:#fff;font-weight:800}.front-commission__requirements ul{padding-left:1.25rem}.front-commission__group{margin-bottom:1.5rem}.front-commission__group h2{font-size:1rem;margin-bottom:.75rem;color:#475569}.front-commission__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.front-commission__card{display:flex;flex-direction:column;gap:.9rem;padding:1rem;border:1px solid var(--front-border,#dfe5ec);border-radius:1rem;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.05)}.front-commission__identity{display:flex;align-items:center;gap:.75rem}.front-commission__identity img{object-fit:contain;border-radius:.65rem}.front-commission__identity h3{font-size:1rem;margin:0}.front-commission__identity span{font-size:.8rem;color:#64748b}.front-commission__logo{display:grid;place-items:center;width:48px;height:48px;border-radius:.65rem;background:#eaf1ff;color:#1459d9;font-size:1.15rem;font-weight:800}.front-commission__card dl{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:0}.front-commission__card dl div{padding:.7rem;border-radius:.75rem;background:#f8fafc}.front-commission__card dt{font-size:.75rem;color:#64748b}.front-commission__card dd{margin:0;color:#0f766e;font-size:1.05rem;font-weight:800}.front-commission__details{align-self:flex-start;padding-left:0}.front-commission__empty{padding:2rem;text-align:center;color:#64748b;border:1px dashed var(--front-border,#dfe5ec);border-radius:1rem}.front-commission__dialog{width:min(32rem,calc(100% - 2rem));border:0;border-radius:1rem;padding:0;box-shadow:0 24px 70px rgba(15,23,42,.28)}.front-commission__dialog::backdrop{background:rgba(15,23,42,.55)}.front-commission__dialog form{position:relative;padding:1.5rem}.front-commission__dialog h2{font-size:1.25rem}.front-commission__dialog-close{position:absolute;right:.8rem;top:.6rem;border:0;background:transparent;font-size:1.75rem;line-height:1}
@media (max-width:767.98px){.front-commission__grid{grid-template-columns:1fr}.front-commission__requirements{align-items:flex-start;flex-direction:column}.front-commission__sections,.front-commission__profiles{padding-bottom:.35rem}.front-commission__header .btn{width:100%}.front-commission__card dl{grid-template-columns:1fr}}

.view-ad-image {
    height: 190px;
    object-fit: contain;
    background: #f8f9fa;
}

.view-ad-countries {
    max-height: 13rem;
    overflow: auto;
}

.maintenance-page {
    margin: 0;
    background: radial-gradient(circle at top right, rgba(0, 205, 199, .18), transparent 34%), #f4f6f8;
    color: #243044;
    font: 16px system-ui, sans-serif;
    min-height: 100vh;
}

.maintenance-shell { align-content: center; display: grid; min-height: 100vh; padding: 1.5rem; }
.maintenance-card {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(33, 33, 79, .12);
    border-radius: 1rem;
    box-shadow: 0 8px 30px #18202b22;
    overflow: hidden;
    width: 100%;
}

.maintenance-brand { align-items: center; border-bottom: 1px solid #e7e9f0; display: flex; justify-content: space-between; padding: 1rem 1.5rem; }
.maintenance-brand img { max-height: 48px; max-width: 150px; }
.maintenance-brand span { color: #65677c; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.maintenance-content { padding: 1.5rem 2rem 2rem; text-align: center; }
.maintenance-illustration { display: block; margin: 0 auto 1rem; max-height: 245px; max-width: min(100%, 340px); }
.maintenance-card h1 { color: var(--colpay-primary); font-weight: 800; margin: .5rem 0 1rem; }
.maintenance-card p { color: #5d6174; line-height: 1.6; }
.maintenance-retry { font-size: .92rem; }
.maintenance-footer { background: #f8f9fc; border-top: 1px solid #e7e9f0; color: #6c7084; font-size: .84rem; padding: .9rem 1.5rem; text-align: center; }

.front-avatar-placeholder { width: 112px; height: 112px; font-size: 2rem; }
.front-forum-author { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); }
.front-forum-avatar-placeholder { width: 88px; height: 88px; font-size: 1.75rem; }
.front-forum-author-facts dt { color: var(--bs-secondary-color); font-weight: 600; }
.front-forum-author-facts dd { margin-bottom: .45rem; overflow-wrap: anywhere; }
.front-forum-signature { border-top: 1px dashed var(--bs-border-color); margin-top: 1rem; padding-top: .75rem; white-space: normal; }
@media (max-width: 767.98px) {
  .front-forum-author { border-right: 0; border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); }
  .front-forum-author-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: .75rem; justify-content: center; }
}
.front-ad-thumbnail { max-width: 100px; max-height: 100px; }
.front-advertising-hero { max-height: 320px; }
.front-breb-qr { max-height: 260px; }
.front-product-placeholder { width: 56px; height: 56px; }
.front-receipt { max-width: 760px; }
.front-favorites-image { max-height: 80px; }
.front-product-logo { max-height: 180px; }
.front-category-logo { height: 64px; }
.front-service-card-logo { height: 120px; }
.front-service-logo { max-height: 100px; }
.front-pre-wrap { white-space: pre-wrap; }
.front-sticky-offset { top: 5.5rem; }
.front-qr-payment { max-height: 450px; }
.front-payment-progress { height: 24px; }
.front-progress-empty { width: 0; }
.front-progress-10 { width: 10%; }
.front-progress-20 { width: 20%; }
.front-progress-30 { width: 30%; }
.front-progress-40 { width: 40%; }
.front-progress-50 { width: 50%; }
.front-progress-60 { width: 60%; }
.front-progress-70 { width: 70%; }
.front-progress-80 { width: 80%; }
.front-progress-90 { width: 90%; }
.front-progress-100 { width: 100%; }

.v2-clixgrid {
    --clixgrid-primary: #0d6efd;
    --clixgrid-secondary: #20c997;
    --clixgrid-highlight: #ffc107;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 520px;
    overflow: hidden;
    padding: clamp(.45rem, 1.5vw, 1rem);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: .75rem;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .72) 0 7%, transparent 7.5%),
        radial-gradient(circle at 72% 63%, color-mix(in srgb, var(--clixgrid-highlight) 72%, transparent) 0 12%, transparent 12.5%),
        linear-gradient(135deg, var(--clixgrid-primary), var(--clixgrid-secondary));
    box-shadow: inset 0 0 4rem rgba(12, 18, 54, .28);
}
.v2-clixgrid[data-clixgrid-image="2"] { --clixgrid-primary: #6f42c1; --clixgrid-secondary: #d63384; --clixgrid-highlight: #f8f9fa; }
.v2-clixgrid[data-clixgrid-image="3"] { --clixgrid-primary: #fd7e14; --clixgrid-secondary: #ffc107; --clixgrid-highlight: #6610f2; }
.v2-clixgrid[data-clixgrid-image="4"] { --clixgrid-primary: #198754; --clixgrid-secondary: #0dcaf0; --clixgrid-highlight: #fff3cd; }
.v2-clixgrid[data-clixgrid-image="5"] { --clixgrid-primary: #21214f; --clixgrid-secondary: #0d6efd; --clixgrid-highlight: #00cdc7; }
.v2-clixgrid[data-clixgrid-image="6"] { --clixgrid-primary: #dc3545; --clixgrid-secondary: #fd7e14; --clixgrid-highlight: #ffc107; }
.v2-clixgrid[data-clixgrid-image="7"] { --clixgrid-primary: #0f5132; --clixgrid-secondary: #75b798; --clixgrid-highlight: #d1e7dd; }
.v2-clixgrid[data-clixgrid-image="8"] { --clixgrid-primary: #343a40; --clixgrid-secondary: #6c757d; --clixgrid-highlight: #f8f9fa; }
.v2-clixgrid[data-clixgrid-image="9"] { --clixgrid-primary: #3d0a91; --clixgrid-secondary: #6610f2; --clixgrid-highlight: #e0cffc; }
.v2-clixgrid[data-clixgrid-image="10"] { --clixgrid-primary: #055160; --clixgrid-secondary: #087990; --clixgrid-highlight: #cff4fc; }
.v2-clixgrid-row { display: flex; gap: 2px; }
.v2-clixgrid-row form { flex: 1 0 18px; }
.v2-clixgrid-row button { width: 100%; }
.v2-clixgrid button { aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .26); border-radius: 2px; background: rgba(15, 18, 42, .2); color: #fff; }
.v2-clixgrid button:hover,
.v2-clixgrid button:focus-visible { position: relative; z-index: 1; background: var(--clixgrid-highlight); outline: 2px solid #fff; outline-offset: 1px; }
.v2-clixgrid button:disabled { background: rgba(220, 53, 69, .92); cursor: not-allowed; opacity: 1; }

.front-clixgrid-intro,
.front-clixgrid-advertise-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(180px, .7fr);
    gap: 2rem;
    align-items: center;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--account-border);
    border-radius: 1rem;
    background: linear-gradient(135deg, #fff, #eefafa);
}

.front-clixgrid-intro img,
.front-clixgrid-advertise-intro img {
    display: block;
    width: min(100%, 230px);
    max-height: 190px;
    margin-inline: auto;
}

.front-clixgrid-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--account-border);
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 .35rem 1.1rem rgba(33, 33, 79, .06);
}

.front-clixgrid-summary article {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    padding: 1rem 1.15rem;
    border-right: 1px solid var(--account-border);
}

.front-clixgrid-summary article:last-child { border-right: 0; }
.front-clixgrid-summary span,
.front-clixgrid-summary small { color: var(--account-muted); }
.front-clixgrid-summary span { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.front-clixgrid-summary strong { color: var(--account-primary); font-size: 1.15rem; }
.front-clixgrid-board-scroll { border-radius: .75rem; }
.front-clixgrid-position { color: var(--account-muted); background: #fff; }
.front-clixgrid-position strong { color: var(--account-primary); }
.front-clixgrid-info-icon {
    display: inline-grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--account-accent);
    color: var(--account-primary);
    font-weight: 900;
}
.front-clixgrid-winner-list { max-height: 15rem; overflow-y: auto; }
.front-clixgrid-winner-list .list-group-item > strong { color: var(--account-primary); text-align: right; }

.front-clixgrid-purchase-steps { display: grid; gap: 1rem; padding: 0; list-style: none; }
.front-clixgrid-purchase-steps li { display: flex; gap: .85rem; align-items: flex-start; }
.front-clixgrid-purchase-steps li > span {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--account-primary);
    color: #fff;
    font-weight: 800;
}
.front-clixgrid-purchase-steps strong,
.front-clixgrid-purchase-steps small { display: block; }
.front-clixgrid-purchase-steps small { margin-top: .15rem; color: var(--account-muted); }

.raffle-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.3rem, 1fr)); gap: .45rem; max-height: 36rem; overflow: auto; padding: .5rem; }
.raffle-number { min-height: 2.65rem; border: 1px solid #ced4da; border-radius: .45rem; background: #fff; font-weight: 600; }
.raffle-number.is-free:hover { border-color: #0d6efd; background: #eaf2ff; }
.raffle-number.is-reserved { background: #fff3cd; }
.raffle-number.is-purchased, .raffle-number.is-winner { background: #e9ecef; color: #6c757d; }
.raffle-number.is-winner { background: #d1e7dd; color: #0f5132; }
.raffle-number.is-mine { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.raffle-number:focus-visible { outline: 3px solid rgba(13, 110, 253, .4); outline-offset: 2px; }

/* Authenticated account shell: visual parity with the traditional frontend. */
.traditional-account {
    --account-primary: #21214f;
    --account-accent: #00cdc7;
    --account-canvas: #f6f7fb;
    --account-muted: #6e7185;
    --account-border: #e6e7ee;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--account-canvas) !important;
    font-family: "Source Sans Pro", sans-serif;
}

.account-topbar {
    min-height: 78px;
    border-bottom: 1px solid var(--account-border);
    box-shadow: 0 2px 12px rgba(33, 33, 79, .06);
    font-family: "Source Sans Pro", sans-serif;
    z-index: 1030;
}

.account-topbar > .container-xl {
    gap: .55rem;
}

.account-brand-logo {
    display: block;
    width: 128px;
    height: auto;
}

.account-public-menu {
    gap: .1rem;
    margin-left: 1.35rem;
}

.account-public-menu li {
    font-size: 1.1rem;
    font-weight: 500;
}

.account-public-menu .nav-link {
    padding: .75rem .65rem !important;
    color: #45465d;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
}

.front-v2 .account-topbar .account-public-menu .nav-link:hover,
.front-v2 .account-topbar .account-public-menu .nav-link.active {
    color: var(--account-primary);
    font-weight: 500;
}

.front-v2 .account-topbar .account-public-menu .nav-link.active {
    border-bottom: 3px solid var(--account-accent);
}

.account-public-menu .dropdown-item {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
}

.account-user-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .35rem;
    color: var(--account-primary);
    border: 0;
    border-radius: .45rem;
    background: transparent;
    text-align: left;
}

.account-user-toggle:hover,
.account-user-toggle:focus {
    color: var(--account-primary);
    background: #f4f5fa;
    box-shadow: none;
}

.account-user-toggle[aria-expanded="true"] {
    background: #eef0f7;
}

.account-user-toggle::after {
    display: none;
}

.account-user-menu {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
}

.account-user-avatar {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 2px solid #e9e9f2;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}

.account-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    color: #fff;
    background: linear-gradient(145deg, var(--account-primary), #514086);
    border: 3px solid #e9e9f2;
    border-radius: 50%;
    place-items: center;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .03em;
}

.account-avatar-sm {
    width: 42px;
    height: 42px;
    border-width: 2px;
    font-size: .8rem;
}

.account-user-copy {
    display: flex;
    min-width: 94px;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
}

.account-user-copy small {
    white-space: nowrap;
}

.account-user-greeting {
    color: var(--account-primary);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.05;
}

.account-user-greeting strong {
    font-size: 1rem;
    line-height: 1.15;
}

.account-user-copy > span {
    width: 100%;
    margin-top: 3px;
    color: #777b8d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

.account-user-location {
    max-width: 11.5rem;
    overflow: hidden;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis;
}

.account-user-chevron {
    margin: 0 .15rem;
    color: #777b8d;
    font-size: .9rem;
    transition: transform .2s ease;
}

.account-user-toggle[aria-expanded="true"] .account-user-chevron {
    transform: rotate(180deg);
}

.account-user-dropdown {
    width: max-content;
    min-width: 17.5rem;
    max-width: calc(100vw - 1.5rem);
    padding: .45rem 0;
    border: 1px solid var(--account-border);
    border-radius: .45rem;
    box-shadow: 0 14px 35px rgba(33, 33, 79, .14);
    z-index: 1080;
}

.account-user-dropdown.dropdown-menu[data-bs-popper] {
    right: 0 !important;
    left: auto !important;
    margin-top: .55rem;
}

.account-user-membership {
    display: grid;
    gap: .35rem;
    padding: .4rem 1rem .55rem;
    color: var(--account-muted);
}

.account-user-membership small {
    font-size: .72rem;
}

.account-user-dropdown .dropdown-divider {
    margin: .35rem 0;
}

.account-user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: auto;
    padding: .25rem 1rem;
    color: #3d4057;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.account-user-dropdown .dropdown-item .nav-icon {
    width: 1.1rem;
    color: #777b8d;
    font-size: 1rem;
    text-align: center;
}

.account-user-dropdown .dropdown-item:hover,
.account-user-dropdown .dropdown-item:focus,
.account-user-dropdown .dropdown-item.active {
    background: #f0f2f8;
    color: var(--account-primary);
}

.account-user-dropdown .dropdown-item.active .nav-icon {
    color: var(--account-primary);
}

.account-user-logout-form,
.account-user-logout-form button {
    width: 100%;
}

.account-session-meta {
    display: grid;
    gap: .2rem;
    margin-top: .25rem;
    padding: .65rem 1rem .25rem;
    border-top: 1px solid var(--account-border);
    color: var(--account-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.account-session-meta span {
    white-space: nowrap;
}

.account-profile-badge {
    display: inline-flex;
    align-items: center;
    color: #fff;
    background: rgba(33, 33, 79, .84);
    border: 1px solid rgba(0, 205, 199, .9);
    border-radius: .25rem;
    font-size: .75rem;
    font-weight: 700;
}

.account-shell {
    width: 100%;
    padding-top: 1.6rem;
    padding-bottom: 3rem;
}

.account-balance-card {
    overflow: hidden;
    margin-bottom: 1rem;
    color: #fff;
    background: var(--account-primary);
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.account-balance-header {
    display: flex;
    min-height: 49px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.account-balance-title-tools {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.account-balance-header h1 {
    margin: 0;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
}

.account-balance-tool {
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: .35rem;
    font-size: 1rem;
    place-items: center;
}

.account-balance-tool:hover,
.account-balance-tool:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.account-balance-tool.is-refreshing i {
    animation: account-balance-rotate .8s linear infinite;
}

@keyframes account-balance-rotate {
    to { transform: rotate(360deg); }
}

.account-balance-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: center;
    min-height: 106px;
    padding: .45rem 1.75rem 1rem;
}

.account-balance-values {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .12rem;
}

.account-balance-values > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.account-balance-values span,
.account-referral-box label {
    margin-bottom: 0;
    color: #fff;
    font-size: .92rem;
    line-height: 1.1;
}

.account-balance-values strong {
    overflow: hidden;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-balance-primary strong {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.05;
}

.account-balance-help {
    color: #00ade1;
}

.account-balance-account {
    margin-bottom: .2rem;
}

.account-referral-box label {
    display: block;
    margin-bottom: .25rem;
    font-size: .82rem;
    font-weight: 700;
}

.account-referral-box .form-control {
    min-width: 0;
    color: #44465c;
    background: #edf3f8;
    border-color: #edf3f8;
    font-size: .82rem;
}

.account-referral-box .btn {
    color: var(--account-primary);
    background: #00f5a6;
    border-color: #00f5a6;
    font-size: .82rem;
    font-weight: 500;
}

.account-referral-box .btn:hover,
.account-referral-box .btn:focus-visible {
    color: var(--account-primary);
    background: #fff;
    border-color: #00f5a6;
}

.account-referral-copy {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.account-quick-actions {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin-bottom: 1.3rem;
}

.account-quick-actions a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1rem;
    color: var(--account-primary);
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .55rem;
    box-shadow: 0 5px 13px rgba(33, 33, 79, .08);
    font-weight: 700;
    text-decoration: none;
}

.account-quick-actions a i {
    color: var(--account-accent);
    font-size: 1.15rem;
}

.account-quick-actions a:hover {
    border-color: var(--account-accent);
    transform: translateY(-1px);
}

.account-sidebar-column {
    align-self: flex-start;
}

.account-sidebar {
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
    font-family: "Source Sans Pro", sans-serif;
}

.account-sidebar-menu {
    padding: 1.5rem;
}

.account-sidebar-profile {
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--account-border);
}

.account-sidebar-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.account-sidebar-identity small {
    color: var(--account-muted);
    line-height: 1;
}

.account-sidebar-identity strong {
    overflow: hidden;
    margin: .12rem 0;
    color: var(--account-primary);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-sidebar-identity span {
    color: #777b8d;
    font-size: .69rem;
}

.account-menu-section + .account-menu-section {
    margin-top: 1rem;
}

.account-menu-heading {
    display: flex;
    width: 100%;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .4rem;
    color: #777b8d;
    background: #fff;
    border: 0;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5;
    text-align: left;
    text-transform: uppercase;
}

.account-menu-heading > span:first-child {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.account-menu-heading-icon {
    width: 1.25rem;
    color: #777b8d;
    font-size: 1.25rem;
    text-align: center;
}

.account-chevron {
    transition: transform .2s ease;
}

.account-menu-heading.collapsed .account-chevron {
    transform: rotate(-90deg);
}

.account-menu-list {
    display: grid;
    gap: .125rem;
    padding: .5rem 0 1.5rem 1rem;
    margin: 0;
    list-style: none;
}

.account-menu-list a {
    display: flex;
    min-height: auto;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0 .3rem .7rem;
    color: #18113c;
    border-radius: .5rem;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}

.account-menu-list a > :first-child {
    display: inline-grid;
    width: 1rem;
    color: #2d285f;
    flex: 0 0 1rem;
    place-items: center;
}

.account-menu-list a:hover {
    color: var(--account-primary);
    background: rgba(2, 62, 138, .15);
}

.account-menu-list a.active {
    color: var(--account-primary);
    background: rgba(2, 62, 138, .15);
    font-weight: 500;
}

.account-menu-list a.active > :first-child {
    color: var(--account-primary);
}

.account-content-column {
    min-width: 0;
}

.account-content-column > :first-child {
    margin-top: 0;
}

.account-content-column .card {
    border-color: var(--account-border);
    box-shadow: 0 6px 20px rgba(33, 33, 79, .06);
}

.account-dashboard-card {
    overflow: hidden;
}

.account-dashboard-tabs-wrap {
    padding: .5rem;
    border-bottom-color: var(--account-border);
}

.account-dashboard-tabs {
    flex-wrap: wrap;
    gap: .45rem;
    overflow: visible;
}

.account-dashboard-tabs .nav-link {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    color: #646678;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .5rem;
    font-weight: 700;
    white-space: nowrap;
}

.account-dashboard-tabs .nav-link:hover {
    color: var(--account-primary);
    border-color: #c8c9d5;
}

.account-dashboard-tabs .nav-link.active {
    color: #fff;
    background: var(--account-primary);
    border-color: var(--account-primary);
}

.front-traditional-category-card {
    min-height: 130px;
    border-radius: .2rem;
}

.front-traditional-category-card .card-body {
    min-height: 96px;
    padding: 1rem 1rem .25rem;
}

.front-traditional-category-card .front-category-logo {
    width: auto;
    max-width: 78%;
    height: 72px;
    object-fit: contain;
}

.front-traditional-products-title {
    color: #15152f;
    font-size: 1rem;
}

.front-traditional-product-grid {
    row-gap: 1rem !important;
}

.front-traditional-product-wrap {
    position: relative;
    height: 100%;
    padding-top: .35rem;
}

.front-traditional-product-card {
    position: relative;
    min-height: 98px;
    overflow: visible;
    background: #fff;
    border: 0;
    border-radius: .15rem;
    transition: box-shadow .18s ease, transform .18s ease;
}

.front-traditional-product-card:hover,
.front-traditional-product-card:focus-within {
    box-shadow: 0 8px 20px rgba(33, 33, 79, .14) !important;
    transform: translateY(-1px);
}

.front-traditional-product-link {
    display: flex;
    min-height: 98px;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    border-radius: inherit;
    text-decoration: none;
}

.front-traditional-product-logo {
    width: 100%;
    max-width: 80px;
    height: 74px;
    object-fit: contain;
}

.front-traditional-product-placeholder {
    display: grid;
    width: 66px;
    height: 66px;
    color: #fff;
    background: linear-gradient(135deg, var(--account-accent), var(--account-primary));
    border-radius: .7rem;
    font-size: 1.5rem;
    place-items: center;
}

.front-traditional-favorite-form {
    position: absolute;
    z-index: 3;
    top: -.65rem;
    right: -.65rem;
    margin: 0;
}

.front-traditional-favorite-button {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #f5ad00;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(33, 33, 79, .18);
    font-size: 1rem;
    line-height: 1;
    place-items: center;
}

.front-traditional-favorite-glyph {
    display: block;
    font-family: Arial, "Segoe UI Symbol", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-.02rem);
}

.front-favorite-inline-glyph,
.front-favorite-category-glyph {
    display: inline-block;
    font-family: Arial, "Segoe UI Symbol", sans-serif;
    line-height: 1;
}

.front-favorite-inline-glyph {
    font-size: 1.08em;
}

.front-favorite-category-glyph {
    color: #ffb000;
    font-size: 3rem;
}

.front-traditional-favorite-button:hover,
.front-traditional-favorite-button:focus-visible,
.front-traditional-favorite-button.is-favorite {
    color: #ffb000;
    background: #fffdf5;
}

.front-traditional-favorite-button:focus-visible {
    outline: 2px solid var(--account-accent);
    outline-offset: 2px;
}

.front-traditional-product-notice {
    position: absolute;
    z-index: 2;
    top: .25rem;
    left: .25rem;
    display: grid;
    width: 19px;
    height: 19px;
    color: #2d1b00;
    background: #ffc107;
    border-radius: .2rem;
    font-size: .7rem;
    place-items: center;
}

.front-traditional-product-name {
    margin: .35rem 0 0;
    color: #15152f;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.front-traditional-product-name a {
    color: inherit;
    text-decoration: none;
}

.front-traditional-product-name a:hover {
    color: var(--account-accent);
}

.account-service-grid a {
    display: flex;
    min-height: 96px;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    color: var(--account-primary);
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .7rem;
    box-shadow: 0 5px 15px rgba(33, 33, 79, .06);
    text-decoration: none;
}

.account-service-grid a:hover {
    border-color: var(--account-accent);
    box-shadow: 0 8px 18px rgba(33, 33, 79, .1);
    transform: translateY(-1px);
}

.account-service-grid a > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.account-service-grid small {
    margin-top: .15rem;
    color: var(--account-muted);
    font-size: .76rem;
}

.account-service-grid b {
    color: #a0a2b0;
    font-size: 1.5rem;
    font-weight: 400;
}

.account-service-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    color: var(--account-primary);
    background: rgba(0, 205, 199, .12);
    border-radius: .7rem;
    place-items: center;
    font-size: 1.35rem;
}

.account-stat {
    display: flex;
    min-height: 98px;
    flex-direction: column;
    justify-content: center;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .65rem;
}

.account-stat small,
.account-stat span {
    color: var(--account-muted);
}

.account-stat strong {
    margin-top: .15rem;
    color: var(--account-primary);
    font-size: 1.3rem;
}

.account-stat-accent {
    border-left: 4px solid var(--account-accent);
}

.account-stat-accent span {
    font-size: .72rem;
}

.account-progress-list {
    display: grid;
    gap: 1.1rem;
}

.account-progress-list > div > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .35rem;
    color: var(--account-primary);
}

.account-progress-list progress {
    width: 100%;
    height: 13px;
    overflow: hidden;
    accent-color: var(--account-accent);
    background: #ececf2;
    border: 0;
    border-radius: 999px;
}

.account-progress-list progress::-webkit-progress-bar {
    background: #ececf2;
    border-radius: 999px;
}

.account-progress-list progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--account-primary), var(--account-accent));
    border-radius: 999px;
}

.account-progress-list progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--account-primary), var(--account-accent));
    border-radius: 999px;
}

.account-operational-alert {
    padding: 1rem 1.1rem;
    border: 0;
    box-shadow: 0 6px 18px rgba(33, 33, 79, .08);
}

.account-operational-alert > div {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.account-operational-alert span {
    font-size: .88rem;
}

.account-daily-chart {
    height: 100%;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .7rem;
}

.account-daily-chart > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.account-daily-chart > header h3,
.account-daily-chart > header > strong {
    color: var(--account-primary);
}

.account-daily-chart > header p {
    margin: 0;
    color: var(--account-muted);
    font-size: .76rem;
}

.account-daily-chart > header > strong {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.account-daily-chart-bars {
    display: grid;
    gap: .55rem;
}

.account-daily-chart-bars > div {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
}

.account-daily-chart-bars > div > div {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: .35rem;
    color: var(--account-muted);
    font-size: .72rem;
}

.account-daily-chart-bars b {
    color: var(--account-primary);
    font-variant-numeric: tabular-nums;
}

.account-daily-chart-bars progress {
    width: 100%;
    height: 10px;
    overflow: hidden;
    accent-color: var(--account-accent);
    background: #ececf2;
    border: 0;
    border-radius: 999px;
}

.account-daily-chart-bars progress::-webkit-progress-bar {
    background: #ececf2;
    border-radius: 999px;
}

.account-daily-chart-bars progress::-webkit-progress-value {
    background: linear-gradient(90deg, #4d4e85, var(--account-accent));
    border-radius: 999px;
}

.account-daily-chart-bars progress::-moz-progress-bar {
    background: linear-gradient(90deg, #4d4e85, var(--account-accent));
    border-radius: 999px;
}

.account-footer {
    margin-top: auto;
    padding: 2.2rem 0;
    color: rgba(255, 255, 255, .75);
    background: var(--account-primary);
    border-top: 5px solid var(--account-accent);
}

.account-footer .container-xl {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem 1.5rem;
}

.account-footer img {
    width: 110px;
    max-height: 46px;
    object-fit: contain;
}

.account-footer div:not(.container-xl) {
    display: flex;
    flex-direction: column;
}

.account-footer strong {
    color: #fff;
}

.account-footer nav {
    display: flex;
    gap: 1rem;
}

.account-footer a {
    color: #fff;
    font-size: .85rem;
    text-decoration: none;
}

.account-footer small {
    grid-column: 1 / -1;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.account-mobile-summary,
.account-mobile-dock {
    display: none;
}

@media (min-width: 992px) {
    .account-sidebar {
        position: sticky;
        top: 1rem;
        max-height: none;
    }
}

@media (max-width: 1199.98px) {
    .account-public-menu {
        margin-left: .4rem;
    }

    .account-public-menu .nav-link {
        padding-inline: .4rem !important;
    }

    .account-balance-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

@media (max-width: 991.98px) {
    .account-topbar {
        min-height: 68px;
    }

    .account-topbar .navbar-brand {
        order: 1;
    }

    .account-topbar .navbar-toggler {
        order: 2;
    }

    .account-topbar .account-user-menu {
        order: 3;
    }

    .account-topbar .navbar-collapse {
        order: 4;
        flex-basis: 100%;
    }

    .account-topbar .account-user-copy > span {
        display: none;
    }

    .account-topbar .account-user-copy {
        min-width: 0;
        max-width: 5.75rem;
    }

    .account-topbar .account-user-greeting {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .account-topbar .account-user-toggle {
        gap: .4rem;
        padding: .2rem .3rem;
    }

    .account-public-menu {
        margin: .75rem 0;
    }

    .account-balance-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-mobile-summary {
        display: block;
    }

    .account-sidebar-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        gap: .75rem;
        padding: .65rem .8rem;
        color: var(--account-primary);
        background: #fff;
        border: 1px solid var(--account-border);
        border-radius: .65rem;
        box-shadow: 0 5px 15px rgba(33, 33, 79, .07);
    }

    .account-sidebar-toggle > span:nth-child(2) {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .account-sidebar-toggle small {
        color: var(--account-muted);
    }

    .account-sidebar-toggle .account-chevron {
        font-size: 1.25rem;
    }

    .account-sidebar {
        margin-top: .6rem;
    }
}

@media (max-width: 767.98px) {
    .account-topbar .account-brand-logo {
        width: 108px;
    }

    .account-topbar .account-user-avatar,
    .account-topbar .account-user-menu .account-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: .68rem;
    }

    .account-user-dropdown {
        min-width: min(17.5rem, calc(100vw - 1.5rem));
    }

    .account-dashboard-tabs .nav-item,
    .account-dashboard-tabs .nav-link {
        width: 100%;
    }

    .account-shell {
        padding-top: .8rem;
        padding-bottom: 5.5rem;
    }

    .account-balance-header {
        padding: .65rem 1rem;
    }

    .account-balance-header h1 {
        font-size: 1.25rem;
    }

    .account-balance-body {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: .9rem 1rem 1.1rem;
    }

    .account-balance-values {
        gap: .85rem;
    }

    .account-balance-values strong {
        font-size: 1rem;
    }

    .account-quick-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .45rem;
    }

    .account-quick-actions a {
        min-width: 0;
        justify-content: center;
        padding-inline: .45rem;
        font-size: .75rem;
        text-align: center;
    }

    .account-footer {
        padding-bottom: 5.5rem;
    }

    .account-footer .container-xl {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .account-footer img {
        margin-inline: auto;
    }

    .account-footer nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .account-brand-logo {
        width: 110px;
    }

    .account-balance-card {
        border-radius: .55rem;
    }

    .account-profile-badge {
        max-width: 45%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-mobile-dock {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: .35rem .3rem max(.35rem, env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--account-border);
        box-shadow: 0 -7px 20px rgba(33, 33, 79, .12);
    }

    .account-mobile-dock a,
    .account-mobile-dock button {
        display: flex;
        width: 100%;
        min-height: 49px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .05rem;
        padding: .2rem;
        color: #737587;
        background: transparent;
        border: 0;
        border-radius: .4rem;
        text-decoration: none;
    }

    .account-mobile-dock a > span,
    .account-mobile-dock button > span {
        font-size: 1.1rem;
    }

    .account-mobile-dock a.active {
        color: var(--account-primary);
        background: rgba(0, 205, 199, .1);
    }

    .account-mobile-dock form {
        margin: 0;
    }

    .account-operational-alert {
        align-items: stretch !important;
        padding: .9rem;
    }

    .account-operational-alert .btn {
        width: 100%;
    }

    .account-daily-chart {
        padding: .85rem;
    }

    .account-daily-chart > header {
        gap: .6rem;
    }

    .account-daily-chart-bars > div {
        grid-template-columns: 92px minmax(0, 1fr);
    }
}

/* Paridad visual de servicios y movimientos con el Front tradicional. */
.account-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-bottom: 1rem;
}

.account-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.front-service-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff 0%, #f1f5ff 100%);
    border: 1px solid var(--account-border);
    border-radius: .75rem;
}

.front-service-intro p {
    margin: 0;
    color: var(--account-muted);
}

.front-service-intro-image {
    width: 100%;
    max-height: 125px;
    object-fit: contain;
}

.front-service-balances {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.25rem;
}

.front-service-section-title {
    padding: .65rem .85rem;
    margin-bottom: 1rem;
    color: #fff;
    background: var(--account-accent);
    border-radius: .5rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.front-service-card {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.front-service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(33, 33, 79, .13) !important;
}

.front-service-card-notice {
    align-items: flex-start;
    background: #fff3cd;
    color: #664d03;
    display: flex;
    font-size: .75rem;
    gap: .4rem;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
    padding: .55rem .65rem;
}

.front-service-card-notice > span:first-child {
    align-items: center;
    background: #664d03;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 1.15rem;
    font-size: .7rem;
    font-weight: 800;
    height: 1.15rem;
    justify-content: center;
}

.front-service-card-notice > span:last-child {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
}

.front-service-card-link {
    display: flex;
    min-height: 142px;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem .75rem .5rem;
    color: var(--account-primary);
    text-align: center;
    text-decoration: none;
}

.front-service-card-link small {
    color: var(--account-muted);
}

.front-service-card .front-service-card-logo {
    width: 100%;
    height: 56px;
    margin-bottom: .65rem;
    object-fit: contain;
}

.front-service-card-placeholder {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: .65rem;
    color: #fff;
    background: var(--account-primary);
    border-radius: 50%;
    font-size: 1.4rem;
    place-items: center;
}

.front-service-card-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    padding: .5rem .65rem .75rem;
}

/* Servicios P2P: conserva la composición compacta de la tienda tradicional. */
.front-p2p-account-return {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.front-p2p-account-return a {
    font-size: 1.125rem;
}

.front-p2p-introduction {
    align-items: center;
}

.front-p2p-introduction-image {
    width: 60%;
    max-height: 180px;
    object-fit: contain;
}

.front-p2p-services-title {
    flex: 0 0 100%;
    margin: 0;
    border-radius: .3rem;
    font-size: 1.25rem;
}

.front-p2p-service-tile {
    position: relative;
    min-height: 80px;
    background: #fff;
    transition: background .15s ease, transform .15s ease;
}

.front-p2p-service-tile:hover,
.front-p2p-service-tile:focus-within {
    background: #f4f4f4;
    transform: translateY(-1px);
}

.front-p2p-service-link {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.front-p2p-service-logo {
    width: auto;
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
}

.front-p2p-service-notice {
    z-index: 1;
    max-width: 100%;
    max-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-p2p-store-logo {
    width: 200px;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.front-p2p-information-table td:last-child {
    width: 1%;
}

.front-p2p-plan-table [data-service-plan-row].is-selected > * {
    background: #eefafa;
}

.front-p2p-plan-table label {
    display: block;
    margin: 0;
    cursor: pointer;
}

.front-p2p-plan-quantity {
    min-width: 120px;
}

.front-p2p-quick-amounts .btn {
    min-width: 5.4rem;
}

.front-service-confirmation [data-confirm-form-fields] {
    display: contents;
}

.front-service-confirmation [data-confirm-form-fields] > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--account-border);
}

.front-service-confirmation .front-product-calculator {
    margin-top: 1rem;
}

/* Solicitudes de perfil: formulario documental de la vista tradicional. */
.front-traditional-profile-request .product-docs-form {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
}

.front-traditional-profile-request .product-doc-list {
    display: grid;
    gap: 10px;
}

.front-traditional-profile-request .product-doc-item {
    position: relative;
}

.front-traditional-profile-request .product-doc-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .08);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.front-traditional-profile-request .product-doc-card:hover,
.front-traditional-profile-request .product-doc-card:focus-within {
    border-color: var(--account-primary);
    box-shadow: 0 3px 10px rgba(33, 33, 79, .14);
}

.front-traditional-profile-request .product-doc-card.is-readonly {
    background: #fbfbfd;
    cursor: default;
}

.front-traditional-profile-request .product-doc-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: var(--account-primary);
    font-size: 1.7rem;
}

.front-traditional-profile-request .product-doc-content {
    min-width: 0;
}

.front-traditional-profile-request .product-doc-title {
    display: block;
    color: var(--account-primary);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.front-traditional-profile-request .product-doc-hint,
.front-traditional-profile-request .product-doc-status-text,
.front-traditional-profile-request .product-doc-file-name {
    display: block;
    margin-top: 3px;
    color: #7b8190;
    font-size: .78rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.front-traditional-profile-request .product-doc-help,
.front-traditional-profile-request .product-doc-status-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--account-primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.front-traditional-profile-request .product-doc-status-icon.is-pending { background: #d99000; }
.front-traditional-profile-request .product-doc-status-icon.is-approved { background: #198754; }

.front-traditional-profile-request .product-doc-inline-input,
.front-traditional-profile-request .product-doc-inline-select {
    width: 100%;
    margin-top: 6px;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid #d7dbe3;
    border-radius: 0;
    background: transparent;
    color: var(--account-primary);
    box-shadow: none;
    font-size: .9rem;
}

.front-traditional-profile-request textarea.product-doc-inline-input {
    resize: vertical;
}

.front-traditional-profile-request .product-doc-upload-info {
    padding: 5px 12px 0 54px;
    font-size: .78rem;
}

.front-traditional-profile-request .product-doc-submit {
    width: 100%;
    margin-top: 28px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(33, 33, 79, .18);
}

.front-traditional-profile-request .document-alert-error {
    margin: 0 0 6px;
    border-radius: 8px;
    font-size: .85rem;
}

/* Mis comisiones: hoja comparativa de la vista tradicional. */
.front-traditional-commissions .commission-sheet {
    padding: 1.1rem 1.1rem .4rem;
    border-radius: 24px;
}

.front-traditional-commissions .commission-profile-description {
    margin: .1rem .35rem .85rem;
    padding: .7rem .9rem;
    border: 1px solid #dce2ff;
    border-radius: 14px;
    background: #f5f7ff;
}

.front-traditional-commissions .commission-profile-description-title {
    color: #40306b;
    font-weight: 800;
}

.front-traditional-commissions .commission-profile-description ul {
    margin: .45rem 0 0;
    padding-left: 1.1rem;
}

.front-traditional-commissions .commission-sheet-header {
    margin-bottom: .35rem;
    padding: .15rem .35rem .7rem;
    border-bottom: 1px solid #e1e1e6;
}

.front-traditional-commissions .commission-sheet-title {
    color: var(--bs-primary);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
}

.front-traditional-commissions .commission-category-group {
    margin: .75rem .25rem .95rem;
}

.front-traditional-commissions .commission-section-divider {
    margin: .2rem .3rem .45rem;
    color: #3f2e65;
    font-size: 1.22rem;
    font-weight: 800;
}

.front-traditional-commissions .commission-category-block {
    overflow: hidden;
    border: 1px solid #e2e2ea;
    border-radius: 16px;
    background: #f8f8fb;
}

.front-traditional-commissions .commission-category-body {
    padding: .15rem .85rem .2rem;
}

.front-traditional-commissions .commission-row {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1fr;
    align-items: center;
    gap: .5rem;
    padding: .9rem .35rem;
    border-bottom: 1px solid #e3e3e8;
    cursor: pointer;
}

.front-traditional-commissions .commission-row:last-child { border-bottom: 0; }
.front-traditional-commissions .commission-row:hover,
.front-traditional-commissions .commission-row:focus-visible { background: #fff; outline: 0; }

.front-traditional-commissions .commission-service {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .65rem;
}

.front-traditional-commissions .commission-logo-wrap {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px #e4e4ea;
}

.front-traditional-commissions .commission-logo { width: 100%; height: 100%; object-fit: contain; }
.front-traditional-commissions .commission-logo-placeholder { color: #5b6272; font-size: 1.05rem; }
.front-traditional-commissions .commission-name { color: #434750; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }
.front-traditional-commissions .commission-col { display: flex; flex-direction: column; }
.front-traditional-commissions .commission-label { color: #7d8390; font-size: .98rem; }
.front-traditional-commissions .commission-value { font-size: 1.5rem; line-height: 1.05; }
.front-traditional-commissions .commission-value-final { color: #40306b; }
.front-traditional-commissions .commission-value-initial { color: #5a5f6c; }
.front-traditional-commissions .nav-tabs .nav-link,
.front-traditional-commissions .nav-pills .nav-link { font-size: calc(1rem + 2px); font-weight: 700; }

@media (max-width: 767.98px) {
    .front-traditional-profile-request .product-doc-card { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; padding: 10px; }
    .front-traditional-profile-request .product-doc-upload-info { padding-left: 46px; }
    .front-traditional-commissions .commission-sheet { padding-inline: .25rem; }
    .front-traditional-commissions .commission-sheet-title { font-size: 1rem; }
    .front-traditional-commissions .commission-category-body { padding-inline: .4rem; }
    .front-traditional-commissions .commission-name { font-size: .9rem; }
    .front-traditional-commissions .commission-label { font-size: .72rem; }
    .front-traditional-commissions .commission-value { font-size: .95rem; }
    .front-traditional-commissions .nav-tabs .nav-link,
    .front-traditional-commissions .nav-pills .nav-link { font-size: .9rem; }
}

.front-service-restriction .alert-danger {
    border-left: 4px solid var(--bs-danger);
}

.front-restriction-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    color: #fff;
    background: var(--bs-danger);
    border-radius: 50%;
    font-weight: 800;
    place-items: center;
}

.front-service-restriction-logo {
    width: min(100%, 240px);
    height: 88px;
    padding: .65rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .65rem;
}

.front-service-restriction-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--account-border);
}

.front-service-restriction-facts > div:last-child {
    border-bottom: 0;
}

.front-service-restriction-facts dt {
    color: var(--account-muted);
}

.front-service-restriction-facts dd {
    margin: 0;
    color: var(--account-primary);
    font-weight: 800;
    text-align: right;
}

.front-service-restriction-schedule {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem 1rem;
    padding: 0;
    list-style: none;
}

.front-service-restriction-schedule li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding-block: .35rem;
    border-bottom: 1px dashed var(--account-border);
}

.front-restriction-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    background: #f8f9ff;
    border: 1px solid var(--account-border);
    border-radius: .75rem;
}

.front-forum-restriction {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    max-width: 900px;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    margin-inline: auto;
    background: linear-gradient(135deg, #fff 0%, #f4f6ff 100%);
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: 1rem;
}

.front-forum-restriction-icon {
    display: grid;
    width: 100px;
    height: 100px;
    background: #fff3cd;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(102, 77, 3, .16);
    font-size: 2.5rem;
    place-items: center;
}

.front-service-order-logo {
    width: min(100%, 240px);
    height: 88px;
    padding: .65rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .65rem;
}

.front-service-order-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    padding-block: .55rem;
    border-bottom: 1px dashed var(--account-border);
}

.front-service-order-facts dt {
    color: var(--account-muted);
    font-weight: 600;
}

.front-service-order-facts dd {
    margin: 0;
    color: var(--account-primary);
    font-weight: 800;
    text-align: right;
}

.front-service-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.front-service-plan {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--account-border);
    border-radius: .75rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.front-service-plan:hover,
.front-service-plan.is-selected {
    background: #f1fbfb;
    border-color: var(--colpay-accent);
    box-shadow: 0 5px 16px rgba(33, 33, 79, .08);
}

.front-service-plan img {
    grid-column: 1 / -1;
    width: 100%;
    height: 90px;
    object-fit: contain;
}

.front-service-plan > span:not(.front-service-plan-quantity) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.front-service-plan small {
    color: var(--account-muted);
}

.front-service-plan-quantity {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 90px;
    align-items: center;
    gap: .5rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--account-border);
}

.front-service-quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.front-service-live-summary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .35rem 1rem;
    padding: .85rem 1rem;
    background: #f8f9ff;
    border: 1px solid var(--account-border);
    border-radius: .65rem;
}

.front-service-live-summary span {
    color: var(--account-muted);
}

.front-service-live-summary strong {
    overflow-wrap: anywhere;
    text-align: right;
}

.front-service-confirmation {
    width: min(560px, calc(100% - 2rem));
    padding: 0;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}

.front-service-confirmation::backdrop {
    background: rgba(15, 23, 42, .58);
}

.front-service-confirmation form {
    position: relative;
    padding: 1.5rem;
}

.front-service-confirmation > div {
    position: relative;
    padding: 1.5rem;
}

.front-deposit-confirmation-copy {
    white-space: pre-line;
}

.front-service-confirmation-close {
    position: absolute;
    top: .6rem;
    right: .8rem;
    padding: .15rem .5rem;
    border: 0;
    background: transparent;
    font-size: 1.7rem;
}

.front-service-confirmation dl > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--account-border);
}

.front-service-confirmation dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: right;
}

.front-service-purchase-guidance {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border: 1px solid #cfe2ff;
    border-radius: .75rem;
    background: #f4f8ff;
    color: #475569;
    font-size: .82rem;
}

.front-service-purchase-guidance span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.front-traditional-service-breadcrumb .breadcrumb-item {
    padding: .3rem .65rem;
    border: 1px solid var(--account-border);
    border-radius: .35rem;
    background: var(--account-surface-soft);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: underline;
}

.front-traditional-service-breadcrumb .breadcrumb-item::before {
    display: none;
}

.front-traditional-service-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: .65rem;
}

.front-traditional-service-product {
    overflow: hidden;
    border-color: var(--account-border);
}

.front-traditional-service-product > .card-header {
    min-height: 52px;
}

.front-traditional-favorite {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 193, 7, .65);
    border-radius: 50%;
    background: #fff;
    color: #ffb400;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 .15rem .45rem rgba(15, 23, 42, .16);
}

.front-traditional-favorite:hover,
.front-traditional-favorite:focus-visible {
    color: #e09b00;
    transform: translateY(-1px);
}

.front-traditional-service-summary .front-product-logo {
    width: auto;
    max-width: min(100%, 240px);
    max-height: 88px;
    object-fit: contain;
}

.front-traditional-service-commissions td:last-child {
    width: 1%;
}

.front-traditional-service-transaction {
    margin-top: 1rem;
}

.front-traditional-service-form .form-label {
    font-weight: 600;
}

.front-traditional-quick-amounts .btn {
    min-width: 5.4rem;
}

.front-traditional-service-product.front-has-bemovil-picker {
    overflow: visible;
}

.front-bemovil-service-form .front-bemovil-form-field,
.front-bemovil-service-form .front-traditional-refacil-amount {
    width: 100%;
}

.front-bemovil-service-form .form-control,
.front-bemovil-service-form .form-select,
.front-bemovil-product-selector .form-select {
    min-height: 42px;
}

.front-bemovil-purchase-guidance {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    border-color: var(--account-primary);
    border-radius: .35rem;
    background: #fff;
    color: var(--account-primary);
    font-size: .9rem;
    font-weight: 500;
}

.front-bemovil-product-selector .form-label {
    font-weight: 600;
}

.bemovil-package-modal {
    --bemovil-color-cyan: rgb(13 200 240);
    --bemovil-color-cyan-soft: #cfe5fc;
    --bemovil-color-teal: #17a2b8;
    --bemovil-color-green: #17c671;
    --bemovil-color-navy: #242450;
    --bemovil-color-slate: #5a6169;
    --bemovil-color-slate-dark: #3d4654;
    --bemovil-color-slate-light: #becad6;
    --bemovil-color-surface: #f5f6f8;
    --bemovil-color-panel: #e9ecef;
    --bemovil-color-panel-soft: #f4f7f9;
}

.bemovil-package-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--bemovil-color-slate-light);
    border-radius: 8px;
}

.bemovil-package-modal .modal-header {
    border-bottom: 0;
    background: var(--bemovil-color-navy);
    color: #fff;
}

.bemovil-package-modal .modal-body {
    background: var(--bemovil-color-surface);
}

.bemovil-package-modal .modal-footer {
    border-top: 1px solid var(--bemovil-color-panel);
    background: var(--bemovil-color-panel-soft);
}

.bemovil-package-accept {
    border-color: var(--bemovil-color-cyan);
    background: var(--bemovil-color-cyan);
    color: var(--bemovil-color-navy);
    font-weight: 700;
}

.bemovil-package-accept:hover,
.bemovil-package-accept:focus-visible {
    border-color: var(--bemovil-color-teal);
    background: var(--bemovil-color-teal);
    color: #fff;
}

.bemovil-package-tabs {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 2px;
    overflow-x: auto;
}

.bemovil-package-tab {
    padding: 8px 13px;
    border: 0;
    border-radius: 7px;
    background: var(--bemovil-color-panel);
    color: var(--bemovil-color-slate);
    font-weight: 700;
    white-space: nowrap;
}

.bemovil-package-tab:hover,
.bemovil-package-tab.active {
    background: var(--bemovil-color-cyan);
    color: var(--bemovil-color-navy);
}

.bemovil-package-options {
    display: grid;
    gap: 12px;
}

.bemovil-package-option {
    display: grid;
    grid-template-columns: minmax(86px, 110px) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--bemovil-color-navy);
    text-align: left;
}

.bemovil-package-option[hidden] {
    display: none !important;
}

.bemovil-package-option:hover,
.bemovil-package-option:focus-visible,
.bemovil-package-option.is-selected {
    border-color: var(--bemovil-color-cyan);
    outline: 0;
    box-shadow: 0 0 0 .15rem rgba(0, 184, 216, .18);
}

.bemovil-package-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 8px;
    background: var(--bemovil-color-cyan);
    color: var(--bemovil-color-navy);
    font-weight: 700;
    line-height: 1.1;
}

.bemovil-package-price.is-unpriced {
    background: var(--bemovil-color-cyan-soft);
}

.bemovil-package-price small {
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}

.bemovil-package-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 64px;
    padding: 10px 14px;
    background: var(--bemovil-color-panel);
}

.bemovil-package-option:hover .bemovil-package-info,
.bemovil-package-option.is-selected .bemovil-package-info {
    background: var(--bemovil-color-panel-soft);
}

.bemovil-package-check {
    display: inline-flex;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bemovil-color-slate-light);
    color: transparent;
    font-size: 11px;
    font-weight: 700;
}

.bemovil-package-option.is-selected .bemovil-package-check {
    background: var(--bemovil-color-navy);
    color: #fff;
}

.bemovil-package-product-copy {
    display: flex;
    flex: 1 1 160px;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.bemovil-package-name {
    font-weight: 700;
}

.bemovil-package-description {
    color: var(--bemovil-color-slate);
    font-size: .86rem;
    font-weight: 600;
}

.bemovil-package-features {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    margin-left: auto;
}

.bemovil-package-feature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}

.bemovil-package-feature-icon {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bemovil-color-slate-light);
    color: var(--bemovil-color-panel-soft);
    font-size: 11px;
}

.bemovil-package-option:hover .bemovil-package-feature-icon,
.bemovil-package-option.is-selected .bemovil-package-feature-icon {
    background: rgba(13, 200, 240, .18);
    color: var(--bemovil-color-teal);
}

.bemovil-package-feature-label {
    color: var(--bemovil-color-slate);
    font-size: .86rem;
    font-weight: 600;
}

.bemovil-package-feature-value {
    color: var(--bemovil-color-navy);
    font-size: .86rem;
}

@media (min-width: 992px) {
    .bemovil-package-modal .modal-dialog {
        max-width: min(96vw, 1280px);
    }

    .bemovil-package-modal .modal-content {
        min-height: 70vh;
    }
}

@media (max-width: 575.98px) {
    .bemovil-package-option {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .bemovil-package-info {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .bemovil-package-features {
        width: 100%;
        margin-left: 0;
    }
}

.front-api-purchase-confirmation [data-purchase-confirm-total] {
    font-size: 1.05rem;
}

.front-api-purchase-confirmation [data-purchase-confirm-details] {
    max-width: 330px;
}

.front-payment-methods .card-header small {
    display: block;
    margin-top: .25rem;
}

.front-payment-methods .list-group-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
}

.front-payment-method-icon {
    display: grid;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--account-primary);
    border-radius: 50%;
    font-weight: 800;
    place-items: center;
}

.front-payment-method-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.front-payment-method-copy small {
    color: var(--account-muted);
}

.front-payment-methods .list-group-item.active .front-payment-method-icon {
    color: var(--account-primary);
    background: #fff;
}

.front-payment-methods .list-group-item.active .front-payment-method-copy small {
    color: rgba(255, 255, 255, .8);
}

.front-withdraw-guide img {
    max-height: 180px;
    margin-bottom: 1rem;
}

.front-withdraw-guide ol {
    display: grid;
    gap: .65rem;
    padding-left: 1.35rem;
    margin: 1rem 0 0;
    color: var(--account-muted);
    text-align: left;
}

.front-history-account {
    max-width: 220px;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .account-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-page-header > .btn,
    .account-page-actions {
        width: 100%;
    }

    .account-page-actions .btn {
        flex: 1 1 auto;
    }

    .front-service-intro {
        grid-template-columns: 1fr;
    }

    .front-service-intro-image {
        display: none;
    }

    .front-service-card-link {
        min-height: 130px;
        padding-inline: .5rem;
    }

    .front-service-card-link small {
        font-size: .72rem;
    }

    .front-service-restriction-schedule {
        grid-template-columns: 1fr;
    }

    .front-restriction-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .front-forum-restriction {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .front-forum-restriction-icon {
        width: 82px;
        height: 82px;
        margin-inline: auto;
    }

    .front-forum-restriction .d-flex {
        justify-content: center;
    }

    .front-service-plan-grid {
        grid-template-columns: 1fr;
    }

    .front-service-live-summary,
    .front-service-confirmation dl > div {
        grid-template-columns: 1fr;
        gap: .1rem;
    }

    .front-service-live-summary strong,
    .front-service-confirmation dd {
        text-align: left;
    }
}

/* Navegación, historiales y comprobantes de Servicios / Bre-B. */
.front-module-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.front-module-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .35rem;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .65rem;
    box-shadow: 0 5px 16px rgba(33, 33, 79, .06);
}

.front-module-nav a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    color: var(--account-primary);
    border-radius: .45rem;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.front-module-nav a:hover,
.front-module-nav a.active {
    color: var(--account-primary);
    background: rgba(0, 205, 199, .13);
}

/* Directorio y consulta segura de facturas. */
.front-bill-search {
    overflow: hidden;
    background: linear-gradient(135deg, #fff 0%, #f1fbfc 100%);
    border: 1px solid rgba(0, 142, 170, .16) !important;
}

.front-bill-search::before {
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--account-accent), var(--account-primary));
    content: "";
}

.front-bill-icon,
.front-product-placeholder {
    display: inline-grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    color: #fff;
    background: linear-gradient(135deg, var(--account-accent), var(--account-primary));
    border-radius: .8rem;
    font-size: 1.35rem;
    font-weight: 800;
    place-items: center;
}

.front-bill-icon-sm {
    width: 38px;
    height: 38px;
    border-radius: .6rem;
    font-size: 1rem;
}

.front-product-placeholder {
    width: 72px;
    height: 72px;
    margin-inline: auto;
    border-radius: 50%;
    font-size: 1.2rem;
}

.front-selected-bill {
    border-color: rgba(0, 142, 170, .2);
}

.front-bill-quote {
    overflow: hidden;
}

.front-bill-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-top: 1px solid var(--account-border);
}

.front-bill-summary dt,
.front-bill-summary dd {
    margin: 0;
}

.front-bill-summary dd {
    text-align: right;
}

.front-history-filters {
    overflow: hidden;
}

.front-history-filters .card-header small {
    display: block;
    margin-top: .25rem;
}

.front-p2p-pending {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    color: #155a70;
    background: linear-gradient(135deg, #e8fbff, #f3f8ff);
    border: 1px solid rgba(0, 173, 225, .25);
    border-radius: .75rem;
}

.front-p2p-pending p,
.front-p2p-pending small {
    color: #496a76;
}

.front-p2p-pending-icon {
    display: grid;
    width: 46px;
    height: 46px;
    color: #fff;
    background: var(--account-primary);
    border-radius: 50%;
    font-size: 1.2rem;
    place-items: center;
}

.front-p2p-history-table th,
.front-p2p-history-table td {
    white-space: nowrap;
}

.front-p2p-history-table td:nth-child(2) {
    min-width: 150px;
    white-space: normal;
}

.front-history-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.front-history-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .6rem;
    box-shadow: 0 5px 16px rgba(33, 33, 79, .05);
}

.front-history-summary span {
    color: var(--account-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.front-history-summary strong {
    color: var(--account-primary);
    font-size: 1.05rem;
}

.front-sale-receipt {
    max-width: 800px;
    overflow: hidden;
    border-color: var(--account-border);
}

.front-receipt-brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.front-receipt-brand img {
    width: 145px;
    max-height: 58px;
    object-fit: contain;
}

.front-receipt-brand > div {
    display: flex;
    flex-direction: column;
    color: var(--account-muted);
    font-size: .82rem;
}

.front-receipt-brand > div strong {
    color: var(--account-primary);
}

.front-receipt-product {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) minmax(180px, auto);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin: 1.2rem 0;
    background: #f7f9fc;
    border-radius: .65rem;
}

.front-receipt-product > img,
.front-receipt-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.front-receipt-icon {
    display: grid;
    color: #fff;
    background: var(--account-primary);
    border-radius: 50%;
    font-size: 1.65rem;
    place-items: center;
}

.front-receipt-product h2 {
    margin: .1rem 0;
    color: var(--account-primary);
    font-size: 1.15rem;
}

.front-receipt-product span,
.front-receipt-product small {
    color: var(--account-muted);
}

.front-receipt-total {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.front-receipt-total strong {
    color: var(--account-primary);
    font-size: 1.35rem;
}

.front-receipt-details {
    margin-bottom: 0;
}

.front-receipt-details dt,
.front-receipt-details dd {
    padding-bottom: .55rem;
    border-bottom: 1px dashed #e0e3eb;
    overflow-wrap: anywhere;
}

.front-breb-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, #e9faff 0%, #f3f7ff 100%);
    border: 1px solid rgba(0, 173, 225, .2);
    border-radius: 1rem;
    box-shadow: 0 10px 28px rgba(33, 33, 79, .07);
}

.front-breb-kicker {
    color: #008caf;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.front-breb-hero h2 {
    margin: .3rem 0 .55rem;
    color: var(--account-primary);
    font-size: 1.55rem;
}

.front-breb-hero p {
    color: var(--account-muted);
}

.front-breb-hero > img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.front-breb-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.front-breb-steps span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--account-primary);
    font-size: .78rem;
    font-weight: 700;
}

.front-breb-steps b {
    display: grid;
    width: 24px;
    height: 24px;
    color: #fff;
    background: var(--account-accent);
    border-radius: 50%;
    place-items: center;
}

/* Publicidad clásica: estructura y comportamiento equivalentes al panel tradicional. */
.front-module-eyebrow,
.front-public-kicker {
    display: block;
    margin-bottom: .25rem;
    color: #008eaa;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.front-module-header h1 {
    margin: 0 0 .25rem;
    color: var(--account-primary);
    font-size: 1.65rem;
}

.front-module-header p {
    margin: 0;
    color: var(--account-muted);
}

.front-advertising-actions {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: .25rem;
    padding: .3rem;
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .6rem;
    box-shadow: 0 4px 14px rgba(33, 33, 79, .05);
    scrollbar-width: thin;
}

.front-advertising-actions a {
    padding: .45rem .7rem;
    color: var(--account-muted);
    border-radius: .4rem;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.front-advertising-actions a:hover,
.front-advertising-actions a.active {
    color: var(--account-primary);
    background: #effaf9;
}

.front-advertising-catalog {
    --advertising-primary: var(--colpay-primary);
    --advertising-accent: var(--colpay-accent);
}

.front-advertising-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1rem;
    padding: 0;
    list-style: none;
}

.front-advertising-benefits li {
    position: relative;
    padding-left: 1.45rem;
    color: #55576d;
}

.front-advertising-benefits li::before {
    position: absolute;
    top: .05rem;
    left: 0;
    display: grid;
    width: 18px;
    height: 18px;
    color: #fff;
    content: '✓';
    background: var(--advertising-accent);
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 800;
    place-items: center;
}

.front-advertising-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--advertising-primary), #3e3470);
    border-radius: .75rem;
    box-shadow: 0 9px 22px rgba(33, 33, 79, .16);
}

.front-advertising-section-title span {
    color: #aeeeed;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.front-advertising-section-title h2 {
    margin: .1rem 0 0;
    font-size: 1.35rem;
}

.front-advertising-format-card {
    border-color: rgba(33, 33, 79, .09);
    transition: transform .18s ease, box-shadow .18s ease;
}

.front-advertising-format-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(33, 33, 79, .12) !important;
}

.front-advertising-format-icon,
.front-advertising-package-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: .85rem;
    color: var(--advertising-primary, var(--account-primary));
    background: rgba(0, 205, 199, .14);
    border-radius: .7rem;
    font-size: 1.2rem;
    font-weight: 800;
    place-items: center;
}

.front-advertising-account-state {
    display: flex;
    flex-direction: column;
    padding: .65rem .75rem;
    background: #f7f8fb;
    border-radius: .45rem;
    font-size: .78rem;
}

.front-advertising-account-state strong {
    color: var(--advertising-primary);
}

.front-advertising-intro,
.front-advertising-purchase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem 1.25rem;
    background: linear-gradient(135deg, #fff, #f2fbfb);
    border: 1px solid rgba(0, 205, 199, .22);
    border-radius: .75rem;
}

.front-advertising-intro h2,
.front-advertising-purchase-head h2 {
    margin: .05rem 0 .3rem;
    color: var(--account-primary);
    font-size: 1.4rem;
}

.front-advertising-intro p,
.front-advertising-purchase-head p {
    max-width: 750px;
    margin: 0;
    color: var(--account-muted);
}

.front-advertising-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.front-advertising-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .6rem;
    box-shadow: 0 5px 16px rgba(33, 33, 79, .05);
}

.front-advertising-summary span,
.front-advertising-purchase-balance span {
    color: var(--account-muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.front-advertising-summary strong {
    color: var(--account-primary);
    font-size: 1.35rem;
}

.front-advertising-summary small,
.front-advertising-purchase-balance small {
    overflow: hidden;
    color: var(--account-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.front-advertising-manager-card {
    overflow: hidden;
}

.front-advertising-table thead a {
    color: var(--account-primary);
    text-decoration: none;
    white-space: nowrap;
}

.front-advertising-table thead a:hover {
    text-decoration: underline;
}

.front-advertising-ad-title {
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr);
    align-items: center;
    gap: .7rem;
    min-width: 210px;
}

.front-advertising-ad-title > img {
    width: 48px;
    height: 48px;
    padding: .2rem;
    object-fit: contain;
    background: #f6f7fa;
    border: 1px solid var(--account-border);
    border-radius: .4rem;
}

.front-advertising-ad-title > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.front-advertising-ad-title a {
    color: var(--account-primary);
    font-weight: 700;
}

.front-advertising-ad-title small {
    display: block;
    max-width: 310px;
    color: var(--account-muted);
}

.front-advertising-cell-value {
    display: inline-block;
}

.front-simple-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.front-simple-pagination .btn {
    min-width: 105px;
}

.front-advertising-form-card .card-header {
    padding: 1rem 1.2rem;
}

.front-advertising-balance-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    color: var(--account-muted);
    background: #f7f9fc;
    border-radius: .55rem;
}

.front-advertising-balance-line strong {
    color: var(--account-primary);
}

.front-advertising-form-card .input-group-text {
    min-width: 76px;
    justify-content: center;
    color: var(--account-muted);
    background: #f5f6f9;
    font-size: .75rem;
}

.front-advertising-guide ol {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
}

.front-advertising-guide li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.front-advertising-guide li > span {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    color: #fff;
    background: var(--account-accent);
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 800;
    place-items: center;
}

.front-advertising-guide li div {
    display: flex;
    flex-direction: column;
}

.front-advertising-guide small {
    color: var(--account-muted);
}

.front-advertising-campaign-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .9rem;
    background: #f7f9fc;
    border-radius: .6rem;
}

.front-advertising-campaign-summary img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    background: #fff;
    border-radius: .45rem;
}

.front-advertising-campaign-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.front-advertising-campaign-summary > div:last-child {
    text-align: right;
}

.front-advertising-campaign-summary a,
.front-advertising-campaign-summary span {
    color: var(--account-muted);
    font-size: .76rem;
}

.front-advertising-allocation-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.front-advertising-allocation-facts > div {
    padding: .75rem;
    border: 1px solid var(--account-border);
    border-radius: .5rem;
}

.front-advertising-allocation-facts dt {
    color: var(--account-muted);
    font-size: .72rem;
    text-transform: uppercase;
}

.front-advertising-allocation-facts dd {
    margin: .15rem 0 0;
    color: var(--account-primary);
    font-weight: 700;
}

.front-advertising-purchase-balance {
    display: flex;
    min-width: 230px;
    flex-direction: column;
    padding: .7rem .9rem;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .55rem;
}

.front-advertising-purchase-balance strong {
    color: var(--account-primary);
    font-size: 1.15rem;
}

.front-advertising-package {
    overflow: hidden;
    border-color: var(--account-border);
}

.front-advertising-package.is-unavailable {
    opacity: .78;
}

.front-advertising-package h3 {
    margin: .35rem 0 0;
    color: var(--account-primary);
    font-size: 2rem;
}

.front-advertising-package h3 small {
    font-size: .9rem;
    font-weight: 600;
}

.front-advertising-package-price {
    color: #008eaa;
    font-size: 1.25rem;
    font-weight: 800;
}

.front-advertising-package-price small {
    font-size: .72rem;
}

/* Referidos directos y alquilados: panel tradicional con gestión adaptativa. */
.front-referral-invite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 1.25rem;
    background: linear-gradient(135deg, #fff 0%, #effbfa 100%);
    border: 1px solid rgba(0, 205, 199, .24);
    border-radius: .75rem;
}

.front-referral-invite h2,
.front-referral-waiting h2 {
    margin: .05rem 0 .3rem;
    color: var(--account-primary);
    font-size: 1.35rem;
}

.front-referral-invite p,
.front-referral-waiting p {
    margin: 0;
    color: var(--account-muted);
}

.front-referral-invite .input-group {
    min-width: 0;
}

.front-referral-filter {
    overflow: hidden;
    border-color: var(--account-border);
}

.front-referral-person {
    display: grid;
    min-width: 145px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
}

.front-referral-person > span,
.front-referral-autopay-icon {
    display: grid;
    width: 34px;
    height: 34px;
    color: var(--account-primary);
    background: rgba(0, 205, 199, .15);
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 800;
    place-items: center;
}

.front-referral-person > div,
.front-referral-autopay-status > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.front-referral-person strong {
    overflow: hidden;
    color: var(--account-primary);
    text-overflow: ellipsis;
}

.front-referral-person small,
.front-referral-autopay-status small {
    color: var(--account-muted);
    font-size: .72rem;
}

.front-referral-package-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin: .3rem 0 1rem;
}

.front-referral-package-facts > div {
    min-width: 0;
    padding: .6rem;
    background: #f7f9fc;
    border-radius: .45rem;
}

.front-referral-package-facts dt {
    color: var(--account-muted);
    font-size: .66rem;
    text-transform: uppercase;
}

.front-referral-package-facts dd {
    margin: .15rem 0 0;
    color: var(--account-primary);
    font-size: .78rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.front-referral-waiting {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fffaf0;
    border: 1px solid #f0dbad;
    border-radius: .75rem;
}

.front-referral-waiting > span {
    font-size: 1.75rem;
}

.front-referral-autopay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .65rem;
    box-shadow: 0 5px 16px rgba(33, 33, 79, .05);
}

.front-referral-autopay-status {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.front-referral-autopay-status > div > span {
    color: var(--account-muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.front-referral-selection .card-body {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(145px, auto) minmax(260px, 1fr) auto;
    align-items: end;
    gap: 1rem;
}

.front-referral-selection .card-body > div:not(.flex-grow-1) {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    justify-content: center;
    padding: .65rem .8rem;
    background: #f7f9fc;
    border-radius: .5rem;
}

.front-referral-selection .card-body > div > span {
    color: var(--account-muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.front-referral-selection .card-body > div > strong {
    color: var(--account-primary);
    font-size: 1.05rem;
}

.front-referral-selection footer {
    padding: .7rem 1rem;
    color: var(--account-muted);
    background: #f7f9fc;
    border-top: 1px solid var(--account-border);
    font-size: .76rem;
}

.front-referral-table .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
}

/* Soporte, mensajes y configuración: navegación y flujos de la vista tradicional. */
.front-support-hero,
.front-support-ticket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem 1.25rem;
    background: linear-gradient(135deg, #fff 0%, #eefbfb 100%);
    border: 1px solid rgba(0, 205, 199, .24);
    border-radius: .75rem;
}

.front-support-hero h2,
.front-support-ticket-head h2 {
    margin: .05rem 0 .3rem;
    color: var(--account-primary);
    font-size: 1.4rem;
}

.front-support-hero p,
.front-support-ticket-head p {
    margin: 0;
    color: var(--account-muted);
}

.front-support-filters {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: .25rem;
    padding: .3rem;
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .6rem;
    scrollbar-width: thin;
}

.front-support-filters a {
    padding: .42rem .7rem;
    color: var(--account-muted);
    border-radius: .4rem;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.front-support-filters a:hover,
.front-support-filters a.active {
    color: var(--account-primary);
    background: #effaf9;
}

.front-support-code {
    color: var(--account-primary);
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.front-support-guide ol,
.front-message-guide ul {
    padding-left: 1.2rem;
    color: var(--account-muted);
}

.front-support-guide li,
.front-message-guide li {
    margin-bottom: .55rem;
}

.front-support-conversation {
    display: flex;
    max-width: 980px;
    flex-direction: column;
    gap: 1rem;
    margin-inline: auto;
}

.front-support-message {
    width: min(88%, 820px);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .75rem;
    box-shadow: 0 6px 18px rgba(33, 33, 79, .06);
}

.front-support-message.is-user {
    align-self: flex-end;
}

.front-support-message.is-support {
    align-self: flex-start;
    border-left: 4px solid var(--account-accent);
}

.front-support-message > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background: #f7f9fc;
    border-bottom: 1px solid var(--account-border);
}

.front-support-message time {
    color: var(--account-muted);
    font-size: .74rem;
    white-space: nowrap;
}

.front-support-author {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.front-support-author > span,
.front-message-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: var(--account-primary);
    background: rgba(0, 205, 199, .15);
    border-radius: 50%;
    font-weight: 800;
    place-items: center;
}

.front-support-author > div {
    display: flex;
    flex-direction: column;
}

.front-support-author small {
    color: var(--account-muted);
    font-size: .7rem;
}

.front-support-message-body {
    padding: 1rem;
    color: #404258;
}

.front-support-message > footer {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .7rem 1rem;
    background: #f7f9fc;
    border-top: 1px solid var(--account-border);
}

.front-support-message > footer a {
    color: var(--account-primary);
    font-size: .78rem;
}

.front-message-disabled {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #fffaf0;
    border: 1px solid #f0dbad;
    border-radius: .7rem;
}

.front-message-disabled > span {
    display: grid;
    width: 36px;
    height: 36px;
    color: #7b5300;
    background: #ffe5a3;
    border-radius: 50%;
    font-weight: 800;
    place-items: center;
}

.front-message-disabled p {
    margin: .15rem 0 0;
    color: var(--account-muted);
}

.front-message-unread {
    background: #f2fbfb;
    font-weight: 650;
}

.front-message-state {
    color: var(--account-accent);
    font-size: 1rem;
}

.front-message-subject {
    color: var(--account-primary);
    text-decoration: none;
}

.front-message-subject:hover {
    text-decoration: underline;
}

.front-message-selection .card-body {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(260px, 1fr) auto;
    align-items: end;
    gap: 1rem;
}

.front-message-selection .card-body > div:first-child {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    justify-content: center;
    padding: .65rem .8rem;
    background: #f7f9fc;
    border-radius: .5rem;
}

.front-message-selection .card-body > div:first-child span {
    color: var(--account-muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.front-message-selection .card-body > div:first-child strong {
    color: var(--account-primary);
    font-size: 1.05rem;
}

.front-message-reader {
    max-width: 920px;
    margin-inline: auto;
    overflow: hidden;
    border-color: var(--account-border);
}

.front-message-reader > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, #fff, #f2fbfb);
    border-bottom: 1px solid var(--account-border);
}

.front-message-reader h2 {
    margin: .05rem 0 .25rem;
    color: var(--account-primary);
    font-size: 1.35rem;
}

.front-message-reader header p {
    margin: 0;
    color: var(--account-muted);
    font-size: .82rem;
}

.front-message-reader > .front-message-body {
    min-height: 190px;
    padding: 1.5rem;
    line-height: 1.7;
}

.front-message-reader > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    background: #f7f9fc;
    border-top: 1px solid var(--account-border);
}

/* Paid-to-click and video advertising: traditional catalog and viewer parity. */
.front-view-ads-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
    align-items: center;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid #e4e7f0;
    border-radius: .85rem;
    background: linear-gradient(135deg, #f1f5ff 0%, #fff 62%, #e9fbfa 100%);
    box-shadow: 0 1rem 2.5rem rgba(33, 33, 79, .08);
}

.front-view-ads-hero h1 {
    margin: .35rem 0 .75rem;
    color: var(--colpay-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}

.front-view-ads-hero p {
    max-width: 730px;
    color: #64677a;
    font-size: 1.05rem;
}

.front-view-ads-hero img {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
}

.front-view-ads-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    overflow: hidden;
    border: 1px solid #e4e7f0;
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 .4rem 1.25rem rgba(33, 33, 79, .06);
}

.front-view-ads-stats > div {
    display: flex;
    min-height: 92px;
    flex-direction: column;
    justify-content: center;
    padding: .9rem 1.1rem;
    border-right: 1px solid #e4e7f0;
}

.front-view-ads-stats > div:last-child {
    border-right: 0;
}

.front-view-ads-stats span,
.front-view-ad-facts dt {
    color: #74778a;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.front-view-ads-stats strong {
    color: var(--colpay-primary);
    font-size: 1.55rem;
    line-height: 1.2;
}

.front-view-ads-stats small {
    color: #74778a;
}

.front-view-ads-notice,
.front-view-ad-external,
.front-view-ad-error {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    border: 1px solid #bfe7ec;
    border-radius: .6rem;
    background: #effbfd;
    color: #315e68;
}

.front-view-ads-notice > span,
.front-view-ad-error > span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    background: #008fa9;
    color: #fff;
    font-weight: 800;
}

.front-view-ads-group {
    overflow: hidden;
    border: 1px solid #e4e7f0;
    border-radius: .7rem;
    background: #f8f9fc;
}

.front-view-ads-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e4e7f0;
    background: #fff;
}

.front-view-ads-group-title h2 {
    margin: 0;
    color: var(--colpay-primary);
    font-size: 1.05rem;
}

.front-view-ads-group-title span {
    color: #74778a;
    font-size: .78rem;
}

.front-view-ad-card {
    overflow: hidden;
    border-color: #e4e7f0;
    transition: transform .18s ease, box-shadow .18s ease;
}

.front-view-ad-card:not(.is-completed):hover {
    transform: translateY(-3px);
    box-shadow: 0 .8rem 1.8rem rgba(33, 33, 79, .12) !important;
}

.front-view-ad-card.is-completed {
    opacity: .76;
}

/* Reward modules: keep the public structure and proportions used by the traditional site. */
.front-rewards-public-shell .traditional-back-link { font-size: 18px; }
.front-rewards-public-shell .traditional-reward-hero-image.is-ptc { width: 80%; }
.front-rewards-public-shell .traditional-reward-hero-image.is-video { width: 50%; }
.front-rewards-public-shell .traditional-video-card { overflow: hidden; }
.front-rewards-public-shell .traditional-banner-slots .banner-ads img { max-width: 100%; max-height: 100px; object-fit: contain; }
.front-rewards-public-shell .traditional-ptc-card { min-height: 270px; }
.front-rewards-public-shell .traditional-ptc-card .card-body { overflow: hidden; }
.front-rewards-public-shell .traditional-ptc-thumbnail { width: 100px; max-width: 100px; max-height: 100px; object-fit: contain; }
.front-rewards-public-shell .traditional-ptsu-hero { width: 70%; }
.front-rewards-public-shell .traditional-ptsu-card { min-height: 230px; }
.front-rewards-public-shell .traditional-revenue-hero { width: 50%; }
.front-rewards-public-shell .traditional-revenue-investment { font-size: 10px; }
.front-rewards-public-shell .traditional-clixgrid-hero { width: 70%; }
.front-rewards-public-shell .traditional-clixgrid-board { display: block; width: 100%; }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid {
    width: 600px;
    min-width: 600px;
    margin-inline: auto;
    gap: 0;
    padding: 0;
    border: 2px solid #000;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-radius: .25rem;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 600px 400px;
    box-shadow: none;
}
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="1"] { background-image: url('/assets/clixgrid/images/1.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="2"] { background-image: url('/assets/clixgrid/images/2.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="3"] { background-image: url('/assets/clixgrid/images/3.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="4"] { background-image: url('/assets/clixgrid/images/4.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="5"] { background-image: url('/assets/clixgrid/images/5.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="6"] { background-image: url('/assets/clixgrid/images/6.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="7"] { background-image: url('/assets/clixgrid/images/7.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="8"] { background-image: url('/assets/clixgrid/images/8.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="9"] { background-image: url('/assets/clixgrid/images/9.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid[data-clixgrid-image="10"] { background-image: url('/assets/clixgrid/images/10.jpg'); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid-row { gap: 0; }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid-row form { flex: 0 0 calc(600px / var(--clixgrid-columns)); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid-row button {
    display: block;
    height: calc(400px / var(--clixgrid-rows));
    aspect-ratio: auto;
    padding: 0;
    border: 0;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: rgba(255,255,255,.08);
}
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid-row button:hover,
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid-row button:focus-visible { background: rgba(255,193,7,.72); }
.front-rewards-public-shell .traditional-clixgrid-board .v2-clixgrid-row button:disabled { background: #f00; }
.front-rewards-public-shell .traditional-clixgrid-board .clixgrid_bottom {
    padding: 5px 10px;
    border-top: 1px solid #000;
    background: #fff;
    color: #212529;
}
.front-rewards-public-shell .traditional-clixgrid-winners { max-height: 200px; }

@media (max-width: 767.98px) {
    .front-rewards-public-shell .traditional-reward-hero-image,
    .front-rewards-public-shell .traditional-ptsu-hero,
    .front-rewards-public-shell .traditional-revenue-hero,
    .front-rewards-public-shell .traditional-clixgrid-hero { margin-top: 1rem; }
}

.front-view-ad-placeholder {
    display: grid;
    height: 190px;
    place-items: center;
    background: linear-gradient(145deg, var(--colpay-primary), #393984);
    color: var(--colpay-accent);
    font-size: 3rem;
}

.front-view-ad-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin-bottom: .85rem;
}

.front-view-ad-facts > div {
    padding: .55rem .65rem;
    border-radius: .4rem;
    background: #f4f5f9;
}

.front-view-ad-facts dd {
    margin: .15rem 0 0;
    color: var(--colpay-primary);
    font-size: .82rem;
    font-weight: 750;
}

.front-view-ad-manager-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: .5rem;
    background: rgba(0, 205, 199, .14);
    color: #008eaa;
    font-size: 1.25rem;
    font-weight: 800;
}

.front-view-ad-country-all {
    padding: .7rem .8rem;
    border: 1px solid #bfe7ec;
    border-radius: .45rem;
    background: #effbfd;
}

.view-ad-countries {
    padding: .25rem;
    border: 1px solid #e4e7f0;
    border-radius: .45rem;
    background: #fff;
}

.view-ad-countries .form-check {
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.front-view-ad-viewer {
    max-width: 1480px;
    margin-inline: auto;
}

.front-view-ad-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.front-view-ad-viewer-head h1 {
    color: var(--colpay-primary);
    font-weight: 800;
}

.front-view-ad-viewer-card {
    overflow: hidden;
    border-color: #e4e7f0;
}

.front-view-ad-viewer-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
}

.front-view-ad-countdown {
    min-width: 108px;
    padding: .55rem .75rem;
    font-size: .82rem;
}

.front-view-ad-progress {
    height: .65rem;
    background: #e8eaf1;
}

.front-view-ad-progress .progress-bar {
    transition: width .8s linear;
}

.front-view-ad-description {
    padding: .7rem .85rem;
    border-left: 3px solid var(--colpay-accent);
    background: #f7f8fb;
}

.front-view-ad-external {
    justify-content: space-between;
    margin-block: 1rem;
}

.front-view-ad-external p {
    color: #5d6970;
    font-size: .86rem;
}

.front-view-ad-complete {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

.front-view-ad-complete .btn {
    min-width: 190px;
}

.front-view-ad-error {
    border-color: #f1c4c7;
    background: #fff1f2;
    color: #842029;
}

.front-view-ad-error > span {
    background: #dc3545;
}

.front-view-ad-error h2 {
    margin-bottom: .2rem;
}

.front-view-ad-video {
    overflow: hidden;
    border-radius: .5rem;
    background: #101018;
}

.front-view-ad-access-icon {
    display: inline-grid;
    width: 58px;
    height: 58px;
    margin-bottom: .8rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 205, 199, .16);
    color: #008eaa;
    font-size: 1.65rem;
    font-weight: 800;
}

/* Fixed Ads and Login Surfer. */
.front-fixed-ad-card .card-header {
    min-height: 52px;
}

.front-fixed-ad-image,
.front-fixed-ad-placeholder {
    width: 100%;
    height: 150px;
    border-radius: .45rem;
    object-fit: contain;
}

.front-fixed-ad-image {
    border: 1px solid #e4e7f0;
    background: #f8f9fc;
}

.front-fixed-ad-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #eeeeff, #e4fbfa);
    color: #008eaa;
    font-size: 2.7rem;
}

.front-extension-package-facts,
.front-extension-edit-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.front-extension-package-facts > div,
.front-extension-edit-facts > div {
    padding: .6rem .7rem;
    border-radius: .45rem;
    background: #f4f5f9;
}

.front-extension-package-facts dt,
.front-extension-edit-facts dt {
    color: #74778a;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.front-extension-package-facts dd,
.front-extension-edit-facts dd {
    margin: .15rem 0 0;
    color: var(--colpay-primary);
    font-size: .82rem;
    font-weight: 750;
}

.front-extension-edit-facts {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

.front-extension-empty-choice {
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px dashed #b9bdcc;
    border-radius: .75rem;
    background: #fff;
    text-align: center;
}

.front-extension-empty-choice > span {
    display: inline-grid;
    width: 62px;
    height: 62px;
    margin-bottom: .8rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 205, 199, .14);
    color: #008eaa;
    font-size: 1.8rem;
}

.front-extension-empty-choice h2 {
    color: var(--colpay-primary);
}

.front-extension-empty-choice p {
    color: #6e7185;
}

.front-extension-package-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #e4e7f0;
    border-radius: .55rem;
    background: #f8f9fc;
}

.front-extension-package-summary > div {
    display: flex;
    flex-direction: column;
    padding: .7rem .8rem;
    border-right: 1px solid #e4e7f0;
}

.front-extension-package-summary > div:last-child {
    border-right: 0;
}

.front-extension-package-summary span {
    color: #74778a;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.front-extension-package-summary strong {
    color: var(--colpay-primary);
    font-size: .88rem;
}

.front-login-surfer-security {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border: 1px solid #bfe7ec;
    border-radius: 999px;
    background: #effbfd;
    color: #176475;
    font-size: .78rem;
    font-weight: 750;
}

.front-login-surfer-security::before {
    content: "✓";
}

@media (max-width: 991.98px) {
    .front-module-header {
        flex-direction: column;
    }

    .front-referral-invite {
        grid-template-columns: 1fr;
    }

    .front-referral-selection .card-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-referral-selection .card-body > .flex-grow-1 {
        grid-column: 1 / -1;
    }

    .front-message-selection .card-body {
        grid-template-columns: minmax(110px, auto) minmax(220px, 1fr);
    }

    .front-message-selection .card-body > .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .front-module-nav {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .front-breb-hero {
        grid-template-columns: minmax(0, 1fr) 180px;
    }

    .front-advertising-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-view-ads-hero {
        grid-template-columns: minmax(0, 1fr) 190px;
    }

    .front-view-ads-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-view-ads-stats > div:nth-child(2) {
        border-right: 0;
    }

    .front-view-ads-stats > div:nth-child(-n+2) {
        border-bottom: 1px solid #e4e7f0;
    }

    .front-extension-package-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-extension-package-summary > div:nth-child(2) {
        border-right: 0;
    }

    .front-extension-package-summary > div:nth-child(-n+2) {
        border-bottom: 1px solid #e4e7f0;
    }
}

@media (max-width: 575.98px) {
    .front-bill-search-control {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .front-bill-search-control > .form-control,
    .front-bill-search-control > .btn {
        width: 100%;
        border-radius: .375rem !important;
    }

    .front-bill-search-control > .btn {
        margin-top: .5rem;
    }

    .front-module-nav a {
        flex-direction: column;
        gap: .1rem;
        min-width: 70px;
        font-size: .7rem;
    }

    .front-p2p-pending {
        grid-template-columns: auto minmax(0, 1fr);
        padding: .9rem;
    }

    .front-p2p-pending > .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .front-receipt-brand {
        grid-template-columns: 1fr auto;
    }

    .front-receipt-brand img {
        grid-column: 1 / -1;
        width: 125px;
    }

    .front-receipt-product {
        grid-template-columns: 58px minmax(0, 1fr);
        padding: .8rem;
    }

    .front-receipt-product > img,
    .front-receipt-icon {
        width: 54px;
        height: 54px;
    }

    .front-receipt-total {
        grid-column: 1 / -1;
        padding-top: .7rem;
        border-top: 1px solid var(--account-border);
        text-align: left;
    }

    .front-breb-hero {
        grid-template-columns: 1fr;
        padding: 1.1rem;
    }

    .front-breb-hero > img {
        display: none;
    }

    .front-advertising-actions {
        width: 100%;
    }

    .front-referral-invite,
    .front-referral-waiting {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .front-referral-waiting > span {
        display: none;
    }

    .front-referral-waiting .btn,
    .front-referral-rented-intro .btn {
        width: 100%;
    }

    .front-referral-autopay {
        align-items: stretch;
        flex-direction: column;
    }

    .front-referral-autopay .btn {
        width: 100%;
    }

    .front-referral-selection .card-body {
        grid-template-columns: 1fr;
    }

    .front-referral-selection .card-body > .flex-grow-1 {
        grid-column: auto;
    }

    .front-referral-selection .card-body > div:last-child .btn {
        width: 100%;
    }

    .front-support-hero,
    .front-support-ticket-head,
    .front-message-reader > footer {
        align-items: stretch;
        flex-direction: column;
    }

    .front-support-hero .btn,
    .front-support-ticket-head .btn {
        width: 100%;
    }

    .front-support-message {
        width: 100%;
    }

    .front-support-message > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .front-message-disabled {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .front-message-disabled .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .front-message-selection .card-body {
        grid-template-columns: 1fr;
    }

    .front-message-selection .card-body > .btn {
        grid-column: auto;
    }

    .front-advertising-benefits,
    .front-advertising-summary,
    .front-advertising-allocation-facts {
        grid-template-columns: 1fr;
    }

    .front-advertising-section-title,
    .front-advertising-intro,
    .front-advertising-purchase-head {
        align-items: stretch;
        flex-direction: column;
    }

    .front-advertising-section-title .btn,
    .front-advertising-purchase-balance {
        width: 100%;
    }

    .front-advertising-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-advertising-summary > div {
        padding: .7rem;
    }

    .front-advertising-table,
    .front-advertising-table tbody,
    .front-advertising-table tr,
    .front-advertising-table td {
        display: block;
        width: 100%;
    }

    .front-advertising-table thead {
        display: none;
    }

    .front-advertising-table tr {
        padding: .75rem;
        border-bottom: 1px solid var(--account-border);
    }

    .front-advertising-table td {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        gap: .65rem;
        padding: .45rem 0;
        border: 0;
        text-align: left !important;
    }

    .front-advertising-table td::before {
        color: var(--account-muted);
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .front-advertising-table td[colspan] {
        display: block;
    }

    .front-advertising-table td[colspan]::before {
        content: none;
    }

    .front-advertising-ad-title {
        min-width: 0;
    }

    .front-advertising-campaign-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .front-advertising-campaign-summary img {
        display: none;
    }

    .front-advertising-campaign-summary > div:last-child {
        padding-top: .6rem;
        border-top: 1px solid var(--account-border);
        text-align: left;
    }

    .front-simple-pagination {
        gap: .4rem;
    }

    .front-simple-pagination .btn {
        min-width: 0;
        flex: 1 1 0;
    }

    .front-simple-pagination span {
        font-size: .78rem;
        text-align: center;
    }

    .front-view-ads-hero {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .front-view-ads-hero img {
        display: none;
    }

    .front-view-ads-stats > div {
        min-height: 78px;
        padding: .75rem;
    }

    .front-view-ads-stats strong {
        font-size: 1.25rem;
    }

    .front-view-ad-viewer-head,
    .front-view-ad-external,
    .front-view-ad-complete {
        align-items: stretch;
        flex-direction: column;
    }

    .front-view-ad-viewer-head .btn,
    .front-view-ad-external .btn,
    .front-view-ad-complete .btn {
        width: 100%;
    }

    .front-view-ad-viewer-card .card-header {
        align-items: flex-start;
    }

    .front-view-ad-complete p {
        text-align: center;
    }

    .view-ad-frame {
        min-height: 55vh;
    }

    .front-extension-package-summary {
        grid-template-columns: 1fr;
    }

    .front-extension-package-summary > div,
    .front-extension-package-summary > div:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #e4e7f0;
    }

    .front-extension-package-summary > div:last-child {
        border-bottom: 0;
    }
}

.front-utility-hero {
    align-items: center;
    background: linear-gradient(135deg, #f2fbff 0%, #fff 62%, #f3fff8 100%);
    border: 1px solid #dcecf4;
    border-radius: 1rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 28%);
    margin-bottom: 1.5rem;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.front-utility-hero img {
    justify-self: center;
    max-height: 190px;
    max-width: 100%;
}

.front-utility-hero-compact img {
    max-height: 145px;
}

.front-utility-metrics {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.5rem;
}

.front-utility-metrics article {
    background: #fff;
    border: 1px solid #e1e7ec;
    border-radius: .8rem;
    box-shadow: 0 .3rem 1rem rgba(20, 60, 82, .06);
    min-width: 0;
    padding: 1rem;
}

.front-utility-metrics span,
.front-utility-metrics strong {
    display: block;
}

.front-utility-metrics span {
    color: #64727c;
    font-size: .78rem;
    letter-spacing: .04em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.front-utility-metrics strong {
    font-size: clamp(1rem, 2vw, 1.35rem);
    overflow-wrap: anywhere;
}

.front-utility-play-card,
.front-vault-form {
    margin-inline: auto;
    max-width: 780px;
}

.front-coin-choices {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.front-coin-choices label {
    align-items: center;
    border: 2px solid #d8e5ec;
    border-radius: .9rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
}

.front-coin-choices label:has(input:checked) {
    background: #f0fbff;
    border-color: var(--bs-primary);
}

.front-coin-choices label > span {
    align-items: center;
    background: linear-gradient(145deg, #f7d66e, #c89119);
    border: 4px double #fff5c5;
    border-radius: 50%;
    color: #694b08;
    display: flex;
    font-size: 1.75rem;
    font-weight: 800;
    height: 74px;
    justify-content: center;
    width: 74px;
}

.front-coin-choices input {
    accent-color: var(--bs-primary);
}

.front-head-tail-result {
    background: linear-gradient(135deg, #f5fbff 0%, #fff 55%, #f7fafc 100%);
    border: 1px solid #d8e5ec;
    margin: 0 auto 1.5rem;
    max-width: 780px;
    overflow: hidden;
}

.front-head-tail-result-won {
    background: linear-gradient(135deg, #effcf5 0%, #fff 58%, #fff9e6 100%);
    border-color: #b9e7cd;
}

.front-head-tail-result > .card-body {
    align-items: center;
    display: grid;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    grid-template-columns: minmax(130px, .65fr) minmax(0, 1.35fr);
    padding: clamp(1.25rem, 4vw, 2.25rem);
}

.front-head-tail-result-stage {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 150px;
    perspective: 700px;
}

.front-head-tail-result-coin {
    align-items: center;
    animation: front-head-tail-toss 1s cubic-bezier(.2, .75, .25, 1) both;
    background: radial-gradient(circle at 35% 28%, #fff4b0 0%, #edc54f 42%, #b97b09 100%);
    border: 7px double #fff2ad;
    border-radius: 50%;
    box-shadow: 0 .7rem 1.4rem rgba(124, 83, 5, .25), inset 0 0 0 3px rgba(105, 75, 8, .24);
    color: #674807;
    display: flex;
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 800;
    height: clamp(112px, 16vw, 148px);
    justify-content: center;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
    width: clamp(112px, 16vw, 148px);
}

.front-head-tail-result-copy {
    min-width: 0;
}

.front-head-tail-result-summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.front-head-tail-result-summary > div {
    background: rgba(255, 255, 255, .82);
    border: 1px solid #dce5ea;
    border-radius: .7rem;
    padding: .75rem .9rem;
}

.front-head-tail-result-summary dt {
    color: #64727c;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.front-head-tail-result-summary dd {
    font-size: 1.15rem;
    font-weight: 700;
    margin: .2rem 0 0;
}

.front-coupon-intro {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.front-coupon-intro > div {
    flex: 1 1 auto;
    min-width: 0;
}

.front-coupon-intro-icon {
    align-items: center;
    background: rgba(13, 110, 253, .12);
    border-radius: 50%;
    color: var(--bs-primary);
    display: inline-flex;
    flex: 0 0 2.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    height: 2.5rem;
    justify-content: center;
}

@keyframes front-head-tail-toss {
    0% { opacity: .2; transform: translateY(-2.2rem) rotateY(0deg) scale(.72); }
    70% { opacity: 1; transform: translateY(.35rem) rotateY(900deg) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) rotateY(1080deg) scale(1); }
}

.front-vault-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(1.5rem, 5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: .45em;
    max-width: 480px;
    padding-left: calc(.75rem + .45em);
}

.front-hash {
    display: inline-block;
    max-width: 18rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.front-send-summary {
    background: #f7fafc;
    border: 1px solid #e1e7ec;
    border-radius: .75rem;
    display: grid;
    gap: .4rem 1rem;
    grid-template-columns: 1fr auto;
    margin-top: 1rem;
    padding: .85rem 1rem;
}

.front-send-summary strong {
    text-align: right;
}

/* Membresías, puntos, calculadora y banners: equivalencia con las utilidades tradicionales. */
.front-growth-page {
    min-width: 0;
}

.front-growth-header {
    align-items: center;
    background: linear-gradient(135deg, #fff 0%, #eefbfc 100%);
    border: 1px solid rgba(0, 205, 199, .24);
    border-radius: .8rem;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.25rem;
}

.front-growth-header h1,
.front-growth-header h2 {
    color: var(--account-primary);
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    margin: .05rem 0 .25rem;
}

.front-growth-header p {
    color: var(--account-muted);
    margin: 0;
}

.front-growth-metrics,
.front-profit-results {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.front-growth-metrics article,
.front-profit-results article {
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: .8rem;
    box-shadow: 0 .3rem 1rem rgba(20, 60, 82, .06);
    min-width: 0;
    padding: 1rem;
}

.front-growth-metrics span,
.front-growth-metrics strong,
.front-profit-results span,
.front-profit-results strong,
.front-profit-results small {
    display: block;
}

.front-growth-metrics span,
.front-profit-results span {
    color: var(--account-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: .3rem;
    text-transform: uppercase;
}

.front-growth-metrics strong,
.front-profit-results strong {
    color: var(--account-primary);
    font-size: clamp(1rem, 2vw, 1.35rem);
    overflow-wrap: anywhere;
}

.front-profit-results {
    grid-template-columns: 1fr;
}

.front-profit-results article {
    border-left: 4px solid var(--bs-info);
}

.front-profit-results small {
    color: var(--account-muted);
    margin-top: .2rem;
}

.front-growth-comparison th:first-child {
    min-width: 210px;
}

.front-growth-comparison thead th {
    background: var(--account-primary);
    color: #fff;
    min-width: 145px;
    text-align: center;
}

.front-growth-comparison td {
    text-align: center;
}

.front-membership-choice.is-current {
    border-color: var(--bs-info);
}

.front-membership-price {
    color: var(--account-primary);
    display: block;
    font-size: 1.55rem;
    margin-bottom: .7rem;
}

.front-membership-price small {
    font-size: .72rem;
}

.front-growth-assumptions {
    background: #f7fafc;
    border: 1px solid var(--account-border);
    border-radius: .75rem;
    margin: 1rem 0 0;
    padding: .8rem 1rem;
}

.front-growth-assumptions > div {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.front-growth-assumptions > div + div {
    border-top: 1px solid var(--account-border);
    margin-top: .5rem;
    padding-top: .5rem;
}

.front-growth-assumptions dd {
    font-weight: 700;
    margin: 0;
    text-align: right;
}

.front-banner-identity {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.front-banner-identity label {
    color: var(--account-muted);
    font-size: .78rem;
    font-weight: 700;
}

.front-banner-preview {
    align-items: center;
    background: #f5f8fa;
    border: 1px dashed #cbd9df;
    border-radius: .65rem;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    min-height: 130px;
    overflow: hidden;
    padding: 1rem;
}

.front-banner-card textarea,
.front-banner-card input {
    font-size: .78rem;
}

@media (max-width: 991.98px) {
    .front-utility-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-growth-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .front-utility-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .front-utility-hero img {
        max-height: 135px;
        order: -1;
    }

    .front-utility-metrics {
        grid-template-columns: 1fr;
    }

    .front-head-tail-result > .card-body {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .front-head-tail-result-stage {
        min-height: 118px;
    }

    .front-head-tail-result-summary {
        text-align: left;
    }

    .front-coupon-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .front-coupon-intro-icon {
        align-self: center;
    }

    .front-coupon-intro .btn {
        width: 100%;
    }

    .front-growth-header {
        align-items: stretch;
        flex-direction: column;
    }

    .front-growth-header .btn,
    .front-growth-metrics article:last-child {
        width: 100%;
    }

    .front-growth-metrics {
        grid-template-columns: 1fr;
    }

    .front-banner-identity .input-group {
        align-items: stretch;
        flex-direction: column;
    }

    .front-banner-identity .input-group > .form-control,
    .front-banner-identity .input-group > .btn {
        border-radius: var(--bs-border-radius) !important;
        width: 100%;
    }

    .front-banner-identity .input-group > .btn {
        margin-top: .35rem;
    }

    .front-vault-code {
        letter-spacing: .25em;
        padding-left: calc(.75rem + .25em);
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-head-tail-result-coin {
        animation: none;
    }
}

.front-protection-page {
    --front-protection-ink: #102742;
    --front-protection-muted: #64748b;
}

.front-eyebrow {
    color: #0d6efd;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.front-protection-hero {
    background: linear-gradient(135deg, #fff 0%, #f4f8ff 100%);
    overflow: hidden;
}

.front-protection-icon {
    align-items: center;
    border-radius: 1rem;
    display: inline-flex;
    flex: 0 0 3.4rem;
    font-size: 1rem;
    font-weight: 800;
    height: 3.4rem;
    justify-content: center;
    letter-spacing: -.02em;
    width: 3.4rem;
}

.front-protection-metrics .card-body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.front-protection-metrics span {
    color: var(--front-protection-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.front-protection-metrics strong {
    color: var(--front-protection-ink);
    font-size: 1.12rem;
    line-height: 1.25;
}

.front-protection-steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    padding: 0;
}

.front-protection-steps li {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    min-width: 0;
}

.front-protection-steps li > span {
    align-items: center;
    background: #eaf2ff;
    border-radius: 50%;
    color: #0d6efd;
    display: inline-flex;
    flex: 0 0 2rem;
    font-size: .8rem;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
}

.front-protection-steps li.is-complete > span {
    background: #dff7e9;
    color: #14804a;
}

.front-protection-steps li.is-current > span {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .12);
}

.front-protection-steps strong,
.front-protection-steps small {
    display: block;
}

.front-protection-steps small {
    color: var(--front-protection-muted);
    margin-top: .15rem;
}

.front-progress-summary {
    background: #f5f8fc;
    border: 1px solid #e3eaf3;
    border-radius: .8rem;
    min-width: 9.5rem;
    padding: .7rem 1rem;
    text-align: center;
}

.front-progress-summary strong,
.front-progress-summary span {
    display: block;
}

.front-progress-summary strong {
    color: var(--front-protection-ink);
    font-size: 1.35rem;
}

.front-progress-summary span {
    color: var(--front-protection-muted);
    font-size: .72rem;
}

.front-document-card {
    border-top: .25rem solid #dce8f9 !important;
}

.front-alert-symbol {
    align-items: center;
    background: rgba(13, 110, 253, .12);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 1.8rem;
    font-weight: 800;
    height: 1.8rem;
    justify-content: center;
}

.front-totp-setup {
    align-items: center;
    display: flex;
    gap: 1.25rem;
}

.front-totp-qr {
    align-items: center;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 1rem;
    display: flex;
    flex: 0 0 226px;
    height: 226px;
    justify-content: center;
    padding: .5rem;
    width: 226px;
}

.front-totp-qr canvas,
.front-totp-qr img,
.front-totp-qr svg {
    height: 100% !important;
    max-width: 100%;
    width: 100% !important;
}

.min-w-0 {
    min-width: 0;
}

.front-protection-empty {
    align-items: center;
    background: #f7f9fc;
    border: 1px dashed #ccd8e7;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 1.25rem;
    min-height: 180px;
    padding: 1.5rem;
    text-align: center;
}

.front-vacation-package {
    background: linear-gradient(145deg, #fff, #f8fbff);
}

.front-vacation-activation {
    margin: 0 auto;
    max-width: 520px;
}

.front-product-calculator {
    border: 0;
    border-radius: 1rem;
    max-width: 290px;
    position: fixed;
    right: 1rem;
    top: 5.25rem;
    width: calc(100% - 2rem);
    z-index: 1025;
}

.front-product-calculator .card-header {
    border-bottom-color: #dce5f0;
    border-radius: 1rem 1rem 0 0;
    color: #32106d;
    padding: .9rem 1rem;
}

.front-product-calculator-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.front-product-calculator-field {
    color: #665b83;
    font-size: .75rem;
    min-width: 0;
}

.front-product-calculator-field-wide {
    grid-column: 1 / -1;
}

.front-product-calculator-field .form-control {
    color: #2e1769;
    font-size: .95rem;
    margin-top: .25rem;
    padding-inline: .65rem;
}

.front-product-calculator-field .form-control[readonly] {
    background: #eef1f5;
}

.front-history-nav {
    max-width: 100%;
    overflow: hidden;
}

.front-history-nav .nav {
    overflow-x: auto;
    width: 100%;
}

.front-history-nav .nav-link {
    border: 1px solid transparent;
}

.front-history-nav .nav-link:not(.active) {
    background: #fff;
    border-color: var(--account-border, #dfe5ec);
}

.front-history-agent {
    max-width: 28rem;
    min-width: 15rem;
    overflow-wrap: anywhere;
}

.front-contest-table {
    min-width: 640px;
}

.front-refacilpay-history-table td {
    overflow-wrap: anywhere;
}

.front-stat-summary {
    border-width: 0 0 0 .3rem !important;
}

.front-stat-chart {
    display: grid;
    gap: 1rem;
}

.front-stat-row {
    min-width: 0;
}

.front-stat-meter {
    appearance: none;
    background: #edf1f6;
    border: 0;
    border-radius: 999px;
    display: block;
    height: .65rem;
    margin: .35rem 0;
    overflow: hidden;
    width: 100%;
}

.front-stat-meter::-webkit-meter-bar {
    background: #edf1f6;
    border: 0;
    border-radius: 999px;
    height: .65rem;
}

.front-stat-meter.is-positive::-webkit-meter-optimum-value,
.front-stat-meter.is-positive::-webkit-meter-suboptimum-value,
.front-stat-meter.is-positive::-webkit-meter-even-less-good-value {
    background: #198754;
}

.front-stat-meter.is-negative::-webkit-meter-optimum-value,
.front-stat-meter.is-negative::-webkit-meter-suboptimum-value,
.front-stat-meter.is-negative::-webkit-meter-even-less-good-value {
    background: #dc3545;
}

.front-stat-meter.is-activity::-webkit-meter-optimum-value,
.front-stat-meter.is-activity::-webkit-meter-suboptimum-value,
.front-stat-meter.is-activity::-webkit-meter-even-less-good-value {
    background: linear-gradient(90deg, #5730a8, #8561d4);
}

.front-stat-meter::-moz-meter-bar {
    background: #198754;
    border-radius: 999px;
}

.front-stat-meter.is-negative::-moz-meter-bar {
    background: #dc3545;
}

.front-stat-meter.is-activity::-moz-meter-bar {
    background: #6f42c1;
}

@media (max-width: 575.98px) {
    .front-history-nav {
        margin-inline: -.25rem;
    }

    .front-history-nav .nav-pills {
        scroll-snap-type: x proximity;
    }

    .front-history-nav .nav-item {
        scroll-snap-align: start;
    }
}

@media (max-width: 767.98px) {
    .front-ptsu-history-table,
    .front-ptsu-history-table tbody,
    .front-ptsu-history-table tr,
    .front-ptsu-history-table td {
        display: block;
        width: 100%;
    }

    .front-ptsu-history-table thead { display: none; }
    .front-ptsu-history-table tr { padding: .85rem; border-bottom: 1px solid var(--account-border); }
    .front-ptsu-history-table td {
        display: grid;
        grid-template-columns: 7.25rem minmax(0, 1fr);
        gap: .65rem;
        padding: .4rem 0;
        border: 0;
        text-align: left !important;
    }
    .front-ptsu-history-table td::before { color: var(--account-muted); content: attr(data-label); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
    .front-ptsu-history-table td[colspan] { display: block; }
    .front-ptsu-history-table td[colspan]::before { content: none; }

    .front-clixgrid-intro,
    .front-clixgrid-advertise-intro { grid-template-columns: 1fr; gap: 1rem; }
    .front-clixgrid-intro img,
    .front-clixgrid-advertise-intro img { width: min(70%, 190px); }
    .front-clixgrid-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-clixgrid-summary article:nth-child(2) { border-right: 0; }
    .front-clixgrid-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--account-border); }

    .front-clixgrid-ads-table,
    .front-clixgrid-ads-table tbody,
    .front-clixgrid-ads-table tr,
    .front-clixgrid-ads-table td {
        display: block;
        width: 100%;
    }

    .front-clixgrid-ads-table thead { display: none; }
    .front-clixgrid-ads-table tr { padding: .85rem; border-bottom: 1px solid var(--account-border); }
    .front-clixgrid-ads-table td {
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: .65rem;
        padding: .4rem 0;
        border: 0;
        text-align: left !important;
    }
    .front-clixgrid-ads-table td::before { color: var(--account-muted); content: attr(data-label); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
    .front-clixgrid-ads-table td[colspan] { display: block; }
    .front-clixgrid-ads-table td[colspan]::before { content: none; }

    .front-refacilpay-history-table,
    .front-refacilpay-history-table tbody,
    .front-refacilpay-history-table tr,
    .front-refacilpay-history-table td {
        display: block;
        width: 100%;
    }

    .front-refacilpay-history-table thead {
        display: none;
    }

    .front-refacilpay-history-table tr {
        padding: .75rem;
        border-bottom: 1px solid var(--account-border);
    }

    .front-refacilpay-history-table td {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: .65rem;
        padding: .45rem 0;
        border: 0;
        text-align: left !important;
    }

    .front-refacilpay-history-table td::before {
        color: var(--account-muted);
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .front-refacilpay-history-table td[colspan] {
        display: block;
    }

    .front-refacilpay-history-table td[colspan]::before {
        content: none;
    }

    .front-protection-steps {
        grid-template-columns: 1fr;
    }

    .front-totp-setup {
        align-items: stretch;
        flex-direction: column;
    }

    .front-totp-qr {
        align-self: center;
        flex-basis: 210px;
        height: 210px;
        width: 210px;
    }

    .front-protection-page .table-responsive table {
        min-width: 720px;
    }
}

.front-raffle-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.front-raffle-heading > div:first-child { align-items: center; display: flex; gap: 1rem; }
.front-raffle-icon { height: 64px; object-fit: contain; width: 64px; }
.front-raffle-card .card-img-top { aspect-ratio: 16 / 8; object-fit: cover; }
.front-raffle-schedule ul { columns: 2; gap: 2rem; }

@media (max-width: 767.98px) {
    .front-raffle-heading,
    .front-raffle-heading > div:first-child { align-items: flex-start; flex-direction: column; }
    .front-raffle-heading > .d-flex { width: 100%; }
    .front-raffle-heading > .d-flex .btn { flex: 1 1 auto; }
    .front-raffle-schedule ul { columns: 1; }
    .front-raffle-table,
    .front-raffle-table tbody,
    .front-raffle-table tr,
    .front-raffle-table td { display: block; width: 100%; }
    .front-raffle-table thead { display: none; }
    .front-raffle-table tr { border-bottom: 1px solid var(--account-border, #dee2e6); padding: .85rem; }
    .front-raffle-table td {
        align-items: flex-start;
        border: 0;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: .38rem 0;
        text-align: right;
    }
    .front-raffle-table td::before {
        color: var(--account-muted, #6c757d);
        content: attr(data-label);
        flex: 0 0 6.5rem;
        font-size: .7rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }
    .front-raffle-table td[colspan] { display: block; text-align: center; }
    .front-raffle-table td[colspan]::before { content: none; }
}

.front-url-shortener-page {
    --shortener-soft: #eef8ff;
    --shortener-line: #cfe5f3;
}

.front-url-shortener-intro {
    align-items: center;
    background: linear-gradient(135deg, var(--shortener-soft), #fff 68%);
    border: 1px solid var(--shortener-line);
    border-radius: 1rem;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.front-url-shortener-intro h1 { margin: .2rem 0 .55rem; }
.front-url-shortener-intro p { color: var(--account-muted, #6c757d); margin: 0; max-width: 52rem; }

.front-url-shortener-rate {
    background: #fff;
    border: 1px solid var(--shortener-line);
    border-radius: .8rem;
    box-shadow: 0 .35rem 1rem rgba(33, 33, 79, .08);
    flex: 0 0 15rem;
    padding: 1rem 1.15rem;
    text-align: right;
}

.front-url-shortener-rate span,
.front-url-shortener-rate small { color: var(--account-muted, #6c757d); display: block; }
.front-url-shortener-rate strong { color: var(--colpay-primary); display: block; font-size: 1.35rem; margin: .15rem 0; }
.front-url-shortener-policy { line-height: 1.55; }
.front-url-shortener-steps { display: grid; gap: .7rem; margin: 1rem 0; padding-left: 1.25rem; }

.front-url-shortener-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.front-url-shortener-summary article {
    background: #fff;
    border: 1px solid var(--shortener-line);
    border-radius: .8rem;
    display: grid;
    padding: 1rem;
}

.front-url-shortener-summary span,
.front-url-shortener-summary small { color: var(--account-muted, #6c757d); }
.front-url-shortener-summary strong { color: var(--colpay-primary); font-size: 1.65rem; line-height: 1.2; }

@media (max-width: 767.98px) {
    .front-url-shortener-intro { align-items: stretch; flex-direction: column; }
    .front-url-shortener-rate { flex-basis: auto; text-align: left; }
    .front-url-shortener-summary { grid-template-columns: 1fr; }
    .front-url-shortener-table,
    .front-url-shortener-table tbody,
    .front-url-shortener-table tr,
    .front-url-shortener-table td,
    .front-url-shortener-rates,
    .front-url-shortener-rates tbody,
    .front-url-shortener-rates tr,
    .front-url-shortener-rates td { display: block; width: 100%; }
    .front-url-shortener-table thead,
    .front-url-shortener-rates thead { display: none; }
    .front-url-shortener-table tr,
    .front-url-shortener-rates tr { border-bottom: 1px solid var(--shortener-line); padding: .85rem; }
    .front-url-shortener-table td,
    .front-url-shortener-rates td {
        align-items: flex-start;
        border: 0;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: .38rem 0;
        text-align: right !important;
    }
    .front-url-shortener-table td::before,
    .front-url-shortener-rates td::before {
        color: var(--account-muted, #6c757d);
        content: attr(data-label);
        flex: 0 0 7.25rem;
        font-size: .7rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }
    .front-url-shortener-table td:first-child { display: block; text-align: left !important; }
    .front-url-shortener-table td:first-child::before { display: block; margin-bottom: .35rem; }
    .front-url-shortener-table td:last-child > div { justify-content: flex-end; }
    .front-url-shortener-table td[colspan],
    .front-url-shortener-rates td[colspan] { display: block; text-align: center !important; }
    .front-url-shortener-table td[colspan]::before,
    .front-url-shortener-rates td[colspan]::before { content: none; }
}

.front-offerwall-publisher {
    --offerwall-line: #dbe4ef;
}

.front-offerwall-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.front-offerwall-summary article {
    background: #fff;
    border: 1px solid var(--offerwall-line);
    border-radius: .85rem;
    display: grid;
    padding: 1rem;
}

.front-offerwall-summary span,
.front-offerwall-summary small { color: var(--account-muted, #6c757d); }
.front-offerwall-summary strong { color: var(--colpay-primary); font-size: 1.65rem; line-height: 1.2; }

.front-document-guide ul,
.front-document-guide ol { padding-left: 1.2rem; }
.front-document-guide li + li { margin-top: .35rem; }
.front-document-summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.front-document-summary article {
    background: var(--account-surface, #fff);
    border: 1px solid var(--account-border, #dee2e6);
    border-radius: .75rem;
    display: grid;
    gap: .2rem;
    padding: .85rem 1rem;
}
.front-document-summary span { color: var(--account-muted, #6c757d); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.front-document-summary strong { color: var(--colpay-primary); font-size: 1.6rem; line-height: 1.2; }
.front-document-list { display: grid; gap: 1rem; }
.front-document-card {
    border: 1px solid var(--account-border, #dee2e6);
    border-radius: .8rem;
    display: grid;
    gap: .85rem;
    padding: 1rem;
}
.front-document-card[data-document-status="rejected"] { border-color: rgba(220, 53, 69, .45); }
.front-document-card[data-document-status="approved"] { border-color: rgba(25, 135, 84, .35); }
.front-document-file {
    align-items: center;
    background: var(--account-surface-muted, #f8f9fa);
    border-radius: .55rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .7rem .8rem;
}
.front-document-file div { min-width: 0; }
.front-document-file strong { display: block; overflow-wrap: anywhere; }
.front-document-file small { color: var(--account-muted, #6c757d); display: block; }
.front-payment-summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.front-payment-summary article {
    background: var(--account-surface, #fff);
    border: 1px solid var(--account-border, #dee2e6);
    border-radius: .75rem;
    display: grid;
    gap: .2rem;
    padding: .85rem 1rem;
}
.front-payment-summary span { color: var(--account-muted, #6c757d); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.front-payment-summary strong { color: var(--colpay-primary); font-size: 1.6rem; line-height: 1.2; }
.front-payment-account-list { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.front-payment-account {
    border: 1px solid var(--account-border, #dee2e6);
    border-radius: .75rem;
    display: grid;
    gap: .85rem;
    padding: 1rem;
}
.front-payment-account[data-account-status="verified"] { border-color: rgba(25, 135, 84, .35); }
.front-payment-account[data-account-status="pending"] { border-color: rgba(255, 193, 7, .55); }
.front-checkout-progress {
    accent-color: var(--bs-primary);
    border: 0;
    border-radius: 999px;
    color: var(--bs-primary);
    display: block;
    height: .65rem;
    overflow: hidden;
    width: 100%;
}
.front-checkout-progress::-webkit-progress-bar { background: var(--bs-secondary-bg); border-radius: 999px; }
.front-checkout-progress::-webkit-progress-value,
.front-checkout-progress::-moz-progress-bar { background: var(--bs-primary); border-radius: 999px; }
.front-qr-placeholder { align-content: center; display: grid; height: 180px; width: 180px; }
.front-deposit-qr { max-width: 220px; }

/* Contenido público: estructura editorial de FAQ, noticias y páginas tradicionales. */
.front-public-content { background: #f7f8fc; }
.front-public-content-hero {
    align-items: center;
    background: linear-gradient(135deg, #fff 0%, #eefcfb 100%);
    border: 1px solid rgba(0, 205, 199, .25);
    border-radius: 1rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    overflow: hidden;
    padding: 2rem clamp(1.25rem, 4vw, 3rem);
}
.front-public-content-hero h1 { color: var(--colpay-primary); font-weight: 800; }
.front-public-content-hero p { color: #55576d; max-width: 760px; }
.front-public-content-hero img { justify-self: center; max-height: 230px; max-width: 100%; }
.front-public-account-return {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 0 1.5rem;
}
.front-public-account-return > a,
.front-public-shortcuts a,
.front-news-back { color: var(--colpay-primary); font-weight: 700; }
.front-public-shortcuts { gap: .75rem; }
.front-faq-index {
    background: #fff;
    border: 1px solid rgba(0, 205, 199, .35);
    border-radius: .85rem;
    box-shadow: 0 6px 18px rgba(33, 33, 79, .07);
    max-width: 900px;
    padding: 1.25rem 1.5rem;
}
.front-faq-index h2 { color: var(--colpay-primary); font-weight: 800; }
.front-faq-index ol { margin: 0; padding-left: 1.35rem; }
.front-faq-index li + li { margin-top: .4rem; }
.front-faq-index a { color: #008eaa; font-weight: 650; }
.front-faq-list { display: grid; gap: 1.5rem; }
.front-faq-card { border: 0; scroll-margin-top: 1rem; }
.front-faq-card .card-header { background: var(--colpay-primary); color: #fff; padding: 1rem 1.25rem; }
.front-faq-card .card-header span { color: var(--colpay-accent); font-size: 1.3em; }
.front-news-card { border: 0; overflow: hidden; }
.front-news-card .card-header { background: #eefcfb; border-bottom: 0; color: #596076; font-size: .78rem; font-weight: 700; }
.front-news-card h2 a { color: var(--colpay-primary); text-decoration: none; }
.front-news-card h2 a:hover { text-decoration: underline; }
.front-news-card .card-body p { color: #55576d; }
.front-news-detail { border: 0; }

@media (max-width: 767.98px) {
    .front-public-content-hero { gap: 1rem; grid-template-columns: 1fr; padding: 1.25rem; }
    .front-public-content-hero img { max-height: 170px; }
    .front-public-account-return { align-items: flex-start; flex-direction: column; gap: .65rem; }
    .front-public-shortcuts { display: flex !important; flex-wrap: wrap; }
    .front-faq-index { padding: 1rem 1.15rem; }
}

/* Estados públicos tradicionales: errores, restricción, mantenimiento y registro completado. */
.front-exception-page {
    background: radial-gradient(circle at top right, rgba(0, 205, 199, .15), transparent 36%), #f7f8fc;
    min-height: 64vh;
}
.front-exception-card {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(33, 33, 79, .12);
    border-radius: 1rem;
    box-shadow: 0 12px 35px rgba(33, 33, 79, .1);
    display: grid;
    gap: clamp(1.25rem, 4vw, 3.5rem);
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
    margin: 0 auto;
    max-width: 1040px;
    overflow: hidden;
    padding: clamp(1.25rem, 4vw, 3rem);
}
.front-exception-illustration { align-items: center; display: flex; justify-content: center; }
.front-exception-illustration img { max-height: 310px; max-width: 100%; }
.front-exception-copy h1 { color: var(--colpay-primary); font-size: clamp(1.85rem, 4vw, 2.8rem); font-weight: 800; margin: .55rem 0 1rem; }
.front-exception-copy .lead { color: #45485d; }
.front-exception-code,
.front-auth-kicker { color: #068985; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.front-exception-help { color: #65697c; }
.front-exception-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.front-exception-facts { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.25rem 0; }
.front-exception-facts > div { background: #f4f6fa; border-radius: .65rem; padding: .75rem 1rem; }
.front-exception-facts dt { color: #74778a; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.front-exception-facts dd { color: var(--colpay-primary); font-weight: 700; margin: .2rem 0 0; }
.front-registration-complete { max-width: 1040px; }
.front-registration-complete-visual { align-items: center; background: linear-gradient(145deg, #eefcfb, #f5f5ff); display: flex; justify-content: center; min-height: 390px; padding: 2rem; }
.front-registration-complete-visual img { max-height: 310px; max-width: 100%; }
.front-registration-next { background: #f6f8fb; border-left: 4px solid var(--colpay-accent); border-radius: .4rem; margin-top: 1.5rem; padding: 1rem 1.15rem; }
.front-registration-next ol { margin-bottom: 0; padding-left: 1.25rem; }
.front-registration-next li + li { margin-top: .45rem; }
.auth-flow-card { max-width: 1000px; }
.auth-flow-visual {
    align-items: center;
    background: linear-gradient(145deg, #f4fbfb, #f5f5ff);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}
.auth-flow-visual img { margin-bottom: 1.25rem; max-height: 285px; max-width: 100%; }
.auth-flow-visual p { color: #62667a; margin: 0; max-width: 300px; }
.auth-flow-progress { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 1.25rem 0; padding: 0; }
.auth-flow-progress li { align-items: center; background: #f2f4f8; border-radius: .55rem; color: #6b6e80; display: flex; font-size: .82rem; font-weight: 700; gap: .5rem; padding: .65rem .75rem; }
.auth-flow-progress li span { align-items: center; background: #d8dbe4; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 24px; height: 24px; justify-content: center; }
.auth-flow-progress li.active { background: rgba(0, 205, 199, .11); color: #087c78; }
.auth-flow-progress li.active span { background: var(--colpay-accent); }
.auth-flow-progress li.complete { color: #198754; }
.auth-flow-progress li.complete span { background: #198754; }

@media (max-width: 767.98px) {
    .front-exception-card { grid-template-columns: 1fr; text-align: center; }
    .front-exception-illustration img { max-height: 190px; }
    .front-exception-actions { justify-content: center; }
    .front-exception-facts { grid-template-columns: 1fr; text-align: left; }
    .maintenance-shell { padding: .75rem; }
    .maintenance-brand { align-items: flex-start; flex-direction: column; gap: .65rem; padding: 1rem; }
    .maintenance-content { padding: 1.15rem; }
    .maintenance-illustration { max-height: 190px; }
    .front-registration-complete-visual { min-height: 230px; }
    .front-registration-complete-visual img { max-height: 200px; }
    .auth-flow-visual { border-top: 1px solid #e7e9f0; padding: 1.5rem; }
    .auth-flow-visual img { max-height: 175px; }
}

@media (max-width: 767.98px) {
    .front-payment-summary,
    .front-payment-account-list { grid-template-columns: 1fr; }
    .front-document-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front-document-file { align-items: stretch; flex-direction: column; }
    .front-document-file .btn { align-self: flex-start; }
    .front-offerwall-summary { grid-template-columns: 1fr; }
    .front-offerwall-table,
    .front-offerwall-table tbody,
    .front-offerwall-table tr,
    .front-offerwall-table td { display: block; width: 100%; }
    .front-offerwall-table thead { display: none; }
    .front-offerwall-table tr { border-bottom: 1px solid var(--offerwall-line); padding: .85rem; }
    .front-offerwall-table td {
        align-items: flex-start;
        border: 0;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: .4rem 0;
        text-align: right !important;
    }
    .front-offerwall-table td::before {
        color: var(--account-muted, #6c757d);
        content: attr(data-label);
        flex: 0 0 7.5rem;
        font-size: .7rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }
    .front-offerwall-table td:first-child { display: block; text-align: left !important; }
    .front-offerwall-table td:first-child::before { display: block; margin-bottom: .35rem; }
    .front-offerwall-table td:last-child > div { justify-content: flex-end; }
    .front-offerwall-table td[colspan] { display: block; text-align: center !important; }
    .front-offerwall-table td[colspan]::before { content: none; }
}

.front-profile-request {
    --profile-request-ink: #17243d;
    --profile-request-muted: #65728a;
    --profile-request-line: #dde4ef;
    --profile-request-primary: #2457d6;
    color: var(--profile-request-ink);
}

.front-profile-request__header {
    align-items: flex-end;
    background: linear-gradient(135deg, #f3f7ff 0%, #fff 62%, #effcfb 100%);
    border: 1px solid #dce7fa;
    border-radius: 1.15rem;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2rem);
    position: relative;
}

.front-profile-request__header::after {
    background: rgba(36, 87, 214, .08);
    border-radius: 999px;
    content: '';
    height: 9rem;
    pointer-events: none;
    position: absolute;
    right: -3rem;
    top: -5rem;
    width: 9rem;
}

.front-profile-request__header > * { position: relative; z-index: 1; }
.front-profile-request__header h1 { font-size: clamp(1.65rem, 3vw, 2.35rem); margin: .2rem 0 .45rem; }
.front-profile-request__header p { color: var(--profile-request-muted); margin: 0; max-width: 46rem; }
.front-profile-request__header .btn { flex: 0 0 auto; }

.front-profile-request__metrics {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.front-profile-request__metrics article {
    background: #fff;
    border: 1px solid var(--profile-request-line);
    border-radius: .85rem;
    box-shadow: 0 .3rem 1rem rgba(22, 40, 74, .05);
    min-width: 0;
    padding: 1rem 1.1rem;
}

.front-profile-request__metrics span,
.front-profile-request__metrics strong { display: block; }
.front-profile-request__metrics span { color: var(--profile-request-muted); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.front-profile-request__metrics strong { font-size: 1.05rem; margin-top: .2rem; overflow-wrap: anywhere; }

.front-profile-request__progress {
    background: #fff;
    border: 1px solid var(--profile-request-line);
    border-radius: 1rem;
    margin-bottom: 1rem;
    padding: 1.15rem;
}

.front-profile-request__progress-copy { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; }
.front-profile-request__progress-copy span { color: var(--profile-request-muted); font-size: .85rem; }
.front-profile-request__progress-bar { accent-color: var(--profile-request-primary); border: 0; display: block; height: .55rem; margin: .7rem 0 1.1rem; width: 100%; }
.front-profile-request__progress-bar::-webkit-progress-bar { background: #e9ecef; border-radius: 999px; }
.front-profile-request__progress-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--profile-request-primary), #00aaa4); border-radius: 999px; }
.front-profile-request__progress-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--profile-request-primary), #00aaa4); border-radius: 999px; }

.front-profile-request__steps {
    counter-reset: profile-step;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.front-profile-request__steps::before {
    background: var(--profile-request-line);
    content: '';
    height: 2px;
    left: 16.67%;
    position: absolute;
    right: 16.67%;
    top: 1rem;
}

.front-profile-request__steps li { align-items: center; display: flex; flex-direction: column; gap: .4rem; min-width: 0; position: relative; text-align: center; }
.front-profile-request__steps li > span {
    align-items: center;
    background: #eef1f6;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--profile-request-line);
    color: var(--profile-request-muted);
    display: inline-flex;
    font-size: .8rem;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
    width: 2rem;
    z-index: 1;
}

.front-profile-request__steps li.is-complete > span,
.front-profile-request__steps li.is-current > span { background: var(--profile-request-primary); box-shadow: 0 0 0 1px var(--profile-request-primary); color: #fff; }
.front-profile-request__steps strong,
.front-profile-request__steps small { display: block; }
.front-profile-request__steps strong { font-size: .85rem; }
.front-profile-request__steps small { color: var(--profile-request-muted); font-size: .74rem; }

.front-profile-request__state { align-items: center; display: flex; gap: 1rem; margin-bottom: 1rem; }
.front-profile-request__state h2 { margin-bottom: .2rem; }
.front-profile-request__state-icon { align-items: center; background: rgba(255, 255, 255, .7); border-radius: 50%; display: inline-flex; flex: 0 0 2.6rem; font-size: 1.25rem; height: 2.6rem; justify-content: center; }
.front-profile-request__guide { border-color: var(--profile-request-line); border-radius: 1rem; margin-bottom: 1rem; }
.front-profile-request__guide ul { color: var(--profile-request-muted); margin-bottom: .75rem; padding-left: 1.2rem; }
.front-profile-request__guide li + li { margin-top: .35rem; }

.front-profile-request__section-heading { align-items: flex-end; display: flex; gap: 1rem; justify-content: space-between; margin: 1.5rem 0 .8rem; }
.front-profile-request__section-heading h2 { font-size: 1.25rem; margin: .15rem 0 0; }
.front-profile-request__section-heading > span { color: var(--profile-request-muted); font-size: .85rem; }
.front-profile-request__requirements { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.front-profile-requirement {
    background: #fff;
    border: 1px solid var(--profile-request-line);
    border-left: .3rem solid #9aa5b7;
    border-radius: .9rem;
    min-width: 0;
    overflow: hidden;
}

.front-profile-requirement.is-approved { border-left-color: #198754; }
.front-profile-requirement.is-pending { border-left-color: #0d6efd; }
.front-profile-requirement.is-rejected { border-left-color: #dc3545; }
.front-profile-requirement header { align-items: center; display: grid; gap: .75rem; grid-template-columns: auto minmax(0, 1fr) auto; padding: 1rem; }
.front-profile-requirement header h3 { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.front-profile-requirement header div > span { color: var(--profile-request-muted); font-size: .72rem; }
.front-profile-requirement__icon { align-items: center; background: #eef3ff; border-radius: .7rem; color: var(--profile-request-primary); display: inline-flex; font-size: .85rem; font-weight: 800; height: 2.35rem; justify-content: center; width: 2.35rem; }
.front-profile-requirement__status { background: #eef1f6; border-radius: 999px; color: #566174; font-size: .72rem; font-weight: 800; padding: .28rem .55rem; white-space: nowrap; }
.is-approved .front-profile-requirement__status { background: #dff5e8; color: #12643b; }
.is-pending .front-profile-requirement__status { background: #e4efff; color: #164f9c; }
.is-rejected .front-profile-requirement__status { background: #fde7ea; color: #9f2531; }
.front-profile-requirement__field,
.front-profile-requirement__readonly { border-top: 1px solid var(--profile-request-line); padding: 1rem; }
.front-profile-requirement__readonly { color: var(--profile-request-muted); display: flex; flex-direction: column; gap: .65rem; }
.front-profile-requirement__readonly p { margin: 0; }
.front-profile-requirement__file,
.front-profile-requirement__value { background: #f7f9fc; border-radius: .45rem; color: var(--profile-request-ink); overflow-wrap: anywhere; padding: .55rem .7rem; }
.front-profile-requirement__readonly .btn { align-self: flex-start; }
.front-profile-requirement__reason { background: #fff1f2; border-radius: .55rem; color: #842029; font-size: .85rem; margin-top: .75rem; padding: .7rem; }
.front-profile-request__submit { align-items: center; background: #f3f7ff; border: 1px solid #dce7fa; border-radius: .9rem; display: flex; gap: 1rem; justify-content: space-between; margin-top: 1rem; padding: 1rem; }
.front-profile-request__submit strong,
.front-profile-request__submit span { display: block; }
.front-profile-request__submit span { color: var(--profile-request-muted); font-size: .82rem; margin-top: .2rem; }
.front-profile-request__submit .btn { flex: 0 0 auto; }

@media (max-width: 767.98px) {
    .front-profile-request__header,
    .front-profile-request__submit { align-items: stretch; flex-direction: column; }
    .front-profile-request__header .btn,
    .front-profile-request__submit .btn { width: 100%; }
    .front-profile-request__metrics,
    .front-profile-request__steps,
    .front-profile-request__requirements { grid-template-columns: 1fr; }
    .front-profile-request__steps::before { display: none; }
    .front-profile-request__steps li { align-items: center; flex-direction: row; text-align: left; }
    .front-profile-requirement header { grid-template-columns: auto minmax(0, 1fr); }
    .front-profile-requirement__status { grid-column: 2; justify-self: start; }
}

@media (min-width: 1400px) {
    .front-product-calculator {
        right: max(1rem, calc((100vw - 1320px) / 2));
    }
}

.front-barcode-input-group [data-barcode-open] {
    min-width: 7.5rem;
    font-weight: 700;
}

.front-barcode-usb-feedback {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .8rem;
    color: #26374b;
    background: #f7f9fc;
    border: 1px solid #dce4ed;
    border-radius: .65rem;
}

.front-barcode-usb-feedback[hidden] {
    display: none !important;
}

.front-barcode-usb-feedback > i {
    flex: 0 0 auto;
    color: var(--bs-primary);
    font-size: 1.25rem;
}

.front-barcode-usb-feedback span,
.front-barcode-usb-feedback small {
    display: block;
}

.front-barcode-usb-feedback[data-barcode-state="success"] {
    color: #135c38;
    background: #edf9f2;
    border-color: #a9ddbf;
}

.front-barcode-usb-feedback[data-barcode-state="success"] > i {
    color: #198754;
}

.front-barcode-scanner .modal-dialog {
    max-width: 760px;
}

.front-service-commission-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem;
    font-size: .82rem;
}

.front-service-commission-alert > i {
    flex: 0 0 auto;
    font-size: 1.15rem;
}

.front-service-commission-alert p {
    margin: .15rem 0 .25rem;
}

.front-service-commission-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--front-border, #dfe5ec);
}

.front-service-commission-facts > div:last-child {
    border-bottom: 0;
}

.front-service-commission-facts dt {
    color: #64748b;
    font-size: .82rem;
    font-weight: 500;
}

.front-service-commission-facts dd {
    margin: 0;
    color: #0f172a;
    font-size: .82rem;
    font-weight: 700;
    text-align: right;
}

.front-service-commission-facts.is-unavailable > .front-service-commission-rate {
    opacity: .55;
}

.front-barcode-scanner .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 1.1rem;
    box-shadow: 0 1.5rem 4rem rgba(7, 25, 54, .28);
}

.front-barcode-viewport {
    position: relative;
    display: grid;
    min-height: 320px;
    overflow: hidden;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: .9rem;
    background: radial-gradient(circle at 50% 45%, #273a4f 0, #111b28 58%, #080d14 100%);
    isolation: isolate;
}

.front-barcode-viewport > video,
.front-barcode-viewport > canvas,
.front-barcode-viewport > .viewport,
.front-barcode-viewport > .viewport video,
.front-barcode-viewport > .viewport canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.front-barcode-viewport canvas.drawingBuffer {
    display: none;
}

.front-barcode-guide {
    position: relative;
    z-index: 3;
    width: min(82%, 590px);
    height: 42%;
    border: 3px solid rgba(255, 255, 255, .94);
    border-radius: .75rem;
    box-shadow: 0 0 0 999px rgba(5, 12, 22, .48), 0 0 0 1px rgba(14, 127, 227, .9) inset;
    pointer-events: none;
}

.front-barcode-guide span {
    position: absolute;
    right: 5%;
    left: 5%;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: #46dcff;
    box-shadow: 0 0 .75rem rgba(70, 220, 255, .9);
    animation: front-barcode-sweep 1.5s ease-in-out infinite alternate;
}

.front-barcode-instruction {
    position: absolute;
    z-index: 4;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    margin: 0;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 4px #000;
}

.front-barcode-status {
    min-height: 3.15rem;
}

.front-barcode-actions {
    justify-content: center;
    gap: .5rem;
}

.front-barcode-actions .btn {
    min-width: 9.5rem;
}

.front-barcode-actions [data-barcode-torch].active {
    color: #12161a;
    background: #ffc107;
    border-color: #ffc107;
}

body.front-barcode-scanner-open .account-mobile-dock {
    display: none !important;
}

@keyframes front-barcode-sweep {
    from { transform: translateY(-3.2rem); opacity: .55; }
    to { transform: translateY(3.2rem); opacity: 1; }
}

@media (max-width: 575.98px) {
    .front-barcode-usb-feedback {
        display: none !important;
    }

    .front-barcode-scanner .modal-content {
        min-height: 100%;
        border-radius: 0;
    }

    .front-barcode-scanner .modal-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding: .75rem;
    }

    .front-barcode-viewport {
        flex: 1 1 auto;
        min-height: 45vh;
        aspect-ratio: auto;
        border-radius: .75rem;
    }

    .front-barcode-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .front-barcode-actions .btn {
        min-width: 0;
    }

    .front-barcode-actions [data-barcode-camera] {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-barcode-guide span { animation: none; }
}

@media print {
    .account-topbar,
    .account-balance-card,
    .account-quick-actions,
    .account-sidebar-column,
    .account-mobile-dock,
    .account-footer,
    .front-module-header,
    .front-product-calculator,
    .front-barcode-scanner,
    .d-print-none {
        display: none !important;
    }

    .account-shell,
    .account-content-column {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #container-custom {
        display: block;
        margin: 0 !important;
    }

    .front-sale-receipt {
        max-width: none;
        border: 0;
        box-shadow: none !important;
    }
}
.front-service-bank-options{display:grid;gap:.75rem}.front-service-bank-option{margin:0;padding:0}.front-service-bank-option .form-check-input{position:absolute;opacity:0;pointer-events:none}.front-service-bank-option .form-check-label{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1rem 1.1rem;border:1px solid var(--bs-border-color);border-radius:.85rem;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.front-service-bank-option .form-check-label span{color:var(--bs-secondary-color);font-size:.875rem}.front-service-bank-option .form-check-input:checked+.form-check-label{border-color:var(--bs-primary);background:var(--bs-primary-bg-subtle);box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.12)}.front-service-bank-option .form-check-input:checked+.form-check-label strong::before{content:'✓';display:inline-grid;width:1.35rem;height:1.35rem;margin-right:.5rem;color:#fff;background:var(--bs-primary);border-radius:50%;font-size:.8rem;place-items:center}.front-service-bank-option .form-check-input:focus-visible+.form-check-label{outline:3px solid rgba(var(--bs-primary-rgb),.28);outline-offset:2px}.front-service-bank-amount{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bs-border-color)}
.front-settings-title {
    margin-bottom: .75rem;
    color: var(--account-primary, #21214f);
    font-size: 1.5rem;
    font-weight: 700;
}

.front-traditional-settings .nav-pills {
    align-items: stretch;
}

.front-traditional-settings .nav-pills .nav-link {
    min-height: 37px;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
    white-space: nowrap;
}

.front-traditional-settings .nav-pills .nav-link.active {
    color: #fff;
    background: var(--account-primary, #21214f);
    border-color: var(--account-primary, #21214f) !important;
    font-weight: 600;
}

.front-traditional-settings .front-settings-mobile-tabs .dropdown-toggle {
    min-width: 9rem;
    text-align: left;
}

.front-traditional-settings .front-settings-mobile-tabs .dropdown-toggle::after {
    float: right;
    margin-top: .55rem;
}

.front-traditional-settings .settings-tab-content {
    min-height: 320px;
}

.front-settings-profile-pane {
    display: flex;
    min-height: 288px;
    justify-content: center;
}

.front-settings-profile-card {
    width: min(100%, 280px);
    padding: .1rem .25rem .75rem;
    text-align: center;
}

.front-settings-profile-preview {
    display: grid;
    width: 118px;
    height: 118px;
    margin: 0 auto .55rem;
    place-items: center;
}

.front-settings-profile-avatar,
.front-settings-profile-placeholder {
    display: grid;
    width: 118px;
    height: 118px;
    border: 1px solid #d9dee7;
    border-radius: 50%;
    background: #f5f6f8;
    object-fit: cover;
    place-items: center;
}

.front-settings-profile-placeholder {
    color: var(--account-primary, #21214f);
    font-size: 2rem;
    font-weight: 700;
}

.front-settings-profile-name {
    margin: 0 0 .15rem;
    color: var(--account-primary, #21214f);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.35;
}

.front-settings-profile-handle {
    color: #6c757d;
    font-size: .8125rem;
    font-style: italic;
}

.front-settings-profile-remove {
    margin-top: .8rem;
}

.front-settings-profile-remove .btn,
.front-settings-profile-change {
    min-height: 32px;
    border-radius: 3px;
    font-size: .8125rem;
    font-weight: 600;
}

.front-settings-profile-username {
    margin: .85rem auto .8rem;
}

.front-settings-profile-username .form-label {
    display: block;
    margin-bottom: .45rem;
    color: #111;
    font-size: .8125rem;
    font-weight: 700;
}

.front-settings-profile-username .form-control {
    min-height: 31px;
    border-color: #cbd2da;
    background: #e9ecef;
    color: #212529;
    font-size: .75rem;
    text-align: left;
}

.front-settings-avatar-selection {
    margin-top: .65rem;
}

.front-settings-payment-logo {
    width: 92px;
    justify-content: center;
    background: #fff;
}

.front-settings-payment-logo img {
    display: block;
    max-width: 74px;
    max-height: 30px;
    object-fit: contain;
}

.front-settings-personal-form #phone_extension_id {
    max-width: 180px;
}

.front-settings-personal-form .form-label {
    margin-bottom: .4rem;
}

.front-traditional-settings-nav .nav {
    align-items: stretch;
}

.front-traditional-settings-nav .nav-link {
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.front-traditional-settings-nav .nav-link.active {
    color: #fff;
}

.front-deposit-balance-button {
    width: 135px;
    height: 67px;
    border: 1px solid #aeb1b6;
    border-radius: 4px;
    background: linear-gradient(#fff, #f7f7f7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    font-size: 19px;
    font-weight: 800;
    line-height: .95;
}

.front-deposit-balance-button span,
.front-deposit-balance-button strong {
    display: block;
}

.front-deposit-balance-button span {
    color: #00a7d9;
}

.front-deposit-balance-button strong {
    color: #18163a;
}

@media (max-width: 767.98px) {
    .front-traditional-settings-nav .nav-link {
        flex: 1 1 calc(50% - .25rem);
        text-align: center;
    }
}

/* Bre-B: selector de experiencia y modales equivalentes al flujo tradicional. */
body.breb-modal-open {
    overflow: hidden;
}

.front-breb-hero-card {
    display: block;
    padding: 0;
    border: 0;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    box-shadow: 0 18px 40px rgba(14, 22, 56, .08);
}

.front-breb-hero-card .card-body {
    padding: 1.5rem;
}

.front-breb-hero-card .front-breb-steps {
    justify-content: center;
}

.breb-modal .modal-content {
    border: 0;
    border-radius: 24px;
    padding: .25rem .5rem 1.5rem;
    background: #fff;
}

.breb-modal .modal-header {
    border: 0;
    padding-bottom: 0;
}

.breb-modal .modal-title,
.breb-modal label {
    color: #0369a1;
    font-weight: 700;
}

.breb-modal .btn-primary {
    border-color: #0ea5e9;
    background-color: #0ea5e9;
    color: #fff;
}

.breb-modal .btn-primary:hover,
.breb-modal .btn-primary:focus {
    border-color: #0284c7;
    background-color: #0284c7;
}

.breb-modal .btn-outline-primary {
    border-color: #7dd3fc;
    background-color: #fff;
    color: #0369a1;
}

.breb-description-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
}

.breb-description-toggle .fa-chevron-down {
    transition: transform .2s ease;
}

.breb-description-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.breb-description-panel {
    max-height: 260px;
    overflow-y: auto;
    padding: .85rem 1rem;
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 16px;
    background: rgba(14, 165, 233, .06);
    color: #34566f;
}

.breb-experience-modal .modal-dialog {
    max-width: 560px;
}

.breb-experience-modal .modal-content {
    position: relative;
    min-height: 580px;
    overflow: hidden;
    padding: 1.35rem 1.55rem 2.75rem;
    border: 1px solid rgba(17, 24, 86, .08);
    border-radius: 28px;
    background:
        radial-gradient(130% 28% at 50% 112%, rgba(201, 255, 233, .72) 0%, rgba(232, 253, 246, .52) 44%, rgba(255, 255, 255, 0) 45%),
        radial-gradient(120% 26% at 26% 106%, rgba(223, 247, 255, .88) 0%, rgba(238, 251, 255, .72) 48%, rgba(255, 255, 255, 0) 49%),
        #fff;
    box-shadow: 0 28px 70px rgba(17, 24, 86, .16);
}

.breb-experience-modal .modal-header,
.breb-experience-modal .modal-body {
    position: relative;
    z-index: 1;
}

.breb-experience-modal .modal-header {
    align-items: flex-start;
    padding: 0 0 1.05rem;
}

.breb-experience-modal .modal-title {
    max-width: 330px;
    color: #090c49;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.12;
}

.breb-experience-modal .btn-close {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 7px 18px rgba(16, 24, 64, .12);
    opacity: .82;
}

.breb-experience-modal .modal-body {
    padding: 0;
}

.breb-experience-modal .breb-description-toggle {
    padding: .45rem .75rem;
    border-color: #67c9e6;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    color: #008bb5;
}

.breb-experience-modal .breb-description-panel {
    border-color: rgba(0, 175, 208, .18);
    background: rgba(239, 253, 255, .86);
    color: #5c6388;
}

.breb-option-list {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.breb-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 84px;
    gap: 1rem;
    padding: .78rem 1rem .78rem 1.05rem;
    border: 1px solid rgba(9, 12, 73, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 26px rgba(17, 24, 86, .07);
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: all .2s ease;
}

.breb-option:hover,
.breb-option:focus {
    border-color: rgba(0, 175, 208, .46);
    box-shadow: 0 14px 30px rgba(17, 24, 86, .1), 0 0 0 4px rgba(0, 175, 208, .08);
    color: inherit;
    transform: translateY(-1px);
}

.breb-option:disabled,
.breb-option[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .6;
    transform: none;
}

.breb-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 18px;
    background: #edf8ff;
    color: #168de4;
    font-size: 1.65rem;
}

.breb-option[data-breb-open="keys"] .breb-option-icon {
    background: #e9fbfb;
    color: #0fb2c5;
}

.breb-option[data-breb-open="send"] .breb-option-icon,
.breb-option[data-breb-open="pay-qr"] .breb-option-icon {
    background: #e9fff8;
    color: #00b88d;
}

a.breb-option .breb-option-icon {
    background: #f1f3ff;
    color: #1858d8;
}

.breb-option-copy {
    min-width: 0;
}

.breb-option-copy strong {
    display: block;
    color: #090c49;
    font-size: 1rem;
    font-weight: 800;
}

.breb-option-copy small {
    display: block;
    margin-top: .12rem;
    color: #697091;
    font-size: .86rem;
}

.breb-option > .fa-chevron-right {
    color: #00aeca;
    font-size: 1.35rem;
}

.breb-option-mobile-note {
    display: none;
}

.breb-option.is-desktop-only-disabled .breb-option-mobile-note {
    display: inline;
}

.breb-operation-modal .modal-content {
    overflow: hidden;
    padding: 0;
    box-shadow: 0 22px 58px rgba(17, 24, 86, .2);
}

.breb-operation-modal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(9, 12, 73, .08);
}

.breb-operation-modal .modal-body {
    padding: 1.35rem;
}

.breb-operation-modal .modal-footer {
    border-top-color: rgba(9, 12, 73, .08);
}

.breb-register-modal .modal-header {
    background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%) !important;
}

.breb-register-modal .modal-header .modal-title {
    color: #fff;
}

.breb-qr-reader-icon {
    display: grid;
    width: 96px;
    height: 96px;
    margin: .5rem auto 1rem;
    border-radius: 24px;
    background: linear-gradient(135deg, #e0f2fe, #e9fff8);
    color: #0369a1;
    font-size: 3rem;
    place-items: center;
}

@media (max-width: 576px) {
    .breb-modal .modal-dialog:not(.modal-fullscreen-sm-down) {
        margin: .75rem;
    }

    .breb-experience-modal .modal-content {
        min-height: auto;
        padding: 1.2rem 1.1rem 2.4rem;
        border-radius: 24px;
    }

    .breb-experience-modal .modal-title {
        max-width: 260px;
        font-size: 1.6rem;
    }

    .breb-experience-modal .breb-option {
        min-height: 78px;
        padding: .72rem .8rem;
    }

    .breb-experience-modal .breb-option-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 1.45rem;
    }
}