/*
 * MU Space — piel crema/lila para los módulos de WebEngine (login, registro,
 * rankings, panel de usuario, noticias, etc.).
 *
 * Estos módulos imprimen HTML de Bootstrap 3 que no controla el template, así
 * que acá se viste ese HTML con los mismos colores y formas de space-ui.css.
 * Se carga después de bootstrap.min.css y solo en body.sp-legacy.
 */
body.sp-legacy { margin: 0; background: var(--sp-cream); color: var(--sp-text); font: 400 15px/1.65 var(--sp-font-body); overflow-x: clip; }
.sp-module { padding-top: clamp(28px, 4vw, 52px); min-height: 55vh; }
.sp-module h1, .sp-module h2, .sp-module h3, .sp-module h4 { font-family: var(--sp-font-display); font-weight: 500; letter-spacing: -.015em; color: var(--sp-ink); }
.sp-module a { color: var(--sp-plum); text-decoration: none; }
.sp-module a:hover, .sp-module a:focus { color: #7a62a0; text-decoration: none; }
.sp-module hr { border-color: var(--sp-line); }
.sp-module .alt, .sp-module .text-muted, .sp-module .smalltext { color: var(--sp-muted); }
.sp-module code { background: var(--sp-lilac-tint); color: var(--sp-plum); border-radius: 8px; padding: 2px 8px; }

/* Título de página */
.sp-module .page-title { margin: 0 0 26px; }
.sp-module .page-title span { display: block; font: 500 clamp(34px, 4.6vw, 54px)/1.06 var(--sp-font-display); letter-spacing: -.015em; color: var(--sp-ink); text-wrap: balance; }

/* Paneles */
.sp-module .panel { border: 0; border-radius: var(--sp-r-md); background: var(--sp-paper); box-shadow: var(--sp-shadow); margin-bottom: 22px; overflow: hidden; }
.sp-module .panel-heading { background: transparent; border: 0; border-bottom: 1px solid var(--sp-line); border-radius: 0; padding: 18px 24px; color: var(--sp-ink); }
.sp-module .panel-title { font: 500 20px/1.3 var(--sp-font-display); color: #5b5067; }
.sp-module .panel-body { padding: 24px; }
.sp-module .panel-footer { background: #f5f3f6; border: 0; padding: 14px 24px; color: var(--sp-muted); font-size: 13px; }
.sp-module .panel-news .panel-title a { color: var(--sp-ink); }
.sp-module .panel-news .panel-title a:hover { color: var(--sp-plum); }
.sp-module .panel-body img { max-width: 100%; height: auto; border-radius: var(--sp-r-sm); }

/* Formularios: los que van sueltos (login, registro, recuperar clave) llevan su propia tarjeta */
.sp-module .form-horizontal { max-width: 780px; padding: clamp(20px, 3vw, 34px); border-radius: var(--sp-r-lg); background: var(--sp-paper); box-shadow: var(--sp-shadow); }
.sp-module .form-horizontal { margin-inline: auto; }
/* En las páginas de acceso el título se alinea con la tarjeta centrada */
.sp-page-login .page-title, .sp-page-register .page-title, .sp-page-forgotpassword .page-title, .sp-page-verifyemail .page-title, .sp-page-contact .page-title { max-width: 780px; margin-inline: auto; text-align: center; }
.sp-page-login .sp-module .form-horizontal, .sp-page-forgotpassword .sp-module .form-horizontal { max-width: 620px; }
.sp-page-login .page-title, .sp-page-forgotpassword .page-title { max-width: 620px; }
.sp-module .panel .form-horizontal { max-width: none; margin-inline: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.sp-module .form-horizontal .form-group:last-child { margin-bottom: 0; }
.sp-module .form-horizontal .control-label { text-align: left; padding-top: 12px; font-weight: 600; color: var(--sp-ink); }
.sp-module label { font-weight: 600; color: var(--sp-ink); }
.sp-module .form-control { height: 48px; padding: 10px 16px; border: 1px solid #d9d3df; border-radius: 14px; background: #fff; color: var(--sp-ink); font-size: 15px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.sp-module textarea.form-control { height: auto; min-height: 120px; }
.sp-module .form-control:focus { border-color: var(--sp-plum); box-shadow: 0 0 0 4px rgba(222, 209, 241, .7); outline: 0; }
.sp-module .form-control::placeholder { color: #a9a6b3; }
.sp-module .help-block { color: var(--sp-muted); font-size: 13px; }
.sp-module .input-group-addon { border-color: #d9d3df; background: #f5f3f6; color: var(--sp-muted); border-radius: 14px; }
.sp-module .checkbox label, .sp-module .radio label { font-weight: 400; color: var(--sp-text); }

/* Botones */
.sp-module .btn { border-radius: 100px; border: 1px solid transparent; padding: 11px 24px; font: 700 14px/1.3 var(--sp-font-body); text-transform: none; letter-spacing: 0; box-shadow: none; text-shadow: none; background-image: none; transition: transform .15s, background .15s; }
.sp-module .btn:hover { transform: translateY(-2px); }
.sp-module .btn-xs, .sp-module .btn-sm { padding: 6px 14px; font-size: 12px; }
.sp-module .btn-lg { padding: 15px 30px; font-size: 16px; }
.sp-module .btn-primary, .sp-module .btn-primary:hover, .sp-module .btn-primary:focus, .sp-module .btn-primary:active { background: var(--sp-plum); border-color: var(--sp-plum); color: #fff; }
.sp-module .btn-primary:hover { background: #6a5589; border-color: #6a5589; }
.sp-module .btn-default, .sp-module .btn-default:hover, .sp-module .btn-default:focus, .sp-module .btn-castlewidget, .sp-module .btn-castlewidget:hover { background: var(--sp-lilac); border-color: var(--sp-lilac); color: #433650; }
.sp-module .btn-success, .sp-module .btn-success:hover, .sp-module .btn-success:focus { background: var(--sp-sage); border-color: var(--sp-sage); color: #fff; }
.sp-module .btn-danger, .sp-module .btn-danger:hover, .sp-module .btn-danger:focus { background: var(--sp-coral); border-color: var(--sp-coral); color: #fff; }
.sp-module .btn-warning, .sp-module .btn-warning:hover, .sp-module .btn-warning:focus { background: var(--sp-gold); border-color: var(--sp-gold); color: #3d2e05; }
.sp-module .btn-info, .sp-module .btn-info:hover, .sp-module .btn-info:focus { background: var(--sp-sky-tint); border-color: var(--sp-sky-tint); color: #3f5c75; }
.sp-module .btn[disabled], .sp-module .btn.disabled { opacity: .5; transform: none; }

/* Avisos */
.sp-module .alert { border: 0; border-radius: 16px; padding: 16px 20px; font-weight: 500; text-shadow: none; }
.sp-module .alert-danger { background: #f6dfd6; color: #8a3a26; }
.sp-module .alert-success { background: var(--sp-sage-tint); color: #2c5c3e; }
.sp-module .alert-warning { background: var(--sp-gold-tint); color: #7a5a0f; }
.sp-module .alert-info { background: var(--sp-sky-tint); color: #3f5c75; }
.sp-module .alert a { color: inherit; text-decoration: underline; }
.sp-module .label { border-radius: 100px; padding: 4px 10px; font-weight: 700; }
.sp-module .label-default { background: var(--sp-lilac-tint); color: var(--sp-plum); }
.sp-module .label-success { background: var(--sp-sage-tint); color: var(--sp-sage); }
.sp-module .label-danger { background: #f6dfd6; color: var(--sp-coral); }

/* Tablas */
.sp-module .table { margin-bottom: 0; color: var(--sp-text); }
.sp-module .table > thead > tr > th { border: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); padding: 12px 14px; }
.sp-module .table > tbody > tr > td, .sp-module .table > tbody > tr > th, .sp-module .table > tfoot > tr > td { border-top: 1px solid #eee8f1; padding: 12px 14px; vertical-align: middle; }
.sp-module .table > tbody > tr:first-child > td, .sp-module .table > tbody > tr:first-child > th { border-top: 0; }
.sp-module .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.sp-module .table-hover > tbody > tr:hover { background: #f9f7fb; }
.sp-module .pagination > li > a, .sp-module .pagination > li > span { border: 0; margin: 0 3px; border-radius: 100px !important; background: #eeeaf2; color: var(--sp-plum); font-weight: 700; }
.sp-module .pagination > .active > a, .sp-module .pagination > .active > span { background: var(--sp-plum); color: #fff; }
.sp-body .modal-content { border: 0; border-radius: var(--sp-r-md); box-shadow: 0 24px 60px rgba(39, 32, 54, .25); }
.sp-body .tooltip-inner { border-radius: 10px; background: var(--sp-plum-deep); font-family: var(--sp-font-body); }

/* ---------- Rankings ---------- */
.sp-module .rankings_menu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.sp-module .rankings_menu a { padding: 9px 16px; border-radius: 100px; background: #ebe7ee; color: var(--sp-text); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
.sp-module .rankings_menu a:hover { background: var(--sp-lilac); color: var(--sp-plum); }
.sp-module .rankings_menu a.active { background: var(--sp-plum); color: #fff; }
.sp-module .rankings-class-filter { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sp-module .rankings-class-filter li a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 18px; font-size: 12px; font-weight: 600; color: var(--sp-ink); line-height: 1.2; cursor: pointer; transition: background .15s; }
.sp-module .rankings-class-filter li a br { display: none; }
.sp-module .rankings-class-filter li a:hover { background: #ebe7ee; }
.sp-module .rankings-class-filter-image { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--sp-paper), 0 0 0 5px var(--sp-plum); }
.sp-module .rankings-class-filter-grayscale { color: var(--sp-muted) !important; }
.sp-module .rankings-class-filter-grayscale .rankings-class-filter-image { filter: grayscale(.85); opacity: .75; box-shadow: none; }
.sp-module .rankings-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--sp-paper); border-radius: var(--sp-r-md); box-shadow: var(--sp-shadow); overflow: hidden; font-size: 14px; }
.sp-module .rankings-table td { padding: 11px 14px; border-top: 1px solid #eee8f1; text-align: center; vertical-align: middle; color: var(--sp-text); }
.sp-module .rankings-table tr:first-child td { border-top: 0; padding: 16px 14px 12px; font-size: 12px; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); }
.sp-module .rankings-table tr:not(:first-child):hover td { background: #f9f7fb; }
.sp-module .rankings-table a { font-weight: 700; color: var(--sp-ink); }
.sp-module .rankings-table a:hover { color: var(--sp-plum); }
.sp-module .rankings-table td.rankings-table-place { width: 70px; }
.sp-module .rankings-table-place { font-weight: 700; color: var(--sp-muted); font-variant-numeric: tabular-nums; }
.sp-module .rankings-table tr:nth-child(2) td { background: var(--sp-gold-tint); }
.sp-module .rankings-table tr:nth-child(2) .rankings-table-place { color: #9a7410; font-size: 18px; }
.sp-module .rankings-table tr:nth-child(3) .rankings-table-place { color: #7d8496; font-size: 17px; }
.sp-module .rankings-table tr:nth-child(4) .rankings-table-place { color: #a56b3f; font-size: 16px; }
.sp-module .rankings-class-image { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.sp-module .online-status-indicator { margin-left: 6px; vertical-align: middle; }
.sp-module .rankings-update-time { margin-top: 12px; text-align: right; font-size: 13px; color: var(--sp-muted); }
@media (max-width: 700px) { .sp-module .rankings-table { display: block; overflow-x: auto; white-space: nowrap; } }

/* ---------- Panel de usuario (portada) ---------- */
.we-usercp-page { display: grid; gap: 44px; }
.we-usercp-section-banner { margin-bottom: 18px; }
.we-usercp-section-emoji, .we-usercp-card-glow, .we-usercp-vip-shine { display: none; }
.we-usercp-section-head { display: flex; align-items: center; gap: 14px; }
.we-usercp-section-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: var(--sp-lilac-tint); color: var(--sp-plum); flex-shrink: 0; }
.we-usercp-section-vip .we-usercp-section-icon { background: var(--sp-gold-tint); color: var(--sp-gold); }
.we-usercp-section-character .we-usercp-section-icon { background: var(--sp-sky-tint); color: #3f5c75; }
.we-usercp-section-store .we-usercp-section-icon { background: var(--sp-sand-tint); color: #6b5a2e; }
.sp-module .we-usercp-section-title { margin: 0; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.15; }
.we-usercp-section-desc { margin: 2px 0 0; color: var(--sp-muted); }
.we-usercp-profile-grid, .we-usercp-vip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.we-usercp-profile-item { padding: 16px 18px; border-radius: var(--sp-r-md); background: var(--sp-paper); box-shadow: var(--sp-shadow); min-width: 0; }
.we-usercp-vip-grid .we-usercp-profile-item { background: #f5f3f6; box-shadow: none; }
.we-usercp-profile-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); margin-bottom: 4px; }
.we-usercp-profile-value { display: block; font: 500 19px/1.3 var(--sp-font-display); color: var(--sp-ink); overflow-wrap: anywhere; }
.we-usercp-profile-value-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-module .we-usercp-profile-action { flex-shrink: 0; padding: 5px 12px; border-radius: 100px; background: var(--sp-lilac-tint); font-size: 12px; font-weight: 700; color: var(--sp-plum); }
.we-usercp-badge { display: inline-block; padding: 4px 12px; border-radius: 100px; font: 700 12px/1.4 var(--sp-font-body); }
.we-usercp-badge-ok { background: var(--sp-sage-tint); color: var(--sp-sage); }
.we-usercp-badge-off { background: #f6dfd6; color: var(--sp-coral); }
.we-usercp-badge-idle { background: #eeecef; color: var(--sp-muted); }

.we-usercp-vip { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 12px; }
.we-usercp-vip-card { display: flex; flex-direction: column; gap: 14px; min-height: 230px; padding: 24px; border-radius: var(--sp-r-lg); background: linear-gradient(140deg, var(--sp-plum-deep), var(--sp-plum)); color: #efe9f6; box-shadow: var(--sp-shadow); border-top: 6px solid var(--we-vip-color, var(--sp-lilac)); }
.we-usercp-vip-card-top { display: flex; align-items: center; justify-content: space-between; }
.we-usercp-vip-chip { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: var(--we-vip-color, #fff); }
.we-usercp-vip-status { padding: 5px 12px; border-radius: 100px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 700; }
.we-usercp-vip-card-name { font: 500 32px/1.1 var(--sp-font-display); color: #fff; margin-top: auto; }
.we-usercp-vip-card-holder, .we-usercp-vip-card-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.we-usercp-vip-card-holder-label, .we-usercp-vip-card-foot-label { color: #c9bfd8; }
.we-usercp-vip-card-holder-value, .we-usercp-vip-card-foot-value { font-weight: 700; color: #fff; }
.we-usercp-vip-info { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--sp-r-lg); background: var(--sp-paper); box-shadow: var(--sp-shadow); }
.sp-module .we-usercp-vip-empty-title { margin: 0 0 6px; font-size: 26px; }
.we-usercp-vip-empty-desc { margin: 0; max-width: 62ch; }
.we-usercp-vip-warn { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--sp-gold-tint); color: #7a5a0f; font-weight: 600; }
.we-usercp-vip-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: auto; }
.sp-module .we-usercp-vip-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 100px; background: var(--sp-plum); color: #fff; font-weight: 700; transition: transform .15s; }
.sp-module .we-usercp-vip-btn:hover { color: #fff; transform: translateY(-2px); }
.we-usercp-vip-actions-note { font-size: 13px; color: var(--sp-muted); }
@media (max-width: 820px) { .we-usercp-vip { grid-template-columns: 1fr; } }

.we-usercp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 12px; }
.sp-module .we-usercp-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--sp-r-md); background: var(--sp-paper); box-shadow: var(--sp-shadow); color: var(--sp-text); transition: transform .2s, box-shadow .2s; }
.sp-module .we-usercp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(64, 61, 82, .12); color: var(--sp-text); }
.we-usercp-card-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--sp-lilac-tint); color: var(--sp-plum); flex-shrink: 0; }
.we-usercp-card-icon img { width: 32px; height: 32px; object-fit: contain; }
.we-usercp-card-body { display: block; min-width: 0; flex: 1; }
.we-usercp-card-title { display: block; font-weight: 700; font-size: 16px; color: var(--sp-ink); }
.we-usercp-card-desc { display: block; font-size: 13px; line-height: 1.45; color: var(--sp-muted); }
.we-usercp-card-arrow { color: var(--sp-muted); flex-shrink: 0; }

/* ---------- Panel de usuario (páginas internas) ---------- */
.sp-module .panel-usercp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sp-module .panel-usercp li { display: flex; align-items: center; gap: 12px; padding: 4px 6px; border-radius: 14px; }
.sp-module .panel-usercp li:hover { background: #f5f3f6; }
.sp-module .panel-usercp .panel-body { padding: 12px; }
.we-usercp-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--sp-lilac-tint); color: var(--sp-plum); flex-shrink: 0; }
.we-usercp-icon img { width: 22px; height: 22px; object-fit: contain; }
.sp-module .panel-usercp li a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 4px; font-weight: 600; color: var(--sp-ink); }
.sp-module .panel-usercp li a .we-icon-chevron { color: var(--sp-muted); }
.sp-module .panel-sidebar .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-module .panel-sidebar .panel-title .pull-right { float: none !important; }
.we-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-muted); margin-right: 6px; }
.we-status-online { background: #5aa173; }
.sp-module .castle-owner-widget .alt { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 991px) { .sp-module .we-sidebar { margin-top: 28px; } }