@import '_content/Chippio.Web.Components/Chippio.Web.Components.x5j1omcgyt.bundle.scp.css';

/* /Components/Layout/RegistrationLayout.razor.rz.scp.css */
.reg-root[b-tswgu9u63y] {
    display: flex;
    height: 100vh; /* fallback for browsers that do not support dvh */
    min-height: 100dvh;
    overflow: visible;
}

/* ── Left content area ── */
.reg-left[b-tswgu9u63y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
    min-width: 0;
}

.reg-header[b-tswgu9u63y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.reg-logo[b-tswgu9u63y] {
    height: 40px;
    width: auto;
}

/* Legacy RegformHeader: logo, "+" and the partner logo 16px apart. */
.reg-brand[b-tswgu9u63y] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reg-cobrand-separator[b-tswgu9u63y] {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #0F1A38;
}

.reg-cobrand-logo[b-tswgu9u63y] {
    height: 90px;
    width: auto;
    object-fit: contain;
}

.reg-clear[b-tswgu9u63y] {
    height: 40px;
    padding: 8px 20px;
    border: none;
    border-radius: 30px;
    background: #DF6437;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.reg-clear:hover[b-tswgu9u63y] {
    background: #EA774D;
}

.reg-clear:focus-visible[b-tswgu9u63y] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.reg-header-right[b-tswgu9u63y] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
}

.reg-logout[b-tswgu9u63y] {
    font-size: 0.875rem;
    color: #EA774D;
    text-decoration: none;
    font-weight: 500;
}

.reg-logout:hover[b-tswgu9u63y] {
    text-decoration: underline;
}

.reg-lang[b-tswgu9u63y] {
    font-size: 0.875rem;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.reg-body[b-tswgu9u63y] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Right tariff panel: "Midnight Fade", 503px; 390px on tablet-landscape ── */
.reg-right[b-tswgu9u63y] {
    width: 503px;
    background: linear-gradient(159.06deg, #0d2355 0%, #0f1a38 94.819%);
    color: white;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Reduce header padding on phones ── */
@media only screen and (max-width: 480px) {
    .reg-header[b-tswgu9u63y] {
        padding: 16px;
    }

    .reg-cobrand-logo[b-tswgu9u63y] {
        height: 65px;
    }

    .reg-clear[b-tswgu9u63y] {
        height: 32px;
        padding: 6px 14px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1279px) {
    .reg-right[b-tswgu9u63y] {
        width: 390px;
    }
}

/* ── Hide right panel on ≤1024px (the tariff button and drawer take over) ── */
@media only screen and (max-width: 1024px) {
    .reg-right[b-tswgu9u63y] {
        display: none;
    }
}


/* Legacy's OfferMessage: fixed full-width bar; the page moves down under it. */
.campaign-banner[b-tswgu9u63y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #0F1A38;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-align: center;
    animation: campaign-slide-in-b-tswgu9u63y 0.5s ease-in-out;
}

@keyframes campaign-slide-in-b-tswgu9u63y {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.reg-root--offer[b-tswgu9u63y] {
    padding-top: 40px;
    box-sizing: border-box;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.completion-page[b-imtc5mmgg1] {
    max-width: 560px;
    margin: 0 auto;
    padding: 64px 24px;
    text-align: center;
}

.step-heading[b-imtc5mmgg1] {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #0F1A38;
    margin-bottom: 12px;
}

.step-desc[b-imtc5mmgg1] {
    font-family: 'Poppins', sans-serif;
    color: #4A5072;
    margin-bottom: 32px;
}

.btn-validar[b-imtc5mmgg1] {
    display: inline-block;
    padding: 12px 28px;
    background-color: #EA774D;
    color: #FFFFFF;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border: none;
    cursor: pointer;
    margin-right: 12px;
}

.btn-validar:hover[b-imtc5mmgg1] {
    background-color: #d96a40;
}

.btn-back-link[b-imtc5mmgg1] {
    display: inline-block;
    padding: 12px 28px;
    background-color: transparent;
    color: #0F1A38;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border: 1px solid #0F1A38;
}

.btn-back-link:hover[b-imtc5mmgg1] {
    background-color: #0F1A38;
    color: #FFFFFF;
}
/* /Components/Pages/Register.razor.rz.scp.css */
/* ── Overall step layout: single column, fills the left panel ── */
.step-layout[b-n4wo5x8obc] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
}

/* ── "Resumen" anchor at the very top of the live wizard (React parity):
   navy chevron badge + large title, pending state. ── */
.resumen-pending[b-n4wo5x8obc] {
    position: relative;
    background: #fff;
    flex-shrink: 0;
}

.resumen-pending-badge[b-n4wo5x8obc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 49px;
    background: #0F1A38;
    color: #fff;
    font-size: 35px;
    font-weight: 400;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 25px 0;
    flex-shrink: 0;
}

.resumen-pending-content[b-n4wo5x8obc] {
    padding: 0 2rem 1.25rem 5.5rem;
    max-width: 800px;
    display: flex;
    align-items: center;
    min-height: 49px;
    /* content-box so the 20px padding-bottom adds BELOW the 49px badge row
       instead of being absorbed by min-height under the global border-box —
       this is what makes the gap above the active step the full 40px. */
    box-sizing: content-box;
    border-left: 10px solid transparent;   /* no rail by default (Step 1 gap) */
}

/* Once ≥1 step is completed, the navy rail joins Resumen down into the block. */
.resumen-pending-content.has-rail[b-n4wo5x8obc] {
    border-left-color: #0F1A38;
}

.resumen-pending-title[b-n4wo5x8obc] {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 122%;
    color: #0F1A38;
}

@media only screen and (max-width: 480px) {
    .resumen-pending-badge[b-n4wo5x8obc] {
        width: 56px;
        height: 41px;
        font-size: 28px;
        border-radius: 0 0 18px 0;
    }

    .resumen-pending-content[b-n4wo5x8obc] {
        padding: 0 1rem 1rem 1rem;
    }

    .resumen-pending-title[b-n4wo5x8obc] {
        font-size: 22px;
    }
}

/* ── Form card: white area containing the active step ── */
.step-form-card[b-n4wo5x8obc] {
    flex: 1;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    /* The single rail break above the active step. React: margin-top 20px +
       the 20px padding-bottom of the row above = the 40px badge-to-badge gap. */
    margin-top: 20px;
}

/* ── Active step badge: rectangular orange badge, top-left of the form card ── */
.active-badge[b-n4wo5x8obc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 69px;        /* React: active badge is 69px tall (vs 49px non-active) */
    margin: 0;
    background: #DF6437;
    color: #fff;
    font-size: 2.1875rem; /* 35px */
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 0 0 25px 0;
    box-shadow: 4px 4px 16px rgba(223, 100, 55, 0.35);
    flex-shrink: 0;
}

/* ── Form content area: padded so it clears the badge ── */
.step-form-area[b-n4wo5x8obc] {
    flex: 1;
    padding: 0 3rem 2rem 5.5rem; /* left: badge width (70px) + gap */
    max-width: 800px;
    border-left: 10px solid #DF6437;
}

.paso-meta[b-n4wo5x8obc] {
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: #666;
    line-height: 21px;
    margin-bottom: 8px;
}

/* ── Inactive step rows ── */
.inactive-row[b-n4wo5x8obc] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 49px;
    flex-shrink: 0;
    width: 100%;
    margin-top: 20px;   /* 20px badge-to-badge gap, matching the target's future rows */
}

.inactive-badge[b-n4wo5x8obc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 49px;
    flex-shrink: 0;
    background: #1A1F3C;
    border-radius: 0 0 28px 0;
    color: #fff;
    font-size: 2.1875rem;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* NOTE: `.completed-*` summary-card styles moved to
   Components/Shared/SectionSummaries.razor.css (shared by the live wizard and
   the review screen). */

/* Legacy's StepName: the upcoming steps read as headings, not greyed-out rows. */
.inactive-label[b-n4wo5x8obc] {
    padding-left: 5.5rem;
    padding-right: 1.5rem;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.22;
    color: #0F1A38;
}

/* ── Medium breakpoint: smooth desktop→phone transition ── */
@media only screen and (max-width: 768px) {
    .step-form-area[b-n4wo5x8obc] {
        padding: 0 1.5rem 1.5rem 2rem;
    }
}

/* ── Phone breakpoint: collapse paddings to clear the 80px badge ── */
@media only screen and (max-width: 480px) {
    .step-form-area[b-n4wo5x8obc] {
        padding: 0 1rem 1.5rem 1rem;
        border-left-width: 6px;
    }

    .inactive-label[b-n4wo5x8obc] {
        padding-left: 1rem;
    }

    /* Scale badge down so it doesn't dominate a narrow viewport.
       (`.completed-badge` is scaled in SectionSummaries.razor.css.) */
    .active-badge[b-n4wo5x8obc],
    .inactive-badge[b-n4wo5x8obc] {
        width: 56px;
        height: 40px;
        font-size: 1.5rem;
        border-radius: 0 0 20px 0;
    }

    /* Keep the paso-meta and heading clear of the narrower badge */
    .paso-meta[b-n4wo5x8obc] {
        padding-left: 60px;
    }
}

/* Legacy's OfferMessage: the campaign/referral offer above the funnel. */
/* /Components/Pages/SignContract.razor.rz.scp.css */
.signing-page[b-q5ye1p3e4f] {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 24px;
}

.signing-loading[b-q5ye1p3e4f] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

.signing-error[b-q5ye1p3e4f] {
    color: #CE101D;
    text-align: center;
    padding: 24px 0;
}

.signing-iframe[b-q5ye1p3e4f] {
    width: 100%;
    min-height: 600px;
    border: none;
}
/* /Components/Rastreator/FlatRegistrationForm.razor.rz.scp.css */
/* Legacy FlatRegistrationForm: the steps one under the other, no rail or badges, 24px inset,
   16px section padding and a 1px rule between sections. */

.flat-form[b-cqq1fj180z] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    padding-left: 24px;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.flat-section[b-cqq1fj180z] {
    padding: 16px 0;
}

.flat-divider[b-cqq1fj180z] {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 8px 0;
}

/* ── Toggle pill (scoped in Step2HolderData.razor.css, duplicated here) ── */

.toggle-pill[b-cqq1fj180z] {
    display: flex;
    width: 100%;
    background: #EBF5F5;
    border-radius: 30px;
    padding: 4px;
    box-sizing: border-box;
}

.toggle-btn[b-cqq1fj180z] {
    flex: 1;
    height: 55px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #1A1F3C;
    border-radius: 30px;
    transition: background 0.2s, color 0.2s;
}

.toggle-btn.active[b-cqq1fj180z] {
    background: #1A1F3C;
    color: #ffffff;
}

/* ── IBAN flag (scoped in Step4BankAccount.razor.css, duplicated here) ── */

.iban-row[b-cqq1fj180z] {
    display: flex;
    align-items: flex-start;
}

.iban-row[b-cqq1fj180z]  .mud-input-control {
    flex: 1;
}

.iban-flag[b-cqq1fj180z] {
    font-size: 24px;
    line-height: 60px;
    margin-right: 12px;
}

.iban-flag--empty[b-cqq1fj180z] {
    opacity: 0.5;
}

/* ── Signing channel ── */

.flat-sign-title[b-cqq1fj180z] {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #0f1a38;
    margin: 0 0 12px 0;
}

/* Legacy SingleSelectManyOptions: one option per row. */
[b-cqq1fj180z] .flat-radio-stack .mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.whatsapp-error[b-cqq1fj180z] {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #CE101D;
    margin: 8px 0 0 0;
}

/* Legacy SubmitContainer: 32px above and below, 400px wide. */
.flat-submit-area[b-cqq1fj180z] {
    padding: 32px 0;
    max-width: 400px;
}

@media only screen and (max-width: 768px) {
    .flat-form[b-cqq1fj180z] {
        padding-left: 16px;
    }
}
/* /Components/Shared/FranjaDot.razor.rz.scp.css */
.franja-dot[b-8en6csa4qb] {
    flex-shrink: 0;
    display: inline-block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.franja-dot--valle[b-8en6csa4qb] { background: #33d9b1; }
.franja-dot--llano[b-8en6csa4qb] { background: #eed9b5; }
.franja-dot--punta[b-8en6csa4qb] { background: #dc4036; }

.franja-dot--ring.franja-dot--valle[b-8en6csa4qb] { border: 1px solid #20a787; }
.franja-dot--ring.franja-dot--llano[b-8en6csa4qb] { border: 1px solid #d59e44; }
.franja-dot--ring.franja-dot--punta[b-8en6csa4qb] { border: 1px solid #821d17; }
/* /Components/Shared/PageLoader.razor.rz.scp.css */
.page-loader[b-sll04dnela] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.page-loader img[b-sll04dnela] {
    height: 100px;
}
/* /Components/Shared/ResultPage.razor.rz.scp.css */
/* Legacy pages/ContractConfirmed (and siblings): a 600px column, Title 40/45 500, Subtitle 18/24. */
.result-page[b-kiqmryn6ls] {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    color: #0F1A38;
}

.result-title[b-kiqmryn6ls] {
    font-weight: 500;
    font-size: 40px;
    line-height: 45px;
    margin: 0;
    color: #0F1A38;
}

.result-text[b-kiqmryn6ls],
.result-page[b-kiqmryn6ls]  .result-text {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
    color: #0F1A38;
    word-break: break-word;
}

.result-page[b-kiqmryn6ls]  .result-item {
    margin: 20px 0 0 0;
}

.result-page[b-kiqmryn6ls]  .result-text a {
    color: inherit;
    text-decoration: none;
}

.result-image[b-kiqmryn6ls] {
    display: block;
    width: 100px;
    margin: 40px auto;
}

.result-stores[b-kiqmryn6ls] {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.result-qr[b-kiqmryn6ls] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 10px solid #c0b8ff;
    border-radius: 20px;
    max-width: 256px;
    padding: 20px;
    box-sizing: border-box;
}

.result-qr img[b-kiqmryn6ls] {
    width: 200px;
}

.result-badges[b-kiqmryn6ls] {
    margin: 20px 0;
    display: flex;
    column-gap: 20px;
}

.result-badges img[b-kiqmryn6ls] {
    height: 75px;
}

.result-cta[b-kiqmryn6ls] {
    padding: 50px;
}

/* Legacy components/Button. */
.result-app-button[b-kiqmryn6ls] {
    width: 100%;
    height: 60px;
    padding: 10px 30px;
    border: none;
    border-radius: 30px;
    background-color: #DF6437;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
}

.result-app-button:hover[b-kiqmryn6ls] {
    background-color: #ea774d;
}

@media (max-width: 768px) {
    .result-app-button[b-kiqmryn6ls] {
        font-size: 14px;
        height: 40px;
    }

    .result-qr[b-kiqmryn6ls] {
        display: none;
    }

    .result-badges[b-kiqmryn6ls] {
        flex-direction: column;
        row-gap: 10px;
        margin-top: 0;
    }
}
/* /Components/Shared/ReviewTariffSummary.razor.rz.scp.css */
/* ── Selected-tariff summary on the review screen (plain text, no card; Figma "RegForm - Summary") ── */
.review-tariff[b-bk1fxaon9v] {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 8px 0 16px;
    max-width: 495px;
    color: #0F1A38;
}

.rt-name[b-bk1fxaon9v] {
    font-size: 23px;
    font-weight: 500;
    line-height: 1.22;
    margin: 0;
}

.rt-prices[b-bk1fxaon9v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rt-group[b-bk1fxaon9v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rt-group-head[b-bk1fxaon9v] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.rt-group-title[b-bk1fxaon9v] {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.22;
}

.rt-group-note[b-bk1fxaon9v] {
    color: #666;
    font-size: 16px;
    line-height: 1.22;
}

.rt-row[b-bk1fxaon9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 18px;
    line-height: 1.22;
}

.rt-label[b-bk1fxaon9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
}

.rt-code[b-bk1fxaon9v] {
    color: #808080;
}

.rt-value[b-bk1fxaon9v] {
    font-weight: 500;
    white-space: nowrap;
}

.rt-note[b-bk1fxaon9v] {
    color: #666;
    font-size: 16px;
    line-height: 1.22;
    margin: 0;
}

.rt-legal[b-bk1fxaon9v] {
    color: #666;
    font-size: 16px;
    line-height: 1.22;
    text-align: right;
    margin: 0;
}

.rt-fallback[b-bk1fxaon9v] {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* The campaign/referral offer the visitor came in on (legacy's campaignMessage in the review). */
.rt-campaign[b-bk1fxaon9v] {
    font-weight: 600;
    margin: 0;
}

@media only screen and (max-width: 480px) {
    .review-tariff[b-bk1fxaon9v] {
        gap: 10px;
    }

    .rt-name[b-bk1fxaon9v] {
        font-size: 17px;
        font-weight: 600;
    }

    .rt-prices[b-bk1fxaon9v] {
        gap: 10px;
    }

    .rt-group[b-bk1fxaon9v] {
        gap: 8px;
    }

    /* Too narrow for title and note on one line — stack them. */
    .rt-group-head[b-bk1fxaon9v] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .rt-group-title[b-bk1fxaon9v] {
        font-size: 14px;
    }

    .rt-group-note[b-bk1fxaon9v],
    .rt-note[b-bk1fxaon9v] {
        font-size: 12px;
    }

    .rt-note[b-bk1fxaon9v] {
        line-height: 1.4;
    }

    .rt-row[b-bk1fxaon9v] {
        font-size: 14px;
    }

    .rt-label[b-bk1fxaon9v] {
        gap: 8px;
    }

    .rt-legal[b-bk1fxaon9v] {
        font-size: 14px;
        line-height: 1.6;
        letter-spacing: -0.07px;
    }

    /* The locked-rate legal lines stack on phones. */
    .rt-legal--stacking > span[b-bk1fxaon9v] {
        display: block;
    }

    .rt-legal--stacking > br[b-bk1fxaon9v],
    .rt-legal--stacking > .rt-slash[b-bk1fxaon9v] {
        display: none;
    }
}
/* /Components/Shared/SectionSummaries.razor.rz.scp.css */
/* ── Completed-step summary, matching React Wizard/StepSummary ──
   Navy checkmark badge + large title beside it + plain "Label: value" lines on
   white (no card). Shared by the live wizard and the review screen. */
.completed-step[b-bioybkx297] {
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.completed-badge[b-bioybkx297] {
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 49px;
    background: #0F1A38;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 25px 0;
    flex-shrink: 0;
}

.completed-content[b-bioybkx297] {
    padding: 0 2rem 1.25rem 5.5rem;
    max-width: 800px;
    border-left: 10px solid #0F1A38;   /* navy rail, connects down to the next row */
    margin-left: 0;
}

/* Last rendered section: cap the rail to the badge — no navy strip below the
   checkmark (the badge itself supplies the navy at badge height). Transparent
   (not removed) so the content stays horizontally aligned with other rows. */
.completed-content.capped[b-bioybkx297] {
    border-left-color: transparent;
}

.completed-header[b-bioybkx297] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 49px;
}

/* Large section title beside the badge — StepName: 28px / 500 / #0F1A38. */
.completed-title[b-bioybkx297] {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 122%;
    color: #0F1A38;
    margin: 0;
}

/* "Editar": underlined link, 14px, #0F1A38. */
.completed-edit[b-bioybkx297] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #0F1A38;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
    margin-left: 16px;
}

/* Plain lines under the title — no gray box. React StepSummary: margin 8px 0 24px. */
.completed-summary[b-bioybkx297] {
    display: flex;
    flex-direction: column;
    margin: 8px 0 24px;
}

/* One "Label: value" per line; the value carries the bold emphasis. */
.completed-row[b-bioybkx297] {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 150%;
    color: #0F1A38;
    margin-bottom: 4px;
    word-break: break-word;
}

.completed-row-label[b-bioybkx297] {
    font-weight: 400;
}

.completed-row-value[b-bioybkx297] {
    font-weight: 600;
}

/* ── Phone breakpoint: collapse paddings + scale badge ── */
@media only screen and (max-width: 480px) {
    .completed-content[b-bioybkx297] {
        padding: 0 1rem 1rem 1rem;
        border-left-width: 6px;
    }

    .completed-badge[b-bioybkx297] {
        width: 56px;
        height: 41px;
        font-size: 1.25rem;
        border-radius: 0 0 18px 0;
    }

    .completed-title[b-bioybkx297] {
        font-size: 22px;
    }
}
/* /Components/Shared/StepProgressBar.razor.rz.scp.css */
.inactive-row[b-1nxwuflhon] {
    display: flex;
    align-items: center;
    background: #1A1F3C;
    min-height: 56px;
    flex-shrink: 0;
}

.step-badge-inactive[b-1nxwuflhon] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: #1A1F3C;
    border-right: 2px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inactive-label[b-1nxwuflhon] {
    padding-left: 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.01em;
}
/* /Components/Shared/TariffCard.razor.rz.scp.css */
/* Figma "RegForm - Tres Tariff". Sizes:
   desktop  — the sidebar at ≥1280px (the defaults below)
   tablet   — the full-screen drawer, 600–1024px
   mobile   — phones (<600px) and the 390px tablet-landscape sidebar (1025–1279px) */

.tc-outer[b-mm2hkn39c3] {
    display: flex;
    flex-direction: column;
    isolation: isolate;
    width: 100%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The sidebar card grows towards the form while its header is hovered. */
@media (min-width: 1025px) {
    .tc-outer:not(.tc-outer--disabled):has(.tc-header:hover)[b-mm2hkn39c3] {
        width: calc(100% + 20px);
    }
}

.tc-header[b-mm2hkn39c3] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.tc-header:focus-visible[b-mm2hkn39c3] {
    outline: none;
    box-shadow: var(--focus-ring), 0 4px 14px rgba(0, 0, 0, 0.25);
}

.tc-header--disabled[b-mm2hkn39c3] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: default;
}

.tc-title-row[b-mm2hkn39c3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tc-title-group[b-mm2hkn39c3] {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.tc-title[b-mm2hkn39c3] {
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.22;
    color: #0f1a38;
    margin: 0;
}

/* A right chevron: pointing down while collapsed, up while expanded. */
.tc-chevron[b-mm2hkn39c3] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transform: rotate(90deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tc-chevron--expanded[b-mm2hkn39c3] {
    transform: rotate(-90deg);
}

.tc-chevron:focus-visible[b-mm2hkn39c3] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

.tc-radio[b-mm2hkn39c3] {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #0f1a38;
    border-radius: 50%;
}

.tc-radio[b-mm2hkn39c3]::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #df6437;
    opacity: 0;
    transition: opacity 0.2s;
}

.tc-radio--checked[b-mm2hkn39c3]::after {
    opacity: 1;
}

.tc-header--disabled .tc-radio[b-mm2hkn39c3] {
    opacity: 0.35;
}

.tc-desc[b-mm2hkn39c3] {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.22;
    color: #666;
    margin: 0;
}

.tc-header--disabled .tc-desc[b-mm2hkn39c3] {
    color: #0f1a38;
}

/* ── Detail: inset 20px under the header ── */
.tc-detail[b-mm2hkn39c3] {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    animation: tcSlideDown-b-mm2hkn39c3 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tcSlideDown-b-mm2hkn39c3 {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tc-detail-panel[b-mm2hkn39c3] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 24px;
    background: #ffffff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* ── Tablet: the full-screen drawer ── */
@media (min-width: 600px) and (max-width: 1024px) {
    .tc-header[b-mm2hkn39c3] {
        gap: 20px;
        padding: 40px;
    }

    .tc-desc[b-mm2hkn39c3] {
        font-size: 18px;
        color: #444;
    }

    .tc-header--disabled .tc-desc[b-mm2hkn39c3] {
        color: #0f1a38;
    }

    .tc-detail-panel[b-mm2hkn39c3] {
        padding: 20px 56px;
    }
}

/* ── Mobile: phones, and the narrow tablet-landscape sidebar ── */
@media (max-width: 599px), (min-width: 1025px) and (max-width: 1279px) {
    .tc-header[b-mm2hkn39c3] {
        gap: 10px;
        padding: 20px;
    }

    .tc-title-group[b-mm2hkn39c3] {
        gap: 10px;
    }

    .tc-title[b-mm2hkn39c3] {
        font-size: 17px;
        font-weight: 600;
    }

    .tc-desc[b-mm2hkn39c3] {
        font-size: 14px;
    }

    .tc-detail-panel[b-mm2hkn39c3] {
        padding: 20px;
    }
}
/* /Components/Shared/TariffDrawer.razor.rz.scp.css */
/* Figma "RegForm - Tres Tariff". Below 1025px the rail gives way to a tariff button and a
   full-screen drawer; tablet styles (600–1024px) cover the 744px tablet, phones are <600px. */

/* ── Mobile tariff button: hidden while the rail shows ── */
.tariff-pill-wrapper[b-plvwtjhyjc] {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .tariff-pill-wrapper[b-plvwtjhyjc] {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0 20px 16px 20px;
        box-sizing: border-box;
    }
}

.tariff-pill[b-plvwtjhyjc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(178.12deg, #0d2355 0%, #0f1a38 94.82%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 18px 19px;
    width: 100%;
    max-width: 480px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.22;
    cursor: pointer;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
    transition: opacity 0.15s, transform 0.15s;
}

.tariff-pill:hover[b-plvwtjhyjc] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.tariff-pill:active[b-plvwtjhyjc] {
    transform: translateY(0);
}

.tariff-pill:focus-visible[b-plvwtjhyjc] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.tariff-pill-label[b-plvwtjhyjc] {
    flex: 1;
    text-align: left;
}

.tariff-pill-arrow[b-plvwtjhyjc] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 12px;
}

/* ── Overlay ── */
.tariff-drawer-overlay[b-plvwtjhyjc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10001;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.tariff-drawer-overlay.closing[b-plvwtjhyjc] {
    opacity: 0;
}

/* ── Drawer: full screen, "Midnight Fade" ── */
.tariff-drawer[b-plvwtjhyjc] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    background: linear-gradient(155.17deg, #0d2355 0%, #0f1a38 94.819%);
    overflow: hidden;
    z-index: 10002;
    animation: drawerSlideIn-b-plvwtjhyjc 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tariff-drawer.closing[b-plvwtjhyjc] {
    animation: drawerSlideOut-b-plvwtjhyjc 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawerSlideIn-b-plvwtjhyjc {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes drawerSlideOut-b-plvwtjhyjc {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .tariff-drawer[b-plvwtjhyjc] {
        background: linear-gradient(161.16deg, #0d2355 0%, #0f1a38 94.819%);
    }
}

/* The rail takes over from 1025px. */
@media only screen and (min-width: 1025px) {
    .tariff-drawer[b-plvwtjhyjc],
    .tariff-drawer-overlay[b-plvwtjhyjc] {
        display: none;
    }
}

/* ── Close button ── */
.tariff-drawer-close[b-plvwtjhyjc] {
    position: absolute;
    top: 31px;
    right: 27px;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.2s;
    z-index: 2;
}

.tariff-drawer-close:hover[b-plvwtjhyjc] {
    opacity: 0.7;
}

.tariff-drawer-close:focus-visible[b-plvwtjhyjc] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .tariff-drawer-close[b-plvwtjhyjc] {
        top: 55px;
        right: 35px;
    }
}

/* ── Scroller: runs under the sticky CTA; the bottom padding lets the last card clear it ── */
.tariff-drawer-inner[b-plvwtjhyjc] {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    /* 313px column at 37px / 40px on a 390px phone (Figma), 20px gutters at 320px. */
    padding: 66px max(20px, calc((100% - 310px) / 2)) 132px max(20px, calc((100% - 316px) / 2));
    scrollbar-width: none;
}

.tariff-drawer-inner[b-plvwtjhyjc]::-webkit-scrollbar {
    display: none;
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .tariff-drawer-inner[b-plvwtjhyjc] {
        padding: 140px max(20px, calc((100% - 541px) / 2)) 210px;
    }
}

/* ── Sticky "Siguiente" that fades the cards out beneath it ── */
.tariff-drawer-footer[b-plvwtjhyjc] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 32px 20px;
    background: linear-gradient(to bottom, rgba(15, 26, 56, 0) 0%, #0f1a38 35%, #0f1a38 100%);
    pointer-events: none;
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .tariff-drawer-footer[b-plvwtjhyjc] {
        padding: 32px 20px 98px;
    }
}

.tariff-drawer-continue[b-plvwtjhyjc] {
    pointer-events: auto;
    width: 100%;
    max-width: 351px;
    height: 48px;
    padding: 10px 30px;
    background: #DF6437;
    color: #ffffff;
    border: none;
    border-radius: 28.194px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.tariff-drawer-continue:hover[b-plvwtjhyjc] {
    background: #ea774d;
}

.tariff-drawer-continue:active[b-plvwtjhyjc] {
    background: #bc532d;
}

.tariff-drawer-continue:focus-visible[b-plvwtjhyjc] {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* /Components/Shared/TariffPriceDetail.razor.rz.scp.css */
/* A titled block of the detail panel: "Energía €/kWh" + its note, then rows. */
.pd-section[b-qepwa589st] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Tres' energy block breathes a little more (12px). */
.pd-section--wide[b-qepwa589st] {
    gap: 12px;
}

.pd-heading[b-qepwa589st] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.22;
}

.pd-title[b-qepwa589st] {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.22;
    color: #0f1a38;
    margin: 0;
}

.pd-note[b-qepwa589st] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.22;
    color: #666;
    margin: 0;
}

.pd-rows[b-qepwa589st] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.pd-row[b-qepwa589st] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: #0f1a38;
}

.pd-row-label[b-qepwa589st] {
    font-weight: 400;
}

.pd-row-value[b-qepwa589st] {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.pd-period[b-qepwa589st] {
    color: #808080;
}

/* One large price, right-aligned (Constante's single energy price). */
.pd-single[b-qepwa589st] {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.22;
    color: #0f1a38;
    text-align: right;
    width: 100%;
    margin: 0;
}

/* ── Tres energy block ── */
.pd-tres-info[b-qepwa589st] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.pd-rows--tres[b-qepwa589st] {
    gap: 6px;
}

.pd-rows--tres .pd-row[b-qepwa589st] {
    align-items: center;
}

.pd-dot-label[b-qepwa589st] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-weekend[b-qepwa589st] {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.3;
    color: #666;
    margin: 0;
}

/* Dashed rule above Tres' legal line — a hairline that takes no height, as in Figma. */
.pd-dashed[b-qepwa589st] {
    width: 100%;
    height: 1px;
    margin-bottom: -1px;
    background-image: linear-gradient(to right, #c9d3d3 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
}

/* ── Transparente's subscription: heading, price below right-aligned ── */
.pd-subscription[b-qepwa589st] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #0f1a38;
}

.pd-subscription-title[b-qepwa589st] {
    font-size: 16px;
    line-height: 1.22;
    margin: 0;
}

.pd-subscription-value[b-qepwa589st] {
    font-size: 14px;
    line-height: 1.3;
    text-align: right;
    margin: 0;
}

/* Right-aligned 11px legal line closing the panel. */
.pd-legal[b-qepwa589st] {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.3;
    color: #666;
    text-align: right;
    width: 100%;
    margin: 0;
}
/* /Components/Shared/TariffSelectorPanel.razor.rz.scp.css */
/* Figma "RegForm - Tres Tariff". The rail is 503px on desktop and 390px on tablet-landscape
   (1025–1279px, see RegistrationLayout); below 1025px the panel lives in the full-screen drawer. */
.tariff-panel[b-vbj2ztphm3] {
    display: flex;
    flex-direction: column;
    gap: 23px;
    min-height: 100%;
    padding: 66px 82px 36px 49px;
    color: white;
    box-sizing: border-box;
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .tariff-panel[b-vbj2ztphm3] {
        padding: 66px 38px 36px 38px;
    }
}

/* In the drawer the drawer's scroller supplies the padding. */
.tariff-panel--drawer[b-vbj2ztphm3] {
    min-height: 0;
    padding: 0;
}

@media (max-width: 1024px) {
    .tariff-panel[b-vbj2ztphm3] {
        gap: 30px;
    }
}

.tariff-title[b-vbj2ztphm3] {
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.22;
    color: #ffffff;
    max-width: 351px;
    margin: 0 0 19px 0; /* + the 23px gap = 42px to the first card */
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .tariff-title[b-vbj2ztphm3] {
        margin-bottom: 7px; /* + 23px = 30px */
    }
}

@media (min-width: 600px) and (max-width: 1024px) {
    .tariff-title[b-vbj2ztphm3] {
        font-size: 40px;
        font-weight: 500;
        max-width: 501px;
        margin-bottom: 28px; /* + 30px = 58px */
    }
}

@media (max-width: 599px) {
    .tariff-title[b-vbj2ztphm3] {
        max-width: 272px;
        margin-bottom: 0; /* the 30px gap is the whole distance */
    }
}

/* ── Tariff cards ── */
.tariff-cards[b-vbj2ztphm3] {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

@media (max-width: 1024px) {
    .tariff-cards[b-vbj2ztphm3] {
        gap: 30px;
    }
}

/* ── Trustpilot ── */
.trustpilot-section[b-vbj2ztphm3] {
    margin-top: auto;
    padding-top: 2rem;
    text-align: center;
}

.tp-logo[b-vbj2ztphm3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.tp-star[b-vbj2ztphm3] {
    color: #00B67A;
    font-size: 1.1rem;
}

.tp-brand[b-vbj2ztphm3] {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.tp-stars[b-vbj2ztphm3] {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: 0.25rem;
}

.tp-star-filled[b-vbj2ztphm3] {
    color: white;
    font-size: 1.4rem;
    background: #00B67A;
    padding: 2px 4px;
    border-radius: 2px;
}

.tp-label[b-vbj2ztphm3] {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}

/* ── Constante-reset explainer modal ── */
.constante-reset-overlay[b-vbj2ztphm3] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    padding: 16px;
    box-sizing: border-box;
}

.constante-reset-modal[b-vbj2ztphm3] {
    position: relative;
    background: linear-gradient(123.71deg, #FFFFFF 19.4%, #EBF5F5 63.48%, #D5E4E4 100%);
    border-radius: 28px;
    padding: 44px 40px 36px 40px;
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    box-sizing: border-box;
    color: #0f1a38;
    box-shadow: 0 18px 60px rgba(15, 26, 56, 0.25);
}

.constante-reset-close[b-vbj2ztphm3] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #0f1a38;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.constante-reset-title[b-vbj2ztphm3] {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: #000;
}

.constante-reset-body[b-vbj2ztphm3] {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    color: #0f1a38;
}

.constante-reset-dismiss[b-vbj2ztphm3] {
    align-self: flex-start;
    background: #0f1a38;
    color: #fff;
    border: none;
    border-radius: 28px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    min-width: 172px;
    height: 46px;
    cursor: pointer;
    transition: background 0.2s;
}

.constante-reset-dismiss:hover[b-vbj2ztphm3] {
    background: #1e2f5e;
}

.constante-reset-dismiss:focus-visible[b-vbj2ztphm3],
.constante-reset-close:focus-visible[b-vbj2ztphm3] {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* /Components/Shared/TresTimeline.razor.rz.scp.css */
.tres-graph[b-5uz3211pvq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.tres-caption[b-5uz3211pvq],
.tres-tick[b-5uz3211pvq],
.tres-end-tick[b-5uz3211pvq] {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.3;
    color: #666;
}

.tres-caption[b-5uz3211pvq] {
    margin: 0;
}

.tres-track[b-5uz3211pvq] {
    position: relative;
    display: flex;
    gap: 2px;
    height: 64px;
    width: 100%;
}

.tres-band[b-5uz3211pvq] {
    position: relative;
    flex-basis: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
}

.tres-bar[b-5uz3211pvq] {
    width: 100%;
    border-radius: 5px 5px 0 0;
}

/* Height and colour say how expensive the band is (Figma franja/* variables). */
.tres-bar--valle[b-5uz3211pvq] { height: 16px; background: #33d9b1; }
.tres-bar--llano[b-5uz3211pvq] { height: 30px; background: #eed9b5; }
.tres-bar--punta[b-5uz3211pvq] { height: 46px; background: #dc4036; }

/* Hour label at the bar's left edge: flush left for 00, ending on the edge for 22 (so it clears the
   24 at the far end), centred on it otherwise. */
.tres-tick[b-5uz3211pvq] {
    display: block;
    height: 14px;
    width: max-content;
    white-space: nowrap;
}

.tres-tick--center[b-5uz3211pvq] { transform: translateX(-50%); }
.tres-tick--end[b-5uz3211pvq] { transform: translateX(-100%); }

.tres-end-tick[b-5uz3211pvq] {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 14px;
    white-space: nowrap;
}
/* /Components/Steps/Step1Account.razor.rz.scp.css */
.step-form[b-r5c9ukwkvc] {
    display: flex;
    flex-direction: column;
}

.privacy-label[b-r5c9ukwkvc] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0F1A38;
    line-height: 1.5;
}

.privacy-label a[b-r5c9ukwkvc] {
    color: #0F1A38;
    text-decoration: underline;
}

.privacy-label a:hover[b-r5c9ukwkvc] {
    color: #EA774D;
}

@media only screen and (max-width: 768px) {
    .privacy-label[b-r5c9ukwkvc] {
        font-size: 12px;
        line-height: 14px;
    }
}

/* ── Social sign-in buttons (Google + Apple) ── */
.social-divider[b-r5c9ukwkvc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: #8a8f9c;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.social-divider[b-r5c9ukwkvc]::before,
.social-divider[b-r5c9ukwkvc]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e4e9;
}

/* Default (mobile-first): stacked, full-width, full labels.
   Side-by-side layout kicks in at >=560px via the media query below. */
.social-row[b-r5c9ukwkvc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-social[b-r5c9ukwkvc] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    height: 60px;                /* matches .btn-next primary CTA */
    border-radius: 30px;         /* matches .btn-next primary CTA */
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;                /* allow shrink without overflow when in a row */
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn-social .btn-social-logo[b-r5c9ukwkvc] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.btn-social span[b-r5c9ukwkvc] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Two label variants: full when stacked, short when side-by-side.
   Default (stacked) shows the full label; short is hidden. */
.btn-social-label-short[b-r5c9ukwkvc] {
    display: none;
}

/* Google — Google Identity light theme spec */
.btn-social-google[b-r5c9ukwkvc] {
    background-color: #ffffff;
    border: 1px solid #747775;
    color: #1f1f1f;
    font-weight: 500;            /* Medium per spec */
}

.btn-social-google:hover[b-r5c9ukwkvc] {
    background-color: #f7f8f8;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.18);
}

/* Apple — "Sign in with Apple" HIG: black bg, white mark + label */
.btn-social-apple[b-r5c9ukwkvc] {
    background-color: #000000;
    border: 1px solid #000000;
    color: #ffffff;
    font-weight: 600;
}

.btn-social-apple:hover[b-r5c9ukwkvc] {
    background-color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-social:focus-visible[b-r5c9ukwkvc] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Side-by-side from ~560px upward: equal-width row, shorter labels so
   "Continuar con ..." can't overflow at half width. */
@media only screen and (min-width: 560px) {
    .social-row[b-r5c9ukwkvc] {
        flex-direction: row;
        gap: 12px;
    }

    .btn-social-label-full[b-r5c9ukwkvc] {
        display: none;
    }

    .btn-social-label-short[b-r5c9ukwkvc] {
        display: inline;
    }
}

/* Below the funnel mobile breakpoint, drop height to match .btn-next (40px). */
@media only screen and (max-width: 768px) {
    .btn-social[b-r5c9ukwkvc] {
        height: 40px;
        font-size: 14px;
        padding: 0 12px;
    }
}

/* Visually hidden but accessible to screen readers */
.visually-hidden[b-r5c9ukwkvc] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* "Ya tienes cuenta?" link below the CTA row */
.login-link[b-r5c9ukwkvc] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #555;
    text-align: center;
}

.login-link a[b-r5c9ukwkvc] {
    color: #EA774D;
    font-weight: 600;
    text-decoration: none;
}

.login-link a:hover[b-r5c9ukwkvc] {
    text-decoration: underline;
}
/* /Components/Steps/Step2HolderData.razor.rz.scp.css */
.toggle-pill[b-qpzpjt8ig2] {
    display: flex;
    width: 100%;
    background: #EBF5F5;
    border-radius: 30px;
    padding: 4px;
    box-sizing: border-box;
}

.toggle-btn[b-qpzpjt8ig2] {
    flex: 1;
    height: 55px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #1A1F3C;
    border-radius: 30px;
    transition: background 0.2s, color 0.2s;
}

.toggle-btn.active[b-qpzpjt8ig2] {
    background: #1A1F3C;
    color: #ffffff;
}

[b-qpzpjt8ig2] .mud-radio .mud-button-root {
    color: #5E4162 !important;
}

/* Privacy/terms consent label — mirrors Step1Account.razor.css so the catch-up
   consent shown to social users on Step 2 reads identically to Step 1. Scoped
   CSS doesn't cross components, so the rules are duplicated here intentionally. */
.privacy-label[b-qpzpjt8ig2] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0F1A38;
    line-height: 1.5;
}

.privacy-label a[b-qpzpjt8ig2] {
    color: #0F1A38;
    text-decoration: underline;
}

.privacy-label a:hover[b-qpzpjt8ig2] {
    color: #EA774D;
}

@media only screen and (max-width: 768px) {
    .privacy-label[b-qpzpjt8ig2] {
        font-size: 12px;
        line-height: 14px;
    }
}

/* .btn-back defined globally in app.css */
/* /Components/Steps/Step3ContractSelect.razor.rz.scp.css */
.contracts-section-title[b-ascw3dcpv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0F1A38;
    margin-top: 20px;
    margin-bottom: 10px;
}

.contracts-list[b-ascw3dcpv0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

/* ── Selectable contract card (En proceso) ── */
.contract-card[b-ascw3dcpv0] {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 16px 20px;
    background: #fafafa;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.contract-card:hover[b-ascw3dcpv0] {
    border-color: #DF6437;
    background: #fff;
}

.contract-card--selected[b-ascw3dcpv0] {
    border-color: #DF6437;
    background: #fff8f5;
    box-shadow: 0 0 0 2px rgba(223, 100, 55, 0.25);
}

/* ── Read-only card (Activos) — no hover, no pointer ── */
.contract-card--readonly[b-ascw3dcpv0] {
    cursor: default;
}

.contract-card--readonly:hover[b-ascw3dcpv0] {
    border-color: #E0E0E0;
    background: #fafafa;
    box-shadow: none;
}

.contract-card-header[b-ascw3dcpv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contract-actions[b-ascw3dcpv0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.contract-cups[b-ascw3dcpv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #0F1A38;
    letter-spacing: 0.02em;
}

.contract-address[b-ascw3dcpv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555;
    margin-top: 6px;
    margin-bottom: 0;
}

/* ── Status chip ── */
[b-ascw3dcpv0] .contract-status-chip {
    border-radius: 100px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

/* ── Delete icon button ── */
[b-ascw3dcpv0] .contract-delete-btn {
    border-radius: 50% !important;
    color: #0F1A38 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[b-ascw3dcpv0] .contract-delete-btn:hover {
    background-color: rgba(223, 100, 55, 0.08) !important;
    color: #DF6437 !important;
}

/* ── "New supply" button ── */
[b-ascw3dcpv0] .btn-new-supply {
    border-radius: 100px;
    text-transform: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

/* Highlight when "new supply" is the chosen path */
[b-ascw3dcpv0] .btn-new-supply--active.mud-button-root {
    background-color: rgba(223, 100, 55, 0.08);
    border-color: #DF6437;
    color: #DF6437;
}
/* /Components/Steps/Step3SupplyData.razor.rz.scp.css */
.upload-prompt[b-kjwxcmvtv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0F1A38;
    margin-bottom: 16px;
    line-height: 1.4;
}

.upload-area[b-kjwxcmvtv0] {
    position: relative;
    border: 2px dashed #ADADAD;
    border-radius: 16px;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

[b-kjwxcmvtv0] .upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-area:hover[b-kjwxcmvtv0],
.upload-area.drag-over[b-kjwxcmvtv0] {
    border-color: #DF6437;
}

.upload-area:focus-within[b-kjwxcmvtv0] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: #EA774D;
}

.upload-area-text[b-kjwxcmvtv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0F1A38;
}

.upload-area-hint[b-kjwxcmvtv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #757575;
}

.upload-error[b-kjwxcmvtv0] {
    color: #CE101D;
    font-size: 14px;
    margin-bottom: 12px;
}

.cups-info-row[b-kjwxcmvtv0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.cups-info-icon[b-kjwxcmvtv0] {
    flex-shrink: 0;
}

.cups-info-link[b-kjwxcmvtv0] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #0F1A38;
    text-decoration: underline;
}

.cups-info-box[b-kjwxcmvtv0] {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #0F1A38;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Legacy grid: CUPS 9/12 columns, Validar 3/12, 20px gap. */
.cups-row[b-kjwxcmvtv0] {
    display: grid;
    grid-template-columns: 9fr 3fr;
    gap: 20px;
    align-items: flex-start;
}

.btn-validar[b-kjwxcmvtv0] {
    height: 60px;
    padding: 10px 30px;
    background: #DF6437;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}

.btn-validar:hover:not(:disabled)[b-kjwxcmvtv0] {
    background: #ea774d;
}

.btn-validar:disabled[b-kjwxcmvtv0] {
    background: #E9E0D1;
    cursor: default;
}

.btn-validar:focus-visible[b-kjwxcmvtv0] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.cups-error[b-kjwxcmvtv0] {
    color: #CE101D;
    font-size: 14px;
    margin-top: -16px;
    margin-bottom: 12px;
}

.cups-ok[b-kjwxcmvtv0] {
    color: #51D016;
    font-size: 14px;
    margin-top: -16px;
    margin-bottom: 12px;
}

.cups-warning[b-kjwxcmvtv0] {
    color: #DF6437;
    font-size: 14px;
    margin-top: -16px;
    margin-bottom: 12px;
}

.addr-row[b-kjwxcmvtv0] {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.addr-street-row[b-kjwxcmvtv0] {
    grid-template-columns: 2fr 1fr;
}

.addr-zip-row[b-kjwxcmvtv0] {
    grid-template-columns: 1fr 2fr;
}

/* Remove field-group bottom margin for items inside addr-row */
.addr-row .field-group[b-kjwxcmvtv0] {
    margin-bottom: 0 !important;
}

[b-kjwxcmvtv0] .mud-radio .mud-button-root {
    color: #5E4162 !important;
}

/* .btn-back defined globally in app.css */

/* ── Existing contracts section (authenticated users) ── */
.existing-contracts-section[b-kjwxcmvtv0] {
    margin-top: 8px;
}

.existing-contracts-title[b-kjwxcmvtv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #0F1A38;
    margin-bottom: 12px;
}

.contract-card[b-kjwxcmvtv0] {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 16px 20px;
    background: #fafafa;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.contract-card:hover[b-kjwxcmvtv0] {
    border-color: #DF6437;
    background: #fff;
}

.contract-card:focus-visible[b-kjwxcmvtv0] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: #EA774D;
}

.contract-card-header[b-kjwxcmvtv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contract-actions[b-kjwxcmvtv0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.contract-cups[b-kjwxcmvtv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #0F1A38;
    letter-spacing: 0.02em;
}

.contract-address[b-kjwxcmvtv0] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555;
    margin-top: 6px;
    margin-bottom: 0;
}

[b-kjwxcmvtv0] .btn-new-supply {
    border-radius: 100px;
    text-transform: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

/* Status chip — pill-shaped, matches design system (btn-next 30px, btn-new-supply 100px) */
[b-kjwxcmvtv0] .contract-status-chip {
    border-radius: 100px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

/* Trash icon button — circular, midnight blue default, error red on hover.
   Matches the .btn-back circular pattern but smaller for inline header use. */
[b-kjwxcmvtv0] .contract-delete-btn {
    border-radius: 50% !important;
    color: #0F1A38 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[b-kjwxcmvtv0] .contract-delete-btn:hover {
    background-color: rgba(223, 100, 55, 0.08) !important;
    color: #DF6437 !important;
}

/* ── Focus-visible rings ── */
.contract-card:focus-visible[b-kjwxcmvtv0] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn-validar:focus-visible[b-kjwxcmvtv0] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.upload-area:focus-within[b-kjwxcmvtv0] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Capacity (potencia) selection ── */
/* Note: .capacity-legend / .capacity-divider styles live in app.css — MudSelect
   items render inside the teleported MudPopover, outside this scoped subtree. */
.capacity-section[b-kjwxcmvtv0] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.capacity-hint[b-kjwxcmvtv0] {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px;
    line-height: 1.5;
}

.capacity-hint a[b-kjwxcmvtv0] {
    color: #EA774D;
    text-decoration: underline;
}

.capacity-select-label[b-kjwxcmvtv0] {
    margin-top: 12px;
}

.capacity-period[b-kjwxcmvtv0] {
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

/* Group title of the power block — heavier than the Potencia punta/valle labels under it */
.capacity-title[b-kjwxcmvtv0] {
    font-weight: 600;
    color: #0F1A38;
}

/* Lookup-power sentence. Deliberately neutral, not the green "valid" colours: the
   customer is asked to check (and maybe correct) a value that changes the price. */
.sips-power-info[b-kjwxcmvtv0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #0F1A38;
    background: #f8f8f8;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 8px;
    line-height: 1.5;
}

.sips-power-info svg[b-kjwxcmvtv0] {
    flex-shrink: 0;
}

.capacity-required-hint[b-kjwxcmvtv0] {
    font-size: 14px;
    color: #666;
    margin: 16px 0 0;
}

@media (max-width: 768px) {
    .capacity-period[b-kjwxcmvtv0] {
        display: block;
    }
}

/* Legacy: address fields locked until the CUPS is validated read as grey. */
[b-kjwxcmvtv0] .mud-input-outlined.mud-disabled {
    background: #F2F2F2;
}
/* /Components/Steps/Step4BankAccount.razor.rz.scp.css */
/* checkbox color override is in app.css (.cb-midnight) */

.iban-row[b-gy5n9nc91i] {
    display: flex;
    align-items: flex-start;
}

.iban-row[b-gy5n9nc91i]  .mud-input-control {
    flex: 1;
}

/* Legacy FlagDiv: 24px emoji, 12px gap, centred on the 60px field. */
.iban-flag[b-gy5n9nc91i] {
    font-size: 24px;
    line-height: 60px;
    margin-right: 12px;
}

.iban-flag--empty[b-gy5n9nc91i] {
    opacity: 0.5;
}
/* /Components/Steps/Step5Offer.razor.rz.scp.css */
/* VAS cards: legacy's TariffAccordionCard (components/TariffAccordion), which StepUpselling
   renders its extras with. */

.vas-cards[b-ic1kr2kvbm] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-top: 20px;
}

.vas-outer[b-ic1kr2kvbm] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Hovering the card widens it 20px towards the right. */
.vas-wrap[b-ic1kr2kvbm] {
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.vas-accordion[b-ic1kr2kvbm] {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 24px;
    min-height: 151px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 1;
    transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1025px) {
    .vas-wrap:hover[b-ic1kr2kvbm] {
        width: calc(100% + 20px);
    }

    .vas-wrap:hover .vas-accordion[b-ic1kr2kvbm] {
        border-color: #DF6437;
        padding-left: 34px;
        padding-right: 34px;
    }
}

.vas-accordion-header[b-ic1kr2kvbm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vas-header-left[b-ic1kr2kvbm] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.vas-name[b-ic1kr2kvbm] {
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.4;
    color: #0f1a38;
    margin: 0;
}

.vas-arrow-btn[b-ic1kr2kvbm] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #0f1a38;
    flex-shrink: 0;
}

.vas-arrow-btn:focus-visible[b-ic1kr2kvbm] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

.vas-arrow-icon[b-ic1kr2kvbm] {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #0f1a38;
    border-bottom: 1.5px solid #0f1a38;
    transform: rotate(45deg);
    margin-bottom: 3px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vas-arrow-btn.expanded .vas-arrow-icon[b-ic1kr2kvbm] {
    transform: rotate(225deg);
    margin-bottom: -3px;
}

.vas-switch[b-ic1kr2kvbm] {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.vas-desc[b-ic1kr2kvbm] {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
}

/* Expanded detail: a white panel tucked under the card, inset 20px. */
.vas-accordion-content[b-ic1kr2kvbm] {
    display: flex;
    flex-direction: column;
    margin-top: -4px;
    padding: 0 20px;
    animation: vasAccordionSlideDown-b-ic1kr2kvbm 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.vas-accordion-inner[b-ic1kr2kvbm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 24px 14px 24px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 16px 16px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@keyframes vasAccordionSlideDown-b-ic1kr2kvbm {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vas-info-text[b-ic1kr2kvbm] {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.vas-legal[b-ic1kr2kvbm] {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #999;
    line-height: 1.4;
    margin: 4px 0 0 0;
    text-align: right;
}

.vas-terms[b-ic1kr2kvbm] {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5;
    text-align: right;
    margin: 4px 0 0 0;
}

.vas-terms a[b-ic1kr2kvbm] {
    color: #DF6437;
    text-decoration: underline;
    font-weight: 500;
}

.vas-terms a:hover[b-ic1kr2kvbm] {
    color: #c0502a;
}

@media (max-width: 768px) {
    .vas-accordion[b-ic1kr2kvbm] {
        padding: 20px;
    }

    .vas-name[b-ic1kr2kvbm] {
        font-size: 17px;
        font-weight: 600;
    }

    .vas-info-text[b-ic1kr2kvbm] {
        font-size: 14px;
    }

    .vas-legal[b-ic1kr2kvbm] {
        font-size: 14px;
    }
}

@media (max-width: 430px) {
    .vas-accordion[b-ic1kr2kvbm] {
        min-height: unset;
    }
}
/* /Components/Steps/StepReview.razor.rz.scp.css */
/* ── "Revisa tus datos" review screen ── */
.review-screen[b-wg1qxt40p8] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Active "Resumen" header: orange chevron badge + column ── */
.resumen-active[b-wg1qxt40p8] {
    position: relative;
    background: #fff;
    flex-shrink: 0;
}

.resumen-badge[b-wg1qxt40p8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 69px;
    background: #DF6437;
    color: #fff;
    font-size: 35px;
    font-weight: 400;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 25px 0;
    box-shadow: 4px 4px 16px rgba(223, 100, 55, 0.35);
    flex-shrink: 0;
    z-index: 2;
}

.resumen-col[b-wg1qxt40p8] {
    padding: 0 2rem 1.5rem 5.5rem;
    max-width: 800px;
    border-left: 10px solid #DF6437;   /* orange active rail */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* "RESUMEN" eyebrow above the title. */
.resumen-eyebrow[b-wg1qxt40p8] {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    padding-top: 0.5rem;
}

.review-title[b-wg1qxt40p8] {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 122%;
    color: #0F1A38;
    margin: 0;
}

.review-subtitle[b-wg1qxt40p8] {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    color: #666;
    margin: 0;
    max-width: 600px;
}

.review-footer[b-wg1qxt40p8] {
    margin: 2rem 2rem 2rem 5.5rem;
    max-width: 740px;
}

@media only screen and (max-width: 480px) {
    .resumen-badge[b-wg1qxt40p8] {
        width: 56px;
        height: 56px;
        font-size: 28px;
        border-radius: 0 0 18px 0;
    }

    .resumen-col[b-wg1qxt40p8] {
        padding: 0 1rem 1.5rem 1rem;
        border-left-width: 6px;
        margin-left: 56px;   /* clear the absolute badge */
    }

    .review-title[b-wg1qxt40p8] {
        font-size: 22px;
    }

    .review-footer[b-wg1qxt40p8] {
        margin: 1.5rem 1rem 1.5rem 1rem;
    }
}

/* ── Signing-preparation overlay ── */
.signing-prep-overlay[b-wg1qxt40p8] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    padding: 24px;
}

.signing-prep-title[b-wg1qxt40p8] {
    font-size: 22px;
    font-weight: 600;
    color: #0F1A38;
    margin: 8px 0 0;
}

.signing-prep-desc[b-wg1qxt40p8] {
    font-size: 14px;
    color: #666;
    margin: 0;
}