/* =========================================================
   LEGION MU - ESTILOS FRONTEND MODERNO (GAMING & MOBILE-FIRST)
   ========================================================= */

:root {
	--bg-dark: #080706;
	--bg-card: rgba(20, 16, 12, 0.92);
	--bg-card-hover: rgba(28, 22, 17, 0.96);
	--panel-border: #382d21;
	--panel-border-bright: #68533b;
	
	/* Dorados */
	--gold: #d6ac54;
	--gold-light: #fbe29d;
	--gold-dark: #7b5820;
	--gold-glow: rgba(214, 172, 84, 0.28);
	
	/* Acentos de Combate / PVP / Alertas */
	--ruby: #c0392b;
	--ruby-glow: rgba(192, 57, 43, 0.4);
	--emerald: #27ae60;
	--sapphire: #2980b9;
	--amethyst: #8e44ad;
	
	/* Tipografía */
	--text-main: #ede3ce;
	--text-muted: #9e917b;
	--font-title: 'Cinzel', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	
	/* Layout */
	--sidebar-w: 260px;
	--topbar-h: 60px;
	--bottombar-h: 64px;
	--radius: 8px;
	--radius-lg: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
	background-color: var(--bg-dark);
	background-image: 
		radial-gradient(ellipse at 50% 0%, rgba(120, 85, 30, 0.12) 0%, transparent 70%),
		linear-gradient(180deg, #090807 0%, #050403 100%);
	color: var(--text-main);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	min-height: 100vh;
	overflow-x: hidden;
}

a { color: var(--gold-light); text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-title); letter-spacing: 0.05em; color: var(--gold-light); }
.muted { color: var(--text-muted); }
.gold-gradient {
	background: linear-gradient(180deg, #fce9b8, #cca148);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ================== LAYOUT GENERAL ================== */
.app-layout {
	display: flex;
	min-height: 100vh;
	width: 100%;
}

/* ================== DRAWER / SIDEBAR LATERAL ================== */
.sidebar {
	width: var(--sidebar-w);
	background: rgba(12, 10, 8, 0.95);
	border-right: 1px solid var(--panel-border);
	backdrop-filter: blur(12px);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-header {
	padding: 18px 20px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(56, 45, 33, 0.6);
}

.sidebar-logo .logo-img {
	height: 48px;
	width: auto;
	max-width: 175px;
	object-fit: contain;
	filter: drop-shadow(0 4px 14px rgba(214, 172, 84, 0.35));
}

.sidebar-close-btn {
	display: none;
	background: none;
	border: 1px solid var(--panel-border);
	color: var(--gold);
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 16px;
	cursor: pointer;
}

/* Badge de Estado del Servidor en Sidebar */
.server-badge {
	margin: 14px 16px 8px;
	padding: 10px 14px;
	background: rgba(22, 18, 13, 0.85);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	gap: 12px;
}

.badge-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--emerald);
	box-shadow: 0 0 10px var(--emerald);
	flex-shrink: 0;
}
.badge-dot.offline { background: var(--ruby); box-shadow: 0 0 10px var(--ruby); }

.badge-info { display: flex; flex-direction: column; }
.badge-title { font-size: 11px; font-weight: 700; color: var(--emerald); letter-spacing: 0.08em; }
.badge-players { font-size: 12px; color: var(--text-muted); }
.badge-players b { color: var(--gold-light); }

/* Navegación de la Sidebar */
.sidebar-nav {
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	overflow-y: auto;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	color: var(--text-main);
	border-radius: var(--radius);
	border: 1px solid transparent;
	font-family: var(--font-title);
	font-size: 13px;
	font-weight: 600;
	transition: all 0.2s ease;
	position: relative;
}

.nav-item:hover {
	background: rgba(214, 172, 84, 0.08);
	border-color: rgba(214, 172, 84, 0.2);
	color: var(--gold-light);
	transform: translateX(3px);
}

.nav-item.active {
	background: linear-gradient(90deg, rgba(214, 172, 84, 0.18), rgba(214, 172, 84, 0.04));
	border-color: var(--gold-dark);
	color: var(--gold-light);
	box-shadow: inset 3px 0 0 var(--gold);
}

.nav-icon { font-size: 16px; line-height: 1; }
.nav-label { flex: 1; }

.nav-pill {
	font-size: 10px;
	font-weight: 700;
	background: var(--ruby);
	color: #fff;
	padding: 2px 6px;
	border-radius: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.nav-tag {
	font-size: 10px;
	font-weight: 700;
	background: linear-gradient(180deg, #f1c40f, #d4ac0d);
	color: #2c1e08;
	padding: 1px 6px;
	border-radius: 4px;
}

/* Call to action de descarga en Sidebar */
.sidebar-cta {
	padding: 12px 14px;
	border-top: 1px solid rgba(56, 45, 33, 0.5);
}

.btn-download {
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(180deg, #2a2217, #19140e);
	border: 1px solid var(--gold-dark);
	border-radius: var(--radius);
	padding: 10px 12px;
	color: var(--gold-light);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
	transition: all 0.2s ease;
}

.btn-download:hover {
	background: linear-gradient(180deg, #382c1e, #221a12);
	border-color: var(--gold);
	transform: translateY(-2px);
}

.d-icon { font-size: 20px; }
.d-text { display: flex; flex-direction: column; line-height: 1.2; }
.d-text strong { font-size: 12px; color: var(--gold-light); font-family: var(--font-title); }
.d-text small { font-size: 10px; color: var(--text-muted); }

.sidebar-socials {
	margin-top: 10px;
	display: flex;
	gap: 8px;
}

.btn-social {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	transition: opacity 0.2s;
}
.btn-social.discord { background: #5865f2; color: #fff; }
.btn-social:hover { opacity: 0.9; }

/* Pie de usuario en Sidebar */
.sidebar-footer {
	padding: 12px 14px;
	background: rgba(9, 7, 5, 0.95);
	border-top: 1px solid var(--panel-border);
}

.user-strip {
	display: flex;
	align-items: center;
	gap: 10px;
}

.user-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #1c1712;
	border: 1px solid var(--panel-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.user-details {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
}

.user-name {
	font-weight: 600;
	color: var(--gold-light);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-sub { font-size: 11px; color: var(--text-muted); }

.btn-auth-action {
	background: transparent;
	border: 1px solid var(--gold-dark);
	color: var(--gold-light);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 4px;
	cursor: pointer;
	font-family: var(--font-title);
}
.btn-auth-action:hover { background: var(--gold); color: #1c1408; }

/* Backdrop para mobile */
.sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: 99;
}

/* ================== WRAPPER PRINCIPAL Y TOPBAR ================== */
.main-wrapper {
	margin-left: var(--sidebar-w);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100vh;
}

.topbar {
	height: var(--topbar-h);
	background: rgba(14, 11, 8, 0.85);
	border-bottom: 1px solid var(--panel-border);
	backdrop-filter: blur(10px);
	display: none; /* Visible sólo en pantallas < 992px */
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	position: sticky;
	top: 0;
	z-index: 90;
}

.drawer-trigger {
	background: none;
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
}
.drawer-trigger .bar { width: 20px; height: 2px; background: var(--gold); border-radius: 2px; }

.topbar-brand .topbar-logo { height: 34px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.btn-topbar-download {
	font-size: 12px;
	font-weight: 600;
	color: var(--gold-light);
	background: rgba(214, 172, 84, 0.12);
	border: 1px solid var(--gold-dark);
	padding: 6px 10px;
	border-radius: 6px;
}

.topbar-auth-btn {
	background: linear-gradient(180deg, #f0c66a, #a8741f);
	border: none;
	color: #271a06;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
}

/* ================== VISTAS (NO SCROLL INFINITO) ================== */
.content-area {
	flex: 1;
	position: relative;
}

.view {
	display: none;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

.view.active {
	display: block;
	opacity: 1;
	animation: viewFadeIn 0.3s ease-out;
}

@keyframes viewFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.section-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 20px;
}

.view-headline {
	text-align: center;
	margin-bottom: 24px;
}
.view-headline h2 { font-size: 26px; color: var(--gold-light); margin-bottom: 6px; }

/* ================== HERO SECTION GAMER ================== */
.hero-gamer {
	position: relative;
	min-height: clamp(560px, 78vh, 740px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 20px 50px;
	background: url('./img/login.jpg') center top / cover no-repeat;
	border-bottom: 1px solid var(--panel-border);
	overflow: hidden;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: 
		radial-gradient(ellipse at 50% 28%, rgba(10, 8, 6, 0.22) 0%, rgba(8, 7, 6, 0.72) 65%, rgba(8, 7, 6, 0.96) 100%),
		linear-gradient(180deg, rgba(8, 7, 6, 0.25) 0%, transparent 20%, transparent 60%, #080706 100%);
	pointer-events: none;
}

.hero-body {
	position: relative;
	z-index: 2;
	max-width: 820px;
}

.hero-logo-box {
	margin-bottom: 8px;
}

.hero-main-logo {
	width: min(440px, 86vw);
	margin: 0 auto;
	filter: drop-shadow(0 12px 35px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 24px rgba(214, 172, 84, 0.3));
	animation: heroLogoFloat 5s ease-in-out infinite;
}

@keyframes heroLogoFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

.hero-edition-badge {
	display: inline-block;
	font-family: var(--font-title);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--gold-light);
	background: rgba(22, 18, 13, 0.75);
	border: 1px solid var(--gold-dark);
	padding: 5px 18px;
	border-radius: 20px;
	margin-bottom: 18px;
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.btn-hero-cta {
	padding: 14px 28px;
	font-size: 14px;
}

.hero-desc {
	font-size: clamp(14px, 2vw, 16px);
	color: var(--text-muted);
	margin-bottom: 28px;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

.hero-action-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

/* Botones Legion */
.btn-legion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 6px;
	font-family: var(--font-title);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

.btn-primary {
	background: linear-gradient(180deg, #f0c66a, #a8741f);
	color: #271a06;
	border-color: #d6ac54;
	box-shadow: 0 4px 18px rgba(214, 172, 84, 0.3);
}
.btn-primary:hover {
	filter: brightness(1.12);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(214, 172, 84, 0.45);
}

.btn-secondary {
	background: rgba(26, 20, 15, 0.85);
	color: var(--gold-light);
	border-color: var(--gold-dark);
}
.btn-secondary:hover {
	background: rgba(42, 33, 24, 0.9);
	border-color: var(--gold);
	transform: translateY(-2px);
}

.btn-danger {
	background: rgba(192, 57, 43, 0.2);
	color: #e74c3c;
	border-color: #c0392b;
}
.btn-danger:hover { background: #c0392b; color: #fff; }

.btn-sm { padding: 8px 14px; font-size: 11px; }
.btn-block { width: 100%; }

/* Grid de Especificaciones del Servidor */
.server-specs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	max-width: 720px;
	margin: 0 auto;
}

.spec-card {
	background: rgba(18, 14, 10, 0.8);
	border: 1px solid var(--panel-border);
	padding: 12px 14px;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	gap: 10px;
	backdrop-filter: blur(6px);
}

.spec-icon { font-size: 20px; }
.spec-info { display: flex; flex-direction: column; text-align: left; }
.spec-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.spec-val { font-size: 13px; color: var(--gold-light); font-weight: 700; }

/* ================== EVENT TRACKER EN VIVO ================== */
.section-header-compact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.sub-title { font-size: 18px; color: var(--gold-light); }
.sub-badge {
	font-size: 10px;
	font-weight: 700;
	background: var(--ruby);
	color: #fff;
	padding: 2px 8px;
	border-radius: 12px;
	text-transform: uppercase;
}

.events-tracker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 28px;
}

.event-card {
	background: var(--bg-card);
	border: 1px solid var(--panel-border);
	padding: 16px;
	border-radius: var(--radius);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.event-card.next-up {
	border-color: var(--gold);
	box-shadow: 0 0 16px rgba(214, 172, 84, 0.15);
}

.event-time {
	font-family: var(--font-title);
	font-size: 20px;
	font-weight: 700;
	color: var(--gold-light);
}

.event-meta strong { display: block; font-size: 14px; color: #fff; }
.event-meta small { font-size: 11px; color: var(--text-muted); }

.event-tag {
	align-self: flex-start;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-muted);
}
.event-tag.pulse { background: rgba(39, 174, 96, 0.2); color: #2ecc71; border: 1px solid #27ae60; }
.event-tag.epic { background: rgba(142, 68, 173, 0.3); color: #d7bde2; border: 1px solid #8e44ad; }

/* Grid de Noticias */
.news-modern-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

.news-card-modern {
	background: var(--bg-card);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all 0.2s ease;
}
.news-card-modern:hover {
	border-color: var(--gold-dark);
	transform: translateY(-3px);
}

.news-thumb {
	height: 140px;
	background: #000 center/cover no-repeat;
	position: relative;
}

.news-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.75);
	border: 1px solid var(--gold-dark);
	color: var(--gold-light);
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
}

.news-content { padding: 14px 16px 18px; }
.news-date { font-size: 11px; color: var(--gold); margin-bottom: 4px; }
.news-title { font-size: 16px; margin-bottom: 6px; color: #fff; }
.news-desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* ================== VISTA MI CUENTA & PERSONAJES ================== */
.account-dashboard-grid {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 20px;
}

.dashboard-panel {
	background: var(--bg-card);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	padding: 20px;
}

.acc-avatar-area {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	position: relative;
}

.acc-shield-badge {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(180deg, #2a2217, #130f0b);
	border: 2px solid var(--gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.acc-text h2 { font-size: 18px; color: var(--gold-light); }

.vip-crown-badge {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 10px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 4px;
	background: linear-gradient(180deg, #f1c40f, #d4ac0d);
	color: #2c1e08;
	box-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
}

.currency-pills-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 20px;
}

.currency-pill {
	background: rgba(12, 10, 7, 0.8);
	border: 1px solid var(--panel-border);
	padding: 10px 8px;
	border-radius: 6px;
	text-align: center;
}

.curr-icon { font-size: 16px; margin-bottom: 2px; }
.curr-data small { display: block; font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
.curr-data strong { font-size: 14px; color: var(--gold-light); }

.acc-quick-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.account-pass-form {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--panel-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.account-pass-form h4 { font-size: 13px; color: var(--gold-light); }

/* Personajes Grid */
.characters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.char-card {
	background: rgba(14, 11, 8, 0.85);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	padding: 14px;
	display: flex;
	gap: 12px;
	transition: all 0.2s ease;
	position: relative;
	cursor: pointer;
}
.char-card:hover {
	border-color: var(--gold);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.char-avatar-class {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: #241d16;
	border: 1px solid var(--gold-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}

.char-info { flex: 1; }
.char-info strong { display: block; font-size: 15px; color: #fff; font-family: var(--font-title); }
.char-class { font-size: 11px; color: var(--gold); }
.char-stats-summary {
	margin-top: 6px;
	font-size: 12px;
	color: var(--text-muted);
	display: flex;
	gap: 10px;
}
.char-stats-summary b { color: var(--gold-light); }

/* ================== VISTA BAÚL WEB (WAREHOUSE ORGANIZER) ================== */
.vault-container {
	background: var(--bg-card);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	padding: 24px;
}

.vault-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.vault-security-status {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: rgba(39, 174, 96, 0.12);
	border: 1px solid #27ae60;
	border-radius: 6px;
}
.status-indicator-dot { width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 8px #2ecc71; }
.vault-security-status.unsafe { background: rgba(192, 57, 43, 0.12); border-color: #c0392b; }
.vault-security-status.unsafe .status-indicator-dot { background: #e74c3c; box-shadow: 0 0 8px #e74c3c; }

.status-text strong { display: block; font-size: 12px; color: #fff; }
.status-text small { font-size: 10px; color: var(--text-muted); }

.alert-box-dark {
	display: flex;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(22, 17, 12, 0.9);
	border: 1px solid var(--gold-dark);
	border-radius: var(--radius);
	margin-bottom: 20px;
}
.alert-icon { font-size: 20px; }
.alert-content strong { display: block; font-size: 12px; color: var(--gold-light); margin-bottom: 2px; }
.alert-content span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.vault-tabs-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.vault-nav-tabs { display: flex; gap: 8px; }
.v-tab {
	background: transparent;
	border: 1px solid var(--panel-border);
	color: var(--text-muted);
	padding: 8px 16px;
	border-radius: 6px;
	font-family: var(--font-title);
	font-size: 12px;
	cursor: pointer;
}
.v-tab.active {
	background: linear-gradient(180deg, #f0c66a, #a8741f);
	color: #261906;
	border-color: #d6ac54;
	font-weight: 700;
}

.vault-workspace {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 20px;
	align-items: start;
}

.vault-grid-wrapper {
	background: #070605;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	padding: 16px;
}

.vault-grid-header {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(56, 45, 33, 0.4);
}
.zen-counter b { color: var(--gold-light); }

/* La cuadrícula de 8 x 15 slots */
.vault-grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(36px, 1fr));
	gap: 2px;
	background: #1a1510;
	padding: 4px;
	border: 2px solid var(--panel-border);
	border-radius: 4px;
	max-width: 480px;
	margin: 0 auto;
}

.vault-slot {
	aspect-ratio: 1 / 1;
	background: #0f0c09;
	border: 1px solid rgba(56, 45, 33, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	cursor: pointer;
	position: relative;
	transition: all 0.15s ease;
}

.vault-slot:hover {
	background: rgba(214, 172, 84, 0.15);
	border-color: var(--gold);
	z-index: 2;
}

.vault-slot.occupied {
	background: radial-gradient(circle at center, rgba(214, 172, 84, 0.15), rgba(15, 12, 9, 0.95));
	border-color: var(--gold-dark);
}

.vault-slot.occupied.exc {
	border-color: #27ae60;
	box-shadow: inset 0 0 8px rgba(39, 174, 96, 0.3);
}

.vault-slot.selected {
	outline: 2px solid var(--gold-light);
	outline-offset: -1px;
	background: rgba(214, 172, 84, 0.3);
}

/* Inspector de Ítem */
.item-inspector-card {
	background: rgba(14, 11, 8, 0.9);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	padding: 18px;
	min-height: 280px;
}

.inspector-empty {
	text-align: center;
	padding: 40px 10px;
	color: var(--text-muted);
}
.insp-icon { font-size: 32px; margin-bottom: 10px; opacity: 0.5; }

.item-title { font-size: 16px; margin-bottom: 4px; }
.item-exc { color: #2ecc71; text-shadow: 0 0 10px rgba(46, 204, 113, 0.4); }
.item-level-tag { font-size: 11px; color: var(--gold); margin-bottom: 12px; }

.item-stats-list {
	font-size: 12px;
	line-height: 1.6;
	color: var(--text-main);
	border-top: 1px solid var(--panel-border);
	padding-top: 10px;
	margin-bottom: 16px;
}
.item-stats-list .exc-opt { color: #2ecc71; }
.item-stats-list .req-stat { color: #e67e22; }

/* ================== TABLAS RANKINGS ================== */
.rank-tab-selector {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.rank-btn {
	background: transparent;
	border: 1px solid var(--panel-border);
	color: var(--text-muted);
	padding: 8px 18px;
	border-radius: 20px;
	font-family: var(--font-title);
	font-size: 13px;
	cursor: pointer;
}
.rank-btn.active, .rank-btn:hover {
	background: linear-gradient(180deg, #f0c66a, #a8741f);
	color: #271a06;
	border-color: #d6ac54;
	font-weight: 700;
}

.table-responsive-box {
	background: var(--bg-card);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	overflow-x: auto;
}

.legion-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	min-width: 500px;
}

.legion-table th {
	padding: 12px 16px;
	font-family: var(--font-title);
	font-size: 11px;
	text-transform: uppercase;
	color: var(--gold);
	border-bottom: 1px solid var(--panel-border);
	background: rgba(14, 11, 8, 0.6);
}

.legion-table td {
	padding: 11px 16px;
	border-bottom: 1px solid rgba(56, 45, 33, 0.4);
	font-size: 13px;
}
.legion-table tr:hover td { background: rgba(214, 172, 84, 0.05); }

.rank-pos {
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 11px;
	background: #1c1712;
	color: var(--text-muted);
}
.rank-pos.gold { background: #f1c40f; color: #2c1e08; }
.rank-pos.silver { background: #bdc3c7; color: #2c3e50; }
.rank-pos.bronze { background: #d35400; color: #fff; }

/* ================== INFORMACIÓN DEL SERVIDOR (IMAGEN 1 OFICIAL) ================== */
.sub-title-ornate {
	text-align: center;
	font-size: 24px;
	color: var(--gold-light);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 24px;
}
.sub-title-ornate::before, .sub-title-ornate::after {
	content: "";
	height: 1px;
	flex: 0 1 120px;
	background: linear-gradient(90deg, transparent, var(--gold-dark));
}
.sub-title-ornate::after { transform: scaleX(-1); }

.server-info-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.server-info-card {
	background: rgba(14, 11, 8, 0.92);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.info-card-header {
	font-size: 15px;
	font-family: var(--font-title);
	color: var(--gold-light);
	letter-spacing: 0.1em;
	margin-bottom: 20px;
	text-align: left;
}

.info-table-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--text-muted);
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(56, 45, 33, 0.3);
}

.info-row b {
	font-family: var(--font-title);
	color: var(--gold-light);
	font-size: 14px;
}

.info-row.highlight-vip {
	border-bottom: none;
	padding-top: 4px;
}
.info-row.highlight-vip span { color: var(--gold); font-weight: 600; }
.info-row.highlight-vip b { color: #f1c40f; }

.stage-info-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.stage-current-title {
	font-size: 15px;
	color: #fff;
	margin-bottom: 8px;
	font-family: var(--font-body);
	font-weight: 700;
}

.stage-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	color: var(--text-muted);
}

.stage-list li.active-stage {
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
}
.stage-badge {
	font-size: 11px;
	color: var(--gold);
	font-weight: 600;
}

/* Tag Aviso de Noticias */
.news-tag.tag-aviso {
	border-color: #d35400;
	color: #f39c12;
}

/* ================== TIENDA DE COINS (IMAGEN 3 OFICIAL) ================== */
.shop-grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.shop-card {
	background: rgba(14, 11, 8, 0.95);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	padding: 26px 18px 22px;
	text-align: center;
	position: relative;
	transition: all 0.25s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shop-card:hover {
	border-color: var(--gold-dark);
	transform: translateY(-3px);
}

.shop-card.featured {
	border-color: var(--gold-dark);
	box-shadow: 0 0 20px rgba(214, 172, 84, 0.15);
}

.shop-ribbon {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(26, 20, 14, 0.95);
	border: 1px solid var(--gold);
	color: var(--gold-light);
	font-size: 10px;
	font-weight: 700;
	padding: 3px 14px;
	border-radius: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.shop-coin-symbol {
	margin-bottom: 14px;
}

.mu-coin-badge {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ffd277 0%, #b88628 70%, #684810 100%);
	border: 2px solid #fada8c;
	box-shadow: 0 4px 15px rgba(214, 172, 84, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-title);
	font-size: 24px;
	font-weight: 900;
	color: #382405;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

.shop-title {
	font-size: 13px;
	color: var(--gold-light);
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

.shop-coins-amount {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 8px;
	font-family: var(--font-title);
}

.shop-price {
	font-size: 18px;
	font-weight: 700;
	color: var(--gold-light);
	margin-bottom: 16px;
}

.shop-account-input-box {
	width: 100%;
	margin-bottom: 14px;
}

.shop-account-input {
	width: 100%;
	padding: 9px 12px;
	background: #080605;
	border: 1px solid var(--panel-border);
	border-radius: 4px;
	color: #fff;
	font-size: 12px;
	text-align: center;
}
.shop-account-input:focus {
	outline: none;
	border-color: var(--gold);
}

.btn-shop-buy {
	width: 100%;
	padding: 10px 16px;
	background: linear-gradient(180deg, #6c5021, #422f12);
	border: 1px solid #8d692c;
	border-radius: 4px;
	color: var(--gold-light);
	font-family: var(--font-title);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: all 0.2s;
}
.btn-shop-buy:hover {
	background: linear-gradient(180deg, #8a662a, #573e18);
	border-color: var(--gold);
	filter: brightness(1.15);
}

.shop-footer-note {
	margin-top: 24px;
	font-size: 12px;
}

/* ================== GUÍA DE INICIO ================== */
.guide-steps-vertical {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 760px;
	margin: 0 auto;
}

.step-card {
	background: var(--bg-card);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	padding: 20px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.step-number {
	font-family: var(--font-title);
	font-size: 28px;
	font-weight: 900;
	color: var(--gold-dark);
	line-height: 1;
}

.step-content h3 { font-size: 16px; margin-bottom: 6px; color: #fff; }
.step-content p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
kbd { background: #261f18; border: 1px solid var(--panel-border); padding: 2px 6px; border-radius: 4px; font-size: 11px; }

/* ================== MODALES ================== */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.modal-overlay[hidden] { display: none !important; }

.modal-card {
	background: #110e0b;
	border: 1px solid var(--gold-dark);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	max-width: 420px;
	width: 100%;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
	animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
	from { transform: scale(0.95); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 18px;
	cursor: pointer;
}
.modal-close:hover { color: #fff; }

.modal-header { text-align: center; margin-bottom: 20px; }
.modal-logo { height: 42px; margin: 0 auto 10px; }

.legion-form { display: flex; flex-direction: column; gap: 14px; }
.form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--gold); margin-bottom: 5px; text-transform: uppercase; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

input[type="text"], input[type="password"], input[type="email"] {
	width: 100%;
	padding: 10px 14px;
	background: #090705;
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	color: #fff;
	font-size: 14px;
	font-family: inherit;
}
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }

.form-feedback { font-size: 12px; margin-top: 6px; }
.form-feedback.err { color: #e74c3c; }
.form-feedback.ok { color: #2ecc71; }

.modal-footer-text { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 16px; }

/* ================== TOAST NOTIFICATIONS ================== */
.toast-container {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.toast-item {
	background: rgba(20, 16, 12, 0.95);
	border: 1px solid var(--gold);
	color: #fff;
	padding: 12px 18px;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
	font-size: 13px;
	animation: toastSlide 0.25s ease-out;
}
@keyframes toastSlide {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

/* ================== BARRA MOBILE INFERIOR ================== */
.bottom-bar-mobile {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--bottombar-h);
	background: rgba(10, 8, 6, 0.96);
	border-top: 1px solid var(--panel-border);
	backdrop-filter: blur(12px);
	z-index: 85;
	justify-content: space-around;
	align-items: center;
	padding: 0 8px;
}

.b-nav-item {
	background: none;
	border: none;
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	font-size: 10px;
	font-family: var(--font-title);
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 6px;
}
.b-nav-item.active { color: var(--gold-light); }
.b-icon { font-size: 18px; }

/* ================== MERCADO WEB (LIVE MARKET) ================== */
.market-filters-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 24px;
	background: var(--bg-card);
	border: 1px solid var(--panel-border);
	padding: 14px 18px;
	border-radius: var(--radius-lg);
}

.market-categories {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.m-filter-btn {
	background: #110e0b;
	border: 1px solid var(--panel-border);
	color: var(--text-muted);
	padding: 7px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-family: var(--font-title);
	cursor: pointer;
	transition: all 0.2s;
}
.m-filter-btn.active, .m-filter-btn:hover {
	background: linear-gradient(180deg, #f0c66a, #a8741f);
	color: #2c1e08;
	border-color: #d6ac54;
	font-weight: 700;
}

.market-search-box {
	flex: 1;
	max-width: 320px;
}
.market-search-box input {
	width: 100%;
	padding: 8px 14px;
	background: #090705;
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	color: #fff;
	font-size: 13px;
}

.market-grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 18px;
}

.market-item-card {
	background: rgba(16, 12, 9, 0.94);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	padding: 18px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.25s ease;
}
.market-item-card:hover {
	border-color: var(--gold-dark);
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.market-item-card.is-exc {
	border-color: rgba(39, 174, 96, 0.4);
}
.market-item-card.is-exc:hover {
	border-color: #27ae60;
}

.m-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.m-item-icon {
	width: 44px;
	height: 44px;
	background: #201811;
	border: 1px solid var(--gold-dark);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}
.market-item-card.is-exc .m-item-icon { border-color: #2ecc71; box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }

.m-item-title-box h4 {
	font-size: 14px;
	margin-bottom: 2px;
	color: #fff;
}
.m-item-title-box h4.exc-title { color: #2ecc71; }
.m-seller-tag { font-size: 11px; color: var(--gold); }

.m-props-list {
	font-size: 11px;
	line-height: 1.5;
	color: var(--text-muted);
	padding: 8px 0;
	border-top: 1px solid rgba(56, 45, 33, 0.3);
	border-bottom: 1px solid rgba(56, 45, 33, 0.3);
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.m-props-list .exc-line { color: #2ecc71; font-weight: 500; }

.m-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.m-price-box small { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.m-price-box strong { font-size: 16px; color: var(--gold-light); font-family: var(--font-title); }
.m-price-box strong.zen-price { color: #f1c40f; }

.btn-market-buy {
	padding: 7px 14px;
	font-size: 11px;
}

/* ================== PESTAÑAS Y FICHAS DE GUÍA ================== */
.guide-nav-tabs {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.g-tab {
	background: #14100c;
	border: 1px solid var(--panel-border);
	color: var(--text-muted);
	padding: 9px 18px;
	border-radius: 20px;
	font-family: var(--font-title);
	font-size: 12px;
	cursor: pointer;
}
.g-tab.active, .g-tab:hover {
	background: linear-gradient(180deg, #f0c66a, #a8741f);
	color: #2c1e08;
	border-color: #d6ac54;
	font-weight: 700;
}

.guide-tab-pane {
	animation: viewFadeIn 0.25s ease-out;
}
.guide-tab-pane[hidden] { display: none !important; }

/* Sub-pestañas de Clases */
.class-picker-pills {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.c-pill {
	background: #110e0b;
	border: 1px solid var(--panel-border);
	color: var(--text-muted);
	padding: 7px 14px;
	border-radius: 6px;
	font-family: var(--font-title);
	font-size: 12px;
	cursor: pointer;
}
.c-pill.active, .c-pill:hover {
	background: rgba(214, 172, 84, 0.18);
	border-color: var(--gold);
	color: var(--gold-light);
}

.class-detail-card {
	background: var(--bg-card);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	padding: 24px;
	max-width: 860px;
	margin: 0 auto;
}

/* Acordeón de Chaos Machine y Comandos */
.rates-accordion-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
}

.rates-box {
	background: rgba(14, 11, 8, 0.94);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	padding: 22px;
}
.rates-box-title {
	font-size: 15px;
	color: var(--gold-light);
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(56, 45, 33, 0.4);
}

.rates-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
}
.rates-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 6px;
	border-bottom: 1px dotted rgba(56, 45, 33, 0.3);
	color: var(--text-muted);
}
.rates-list b { color: #f1c40f; font-family: var(--font-title); font-size: 14px; }
.rates-list code { background: #261f18; padding: 2px 8px; border-radius: 4px; color: var(--gold-light); }

/* ================== MEDIA QUERIES (MOBILE RESPONSIVE) ================== */
@media (max-width: 991px) {
	.sidebar {
		transform: translateX(-100%);
		box-shadow: 10px 0 30px rgba(0, 0, 0, 0.8);
	}
	.sidebar.open {
		transform: translateX(0);
	}
	.sidebar-close-btn { display: block; }
	.sidebar-backdrop.show { display: block; }

	.main-wrapper {
		margin-left: 0;
		padding-bottom: var(--bottombar-h);
	}

	.topbar { display: flex; }
	.bottom-bar-mobile { display: flex; }

	.account-dashboard-grid { grid-template-columns: 1fr; }
	.vault-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
	.section-container { padding: 18px 12px; }
	.hero-gamer { min-height: 380px; padding: 40px 14px; }
	.hero-action-buttons { flex-direction: column; }
	.hero-action-buttons .btn-legion { width: 100%; }
	.server-specs-grid { grid-template-columns: 1fr 1fr; }
	.events-tracker-grid { grid-template-columns: 1fr; }
	.vault-grid { max-width: 100%; }
}


/* =================== MARKET COMPACT LIST =================== */
.market-item-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.market-list-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: rgba(20, 16, 12, 0.85);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.market-list-item:hover {
	background: rgba(40, 32, 22, 0.95);
	border-color: var(--gold);
}
.market-list-item.is-exc {
	border-left: 3px solid #27ae60;
}
.market-list-item .ml-icon {
	font-size: 20px;
	flex-shrink: 0;
	width: 30px;
	text-align: center;
}
.market-list-item .ml-name {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: #eee;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.market-list-item .ml-name.exc-title {
	color: #27ae60;
}
.market-list-item .ml-seller {
	font-size: 11px;
	color: var(--text-muted);
	white-space: nowrap;
	min-width: 70px;
}
.market-list-item .ml-price {
	font-size: 12px;
	font-weight: 700;
	color: var(--gold-light);
	white-space: nowrap;
	min-width: 90px;
	text-align: right;
}
.market-list-item .btn-market-buy {
	flex-shrink: 0;
	padding: 4px 12px;
	font-size: 11px;
}
.market-tooltip {
	display: none;
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 20px;
	margin-top: 4px;
	background: #1a150f;
	border: 1px solid var(--gold);
	border-radius: 8px;
	padding: 12px 16px;
	min-width: 280px;
	max-width: 380px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.6);
	font-size: 12px;
	color: #ccc;
	line-height: 1.6;
}
.market-tooltip strong {
	color: var(--gold-light);
	font-size: 13px;
}
.market-tooltip .exc-title {
	color: #27ae60;
}
.market-tooltip .exc-line {
	color: #27ae60;
}
.market-tooltip .mt-seller {
	color: var(--text-muted);
	font-size: 11px;
	margin: 4px 0 8px;
}
.market-tooltip .mt-props {
	border-top: 1px solid var(--panel-border);
	padding-top: 6px;
	margin-bottom: 6px;
}
.market-tooltip .mt-price {
	color: var(--gold-light);
	font-weight: 700;
	font-size: 14px;
	text-align: right;
	border-top: 1px solid var(--panel-border);
	padding-top: 6px;
}
@media (max-width: 768px) {
	.market-list-item {
		padding: 8px 10px;
		gap: 8px;
	}
	.market-list-item .ml-name {
		font-size: 12px;
	}
	.market-list-item .ml-seller {
		display: none;
	}
	.market-tooltip {
		left: 0;
		right: 0;
		min-width: unset;
		max-width: unset;
	}
}


/* ===== Baúl web (16/10): grilla del juego, ítems de su tamaño real ===== */
.vault-grid {
	--celda: min(44px, calc((100vw - 64px) / 8));
	display: grid;
	grid-template-columns: repeat(8, var(--celda));
	grid-template-rows: repeat(15, var(--celda));
	gap: 0;
	width: max-content;
	max-width: none;
	padding: 3px;
	background: #0b0907;
	border: 2px solid var(--panel-border);
	border-radius: 4px;
	margin: 0 auto;
}
.vault-grid .vault-loading { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; padding: 20px; }
.vault-cell {
	border: 1px solid rgba(56, 45, 33, 0.35);
	background: #100d0a;
}
.vault-item {
	position: relative;
	z-index: 1;
	margin: 1px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 2px;
	overflow: hidden;
	cursor: pointer;
	color: var(--text, #e8dcc8);
	font: inherit;
	background: radial-gradient(circle at center, rgba(214, 172, 84, 0.18), rgba(20, 16, 12, 0.96));
	border: 1px solid var(--gold-dark, #c9952c);
	border-radius: 3px;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.vault-item:hover, .vault-item.selected { background: rgba(214, 172, 84, 0.28); border-color: var(--gold-light, #f3d179); z-index: 2; }
.vault-item.exc { border-color: #27ae60; box-shadow: inset 0 0 8px rgba(39, 174, 96, 0.35); }
.vault-item.anc { border-color: #3498db; box-shadow: inset 0 0 8px rgba(52, 152, 219, 0.35); }
.vault-item .vi-icon { font-size: 18px; line-height: 1; }
.vault-item.mini .vi-icon { font-size: 15px; }
.vault-item .vi-name {
	font-size: 9px;
	line-height: 1.15;
	text-align: center;
	color: var(--text-muted, #a89880);
	word-break: break-word;
	max-height: 3.5em;
	overflow: hidden;
}
.vault-item.exc .vi-name { color: #5fd38d; }
.vault-item .vi-qty {
	position: absolute;
	top: 1px;
	right: 3px;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 0 3px #000, 0 0 3px #000;
}

/* ===== imagenes reales de los items (16/10, exportadas del cliente) ===== */
.vault-item { padding: 0; }
.vault-item .vi-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)); pointer-events: none; }
.vault-item .vi-lvl {
	position: absolute; bottom: 1px; left: 3px; font-size: 10px; font-weight: 700; color: #f3d179;
	text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.insp-img { display: flex; justify-content: center; margin-bottom: 10px; min-height: 60px; }
.insp-img .insp-img-el { max-width: 140px; max-height: 200px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(214, 172, 84, 0.25)); }
.insp-img .vi-icon { font-size: 40px; }
.ml-icon .ml-img { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; }


/* ===== vender desde el baul (16/10) ===== */
.insp-vender { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(56, 45, 33, 0.5); }
.insp-vender .btn-block { width: 100%; }
.venta-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.venta-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted, #a89880); }
.venta-form select, .venta-form input {
	background: #0b0907; color: var(--text, #e8dcc8); border: 1px solid var(--panel-border, #382d21);
	border-radius: 4px; padding: 7px 8px; font: inherit;
}
.venta-form .small { font-size: 11px; line-height: 1.4; margin: 2px 0; }


/* ===== clips de los jugadores (19/10) ===== */
.clips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.clip-card { display: block; background: #110d0a; border: 1px solid var(--panel-border, #382d21); border-radius: 8px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.clip-card:hover { transform: translateY(-2px); border-color: #c9a24f; }
.clip-card video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; pointer-events: none; }
.clip-info { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.clip-info b { color: #f3d27a; font-size: 14px; }
.clip-info .small { font-size: 12px; }

/* Mis clips en la cuenta (30/10) */
#my-clips-panel { grid-column: 1 / -1; }
.my-clips-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.my-clip { background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 79, .25); border-radius: 10px; overflow: hidden; }
.my-clip video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
.my-clip-info { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.my-clip-info strong { color: #f3d27a; font-size: 14px; }
.my-clip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }