/* ==========================================================================
   Tema "Oscuro premium" de la compra: comprar.php, carrito.php, combo.php y pagar.php
   Se carga despues de cart.css y solo aplica con <body class="ck-body ck-dark">,
   asi renovar.php y Mi cuenta siguen con el tema claro.
   Misma paleta, tipografia y botones que el inicio (home.css / store-ui.css).
   ========================================================================== */

.ck-dark {
    --ck-ink: #f1f5fb;
    --ck-text: #cfd8e6;
    --ck-muted: #9eabc0;
    --ck-faint: #8d9ab0; /* >= 4.5:1 sobre todas las superficies oscuras (WCAG AA) */
    --ck-border: rgba(148, 163, 184, .26);
    --ck-border-soft: rgba(148, 163, 184, .14);
    --ck-bg: #07080c;
    --ck-surface: #0f1118;
    --ck-primary: #1fd8ff;
    --ck-primary-hover: #74e7ff;
    --ck-brand: #5fe1ff;
    --ck-brand-soft: rgba(31, 216, 255, .16);
    --ck-success: #34d399;
    --ck-success-bg: rgba(52, 211, 153, .12);
    --ck-error: #fb7185;
    --ck-warning: #fbbf24;
    --ck-warning-bg: rgba(251, 191, 36, .12);
    --ck-radius: 18px;
    --ck-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);

    /* Propias del tema */
    --ck-on-primary: #03121f;
    --ck-field: #0a0b10;
    --ck-raised: #161923;
    --ck-hover: rgba(148, 163, 184, .1);
    --ck-accent: #a855f7;
    --ck-glow: 0 8px 22px rgba(31, 216, 255, .25);
    --ck-card-bg: linear-gradient(180deg, rgba(18, 20, 28, .95), rgba(12, 13, 19, .95));
    --ck-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -28px rgba(0, 0, 0, .75);

    min-height: 100vh;
    background:
        radial-gradient(900px 520px at 88% -8%, rgba(31, 216, 255, .11), transparent 62%),
        radial-gradient(760px 460px at 100% 4%, rgba(168, 85, 247, .1), transparent 60%),
        var(--ck-bg) no-repeat;
    color: var(--ck-ink);
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: dark;
}

.ck-dark ::selection {
    background: rgba(31, 216, 255, .3);
    color: #ffffff;
}

/* Titulos con la tipografia de los titulos del inicio */
.ck-dark h1,
.ck-dark h2,
.ck-dark .ck-card-title,
.ck-dark .ck-logo span,
.ck-dark .ck-totals .is-total dd,
.ck-dark .ck-mobilebar strong {
    font-family: "Poppins", "Manrope", sans-serif;
}

.ck-dark h1,
.ck-dark h2,
.ck-dark h3 {
    color: #ffffff;
}

.ck-dark :focus-visible {
    outline-color: var(--ck-primary);
}

/* ---------- Barra superior con pasos ---------- */
.ck-dark .ck-topbar {
    border-bottom-color: rgba(148, 163, 184, .12);
    background: rgba(8, 9, 14, .82);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
    backdrop-filter: blur(14px) saturate(140%);
}

.ck-dark.ck-body .ck-logo {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: -.01em;
}

.ck-dark .ck-logo img {
    box-shadow: 0 0 14px rgba(31, 216, 255, .28);
}

.ck-dark .ck-steps li > span {
    background: var(--ck-surface);
}

.ck-dark .ck-steps li.is-current {
    color: #ffffff;
    font-weight: 600;
}

.ck-dark .ck-steps li.is-current > span {
    border-color: var(--ck-primary);
    background: var(--ck-primary);
    color: var(--ck-on-primary);
    font-weight: 800;
    box-shadow: 0 0 0 4px rgba(31, 216, 255, .16), 0 0 18px rgba(31, 216, 255, .35);
}

.ck-dark .ck-steps li.is-done > span {
    border-color: rgba(52, 211, 153, .6);
    background: var(--ck-success-bg);
}

.ck-dark.ck-body .ck-link-muted:hover {
    color: var(--ck-primary);
}

/* ---------- Tarjetas ---------- */
.ck-dark .ck-card {
    border-color: rgba(148, 163, 184, .14);
    background: var(--ck-card-bg);
    box-shadow: var(--ck-card-shadow);
}

.ck-dark .ck-card-head h1 {
    font-size: 1.6rem;
    font-weight: 700;
}

.ck-dark .ck-card-head h2,
.ck-dark .ck-card-title {
    font-size: 1.12rem;
    font-weight: 600;
}

/* Resumen: filete de marca arriba, como las tarjetas destacadas del inicio */
.ck-dark .ck-summary > .ck-card {
    background:
        linear-gradient(90deg, var(--ck-primary), var(--ck-accent)) top / 100% 2px no-repeat,
        linear-gradient(180deg, rgba(22, 24, 34, .97), rgba(12, 13, 19, .97));
    box-shadow: var(--ck-card-shadow), 0 30px 60px -40px rgba(31, 216, 255, .35);
}

.ck-dark .ck-account-chip {
    border-color: rgba(31, 216, 255, .25);
    background: rgba(31, 216, 255, .08);
    color: var(--ck-text);
}

.ck-dark .ck-account-chip i {
    color: var(--ck-primary);
}

/* ---------- Avisos ---------- */
.ck-dark .ck-notice,
.ck-dark .ck-alert {
    background: var(--ck-raised);
}

.ck-dark .ck-notice.is-warning {
    border-color: rgba(251, 191, 36, .35);
    background: var(--ck-warning-bg);
    color: #fcd34d;
}

.ck-dark .ck-notice button {
    background: var(--ck-field);
    color: var(--ck-ink);
}

.ck-dark .ck-notice button:hover {
    border-color: var(--ck-primary);
}

.ck-dark .ck-alert {
    border-color: rgba(251, 113, 133, .4);
    background: rgba(251, 113, 133, .1);
    color: #fda4af;
}

.ck-dark .ck-live-notice.is-success {
    border-color: rgba(52, 211, 153, .4);
    background: var(--ck-success-bg);
    color: #6ee7b7;
}

.ck-dark .ck-live-notice.is-danger {
    border-color: rgba(251, 113, 133, .4);
    background: rgba(251, 113, 133, .1);
    color: #fda4af;
}

.ck-dark .ck-live-notice.is-success button {
    border-color: var(--ck-success);
    background: var(--ck-success);
    color: #03251a;
}

/* ---------- Productos del carrito ---------- */
.ck-dark .ck-item-media,
.ck-dark .ck-similar-media,
.ck-dark .ck-combo-logos span,
.ck-dark .ck-combo-items .ck-similar-media {
    border-color: rgba(148, 163, 184, .16);
    background: linear-gradient(145deg, #1b1e2a, #0b0c12);
    color: #c7d2e3;
}

.ck-dark .ck-item-info h3 {
    color: #ffffff;
}

.ck-dark .ck-item-price strong {
    color: #ffffff;
    font-weight: 700;
}

.ck-dark .ck-qty {
    border-color: var(--ck-border);
    background: var(--ck-field);
}

.ck-dark .ck-qty button {
    color: var(--ck-ink);
}

.ck-dark .ck-qty button:hover:not(:disabled) {
    background: var(--ck-hover);
    color: var(--ck-primary);
}

.ck-dark .ck-qty button:disabled {
    color: #5b6880;
}

.ck-dark .ck-qty output {
    color: #ffffff;
}

.ck-dark .ck-remove:hover {
    background: rgba(251, 113, 133, .12);
}

.ck-dark .ck-item.is-skeleton > span,
.ck-dark .ck-item.is-skeleton i {
    background: linear-gradient(90deg, #161923, #222636, #161923);
    background-size: 200% 100%;
}

.ck-dark .ck-empty-icon {
    background: var(--ck-raised);
    box-shadow: 0 0 0 8px rgba(148, 163, 184, .07);
    color: var(--ck-primary);
}

/* ---------- Producto (comprar.php) ---------- */
.ck-dark .ck-product-media {
    border-color: rgba(31, 216, 255, .22);
    background: linear-gradient(145deg, #1b1e2a, #0b0c12);
    box-shadow: 0 0 0 4px rgba(31, 216, 255, .05), 0 18px 40px -18px rgba(31, 216, 255, .35);
    color: #c7d2e3;
}

.ck-dark .ck-product-media img {
    background: #0f1118;
}

.ck-dark .ck-product-info small {
    color: var(--ck-primary);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.ck-dark .ck-product-info h1 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
}

.ck-dark .ck-product-info p {
    color: var(--ck-muted);
}

.ck-dark .ck-product-qty > span {
    color: var(--ck-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ck-dark .ck-item-meta > span:not([class]) {
    color: var(--ck-text);
}

.ck-dark .ck-card .ck-needs {
    border: 1px solid rgba(31, 216, 255, .2);
    background: rgba(31, 216, 255, .07);
    color: #bdeefc;
}

.ck-dark .ck-needs i {
    color: var(--ck-primary);
}

.ck-dark .ck-needs strong {
    color: #ffffff;
}

.ck-dark .ck-similar a {
    border-color: rgba(148, 163, 184, .16);
    background: var(--ck-raised);
    color: var(--ck-ink);
}

.ck-dark .ck-similar a:hover {
    border-color: var(--ck-primary);
    box-shadow: 0 12px 26px -14px rgba(31, 216, 255, .5);
}

/* ---------- Formularios ---------- */
.ck-dark .ck-field label {
    color: var(--ck-text);
}

.ck-dark .ck-field input,
.ck-dark .ck-field textarea,
.ck-dark .ck-field select,
.ck-dark .ck-coupon-row input {
    border-color: var(--ck-border);
    background: var(--ck-field);
    color: var(--ck-ink);
}

.ck-dark .ck-field input::placeholder,
.ck-dark .ck-field textarea::placeholder,
.ck-dark .ck-coupon-row input::placeholder {
    color: #7f8ca3;
}

.ck-dark .ck-field input:hover,
.ck-dark .ck-field textarea:hover,
.ck-dark .ck-coupon-row input:hover {
    border-color: rgba(148, 163, 184, .4);
}

.ck-dark .ck-field input:focus,
.ck-dark .ck-field textarea:focus,
.ck-dark .ck-coupon-row input:focus {
    border-color: var(--ck-primary);
    box-shadow: 0 0 0 4px rgba(31, 216, 255, .16);
}

/* Autocompletado del navegador: sin el fondo celeste claro */
.ck-dark input:-webkit-autofill,
.ck-dark input:-webkit-autofill:hover,
.ck-dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--ck-field) inset;
    -webkit-text-fill-color: var(--ck-ink);
    caret-color: var(--ck-ink);
}

.ck-dark .ck-field.is-invalid input {
    border-color: rgba(251, 113, 133, .7);
}

.ck-dark .ck-field.is-invalid input:focus {
    box-shadow: 0 0 0 4px rgba(251, 113, 133, .16);
}

.ck-dark .ck-field.is-valid input {
    border-color: rgba(52, 211, 153, .6);
}

.ck-dark .ck-quick-email input[readonly] {
    background: rgba(148, 163, 184, .08);
}

.ck-dark .ck-identity {
    border-color: rgba(52, 211, 153, .35);
}

/* ---------- Metodos de pago y moneda ---------- */
.ck-dark .ck-method,
.ck-dark .ck-currency,
.ck-dark .ck-personal-choice label {
    border-color: var(--ck-border);
    background: var(--ck-field);
}

.ck-dark .ck-method:hover,
.ck-dark .ck-currency:hover,
.ck-dark .ck-personal-choice label:hover {
    border-color: rgba(148, 163, 184, .45);
    background: var(--ck-raised);
}

.ck-dark .ck-method.is-selected,
.ck-dark .ck-currency.is-selected,
.ck-dark .ck-personal-choice label:has(input:checked) {
    border-color: var(--ck-primary);
    background: rgba(31, 216, 255, .08);
    box-shadow: 0 0 0 1px var(--ck-primary), 0 12px 28px -18px rgba(31, 216, 255, .6);
}

.ck-dark .ck-method-radio {
    background: var(--ck-bg);
}

.ck-dark .ck-method.is-selected .ck-method-radio {
    background: var(--ck-on-primary);
}

.ck-dark .ck-method-copy strong,
.ck-dark .ck-currency strong {
    color: #ffffff;
}

.ck-dark .ck-currency-icon {
    background: var(--ck-raised);
    color: var(--ck-text);
}

.ck-dark .ck-currency.is-selected .ck-currency-icon {
    color: var(--ck-on-primary);
}

/* Logos de marcas: se mantienen sobre blanco para que se lean bien */
.ck-dark .ck-method-logos img,
.ck-dark .ck-pay-logos img,
.ck-dark .ck-pay-logos .ck-pay-card {
    border-color: rgba(255, 255, 255, .08);
    background: #ffffff;
}

.ck-dark .ck-method.is-balance {
    border-color: rgba(52, 211, 153, .4);
    background: linear-gradient(135deg, rgba(52, 211, 153, .14), var(--ck-field) 70%);
}

.ck-dark .ck-method.is-balance .ck-method-copy small {
    color: var(--ck-text);
}

.ck-dark .ck-method.is-balance.is-selected {
    border-color: var(--ck-success);
    box-shadow: 0 0 0 1px var(--ck-success);
}

.ck-dark .ck-method.is-balance.is-empty {
    border-color: var(--ck-border);
    background: var(--ck-field);
}

/* ---------- Datos para activar ---------- */
.ck-dark .ck-personal-item {
    border-color: rgba(148, 163, 184, .14);
    background: rgba(7, 8, 12, .55);
}

.ck-dark .ck-card .ck-personal-later,
.ck-dark .ck-quick-note.is-google {
    border: 1px solid rgba(31, 216, 255, .2);
    background: rgba(31, 216, 255, .07);
    color: #bdeefc;
}

.ck-dark .ck-activation {
    border-color: rgba(52, 211, 153, .35);
}

.ck-dark .ck-activation-steps li.is-email {
    background: var(--ck-field);
}

/* ---------- Cuenta rapida ---------- */
.ck-dark .ck-quick-change {
    border-color: var(--ck-border);
    background: var(--ck-raised);
}

.ck-dark .ck-quick-change:hover {
    border-color: var(--ck-primary);
}

.ck-dark .ck-quick-password button:hover {
    background: var(--ck-hover);
}

/* ---------- Resumen ---------- */
.ck-dark .ck-summary-items b,
.ck-dark .ck-totals dd {
    color: #ffffff;
}

.ck-dark .ck-totals .is-total dt {
    color: #ffffff;
}

.ck-dark .ck-totals .is-total dd {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-shadow: 0 0 24px rgba(31, 216, 255, .25);
}

.ck-dark .ck-totals .ck-equiv dd {
    color: var(--ck-muted);
}

.ck-dark .ck-coupon-applied {
    border-color: rgba(52, 211, 153, .55);
}

.ck-dark .ck-trust i {
    background: rgba(31, 216, 255, .08);
    box-shadow: 0 0 0 1px rgba(31, 216, 255, .22);
    color: var(--ck-primary);
}

.ck-dark .ck-trust strong {
    color: #ffffff;
}

/* ---------- Botones (como los del inicio) ---------- */
.ck-dark .ck-btn {
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}

/* Boton principal de un solo color, sin degradado ni brillo (pedido del cliente 2026-10-07): igual en
   la pagina del producto, el carrito, el pago y los combos, y que "Comprar ahora" en el inicio. */
.ck-dark.ck-body .ck-btn-primary {
    border-color: transparent;
    background: var(--ck-primary);
    box-shadow: none;
    color: var(--ck-on-primary);
    font-weight: 700;
}

.ck-dark.ck-body .ck-btn-primary:hover:not(:disabled) {
    border-color: transparent;
    background: #6be6ff;
    box-shadow: none;
    transform: none;
}

.ck-dark .ck-btn-primary:disabled {
    border-color: var(--ck-border-soft);
    background: var(--ck-raised);
    box-shadow: none;
    color: var(--ck-faint);
}

.ck-dark .ck-btn.is-loading::before {
    border-color: rgba(3, 18, 31, .3);
    border-top-color: var(--ck-on-primary);
}

.ck-dark .ck-btn.is-loading:disabled {
    border-color: var(--ck-primary);
    background: var(--ck-primary-hover);
    color: var(--ck-on-primary);
}

.ck-dark.ck-body .ck-btn-secondary {
    border-color: var(--ck-border);
    background: rgba(255, 255, 255, .03);
    color: var(--ck-ink);
}

.ck-dark.ck-body .ck-btn-secondary:hover {
    border-color: var(--ck-primary);
    background: rgba(31, 216, 255, .06);
    color: #ffffff;
}

.ck-dark.ck-body .ck-btn-whatsapp {
    border-color: #25d366;
    background: #25d366;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .28);
    color: #04260f;
}

.ck-dark.ck-body .ck-btn-whatsapp:hover {
    border-color: #45e07e;
    background: #45e07e;
}

.ck-dark .ck-toast {
    border: 1px solid rgba(148, 163, 184, .2);
    background: var(--ck-raised);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    color: #ffffff;
}

/* ---------- Confirmacion ---------- */
.ck-dark .ck-success-icon {
    box-shadow: 0 0 0 10px rgba(52, 211, 153, .07), 0 0 40px rgba(52, 211, 153, .3);
}

.ck-dark .ck-success-head h1 {
    font-weight: 700;
}

.ck-dark .ck-timeline li > span {
    background: var(--ck-surface);
}

.ck-dark .ck-timeline li.is-done > span {
    background: var(--ck-success-bg);
}

.ck-dark .ck-timeline li.is-current > span {
    background: var(--ck-primary);
    color: var(--ck-on-primary);
    font-weight: 800;
    box-shadow: 0 0 0 4px rgba(31, 216, 255, .14);
}

.ck-dark .ck-order-list b {
    color: #ffffff;
}

.ck-dark.ck-body .ck-text-link:hover {
    color: var(--ck-primary);
}

/* ---------- Combo ---------- */
.ck-dark .ck-combo-logos img {
    background: #0f1118;
}

.ck-dark .ck-combo-items li {
    border-color: rgba(148, 163, 184, .14);
    background: var(--ck-field);
}

.ck-dark .ck-combo-items li strong {
    color: #ffffff;
}

/* ==========================================================================
   Pagar pedido o recarga (pagar.php)
   ========================================================================== */
.ck-dark .ck-pay-num {
    color: var(--ck-on-primary);
    box-shadow: 0 0 14px rgba(31, 216, 255, .35);
}

.ck-dark .ck-pay-amount {
    border-color: rgba(31, 216, 255, .3);
    background: linear-gradient(135deg, rgba(31, 216, 255, .14), rgba(31, 216, 255, .04) 70%);
}

.ck-dark .ck-pay-amount strong {
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    text-shadow: 0 0 24px rgba(31, 216, 255, .25);
}

.ck-dark .ck-copy,
.ck-dark .ck-pay-tabs button {
    border-color: var(--ck-border);
    background: var(--ck-field);
    color: var(--ck-text);
}

.ck-dark .ck-copy:hover,
.ck-dark .ck-pay-tabs button:hover {
    border-color: var(--ck-primary);
    color: var(--ck-primary);
}

.ck-dark .ck-copy.is-copied {
    border-color: var(--ck-success);
    background: var(--ck-success-bg);
    color: var(--ck-success);
}

.ck-dark .ck-pay-tabs button.is-active {
    border-color: var(--ck-primary);
    background: rgba(31, 216, 255, .08);
    box-shadow: 0 0 0 1px var(--ck-primary);
    color: #ffffff;
}

/* Logos de las billeteras en las pestanas: sobre blanco, como en el resto de la tienda */
.ck-dark .ck-pay-tabs button img {
    width: 40px;
    height: 24px;
    padding: 2px 4px;
    border-radius: 5px;
    background: #ffffff;
}

.ck-dark .ck-pay-row,
.ck-dark .ck-pay-facts div,
.ck-dark .ck-renew-dates div {
    border-color: rgba(148, 163, 184, .14);
    background: rgba(7, 8, 12, .55);
}

.ck-dark .ck-pay-row strong,
.ck-dark .ck-pay-facts dd {
    color: #ffffff;
}

/* QR: marco oscuro y el codigo sobre blanco (las billeteras no leen un QR invertido) */
.ck-dark .ck-pay-qr {
    border-color: var(--ck-border);
    background: var(--ck-field);
}

.ck-dark .ck-pay-qr-open {
    padding: 8px;
    background: #ffffff;
}

.ck-dark .ck-qr-modal {
    background: rgba(2, 6, 23, .82);
    backdrop-filter: blur(6px);
}

.ck-dark .ck-qr-modal-card {
    border: 1px solid rgba(148, 163, 184, .18);
    background: var(--ck-raised);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}

.ck-dark .ck-qr-modal-card img {
    padding: 12px;
    border-radius: 14px;
    background: #ffffff;
}

.ck-dark .ck-qr-modal-card strong,
.ck-dark .ck-qr-modal-card p b {
    color: #ffffff;
}

.ck-dark .ck-qr-modal-close {
    background: var(--ck-hover);
    color: var(--ck-ink);
}

.ck-dark .ck-qr-modal-close:hover {
    background: rgba(148, 163, 184, .2);
}

.ck-dark .ck-pay-tip {
    border: 1px solid rgba(251, 191, 36, .25);
    color: #fcd34d;
}

.ck-dark .ck-pay-tip.is-chain,
.ck-dark .ck-pay-wait {
    border: 1px solid rgba(52, 211, 153, .25);
    background: var(--ck-success-bg);
    color: #6ee7b7;
}

.ck-dark .ck-chain-verified {
    border: 1px solid rgba(52, 211, 153, .25);
    color: #6ee7b7 !important;
}

/* Guia paso a paso de Lemon Cash */
.ck-dark .ck-pay-steps {
    border-color: rgba(52, 211, 153, .3);
    background: rgba(52, 211, 153, .08);
    color: #a7f3d0;
}

.ck-dark .ck-pay-steps li::before {
    background: var(--ck-success);
    color: #03251a;
}

.ck-dark .ck-pay-empty {
    border-color: var(--ck-border);
    background: rgba(7, 8, 12, .4);
}

/* Zona para soltar el comprobante */
.ck-dark .ck-drop {
    border-color: rgba(148, 163, 184, .32);
    background: rgba(7, 8, 12, .55);
}

.ck-dark .ck-drop:hover,
.ck-dark .ck-drop.is-dragging {
    border-color: var(--ck-primary);
    background: rgba(31, 216, 255, .07);
}

.ck-dark .ck-drop.is-invalid {
    border-color: rgba(251, 113, 133, .7);
    background: rgba(251, 113, 133, .08);
}

.ck-dark .ck-drop.has-file {
    border-color: var(--ck-success);
    background: var(--ck-success-bg);
}

.ck-dark .ck-drop-thumb,
.ck-dark .ck-drop-remove {
    background: var(--ck-raised);
}

.ck-dark .ck-drop-thumb {
    color: var(--ck-error);
}

.ck-dark .ck-drop-remove:hover,
.ck-dark .ck-hint.is-error {
    color: var(--ck-error);
}

.ck-dark .ck-drop-empty strong,
.ck-dark .ck-drop-file strong {
    color: #ffffff;
}

/* Estados del pago */
.ck-dark .ck-pay-status h1 {
    font-weight: 700;
}

.ck-dark .ck-pay-status.is-review .ck-pay-status-icon {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .3);
}

.ck-dark .ck-pay-status.is-ok .ck-pay-status-icon {
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .3);
}

.ck-dark .ck-pay-status.is-muted .ck-pay-status-icon {
    background: var(--ck-hover);
}

.ck-dark .ck-pay-status.is-chain .ck-pay-status-icon {
    background: var(--ck-brand-soft);
}

.ck-dark .ck-pay-status.is-complete {
    border-color: rgba(52, 211, 153, .4);
    background: linear-gradient(135deg, rgba(52, 211, 153, .16), rgba(12, 13, 19, .95) 70%);
    box-shadow: inset 4px 0 0 var(--ck-success), var(--ck-card-shadow);
}

.ck-dark .ck-pay-status.is-complete .ck-pay-status-icon {
    background: var(--ck-success);
    box-shadow: 0 0 22px rgba(52, 211, 153, .4);
    color: #03251a;
}

/* Accesos entregados */
.ck-dark .ck-access-item {
    border-color: rgba(148, 163, 184, .14);
    background: rgba(7, 8, 12, .55);
}

.ck-dark .ck-access-item.is-delivered {
    border-color: rgba(52, 211, 153, .35);
    background: rgba(52, 211, 153, .06);
}

.ck-dark .ck-access-item.is-delivered .ck-access-state {
    background: var(--ck-success);
    color: #03251a;
}

.ck-dark .ck-access-secret {
    border-color: var(--ck-border);
    background: var(--ck-field);
}

.ck-dark .ck-access-actions {
    background: rgba(148, 163, 184, .06);
}

.ck-dark .ck-access-confirm {
    border-color: rgba(31, 216, 255, .25);
    background: rgba(31, 216, 255, .06);
}

.ck-dark .ck-access-report textarea,
.ck-dark .ck-access-report select {
    border-color: var(--ck-border);
    background: var(--ck-field);
    color: var(--ck-ink);
}

.ck-dark .ck-access-report textarea:focus,
.ck-dark .ck-access-report select:focus {
    border-color: var(--ck-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(31, 216, 255, .16);
}

.ck-dark .ck-btn-success {
    background: var(--ck-success);
    box-shadow: 0 10px 24px rgba(52, 211, 153, .25);
    color: #03251a;
}

.ck-dark .ck-btn-success:hover {
    background: #6ee7b7;
}

/* Saldo de la cuenta */
.ck-dark .ck-balance.is-ready {
    border-color: rgba(52, 211, 153, .4);
    background: linear-gradient(135deg, rgba(52, 211, 153, .14), rgba(12, 13, 19, .95) 65%);
}

.ck-dark .ck-balance.is-ready .ck-balance-icon {
    background: rgba(52, 211, 153, .18);
}

/* Renovacion */
.ck-dark .ck-renew-dates .is-new {
    border-color: rgba(52, 211, 153, .35);
    background: var(--ck-success-bg);
}

.ck-dark .ck-renew-open {
    border-color: rgba(31, 216, 255, .3);
    background: rgba(31, 216, 255, .08);
    color: #bdeefc;
}

/* ---------- Pie ---------- */
.ck-dark .ck-footer {
    border-top-color: rgba(148, 163, 184, .12);
    background: rgba(5, 6, 8, .6);
}

.ck-dark.ck-body .ck-footer a:hover {
    color: var(--ck-primary);
}

@media (max-width: 860px) {
    .ck-dark .ck-mobilebar {
        border-top-color: rgba(148, 163, 184, .16);
        background: rgba(9, 10, 15, .94);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, .45);
        backdrop-filter: blur(14px) saturate(140%);
    }

    .ck-dark .ck-mobilebar strong {
        color: #ffffff;
    }
}

@media (max-width: 560px) {
    .ck-dark .ck-product-info h1 {
        font-size: 1.3rem;
    }

    .ck-dark .ck-card-head h1 {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ck-dark.ck-body .ck-btn-primary:hover:not(:disabled) {
        transform: none;
    }
}

/* ==========================================================================
   Pagina del producto (comprar.php, body.ck-product-page): mismo estilo profesional que la tarjeta del
   inicio (pedido del cliente 2026-10-07). Imagen y titulo planos y precio estilo Mercado Libre.
   El boton de un solo color esta arriba (.ck-btn-primary) y aplica tambien al carrito y al pago.
   ========================================================================== */
.ck-product-page .ck-product {
    grid-template-columns: 140px minmax(0, 1fr) auto;
    align-items: start;
}

.ck-product-page .ck-product-media {
    width: 140px;
    height: 140px;
    border-color: rgba(148, 163, 184, .16);
    border-radius: 14px;
    background: #0f1117;
    box-shadow: none;
}

.ck-product-page .ck-product-info small {
    color: var(--ck-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
}

.ck-product-page .ck-product-info h1 {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
}

/* Precio estilo Mercado Libre */
.ck-price {
    display: grid;
    justify-items: start;
    gap: 2px;
    margin-top: 14px;
}

.ck-price del {
    color: var(--ck-faint);
    font-size: .85rem;
    font-weight: 500;
    text-decoration-thickness: 1px;
}

.ck-price-now {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
}

.ck-price-now strong {
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.ck-price-off {
    color: #34d399;
    font-size: .95rem;
    font-weight: 700;
}

/* Mas especificos que ".ck-dark .ck-product-info small" (categoria en mayusculas) */
.ck-product-page .ck-product-info .ck-price-cycle,
.ck-product-page .ck-product-info .ck-price-alt {
    color: var(--ck-muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.ck-product-page .ck-product-info .ck-price-alt {
    margin-top: 2px;
    color: var(--ck-faint);
    font-size: .8rem;
}

.ck-product-page .ck-item-meta {
    margin-top: 10px;
}

@media (max-width: 560px) {
    .ck-product-page .ck-product {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .ck-product-page .ck-product-media {
        width: 88px;
        height: 88px;
    }

    .ck-product-page .ck-product-info h1 {
        font-size: 1.2rem;
    }

    .ck-price-now strong {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   Botones en azul (pedido del cliente 2026-10-10: el celeste no quedaba). Un solo azul en toda la tienda:
   #2563eb con letra blanca; al pasar el mouse, un azul un poco mas claro (#3b82f6).
   ========================================================================== */
.ck-dark.ck-body .ck-btn-primary {
    background: #2563eb;
    color: #ffffff;
}

.ck-dark.ck-body .ck-btn-primary:hover:not(:disabled) {
    background: #3b82f6;
    color: #ffffff;
}

.ck-dark .ck-btn.is-loading:disabled {
    background: #3b82f6;
    color: #ffffff;
}

/* Descripcion del producto bajo el nombre (comprar.php, 2026-11-02): completa, sin cortar a 2 lineas como la regla
   general de .ck-product-info p, con los saltos de linea del panel y el mismo recuadro con linea cian de la tarjeta. */
.ck-dark .ck-product-info p.ck-product-desc {
    display: block;
    overflow: visible;
    margin: 12px 0 0 !important;
    padding: 10px 14px;
    border-left: 3px solid var(--ck-primary);
    border-radius: 0 10px 10px 0;
    background: rgba(148, 163, 184, .07);
    color: #d3dbe7;
    font-size: .95rem;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset;
    /* Justificado (pedido del cliente); con guiones en español para que no queden espacios grandes entre palabras. */
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* "Información del producto" y "Condiciones de uso" de la página del producto: justificados como la descripción
   (pedido del cliente 2026-11-02; en la vista rápida del inicio ya lo estaban). */
.ck-dark .ck-details-block li {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Pagar: lista de medios de pago (2026-11-05), versión oscura. Sobria: sin brillos, la elegida con borde cian. */
.ck-dark .ck-paylist {
    border-color: var(--ck-border);
    background: var(--ck-field);
}

.ck-dark .ck-payopt + .ck-payopt {
    border-top-color: var(--ck-border-soft);
}

.ck-dark .ck-payopt.is-active {
    background: var(--ck-raised);
    box-shadow: inset 3px 0 0 var(--ck-primary);
}

.ck-dark .ck-payopt-head:hover {
    background: var(--ck-hover);
}

.ck-dark .ck-payopt-head.is-active:hover {
    background: transparent;
}

.ck-dark .ck-payopt-head.is-active .ck-payopt-radio {
    box-shadow: inset 0 0 0 3px var(--ck-raised);
}

.ck-dark .ck-payopt-text strong {
    color: #ffffff;
}

.ck-dark .ck-payopt .ck-pay-steps {
    border-color: var(--ck-border-soft);
    background: rgba(255, 255, 255, .02);
    color: var(--ck-text);
}

.ck-dark .ck-payopt .ck-pay-steps li::before {
    background: var(--ck-primary);
    color: var(--ck-on-primary);
}

.ck-dark .ck-payopt .ck-pay-tip.is-chain {
    border: 0;
    background: transparent;
    color: var(--ck-muted);
}

.ck-dark .ck-payopt .ck-pay-tip.is-chain strong {
    color: var(--ck-text);
}

.ck-dark .ck-payopt .ck-pay-tip.is-chain i {
    color: var(--ck-success);
}

/* Pagar: formulario de Culqi incrustado, versión oscura (el formulario de Culqi es claro: va en una ficha blanca) */
.ck-dark .ck-culqi-frame {
    border-color: var(--ck-border);
    background: #ffffff;
}

.ck-dark .ck-culqi-secure {
    color: var(--ck-muted);
}

.ck-dark .ck-culqi-secure i {
    color: var(--ck-success);
}

.ck-dark .ck-culqi-pending {
    border-color: rgba(52, 211, 153, .3);
    background: var(--ck-success-bg);
    color: #a7f3d0;
}

.ck-dark .ck-culqi-pending strong,
.ck-dark .ck-culqi-pending b {
    color: #ffffff;
}

.ck-dark .ck-culqi-embed + .ck-paylist-title {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--ck-border-soft);
}