/*!
 =========================================================
 * WebEngine CMS – MU Online Modern Dark Theme
 * https://webenginecms.org/
 =========================================================
 
 * Author Lautaro Angelico (https://lautaroangelico.com/)
 * Copyright (c) 2013-2025 Lautaro Angelico
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 =========================================================
*/

html{
	min-width:1200px;
	height:100%;
}
body {
	background: #0a0f16 url('../img/background-2600.jpg') no-repeat top center;
	background-size: cover;
	background-attachment: fixed;
	color: #e0e0e0;
	font-family: 'Inter', 'PT Sans', sans-serif;
	font-size: 14px;
	margin: 0;
	height: 100%;
	line-height: 1.6;
}



/* ENLACES */
a{
	color:#4fc3f7;
	text-decoration:none;
	transition:all .3s ease-in-out;
}
a:hover{
	color:#81d4fa;
}

/* IMÁGENES */
img{border:0}

/* CAMPOS INPUT */
input[type=text],
input[type=password],
input[type=number]{
	background:#1a2332;
	border:1px solid #2d3748;
	color:#e0e0e0;
	padding:12px;
	border-radius:8px;
	transition:all .3s ease;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus{
	border:1px solid #4fc3f7;
	box-shadow:0 0 10px rgba(79, 195, 247, 0.3);
	outline:none;
}

/* HEADER */
#header{
	width:100%;
	margin:0 auto;
	padding:60px 0 40px 0;
	text-align:center;
	color:#4fc3f7;
}

/* CONTENEDOR PRINCIPAL */
#container{
	background:rgba(26, 35, 50, 0.95);
	width:1200px;
	margin:0 auto;
	padding:40px 0;
	border-radius:16px 16px 0 0;
	backdrop-filter:blur(10px);
	border:1px solid rgba(79, 195, 247, 0.1);
}
#content{
	width:100%;
	overflow:auto;
	min-height:500px;
	padding:20px 40px 0 40px;
}

/* FOOTER */
.footer{
	background:rgba(10, 15, 22, 0.95);
	font-family:'Inter','Segoe UI','Tahoma',sans-serif;
	width:1200px;
	font-size:14px;
	color:#b0b0b0;
	padding:60px 40px;
	margin:0 auto 100px auto;
	border-radius:0 0 16px 16px;
	border:1px solid rgba(79, 195, 247, 0.1);
	backdrop-filter:blur(10px);
}
.footer>.footer-container{width:100%;margin:0 auto;}
.footer>.footer-container a:hover{text-decoration:underline!important;}
.footer hr{border-top:1px solid rgba(79, 195, 247, 0.2);}
.footer .footer-social-link{opacity:.7;transition:.3s;}
.footer .footer-social-link:hover{opacity:1;transform:scale(1.1);}

/* NAVBAR */
#navbar{
	width:100%;
	backdrop-filter:blur(15px);
	border-bottom:1px solid rgba(79, 195, 247, 0.2);
	background:rgba(26, 35, 50, 0.8);
	padding:8px 0;
}
#navbar ul{text-align:center;margin:0;padding-left:0;}
#navbar ul li{list-style:none;display:inline-block;font-size:16px;}
#navbar ul li a{
	display:inline-block;
	color:#e0e0e0!important;
	padding:16px 32px;
	transition:.3s;
	text-transform:uppercase;
	font-weight:500;
	letter-spacing:0.5px;
	border-radius:8px;
	margin:0 4px;
}
#navbar ul li a:focus,
#navbar ul li a:hover{
	color:#4fc3f7!important;
	background:rgba(79, 195, 247, 0.1);
	transform:translateY(-2px);
}

/* BOTÓN ADMIN */
.admincp-button{
	position:absolute;top:10px;right:10px;
	background:#fbbf24!important;
	border:2px solid #000!important;
	color:#000!important;
	font-weight:bold!important;
	border-radius:8px!important;
	padding:8px 16px!important;
	transition:all .3s ease!important;
}

/* TITULOS */
.page-title{
	color:#4fc3f7;
	font-family:'Inter','PT Sans',sans-serif;
	font-size:32px;
	margin-bottom:20px;
	font-weight:700;
	letter-spacing:0.5px;
}

/* NEWS MODULE */
.panel-news{
	margin-bottom:30px;
	color:#e0e0e0;
	border:1px solid rgba(79, 195, 247, 0.2);
	background:rgba(26, 35, 50, 0.9);
	transition:.3s;
	border-radius:16px;
	backdrop-filter:blur(10px);
}
.panel-news:hover{box-shadow:0 10px 30px rgba(0, 0, 0, 0.4);transform:translateY(-4px);}
.panel-news .panel-heading{padding:20px;border-radius:16px 16px 0 0;}
.panel-news .panel-title{
	color:#4fc3f7;
	font-size:24px;
	font-weight:700;
}
.panel-news .panel-body{padding:20px;}
.panel-news .panel-footer{
	border-top:0;background:rgba(26, 35, 50, 0.5);
	font-style:italic;font-size:12px;height:45px;
	color:#b0b0b0;padding:12px 20px;
	border-radius:0 0 16px 16px;
}

/* RANKINGS */
.rankings-table{width:100%;border-collapse:collapse;}
.rankings-class-image{
	width:30px;height:auto;border-radius:50%;
	box-shadow:0 0 5px #0000003b;
}
.rankings-table tr td{
	border-bottom:1px solid #12485b;
	padding:10px;font-size:18px;text-align:center;
	color:#a7d4de;
}
.rankings-table-place{
	font-weight:bold;font-size:24px;color:#ff6a00;
}
.rankings-table tr:first-child td{
	color:#00d2ff;border-bottom:3px solid #00b4d8;
}
.rankings-update-time{text-align:right;font-size:11px;color:#7eb1bc;padding:10px 0;}
.rankings_menu{width:100%;text-align:center;margin-bottom:10px;}
.rankings_menu span{
	display:inline-block;width:100%;padding:10px 0;
	color:#00d2ff;font-size:24px;
}
.rankings_menu a{
	display:inline-block;width:150px;border:1px solid #12485b;
	text-align:center;padding:2px 0;margin:2px;
	background:#0f2730;border-radius:2px;color:#00e0ff;
}
.rankings_menu a.active{color:#00d2ff;border-color:#00b4d8;}
.rankings_guild_logo tr td{border:0!important;padding:0!important;margin:0!important;}
.rankings-gens-img{width:auto!important;height:30px!important;border:0!important;box-shadow:none!important;border-radius:0!important;}

/* MI CUENTA */
.myaccount-table{width:100%;background:#0d1f27;border:1px solid #12485b;}
.myaccount-table tr td:first-child{color:#00d2ff;font-weight:bold;}
.myaccount-table tr td{border-bottom:1px solid #12485b;padding:15px;color:#a7d4de;}
.myaccount-table tr:last-child td{border:0;}

/* TABLAS GENERALES */
.general-table-ui{
	width:100%;table-layout:fixed;background:#0d1f27;
	border:1px solid #12485b;padding:10px;margin:10px 0;
	color:#a7d4de;
}
.general-table-ui tr td{text-align:center;padding:5px;}
.general-table-ui tr:first-child td{color:#00e0ff;}
.general-table-ui tr:nth-child(2n+2) td{background:#112934;}
.general-table-ui img{width:50px;height:auto;border-radius:50%;box-shadow:0 0 5px #00000078;}

/* TOS */
.tos_list li{
	color:#ff3b00;font-weight:bold;font-size:18px;margin-bottom:40px;
}
.tos_list li p{
	color:#c0e0e8;text-align:justify;text-transform:none;
	padding-right:35px;font-size:14px;font-weight:normal;
}

/* PAYPAL */
.paypal-gateway-container{width:100%;}
.paypal-gateway-content{
	background:#112934;border:3px solid #ff6a00;
	padding:15px;border-radius:5px;font-weight:bold;color:#ffa34d;
}
.paypal-gateway-logo{
	width:100%;height:100px;background:#12485b url('../img/paypal-logo-200-68.png') no-repeat center;
	background-size:contain;margin-bottom:15px;border-radius:5px;
}
.paypal-gateway-conversion-rate{
	text-align:center;color:#00d2ff;font-size:18px;padding:10px 0;
}
.paypal-gateway-form{width:100%;margin:20px auto;text-align:center;}
.paypal-gateway-form div{display:inline-block;padding:0 10px;color:#00d2ff;font-size:24px;}
.paypal-gateway-form input[type=text]{
	width:60px;font-size:24px;border:3px solid #ff6a00;border-radius:5px;
	color:#ff6a00;background:#0f252d;
}
.paypal-gateway-continue{text-align:center;}
.paypal-gateway-continue input[type=submit]{
	background:url('../img/paypal-submit.jpg') no-repeat;width:200px;height:40px;border:0;
}
.module-requirements{font-size:12px;margin-top:20px;color:#ffa34d;}

/* SIDEBAR */
.panel-sidebar{
	background:rgba(26, 35, 50, 0.9);
	border:1px solid rgba(79, 195, 247, 0.2);
	border-radius:16px;
	box-shadow:0 8px 25px rgba(0, 0, 0, 0.2);
	backdrop-filter:blur(10px);
	margin-bottom:24px;
}
.panel-sidebar>.panel-heading{
	background:linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(26, 35, 50, 0.8));
	color:#4fc3f7;
	font-family:'Inter','PT Sans',sans-serif;
	border:0;
	border-radius:16px 16px 0 0;
	border-bottom:1px solid rgba(79, 195, 247, 0.2);
	padding:16px 20px;
}
.panel-usercp ul{list-style:none;padding:0;margin:0;}
.panel-usercp ul li{display:table;width:100%;line-height:40px;}
.panel-usercp ul li a{color:#e0e0e0!important;font-weight:500;transition:all .3s ease;}
.panel-usercp ul li a:hover{color:#4fc3f7!important;transform:translateX(4px);}
.panel-usercp ul li img{width:25px;height:25px;margin-right:8px;position:relative;top:-2px;border-radius:4px;}
.sidebar-banner{margin:24px 0;border:0;}
.sidebar-banner img{box-shadow:0 10px 25px rgba(0, 0, 0, 0.3);border-radius:12px;border:0;transition:all .3s ease;}
.sidebar-banner img:hover{transform:scale(1.02);}

/* GENERAL PANELS */
.panel-general{
	margin-bottom:30px;
	background:rgba(26, 35, 50, 0.9);
	border:1px solid rgba(79, 195, 247, 0.2);
	border-radius:16px;
	backdrop-filter:blur(10px);
}
.panel-body .panel-title{
	color:#4fc3f7;
	font-family:'Inter','PT Sans',sans-serif;
	font-size:16px;
	border-bottom:1px solid rgba(79, 195, 247, 0.2);
	margin-bottom:20px!important;
	font-weight:600;
	padding:0 0 12px 0;
}

/* ADD STATS */
.panel-addstats{
	margin-bottom:30px;background:#0d1f27;border:1px solid #12485b;border-radius:0;
}
.panel-addstats .character-avatar img{width:100px;height:auto;border-radius:50%;box-shadow:0 0 20px #00000036;}
.panel-addstats .character-name{
	color:#00d2ff;font-size:18px;font-family:'PT Sans',sans-serif;
	border-bottom:1px solid #00b4d822;padding:20px 0;margin-bottom:20px!important;font-weight:bold;
}

/* DOWNLOADS */
.panel-downloads{
	margin-bottom:30px;background:#0d1f27;border:1px solid #12485b;border-radius:0;
}
.download-description{font-size:11px;color:#ffa34d;position:relative;top:-7px;}

/* ONLINE STATUS */
.online-status-indicator{margin-left:5px;}

/* WEBENGINE FOOTER */
.webengine-powered{color:#ff6a00!important;}
.webengine-powered:hover{color:#ffa34d!important;}

/* GLOBAL TOP BAR */
.global-top-bar{
	width:100%;background:#0d1f27;color:#a7d4de;padding:7px 0 2px 0;
	text-transform:uppercase;font-size:12px;
}
.global-top-bar .global-top-bar-content{width:1040px;margin:0 auto;}
.global-top-bar .row{margin:0;padding:0;}
.global-top-bar a.logout{color:#ff3b00!important;}
.global-top-bar a{color:#00e0ff!important;}
.global-top-bar a:hover{color:#ffffff!important;}
.global-top-bar-nopadding{padding:0!important;}
.global-top-bar-separator{padding:0 5px;}

/* LANGUAGE PICKER */
.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	width: 400px !important; /* ancho siempre expandido */
	height: 19px;
	overflow: visible !important; /* se muestra completo */
	transition: none !important; /* sin animación */
}

.webengine-language-switcher:hover{width:400px;}
.webengine-language-switcher li{
	display:inline-block;background:#0f2730;padding:0 5px 2px;border-radius:3px;transition:.3s;
}
.webengine-language-switcher li:hover{filter:brightness(120%);}
.webengine-language-switcher li a{color:#ffa34d;}
.webengine-language-switcher li a:hover{color:#ffffff!important;}
.webengine-language-switcher:hover {
	width: 400px;
}
/* LOGO */
.webengine-mu-logo{transition:.3s;}
.webengine-mu-logo:hover{filter:brightness(120%);}

/* HEADER INFO */
.header-info-container{width:1040px;margin:0 auto;text-align:right;}
.header-info-container .header-info{
	display:inline-block;width:350px;background:rgba(0,15,22,.3);
	backdrop-filter:blur(5px);padding:20px;border-radius:5px;
	box-shadow:0 0 15px rgba(0,0,0,.7);text-shadow:1px 1px 3px #000;
	color:#00d2ff;border:1px solid rgba(255,255,255,.1);font-size:12px;
}
.header-info-container .header-info-block{padding:0;color:#ffa34d;}
.header-info-container .header-info-block #tServerTime,
.header-info-container .header-info-block #tLocalTime{color:#ffffff;}
.header-info-container .header-info-block #tServerDate,
.header-info-container .header-info-block #tLocalDate{color:#dddddd;}
.header-info-container .header-info-block .online-count{color:#00ff00;}

/* ONLINE BAR */
.webengine-online-bar{
	width:100%;background:#000;border:1px solid #12485b;height:8px;
	margin:10px 0;border-radius:4px;overflow:hidden;transition:.3s;
}
.webengine-online-bar .webengine-online-bar-progress{
	height:8px;background:#ff6a00 url('../img/online_progress_bar.jpg') no-repeat left center;
	border-radius:0 1px 1px 0;
}
.webengine-online-bar:hover{filter:brightness(120%);}

/* MY ACCOUNT CHARACTER LIST */
.myaccount-character-block{
	background:#112934;border:1px solid #12485b;padding:5px;border-radius:3px;
	display:inline-block;margin:0 auto;box-shadow:0 0 10px rgba(0,0,0,.5);
}
.myaccount-character-block img{
	width:100px;height:auto;border-radius:3px;box-shadow:0 0 5px #000;transition:.3s;
}
.myaccount-character-block img:hover{filter:brightness(120%);}
.myaccount-character-block-location{
	font-size:12px;margin:2px 0 20px;line-height:1.2;color:#ffa34d;
}
.myaccount-character-block-level{
	position:relative;top:-77px;display:inline-block;background:rgba(0,0,0,.5);
	padding:0 5px;border-radius:3px;color:#fff;font-size:10px;
}
.myaccount-character-name a{font-weight:bold;font-size:16px;color:#00d2ff;}

/* RANKINGS CLASS FILTER */
.rankings-class-filter{
	display:inline-block;list-style:none;margin:20px auto;padding:10px 20px;border-radius:10px;
}
.rankings-class-filter li{display:inline-block;transition:.3s;margin-bottom:10px;}
.rankings-class-filter li:hover{filter:grayscale(0%);}
.rankings-class-filter-selection{
	display:inline-block;width:75px;text-align:center;color:#ffa34d;font-size:11px;cursor:pointer;
}
.rankings-class-filter-selection:hover{color:#ff6a00!important;}
.rankings-class-filter-selection:hover img{filter:brightness(120%);}
.rankings-class-filter-selection img{
	width:40px;height:auto;border-radius:50%;margin-bottom:5px;transition:.3s;
	box-shadow:0 0 10px rgba(0,0,0,.45);
}
.rankings-class-filter-grayscale{opacity:.4;}

/* HOME NEWS */
.home-news-block .home-news-block-header h2{
	margin:0 0 20px!important;color:#00d2ff;padding:0!important;font-style:italic;
}
.home-news-block .home-news-block-header a{
	display:inline-block;padding-top:5px;font-style:italic;font-size:16px;color:#ff6a00;
}
.home-news-block-article{margin-top:10px;}
.home-news-block-article .home-news-block-article-type{
	display:block;border:1px solid #ff6a00;padding:5px;text-align:center;color:#ff6a00;
}
.home-news-block-article .home-news-block-article-title-container{
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.home-news-block-article .home-news-block-article-title,
.home-news-block-article .home-news-block-article-date{
	line-height:30px;color:#ffa34d;
}

/* EVENT TIMER */
.event-schedule-open{color:#4ade80;}
.event-schedule-inprogress{color:#f59e0b;}
.panel-sidebar-events .smalltext{font-size:11px;top:-5px;position:relative;color:#b0b0b0;}

/* ========== NUEVO DISEÑO MODERNO ========== */

/* HERO SECTION CON STATS */
.hero-section {
    text-align: center;
    padding: 40px 0;
    margin-bottom: 60px;
}

.server-stats-container {
    max-width: 800px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    background: rgba(26, 35, 50, 0.9);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 195, 247, 0.4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.stat-icon {
    font-size: 28px;
    color: #4fc3f7;
    margin-bottom: 12px;
}

.stat-label {
    color: #b0b0b0;
    font-size: 14px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.stat-value.online {
    color: #4ade80;
}

/* BOTONES DE ACCIÓN */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
}

.btn-download, .btn-discord {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-download {
    background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
    color: #ffffff;
}

.btn-download:hover {
    background: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 195, 247, 0.3);
    color: #ffffff;
}

.btn-discord {
    background: linear-gradient(135deg, #7289da 0%, #5865f2 100%);
    color: #ffffff;
}

.btn-discord:hover {
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(114, 137, 218, 0.3);
    color: #ffffff;
}

/* SECCIÓN NEWS MODERNA */
.news-section {
    margin-bottom: 60px;
}

.section-title {
    color: #4fc3f7;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-subtitle {
    color: #b0b0b0;
    font-size: 16px;
    margin-bottom: 40px;
}

.news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.news-card-large, .news-card-small {
    background: rgba(26, 35, 50, 0.9);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.news-card-large:hover, .news-card-small:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 195, 247, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.news-image {
    height: 240px;
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.1), rgba(26, 35, 50, 0.8)), url('../img/news-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.news-image-small {
    height: 140px;
}

.news-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(79, 195, 247, 0.9);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.news-content {
    padding: 24px;
}

.news-content-small {
    padding: 20px;
}

.news-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

.news-title-small {
    font-size: 16px;
    margin-bottom: 8px;
}

.news-excerpt {
    color: #b0b0b0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #7c8aa0;
    font-size: 12px;
}

.news-date {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* SECCIÓN RANKINGS */
.rankings-section {
    margin-bottom: 60px;
}

.rankings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.ranking-card {
    background: rgba(26, 35, 50, 0.9);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.ranking-header {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(26, 35, 50, 0.8));
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(79, 195, 247, 0.2);
}

.ranking-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ranking-icon {
    font-size: 20px;
}

.ranking-icon.level { color: #fbbf24; }
.ranking-icon.kills { color: #ef4444; }
.ranking-icon.resets { color: #a855f7; }

.ranking-subtitle {
    color: #b0b0b0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ranking-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ranking-list li {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(79, 195, 247, 0.1);
    transition: background-color 0.3s ease;
}

.ranking-list li:hover {
    background: rgba(79, 195, 247, 0.05);
}

.ranking-list li:last-child {
    border-bottom: none;
}

.ranking-position {
    color: #4fc3f7;
    font-weight: 700;
    font-size: 16px;
    width: 24px;
    text-align: center;
    margin-right: 16px;
}

.ranking-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid rgba(79, 195, 247, 0.3);
}

.ranking-player {
    flex-grow: 1;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}

.ranking-value {
    color: #4fc3f7;
    font-weight: 700;
    font-size: 16px;
}

/* GLOBAL TOP BAR ACTUALIZADO */
.global-top-bar {
    width: 100%;
    background: rgba(10, 15, 22, 0.9);
    color: #b0b0b0;
    padding: 8px 0;
    text-transform: uppercase;
    font-size: 12px;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(79, 195, 247, 0.1);
}

.global-top-bar .global-top-bar-content {
    width: 1200px;
    margin: 0 auto;
}

.global-top-bar a {
    color: #4fc3f7 !important;
}

.global-top-bar a:hover {
    color: #81d4fa !important;
}

/* HEADER INFO ACTUALIZADO */
.header-info-container {
    width: 1200px;
    margin: 0 auto;
    text-align: right;
}

.header-info-container .header-info {
    display: inline-block;
    width: 400px;
    background: rgba(26, 35, 50, 0.9);
    backdrop-filter: blur(15px);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 3px #000;
    color: #4fc3f7;
    border: 1px solid rgba(79, 195, 247, 0.2);
    font-size: 14px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1240px) {
    #container, .footer, .global-top-bar .global-top-bar-content, .header-info-container {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .server-stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .rankings-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* BARRA SOCIAL VERTICAL */
.social-bar-vertical {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1000;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.social-icon.facebook {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.8), rgba(0, 102, 204, 0.8));
}

.social-icon.instagram {
    background: linear-gradient(135deg, rgba(233, 89, 80, 0.8), rgba(240, 148, 41, 0.8));
}

.social-icon.discord {
    background: linear-gradient(135deg, rgba(114, 137, 218, 0.8), rgba(88, 101, 242, 0.8));
}

.social-icon:hover {
    transform: translateX(-8px) scale(1.1);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.social-icon:hover.facebook {
    background: linear-gradient(135deg, #1877f2, #0066cc);
}

.social-icon:hover.instagram {
    background: linear-gradient(135deg, #e95950, #f09429);
}

.social-icon:hover.discord {
    background: linear-gradient(135deg, #7289da, #5865f2);
}

/* BOTONES GENERALES */
.btn {
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
    color: #ffffff;
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 195, 247, 0.3);
    color: #ffffff;
}

.btn-success {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: #ffffff;
}

.btn-success:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(74, 222, 128, 0.3);
    color: #ffffff;
}

/* TABLAS MEJORADAS */
.table {
    background: rgba(26, 35, 50, 0.6);
    border-radius: 12px;
    overflow: hidden;
}

.table td, .table th {
    border-color: rgba(79, 195, 247, 0.1);
    color: #e0e0e0;
    padding: 12px 16px;
}

.table th {
    background: rgba(79, 195, 247, 0.1);
    color: #4fc3f7;
    font-weight: 600;
}