/*
 * Tienda MU Space — misma piel crema/lila que el sitio.
 *
 * Solo presentación: esta hoja se carga al final del <head> de cada página y
 * pisa los estilos oscuros que cada una trae en su <style>. No cambia HTML,
 * formularios ni nada de la lógica de pagos. Para volver al aspecto anterior
 * basta con quitar el <link> a este archivo.
 */
:root {
	--sp-cream: #f3f2ef;
	--sp-paper: #fffefa;
	--sp-ink: #2f2d3a;
	--sp-text: #5a5a67;
	--sp-muted: #7d7b89;
	--sp-plum: #5b4878;
	--sp-plum-deep: #35314a;
	--sp-lilac: #ded1f1;
	--sp-lilac-tint: #e9e2ed;
	--sp-sky-tint: #e2eaf0;
	--sp-sand-tint: #ede8db;
	--sp-sage-tint: #e4eee6;
	--sp-line: #e6e1ea;
	--sp-sage: #3f7d56;
	--sp-coral: #b4513a;
	--sp-gold: #d6a531;
	--sp-gold-tint: #fbf2d8;
	--sp-shadow: 0 8px 28px rgba(64, 61, 82, .07);
	--sp-font-display: 'Fraunces', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
	--sp-font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Base ---------- */
body { --bs-body-color: var(--sp-text); --bs-body-bg: var(--sp-cream); --bs-border-color: var(--sp-line); --bs-secondary-color: var(--sp-muted); --bs-link-color: var(--sp-plum); --bs-link-color-rgb: 91, 72, 120; --bs-link-hover-color-rgb: 122, 98, 160;
	background: var(--sp-cream); background-image: none; color: var(--sp-text); font-family: var(--sp-font-body); font-size: 15px; line-height: 1.6; }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none;
	background: radial-gradient(42% 38% at 92% 18%, rgba(222, 209, 241, .6), transparent 70%), radial-gradient(40% 36% at 4% 58%, rgba(214, 228, 238, .6), transparent 70%), radial-gradient(38% 30% at 80% 96%, rgba(236, 227, 204, .6), transparent 70%); }
body > .container, body > .wrap { position: relative; z-index: 1; }
h1, h2, h3, .brand-font, .titulo-epico { font-family: var(--sp-font-display) !important; font-weight: 500 !important; letter-spacing: -.015em !important; color: var(--sp-ink) !important; text-shadow: none !important; }
a { color: var(--sp-plum); }
table { color: var(--sp-text); }
.text-warning, .text-info { color: var(--sp-plum) !important; }
.text-light, .text-white { color: var(--sp-ink) !important; }
.text-secondary, .note, .perk, .muted, .nota-pie, .id-box { color: var(--sp-muted) !important; }
.text-success, .ok, .status-pagado { color: var(--sp-sage) !important; }
.text-danger, .err, .status-rechazada, .status-cancelada, .status-expirada { color: var(--sp-coral) !important; }
.warn, .status-pendiente { color: #9a7410 !important; }
.status-iniciada, .status-redirigida { color: #3f5c75 !important; }

/* ---------- Barra superior en píldora ---------- */
.navbar { position: sticky; top: 12px; z-index: 50; width: calc(100% - 32px); max-width: 1320px; margin: 12px auto 0; padding: 10px 8px; background: rgba(251, 250, 247, .92) !important; border: 1px solid rgba(255, 255, 255, .8); border-radius: 24px; box-shadow: 0 8px 32px rgba(16, 19, 36, .08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sp-brand-tienda { display: flex; align-items: center; gap: 12px; color: var(--sp-ink); text-decoration: none; }
.sp-brand-tienda:hover { color: var(--sp-ink); }
.sp-chip-tienda { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--sp-plum-deep); flex-shrink: 0; }
.sp-chip-tienda img { width: 42px; height: 42px; object-fit: contain; display: block; }
.sp-brand-tienda-text b { display: block; font: 700 14px/1.1 var(--sp-font-body); letter-spacing: .14em; color: var(--sp-ink); }
.sp-brand-tienda-text small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--sp-muted); }
@media (max-width: 575.98px) { .sp-brand-tienda-text { display: none; } }
.sp-logo-tienda { display: block; width: min(170px, 46vw); height: auto; margin: 8px auto 4px; filter: drop-shadow(0 8px 20px rgba(53, 49, 74, .3)); }
.sp-logo-tienda-sm { width: 120px; margin-top: 0; }
.navbar .text-warning { display: inline-block; padding: 8px 14px; border-radius: 100px; background: var(--sp-sage-tint); color: var(--sp-sage) !important; font-size: 13px; font-variant-numeric: tabular-nums; }
.navbar .btn { padding: 8px 16px; font-size: 14px; }
.navbar .form-select { border-radius: 100px; padding-left: 14px; }

/* ---------- Botones ---------- */
.btn { border-radius: 100px; font-weight: 700; font-family: var(--sp-font-body); }
.btn-primary, .btn-login, .btn-home { --bs-btn-color: #fff; --bs-btn-bg: var(--sp-plum); --bs-btn-border-color: var(--sp-plum); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6a5589; --bs-btn-hover-border-color: #6a5589; --bs-btn-active-color: #fff; --bs-btn-active-bg: #4b3a66; --bs-btn-active-border-color: #4b3a66; --bs-btn-disabled-bg: var(--sp-plum); --bs-btn-disabled-border-color: var(--sp-plum); }
.btn-login, .btn-home, .btn-login:hover, .btn-home:hover { background: var(--sp-plum); color: #fff; border: 0; border-radius: 100px; }
.btn-login:hover, .btn-home:hover { background: #6a5589; }
.btn-warning { --bs-btn-color: #fff; --bs-btn-bg: var(--sp-plum); --bs-btn-border-color: var(--sp-plum); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6a5589; --bs-btn-hover-border-color: #6a5589; --bs-btn-active-color: #fff; --bs-btn-active-bg: #4b3a66; --bs-btn-active-border-color: #4b3a66; }
.btn-success { --bs-btn-bg: var(--sp-sage); --bs-btn-border-color: var(--sp-sage); --bs-btn-hover-bg: #356a49; --bs-btn-hover-border-color: #356a49; }
.btn-light { --bs-btn-color: var(--sp-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sp-line); --bs-btn-hover-bg: #f5f3f6; --bs-btn-hover-border-color: var(--sp-line); }
.btn-outline-light, .btn-outline-info, .btn-outline-secondary { --bs-btn-color: var(--sp-text); --bs-btn-bg: #ebe7ee; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--sp-plum); --bs-btn-hover-bg: var(--sp-lilac); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--sp-plum); --bs-btn-active-bg: var(--sp-lilac); --bs-btn-active-border-color: transparent; }
.btn-outline-warning { --bs-btn-color: var(--sp-plum); --bs-btn-border-color: var(--sp-line); --bs-btn-hover-color: var(--sp-plum); --bs-btn-hover-bg: var(--sp-lilac-tint); --bs-btn-hover-border-color: var(--sp-line); --bs-btn-active-color: var(--sp-plum); --bs-btn-active-bg: var(--sp-lilac); --bs-btn-active-border-color: var(--sp-line); }
.btn-pay { border-radius: 100px; }

/* ---------- Formularios, avisos, tablas ---------- */
.form-control, .form-select { background-color: #fff; color: var(--sp-ink); border: 1px solid #d9d3df; border-radius: 14px; }
.form-control:focus, .form-select:focus { background-color: #fff; color: var(--sp-ink); border-color: var(--sp-plum); box-shadow: 0 0 0 4px rgba(222, 209, 241, .7); }
.form-label, label { color: var(--sp-ink); font-weight: 600; }
.alert { border: 0; border-radius: 16px; }
.alert-warning { --bs-alert-bg: var(--sp-gold-tint); --bs-alert-color: #7a5a0f; }
.alert-danger { --bs-alert-bg: #f6dfd6; --bs-alert-color: #8a3a26; }
.alert-success { --bs-alert-bg: var(--sp-sage-tint); --bs-alert-color: #2c5c3e; }
.alert-info { --bs-alert-bg: var(--sp-sky-tint); --bs-alert-color: #3f5c75; }
.table, .table-dark { --bs-table-color: var(--sp-text); --bs-table-bg: transparent; --bs-table-border-color: #eee8f1; --bs-table-striped-color: var(--sp-text); --bs-table-striped-bg: #f9f7fb; --bs-table-hover-color: var(--sp-ink); --bs-table-hover-bg: #f5f3f6; }
.table thead th { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); }

/* ---------- Portada de la tienda ---------- */
.titulo-epico { font-size: clamp(34px, 5vw, 54px); line-height: 1.06; }
.hub-card, .pack-card, .prod-card { background: var(--sp-paper); border: 0; border-radius: 20px; box-shadow: var(--sp-shadow); color: var(--sp-text); }
.hub-card:hover, .prod-card:hover { color: var(--sp-text); box-shadow: 0 14px 30px rgba(64, 61, 82, .12); }
.hub-title { font-family: var(--sp-font-display); font-size: 22px; font-weight: 500; color: var(--sp-ink) !important; }
.price { font-family: var(--sp-font-display); font-weight: 500; color: var(--sp-plum); }
.prod-img-wrap { background: var(--sp-lilac-tint); }

/* ---------- Tarjetas de historial, reclamo, login y estado de pago ---------- */
.historial-card, .card-tbl, .login-box, .card-est { background: var(--sp-paper); border: 0; border-radius: 28px; box-shadow: var(--sp-shadow); color: var(--sp-text); }
.panel { background: #f5f3f6; border: 0; border-radius: 16px; }
.panel--err { background: #f6dfd6; }
.dato + .dato { border-top-color: var(--sp-line); }
.dato-label { color: var(--sp-muted); }
.dato-valor { color: var(--sp-ink); }
.subtitulo { font-family: var(--sp-font-body); color: var(--sp-muted); }
.btn-metodo, .metodo-btn { background: var(--sp-paper); border: 1px solid var(--sp-line); color: var(--sp-ink); border-radius: 18px; }
.btn-metodo:hover, .metodo-btn:hover { background: var(--sp-lilac-tint); border-color: var(--sp-plum); color: var(--sp-ink); }
.btn-metodo small, .metodo-detalle { color: var(--sp-muted); }
.nota { background: var(--sp-gold-tint); border: 0; border-radius: 14px; color: #7a5a0f; }
.monto-grande { font-family: var(--sp-font-display); color: var(--sp-plum); letter-spacing: 0; }
.cd { color: var(--sp-coral); }

/* ---------- Planes VIP ---------- */
.vip-hero p { color: var(--sp-muted); }
.plan { background: var(--sp-paper); border: 2px solid transparent; border-radius: 28px; box-shadow: var(--sp-shadow); }
.plan:hover { border-color: var(--sp-lilac); box-shadow: 0 16px 36px rgba(64, 61, 82, .14); }
.plan.destacado { border-color: var(--sp-plum); box-shadow: 0 16px 40px rgba(91, 72, 120, .18); }
.plan.destacado::after { display: none; }
.plan-badge { background: var(--sp-plum); color: #fff; font-family: var(--sp-font-body); font-weight: 700; box-shadow: none; }
.plan-medalla { color: var(--sp-ink); box-shadow: none; }
.plan-nombre { font-family: var(--sp-font-display); font-weight: 500; font-size: 24px; letter-spacing: 0; color: var(--sp-ink); }
.plan .price { font-family: var(--sp-font-display); font-weight: 500; color: var(--sp-ink); }
.price .moneda, .precio-ars { color: var(--sp-muted); }
.precio-dia { color: var(--sp-ink); }
.dur-btn { background: #f5f3f6; color: var(--sp-text); border: 1px solid transparent; border-radius: 100px; font-family: var(--sp-font-body); }
.dur-btn:hover { border-color: var(--sp-plum); color: var(--sp-plum); }
.dur-btn.activa { background: var(--sp-lilac); border-color: var(--sp-plum); color: var(--sp-plum); }
.dur-ahorro { background: var(--sp-sage); font-family: var(--sp-font-body); box-shadow: none; }
.stat { background: #f7f5f8; border: 0; border-radius: 16px; }
.stat-ico { color: var(--sp-plum); }
.stat-label, .stat-free { color: var(--sp-muted); }
.stat-valor { font-family: var(--sp-font-display); font-weight: 500; color: var(--sp-ink); }
.stat-free-tag { background: #ebe7ee; border: 0; color: var(--sp-muted); }
.stat-free-val { text-decoration-color: #b9b4c2; }
.stat-pill { background: var(--sp-sage-tint); color: var(--sp-sage); border: 0; font-family: var(--sp-font-body); }
.stat-pill.peor { background: #f6dfd6; color: var(--sp-coral); }
.stat.stat-igual .stat-valor { color: var(--sp-muted); }
.stat.stat-igual .stat-pill { background: #eeecef; color: var(--sp-muted); }
.perk-list li { color: var(--sp-text); }
.perk-list li::before { color: var(--sp-plum); }
.btn-mas { color: var(--sp-plum); }
.btn-mas:hover { color: var(--sp-plum); }
.btn-comprar { --bs-btn-color: #fff; --bs-btn-bg: var(--sp-plum); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6a5589; --bs-btn-active-color: #fff; --bs-btn-active-bg: #4b3a66; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--sp-plum); border-radius: 100px; font-family: var(--sp-font-body); letter-spacing: 0; color: #fff; background: var(--sp-plum); }
.btn-comprar:hover, .btn-comprar:focus, .btn-comprar:focus-visible, .btn-comprar:active, .btn-comprar.active, .btn-comprar:disabled { color: #fff; background: var(--sp-plum); }
.btn-comprar:hover { filter: none; background: #6a5589; box-shadow: 0 10px 22px rgba(91, 72, 120, .25); }
.btn-comprar:focus-visible { outline-color: var(--sp-plum); }
.comparar > summary { background: var(--sp-paper); border-color: var(--sp-line); color: var(--sp-ink); border-radius: 100px; }
.comparar > summary:hover { border-color: var(--sp-plum); color: var(--sp-plum); }
.tabla-wrap { border: 0; border-radius: 20px; background: var(--sp-paper); box-shadow: var(--sp-shadow); }
table.tabla-comp th, table.tabla-comp td { border-bottom-color: #eee8f1; }
table.tabla-comp thead th { background: #f5f3f6; font-family: var(--sp-font-body); color: var(--sp-muted); }
table.tabla-comp tbody tr:hover { background: #f9f7fb; }
.celda-benef { color: var(--sp-ink); }
.celda-benef i, .celda-free { color: var(--sp-muted); }
.celda-vip { color: var(--sp-ink); }
.celda-igual { color: #a9a6b3; }
.celda-delta { color: var(--sp-sage); }
.celda-delta.peor { color: var(--sp-coral); }
table.tabla-comp tbody td:last-child { background: var(--sp-gold-tint); }

/* Ventana de medios de pago. Su <style> va dentro del <body>, después de esta
   hoja, así que estos selectores llevan "body" para ganarle por especificidad. */
body .modal-content, body .modal-pago { background: var(--sp-paper); border: 0; border-radius: 28px; color: var(--sp-text); }
body .modal-pago .modal-header { border-bottom-color: var(--sp-line); }
body .modal-pago .modal-title { font-family: var(--sp-font-display); font-weight: 500; font-size: 22px; color: var(--sp-ink); }
body .btn-close-white { filter: none; }
body .resumen-vip { background: #f5f3f6; border: 0; border-radius: 16px; }
body .resumen-nivel { font-family: var(--sp-font-display); color: var(--sp-ink) !important; }
body .resumen-precio { font-family: var(--sp-font-display); color: var(--sp-plum); }
body .metodo-btn { background: var(--sp-paper); border: 1px solid var(--sp-line); color: var(--sp-ink); border-radius: 18px; }
body .metodo-btn:hover { background: var(--sp-lilac-tint); border-color: var(--sp-plum); color: var(--sp-ink); }
body .metodo-btn:focus-visible { outline-color: var(--sp-plum); }
body .metodo-detalle { color: var(--sp-muted); }
body .metodo-ico { color: var(--sp-plum); }
body .metodo-chip-mas { background: #ebe7ee; color: var(--sp-muted); }
body .modal-body, body .modal-body .text-secondary { color: var(--sp-text); }

/* Campos que traen utilidades oscuras de Bootstrap */
.form-control.bg-dark, .form-select.bg-dark, .form-control.bg-secondary { background-color: #fff !important; color: var(--sp-ink) !important; border-color: #d9d3df !important; }

/* ---------- Aviso de compra sin terminar ---------- */
.rec, .rec--err, .rec--info, .rec--ok { background: var(--sp-paper); border: 0; border-left: 6px solid var(--sp-gold); border-radius: 20px; box-shadow: var(--sp-shadow); color: var(--sp-text); font-family: var(--sp-font-body); }
.rec--err { border-left-color: var(--sp-coral); }
.rec--info { border-left-color: #7fa3c4; }
.rec--ok { border-left-color: var(--sp-sage); }
.rec-titulo, .rec--err .rec-titulo, .rec--info .rec-titulo, .rec--ok .rec-titulo { font-family: var(--sp-font-body); color: var(--sp-ink); text-shadow: none; text-transform: none; letter-spacing: 0; font-size: 16px; }
.rec-bajada b { color: var(--sp-ink); }
.rec-btn { background: var(--sp-plum); border-radius: 100px; box-shadow: none; }
.rec-link { color: var(--sp-plum) !important; }
.rec-link:hover { color: #7a62a0 !important; }
.rec-cerrar { color: var(--sp-muted) !important; }
.rec-cerrar:hover, .rec-cerrar:focus { color: var(--sp-ink) !important; background: #f0ecf4; }

@media (max-width: 575.98px) { .navbar { top: 8px; border-radius: 20px; } .navbar .btn { padding: 7px 12px; font-size: 13px; } }