/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 
 * Author Lautaro Angelico (https://lautaroangelico.com/)
 * Copyright (c) 2013-2020 Lautaro Angelico, All Rights Reserved
 
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 
 =========================================================
 
*/
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}

a:focus, a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.form-control {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
}
.form-control:focus {
	border: 1px solid #ccc;
}

/* http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

/* http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.thumbnail {
    background-color: #f1f1f1;
    border: 1px solid #e3e3e3;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #ff0000;
}


/* =====================================================
   USERCP — REDISEÑO COMPLETO ESTILO OSCURO
   ===================================================== */

/* Título de página */
.page-title {
	font-family: 'Cinzel', 'Roboto', serif !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	color: #9B111E !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	margin-bottom: 6px !important;
	text-shadow: 0 0 20px rgba(155,17,30,0.4) !important;
}
.page-title + hr,
.page-title ~ hr {
	border-color: rgba(155,17,30,0.3) !important;
	margin-bottom: 28px !important;
}

/* ---- TABLA MI CUENTA ---- */
.myaccount-table {
	background: rgba(8,2,3,0.82) !important;
	border: 1px solid rgba(155,17,30,0.25) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	backdrop-filter: blur(12px) !important;
	width: 100% !important;
}
.myaccount-table tr td {
	border-bottom: 1px solid rgba(155,17,30,0.12) !important;
	padding: 14px 20px !important;
	color: #ccc !important;
	font-size: 13px !important;
}
.myaccount-table tr:last-child td {
	border-bottom: none !important;
}
.myaccount-table tr td:first-child {
	color: rgba(200,200,200,0.55) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	width: 38% !important;
}
.myaccount-table tr td:last-child {
	color: #fff !important;
	font-weight: 500 !important;
}
.myaccount-table tr:hover td {
	background: rgba(155,17,30,0.06) !important;
}

/* Botón Cambio dentro de tabla */
.myaccount-table .btn,
.myaccount-table a.btn {
	padding: 3px 14px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	border-radius: 4px !important;
	background: rgba(155,17,30,0.2) !important;
	border: 1px solid rgba(155,17,30,0.6) !important;
	color: #e03040 !important;
	text-transform: uppercase !important;
	transition: all 0.2s !important;
}
.myaccount-table .btn:hover,
.myaccount-table a.btn:hover {
	background: rgba(155,17,30,0.4) !important;
	color: #fff !important;
}

/* ---- PERSONAJES ---- */
.myaccount-character-block {
	background: rgba(8,2,3,0.82) !important;
	border: 1px solid rgba(155,17,30,0.3) !important;
	border-radius: 10px !important;
	padding: 10px !important;
	transition: border-color 0.25s, transform 0.25s !important;
	backdrop-filter: blur(8px) !important;
}
.myaccount-character-block:hover {
	border-color: rgba(155,17,30,0.7) !important;
	transform: translateY(-3px) !important;
}
.myaccount-character-block img {
	border-radius: 6px !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.6) !important;
}
.myaccount-character-name a {
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.5px !important;
}
.myaccount-character-block-level {
	background: rgba(155,17,30,0.75) !important;
	color: #fff !important;
	font-weight: 700 !important;
	border-radius: 4px !important;
	font-size: 10px !important;
	padding: 1px 6px !important;
}

/* ---- PANEL USERCP (menú lateral) ---- */
.panel-usercp {
	background: rgba(8,2,3,0.82) !important;
	border: 1px solid rgba(155,17,30,0.25) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	backdrop-filter: blur(12px) !important;
}
.panel-usercp > .panel-heading {
	background: linear-gradient(90deg, rgba(100,8,18,0.9), rgba(155,17,30,0.7)) !important;
	color: #fff !important;
	font-size: 13px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	padding: 14px 18px !important;
	border: none !important;
}
.panel-usercp ul li {
	border-bottom: 1px solid rgba(155,17,30,0.1) !important;
}
.panel-usercp ul li:last-child {
	border-bottom: none !important;
}
.panel-usercp ul li a {
	color: rgba(200,200,200,0.7) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	padding: 10px 18px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	transition: all 0.2s !important;
}
.panel-usercp ul li a:hover {
	color: #fff !important;
	background: rgba(155,17,30,0.12) !important;
	padding-left: 24px !important;
}

/* ---- GENERAL TABLE UI (add stats, etc.) ---- */
.general-table-ui {
	background: rgba(8,2,3,0.82) !important;
	border: 1px solid rgba(155,17,30,0.2) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	backdrop-filter: blur(12px) !important;
}
.general-table-ui tr td {
	color: #ccc !important;
	border-bottom: 1px solid rgba(155,17,30,0.1) !important;
	padding: 12px 16px !important;
}
.general-table-ui tr:first-child td {
	color: #9B111E !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	background: rgba(155,17,30,0.08) !important;
}
.general-table-ui tr:nth-child(2n+2) td {
	background: rgba(155,17,30,0.04) !important;
}

/* ---- FORMULARIOS ---- */
.form-control,
input[type=text],
input[type=password],
input[type=email],
input[type=number] {
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(155,17,30,0.3) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus {
	border-color: rgba(155,17,30,0.7) !important;
	box-shadow: 0 0 0 3px rgba(155,17,30,0.15) !important;
	background: rgba(255,255,255,0.08) !important;
	outline: none !important;
}

/* ---- PANEL GENERAL ---- */
.panel-general {
	background: rgba(8,2,3,0.82) !important;
	border: 1px solid rgba(155,17,30,0.2) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	backdrop-filter: blur(12px) !important;
	color: #ccc !important;
}
.panel-general .panel-heading,
.panel-general > .panel-heading {
	background: linear-gradient(90deg, rgba(100,8,18,0.9), rgba(155,17,30,0.6)) !important;
	color: #fff !important;
	border: none !important;
	padding: 14px 20px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
}
.panel-body .panel-title {
	color: rgba(155,17,30,0.8) !important;
	border-bottom: 1px solid rgba(155,17,30,0.2) !important;
	font-size: 12px !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
}

/* ---- ONLINE STATUS ---- */
.online-status-indicator {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2ecc71;
	box-shadow: 0 0 6px rgba(46,204,113,0.8);
	margin-left: 6px;
	vertical-align: middle;
}

/* =====================================================
   MI CUENTA — MEJORA V2: ICONOS + DOS COLUMNAS + PERSONAJE
   ===================================================== */

/* Layout dos columnas: tabla izquierda, personajes derecha */
.myaccount-table + h3,
.myaccount-table ~ h3 {
	margin-top: 0 !important;
}

/* Wrapper que envuelve todo el contenido de Mi Cuenta */
.panel-general .panel-body,
.panel-addstats .panel-body,
.panel-news .panel-body {
	padding: 20px !important;
}

/* Iconos en cada fila de la tabla usando ::before en el td label */
.myaccount-table tr td:first-child {
	position: relative !important;
	padding-left: 42px !important;
}

/* Ícono Estado de Cuenta */
.myaccount-table tr:nth-child(1) td:first-child::before {
	content: "\f058"; /* fa-check-circle */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #9B111E;
	font-size: 14px;
	opacity: 0.85;
}
/* Ícono Nombre de usuario */
.myaccount-table tr:nth-child(2) td:first-child::before {
	content: "\f007"; /* fa-user */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #9B111E;
	font-size: 14px;
	opacity: 0.85;
}
/* Ícono Email */
.myaccount-table tr:nth-child(3) td:first-child::before {
	content: "\f0e0"; /* fa-envelope */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #9B111E;
	font-size: 14px;
	opacity: 0.85;
}
/* Ícono Contraseña */
.myaccount-table tr:nth-child(4) td:first-child::before {
	content: "\f023"; /* fa-lock */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #9B111E;
	font-size: 14px;
	opacity: 0.85;
}
/* Ícono Estado */
.myaccount-table tr:nth-child(5) td:first-child::before {
	content: "\f111"; /* fa-circle */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #2ecc71;
	font-size: 10px;
	opacity: 0.9;
}

/* Valor de Estado con color verde */
.myaccount-table tr:nth-child(1) td:last-child {
	color: #2ecc71 !important;
	font-weight: 700 !important;
}

/* Separador visual entre filas más pronunciado */
.myaccount-table tr td {
	border-bottom: 1px solid rgba(155,17,30,0.15) !important;
	transition: background 0.2s !important;
}

/* ---- PERSONAJES — card grande y vistosa ---- */
.myaccount-character-block {
	width: 130px !important;
	text-align: center !important;
	display: inline-block !important;
	margin: 8px !important;
	background: linear-gradient(160deg, rgba(20,4,6,0.9), rgba(8,2,3,0.95)) !important;
	border: 1px solid rgba(155,17,30,0.4) !important;
	border-radius: 12px !important;
	padding: 12px 10px 14px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 0 rgba(155,17,30,0) !important;
	transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s !important;
	position: relative !important;
	overflow: hidden !important;
}
.myaccount-character-block::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(155,17,30,0.8), transparent);
	opacity: 0;
	transition: opacity 0.3s;
}
.myaccount-character-block:hover {
	border-color: rgba(155,17,30,0.8) !important;
	transform: translateY(-5px) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 20px rgba(155,17,30,0.2) !important;
}
.myaccount-character-block:hover::before {
	opacity: 1;
}
.myaccount-character-block img {
	width: 100px !important;
	height: 100px !important;
	object-fit: cover !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.7) !important;
	display: block !important;
	margin: 0 auto 8px !important;
}
.myaccount-character-name {
	margin-top: 6px !important;
}
.myaccount-character-name a {
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 12px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	display: block !important;
}
.myaccount-character-block-level {
	position: static !important;
	display: inline-block !important;
	background: linear-gradient(90deg, #6b0a13, #9B111E) !important;
	color: #fff !important;
	font-weight: 700 !important;
	border-radius: 20px !important;
	font-size: 10px !important;
	padding: 2px 10px !important;
	letter-spacing: 1px !important;
	margin-top: 4px !important;
	box-shadow: 0 2px 8px rgba(155,17,30,0.4) !important;
}
.myaccount-character-block-location {
	font-size: 10px !important;
	color: rgba(200,200,200,0.4) !important;
	margin-top: 4px !important;
	letter-spacing: 0.5px !important;
}

/* Título "Mis Personajes" */
h3.page-title,
h2.page-title {
	margin-top: 30px !important;
}

/* =====================================================
   PERFIL DEL JUGADOR — LAYOUT MEJORADO
   ===================================================== */

/* Header del perfil — centrado */
.profiles_player_card {
	padding: 30px 24px 24px !important;
}

/* Avatar con glow rubí */
.profiles_player_card img {
	width: 110px !important;
	height: 110px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	border: 3px solid rgba(155,17,30,0.7) !important;
	box-shadow:
		0 0 0 5px rgba(155,17,30,0.12),
		0 0 22px rgba(155,17,30,0.5),
		0 4px 20px rgba(0,0,0,0.7) !important;
	display: block !important;
	margin: 0 auto 16px !important;
}

/* Nombre */
.profiles_player_table .cname {
	font-family: 'Cinzel', serif !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #fff !important;
	letter-spacing: 4px !important;
	text-align: center !important;
	text-shadow: 0 2px 12px rgba(0,0,0,0.8) !important;
	padding: 8px 0 6px !important;
}

/* Clase */
.profiles_player_table .cclass {
	text-align: center !important;
	font-size: 11px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	color: rgba(200,200,200,0.65) !important;
	background: rgba(155,17,30,0.12) !important;
	border: 1px solid rgba(155,17,30,0.3) !important;
	border-radius: 20px !important;
	display: inline-block !important;
	padding: 4px 16px !important;
	margin: 0 auto 12px !important;
}

/* Online/Offline */
.profiles_player_table .isonline {
	color: #2ecc71 !important;
	font-weight: 700 !important;
	font-size: 11px !important;
}
.profiles_player_table .isoffline {
	color: rgba(200,200,200,0.35) !important;
	font-size: 11px !important;
}

/* Stats grid */
.profiles_player_table_info {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 6px !important;
	margin-top: 20px !important;
}
.profiles_player_table_info tr td {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(155,17,30,0.15) !important;
	border-radius: 8px !important;
	padding: 14px 10px !important;
	text-align: center !important;
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	transition: background 0.2s, border-color 0.2s !important;
	vertical-align: middle !important;
}
.profiles_player_table_info tr td:hover {
	background: rgba(155,17,30,0.1) !important;
	border-color: rgba(155,17,30,0.4) !important;
}
.profiles_player_table_info tr td:first-child {
	text-align: right !important;
	color: rgba(180,180,180,0.5) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	background: transparent !important;
	border: none !important;
	padding-right: 8px !important;
}

/* =====================================================
   REGISTRO — REDISEÑO COMPLETO
   ===================================================== */

.sethmu-register-wrap {
	max-width: 600px;
	margin: 0 auto;
	padding: 10px 0 40px;
}

/* Header */
.sethmu-register-header {
	text-align: center;
	margin-bottom: 28px;
}
.sethmu-register-title {
	font-family: 'Cinzel', serif !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #9B111E !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	margin: 0 0 8px !important;
	text-shadow: 0 0 20px rgba(155,17,30,0.4) !important;
}
.sethmu-register-subtitle {
	font-size: 13px !important;
	color: rgba(200,200,200,0.5) !important;
	letter-spacing: 1px !important;
	margin: 0 !important;
}

/* Card */
.sethmu-register-card {
	background: rgba(8,2,3,0.85) !important;
	border: 1px solid rgba(155,17,30,0.25) !important;
	border-radius: 14px !important;
	padding: 32px 36px !important;
	backdrop-filter: blur(14px) !important;
	box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
}

/* Field group */
.sethmu-field-group {
	margin-bottom: 20px !important;
}
.sethmu-field-label {
	display: block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: rgba(200,200,200,0.75) !important;
	letter-spacing: 1px !important;
	margin-bottom: 8px !important;
	text-transform: none !important;
}

/* Input wrapper */
.sethmu-input-wrap {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
}
.sethmu-input-icon {
	position: absolute !important;
	left: 14px !important;
	color: rgba(155,17,30,0.7) !important;
	font-size: 14px !important;
	pointer-events: none !important;
	z-index: 2 !important;
}
.sethmu-input {
	width: 100% !important;
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(155,17,30,0.25) !important;
	border-radius: 8px !important;
	color: #fff !important;
	font-size: 14px !important;
	padding: 12px 44px !important;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
	outline: none !important;
	font-family: 'Roboto', sans-serif !important;
}
.sethmu-input::placeholder {
	color: rgba(200,200,200,0.3) !important;
	font-size: 13px !important;
}
.sethmu-input:focus {
	border-color: rgba(155,17,30,0.7) !important;
	background: rgba(255,255,255,0.08) !important;
	box-shadow: 0 0 0 3px rgba(155,17,30,0.12) !important;
}

/* Toggle password */
.sethmu-toggle-pwd {
	position: absolute !important;
	right: 12px !important;
	background: none !important;
	border: none !important;
	color: rgba(200,200,200,0.4) !important;
	font-size: 14px !important;
	cursor: pointer !important;
	padding: 0 !important;
	transition: color 0.2s !important;
	z-index: 2 !important;
}
.sethmu-toggle-pwd:hover { color: rgba(200,200,200,0.8) !important; }

/* Hint */
.sethmu-field-hint {
	display: block !important;
	font-size: 11px !important;
	color: rgba(200,200,200,0.35) !important;
	margin-top: 5px !important;
	padding-left: 2px !important;
}

/* Separador de sección */
.sethmu-section-divider {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 24px 0 20px !important;
}
.sethmu-section-divider::before,
.sethmu-section-divider::after {
	content: "" !important;
	flex: 1 !important;
	height: 1px !important;
	background: rgba(155,17,30,0.25) !important;
}
.sethmu-section-divider span {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: rgba(200,200,200,0.45) !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}
.sethmu-section-divider span i { color: #9B111E !important; }

/* Checkbox */
.sethmu-checkbox-group {
	margin-bottom: 20px !important;
}
.sethmu-checkbox-label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	cursor: pointer !important;
	font-size: 13px !important;
	color: rgba(200,200,200,0.65) !important;
	line-height: 1.5 !important;
}
.sethmu-checkbox-label input[type="checkbox"] {
	display: none !important;
}
.sethmu-checkbox-custom {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	border: 1px solid rgba(155,17,30,0.4) !important;
	border-radius: 4px !important;
	background: rgba(255,255,255,0.04) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 2px !important;
	transition: all 0.2s !important;
}
.sethmu-checkbox-label input[type="checkbox"]:checked + .sethmu-checkbox-custom {
	background: #9B111E !important;
	border-color: #9B111E !important;
}
.sethmu-checkbox-label input[type="checkbox"]:checked + .sethmu-checkbox-custom::after {
	content: "✓" !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}
.sethmu-checkbox-text a {
	color: #9B111E !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}
.sethmu-checkbox-text a:hover { color: #c0152a !important; }

/* Botón registrarse */
.sethmu-register-btn {
	width: 100% !important;
	padding: 15px !important;
	background: linear-gradient(90deg, #6b0a13, #9B111E, #6b0a13) !important;
	background-size: 200% !important;
	background-position: center !important;
	border: none !important;
	border-radius: 8px !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
	box-shadow: 0 4px 20px rgba(155,17,30,0.4) !important;
	font-family: 'Roboto', sans-serif !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
}
.sethmu-register-btn:hover {
	background-position: left !important;
	box-shadow: 0 6px 28px rgba(155,17,30,0.65) !important;
	transform: translateY(-2px) !important;
	color: #fff !important;
}
.sethmu-register-btn:active {
	transform: translateY(0) !important;
}

/* Link login */
.sethmu-register-login-link {
	text-align: center !important;
	margin-top: 18px !important;
	font-size: 12px !important;
	color: rgba(200,200,200,0.4) !important;
}
.sethmu-register-login-link a {
	color: #9B111E !important;
	font-weight: 700 !important;
}
.sethmu-register-login-link a:hover { color: #c0152a !important; }

/* =====================================================
   RANKINGS — PALETA NEGRO / BLANCO / DORADO / RUBÍ
   ===================================================== */

.sethmu-rank-wrap {
	width: 100%;
	margin-top: 16px;
}

/* Tabla */
.sethmu-rank-table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 4px !important;
	background: transparent !important;
}

/* Header */
.sethmu-rank-table thead tr {
	background: transparent !important;
}
.sethmu-rank-th,
.sethmu-rank-th-num,
.sethmu-rank-th-center {
	background: rgba(0,0,0,0.7) !important;
	color: rgba(200,180,120,0.7) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	padding: 12px 16px !important;
	border: none !important;
	border-bottom: 2px solid rgba(155,17,30,0.4) !important;
}
.sethmu-rank-th-num { width: 52px !important; text-align: center !important; }
.sethmu-rank-th-center { text-align: center !important; }

/* Filas */
.sethmu-rank-row {
	background: rgba(8,4,2,0.82) !important;
	transition: background 0.2s, transform 0.15s !important;
}
.sethmu-rank-row:hover {
	background: rgba(155,17,30,0.1) !important;
	transform: translateX(2px) !important;
}
.sethmu-rank-row td {
	padding: 12px 16px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255,255,255,0.04) !important;
	vertical-align: middle !important;
}
.sethmu-rank-row td:first-child {
	border-left: 3px solid transparent !important;
	border-radius: 6px 0 0 6px !important;
}
.sethmu-rank-row td:last-child {
	border-radius: 0 6px 6px 0 !important;
}

/* Top 3 — borde izquierdo de color */
.sethmu-rank-gold td:first-child   { border-left-color: #f1c40f !important; background: rgba(241,196,15,0.05) !important; }
.sethmu-rank-silver td:first-child { border-left-color: #bdc3c7 !important; background: rgba(189,195,199,0.04) !important; }
.sethmu-rank-bronze td:first-child { border-left-color: #cd7f32 !important; background: rgba(205,127,50,0.04) !important; }

/* Posición */
.sethmu-rank-pos { text-align: center !important; width: 52px !important; }
.sethmu-pos-num {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: rgba(200,200,200,0.4) !important;
	font-family: 'Roboto', sans-serif !important;
}
.sethmu-medal {
	font-size: 18px !important;
	display: inline-block !important;
}
.sethmu-rank-gold   .sethmu-medal { color: #f1c40f !important; filter: drop-shadow(0 0 6px rgba(241,196,15,0.7)); }
.sethmu-rank-silver .sethmu-medal { color: #bdc3c7 !important; filter: drop-shadow(0 0 6px rgba(189,195,199,0.5)); }
.sethmu-rank-bronze .sethmu-medal { color: #cd7f32 !important; filter: drop-shadow(0 0 6px rgba(205,127,50,0.5)); }

/* Clase — avatar + nombre */
.sethmu-rank-class-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
.sethmu-rank-avatar {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid rgba(155,17,30,0.4) !important;
	box-shadow: 0 0 8px rgba(0,0,0,0.5) !important;
}
.sethmu-rank-online {
	border-color: rgba(46,204,113,0.7) !important;
	box-shadow: 0 0 8px rgba(46,204,113,0.4) !important;
}
.sethmu-rank-classname {
	font-size: 12px !important;
	color: rgba(200,200,200,0.65) !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
}

/* Personaje */
.sethmu-rank-char-cell {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.sethmu-rank-charname a,
.sethmu-rank-charname {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: #d4af37 !important; /* Dorado */
	letter-spacing: 0.5px !important;
	text-decoration: none !important;
}
.sethmu-rank-charname a:hover { color: #f1c40f !important; }
.sethmu-rank-online-dot {
	display: inline-block !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: #2ecc71 !important;
	box-shadow: 0 0 6px rgba(46,204,113,0.8) !important;
	flex-shrink: 0 !important;
}

/* Valores numéricos */
.sethmu-rank-val-green {
	text-align: center !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #2ecc71 !important;
	font-family: 'Roboto', sans-serif !important;
}
.sethmu-rank-val-yellow {
	text-align: center !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #f1c40f !important;
	font-family: 'Roboto', sans-serif !important;
}
.sethmu-rank-val-purple {
	text-align: center !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #9b59b6 !important;
	font-family: 'Roboto', sans-serif !important;
}
.sethmu-rank-val-red {
	text-align: center !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #9B111E !important;
	font-family: 'Roboto', sans-serif !important;
}
.sethmu-rank-val-white {
	text-align: center !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: rgba(255,255,255,0.85) !important;
	font-family: 'Roboto', sans-serif !important;
}

/* Guild */
.sethmu-rank-guild-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.sethmu-rank-guild-logo {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
}
.sethmu-rank-guild-logo img,
.sethmu-rank-guild-logo table,
.sethmu-rank-guild-wrap > img,
.sethmu-rank-guild-wrap > table {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	border-radius: 3px !important;
	flex-shrink: 0 !important;
	display: block !important;
}
/* Fix para tablas de guild logo generadas por returnGuildLogo */
.sethmu-rank-guild-logo table td {
	padding: 0 !important;
	border: none !important;
	line-height: 0 !important;
}
.sethmu-rank-guildname a,
.sethmu-rank-guildname {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: rgba(212,175,55,0.85) !important;
	letter-spacing: 0.5px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
.sethmu-rank-guildname a:hover { color: #f1c40f !important; }
.sethmu-rank-noguild {
	color: rgba(200,200,200,0.2) !important;
	font-size: 14px !important;
}
	font-size: 14px !important;
}

/* Fecha actualización */
.sethmu-rank-date {
	text-align: right !important;
	font-size: 11px !important;
	color: rgba(200,200,200,0.3) !important;
	margin-top: 12px !important;
	padding: 8px 4px !important;
	letter-spacing: 1px !important;
}
.sethmu-rank-date i { color: rgba(155,17,30,0.5) !important; }

/* Menú de rankings — override del estilo por defecto */
.rankings_menu a {
	border-color: rgba(155,17,30,0.5) !important;
	border-left-color: #9B111E !important;
	color: rgba(212,175,55,0.8) !important;
	background: linear-gradient(to left, transparent 50%, rgba(155,17,30,0.2) 50%) !important;
	background-size: 200% !important;
	background-position: right !important;
}
.rankings_menu a:hover,
.rankings_menu a.active {
	color: #fff !important;
	background-position: left !important;
	background-color: rgba(155,17,30,0.3) !important;
}

/* =====================================================
   PANEL DE CONTROL — USERCP
   ===================================================== */

.sethmu-panel-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 10px 0 40px;
}

/* Header */
.sethmu-panel-header {
	text-align: center;
	margin-bottom: 36px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(155,17,30,0.2);
	position: relative;
}
.sethmu-panel-header::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #9B111E, transparent);
}
.sethmu-panel-label {
	font-size: 10px !important;
	letter-spacing: 4px !important;
	color: #9B111E !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	display: block !important;
	margin-bottom: 8px !important;
}
.sethmu-panel-title {
	font-family: 'Cinzel', serif !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	color: #fff !important;
	letter-spacing: 4px !important;
	text-transform: uppercase !important;
	margin: 0 0 8px !important;
}
.sethmu-panel-subtitle {
	font-size: 12px !important;
	color: rgba(200,200,200,0.4) !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	margin: 0 !important;
}

/* Grid */
.sethmu-panel-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
}

/* Card */
.sethmu-panel-card {
	position: relative !important;
	background: rgba(8,2,3,0.85) !important;
	border: 1px solid rgba(155,17,30,0.2) !important;
	border-radius: 12px !important;
	padding: 28px 16px 20px !important;
	text-align: center !important;
	text-decoration: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 10px !important;
	overflow: hidden !important;
	transition: border-color 0.3s, transform 0.25s, box-shadow 0.3s !important;
	backdrop-filter: blur(10px) !important;
	cursor: pointer !important;
}
.sethmu-panel-card:hover {
	border-color: rgba(155,17,30,0.7) !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 20px rgba(155,17,30,0.15) !important;
	text-decoration: none !important;
}

/* Glow en hover */
.sethmu-panel-card-glow {
	position: absolute !important;
	top: -30px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 100px !important;
	height: 100px !important;
	background: radial-gradient(circle, rgba(155,17,30,0.2) 0%, transparent 70%) !important;
	opacity: 0 !important;
	transition: opacity 0.3s !important;
	pointer-events: none !important;
}
.sethmu-panel-card:hover .sethmu-panel-card-glow { opacity: 1 !important; }

/* Línea superior en hover */
.sethmu-panel-card::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 2px !important;
	background: linear-gradient(90deg, transparent, #9B111E, transparent) !important;
	opacity: 0 !important;
	transition: opacity 0.3s !important;
}
.sethmu-panel-card:hover::before { opacity: 1 !important; }

/* Ícono */
.sethmu-panel-card-icon {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	background: rgba(155,17,30,0.1) !important;
	border: 2px solid rgba(155,17,30,0.35) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.3s !important;
	margin-bottom: 4px !important;
}
.sethmu-panel-card-icon i {
	font-size: 24px !important;
	color: #9B111E !important;
	transition: all 0.3s !important;
}
.sethmu-panel-card:hover .sethmu-panel-card-icon {
	background: rgba(155,17,30,0.2) !important;
	border-color: rgba(155,17,30,0.7) !important;
	box-shadow: 0 0 16px rgba(155,17,30,0.3) !important;
}
.sethmu-panel-card:hover .sethmu-panel-card-icon i {
	color: #e03040 !important;
	filter: drop-shadow(0 0 8px rgba(155,17,30,0.8)) !important;
}

/* Título */
.sethmu-panel-card-title {
	font-size: 11px !important;
	font-weight: 800 !important;
	color: #fff !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	line-height: 1.3 !important;
	font-family: 'Roboto', sans-serif !important;
}

/* Badge ACTIVO */
.sethmu-panel-card-badge {
	display: inline-block !important;
	padding: 2px 10px !important;
	background: rgba(46,204,113,0.15) !important;
	border: 1px solid rgba(46,204,113,0.4) !important;
	border-radius: 20px !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	letter-spacing: 1.5px !important;
	color: #2ecc71 !important;
	text-transform: uppercase !important;
}

/* Acceder */
.sethmu-panel-card-access {
	font-size: 10px !important;
	font-weight: 700 !important;
	color: rgba(200,200,200,0.35) !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	transition: color 0.2s !important;
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
}
.sethmu-panel-card:hover .sethmu-panel-card-access {
	color: rgba(155,17,30,0.8) !important;
}


/* =====================================================
   RANKINGS — REDISEÑO ESTILO SEGUNDA IMAGEN
   ===================================================== */

/* Wrapper */
.mu-rank-wrap {
	width: 100%;
	margin-top: 8px;
}

/* Tabla principal */
.mu-rank-table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}

/* Header */
.mu-rank-thead-row {
	background: rgba(0,0,0,0.6) !important;
	border-bottom: 2px solid rgba(155,17,30,0.5) !important;
}

.mu-rank-th {
	padding: 14px 16px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: rgba(200,180,120,0.75) !important;
	border: none !important;
	background: transparent !important;
	white-space: nowrap !important;
}

.mu-rank-th-num {
	width: 56px !important;
	text-align: center !important;
}

.mu-rank-th-center {
	text-align: center !important;
}

/* Filas */
.mu-rank-row {
	background: rgba(10,4,2,0.75) !important;
	border-bottom: 1px solid rgba(255,255,255,0.04) !important;
	transition: background 0.18s, transform 0.15s !important;
}

.mu-rank-row:hover {
	background: rgba(155,17,30,0.12) !important;
	transform: translateX(3px) !important;
}

/* Top 3 — borde izquierdo coloreado */
.mu-rank-row-gold {
	border-left: 3px solid #f1c40f !important;
	background: rgba(241,196,15,0.04) !important;
}
.mu-rank-row-silver {
	border-left: 3px solid #bdc3c7 !important;
	background: rgba(189,195,199,0.03) !important;
}
.mu-rank-row-bronze {
	border-left: 3px solid #cd7f32 !important;
	background: rgba(205,127,50,0.03) !important;
}

/* Celdas */
.mu-rank-td {
	padding: 13px 16px !important;
	border: none !important;
	vertical-align: middle !important;
	color: rgba(220,220,220,0.85) !important;
	font-size: 13px !important;
}

/* Posición */
.mu-rank-pos {
	text-align: center !important;
	width: 56px !important;
}

.mu-pos-num {
	font-size: 15px !important;
	font-weight: 800 !important;
	color: rgba(200,200,200,0.35) !important;
	font-family: 'Roboto', sans-serif !important;
}

/* Medallas */
.mu-medal {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	font-size: 15px !important;
}

.mu-medal-gold {
	color: #f1c40f !important;
	background: rgba(241,196,15,0.12) !important;
	box-shadow: 0 0 10px rgba(241,196,15,0.4) !important;
}
.mu-medal-silver {
	color: #bdc3c7 !important;
	background: rgba(189,195,199,0.1) !important;
	box-shadow: 0 0 8px rgba(189,195,199,0.3) !important;
}
.mu-medal-bronze {
	color: #cd7f32 !important;
	background: rgba(205,127,50,0.1) !important;
	box-shadow: 0 0 8px rgba(205,127,50,0.3) !important;
}

/* Avatar de clase */
.mu-rank-avatar {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid rgba(155,17,30,0.35) !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
	flex-shrink: 0 !important;
}

.mu-rank-avatar-online {
	border-color: rgba(46,204,113,0.6) !important;
	box-shadow: 0 0 8px rgba(46,204,113,0.35) !important;
}

/* Celda de clase */
.mu-class-cell {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.mu-classname {
	font-size: 12px !important;
	color: rgba(200,200,200,0.65) !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
}

/* Celda de personaje */
.mu-char-cell {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.mu-charname a,
.mu-charname {
	font-size: 14px !important;
	font-weight: 800 !important;
	color: #d4af37 !important;
	letter-spacing: 0.3px !important;
	text-decoration: none !important;
}

.mu-charname a:hover { color: #f1c40f !important; }

/* Punto online */
.mu-online-dot {
	display: inline-block !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: #2ecc71 !important;
	box-shadow: 0 0 6px rgba(46,204,113,0.9) !important;
	flex-shrink: 0 !important;
}

/* Valores numéricos centrados */
.mu-val-center { text-align: center !important; }

.mu-val-cyan   { color: #1abc9c !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-purple { color: #9b59b6 !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-gold   { color: #f1c40f !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-red    { color: #e74c3c !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-white  { color: rgba(255,255,255,0.85) !important; font-weight: 700 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }

/* Celda de guild */
.mu-guild-cell {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.mu-guild-logo {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
}

.mu-guild-logo img,
.mu-guild-logo table {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	border-radius: 3px !important;
	display: block !important;
}

.mu-guild-logo table td {
	padding: 0 !important;
	border: none !important;
	line-height: 0 !important;
}

.mu-guildname a,
.mu-guildname {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: rgba(212,175,55,0.85) !important;
	letter-spacing: 0.3px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

.mu-guildname a:hover { color: #f1c40f !important; }

.mu-no-guild {
	color: rgba(200,200,200,0.2) !important;
	font-size: 16px !important;
}

/* Fecha de actualización */
.mu-rank-date {
	text-align: right !important;
	font-size: 11px !important;
	color: rgba(200,200,200,0.3) !important;
	margin-top: 10px !important;
	padding: 6px 4px !important;
	letter-spacing: 1px !important;
}

.mu-rank-date i { color: rgba(155,17,30,0.5) !important; }

/* Filtro de clase — override del estilo base */
.rankings-class-filter {
	background: rgba(8,2,3,0.7) !important;
	border: 1px solid rgba(155,17,30,0.2) !important;
	border-radius: 10px !important;
	padding: 12px 20px !important;
	text-align: center !important;
	margin-bottom: 16px !important;
}

.rankings-class-filter-selection {
	color: rgba(200,200,200,0.7) !important;
	font-size: 10px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	transition: color 0.2s !important;
}

.rankings-class-filter-selection:hover {
	color: #fff !important;
}

.rankings-class-filter-selection img {
	border: 2px solid rgba(155,17,30,0.3) !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
}

.rankings-class-filter-selection:hover img {
	border-color: rgba(155,17,30,0.7) !important;
	box-shadow: 0 0 12px rgba(155,17,30,0.4) !important;
}

.rankings-class-filter-grayscale img {
	filter: grayscale(80%) brightness(0.6) !important;
}


/* =====================================================
   RANKINGS — REDISEÑO ESTILO SEGUNDA IMAGEN (mu-rank-*)
   ===================================================== */

.mu-rank-wrap { width: 100%; margin-top: 8px; }

.mu-rank-table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}

.mu-rank-thead-row {
	background: rgba(0,0,0,0.6) !important;
	border-bottom: 2px solid rgba(155,17,30,0.5) !important;
}

.mu-rank-th {
	padding: 14px 16px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: rgba(200,180,120,0.75) !important;
	border: none !important;
	background: transparent !important;
	white-space: nowrap !important;
}
.mu-rank-th-num  { width: 56px !important; text-align: center !important; }
.mu-rank-th-center { text-align: center !important; }

.mu-rank-row {
	background: rgba(10,4,2,0.75) !important;
	border-bottom: 1px solid rgba(255,255,255,0.04) !important;
	transition: background 0.18s, transform 0.15s !important;
}
.mu-rank-row:hover {
	background: rgba(155,17,30,0.12) !important;
	transform: translateX(3px) !important;
}

.mu-rank-row-gold   { border-left: 3px solid #f1c40f !important; background: rgba(241,196,15,0.04) !important; }
.mu-rank-row-silver { border-left: 3px solid #bdc3c7 !important; background: rgba(189,195,199,0.03) !important; }
.mu-rank-row-bronze { border-left: 3px solid #cd7f32 !important; background: rgba(205,127,50,0.03) !important; }

.mu-rank-td {
	padding: 13px 16px !important;
	border: none !important;
	vertical-align: middle !important;
	color: rgba(220,220,220,0.85) !important;
	font-size: 13px !important;
}

.mu-rank-pos { text-align: center !important; width: 56px !important; }

.mu-pos-num {
	font-size: 15px !important;
	font-weight: 800 !important;
	color: rgba(200,200,200,0.35) !important;
	font-family: 'Roboto', sans-serif !important;
}

.mu-medal {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	font-size: 15px !important;
}
.mu-medal-gold   { color: #f1c40f !important; background: rgba(241,196,15,0.12) !important; box-shadow: 0 0 10px rgba(241,196,15,0.4) !important; }
.mu-medal-silver { color: #bdc3c7 !important; background: rgba(189,195,199,0.10) !important; box-shadow: 0 0 8px rgba(189,195,199,0.3) !important; }
.mu-medal-bronze { color: #cd7f32 !important; background: rgba(205,127,50,0.10) !important; box-shadow: 0 0 8px rgba(205,127,50,0.3) !important; }

.mu-rank-avatar {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid rgba(155,17,30,0.35) !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
	flex-shrink: 0 !important;
}
.mu-rank-avatar-online {
	border-color: rgba(46,204,113,0.6) !important;
	box-shadow: 0 0 8px rgba(46,204,113,0.35) !important;
}

.mu-class-cell { display: flex !important; align-items: center !important; gap: 10px !important; }
.mu-classname  { font-size: 12px !important; color: rgba(200,200,200,0.65) !important; font-weight: 600 !important; letter-spacing: 0.3px !important; }

.mu-char-cell { display: flex !important; align-items: center !important; gap: 8px !important; }
.mu-charname a, .mu-charname { font-size: 14px !important; font-weight: 800 !important; color: #d4af37 !important; letter-spacing: 0.3px !important; text-decoration: none !important; }
.mu-charname a:hover { color: #f1c40f !important; }

.mu-online-dot {
	display: inline-block !important;
	width: 7px !important; height: 7px !important;
	border-radius: 50% !important;
	background: #2ecc71 !important;
	box-shadow: 0 0 6px rgba(46,204,113,0.9) !important;
	flex-shrink: 0 !important;
}

.mu-val-center { text-align: center !important; }
.mu-val-cyan   { color: #1abc9c !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-purple { color: #9b59b6 !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-gold   { color: #f1c40f !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-red    { color: #e74c3c !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-white  { color: rgba(255,255,255,0.85) !important; font-weight: 700 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }

.mu-guild-cell { display: flex !important; align-items: center !important; gap: 8px !important; }
.mu-guild-logo { flex-shrink: 0 !important; display: flex !important; align-items: center !important; }
.mu-guild-logo img, .mu-guild-logo table { width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 3px !important; display: block !important; }
.mu-guild-logo table td { padding: 0 !important; border: none !important; line-height: 0 !important; }
.mu-guildname a, .mu-guildname { font-size: 12px !important; font-weight: 700 !important; color: rgba(212,175,55,0.85) !important; letter-spacing: 0.3px !important; text-decoration: none !important; white-space: nowrap !important; }
.mu-guildname a:hover { color: #f1c40f !important; }
.mu-no-guild { color: rgba(200,200,200,0.2) !important; font-size: 16px !important; }

.mu-rank-date { text-align: right !important; font-size: 11px !important; color: rgba(200,200,200,0.3) !important; margin-top: 10px !important; padding: 6px 4px !important; letter-spacing: 1px !important; }
.mu-rank-date i { color: rgba(155,17,30,0.5) !important; }

/* Filtro de clase */
.rankings-class-filter {
	background: rgba(8,2,3,0.7) !important;
	border: 1px solid rgba(155,17,30,0.2) !important;
	border-radius: 10px !important;
	padding: 12px 20px !important;
	text-align: center !important;
	margin-bottom: 16px !important;
}
.rankings-class-filter-selection { color: rgba(200,200,200,0.7) !important; font-size: 10px !important; letter-spacing: 1px !important; text-transform: uppercase !important; transition: color 0.2s !important; }
.rankings-class-filter-selection:hover { color: #fff !important; }
.rankings-class-filter-selection img { border: 2px solid rgba(155,17,30,0.3) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; transition: border-color 0.2s, box-shadow 0.2s !important; }
.rankings-class-filter-selection:hover img { border-color: rgba(155,17,30,0.7) !important; box-shadow: 0 0 12px rgba(155,17,30,0.4) !important; }
.rankings-class-filter-grayscale img { filter: grayscale(80%) brightness(0.6) !important; }


/* =====================================================
   LOGIN — REDISEÑO PROFESIONAL (sl-*)
   ===================================================== */

/* Wrapper principal — centra el card */
.sl-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 40px 20px 60px;
	min-height: 60vh;
	position: relative;
}

/* ---- CARD ---- */
.sl-card {
	position: relative;
	width: 100%;
	max-width: 460px;
	background: rgba(6,1,2,0.88);
	border: 1px solid rgba(155,17,30,0.5);
	border-radius: 16px;
	padding: 44px 40px 36px;
	backdrop-filter: blur(20px);
	box-shadow:
		0 0 0 1px rgba(155,17,30,0.1),
		0 0 40px rgba(155,17,30,0.15),
		0 20px 60px rgba(0,0,0,0.7);
	overflow: hidden;
}

/* Glow superior del card */
.sl-card-glow {
	position: absolute;
	top: -1px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #9B111E, #e03040, #9B111E, transparent);
	border-radius: 2px;
	box-shadow: 0 0 20px rgba(155,17,30,0.8), 0 0 40px rgba(155,17,30,0.4);
}

/* ---- HEADER ---- */
.sl-header {
	text-align: center;
	margin-bottom: 24px;
}

.sl-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(155,17,30,0.12);
	border: 1.5px solid rgba(155,17,30,0.5);
	color: #e03040;
	font-size: 22px;
	margin-bottom: 16px;
	box-shadow: 0 0 20px rgba(155,17,30,0.3);
}

.sl-title {
	font-family: 'Cinzel', serif;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 6px;
	text-transform: uppercase;
	margin: 0 0 8px;
	text-shadow: 0 0 30px rgba(155,17,30,0.4);
}

.sl-subtitle {
	font-size: 12px;
	color: rgba(200,200,200,0.4);
	letter-spacing: 1.5px;
	margin: 0;
}

/* ---- SEPARADOR ---- */
.sl-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
}
.sl-divider-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(155,17,30,0.4));
}
.sl-divider:last-of-type .sl-divider-line:last-child {
	background: linear-gradient(270deg, transparent, rgba(155,17,30,0.4));
}
.sl-divider-icon {
	color: rgba(155,17,30,0.6);
	font-size: 14px;
}

/* ---- CAMPOS ---- */
.sl-field {
	margin-bottom: 20px;
}

.sl-label {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	color: rgba(200,200,200,0.5);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.sl-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(155,17,30,0.25);
	border-radius: 10px;
	transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
	overflow: hidden;
}

.sl-input-wrap.sl-focused,
.sl-input-wrap:focus-within {
	border-color: rgba(155,17,30,0.8) !important;
	background: rgba(155,17,30,0.06) !important;
	box-shadow: 0 0 0 3px rgba(155,17,30,0.12), 0 0 20px rgba(155,17,30,0.1) !important;
}

.sl-input-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 52px;
	color: rgba(155,17,30,0.7);
	font-size: 15px;
	flex-shrink: 0;
	border-right: 1px solid rgba(155,17,30,0.15);
	background: rgba(155,17,30,0.06);
	transition: color 0.2s;
}

.sl-input-wrap.sl-focused .sl-input-icon,
.sl-input-wrap:focus-within .sl-input-icon {
	color: #e03040;
}

.sl-input {
	flex: 1;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	color: #fff !important;
	font-size: 14px !important;
	font-family: 'Roboto', sans-serif !important;
	padding: 14px 16px !important;
	letter-spacing: 0.5px;
	box-shadow: none !important;
}

.sl-input::placeholder {
	color: rgba(200,200,200,0.25) !important;
	font-size: 13px !important;
}

/* Botón ojo */
.sl-eye-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 52px;
	background: none;
	border: none;
	color: rgba(200,200,200,0.3);
	font-size: 14px;
	cursor: pointer;
	transition: color 0.2s;
	flex-shrink: 0;
}
.sl-eye-btn:hover { color: rgba(200,200,200,0.7); }

/* ---- OLVIDÓ CONTRASEÑA ---- */
.sl-forgot {
	text-align: right;
	margin-bottom: 28px;
	margin-top: -8px;
}
.sl-forgot a {
	font-size: 12px;
	color: rgba(155,17,30,0.8) !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	transition: color 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.sl-forgot a:hover { color: #e03040 !important; }

/* ---- BOTÓN INGRESAR ---- */
.sl-btn {
	position: relative;
	width: 100%;
	padding: 16px 24px;
	background: linear-gradient(135deg, rgba(100,5,15,0.9), rgba(155,17,30,0.85), rgba(100,5,15,0.9));
	border: 1.5px solid rgba(155,17,30,0.8);
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 4px;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'Roboto', sans-serif;
	transition: all 0.3s;
	overflow: hidden;
	box-shadow:
		0 0 20px rgba(155,17,30,0.3),
		0 4px 20px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.08);
}

.sl-btn-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(255,60,80,0.15) 0%, transparent 70%);
	pointer-events: none;
}

.sl-btn:hover {
	background: linear-gradient(135deg, rgba(155,17,30,0.95), rgba(200,20,40,0.9), rgba(155,17,30,0.95));
	border-color: #e03040;
	box-shadow:
		0 0 30px rgba(155,17,30,0.6),
		0 0 60px rgba(155,17,30,0.2),
		0 6px 24px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(255,255,255,0.12);
	transform: translateY(-2px);
	color: #fff;
}

.sl-btn:active {
	transform: translateY(0);
	box-shadow: 0 0 15px rgba(155,17,30,0.4), 0 2px 10px rgba(0,0,0,0.4);
}

/* ---- FOOTER DEL CARD ---- */
.sl-card-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(155,17,30,0.12);
	font-size: 12px;
	color: rgba(200,200,200,0.35);
	letter-spacing: 0.5px;
}

.sl-register-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: rgba(155,17,30,0.85) !important;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color 0.2s;
}
.sl-register-link:hover { color: #e03040 !important; }

/* ---- DECORACIONES LATERALES ---- */
.sl-deco {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 0.4;
}
.sl-deco-line {
	width: 1px;
	height: 80px;
	background: linear-gradient(180deg, transparent, rgba(155,17,30,0.8), transparent);
}
.sl-deco-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9B111E;
	box-shadow: 0 0 8px rgba(155,17,30,0.8);
}

/* Ocultar decoraciones en pantallas pequeñas */
@media (max-width: 700px) {
	.sl-deco { display: none; }
	.sl-card { padding: 32px 24px 28px; }
	.sl-title { font-size: 24px; letter-spacing: 4px; }
}


/* =====================================================
   MODAL LOGIN — FLOTANTE PROFESIONAL (slm-*)
   ===================================================== */

/* Overlay */
.slm-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	padding: 20px;
}

.slm-overlay.slm-open {
	opacity: 1;
	pointer-events: all;
}

/* Modal */
.slm-modal {
	position: relative;
	width: 100%;
	max-width: 500px;
	background: rgba(8,2,3,0.97);
	border: 1px solid rgba(155,17,30,0.55);
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(155,17,30,0.1),
		0 0 60px rgba(155,17,30,0.2),
		0 30px 80px rgba(0,0,0,0.8);
	transform: translateY(24px) scale(0.97);
	transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
	opacity: 0;
}

.slm-overlay.slm-open .slm-modal {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Glow top */
.slm-glow-top {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(155,17,30,0.6) 20%, #e03040 50%, rgba(155,17,30,0.6) 80%, transparent 100%);
	box-shadow: 0 0 20px rgba(155,17,30,0.8), 0 0 40px rgba(155,17,30,0.3);
}

/* Header */
.slm-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 28px 18px;
}

.slm-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.slm-header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(155,17,30,0.12);
	border: 1px solid rgba(155,17,30,0.4);
	color: #e03040;
	font-size: 18px;
	flex-shrink: 0;
	box-shadow: 0 0 16px rgba(155,17,30,0.25);
}

.slm-title {
	font-family: 'Cinzel', serif;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.2;
}

.slm-subtitle {
	font-size: 11px;
	color: rgba(200,200,200,0.4);
	letter-spacing: 1px;
	margin-top: 3px;
}

/* Botón cerrar */
.slm-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	color: rgba(200,200,200,0.5);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
	flex-shrink: 0;
}
.slm-close:hover {
	background: rgba(155,17,30,0.2);
	border-color: rgba(155,17,30,0.5);
	color: #e03040;
}

/* Divider */
.slm-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(155,17,30,0.3), rgba(155,17,30,0.5), rgba(155,17,30,0.3), transparent);
	margin: 0 28px;
}

/* Body */
.slm-body {
	padding: 28px 28px 24px;
}

/* Error */
.slm-error {
	background: rgba(155,17,30,0.12);
	border: 1px solid rgba(155,17,30,0.4);
	border-radius: 8px;
	color: #ff6b7a;
	font-size: 13px;
	padding: 12px 16px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Campos */
.slm-field {
	margin-bottom: 18px;
}

.slm-label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: rgba(200,200,200,0.55);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.slm-label i {
	color: rgba(155,17,30,0.7);
	font-size: 12px;
}

/* Input wrap */
.slm-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(155,17,30,0.2);
	border-radius: 10px;
	transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
	overflow: hidden;
}

.slm-input-wrap.slm-focused,
.slm-input-wrap:focus-within {
	border-color: rgba(155,17,30,0.75) !important;
	background: rgba(155,17,30,0.05) !important;
	box-shadow: 0 0 0 3px rgba(155,17,30,0.1), 0 0 20px rgba(155,17,30,0.08) !important;
}

/* Input */
.slm-input {
	flex: 1;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 14px !important;
	font-family: 'Roboto', sans-serif !important;
	padding: 14px 18px !important;
	letter-spacing: 0.3px;
	width: 100%;
}
.slm-input::placeholder {
	color: rgba(200,200,200,0.2) !important;
	font-size: 13px !important;
}

/* Botón ojo */
.slm-eye {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 50px;
	background: none;
	border: none;
	color: rgba(200,200,200,0.25);
	font-size: 14px;
	cursor: pointer;
	transition: color 0.2s;
	flex-shrink: 0;
}
.slm-eye:hover { color: rgba(200,200,200,0.6); }

/* Botón ingresar */
.slm-btn {
	position: relative;
	width: 100%;
	padding: 16px 24px;
	margin-top: 8px;
	background: linear-gradient(135deg, rgba(90,5,12,0.95), rgba(155,17,30,0.9), rgba(90,5,12,0.95));
	border: 1.5px solid rgba(155,17,30,0.7);
	border-radius: 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 4px;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'Roboto', sans-serif;
	transition: all 0.3s;
	overflow: hidden;
	box-shadow:
		0 0 20px rgba(155,17,30,0.25),
		0 4px 20px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.07);
}

.slm-btn-shine {
	position: absolute;
	top: 0; left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
	transform: skewX(-20deg);
	transition: left 0.5s ease;
}

.slm-btn:hover {
	background: linear-gradient(135deg, rgba(155,17,30,0.95), rgba(200,20,40,0.9), rgba(155,17,30,0.95));
	border-color: #e03040;
	box-shadow:
		0 0 30px rgba(155,17,30,0.55),
		0 0 60px rgba(155,17,30,0.15),
		0 6px 24px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(255,255,255,0.1);
	transform: translateY(-2px);
	color: #fff;
}
.slm-btn:hover .slm-btn-shine { left: 140%; }
.slm-btn:active { transform: translateY(0); }

/* Footer links */
.slm-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(155,17,30,0.1);
	flex-wrap: wrap;
}

.slm-footer-sep {
	color: rgba(155,17,30,0.3);
	font-size: 12px;
}

.slm-link-forgot,
.slm-link-register {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	transition: color 0.2s;
}

.slm-link-forgot {
	color: rgba(200,200,200,0.4) !important;
}
.slm-link-forgot:hover { color: rgba(200,200,200,0.8) !important; }

.slm-link-register {
	color: rgba(155,17,30,0.8) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.slm-link-register:hover { color: #e03040 !important; }

/* Responsive */
@media (max-width: 540px) {
	.slm-modal { border-radius: 12px; }
	.slm-header { padding: 18px 20px 14px; }
	.slm-body { padding: 20px 20px 18px; }
	.slm-title { font-size: 14px; letter-spacing: 1.5px; }
}


/* =====================================================
   REGISTRO — REDISEÑO PROFESIONAL (sreg-*)
   ===================================================== */

/* Página wrapper */
.sreg-page {
	max-width: 580px;
	margin: 0 auto;
	padding: 20px 0 60px;
}

/* ---- Header de página ---- */
.sreg-page-header {
	text-align: center;
	margin-bottom: 32px;
}

.sreg-page-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(155,17,30,0.12);
	border: 1.5px solid rgba(155,17,30,0.45);
	color: #e03040;
	font-size: 24px;
	margin-bottom: 16px;
	box-shadow: 0 0 24px rgba(155,17,30,0.25);
}

.sreg-page-title {
	font-family: 'Cinzel', serif;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 8px;
	text-shadow: 0 0 30px rgba(155,17,30,0.35);
}

.sreg-page-sub {
	font-size: 13px;
	color: rgba(200,200,200,0.4);
	letter-spacing: 1px;
	margin: 0;
}

/* ---- Card ---- */
.sreg-card {
	position: relative;
	background: rgba(6,1,2,0.9);
	border: 1px solid rgba(155,17,30,0.45);
	border-radius: 16px;
	padding: 36px 36px 32px;
	backdrop-filter: blur(20px);
	box-shadow:
		0 0 0 1px rgba(155,17,30,0.08),
		0 0 50px rgba(155,17,30,0.12),
		0 24px 60px rgba(0,0,0,0.7);
	overflow: hidden;
}

.sreg-card-glow {
	position: absolute;
	top: -1px; left: 10%; right: 10%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #9B111E, #e03040, #9B111E, transparent);
	box-shadow: 0 0 20px rgba(155,17,30,0.8), 0 0 40px rgba(155,17,30,0.3);
}

/* ---- Etiqueta de sección ---- */
.sreg-section-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(155,17,30,0.8);
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(155,17,30,0.15);
}
.sreg-section-label i { font-size: 12px; }

/* ---- Campo ---- */
.sreg-field {
	margin-bottom: 20px;
}

.sreg-label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	color: rgba(200,200,200,0.7);
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}
.sreg-label i { color: rgba(155,17,30,0.7); font-size: 12px; }

/* ---- Input wrap ---- */
.sreg-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(155,17,30,0.2);
	border-radius: 10px;
	transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
	overflow: hidden;
}

.sreg-input-wrap.sreg-focused,
.sreg-input-wrap:focus-within {
	border-color: rgba(155,17,30,0.75) !important;
	background: rgba(155,17,30,0.05) !important;
	box-shadow: 0 0 0 3px rgba(155,17,30,0.1), 0 0 20px rgba(155,17,30,0.07) !important;
}

/* ---- Input ---- */
.sreg-input {
	flex: 1;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 14px !important;
	font-family: 'Roboto', sans-serif !important;
	padding: 14px 16px !important;
	letter-spacing: 0.3px;
	width: 100%;
}
.sreg-input::placeholder {
	color: rgba(200,200,200,0.2) !important;
	font-size: 13px !important;
}

/* Status icon (check/error) */
.sreg-input-status {
	width: 36px;
	text-align: center;
	font-size: 14px;
	flex-shrink: 0;
}

/* ---- Botón ojo ---- */
.sreg-eye {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 50px;
	background: none;
	border: none;
	color: rgba(200,200,200,0.25);
	font-size: 14px;
	cursor: pointer;
	transition: color 0.2s;
	flex-shrink: 0;
}
.sreg-eye:hover { color: rgba(200,200,200,0.6); }

/* ---- Hint ---- */
.sreg-hint {
	display: block;
	font-size: 11px;
	color: rgba(200,200,200,0.3);
	margin-top: 5px;
	padding-left: 2px;
	letter-spacing: 0.3px;
}

/* ---- Barra de fortaleza ---- */
.sreg-strength-bar {
	height: 3px;
	background: rgba(255,255,255,0.06);
	border-radius: 2px;
	margin-top: 8px;
	overflow: hidden;
}
.sreg-strength-fill {
	height: 100%;
	width: 0;
	border-radius: 2px;
	transition: width 0.4s ease, background 0.4s ease;
}
.sreg-str-weak   { background: #e74c3c !important; }
.sreg-str-fair   { background: #f39c12 !important; }
.sreg-str-good   { background: #2ecc71 !important; }
.sreg-str-strong { background: #27ae60 !important; }

.sreg-strength-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top: 4px;
	text-transform: uppercase;
	min-height: 14px;
}
.sreg-strength-label.sreg-str-weak   { color: #e74c3c; }
.sreg-strength-label.sreg-str-fair   { color: #f39c12; }
.sreg-strength-label.sreg-str-good   { color: #2ecc71; }
.sreg-strength-label.sreg-str-strong { color: #27ae60; }

/* ---- Checkbox custom ---- */
.sreg-check-group {
	margin-bottom: 24px;
}

.sreg-check-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 13px;
	color: rgba(200,200,200,0.6);
	line-height: 1.5;
}

.sreg-check-label input[type="checkbox"] {
	display: none;
}

.sreg-check-box {
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 1.5px solid rgba(155,17,30,0.4);
	border-radius: 5px;
	background: rgba(255,255,255,0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	transition: all 0.2s;
	flex-shrink: 0;
}

.sreg-check-icon {
	font-size: 11px;
	color: #fff;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.2s;
}

.sreg-check-label input[type="checkbox"]:checked + .sreg-check-box {
	background: #9B111E;
	border-color: #9B111E;
	box-shadow: 0 0 10px rgba(155,17,30,0.4);
}

.sreg-check-label input[type="checkbox"]:checked + .sreg-check-box .sreg-check-icon {
	opacity: 1;
	transform: scale(1);
}

.sreg-check-text a {
	color: #9B111E !important;
	font-weight: 700;
	text-decoration: underline;
}
.sreg-check-text a:hover { color: #e03040 !important; }

/* ---- Botón registrarse ---- */
.sreg-btn {
	position: relative;
	width: 100%;
	padding: 17px 24px;
	background: linear-gradient(135deg, rgba(90,5,12,0.95), rgba(155,17,30,0.9), rgba(90,5,12,0.95));
	border: 1.5px solid rgba(155,17,30,0.7);
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 4px;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'Roboto', sans-serif;
	transition: all 0.3s;
	overflow: hidden;
	box-shadow:
		0 0 20px rgba(155,17,30,0.25),
		0 4px 20px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.07);
}

.sreg-btn-shine {
	position: absolute;
	top: 0; left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
	transform: skewX(-20deg);
	transition: left 0.5s ease;
}

.sreg-btn:hover {
	background: linear-gradient(135deg, rgba(155,17,30,0.95), rgba(200,20,40,0.9), rgba(155,17,30,0.95));
	border-color: #e03040;
	box-shadow:
		0 0 30px rgba(155,17,30,0.55),
		0 0 60px rgba(155,17,30,0.15),
		0 6px 24px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(255,255,255,0.1);
	transform: translateY(-2px);
	color: #fff;
}
.sreg-btn:hover .sreg-btn-shine { left: 140%; }
.sreg-btn:active { transform: translateY(0); }

/* ---- Link login ---- */
.sreg-login-link {
	text-align: center;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(155,17,30,0.1);
	font-size: 13px;
	color: rgba(200,200,200,0.35);
}

.sreg-login-link a {
	color: rgba(155,17,30,0.85) !important;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-left: 6px;
	transition: color 0.2s;
}
.sreg-login-link a:hover { color: #e03040 !important; }

/* Responsive */
@media (max-width: 600px) {
	.sreg-card { padding: 24px 20px 22px; }
	.sreg-page-title { font-size: 22px; letter-spacing: 2px; }
}


/* =====================================================
   MY ACCOUNT — REDISEÑO COMPLETO (ucp-*)
   ===================================================== */

/* Wrapper general */
.ucp-wrap {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 20px;
}

/* Centrar el contenido interno del usercp */
.ucp-account-card,
.ucp-credits-grid,
.ucp-chars-grid,
.ucp-section-title,
.ucp-nav {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* ---- NAV TABS ---- */
.ucp-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	background: rgba(8,2,3,0.75);
	border: 1px solid rgba(155,17,30,0.25);
	border-radius: 10px;
	padding: 10px;
	backdrop-filter: blur(10px);
	justify-content: center;
}
.ucp-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(200,200,200,0.55) !important;
	text-decoration: none !important;
	transition: all 0.2s;
	border: 1px solid transparent;
	position: relative;
	overflow: hidden;
}
.ucp-nav-item::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0;
	width: 0; height: 2px;
	background: linear-gradient(90deg, #9B111E, #c9a227);
	transition: width 0.25s;
}
.ucp-nav-item:hover {
	background: rgba(155,17,30,0.18);
	border-color: rgba(155,17,30,0.5);
	color: #fff !important;
}
.ucp-nav-item:hover::after { width: 100%; }
.ucp-nav-item.active {
	background: linear-gradient(135deg, rgba(155,17,30,0.45), rgba(80,5,12,0.6));
	border-color: rgba(155,17,30,0.7);
	box-shadow: 0 0 14px rgba(155,17,30,0.25);
	color: #fff !important;
}
.ucp-nav-item.active::after { width: 100%; }
.ucp-nav-donate {
	background: rgba(201,162,39,0.08) !important;
	border-color: rgba(201,162,39,0.35) !important;
	color: #c9a227 !important;
}
.ucp-nav-donate:hover {
	background: rgba(201,162,39,0.2) !important;
	border-color: rgba(201,162,39,0.65) !important;
	color: #fff !important;
}

/* ---- TÍTULOS DE SECCIÓN ---- */
.ucp-section-title {
	font-family: 'Cinzel', serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #9B111E;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.ucp-section-title i { margin-right: 8px; color: #c9a227; }
.ucp-title-line {
	display: block;
	width: 80px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #9B111E, #c9a227, transparent);
	border-radius: 2px;
}

/* ---- CARD DATOS DE CUENTA ---- */
.ucp-account-card {
	background: rgba(8,2,3,0.85);
	border: 1px solid rgba(155,17,30,0.25);
	border-radius: 12px;
	overflow: hidden;
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.ucp-account-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid rgba(155,17,30,0.1);
	gap: 12px;
	transition: background 0.2s;
}
.ucp-account-row:hover { background: rgba(155,17,30,0.05); }
.ucp-account-row-last { border-bottom: none; }
.ucp-account-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(200,200,200,0.45);
	min-width: 160px;
}
.ucp-account-label i { color: rgba(155,17,30,0.7); font-size: 13px; }
.ucp-account-value {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(220,220,220,0.9);
	flex: 1;
	justify-content: flex-end;
}
.ucp-cyan { color: #c9a227 !important; font-weight: 700; }

/* Botón CAMBIAR */
.ucp-btn-change {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 4px;
	background: transparent;
	color: rgba(200,200,200,0.6) !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: all 0.2s;
	white-space: nowrap;
}
.ucp-btn-change:hover {
	border-color: #c9a227;
	color: #c9a227 !important;
	background: rgba(201,162,39,0.08);
}

/* Badges estado */
.ucp-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.ucp-badge-active {
	background: rgba(46,204,113,0.12);
	border: 1px solid rgba(46,204,113,0.4);
	color: #2ecc71;
}
.ucp-badge-blocked {
	background: rgba(231,76,60,0.12);
	border: 1px solid rgba(231,76,60,0.4);
	color: #e74c3c;
}

/* Online dot */
.ucp-online-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ucp-dot-on  { background: #2ecc71; box-shadow: 0 0 8px rgba(46,204,113,0.8); animation: ucpPulse 2s infinite; }
.ucp-dot-off { background: rgba(180,180,180,0.3); }
@keyframes ucpPulse {
	0%, 100% { box-shadow: 0 0 6px rgba(46,204,113,0.7); }
	50%       { box-shadow: 0 0 14px rgba(46,204,113,1); }
}
.ucp-online-text { font-size: 12px; font-weight: 700; }
.ucp-text-on  { color: #2ecc71; }
.ucp-text-off { color: rgba(180,180,180,0.4); }

/* ---- CRÉDITOS ---- */
.ucp-credits-grid { display: flex; flex-direction: column; gap: 10px; }
.ucp-credit-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(8,2,3,0.85);
	border: 1px solid rgba(155,17,30,0.2);
	border-radius: 10px;
	padding: 14px 20px;
	backdrop-filter: blur(10px);
	transition: border-color 0.2s;
}
.ucp-credit-card:hover { border-color: rgba(201,162,39,0.4); }
.ucp-credit-icon { font-size: 22px; color: #c9a227; flex-shrink: 0; width: 36px; text-align: center; }
.ucp-credit-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ucp-credit-name { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(200,200,200,0.5); }
.ucp-credit-balance { font-size: 22px; font-weight: 900; color: #c9a227; font-family: 'Roboto', sans-serif; line-height: 1; }
.ucp-btn-buy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border: 1px solid rgba(155,17,30,0.5);
	border-radius: 6px;
	background: rgba(155,17,30,0.12);
	color: #e03040 !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: all 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
}
.ucp-btn-buy:hover {
	background: rgba(155,17,30,0.28);
	border-color: #9B111E;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(155,17,30,0.3);
}

/* ---- MIS PERSONAJES ---- */
.ucp-chars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ucp-char-card {
	background: rgba(8,2,3,0.85);
	border: 1px solid rgba(155,17,30,0.2);
	border-radius: 12px;
	overflow: hidden;
	backdrop-filter: blur(10px);
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ucp-char-card:hover {
	border-color: rgba(155,17,30,0.6);
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(155,17,30,0.15);
}
.ucp-char-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: rgba(0,0,0,0.35);
	border-bottom: 1px solid rgba(155,17,30,0.12);
}
.ucp-char-avatar-circle { position: relative; flex-shrink: 0; }
.ucp-char-avatar-circle img {
	width: 60px; height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(155,17,30,0.6);
	box-shadow: 0 0 12px rgba(155,17,30,0.3);
	display: block;
}
.ucp-char-dot {
	position: absolute; bottom: 2px; right: 2px;
	width: 11px; height: 11px;
	border-radius: 50%;
	border: 2px solid rgba(8,2,3,0.9);
}
.ucp-char-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ucp-char-name { font-size: 14px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucp-char-class { font-size: 11px; font-weight: 600; color: rgba(155,17,30,0.9); letter-spacing: 0.5px; }
.ucp-char-level { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ucp-char-lvl-num { font-size: 22px; font-weight: 900; color: #fff; line-height: 1; font-family: 'Roboto', sans-serif; }
.ucp-char-lvl-lbl { font-size: 8px; color: rgba(200,200,200,0.4); letter-spacing: 2px; text-transform: uppercase; }
.ucp-char-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(155,17,30,0.08); }
.ucp-char-stat { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; background: rgba(8,2,3,0.75); }
.ucp-char-stat-val { font-size: 16px; font-weight: 900; line-height: 1; font-family: 'Roboto', sans-serif; }
.ucp-char-stat-lbl { font-size: 8px; color: rgba(200,200,200,0.4); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }
.ucp-gold  { color: #c9a227; }
.ucp-green { color: #2ecc71; }
.ucp-char-footer { padding: 10px 14px; background: rgba(0,0,0,0.2); }
.ucp-btn-profile {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	width: 100%; padding: 8px;
	border: 1px solid rgba(155,17,30,0.4);
	border-radius: 6px; background: transparent;
	color: rgba(200,200,200,0.7) !important;
	font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
	text-decoration: none !important; transition: all 0.2s;
}
.ucp-btn-profile:hover { background: rgba(155,17,30,0.15); border-color: #9B111E; color: #fff !important; }

/* ---- HISTORIAL ---- */
.ucp-history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ucp-history-table thead tr { background: rgba(155,17,30,0.08); border-bottom: 1px solid rgba(155,17,30,0.2); }
.ucp-history-table thead th { padding: 12px 16px; color: rgba(201,162,39,0.7); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; }
.ucp-history-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s; }
.ucp-history-table tbody tr:hover { background: rgba(155,17,30,0.05); }
.ucp-history-table tbody td { padding: 10px 16px; color: rgba(200,200,200,0.7); }

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
	.ucp-wrap { max-width: 100%; }
	.ucp-chars-grid { grid-template-columns: 1fr; }
	.ucp-nav { gap: 4px; justify-content: flex-start; }
	.ucp-nav-item { padding: 6px 10px; font-size: 10px; }
	.ucp-account-label { min-width: 120px; font-size: 11px; }
	.ucp-nav-donate { margin-left: 0; }
}


/* =====================================================
   RANKING — REDISEÑO COMPLETO (mu-rank-*)
   ===================================================== */

.mu-rank-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Filtro por raza */
.mu-race-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 14px 16px;
	background: rgba(5,0,1,0.85);
	border: 1px solid rgba(155,17,30,0.2);
	border-radius: 10px;
}
.mu-race-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 6px;
	border: 1px solid rgba(155,17,30,0.3);
	background: rgba(155,17,30,0.08);
	color: rgba(200,200,200,0.55);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
	font-family: 'Roboto', sans-serif;
}
.mu-race-btn:hover {
	background: rgba(155,17,30,0.2);
	border-color: rgba(155,17,30,0.6);
	color: #fff;
}
.mu-race-btn.active {
	background: rgba(155,17,30,0.35);
	border-color: #9B111E;
	color: #fff;
	box-shadow: 0 0 10px rgba(155,17,30,0.3);
}
.mu-race-btn i { font-size: 11px; }

/* Tabla */
.mu-rank-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 3px;
	background: transparent;
}

/* Header */
.mu-rank-thead-row { background: transparent; }
.mu-rank-th {
	background: rgba(5,0,1,0.9);
	color: rgba(201,162,39,0.7);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 12px 14px;
	border: none;
	border-bottom: 2px solid rgba(155,17,30,0.35);
}
.mu-rank-th:first-child { border-radius: 8px 0 0 0; width: 52px; text-align: center; }
.mu-rank-th:last-child  { border-radius: 0 8px 0 0; }
.mu-rank-th-num  { width: 52px; text-align: center; }
.mu-rank-th-center { text-align: center; }

/* Filas */
.mu-rank-row {
	background: rgba(8,2,3,0.82);
	transition: background 0.2s, transform 0.15s;
}
.mu-rank-row:hover {
	background: rgba(155,17,30,0.1);
	transform: translateX(2px);
}
.mu-rank-td {
	padding: 11px 14px;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.03);
	vertical-align: middle;
	color: rgba(220,220,220,0.8);
	font-size: 13px;
}
.mu-rank-td:first-child { border-left: 3px solid transparent; }

/* Top 3 */
.mu-rank-row-gold   { background: rgba(201,162,39,0.06) !important; }
.mu-rank-row-silver { background: rgba(189,195,199,0.04) !important; }
.mu-rank-row-bronze { background: rgba(205,127,50,0.04) !important; }
.mu-rank-row-gold   .mu-rank-td:first-child { border-left-color: #c9a227; }
.mu-rank-row-silver .mu-rank-td:first-child { border-left-color: #bdc3c7; }
.mu-rank-row-bronze .mu-rank-td:first-child { border-left-color: #cd7f32; }

/* Posición */
.mu-rank-pos { text-align: center; width: 52px; }
.mu-pos-num {
	font-size: 13px;
	font-weight: 800;
	color: rgba(200,200,200,0.35);
	font-family: 'Roboto', sans-serif;
}
.mu-medal { font-size: 18px; display: inline-block; }
.mu-medal-gold   { color: #c9a227; filter: drop-shadow(0 0 6px rgba(201,162,39,0.8)); }
.mu-medal-silver { color: #bdc3c7; filter: drop-shadow(0 0 5px rgba(189,195,199,0.6)); }
.mu-medal-bronze { color: #cd7f32; filter: drop-shadow(0 0 5px rgba(205,127,50,0.5)); }

/* Avatar */
.mu-rank-avatar {
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid rgba(155,17,30,0.4) !important;
	box-shadow: 0 0 6px rgba(0,0,0,0.5) !important;
}
.mu-rank-avatar-online {
	border-color: rgba(46,204,113,0.6) !important;
	box-shadow: 0 0 8px rgba(46,204,113,0.35) !important;
}

/* Clase */
.mu-class-cell { display: flex; align-items: center; gap: 10px; }
.mu-classname  { font-size: 12px; color: rgba(200,200,200,0.6); font-weight: 600; }

/* Personaje */
.mu-char-cell { display: flex; align-items: center; gap: 8px; }
.mu-charname a, .mu-charname {
	font-size: 14px;
	font-weight: 800;
	color: #fff !important;
	text-decoration: none !important;
}
.mu-charname a:hover { color: #c9a227 !important; }
.mu-online-dot {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #2ecc71;
	box-shadow: 0 0 6px rgba(46,204,113,0.8);
	flex-shrink: 0;
}

/* Valores */
.mu-val-center { text-align: center; }
.mu-val-gold   { color: #c9a227 !important; font-weight: 800; font-size: 14px; font-family: 'Roboto', sans-serif; }
.mu-val-cyan   { color: rgba(200,200,200,0.6) !important; font-weight: 700; font-size: 13px; font-family: 'Roboto', sans-serif; }
.mu-val-white  { color: rgba(200,200,200,0.5) !important; font-weight: 600; font-size: 13px; font-family: 'Roboto', sans-serif; }
.mu-val-purple { color: #c9a227 !important; font-weight: 800; font-size: 14px; font-family: 'Roboto', sans-serif; }

/* Guild */
.mu-guild-cell { display: flex; align-items: center; gap: 8px; }
.mu-guild-logo { flex-shrink: 0; }
.mu-guild-logo img, .mu-guild-logo table { width: 22px !important; height: 22px !important; border-radius: 3px !important; }
.mu-guild-logo table td { padding: 0 !important; border: none !important; line-height: 0 !important; }
.mu-guildname a, .mu-guildname {
	font-size: 12px;
	font-weight: 700;
	color: rgba(201,162,39,0.75) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.mu-guildname a:hover { color: #c9a227 !important; }
.mu-no-guild { color: rgba(200,200,200,0.2); font-size: 13px; }

/* Fecha */
.mu-rank-date {
	text-align: right;
	font-size: 11px;
	color: rgba(200,200,200,0.25);
	padding: 8px 4px;
	letter-spacing: 1px;
}
.mu-rank-date i { color: rgba(155,17,30,0.4); }

/* Ocultar paginación DataTables en rankings */
#RankingResets_wrapper .dataTables_paginate,
#RankingResets_wrapper .dataTables_length,
#RankingResets_wrapper .dataTables_info,
#RankingGeneral_wrapper .dataTables_paginate,
#RankingGeneral_wrapper .dataTables_length,
#RankingGeneral_wrapper .dataTables_info { display: none !important; }

/* Buscador DataTables — estilo oscuro */
#RankingResets_wrapper .dataTables_filter input,
#RankingGeneral_wrapper .dataTables_filter input {
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(155,17,30,0.3) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 6px 12px !important;
}
#RankingResets_wrapper .dataTables_filter label,
#RankingGeneral_wrapper .dataTables_filter label {
	color: rgba(200,200,200,0.5) !important;
	font-size: 12px !important;
}


/* =====================================================
   RANKINGS NAV MENU — REDISEÑO COMPLETO
   ===================================================== */

/* Contenedor del menú */
.rankings_menu {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 14px 0 18px !important;
	background: transparent !important;
	border: none !important;
	list-style: none !important;
	margin: 0 0 4px !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Ocultar separadores | */
.rankings_menu span { display: none !important; }

/* Cada enlace */
.rankings_menu a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 9px 20px !important;
	border-radius: 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: rgba(200,200,200,0.55) !important;
	background: rgba(8,2,3,0.75) !important;
	border: 1px solid rgba(155,17,30,0.25) !important;
	border-left: none !important;
	transition: all 0.2s !important;
	position: relative !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	background-image: none !important;
	background-size: unset !important;
	background-position: unset !important;
}

/* Línea inferior decorativa */
.rankings_menu a::after {
	content: "" !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 0 !important;
	height: 2px !important;
	background: linear-gradient(90deg, #9B111E, #c9a227) !important;
	transition: width 0.25s !important;
}

.rankings_menu a:hover {
	color: #fff !important;
	background: rgba(155,17,30,0.2) !important;
	border-color: rgba(155,17,30,0.55) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(155,17,30,0.2) !important;
	background-color: rgba(155,17,30,0.2) !important;
}
.rankings_menu a:hover::after { width: 100% !important; }

/* Tab activo — viene como <b>texto</b> dentro del <a>, o como clase active */
.rankings_menu b a,
.rankings_menu a.active,
.rankings_menu a[style*="bold"] {
	color: #fff !important;
	background: linear-gradient(135deg, rgba(155,17,30,0.5), rgba(80,5,12,0.7)) !important;
	background-color: rgba(155,17,30,0.5) !important;
	border-color: rgba(155,17,30,0.75) !important;
	box-shadow: 0 0 18px rgba(155,17,30,0.3), inset 0 0 10px rgba(155,17,30,0.1) !important;
}
.rankings_menu b a::after,
.rankings_menu a.active::after { width: 100% !important; }
.rankings_menu b { font-weight: normal !important; }

/* Fondo oscuro del main-wrapper para rankings */
.main-wrapper {
	background: rgba(5,0,1,0.88) !important;
	border-top: 1px solid rgba(155,17,30,0.2) !important;
	border-bottom: 1px solid rgba(155,17,30,0.2) !important;
}

/* Filtro por raza */
.mu-race-filter {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 14px 16px !important;
	background: rgba(5,0,1,0.85) !important;
	border: 1px solid rgba(155,17,30,0.2) !important;
	border-radius: 10px !important;
}
.mu-race-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 7px 16px !important;
	border-radius: 8px !important;
	border: 1px solid rgba(155,17,30,0.3) !important;
	background: rgba(8,2,3,0.75) !important;
	color: rgba(200,200,200,0.55) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	font-family: 'Roboto', sans-serif !important;
	position: relative !important;
	overflow: hidden !important;
}
.mu-race-btn::after {
	content: "" !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 0 !important;
	height: 2px !important;
	background: linear-gradient(90deg, #9B111E, #c9a227) !important;
	transition: width 0.25s !important;
}
.mu-race-btn:hover {
	background: rgba(155,17,30,0.2) !important;
	border-color: rgba(155,17,30,0.55) !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
}
.mu-race-btn:hover::after { width: 100% !important; }
.mu-race-btn.active {
	background: linear-gradient(135deg, rgba(155,17,30,0.5), rgba(80,5,12,0.7)) !important;
	border-color: rgba(155,17,30,0.75) !important;
	color: #fff !important;
	box-shadow: 0 0 16px rgba(155,17,30,0.3) !important;
}
.mu-race-btn.active::after { width: 100% !important; }
.mu-race-btn i { font-size: 11px !important; }

/* Tabla ranking */
.mu-rank-wrap { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.mu-rank-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; background: transparent; }
.mu-rank-thead-row { background: transparent; }
.mu-rank-th {
	background: rgba(5,0,1,0.9) !important;
	color: rgba(201,162,39,0.7) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	padding: 12px 14px !important;
	border: none !important;
	border-bottom: 2px solid rgba(155,17,30,0.35) !important;
}
.mu-rank-th:first-child { border-radius: 8px 0 0 0 !important; width: 52px !important; text-align: center !important; }
.mu-rank-th:last-child  { border-radius: 0 8px 0 0 !important; }
.mu-rank-th-num    { width: 52px !important; text-align: center !important; }
.mu-rank-th-center { text-align: center !important; }
.mu-rank-row { background: rgba(8,2,3,0.82) !important; transition: background 0.2s, transform 0.15s !important; }
.mu-rank-row:hover { background: rgba(155,17,30,0.1) !important; transform: translateX(2px) !important; }
.mu-rank-td { padding: 11px 14px !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,0.03) !important; vertical-align: middle !important; color: rgba(220,220,220,0.8) !important; font-size: 13px !important; }
.mu-rank-td:first-child { border-left: 3px solid transparent !important; }
.mu-rank-row-gold   { background: rgba(201,162,39,0.06) !important; }
.mu-rank-row-silver { background: rgba(189,195,199,0.04) !important; }
.mu-rank-row-bronze { background: rgba(205,127,50,0.04) !important; }
.mu-rank-row-gold   .mu-rank-td:first-child { border-left-color: #c9a227 !important; }
.mu-rank-row-silver .mu-rank-td:first-child { border-left-color: #bdc3c7 !important; }
.mu-rank-row-bronze .mu-rank-td:first-child { border-left-color: #cd7f32 !important; }
.mu-rank-pos { text-align: center !important; width: 52px !important; }
.mu-pos-num { font-size: 13px !important; font-weight: 800 !important; color: rgba(200,200,200,0.35) !important; font-family: 'Roboto', sans-serif !important; }
.mu-medal { font-size: 18px !important; display: inline-block !important; }
.mu-medal-gold   { color: #c9a227 !important; filter: drop-shadow(0 0 6px rgba(201,162,39,0.8)) !important; }
.mu-medal-silver { color: #bdc3c7 !important; filter: drop-shadow(0 0 5px rgba(189,195,199,0.6)) !important; }
.mu-medal-bronze { color: #cd7f32 !important; filter: drop-shadow(0 0 5px rgba(205,127,50,0.5)) !important; }
.mu-rank-avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid rgba(155,17,30,0.4) !important; }
.mu-rank-avatar-online { border-color: rgba(46,204,113,0.6) !important; box-shadow: 0 0 8px rgba(46,204,113,0.35) !important; }
.mu-class-cell { display: flex !important; align-items: center !important; gap: 10px !important; }
.mu-classname  { font-size: 12px !important; color: rgba(200,200,200,0.6) !important; font-weight: 600 !important; }
.mu-char-cell  { display: flex !important; align-items: center !important; gap: 8px !important; }
.mu-charname a, .mu-charname { font-size: 14px !important; font-weight: 800 !important; color: #fff !important; text-decoration: none !important; }
.mu-charname a:hover { color: #c9a227 !important; }
.mu-online-dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #2ecc71 !important; box-shadow: 0 0 6px rgba(46,204,113,0.8) !important; flex-shrink: 0 !important; }
.mu-val-center { text-align: center !important; }
.mu-val-gold   { color: #c9a227 !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-cyan   { color: rgba(200,200,200,0.6) !important; font-weight: 700 !important; font-size: 13px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-white  { color: rgba(200,200,200,0.5) !important; font-weight: 600 !important; font-size: 13px !important; font-family: 'Roboto', sans-serif !important; }
.mu-val-purple { color: #c9a227 !important; font-weight: 800 !important; font-size: 14px !important; font-family: 'Roboto', sans-serif !important; }
.mu-guild-cell { display: flex !important; align-items: center !important; gap: 8px !important; }
.mu-guild-logo { flex-shrink: 0 !important; }
.mu-guild-logo img, .mu-guild-logo table { width: 22px !important; height: 22px !important; border-radius: 3px !important; }
.mu-guild-logo table td { padding: 0 !important; border: none !important; line-height: 0 !important; }
.mu-guildname a, .mu-guildname { font-size: 12px !important; font-weight: 700 !important; color: rgba(201,162,39,0.75) !important; text-decoration: none !important; white-space: nowrap !important; }
.mu-guildname a:hover { color: #c9a227 !important; }
.mu-no-guild { color: rgba(200,200,200,0.2) !important; font-size: 13px !important; }
.mu-rank-date { text-align: right !important; font-size: 11px !important; color: rgba(200,200,200,0.25) !important; padding: 8px 4px !important; letter-spacing: 1px !important; }
.mu-rank-date i { color: rgba(155,17,30,0.4) !important; }

/* Ocultar paginación DataTables */
#RankingResets_wrapper .dataTables_paginate,
#RankingResets_wrapper .dataTables_length,
#RankingResets_wrapper .dataTables_info,
#RankingGeneral_wrapper .dataTables_paginate,
#RankingGeneral_wrapper .dataTables_length,
#RankingGeneral_wrapper .dataTables_info { display: none !important; }

/* Buscador DataTables */
#RankingResets_wrapper .dataTables_filter input,
#RankingGeneral_wrapper .dataTables_filter input {
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(155,17,30,0.3) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 6px 12px !important;
}
#RankingResets_wrapper .dataTables_filter label,
#RankingGeneral_wrapper .dataTables_filter label {
	color: rgba(200,200,200,0.5) !important;
	font-size: 12px !important;
}


/* =====================================================
   GUILD PROFILE — REDISEÑO COMPLETO
   ===================================================== */

.guild-profile-wrap {
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---- HERO CARD ---- */
.guild-hero-card {
	position: relative;
	background: linear-gradient(135deg, rgba(60,5,10,0.95) 0%, rgba(8,2,3,0.98) 60%);
	border: 1px solid rgba(155,17,30,0.35);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0,0,0,0.7);
	backdrop-filter: blur(12px);
}
.guild-hero-overlay {
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 20% 50%, rgba(155,17,30,0.15) 0%, transparent 65%);
	pointer-events: none;
}
.guild-hero-content {
	position: relative; z-index: 1;
	display: flex; align-items: center; gap: 28px; padding: 28px 32px;
}
.guild-logo-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.guild-logo-wrap img, .guild-logo-wrap table {
	border-radius: 8px !important;
	box-shadow: 0 0 0 3px rgba(155,17,30,0.3), 0 0 20px rgba(155,17,30,0.4) !important;
}
.guild-hero-info { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.guild-name {
	font-family: 'Cinzel', serif; font-size: 36px; font-weight: 700; color: #fff;
	letter-spacing: 5px; text-transform: uppercase; margin: 0;
	text-shadow: 0 2px 16px rgba(0,0,0,0.9); line-height: 1;
}
.guild-master-block {
	display: flex; flex-direction: column; gap: 4px;
	border-left: 3px solid #c9a227; padding-left: 12px;
}
.guild-master-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(200,200,200,0.4); }
.guild-master-val { font-size: 16px; font-weight: 700; color: #c9a227; display: flex; align-items: center; }
.guild-master-val a { color: #c9a227 !important; text-decoration: none !important; }
.guild-master-val a:hover { color: #fff !important; }
.guild-score-circle {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 90px; height: 90px; border-radius: 50%;
	background: rgba(0,0,0,0.5); border: 2px solid rgba(201,162,39,0.4);
	box-shadow: 0 0 16px rgba(201,162,39,0.2); flex-shrink: 0;
}
.guild-score-num { font-size: 24px; font-weight: 900; color: #c9a227; line-height: 1; font-family: 'Roboto', sans-serif; }
.guild-score-lbl { font-size: 8px; color: rgba(200,200,200,0.4); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; text-align: center; }

/* ---- STATS GRID ---- */
.guild-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- PANEL ---- */
.guild-panel { background: rgba(8,2,3,0.85); border: 1px solid rgba(155,17,30,0.2); border-radius: 12px; overflow: hidden; backdrop-filter: blur(10px); }
.guild-panel-title {
	display: flex; align-items: center; gap: 8px; padding: 12px 18px;
	font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
	color: rgba(200,200,200,0.65); border-bottom: 1px solid rgba(155,17,30,0.15);
}
.guild-panel-title i { color: #9B111E; }
.guild-roster-count { margin-left: auto; font-size: 10px; color: rgba(200,200,200,0.35); font-weight: 600; letter-spacing: 1px; }

/* ---- VITALITY ---- */
.guild-vitality-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(155,17,30,0.07); }
.guild-vit-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 10px; background: rgba(8,2,3,0.75); text-align: center; transition: background 0.2s; }
.guild-vit-cell:hover { background: rgba(155,17,30,0.1); }
.guild-vit-icon { font-size: 20px; color: rgba(155,17,30,0.8); margin-bottom: 8px; }
.guild-vit-val  { font-size: 28px; font-weight: 900; color: #fff; line-height: 1; font-family: 'Roboto', sans-serif; }
.guild-vit-lbl  { font-size: 9px; color: rgba(200,200,200,0.4); letter-spacing: 2px; text-transform: uppercase; margin-top: 5px; }

/* ---- INFO ROWS ---- */
.guild-info-rows { padding: 4px 0; }
.guild-info-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid rgba(155,17,30,0.08); transition: background 0.2s; }
.guild-info-row:hover { background: rgba(155,17,30,0.05); }
.guild-info-row-last { border-bottom: none; }
.guild-info-label { font-size: 10px; color: rgba(200,200,200,0.45); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.guild-info-label i { color: rgba(155,17,30,0.6); }
.guild-info-val { font-size: 14px; font-weight: 700; color: #fff; }
.guild-info-val a { color: #c9a227 !important; text-decoration: none !important; }
.guild-info-val a:hover { color: #fff !important; }
.guild-score-gold { color: #c9a227 !important; }

/* ---- ROSTER ---- */
.guild-roster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(155,17,30,0.06); }
.guild-member-card { background: rgba(8,2,3,0.8); padding: 14px 16px; transition: background 0.2s; display: flex; flex-direction: column; gap: 8px; }
.guild-member-card:hover { background: rgba(155,17,30,0.08); }
.guild-rank-master      { border-left: 3px solid #c9a227; }
.guild-rank-submaster   { border-left: 3px solid #e67e22; }
.guild-rank-battlemaster{ border-left: 3px solid #e74c3c; }
.guild-rank-assistant   { border-left: 3px solid rgba(155,17,30,0.5); }
.guild-rank-member      { border-left: 3px solid rgba(255,255,255,0.06); }
.guild-member-header { display: flex; align-items: center; gap: 8px; }
.guild-member-dot-wrap { flex-shrink: 0; }
.guild-member-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.guild-dot-on  { background: #2ecc71; box-shadow: 0 0 6px rgba(46,204,113,0.8); }
.guild-dot-off { background: rgba(180,180,180,0.25); }
.guild-member-name { flex: 1; min-width: 0; }
.guild-member-name a { font-size: 14px !important; font-weight: 800 !important; color: #fff !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.guild-member-name a:hover { color: #c9a227 !important; }
.guild-member-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; flex-shrink: 0; }
.guild-badge-master      { background: #c9a227; color: #000; box-shadow: 0 0 8px rgba(201,162,39,0.5); }
.guild-badge-submaster   { background: #e67e22; color: #fff; }
.guild-badge-battlemaster{ background: #9B111E; color: #fff; }
.guild-badge-assistant   { background: rgba(155,17,30,0.3); border: 1px solid rgba(155,17,30,0.5); color: rgba(220,220,220,0.8); }
.guild-badge-member      { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(200,200,200,0.5); }
.guild-member-stats { display: flex; gap: 16px; }
.guild-member-stat  { display: flex; flex-direction: column; gap: 2px; }
.guild-member-stat-lbl { font-size: 8px; color: rgba(200,200,200,0.35); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.guild-member-stat-val { font-size: 13px; font-weight: 800; color: rgba(220,220,220,0.8); font-family: 'Roboto', sans-serif; }
.guild-gold { color: #c9a227 !important; }
.guild-member-class { font-size: 11px !important; color: rgba(155,17,30,0.85) !important; font-weight: 600 !important; }

/* Fondo oscuro main-wrapper */
.main-wrapper-outer { width: 100%; background: rgba(5,0,1,0.92); border-top: 1px solid rgba(155,17,30,0.2); border-bottom: 1px solid rgba(155,17,30,0.2); }
.main-wrapper { max-width: 1040px; margin: 0 auto; padding: 20px 0 30px; }
.main-wrapper .container-fluid { padding: 0 15px; }

/* Responsive */
@media (max-width: 700px) {
	.guild-hero-content { flex-direction: column; text-align: center; }
	.guild-master-block { border-left: none; border-top: 1px solid rgba(201,162,39,0.3); padding-left: 0; padding-top: 8px; align-items: center; }
	.guild-stats-grid   { grid-template-columns: 1fr; }
	.guild-roster-grid  { grid-template-columns: 1fr; }
}


/* =====================================================
   CENTRADO GLOBAL DE MÓDULOS
   ===================================================== */

/* El col-lg-8 centra su contenido */
.col-lg-8 > .vora-profile-wrap,
.col-lg-8 > .guild-profile-wrap,
.col-lg-8 > .mu-rank-wrap,
.col-lg-8 > .ucp-wrap {
	max-width: 100%;
}

/* Perfil del jugador — centrado */
.vora-profile-wrap {
	max-width: 860px;
	margin: 0 auto;
}

/* Guild profile — centrado */
.guild-profile-wrap {
	max-width: 860px;
	margin: 0 auto;
}

/* Ranking — centrado */
.mu-rank-wrap {
	max-width: 100%;
	margin: 0 auto;
}

/* Page title centrado */
.page-title {
	text-align: center !important;
	margin-bottom: 20px !important;
}


/* =====================================================
   DIFUMINADO GLOBAL — Fondos semitransparentes
   ===================================================== */

/* Ranking */
.mu-rank-table,
.mu-rank-wrap { background: transparent !important; }
.mu-rank-row  { background: rgba(5,0,1,0.55) !important; }
.mu-rank-row:hover { background: rgba(155,17,30,0.18) !important; }
.mu-rank-row-gold   { background: rgba(201,162,39,0.08) !important; }
.mu-rank-row-silver { background: rgba(189,195,199,0.06) !important; }
.mu-rank-row-bronze { background: rgba(205,127,50,0.06) !important; }
.mu-rank-thead-row th { background: rgba(5,0,1,0.65) !important; }
.mu-race-filter { background: rgba(5,0,1,0.5) !important; backdrop-filter: blur(4px) !important; }
.mu-race-btn    { background: rgba(5,0,1,0.5) !important; }

/* Perfil del jugador */
.vora-hero-card,
.vora-profile-card { background: rgba(8,2,3,0.65) !important; backdrop-filter: blur(10px) !important; }
.vora-panel        { background: rgba(8,2,3,0.55) !important; backdrop-filter: blur(8px) !important; }
.vora-stat-cell    { background: rgba(5,0,1,0.45) !important; }
.vora-stat-cell:hover { background: rgba(155,17,30,0.18) !important; }
.vora-footer-bar   { background: transparent !important; }
.vora-footer-stat  { background: rgba(5,0,1,0.5) !important; }
.vora-footer-stat:hover { background: rgba(155,17,30,0.12) !important; }
.vora-equipment-card { background: rgba(5,0,1,0.55) !important; backdrop-filter: blur(8px) !important; }

/* Perfil de guild */
.guild-hero-card   { background: rgba(8,2,3,0.65) !important; backdrop-filter: blur(10px) !important; }
.guild-panel       { background: rgba(8,2,3,0.55) !important; backdrop-filter: blur(8px) !important; }
.guild-vit-cell    { background: rgba(5,0,1,0.45) !important; }
.guild-vit-cell:hover { background: rgba(155,17,30,0.18) !important; }
.guild-member-card { background: rgba(5,0,1,0.45) !important; }
.guild-member-card:hover { background: rgba(155,17,30,0.12) !important; }
.guild-info-row:hover { background: rgba(155,17,30,0.08) !important; }

/* My Account */
.ucp-account-card  { background: rgba(8,2,3,0.6) !important; backdrop-filter: blur(10px) !important; }
.ucp-account-row:hover { background: rgba(155,17,30,0.08) !important; }
.ucp-credit-card   { background: rgba(8,2,3,0.55) !important; backdrop-filter: blur(8px) !important; }
.ucp-char-card     { background: rgba(8,2,3,0.55) !important; backdrop-filter: blur(8px) !important; }
.ucp-char-header   { background: rgba(0,0,0,0.25) !important; }
.ucp-char-stat     { background: rgba(5,0,1,0.4) !important; }
.ucp-nav           { background: rgba(5,0,1,0.5) !important; backdrop-filter: blur(6px) !important; }


/* =====================================================
   DESCARGAS — REDISEÑO COMPLETO
   ===================================================== */

.dl-wrap {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 860px;
	margin: 0 auto;
}

/* Título de sección */
.dl-section-title {
	font-family: 'Cinzel', serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #9B111E;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(155,17,30,0.25);
	margin-bottom: 14px;
}
.dl-section-title i { color: #c9a227; font-size: 16px; }

/* Grid de cards */
.dl-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Card de descarga */
.dl-card {
	background: rgba(8,2,3,0.65);
	border: 1px solid rgba(155,17,30,0.2);
	border-radius: 10px;
	overflow: hidden;
	backdrop-filter: blur(8px);
	transition: border-color 0.2s, transform 0.2s;
}
.dl-card:hover {
	border-color: rgba(155,17,30,0.5);
	transform: translateX(3px);
}

/* Header de la card */
.dl-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	gap: 12px;
}
.dl-card-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}
.dl-card-title {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
}
.dl-card-desc {
	font-size: 12px;
	color: rgba(200,200,200,0.5);
	line-height: 1.4;
}
.dl-card-size {
	font-size: 11px;
	font-weight: 700;
	color: rgba(201,162,39,0.7);
	letter-spacing: 1px;
	white-space: nowrap;
	flex-shrink: 0;
}
.dl-card-size i { margin-right: 4px; }

/* Footer de la card */
.dl-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 18px;
	background: rgba(0,0,0,0.25);
	border-top: 1px solid rgba(155,17,30,0.1);
}

/* Badge de host */
.dl-host {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.dl-host-mediafire { background: rgba(255,100,0,0.12); border: 1px solid rgba(255,100,0,0.35); color: #ff6400; }
.dl-host-mega      { background: rgba(155,17,30,0.12); border: 1px solid rgba(155,17,30,0.4);  color: #e03040; }
.dl-host-gdrive    { background: rgba(201,162,39,0.1); border: 1px solid rgba(201,162,39,0.35); color: #c9a227; }
.dl-host-direct    { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: rgba(200,200,200,0.6); }

/* Botón descargar */
.dl-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 20px;
	background: linear-gradient(135deg, rgba(155,17,30,0.5), rgba(80,5,12,0.7));
	border: 1px solid rgba(155,17,30,0.6);
	border-radius: 6px;
	color: #fff !important;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: all 0.2s;
}
.dl-btn:hover {
	background: linear-gradient(135deg, rgba(155,17,30,0.75), rgba(100,8,18,0.9));
	border-color: #9B111E;
	box-shadow: 0 4px 14px rgba(155,17,30,0.4);
	transform: translateY(-1px);
	color: #fff !important;
}


/* =====================================================
   DESCARGAS v2 — DISEÑO PROFESIONAL
   ===================================================== */

.dl-wrap {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 900px;
	margin: 0 auto;
}

/* ---- Sección ---- */
.dl-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.dl-section-title {
	font-family: 'Cinzel', serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #9B111E;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(155,17,30,0.3);
	flex: 1;
}
.dl-section-title i { color: #c9a227; font-size: 16px; }
.dl-section-count {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: rgba(200,200,200,0.35);
	text-transform: uppercase;
	padding-left: 16px;
	flex-shrink: 0;
}

/* ---- Grid ---- */
.dl-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---- Card ---- */
.dl-card {
	background: rgba(8,2,3,0.65);
	border: 1px solid rgba(155,17,30,0.2);
	border-radius: 12px;
	overflow: hidden;
	backdrop-filter: blur(10px);
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	position: relative;
}
.dl-card:hover {
	border-color: rgba(155,17,30,0.55);
	transform: translateX(4px);
	box-shadow: 0 4px 24px rgba(155,17,30,0.15);
}

/* Franja de color superior por categoría */
.dl-card-stripe {
	height: 3px;
	width: 100%;
}
.dl-cat-client .dl-card-stripe, .dl-card-stripe.dl-cat-client { background: linear-gradient(90deg, #9B111E, #c9a227); }
.dl-card-stripe.dl-cat-patch   { background: linear-gradient(90deg, #e67e22, #f39c12); }
.dl-card-stripe.dl-cat-tools   { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.dl-card-stripe.dl-cat-visual  { background: linear-gradient(90deg, #9b59b6, #8e44ad); }

/* Body de la card */
.dl-card-body {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
}

/* Ícono de categoría */
.dl-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	flex-shrink: 0;
	font-size: 22px;
}
.dl-card-icon.dl-cat-client  { background: rgba(155,17,30,0.15); color: #9B111E; border: 1px solid rgba(155,17,30,0.3); }
.dl-card-icon.dl-cat-patch   { background: rgba(230,126,34,0.12); color: #e67e22; border: 1px solid rgba(230,126,34,0.3); }
.dl-card-icon.dl-cat-tools   { background: rgba(46,204,113,0.1);  color: #2ecc71; border: 1px solid rgba(46,204,113,0.25); }
.dl-card-icon.dl-cat-visual  { background: rgba(155,89,182,0.12); color: #9b59b6; border: 1px solid rgba(155,89,182,0.3); }

/* Info principal */
.dl-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-card-top  { display: flex; flex-direction: column; gap: 5px; }
.dl-card-title-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl-card-title {
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.5px;
}
.dl-card-desc {
	font-size: 12px;
	color: rgba(200,200,200,0.5);
	line-height: 1.5;
	margin: 0;
}

/* Badge de categoría */
.dl-cat-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	flex-shrink: 0;
}
.dl-cat-badge.dl-cat-client  { background: rgba(155,17,30,0.15); border: 1px solid rgba(155,17,30,0.4); color: #e03040; }
.dl-cat-badge.dl-cat-patch   { background: rgba(230,126,34,0.12); border: 1px solid rgba(230,126,34,0.4); color: #e67e22; }
.dl-cat-badge.dl-cat-tools   { background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.3); color: #2ecc71; }
.dl-cat-badge.dl-cat-visual  { background: rgba(155,89,182,0.12); border: 1px solid rgba(155,89,182,0.35); color: #9b59b6; }

/* Metadatos */
.dl-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.dl-meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
}
.dl-meta-item > i { color: rgba(155,17,30,0.6); font-size: 11px; }
.dl-meta-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(200,200,200,0.35);
}
.dl-meta-val {
	font-size: 12px;
	font-weight: 700;
	color: #c9a227;
}

/* Badge de host */
.dl-host-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.dl-host-mediafire { background: rgba(255,100,0,0.1); border: 1px solid rgba(255,100,0,0.35); color: #ff6400; }
.dl-host-mega      { background: rgba(155,17,30,0.12); border: 1px solid rgba(155,17,30,0.4); color: #e03040; }
.dl-host-gdrive    { background: rgba(201,162,39,0.1); border: 1px solid rgba(201,162,39,0.35); color: #c9a227; }
.dl-host-direct    { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: rgba(200,200,200,0.6); }

/* Botón descargar */
.dl-card-action { flex-shrink: 0; }
.dl-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: all 0.2s;
	min-width: 90px;
	border: 1px solid;
}
.dl-btn i { font-size: 20px; }
.dl-btn span { font-size: 9px; }

/* Colores del botón según host */
.dl-btn.dl-host-mediafire {
	background: rgba(255,100,0,0.12);
	border-color: rgba(255,100,0,0.4);
	color: #ff6400 !important;
}
.dl-btn.dl-host-mediafire:hover {
	background: rgba(255,100,0,0.28);
	border-color: #ff6400;
	color: #fff !important;
	box-shadow: 0 4px 16px rgba(255,100,0,0.3);
	transform: translateY(-2px);
}
.dl-btn.dl-host-mega {
	background: rgba(155,17,30,0.15);
	border-color: rgba(155,17,30,0.5);
	color: #e03040 !important;
}
.dl-btn.dl-host-mega:hover {
	background: rgba(155,17,30,0.35);
	border-color: #9B111E;
	color: #fff !important;
	box-shadow: 0 4px 16px rgba(155,17,30,0.35);
	transform: translateY(-2px);
}
.dl-btn.dl-host-gdrive {
	background: rgba(201,162,39,0.1);
	border-color: rgba(201,162,39,0.4);
	color: #c9a227 !important;
}
.dl-btn.dl-host-gdrive:hover {
	background: rgba(201,162,39,0.28);
	border-color: #c9a227;
	color: #fff !important;
	box-shadow: 0 4px 16px rgba(201,162,39,0.3);
	transform: translateY(-2px);
}
.dl-btn.dl-host-direct {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.2);
	color: rgba(200,200,200,0.7) !important;
}
.dl-btn.dl-host-direct:hover {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.5);
	color: #fff !important;
	transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 600px) {
	.dl-card-body { flex-wrap: wrap; }
	.dl-card-action { width: 100%; }
	.dl-btn { width: 100%; flex-direction: row; padding: 10px 16px; }
}


/* =====================================================
   FIX FINAL — Centrado + Fondo transparente global
   ===================================================== */

/* El wrapper externo — fondo semitransparente con blur */
.main-wrapper-outer {
	width: 100% !important;
	background: rgba(5,0,1,0.55) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border-top: 1px solid rgba(155,17,30,0.15) !important;
	border-bottom: 1px solid rgba(155,17,30,0.15) !important;
}

/* Centrar el contenido dentro del col-lg-8 */
.main-wrapper {
	max-width: 1040px !important;
	margin: 0 auto !important;
	padding: 24px 0 32px !important;
	background: transparent !important;
}

/* MY ACCOUNT — centrado y fondo transparente */
.ucp-wrap {
	max-width: 760px !important;
	margin: 0 auto !important;
	width: 100% !important;
}
.ucp-account-card,
.ucp-credit-card,
.ucp-char-card,
.ucp-nav {
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ucp-account-card  { background: rgba(5,0,1,0.5) !important; backdrop-filter: blur(12px) !important; border-color: rgba(155,17,30,0.2) !important; }
.ucp-credit-card   { background: rgba(5,0,1,0.5) !important; backdrop-filter: blur(10px) !important; }
.ucp-char-card     { background: rgba(5,0,1,0.5) !important; backdrop-filter: blur(10px) !important; }
.ucp-char-header   { background: rgba(0,0,0,0.2) !important; }
.ucp-char-stat     { background: rgba(5,0,1,0.35) !important; }
.ucp-nav           { background: rgba(5,0,1,0.45) !important; backdrop-filter: blur(8px) !important; }
.ucp-chars-grid    { max-width: 760px !important; margin: 0 auto !important; }
.ucp-credits-grid  { max-width: 760px !important; margin: 0 auto !important; }
.ucp-section-title { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }

/* RANKING — sin rectángulo negro */
.mu-rank-wrap { background: transparent !important; max-width: 100% !important; }
.mu-rank-table { background: transparent !important; }
.mu-rank-thead-row th { background: rgba(5,0,1,0.6) !important; }
.mu-rank-row { background: rgba(5,0,1,0.45) !important; }
.mu-rank-row:hover { background: rgba(155,17,30,0.15) !important; }
.mu-rank-row-gold   { background: rgba(201,162,39,0.07) !important; }
.mu-rank-row-silver { background: rgba(189,195,199,0.05) !important; }
.mu-rank-row-bronze { background: rgba(205,127,50,0.05) !important; }
.mu-race-filter { background: rgba(5,0,1,0.45) !important; backdrop-filter: blur(6px) !important; }
.mu-race-btn    { background: rgba(5,0,1,0.4) !important; }
.mu-race-btn.active { background: linear-gradient(135deg, rgba(155,17,30,0.5), rgba(80,5,12,0.7)) !important; }

/* DESCARGAS — centrado y fondo transparente */
.dl-wrap { max-width: 860px !important; margin: 0 auto !important; }
.dl-card { background: rgba(5,0,1,0.5) !important; backdrop-filter: blur(10px) !important; }
.dl-card-footer { background: rgba(0,0,0,0.2) !important; }
.dl-card-icon { background: rgba(5,0,1,0.4) !important; }

/* PERFILES — centrado y fondo transparente */
.vora-profile-wrap  { max-width: 860px !important; margin: 0 auto !important; }
.guild-profile-wrap { max-width: 860px !important; margin: 0 auto !important; }
.vora-hero-card, .vora-profile-card { background: rgba(8,2,3,0.6) !important; backdrop-filter: blur(12px) !important; }
.vora-panel         { background: rgba(5,0,1,0.5) !important; backdrop-filter: blur(8px) !important; }
.vora-stat-cell     { background: rgba(5,0,1,0.4) !important; }
.vora-footer-stat   { background: rgba(5,0,1,0.45) !important; }
.guild-hero-card    { background: rgba(8,2,3,0.6) !important; backdrop-filter: blur(12px) !important; }
.guild-panel        { background: rgba(5,0,1,0.5) !important; backdrop-filter: blur(8px) !important; }
.guild-vit-cell     { background: rgba(5,0,1,0.4) !important; }
.guild-member-card  { background: rgba(5,0,1,0.4) !important; }


/* =====================================================
   MY ACCOUNT — CENTRADO FORZADO
   ===================================================== */

/* Centrar el col-lg-8 cuando tiene el usercp */
.col-lg-8:has(.ucp-wrap) {
	display: flex;
	justify-content: center;
}

/* Fallback para navegadores sin :has() */
.ucp-wrap {
	max-width: 720px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Todos los elementos internos centrados */
.ucp-nav,
.ucp-account-card,
.ucp-credits-grid,
.ucp-chars-grid,
.ucp-section-title {
	max-width: 720px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}


/* =====================================================
   CENTRADO ABSOLUTO — Todos los módulos
   ===================================================== */

/* Forzar centrado del col-lg-8 */
.main-wrapper .col-lg-8 {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Todos los wrappers principales centrados */
.ucp-wrap,
.dl-wrap,
.vora-profile-wrap,
.guild-profile-wrap,
.mu-rank-wrap {
	width: 100% !important;
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
}

/* Page title centrado */
.page-title {
	width: 100% !important;
	max-width: 860px !important;
	text-align: center !important;
	margin: 0 auto 20px !important;
}

/* MY ACCOUNT — fondo oscuro semitransparente */
.ucp-wrap {
	background: rgba(5,0,1,0.55) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border-radius: 14px !important;
	border: 1px solid rgba(155,17,30,0.15) !important;
	padding: 24px 20px !important;
}

/* DESCARGAS — fondo oscuro semitransparente */
.dl-wrap {
	background: rgba(5,0,1,0.55) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border-radius: 14px !important;
	border: 1px solid rgba(155,17,30,0.15) !important;
	padding: 24px 20px !important;
}


/* =====================================================
   MIS PERSONAJES — Cards de tamaño fijo
   ===================================================== */

/* Grid siempre 2 columnas iguales */
.ucp-chars-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 14px !important;
	align-items: start !important;
}

/* Card con altura fija */
.ucp-char-card {
	height: 200px !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

/* Header fijo */
.ucp-char-header {
	flex-shrink: 0 !important;
	height: 80px !important;
	overflow: hidden !important;
}

/* Nombre truncado para no deformar */
.ucp-char-name {
	max-width: 120px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-size: 13px !important;
}

/* Stats fijos */
.ucp-char-stats {
	flex-shrink: 0 !important;
	height: 52px !important;
}

/* Stat val — truncar números largos */
.ucp-char-stat-val {
	font-size: 13px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 70px !important;
	text-align: center !important;
}

/* Footer fijo */
.ucp-char-footer {
	flex-shrink: 0 !important;
	margin-top: auto !important;
}

/* Nivel — tamaño fijo */
.ucp-char-lvl-num {
	font-size: 20px !important;
	white-space: nowrap !important;
}

/* Avatar fijo */
.ucp-char-avatar-circle img {
	width: 55px !important;
	height: 55px !important;
	flex-shrink: 0 !important;
}

@media (max-width: 600px) {
	.ucp-chars-grid { grid-template-columns: 1fr !important; }
	.ucp-char-card  { height: auto !important; }
}


/* =====================================================
   TOP 5 HOME — Guild Master debajo del nombre
   ===================================================== */

.rank-guild-master {
	font-size: 10px !important;
	color: rgba(201,162,39,0.7) !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	display: block !important;
}


/* =====================================================
   OCULTAR BOTÓN ADMINCP DEL CORE (duplicado)
   El botón nuevo está en la topbar izquierda
   ===================================================== */
/* Oculta el botón rojo "AdminCP" que genera el core del CMS en la navbar derecha */
.navbar-right a[href*="admincp"],
.nav.navbar-right a[href*="admincp"],
a.btn.btn-danger[href*="admincp"],
.btn-danger[href*="admincp"],
a[href*="admincp"].btn {
	display: none !important;
}


/* =====================================================
   LAYOUT — CENTRADO Y FONDO OSCURO
   ===================================================== */

/* Fondo oscuro uniforme para la sección de contenido */
.main-wrapper-outer {
	background: rgba(5,0,1,0.88) !important;
	backdrop-filter: blur(8px) !important;
	min-height: 60vh !important;
	padding: 40px 0 60px !important;
}

/* Centrar el contenido principal */
.main-wrapper {
	max-width: 1200px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

/* Centrar col-lg-8 cuando no hay sidebar */
.main-wrapper .container-fluid {
	max-width: 1200px !important;
	margin: 0 auto !important;
}

/* Cuando la página no tiene sidebar (rankings), centrar el contenido */
.main-wrapper .col-lg-12 {
	max-width: 960px !important;
	margin: 0 auto !important;
	float: none !important;
}

/* Centrar col-lg-8 con sidebar */
.main-wrapper .row {
	justify-content: center !important;
}

/* =====================================================
   RESPONSIVE — MOBILE / TABLET
   ===================================================== */

/* Quitar min-width fijo del body */
body {
	min-width: 0 !important;
}

/* TOP BAR responsive */
.global-top-bar-content {
	width: 100% !important;
	padding: 0 16px !important;
}

/* NAVBAR responsive */
@media (max-width: 768px) {
	.sethmu-navbar-inner {
		padding: 0 12px !important;
		height: auto !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	.snav-links {
		order: 3 !important;
		width: 100% !important;
		justify-content: center !important;
		flex-wrap: wrap !important;
		gap: 0 !important;
	}
	.snav-item {
		padding: 10px 12px !important;
		font-size: 11px !important;
		letter-spacing: 1px !important;
	}
	.snav-actions {
		order: 2 !important;
	}
	.snav-logo { order: 1 !important; }
}

/* HERO responsive */
@media (max-width: 768px) {
	.hero-section { min-height: 400px !important; }
	.hero-inner { padding: 20px 16px !important; }
	.hero-logo-img { max-width: 180px !important; }
	.hero-stats-row { gap: 12px !important; flex-wrap: wrap !important; justify-content: center !important; }
	.hero-stat-num-big { font-size: 36px !important; }
	.hero-stat-num { font-size: 22px !important; }
	.hero-cta { flex-direction: column !important; gap: 10px !important; align-items: center !important; }
	.hero-btn-main, .hero-btn-outline { width: 220px !important; justify-content: center !important; }
	.hero-rates { flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; }
	.hero-rate-div { display: none !important; }
}

/* CONTENIDO PRINCIPAL responsive */
@media (max-width: 992px) {
	.main-wrapper .col-lg-8,
	.main-wrapper .col-lg-4 {
		width: 100% !important;
		max-width: 100% !important;
	}
	.main-wrapper .col-lg-4 {
		display: none !important; /* ocultar sidebar en móvil */
	}
	.main-wrapper .col-lg-8 {
		padding: 0 16px !important;
	}
}

@media (max-width: 768px) {
	.main-wrapper-outer {
		padding: 24px 0 40px !important;
	}
	.main-wrapper .container-fluid {
		padding: 0 12px !important;
	}
}

/* RANKINGS responsive */
@media (max-width: 768px) {
	.rankings-grid {
		grid-template-columns: 1fr !important;
	}
	.mu-rank-table,
	.rankings-table {
		font-size: 12px !important;
	}
	.mu-rank-td, .mu-rank-th {
		padding: 8px 10px !important;
	}
}

/* SECCIONES HOME responsive */
@media (max-width: 768px) {
	.section-container {
		padding: 24px 16px !important;
	}
	.section-title { font-size: 22px !important; }
	.unique-grid {
		grid-template-columns: 1fr !important;
	}
	.rank-panel { margin-bottom: 16px !important; }
}

/* USERCP responsive */
@media (max-width: 576px) {
	.ucp-chars-grid {
		grid-template-columns: 1fr !important;
	}
	.ucp-credits-grid {
		grid-template-columns: 1fr !important;
	}
	.ucp-account-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 6px !important;
	}
	.ucp-account-val {
		justify-content: flex-start !important;
	}
}

/* PANEL USERCP (cards) responsive */
@media (max-width: 576px) {
	.sethmu-panel-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}
@media (max-width: 400px) {
	.sethmu-panel-grid {
		grid-template-columns: 1fr !important;
	}
}

/* PERFILES responsive */
@media (max-width: 768px) {
	.vora-profile-card {
		flex-direction: column !important;
	}
	.vora-profile-left {
		padding: 20px 20px 0 !important;
		justify-content: center !important;
	}
	.vora-profile-right {
		padding: 16px 20px 20px !important;
	}
	.vora-char-name {
		font-size: 24px !important;
		letter-spacing: 2px !important;
	}
	.vora-footer-row {
		flex-direction: column !important;
	}
	.vora-footer-item {
		border-right: none !important;
		border-bottom: 1px solid rgba(155,17,30,0.12) !important;
	}
}

/* DESCARGAS responsive */
@media (max-width: 768px) {
	.dl-card {
		flex-wrap: wrap !important;
	}
	.dl-card-action {
		width: 100% !important;
	}
	.dl-btn {
		width: 100% !important;
		justify-content: center !important;
	}
	.dl-card-title {
		white-space: normal !important;
	}
}

/* REGISTRO responsive */
@media (max-width: 768px) {
	.reg-wrap {
		padding: 10px 16px 40px !important;
	}
	.reg-card {
		padding: 24px 20px !important;
	}
	.reg-title {
		font-size: 22px !important;
		letter-spacing: 2px !important;
	}
}

/* FLOATING SOCIAL responsive */
@media (max-width: 576px) {
	.floating-social {
		bottom: 16px !important;
		left: 8px !important;
	}
	.float-btn {
		width: 40px !important;
		height: 40px !important;
	}
	.float-btn-label {
		display: none !important;
	}
}

/* FOOTER responsive */
@media (max-width: 576px) {
	.sethmu-footer {
		padding: 20px 16px !important;
	}
	.footer-links {
		flex-wrap: wrap !important;
		gap: 8px !important;
		justify-content: center !important;
	}
}

/* TOPBAR responsive */
@media (max-width: 768px) {
	.global-top-bar-content .row {
		flex-direction: column !important;
		gap: 4px !important;
	}
	.global-top-bar-content .col-lg-6 {
		text-align: center !important;
	}
	.topbar-btn {
		font-size: 10px !important;
		padding: 2px 8px !important;
	}
}


/* =====================================================
   RANKINGS — FILTRO POR CLASE — ESTILO SETH MU
   ===================================================== */

/* Contenedor del filtro */
.rankings-class-filter-wrap,
div[class*="rankings-class-filter"] > div,
.rankings-filter-container {
	background: rgba(12,4,5,0.88) !important;
	border: 1px solid rgba(155,17,30,0.3) !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	margin-bottom: 20px !important;
	backdrop-filter: blur(10px) !important;
}

/* Botones de filtro */
a.rankings-class-filter-selection {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 7px 16px !important;
	margin: 4px !important;
	background: rgba(155,17,30,0.12) !important;
	border: 1px solid rgba(155,17,30,0.35) !important;
	border-radius: 8px !important;
	color: rgba(220,220,220,0.85) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: all 0.2s !important;
	cursor: pointer !important;
}

a.rankings-class-filter-selection:hover {
	background: rgba(155,17,30,0.28) !important;
	border-color: #c9a227 !important;
	color: #f1c40f !important;
	box-shadow: 0 0 12px rgba(155,17,30,0.3) !important;
	transform: translateY(-1px) !important;
}

/* Botón activo (seleccionado) — sin grayscale */
a.rankings-class-filter-selection:not(.rankings-class-filter-grayscale) {
	background: linear-gradient(135deg, rgba(155,17,30,0.35), rgba(201,162,39,0.15)) !important;
	border-color: #c9a227 !important;
	color: #f1c40f !important;
	box-shadow: 0 0 14px rgba(155,17,30,0.4), 0 0 0 1px rgba(201,162,39,0.2) !important;
}

/* Botón inactivo (grayscale) */
a.rankings-class-filter-grayscale {
	background: rgba(255,255,255,0.04) !important;
	border-color: rgba(155,17,30,0.2) !important;
	color: rgba(180,180,180,0.45) !important;
	filter: grayscale(0.6) !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Imágenes dentro de los botones */
a.rankings-class-filter-selection img {
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 1px solid rgba(155,17,30,0.4) !important;
}

a.rankings-class-filter-grayscale img {
	filter: grayscale(0.7) !important;
	opacity: 0.6 !important;
}

/* Botón "Todas" */
a.rankings-class-filter-selection[onclick*="rankingsFilterRemove"] {
	background: rgba(201,162,39,0.1) !important;
	border-color: rgba(201,162,39,0.4) !important;
	color: #c9a227 !important;
}
a.rankings-class-filter-selection[onclick*="rankingsFilterRemove"]:hover,
a.rankings-class-filter-selection[onclick*="rankingsFilterRemove"]:not(.rankings-class-filter-grayscale) {
	background: rgba(201,162,39,0.22) !important;
	border-color: #c9a227 !important;
	color: #f1c40f !important;
	box-shadow: 0 0 14px rgba(201,162,39,0.3) !important;
}


/* =====================================================
   CENTRADO — col-lg-8 con sidebar centrado
   ===================================================== */
.main-wrapper .row {
	justify-content: center !important;
}
.main-wrapper .col-lg-8 {
	max-width: 860px !important;
	margin: 0 auto !important;
}
.main-wrapper .col-lg-4 {
	max-width: 340px !important;
}


/* =====================================================
   CENTRADO PRINCIPAL — igual que el hero/scroll
   ===================================================== */

/* El wrapper externo ocupa todo el ancho con fondo oscuro */
.main-wrapper-outer {
	width: 100% !important;
	background: rgba(5,0,1,0.88) !important;
	backdrop-filter: blur(8px) !important;
	padding: 40px 0 60px !important;
}

/* El wrapper interno centrado igual que la navbar (max 1200px) */
.main-wrapper {
	max-width: 1200px !important;
	margin: 0 auto !important;
	width: 100% !important;
	padding: 0 20px !important;
}

/* El container-fluid sin padding extra */
.main-wrapper .container-fluid {
	padding: 0 !important;
	max-width: 100% !important;
}

/* Row centrada */
.main-wrapper .row {
	margin: 0 !important;
	justify-content: center !important;
}

/* col-lg-8 centrado con ancho máximo */
.main-wrapper .col-lg-8 {
	padding: 0 !important;
	max-width: 860px !important;
	width: 100% !important;
}

/* col-lg-12 (rankings) centrado */
.main-wrapper .col-lg-12 {
	padding: 0 !important;
	max-width: 1160px !important;
	margin: 0 auto !important;
}

/* col-lg-4 sidebar */
.main-wrapper .col-lg-4 {
	padding: 0 0 0 24px !important;
	max-width: 300px !important;
}

@media(max-width: 992px) {
	.main-wrapper .col-lg-4 { display: none !important; }
	.main-wrapper .col-lg-8 { max-width: 100% !important; }
}
@media(max-width: 768px) {
	.main-wrapper { padding: 0 12px !important; }
	.main-wrapper-outer { padding: 24px 0 40px !important; }
}


/* =====================================================
   CENTRADO Y FONDO — igual que RANKING
   ===================================================== */
.main-wrapper-outer {
	width: 100% !important;
	background: rgba(5,0,1,0.88) !important;
	backdrop-filter: blur(8px) !important;
	padding: 40px 0 60px !important;
}
.main-wrapper {
	max-width: 1200px !important;
	margin: 0 auto !important;
	width: 100% !important;
}
.main-wrapper .container-fluid {
	max-width: 100% !important;
}
/* col-lg-8 centrado */
.main-wrapper .col-lg-8 {
	max-width: 860px !important;
}
/* col-lg-12 rankings */
.main-wrapper .col-lg-12 {
	max-width: 100% !important;
}
@media(max-width: 992px) {
	.main-wrapper .col-lg-4 { display: none !important; }
	.main-wrapper .col-lg-8 { max-width: 100% !important; width: 100% !important; }
}
@media(max-width: 768px) {
	.main-wrapper-outer { padding: 24px 16px 40px !important; }
}


/* =====================================================
   CENTRADO PRINCIPAL — igual que SCROLL/HERO
   ===================================================== */
.main-wrapper-outer {
	width: 100% !important;
	background: rgba(5,0,1,0.88) !important;
	backdrop-filter: blur(8px) !important;
	padding: 40px 0 60px !important;
}
.main-wrapper {
	max-width: 1200px !important;
	margin: 0 auto !important;
	width: 100% !important;
}
.main-wrapper .container-fluid {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
}
.main-wrapper .row {
	margin: 0 !important;
	justify-content: center !important;
}
/* col-lg-8 centrado — mismo ancho que el hero inner */
.main-wrapper .col-lg-8 {
	padding: 0 !important;
	flex: 0 0 auto !important;
	width: 66.666% !important;
	max-width: 860px !important;
}
/* col-lg-12 (rankings) */
.main-wrapper .col-lg-12 {
	padding: 0 !important;
	max-width: 100% !important;
}
/* Ocultar sidebar vacío */
.main-wrapper .col-lg-4 {
	display: none !important;
}
/* Cuando no hay sidebar, col-lg-8 ocupa más */
.main-wrapper .col-lg-8:only-child {
	width: 100% !important;
	max-width: 860px !important;
}
@media(max-width: 992px) {
	.main-wrapper .col-lg-8 {
		width: 100% !important;
		max-width: 100% !important;
	}
}
@media(max-width: 768px) {
	.main-wrapper-outer { padding: 24px 16px 40px !important; }
}


/* ===== CENTRADO PRINCIPAL ===== */
.main-wrapper-outer {
	width:100%;
	background:rgba(5,0,1,0.88);
	backdrop-filter:blur(8px);
	padding:40px 0 60px;
}
.main-wrapper { width:100%; }


/* =====================================================
   RESPONSIVE COMPLETO — PC / NOTEBOOK / TABLET / MÓVIL
   ===================================================== */

/* ---- BASE: quitar min-width fijo ---- */
body { min-width: 0 !important; overflow-x: hidden !important; }
* { box-sizing: border-box !important; }

/* =====================================================
   TABLET — max 992px
   ===================================================== */
@media (max-width: 992px) {

	/* Navbar */
	.sethmu-navbar-inner {
		flex-wrap: wrap !important;
		height: auto !important;
		padding: 10px 16px !important;
		gap: 8px !important;
	}
	.snav-links {
		order: 3 !important;
		width: 100% !important;
		justify-content: center !important;
		flex-wrap: wrap !important;
		gap: 0 !important;
		border-top: 1px solid rgba(155,17,30,0.2) !important;
		padding-top: 6px !important;
	}
	.snav-item { padding: 10px 14px !important; font-size: 11px !important; }
	.snav-actions { order: 2 !important; }
	.snav-logo { order: 1 !important; }

	/* Botones navbar */
	.snav-login-btn, .snav-panel-btn, .snav-logout-btn, .snav-register-btn {
		padding: 7px 14px !important;
		font-size: 11px !important;
	}

	/* Top bar */
	.global-top-bar-content {
		width: 100% !important;
		padding: 0 12px !important;
	}
	.global-top-bar .row { flex-direction: column !important; gap: 4px !important; }
	.global-top-bar .col-lg-6 { text-align: center !important; }

	/* Hero */
	.hero-rates { flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; }
	.hero-rate-div { display: none !important; }
	.hero-cta { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
	.hero-btn-main, .hero-btn-outline { width: 220px !important; justify-content: center !important; }

	/* Rankings grid */
	.rankings-grid { grid-template-columns: 1fr !important; }

	/* Contenido principal */
	.main-wrapper-outer { padding: 30px 0 50px !important; }
	.main-wrapper { padding: 0 16px !important; }
	.main-wrapper .col-lg-4 { display: none !important; }
	.main-wrapper .col-lg-8 { max-width: 100% !important; width: 100% !important; }

	/* Perfiles */
	.vora-profile-card { flex-direction: column !important; }
	.vora-profile-left { padding: 20px 20px 0 !important; justify-content: center !important; }
	.vora-profile-right { padding: 16px 20px 20px !important; }
	.vora-footer-row { flex-direction: column !important; }
	.vora-footer-item { border-right: none !important; border-bottom: 1px solid rgba(155,17,30,0.12) !important; }

	/* Mis personajes */
	.ucp-chars-grid { grid-template-columns: 1fr 1fr !important; }

	/* Unstick */
	.unstick-wrap { padding: 10px 0 30px !important; }
}

/* =====================================================
   MÓVIL GRANDE — max 768px
   ===================================================== */
@media (max-width: 768px) {

	/* Hero */
	.hero-section { min-height: 380px !important; }
	.hero-inner { padding: 20px 16px !important; }
	.hero-logo-img { max-width: 160px !important; }
	.hero-stats-row { gap: 10px !important; flex-wrap: wrap !important; justify-content: center !important; }
	.hero-stat-num-big { font-size: 32px !important; }
	.hero-stat-num { font-size: 20px !important; }
	.hero-stat-lbl, .hero-stat-lbl-big { font-size: 10px !important; }

	/* Secciones home */
	.section-container { padding: 20px 14px !important; }
	.section-title { font-size: 20px !important; }
	.unique-grid { grid-template-columns: 1fr 1fr !important; }

	/* Ranking */
	.rank-panel { margin-bottom: 14px !important; }
	.mu-rank-table, .rankings-table { font-size: 11px !important; }
	.mu-rank-td, .mu-rank-th { padding: 8px 8px !important; }

	/* Descargas */
	.dl-card { flex-wrap: wrap !important; gap: 10px !important; }
	.dl-card-action { width: 100% !important; }
	.dl-btn { width: 100% !important; justify-content: center !important; }
	.dl-card-title { white-space: normal !important; }

	/* Registro */
	.reg-wrap { padding: 10px 12px 30px !important; }
	.reg-card { padding: 22px 16px !important; }
	.reg-title { font-size: 20px !important; letter-spacing: 2px !important; }

	/* UserCP */
	.ucp-account-row { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
	.ucp-account-val { justify-content: flex-start !important; }
	.ucp-coins-grid { grid-template-columns: 1fr !important; }
	.ucp-credits-grid { grid-template-columns: 1fr !important; }

	/* Mis personajes */
	.ucp-chars-grid { grid-template-columns: 1fr !important; }
	.ucp-chars-header { font-size: 18px !important; letter-spacing: 3px !important; }

	/* Panel usercp */
	.sethmu-panel-grid { grid-template-columns: 1fr 1fr !important; }

	/* Perfiles */
	.vora-char-name { font-size: 22px !important; letter-spacing: 2px !important; }
	.vora-stats-row { gap: 6px !important; }
	.vora-stat-box { padding: 10px 12px !important; min-width: 60px !important; }

	/* Guild profile */
	.sethmu-guild-members-grid { grid-template-columns: 1fr 1fr !important; }
	.sethmu-profile-stats-grid { grid-template-columns: 1fr !important; }

	/* Footer */
	.sethmu-footer { padding: 20px 14px !important; }
	.footer-links { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }

	/* Floating social */
	.floating-social { left: 8px !important; bottom: 16px !important; }
	.float-btn { width: 40px !important; height: 40px !important; }
	.float-btn-label { display: none !important; }

	/* Unstick */
	.unstick-card { flex-direction: column !important; align-items: flex-start !important; }
	.unstick-form { width: 100% !important; }
	.unstick-btn { width: 100% !important; justify-content: center !important; }
}

/* =====================================================
   MÓVIL PEQUEÑO — max 576px
   ===================================================== */
@media (max-width: 576px) {

	/* Navbar compacta */
	.snav-links { display: none !important; } /* ocultar links en móvil pequeño */
	.sethmu-navbar-inner { flex-wrap: nowrap !important; justify-content: space-between !important; }
	.snav-actions { gap: 4px !important; }
	.snav-login-btn, .snav-panel-btn, .snav-logout-btn, .snav-register-btn {
		padding: 6px 10px !important;
		font-size: 10px !important;
		letter-spacing: 0.5px !important;
	}

	/* Top bar compacta */
	.topbar-btn { font-size: 9px !important; padding: 2px 6px !important; margin-left: 3px !important; }
	.topbar-btn-admincp { display: none !important; } /* ocultar admincp en móvil */

	/* Hero */
	.hero-section { min-height: 320px !important; }
	.hero-logo-img { max-width: 130px !important; }
	.hero-stat-side { display: none !important; } /* solo mostrar online en móvil */
	.hero-cta { gap: 8px !important; }
	.hero-btn-main, .hero-btn-outline { width: 180px !important; font-size: 12px !important; padding: 10px 16px !important; }
	.hero-rates { display: none !important; } /* ocultar rates en móvil muy pequeño */
	.scroll-indicator { display: none !important; }

	/* Secciones */
	.unique-grid { grid-template-columns: 1fr !important; }
	.section-title { font-size: 18px !important; letter-spacing: 2px !important; }

	/* Ranking */
	.rank-panel-header { font-size: 11px !important; padding: 10px 12px !important; }

	/* Mis personajes */
	.ucp-char-stats { grid-template-columns: repeat(2,1fr) !important; }
	.ucp-char-stat:nth-child(3), .ucp-char-stat:nth-child(4) {
		border-top: 1px solid rgba(155,17,30,0.1) !important;
	}

	/* Panel usercp */
	.sethmu-panel-grid { grid-template-columns: 1fr !important; }

	/* Guild members */
	.sethmu-guild-members-grid { grid-template-columns: 1fr !important; }

	/* Perfiles */
	.vora-stats-row { flex-wrap: wrap !important; }
	.vora-stat-box { flex: 1 1 80px !important; }

	/* Contenido */
	.main-wrapper { padding: 0 10px !important; }
	.main-wrapper-outer { padding: 20px 0 30px !important; }
}

/* =====================================================
   MÓVIL MUY PEQUEÑO — max 400px
   ===================================================== */
@media (max-width: 400px) {
	.snav-logo-img { height: 28px !important; }
	.hero-logo-img { max-width: 110px !important; }
	.reg-title { font-size: 16px !important; }
	.ucp-chars-header { font-size: 15px !important; }
	.vora-char-name { font-size: 18px !important; }
}


/* =====================================================
   MENÚ HAMBURGUESA
   ===================================================== */
.snav-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	background: rgba(155,17,30,0.15);
	border: 1px solid rgba(155,17,30,0.4);
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
	transition: all 0.2s;
}
.snav-hamburger span {
	display: block;
	width: 18px;
	height: 2px;
	background: #c9a227;
	border-radius: 2px;
	transition: all 0.3s;
}
.snav-hamburger:hover { background: rgba(155,17,30,0.3); border-color: #c9a227; }
.snav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.snav-hamburger.active span:nth-child(2) { opacity: 0; }
.snav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 576px) {
	.snav-hamburger { display: flex !important; }
	.snav-links {
		display: none !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		background: rgba(5,0,1,0.98) !important;
		border-bottom: 1px solid rgba(155,17,30,0.3) !important;
		flex-direction: column !important;
		padding: 8px 0 !important;
		z-index: 200 !important;
		backdrop-filter: blur(12px) !important;
	}
	.snav-links.snav-open {
		display: flex !important;
	}
	.snav-links .snav-item {
		padding: 12px 20px !important;
		border-bottom: 1px solid rgba(155,17,30,0.1) !important;
		width: 100% !important;
	}
	.sethmu-navbar { position: relative !important; }
}


/* ===== OCULTAR POPUP DE DESARROLLO ===== */
#devNoticeOverlay { display: none !important; }


/* ===== OCULTAR POPUP DE DESARROLLO ===== */
#devNoticeOverlay,
[id*="devNotice"],
[id*="dev-notice"],
[id*="development"],
div[style*="z-index:99999"],
div[style*="z-index: 99999"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}


/* =====================================================
   MUSeth11 — FIXES MYACCOUNT CHARS GRID
   ===================================================== */

/* Grid 2 columnas, altura automática */
.ucp-chars-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	align-items: start !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}
@media(max-width: 600px) { .ucp-chars-grid { grid-template-columns: 1fr !important; } }

/* Card — altura automática, no fija */
.ucp-char-card {
	height: auto !important;
	min-height: 220px !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Cabecera — altura automática */
.ucp-char-top {
	height: auto !important;
	min-height: 100px !important;
	overflow: visible !important;
}

/* Coins grid — 3 columnas */
.ucp-coins-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 12px !important;
}
@media(max-width: 768px) { .ucp-coins-grid { grid-template-columns: 1fr !important; } }

/* Main wrapper */
.main-wrapper-outer {
	width: 100% !important;
	background: rgba(5,0,1,0.88) !important;
	backdrop-filter: blur(8px) !important;
	padding: 40px 20px 60px !important;
	min-height: 60vh !important;
}
.main-wrapper {
	max-width: 1200px !important;
	margin: 0 auto !important;
	width: 100% !important;
}
.main-wrapper .container { max-width: 100% !important; padding: 0 !important; }
.main-wrapper .row { margin: 0 !important; justify-content: center !important; }
.main-wrapper .col-lg-8 { max-width: 860px !important; width: 100% !important; padding: 0 !important; flex: 0 0 auto !important; }
.main-wrapper .col-12 { padding: 0 !important; }

/* Filtro de clases */
.rankings-class-filter {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	padding: 16px 20px !important;
	margin-bottom: 20px !important;
	background: rgba(8,2,3,0.85) !important;
	border: 1px solid rgba(155,17,30,0.25) !important;
	border-radius: 12px !important;
	list-style: none !important;
	width: auto !important;
}
.rankings-class-filter li { display: block !important; padding: 0 !important; margin: 0 !important; filter: none !important; }
.rankings-class-filter-selection {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 14px !important;
	width: auto !important;
	background: rgba(155,17,30,0.1) !important;
	border: 1px solid rgba(155,17,30,0.3) !important;
	border-radius: 8px !important;
	color: rgba(200,200,200,0.75) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	transition: all 0.2s !important;
	filter: none !important;
}
.rankings-class-filter-selection:not(.rankings-class-filter-grayscale) {
	background: linear-gradient(135deg, rgba(155,17,30,0.3), rgba(201,162,39,0.12)) !important;
	border-color: rgba(201,162,39,0.7) !important;
	color: #f1c40f !important;
	filter: none !important;
}
.rankings-class-filter-grayscale { filter: none !important; opacity: 0.5 !important; }
.rankings-class-filter-selection img { width: 28px !important; height: 28px !important; border-radius: 50% !important; filter: none !important; }
.rankings-class-filter-grayscale img { filter: grayscale(70%) brightness(0.55) !important; }

/* ── AdminCP navbar button ── */
.snav-admincp-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 14px !important;
	border-radius: 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: #9B111E !important;
	background: rgba(155,17,30,0.1) !important;
	border: 1px solid rgba(155,17,30,0.5) !important;
	transition: all 0.2s !important;
}
.snav-admincp-btn:hover {
	background: rgba(155,17,30,0.25) !important;
	color: #fff !important;
	text-decoration: none !important;
	border-color: #9B111E !important;
}

/* Ocultar AdminCP en el menú hamburguesa expandido (mobile) */
@media (max-width: 768px) {
	.snav-admincp-btn {
		display: none !important;
	}
}