:root{
    --background-color:#0F1117;
    --background-item:#0F1320;
    --text-color:#EEF2FA;
    --secondary-background:#151822;
    --border:#283043;
    --muted-text-color:#9aa6b8;
    --accent-soft:#101D33;
    --accent:#2563eb;
    --color-accent:#60A4E0;
    --color-button:#93C4FC;
    --card:#151923;

    --warning-bg:#251D0D;
    --warning-text:#F6C76B;
    --warning-border:#A97916;

    --info-bg:#10282d;
    --info-text:#4ec3da;
    --info-border:#1691a9;

    --danger-bg:#241818;
    --danger-text:#E18686;
    --danger-border:#E18686;
    --item-hover:#121826;
    --focus-shadow:rgba(37,99,235,.18);
    --danger-shadow:rgba(225,134,134,.16);
    --shadow:0 24px 80px rgba(0,0,0,.35);

    --success-bg:#10251B;
    --success-text:#74D99F;
    --success-border:#1E7A45;
}

html[data-theme="light"]{
    --background-color:#F3F6FB;
    --background-item:#FFFFFF;
    --text-color:#121826;
    --secondary-background:#FFFFFF;
    --border:#D8E0EC;
    --muted-text-color:#64748B;
    --accent-soft:#EAF2FF;
    --accent:#2563eb;
    --color-accent:#2563eb;
    --color-button:#2563eb;
    --card:#F8FAFC;

    --warning-bg:#FFFAEB;
    --warning-text:#B54708;
    --warning-border:#FEDF89;

    --info-bg:#e7f9fd;
    --info-text:#0889a7;
    --info-border:#11bee4;

    --danger-bg:#FFF1F2;
    --danger-text:#B42318;
    --danger-border:#B42318;
    --item-hover:#F8FAFC;
    --focus-shadow:rgba(37,99,235,.18);
    --danger-shadow:rgba(180,35,24,.12);
    --shadow:0 24px 80px rgba(15,23,42,.12);

    --success-bg:#ECFDF3;
    --success-text:#027A48;
    --success-border:#75E0A7;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
}

body{
    min-height:100dvh;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 32%),
        radial-gradient(circle at bottom right, rgba(96,164,224,.10), transparent 28%),
        var(--background-color);
    color:var(--text-color);
    transition:background-color .2s ease,color .2s ease;
}

button,
input{
    font:inherit;
}

button,
input{
    -webkit-tap-highlight-color:transparent;
}

.payment-page{
    width:100%;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.payment-card{
    width:min(100%, 540px);
    background:var(--secondary-background);
    border:1px solid var(--border);
    border-radius:22px;
    padding:32px;
    box-shadow:var(--shadow);
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.payment-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
}

.payment-brand{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
    flex-wrap:wrap;
}

.payment-logo{
    width:50px;
    height:50px;
    object-fit:contain;
    flex-shrink:0;
}

.payment-title{
    margin:0;
    font-size:1.75rem;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.03em;
}

.payment-subtitle{
    margin:0;
    font-size:.78rem;
    line-height:1.1;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--color-accent);
    padding:6px 8px;
    border:1px solid var(--accent);
    border-radius:999px;
    background:var(--accent-soft);
}

.theme-toggle{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--card);
    color:var(--muted-text-color);
    cursor:pointer;
    flex-shrink:0;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.theme-toggle:hover{
    background:var(--accent-soft);
    color:var(--accent);
    transform:translateY(-1px);
}

.theme-toggle i{
    font-size:15px;
}

html[data-theme="dark"] .moon-icon{
    display:none;
}

html[data-theme="dark"] .sun-icon{
    display:block;
}

html[data-theme="light"] .moon-icon{
    display:block;
}

html[data-theme="light"] .sun-icon{
    display:none;
}

.payment-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.section-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--muted-text-color);
    font-size:.82rem;
    font-weight:800;
    margin-bottom:8px;
}

.plan-switch{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:6px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--background-item);
}

.plan-option{
    position:relative;
}

.plan-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.plan-option label{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--muted-text-color);
    font-size:.9rem;
    font-weight:800;
    cursor:pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.plan-option label:hover{
    background:var(--accent-soft);
    color:var(--color-accent);
}

.plan-option input:checked + label{
    background:var(--accent-soft);
    border-color:var(--accent);
    color:var(--color-accent);
}

.price-box{
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--background-item);
    padding:12px 14px;
    transition:
        background-color .2s ease,
        border-color .2s ease;
}

.price-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.price-name{
    margin:0 0 4px 0;
    font-size:1rem;
    font-weight:800;
}

.price-note{
    margin:0;
    color:var(--muted-text-color);
    font-size:.82rem;
    line-height:1.45;
}

.price-amount{
    text-align:right;
    flex-shrink:0;
}

.price-value{
    margin:0;
    font-size:2rem;
    font-weight:900;
    line-height:1;
    letter-spacing:-.04em;
}

.price-currency{
    color:var(--muted-text-color);
    font-size:.78rem;
    font-weight:800;
}

.saving-badge{
    display:none;
    width:fit-content;
    margin-top:12px;
    padding:6px 8px;
    border:1px solid var(--success-border);
    border-radius:999px;
    color:var(--success-text);
    background:var(--success-bg);
    font-size:.76rem;
    font-weight:800;
}

.saving-badge.is-visible{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.email-option-box{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom: 3px;
}

.email-option-checkbox{
    accent-color:var(--accent);
    cursor:pointer;
    flex-shrink:0;
}

.email-option-label{
    color:var(--muted-text-color);
    font-size:.82rem;
    line-height:1.45;
    cursor:pointer;
}

.field{
    position:relative;
}

.field input{
    width:100%;
    min-height:46px;
    padding:12px 46px 12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--background-item);
    color:var(--text-color);
    outline:none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.field input::placeholder{
    color:var(--muted-text-color);
}

.field input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px var(--focus-shadow);
}

.field input:disabled{
    opacity:0.55;
    cursor:not-allowed;
}

.field.has-error input{
    border-color:var(--danger-border);
    box-shadow:0 0 0 4px var(--danger-shadow);
}

.field.has-error .field-icon{
    color:var(--danger-text);
}

.field-icon{
    position:absolute;
    top:23px;
    right:14px;
    transform:translateY(-50%);
    color:var(--muted-text-color);
    pointer-events:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:color .2s ease;
}

.field-icon i{
    font-size:15px;
}

.field-error{
    display:none;
    margin:8px 0 0 0;
    color:var(--danger-text);
    font-size:.78rem;
    line-height:1.35;
}

.field.has-error .field-error{
    display:block;
}

.stripe-section{
    display:grid;
    gap:8px;
}

.stripe-card-box{
    width:100%;
    min-height:46px;
    display:flex;
    align-items:center;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--background-item);
    position: relative;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.stripe-card-box.is-focused{
    border-color:var(--accent);
    box-shadow:0 0 0 4px var(--focus-shadow);
}

.stripe-card-box.has-error{
    border-color:var(--danger-border);
    box-shadow:0 0 0 4px var(--danger-shadow);
}

#card-element{
    width:100%;
}

#card-element.bloqueado{
    opacity: 0.7;
}

#stripe-overlay{
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: not-allowed;
    border-radius:14px;
}

.stripe-card-box.bloqueado #stripe-overlay{
    display: block;
}

#error-card{
    display:none;
    margin:0;
    color:var(--danger-text);
    font-size:.78rem;
    line-height:1.35;
}

#error-card.is-visible{
    display:block;
}

.payment-summary{
    display:grid;
    gap:8px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card);
}

.summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--muted-text-color);
    font-size:.83rem;
}

.summary-row strong{
    color:var(--text-color);
}

.payment-button{
    position:relative;
    width:100%;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid var(--color-button);
    border-radius:14px;
    background:var(--color-button);
    color:#11151F;
    cursor:pointer;
    font-size:.95rem;
    font-weight:900;
    transition:
        opacity .2s ease,
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

html[data-theme="light"] .payment-button{
    color:#FFFFFF;
}

.payment-button:hover:not(:disabled){
    opacity:.92;
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(37,99,235,.22);
}

.payment-button:active:not(:disabled){
    transform:translateY(0);
    box-shadow:none;
}

.payment-button:disabled{
    cursor:not-allowed;
    opacity:.72;
    transform:none;
    box-shadow:none;
}

.payment-footer{
    margin:2px 0 0 0;
    text-align:center;
    color:var(--muted-text-color);
    font-size:.78rem;
    line-height:1.4;
}

.terms-box{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--background-item);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.terms-box.has-error{
    border-color:var(--danger-border);
    box-shadow:0 0 0 4px var(--danger-shadow);
}

.terms-checkbox{
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:var(--accent);
    cursor:pointer;
    flex-shrink:0;
}

.terms-label{
    color:var(--muted-text-color);
    font-size:.82rem;
    line-height:1.45;
    cursor:pointer;
}

.terms-label a{
    color:var(--color-accent);
    font-weight:800;
    text-decoration:none;
}

.terms-label a:hover{
    text-decoration:underline;
}

.terms-error{
    display:none;
    margin:8px 0 0 0;
    color:var(--danger-text);
    font-size:.78rem;
    line-height:1.35;
}

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

#error-total{
    display:none;
    color:var(--danger-text);
    font-size:12px;
    line-height:1.35;
}

.payment-token{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.success-icon{
    width:78px;
    height:78px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--success-text);
    background:var(--success-bg);
    border:1px solid var(--success-border);
}

.success-icon i{
    font-size:32px;
}

.payment-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:var(--success-bg);
    color:var(--success-text);
    border:1px solid var(--success-border);
    font-size:.82rem;
    font-weight:800;
}

.success-payment-title{
    text-align: center;
    margin:0;
    font-size:1.65rem;
    line-height:1.16;
    font-weight:900;
    letter-spacing:-.04em;
    color:var(--text-color);
}

.token-box{
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--background-item);
    padding:35px 14px;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: 25px;
}

.success-box{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color: var(--success-text);
    border:1px solid var(--success-border);
    border-radius:18px;
    background:var(--success-bg);
    padding:12px 14px;
}

.success-box i{
    margin-top:2px;
    font-size:15px;
    flex-shrink:0;
}

.success-box p{
    margin:0;
    font-size:.82rem;
    line-height:1.45;
}

.warning-box{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color: var(--warning-text);
    border:1px solid var(--warning-border);
    border-radius:18px;
    background:var(--warning-bg);
    padding:12px 14px;
}

.warning-box i{
    margin-top:2px;
    font-size:15px;
    flex-shrink:0;
}

.warning-box p{
    margin:0;
    font-size:.82rem;
    line-height:1.45;
}

.info-box{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color: var(--info-text);
    border:1px solid var(--info-border);
    border-radius:18px;
    background:var(--info-bg);
    padding:12px 14px;
}

.info-box i{
    margin-top:2px;
    font-size:15px;
    flex-shrink:0;
}

.info-box p{
    margin:0;
    font-size:.82rem;
    line-height:1.45;
}

.descripcion-compra-token{
    margin:0;
    color:var(--muted-text-color);
    font-size:1rem;
    line-height:1.5;
}

.boton-acceder-panel,
.boton-copiar-enlace{
    width:100%;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    border-radius:14px;
    cursor:pointer;
    font-size:.95rem;
    font-weight:900;
    transition:
        opacity .2s ease,
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.boton-acceder-panel{
    border:1px solid var(--color-button);
    background:var(--color-button);
    color:#11151F;
}

html[data-theme="light"] .boton-acceder-panel{
    color:#FFFFFF;
}

.boton-copiar-enlace{
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text-color);
}

.boton-acceder-panel:hover,
.boton-copiar-enlace:hover{
    opacity:.92;
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(37,99,235,.18);
}

.boton-acceder-panel:active,
.boton-copiar-enlace:active{
    transform:translateY(0);
    box-shadow:none;
}

@media (max-width:640px){
    .payment-page{
        align-items:center;
        padding:18px;
    }

    .payment-card{
        padding:24px;
        border-radius:18px;
    }

    .payment-header{
        margin-bottom:22px;
    }

    .payment-title{
        font-size:1.55rem;
    }

    .price-top{
        flex-direction:column;
    }

    .price-amount{
        text-align:left;
    }

    .success-payment-title{
        font-size:1.45rem;
    }
}

@media (max-width:420px){
    .payment-page{
        padding:14px;
    }

    .payment-card{
        padding:22px 18px;
        border-radius:16px;
    }

    .payment-header{
        gap:12px;
    }

    .payment-brand{
        align-items:flex-start;
    }

    .payment-logo{
        width:44px;
        height:44px;
    }

    .payment-title{
        font-size:1.45rem;
    }

    .payment-subtitle{
        font-size:.68rem;
    }

    .theme-toggle{
        width:40px;
        height:40px;
        border-radius:11px;
    }

    .field input,
    .payment-button,
    .stripe-card-box{
        min-height:48px;
        border-radius:13px;
    }

    .field-icon{
        top:24px;
    }

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

    .success-icon{
        width:70px;
        height:70px;
    }

    .success-icon i{
        font-size:28px;
    }

    .primary-button,
    .secondary-button{
        min-height:48px;
        border-radius:13px;
    }
}

@media (max-width:340px){
    .payment-header{
        flex-direction:column;
    }

    .theme-toggle{
        align-self:flex-end;
    }
}