/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 
 * Author Lautaro Angelico (https://lautaroangelico.com/)
 * Copyright (c) 2013-2022 Lautaro Angelico, All Rights Reserved
 
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 
 =========================================================
 
*/

.cinzel-decorative-regular {
  font-family: "Cinzel Decorative", serif;
  font-weight: 400;
  font-style: normal;
}

.cinzel-decorative-bold {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-style: normal;
}

.cinzel-decorative-black {
  font-family: "Cinzel Decorative", serif;
  font-weight: 900;
  font-style: normal;
}

html {
	min-width: 1040px;
	height: 100%;
}

body {
	background: var(--bg);
	color: #333;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 14px;
	margin: 0 100px; 
	height: 100%;
}

/* ==== FONDO CON VIDEO ==== */

.background {
    position: fixed;
    inset: 0; 
    width: 100vw;
    height: 100vh;
    z-index: -1; 
    overflow: hidden; 
    transform: translateZ(0); 
}

.background video {
    position: absolute;
    inset: 0; 
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.blur-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
}

:root {
    --bg: #E3E0E0;
    --nav-bg: #363636;
    --orange: #FF5900;
    --button: #D2D2D2;
}

@media only screen and (min-width: 2000px) {
	body {
		background: #000000 url('../img/background-2600.jpg') no-repeat top center !important;
	}
}

a {
	color: var(--orange);
	text-decoration: none;
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

a:hover {
	color: #ffda8a;
}

img {
	border: 0px;
}

input[type=text], input[type=password], input[type=number] {
	background: transparent;
	color: #666;
}

#header {
    margin-top: 0; 
    width: 100%;
    height: 100vh; 
    padding: 20px;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto; 
    align-items: center; 
}

.header-left {
	margin-top: 250px;
    justify-self: start; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 15px;
    flex-wrap: nowrap; 
}

.status-container {
	margin-bottom: 25px;
    display: flex;
    flex-direction: row; 
    gap: 20px;
    align-items: center;
}

.regdwn-title{
    font-family: "Cinzel Decorative", serif;
    font-weight: 700;
	font-size: 32px;
	margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); 
}

.btn-regdwn {
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}

.b-register,
.b-download {
    position: relative;
    width: 200px; 
    height: 50px;
	background-color: rgba(103, 103, 103, 0.55);
	background-image: radial-gradient(rgba(0, 0, 0, 0) 1px, rgba(30, 41, 59, 0.5) 1px);
	background-size: 2px 2px; 
	background-blend-mode: overlay;	
	backdrop-filter: blur(10px);
    border: none;
    border-radius: 5px;
    color: #fff; 
    font-size: 16px;
    font-family: "Cinzel Decorative", serif;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s, transform 0.2s;
    display: flex; 
    justify-content: center;
    align-items: center; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	margin-bottom: 10px;
}


/* Borde animado */
.b-register::before,
.b-download::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px; /* ancho inicial del borde (reducido) */
    height: 100%;
    /* Mantenemos el color naranja/fuego */
    background-color: rgba(255, 89, 0, 0.8); 
    transition: width 0.3s ease;
    z-index: 0; 
}

/* Texto encima del pseudo-elemento */
.b-register span,
.b-download span {
    position: relative;
    z-index: 1;
}

/* Hover: el borde se expande */
.b-register:hover::before,
.b-download:hover::before {
    width: 100%;
}

.b-register:hover,
.b-download:hover {
    /* transform: translateY(-2px);  */
    color: #000;
}

.header-right {
    justify-self: end; 
}

.webengine-mu-logo {
    margin: 0; 
    width: 500px;
    height: auto;
    transition: all .3s ease;
}

.webengine-mu-logo:hover {
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
}

.server-status {
    margin: 0; 
    padding: 10px 15px; 
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;         
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    position: relative;
    z-index: 11;             
	background-color: rgba(54, 54, 54, 0.55);
	background-image: radial-gradient(rgba(0, 0, 0, 0) 1px, rgba(30, 41, 59, 0.5) 1px);
	background-size: 2px 2px; 
	background-blend-mode: overlay;	
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);	
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.status-circle {
    margin-left: 0; 
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    z-index: 12;
    animation: breathe 2s ease-in-out infinite;
}

.status-circle.online {
    background-color: #4CAF50; /* verde */
    box-shadow: 0 0 5px #4CAF50, 0 0 10px #4CAF50, 0 0 15px #4CAF50; 
}

.status-circle.offline {
    background-color: #F44336;
    box-shadow: 0 0 5px #F44336, 0 0 10px #F44336, 0 0 15px #F44336;
}

.status-circle::before,
.status-circle::after {
    animation: wave 2.5s ease-out infinite;
    border: 2px solid; 
}


@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

@keyframes wave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

.online-count {
	color: green;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
}


#container {
	height: auto;
	-webkit-border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	-khtml-border-radius: 5px 5px 0px 0px;
}

#content {
	margin-top: 100px;
	width: 100%;
	overflow: auto;
	min-height: 500px;
	padding: 10px 20px 0px 20px;
}

.cepoidecr {
	margin-bottom: 25px;
	background-color: transparent;
    padding: 10px 20px;
    display: inline-block;
    color: white;
    text-decoration: none !important;
    transition: background-color 0.3s, transform 0.2s;
}

.cepoidecr:hover {
	color: var(--orange) !important;
	text-decoration: none !important;
}


.footer {
	width: 100%;
	background-color: rgba(54, 54, 54, 0.55);
	background-image: radial-gradient(rgba(0, 0, 0, 0) 1px, rgba(30, 41, 59, 0.5) 1px);
	background-size: 4px 4px;
	background-blend-mode: overlay;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', 'Arial', 'sans-serif';
	font-size: 12px;
	color: #ccc;
	padding: 10px 0;
	box-sizing: border-box;
	margin-top: auto; /* 馃敼 Esto asegura que quede al fondo */
}

.footer > .footer-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.footer a:hover {
	text-decoration: none !important;
}

.footer .footer-social-link {
	filter: grayscale(100%);
	transition: all .3s ease;
}

.footer .footer-social-link:hover {
	filter: grayscale(0%);
}

/* Evita espacios alrededor del footer */
html, body {
	margin: 0;
	padding: 0;
}


#navbar {
	width: 100%;
	backdrop-filter: blur(5px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#navbar ul{
	text-align: center;
	margin: 0px;
	-webkit-padding-start: 0px;
}

#navbar ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 16px;
}

#navbar ul li a {
	display: inline-block;
	color: #cccccc !important;
	text-decoration: none;
	padding: 20px 30px;
	transition: all .3s ease;
	text-transform: uppercase;
}

#navbar ul li a:active, #navbar ul li a:focus, #navbar ul li a:hover {
	color: #ffffff !important;
	text-decoration: none;
}

.admincp-button {
	position: absolute;
	top: 0px;
	right: 10px;
	font-size: 10px;
	background: var(--orange) !important;
	border: 2px solid #000000 !important;
	color: var(--bs-light) !important;
	font-weight: bold !important;
}

.page-title {
	color: var(--orange);
	font-family: 'Roboto', sans-serif;
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: 500;
}

/* NEWS MODULE */
.panel-news {
	margin-bottom: 30px;
	color: #333;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 0px #e3e3e3;
	-webkit-box-shadow: 0 0 0px #e3e3e3;
	box-shadow: 0 0 0px #e3e3e3;
}
.panel-news .panel-heading {
	padding: 0.5rem 1rem;
	background-color: var(--orange);
	border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

.panel-news .panel-heading a{
	color: #f1f1f1;
}
.panel-news .panel-heading a:hover{
	color: #f1f1f1cc;
}

.panel-news .panel-title {
	color: #000000;
    font-size: 17px;
    font-weight: bold;
    padding-top: 5px;
}
.panel-news .panel-body {
	padding: 1rem 1rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}
.panel-news .panel-footer {
    background: #f7f7f7;
	padding: 1rem 1rem;
    font-style: italic;
    font-size: 16px;
    color: #212529;
	border: 1px solid rgba(0,0,0,.125);
	border-top: 3px solid var(--orange);
    border-radius: 0.25rem;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}

/* RANKINGS MODULE */
.rankings-wrapper {
  background: linear-gradient(180deg, #121212, #1b1b1b);
  border: 1px solid rgba(255, 136, 0, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 0 25px rgba(255, 136, 0, 0.1);
  color: #e5e5e5;
  font-family: "Segoe UI", sans-serif;
  margin-bottom: 25px;
}

/* Encabezado principal */
.rankings-header {
  font-size: 1.6rem;
  font-weight: 700;
  color: #ff8c00;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(255, 136, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Tabla */
.rankings-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  overflow: hidden;
}

.rankings-table thead {
  background: linear-gradient(90deg, #ff8c00, #ffb347);
  color: #0d0d0d;
}

.rankings-table thead th {
  padding: 10px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-align: center;
}

.rankings-table tbody tr {
  border-bottom: 1px solid rgba(255, 136, 0, 0.15);
  transition: background 0.3s ease;
}

.rankings-table tbody tr:hover {
  background: rgba(255, 136, 0, 0.07);
}

.rankings-table td {
  padding: 12px 10px;
  text-align: center;
  font-size: 0.95rem;
}

/* Lugar */
.rankings-place {
  color: #ffb347;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 136, 0, 0.4);
}

/* Jugador */
.player-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.player-avatar img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid rgba(255, 136, 0, 0.4);
  box-shadow: 0 0 10px rgba(255, 136, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.player-avatar img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 136, 0, 0.5);
}

.player-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.player-name {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.player-class {
  color: #ffb347;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Estado online/offline */
.char-online img {
  border-color: #4ade80 !important;
  box-shadow: 0 0 10px #4ade80 !important;
}

.char-offline img {
  border-color: #9ca3af !important;
  box-shadow: 0 0 10px #9ca3af !important;
}

/* Nivel / mapa / pa铆s */
.rankings-level {
  color: #ffb347;
  font-weight: 600;
}
.rankings-location {
  color: #ccc;
}
.rankings-country img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(255,136,0,0.2);
}

/* Fecha de actualizaci贸n */
.rankings-update {
  text-align: right;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 1rem;
}

/* Estilos para el men煤 de navegaci贸n horizontal */
.rankings_menu {
  /* Contenedor: Fondo oscuro y ligero borde de acento */
  background-color: rgba(30, 30, 30, 0.9);
  border-radius: 8px; 
  border: 1px solid rgba(255, 136, 0, 0.3); 
  padding: 0.5rem;
  margin-bottom: 1.5rem; /* Separaci贸n del contenido/tabla */
  
  /* Alineaci贸n de los enlaces */
  display: flex; 
  justify-content: flex-start; /* Alinea los elementos a la izquierda */
  align-items: center;
  gap: 0.5rem; /* Espacio entre los enlaces */
  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Estilos base para todos los enlaces del men煤 */
.rankings_menu a {
  text-decoration: none;
  color: #e5e5e5; /* Color de texto claro */
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  white-space: nowrap; /* Evita que el texto del enlace se rompa */
}

/* Efecto hover */
.rankings_menu a:hover {
  background-color: rgba(255, 136, 0, 0.15); /* Efecto sutil al pasar el rat贸n */
  color: #ff8c00; /* Acentuaci贸n del texto al pasar el rat贸n */
  transform: translateY(-1px); /* Ligero efecto 3D */
}

/* Estilo para el enlace activo (la opci贸n seleccionada) */
.rankings_menu a.active {
  background: #ff8c00; /* Fondo de acento principal */
  color: #121212; /* Texto oscuro sobre el fondo de acento */
  box-shadow: 0 2px 10px rgba(255, 136, 0, 0.5); /* Sombra para resaltarlo */
  font-weight: 700;
  pointer-events: none; /* Opcional: Deshabilita el clic en el elemento activo */
}

---

/* MY ACCOUNT MODULE */
.myaccount-table {
    width: 100%;
    /* Fondo transparente u oscuro */
    background: var(--box-bg); 
    border: 1px solid var(--border-color);
}
.myaccount-table tr td:first-child {
    color: var(--text-secondary-color); /* Color de etiquetas (gris secundario) */
    font-weight: bold;
}
.myaccount-table tr td {
    color: var(--light-gray); /* Color de valores (gris claro) */
    border-bottom: 1px solid var(--border-color);
    padding: 15px !important;
}
.myaccount-table tr:last-child td {
    border: 0px;
}

---

/* GENERAL TABLE UI */
.general-table-ui {
    width: 100%;
    table-layout: fixed;
    /* Fondo transparente u oscuro */
    background: transparent; 
    border: 1px solid var(--border-color);
    padding: 10px;
    margin: 10px 0px;
}
.general-table-ui tr td {
    padding: 5px;
    vertical-align: middle !important;
    color: var(--light-gray); /* Texto claro */
}
.general-table-ui tr:first-child td {
    color: #5D79B1; /* Fila de encabezado o color de acento */
}
.general-table-ui tr:nth-child(2n+2) td {
    /* Rayado sutil oscuro */
    background: rgba(255, 255, 255, 0.05);
}
.general-table-ui tr td {
    text-align: center;
}
/* Im谩genes como en el ranking, usando el box-shadow fr铆o */
.general-table-ui img {
    width: 50px;
    height: auto;
    -moz-box-shadow: 0 0 5px rgba(93, 121, 177, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(93, 121, 177, 0.5);
    box-shadow: 0 0 5px rgba(93, 121, 177, 0.5);
    -moz-border-radius: 0px;
    border-radius: 0px;
}

---

/* TERMS OF SERVICE PAGE */
.tos_list li {
    color: #5D79B1; /* Color de acento para los t铆tulos de la lista */
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 40px;
}
.tos_list li p {
    color: var(--text-secondary-color); /* Gris secundario para el cuerpo de texto */
    text-align: justify;
    text-justify: inter-word;
    text-transform: none;
    padding-right: 35px;
    font-size: 14px;
    font-weight: normal;
}

/* PAYPAL */
.paypal-gateway-container {
	width: 100%;
}

.paypal-gateway-content {
	background: #fef2da;
	border: 3px solid #f79433;
	padding: 15px;
	overflow: auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
}

.paypal-gateway-logo {
	width: 100%;
	height: 100px;
	background: #fff9ec url('../img/paypal-logo-200-68.png') no-repeat center;
	background-size: contain;
	margin-bottom: 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.paypal-gateway-conversion-rate {
	margin: 0px auto;
	text-align: center;
	color: #000;
	font-size: 18px;
	padding: 10px 0px;
}

.paypal-gateway-form {
	width: 100%;
	margin: 20px auto;
	text-align: center;
}

.paypal-gateway-form div {
	display: inline-block;
	padding: 0px 10px;
	color: #000;
	font-size: 24px;
}

.paypal-gateway-form input[type=text] {
	width: 60px;
	font-size: 24px;
	border: 3px solid #f79433;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #f79433;
}

.paypal-gateway-continue {
	margin: 0px auto;
	text-align: center;
}

.paypal-gateway-continue input[type=submit] {
	background: url('../img/paypal-submit.jpg') no-repeat;
	width: 200px;
	height: 40px;
	border: 0px;
}

.module-requirements {
	font-size: 12px;
	margin-top: 20px;
}

/* SIDEBAR */
.panel-sidebar {
	background: #f1f1f1;
    border: 1px solid;
    border-color: rgba(0,0,0,0.125);
    -moz-border-radius: 0.375rem;
    border-radius: 0.375rem;
    -moz-box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
    -webkit-box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
    box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%);
}

.panel-sidebar > .panel-heading {
	background: #fff;
	color: var(--orange);;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	border: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border-bottom: 3px solid var(--orange);;
	padding: 15px;
    font-size: 22px;
    text-align: center;
}
.panel-usercp ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.panel-usercp ul li {
	display: table;
	width: 100%;
	vertical-align: middle;
	line-height: 30px;
}

.panel-usercp ul li a {
	color: #cfc27b !important;
	font-weight: bold;
}
.panel-usercp ul li a:active, .panel-usercp ul li a:hover {
	color: var(--orange) !important;
}

.panel-usercp ul li img {
	position: relative;
	top: -2px;
	padding-right: 10px;
}

.sidebar-banner {
	margin: 20px 0px;
	border: 0px;
}

.sidebar-banner img {
	-moz-box-shadow: 0 0 10px #e3e3e3;
	-webkit-box-shadow: 0 0 10px #e3e3e3;
	box-shadow: 0 0 10px #e3e3e3;
	border: 0px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -khtml-border-radius: 5px;
	border: 2px solid var(--orange);
	border-left: 7px solid var(--orange);
}

/* GENERAL PANEL STYLING */
.panel-general {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}

.panel-body{
	padding: 10px;
}

.panel-body .panel-title {
	color: #666;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 20px !important;
	font-weight: 500;
}

/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}
.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.panel-addstats .character-name {
	color: #666;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	border-bottom: 1px solid #e3e3e3;
	padding: 20px 0px;
	margin-bottom: 20px !important;
	font-weight: 500;
}

/* DOWNLOADS */
.panel-downloads {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}
	.download-description {
		font-size: 11px;
		position: relative;
		top: -7px;
		color: #777;
	}

.online-status-indicator {
	margin-left: 5px;
}

/* WEBENGINE CMS */
.webengine-powered { color: var(--orange) !important; text-transform: uppercase;}
.webengine-powered:active, .webengine-powered:hover { color: var(--orange) !important; }

/* GLOBAL TOP BAR */
.global-top-bar {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-between;
	align-items: center;	
	background-color: rgba(54, 54, 54, 0.55);
	background-image: radial-gradient(rgba(0, 0, 0, 0) 1px, rgba(30, 41, 59, 0.5) 1px);
	background-size: 4px 4px; 
	background-blend-mode: overlay;	
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);	
	width: 90%;
	height: 60px;
	border-radius: 50px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	z-index: 9999;
}



/* -------------------- Logo -------------------- */
.nav-logo {
	margin-left: 40px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.nav-logo span {
    color: var(--orange);
}

/* -------------------- Contenedor de men煤 -------------------- */
.global-top-bar .global-top-bar-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding: 0 40px;
    color: #fff;
    font-family: Tahoma, sans-serif;
    width: auto; /* 馃敼 evita interferir con el layout */
}

/* -------------------- Lista de enlaces -------------------- */
.global-top-bar-links {
    display: flex;
    align-items: center; 
    justify-content: flex-end; 
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.login-gtb {
	color: var(--orange) !important;
	margin-left: 30px;
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	font-size: 16px;
	transition: color 0.3s, transform 0.2s;
}

/* Subrayado animado desde el centro */
.login-gtb::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	width: 100%;
	height: 1px;
	background-color: var(--orange);
	transition: transform 0.3s ease;
}

/* Hover: color y animaci贸n */
.login-gtb:hover {
	color: white;
	transform: scale(1.05);
}

.login-gtb:hover::after {
	transform: translateX(-50%) scaleX(1);
}


.login-gtb,
.global-top-bar-links li a {
    position: relative;
    display: flex;           
    align-items: center;     
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    transition: color 0.3s, transform 0.2s;
}

.global-top-bar-links li a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 100%;
    height: 1px;
    background-color: var(--orange);
    transition: transform 0.3s ease;
}

.global-top-bar-links li a:hover {
    color: var(--orange) !important;
    transform: scale(1.05);
}

.global-top-bar-links li a:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* LANGUAGE PICKER */
.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	padding: 0px !important;
	margin: 0px !important;
	width: 46px;
	height: 19px;
	overflow: hidden;
	transition: all .3s ease;
}
.webengine-language-switcher:hover {
	width: 400px;
}
	.webengine-language-switcher li {
		display: inline-block;
		list-style-type: none;
		background: #333333;
		padding: 0px 5px 2px 5px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-khtml-border-radius: 3px;
		transition: all .3s ease;
	}
	.webengine-language-switcher li:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}
	.webengine-language-switcher li a {
		color: #999999;
	}
	.webengine-language-switcher li a:hover {
		color: #ffffff !important;
	}


/* HEADER INFO */
.header-info-container {
	width: 1040px;
	margin: 0px auto;
	text-align: right;
}
	.header-info-container .header-info {
		display: inline-block;
		width: 100%;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(5px);
		margin: 0px;
		padding: 20px;
		overflow: auto;
		-moz-box-shadow: 0 0 15px rgba(0,0,0,0.7);
		-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.7);
		box-shadow: 0 0 15px rgba(0,0,0,0.7);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-khtml-border-radius: 5px;
		text-shadow: 1px 1px 3px #000000;
		color: #ffffff;
		border: 1px solid rgba(255,255,255,0.1);
		font-size: 12px;
	}
		.header-info-container .header-info .header-info-block {
			padding: 0px;
			color: #aaaaaa;
		}
		.header-info-container .header-info .header-info-block #tServerTime, .header-info-container .header-info .header-info-block #tLocalTime {
			color: #ffffff;
		}
		.header-info-container .header-info .header-info-block #tServerDate, .header-info-container .header-info .header-info-block #tLocalDate {
			color: #cccccc;
		}
		.header-info-container .header-info .header-info-block .online-count {
			color: #00ff00;
		}
	.header-info ul {
		text-align: center;
		margin: 0px;
		-webkit-padding-start: 0px;
	}
	.header-info ul li {
		list-style-type: none;
		display: inline-block;
		font-size: 16px;
	}
	.header-info ul li a {
		display: inline-block;
		color: #cccccc !important;
		text-decoration: none;
		padding: 1px 30px;
		transition: all .3s ease;
		text-transform: uppercase;
	}
/* ONLINE BAR */
.webengine-online-bar {
	width: 100%;
	background: #000000;
	border: 1px solid #555555;
	height: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
	overflow: hidden;
	transition: all .3s ease;
}
	.webengine-online-bar .webengine-online-bar-progress {
		height: 8px;
		background: #00ff00 url('../img/online_progress_bar.jpg') no-repeat left center;
		-webkit-border-radius: 0px 1px 1px 0px;
		-moz-border-radius: 0px 1px 1px 0px;
		-khtml-border-radius: 0px 1px 1px 0px;
		border-radius: 0px 1px 1px 0px;
	}
	.webengine-online-bar:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

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

/* RANKINGS FILTER BY CLASS */

.rankings-class-filter {
	display: inline-block;
	list-style-type: none;
	margin: 20px auto;
	padding: 10px 20px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;
}

	.rankings-class-filter li {
		display: inline-block;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		margin-bottom: 10px;
	}

.rankings-class-filter-selection {
	display: inline-block;
	text-align: center;
	color: #000000;
	font-size: 11px;
	cursor: pointer;
}

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

	.rankings-class-filter-selection:hover img {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

.rankings-class-filter-selection img {
	width: 80px;
	height: auto;
	-moz-border-radius: 5%;
	-webkit-border-radius: 5%;
	border-radius: 5%;
	-khtml-border-radius: 5%;
	margin-bottom: 5px;
	-moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
}

/* Colores Market Char */
.RazaSM{
	background-color: rgba(47, 125, 204, 0.1);
	border: 1px solid #2f7dcc;
}
.RazaDK{
	background-color: rgba(204, 47, 47, 0.1);
	border: 1px solid #cc2f2f;
}
.RazaELF{
	background-color: rgba(51, 204, 47, 0.1);
	border: 1px solid #33cc2f;
}
.RazaMG{
	background-color: rgba(113, 47, 204, 0.1);
	border: 1px solid #712fcc;
}
.RazaDL{
	background-color: rgba(204, 158, 47, 0.1);
	border: 1px solid #cc9e2f;
}
.RazaSUM{
	background-color: rgba(191, 47, 204, 0.1);
	border: 1px solid #bf2fcc;
}
.RazaRF{
	background-color: rgba(204, 84, 47, 0.1);
	border: 1px solid #cc542f;
}

.BtnSM{
	background-color: #2f7dcc;
	color: #f1f1f1;
	border: 1px solid #2f7dcc;
}
.BtnSM:hover{
	background-color: rgba(47, 125, 204, 0.1);
	color: #2f7dcc;
	border: 1px solid #2f7dcc;
}

.BtnDK{
	background-color: #cc2f2f;
	color: #f1f1f1;
	border: 1px solid #cc2f2f;
}
.BtnDK:hover{
	background-color: rgba(204, 47, 47, 0.1);
	color: #cc2f2f;
	border: 1px solid #cc2f2f;
}

.BtnELF{
	background-color: #33cc2f;
	color: #f1f1f1;
	border: 1px solid #33cc2f;
}
.BtnELF:hover{
	background-color: rgba(51, 204, 47, 0.1);
	color: #33cc2f;
	border: 1px solid #33cc2f;
}

.BtnMG{
	background-color: #712fcc;
	color: #f1f1f1;
	border: 1px solid #712fcc;
}
.BtnMG:hover{
	background-color: rgba(113, 47, 204, 0.1);
	color: #712fcc;
	border: 1px solid #712fcc;
}

.BtnDL{
	background-color: #cc9e2f;
	color: #f1f1f1;
	border: 1px solid #cc9e2f;
}
.BtnDL:hover{
	background-color: rgba(204, 158, 47, 0.1);
	color: #cc9e2f;
	border: 1px solid #cc9e2f;
}

.BtnSUM{
	background-color: #bf2fcc;
	color: #f1f1f1;
	border: 1px solid #bf2fcc;
}
.BtnSUM:hover{
	background-color: rgba(191, 47, 204, 0.1);
	color: #bf2fcc;
	border: 1px solid #bf2fcc;
}

.BtnRF{
	background-color: #cc542f;
	color: #f1f1f1;
	border: 1px solid #cc542f;
}
.BtnRF:hover{
	background-color: rgba(204, 84, 47, 0.1);
	color: #cc542f;
	border: 1px solid #cc542f;
}

div.dataTables_wrapper div.dataTables_filter label {
	display: block;
  }
   
  div.dataTables_wrapper div.dataTables_filter input {
	width: 100%;
	margin: 0;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
	color: var(--orange) !important;
  }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
	color: var(--bs-light) !important;
  }

#FBSlideLikeBox_left {background: url(../img/iconds.png) 365px 0 no-repeat; float: left; height: 42px; position: fixed; left: -365px; padding-right: 63px; top: 15%; width: 428px; z-index: 2000;}
#FBSlideLikeBox_left #FBSlideLikeBox3_left {height: 690px; right: 0; position: absolute; border: 3px solid #597bca; width: 400px; background: #f8f8f8;}
#FBSlideLikeBox_right {background: url(../img/iconds.png) 0 0 no-repeat; float: right; height: 42px; position: fixed; right: -400px; padding-left: 42px; top: 15%; width: 400px; z-index: 2000;}
#FBSlideLikeBox_right #FBSlideLikeBox3_right {height: 690px; left: 0; position: absolute; border: 3px solid #3B5998; width: 400px; background: #f8f8f8;}
#FBSlideLikeBox_left #FBSlideLikeBox2_left {position: relative; clear: both; width: auto;}

.castle-siege-buttons a{
	color: unset !important;
}

.banners-sidebar img{
	border: 1px solid var(--orange);
}

.btn-primary {
	color: #fff;
	background-color: var(--orange);
	border-color: var(--orange);
  }
  .btn-primary:hover {
	color: #fff;
	background-color: var(--orange);
	border-color: var(--orange);
  }
  .btn-check:focus + .btn-primary, .btn-primary:focus {
	color: #fff;
	background-color: var(--orange);
	border-color: var(--orange);
	box-shadow: 0 0 0 0.25rem var(--orangeAlpha);
  }
  .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: var(--orange);
	border-color: var(--orange);
  }
  .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.25rem var(--orangeAlpha);
  }
  .btn-primary:disabled, .btn-primary.disabled {
	color: #fff;
	background-color: var(--orange);
	border-color: var(--orange);
  }

  .btn-outline-primary {
	color: var(--orange);
	border-color: var(--orange);
  }
  .btn-outline-primary:hover {
	color: #fff;
	background-color: var(--orange);
	border-color: var(--orange);
  }
  .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
	box-shadow: 0 0 0 0.25rem var(--orangeAlpha);
  }
  .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
	color: #fff;
	background-color: var(--orange);
	border-color: var(--orange);
  }
  .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
	box-shadow: 0 0 0 0.25rem var(--orangeAlpha);
  }
  .btn-outline-primary:disabled, .btn-outline-primary.disabled {
	color: var(--orange);
	background-color: transparent;
  }

  .text-primary {
	color: var(--orange) !important;
  }

  .bg-primary {
	background-color: var(--orange) !important;
  }

  .border-primary {
	border-color: var(--orange) !important;
  }

  .table-guild{
	color: #f1f1f1;
  }

/* ==== LOGIN MODAL ==== */

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: linear-gradient(180deg, #121212, #1b1b1b);
    border: 1px solid rgba(255, 136, 0, 0.4);
    box-shadow: 0 0 25px rgba(255, 136, 0, 0.2);
    color: #e5e5e5; 
    pointer-events: auto;
    outline: 0;
    border-radius: 12px;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem; 
    border-bottom: 1px solid rgba(255, 136, 0, 0.2); 
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-title {
    font-size: 1.6rem; 
    font-weight: 700;
    color: #ff8c00;
    text-shadow: 0 0 10px rgba(255, 136, 0, 0.4);
}

.modal-dialog {
    margin-top: 100px;
    max-width: 450px;
}

.login-container {
    max-width: 400px; 
    margin: 50px auto;
    padding: 1.5rem 2rem; 
    background: linear-gradient(180deg, #121212, #1b1b1b); 
    border: 1px solid rgba(255, 136, 0, 0.4);
    box-shadow: 0 0 25px rgba(255, 136, 0, 0.2); 
    border-radius: 12px;
    color: #e5e5e5;
}

/* -------------------- FORMULARIO Y GRUPOS -------------------- */
.login-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    display: flex; 
    align-items: center;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden; 
    transition: border-color 0.3s;
}

.form-group:focus-within {
    border-color: #FF8C00;
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5);
}

.margin-top-2 {
    margin-top: 15px;
}

/* -------------------- 脥CONOS Y AYUDA -------------------- */
.input-icon {
    padding: 10px;
    color: var(--text-secondary-color); 
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-help-text {
    display: block;
    margin-top: -10px;
    margin-bottom: 15px;
    color: var(--text-secondary-color); 
    font-size: 12px;
}

/* -------------------- CAMPOS DE ENTRADA -------------------- */
.input-field {
    flex-grow: 1; 
    padding: 10px;
    border: none;
    outline: none; 
    font-size: 16px;
    background: transparent; 
    color: var(--light-gray);
}

.input-field::placeholder {
    color: var(--text-secondary-color);
    opacity: 0.6;
}


/* -------------------- BOT脫N DE ENV脥O -------------------- */
.button-wrapper.full-width {
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 100%;
}

.btn-submit {
    width: 50%; 
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, filter 0.3s ease;
}

.primary-button {
    background-color: #FF8C00;
    color: var(--white);
    filter: brightness(0.9);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.primary-button:hover {
    filter: brightness(1.1);
}

.form-link-group {
    display: block;
    text-align: right;
    margin-bottom: 20px;
}

.form-link-group a {
    color: var(--text-secondary-color); 
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.form-link-group a:hover {
    color: #FF8C00 !important;
    text-decoration: underline;
}


/* ==== NUEVA TABLA ==== */
.table {
    --bs-table-bg: #ffffff;
    --bs-table-accent-bg: transparent; 
    --bs-table-striped-bg: #f8f9fa;
    --bs-table-hover-bg: #e9ecef;
    color: #333333;
    border-color: #dee2e6;
    margin-bottom: 1rem; 
    width: 100%;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
	background-color: rgba(54, 54, 54, 0.55);
	background-image: radial-gradient(rgba(0, 0, 0, 0) 1px, rgba(30, 41, 59, 0.5) 1px);
	background-size: 2px 2px; 
	background-blend-mode: overlay;	
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}

.table > thead {
    vertical-align: middle;
}

.table > thead > tr > th,
.table > thead > tr > td {
    color: #000000;
    background-color: #f0f0f0; 
    font-weight: bold;
    border-bottom-width: 2px;
    border-bottom-color: #adb5bd;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: inherit;
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: inherit;
    cursor: pointer;
}

.table-bordered > :not(caption) > * {
    border-width: none !important;
    border-color: transparent !important;
}

.table-bordered > :not(caption) > * > * {
    border-width: none !important; 
    border-color: transparent !important;
}

/* TABS */

:root {
    --font-circle: Circe,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    --box-bg: #1B2028; 
    --text-secondary-color: #AAB7C9; 
    --active-tab-bg: linear-gradient(360deg, #ff8c00, rgba(255, 136, 0, 0) 8.57%), 
                     radial-gradient(307.71% 364.11% at 43.77% -252.14%, rgba(255, 136, 0, 0.1) 0%, rgba(255, 136, 0, 0.2) 100%), 
                     #1B2028;--white: #fff;
    --light-gray: #D6E0F0; 
    --border-color: rgba(75, 85, 99, 0.4); 
}

.tabs-container-wrapper {
    width: calc(100% - 50px);
    max-width: none;
    margin: 20px auto;
    font-family: var(--font-circle);
}

.tabs-bordered-wrap {
    border-radius: 12px; 
    border: 1px solid rgba(255, 136, 0, 0.2);
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 0 15px rgba(255, 136, 0, 0.1);
}

.tabs-bar {
    display: flex;
    background: transparent;
    height: 69px; 
}

.tab-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    height: 100%;
    padding: 18px 15px;
    white-space: normal;
    text-align: left;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer !important;
    background: var(--box-bg);
    color: var(--text-secondary-color);
    border: none;
    transition: color 0.3s ease, border-radius 0.3s ease;
    user-select: none;
    z-index: 2;
}

.tab-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    height: 100%;
    width: calc(100% + 40px);
    background: var(--active-tab-bg);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.tab-link:not(.active) + .tab-link:not(.active):after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 30px;
    width: 1px;
    transform: translateY(-50%);
    background: var(--border-color);
}

.tab-link:hover {
    color: #ffb347;
}

.tab-link.active {
    color: var(--white);
}

.tab-link.active:before {
    opacity: 1;
}

.tab-link.active + .tab-link:not(.active) {
    border-top-left-radius: 20px;
}

.tabs-content {
    background: rgba(33, 33, 33, .35);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.tab-content-panel {
    padding: 40px;
    animation: fadeIn 0.5s;
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.tab-content-panel.active {
    display: flex;
    align-items: flex-start;
}

.panel-content-text { width: 50%; color: var(--light-gray); }
.panel-content-text h3 { 
    position: relative; 
    margin: 0 0 1.5rem;
    font-size: 1.6rem; 
    font-weight: 700; 
    color: #ff8c00;
    text-align: left; 
    text-transform: uppercase; 
    line-height: 1.2;
    text-shadow: 0 0 10px rgba(255, 136, 0, 0.4);
}

.panel-content-text h3:after { 
    content: ""; 
    position: absolute; 
    bottom: -0.75rem; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background-color: rgba(255, 136, 0, 0.3); 
}.panel-content-text p { line-height: 1.5; font-size: 1em; }
.panel-content-media { width: 50%; text-align: center; }
.panel-content-media img { max-width: 100%; height: auto; border-radius: 20px; max-height: 412px; }

@media(max-width: 780px) {
    .tab-content-panel { flex-direction: column; padding: 20px; }
    .panel-content-text, .panel-content-media { width: 100%; }
    .panel-content-text h3 { font-size: 22px; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tab-icon {
    width: 32px;    
    height: 32px;   
    margin-right: 10px; 
}

/* CUSTOM REGISTER */

.custom-form-container {
    max-width: 500px; 
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background: var(--box-bg); 
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    margin-bottom: 50px;
}
.custom-form-group {
    margin-bottom: 15px;
}
.custom-form-col {
    width: 100%;
}

.custom-input-group {
    display: flex;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05); 
}
.custom-input-group:focus-within {
    border-color: #5D79B1;
    box-shadow: 0 0 5px rgba(93, 121, 177, 0.5);
}

.custom-input-prepend {
    display: flex;
    align-items: center;
}
.custom-input-text {
    padding: 8px 12px;
    color: var(--text-secondary-color);
    background-color: rgba(0, 0, 0, 0.3);
    border-right: 1px solid var(--border-color);
}

.custom-form-control {
    flex: 1 1 auto;
    width: 1%; 
    padding: 8px 12px;
    line-height: 1.5;
    background: transparent;
    border: none;
    color: var(--light-gray);
    outline: none;
}
.custom-form-control::placeholder {
    color: var(--text-secondary-color);
    opacity: 0.6;
}

.custom-help-text {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-secondary-color);
}

.custom-separator-row {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-secondary-color);
    margin: 15px 0;
}
.custom-separator-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
    margin: 0 10px;
}
.custom-separator-text {
    white-space: nowrap;
    font-size: 14px;
    font-weight: bold;
}

.custom-form-check-group {
    margin-bottom: 20px;
}
.custom-form-check {
    display: flex;
    align-items: flex-start;
}
.custom-form-check-input {
    position: absolute;
    opacity: 0;
}
.custom-form-check-label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    color: var(--light-gray); 
    font-size: 14px;
}
.custom-form-check-label a {
    color: #5D79B1;
}

.custom-form-check-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.3);
}

.custom-form-check-input:checked + .custom-form-check-label:before {
    background-color: #5D79B1;
    border-color: #5D79B1;
}

.custom-form-check-input:checked + .custom-form-check-label:after {
    content: '鉁?;
    position: absolute;
    left: 2px;
    top: 1px;
    font-size: 12px;
    color: var(--white);
}

.custom-button-group {
    text-align: center;
}
.custom-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.custom-btn-primary {
    background-color: #5D79B1; /* Color de acento */
    color: var(--white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.custom-btn-primary:hover {
    background-color: #4A6AA3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

.custom-invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #FF6B6B;
}
.custom-form.was-validated .custom-form-control:invalid ~ .custom-invalid-feedback,
.custom-form.was-validated .custom-form-check-input:invalid ~ .custom-invalid-feedback {
    display: block;
}
.custom-form.was-validated .custom-form-control:invalid {
    border-color: #FF6B6B;
}

.custom-recaptcha-col {
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom-recaptcha-wrapper {
    margin: 0 auto;
}

/* BOTONES DE STREAMING */

#stream-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(61 0 100 / 35%);
  color: #ffeaff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 24px rgb(138 0 255 / 35%), inset 0 0 10px rgb(113 0 255 / 40%);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(220 0 255 / 35%);
  cursor: pointer;
  z-index: 10000;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

#stream-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 28px rgb(182 0 255 / 55%),
              inset 0 0 14px rgb(128 0 255 / 50%);
}

#stream-fab .dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #8422c5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 system-ui, sans-serif;
  box-shadow: 0 0 0 2px rgb(22 0 40 / 90%);
}

#stream-panel {
  position: fixed;
  right: 16px;
  bottom: 84px;
  width: min(92vw, 420px);
  max-height: min(70vh, 560px);
  background: rgb(17 0 40 / 45%);
  color: #f3eafa;
  border: 1px solid rgb(163 0 255 / 25%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(134 0 255 / 25%);
  z-index: 10000;
  backdrop-filter: blur(12px) saturate(140%);
}

#stream-panel .sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgb(149 0 255 / 15%);
}

#stream-panel .sp-body {
  padding: 8px;
  overflow: auto;
  max-height: calc(70vh - 90px);
}

#stream-panel .sp-footer {
  padding: 8px 12px;
  border-top: 1px solid rgb(114 0 255 / 15%);
  color: #c39fdf;
}

/* Cards */
.sp-card {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgb(166 0 255 / 10%);
  background: rgb(49 0 80 / 15%);
  transition: all 0.2s ease;
}

.sp-card:hover {
  background: rgb(143 0 255 / 15%);
  border-color: rgb(136 0 255 / 35%);
}

.sp-card .thumb {
  width: 120px;
  height: 68px;
  background: #6600aa;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 12px rgb(139 0 255 / 25%);
}

.sp-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-card .meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sp-card .title {
  font: 600 13px/1.2 system-ui, sans-serif;
  color: #f5eaff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-card .ch {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ddb9f5;
  font: 500 12px/1 system-ui, sans-serif;
}

.badge {
  padding: 2px 6px;
  border-radius: 999px;
  font: 700 10px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.badge.twitch {
  background: #9422c533;
  color: #daa6f5;
  border: 1px solid #8622c555;
}

.badge.youtube {
  background: #7916a333;
  color: #cc86ef;
  border: 1px solid #8816a355;
}

.viewers {
  margin-left: auto;
  color: #f4e3ff;
}

.sp-empty,
.sp-loading,
.sp-error {
  padding: 12px;
  color: #cb9fdf;
  text-align: center;
}

#stream-fab .fab-icon {
  width: 28px;
  height: 28px;
  display: block;
}

#sp-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sp-close .close-icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none; 
}

/* NUEVA SECCION DE DESCARGAS */
.custom-panel {
    background: linear-gradient(180deg, #121212, #1b1b1b);
    border: 1px solid rgba(255, 136, 0, 0.2); 
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(255, 136, 0, 0.1);
    margin-bottom: 25px;
    color: #e5e5e5;
    font-family: "Segoe UI", sans-serif;
}

.custom-panel-body {
    padding: 1.5rem;
}

.custom-panel-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ff8c00;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(255, 136, 0, 0.4); 
    padding-bottom: 0; 
    border-bottom: none; 
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    color: #e5e5e5;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    overflow: hidden;
}

.custom-table tr:last-child td {
    border-bottom: none;
}

.custom-table tr td {
    padding: 12px 10px;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid rgba(255, 136, 0, 0.15); 
    background: transparent;
    font-size: 0.95rem;
    transition: background 0.3s ease;
}

.custom-table tr:hover {
    background: rgba(255, 136, 0, 0.07);
}

.custom-td-title {
    font-size: 1rem; 
    font-weight: 600;
    color: #fff;
}

.download-description {
    display: block;
    font-size: 0.85rem;
    font-weight: normal;
    color: #ccc;
    opacity: 0.9;
    margin-top: 2px;
}

.custom-td-size {
    font-size: 0.95rem;
    color: #ffb347;
    font-weight: 700;
}

.custom-btn {
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none; 
}

.custom-btn-xs {
    padding: 6px 12px;
    font-size: 0.85rem; 
}

.custom-btn-primary {
    background: linear-gradient(90deg, #ff8c00, #ffb347); 
    color: #121212;
    border-color: #ff8c00;
    box-shadow: 0 4px 10px rgba(255, 136, 0, 0.3);
}

.custom-btn-primary:hover {
    background: linear-gradient(90deg, #ffb347, #ff8c00);
    border-color: #ff8c00;
    color: #121212;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(255, 136, 0, 0.5);
}

.text-center {
    text-align: center;
}

/* USER-CP COHESIVO SIN BOOSTRAP, TE ODIO BOOSTRAP */
.custom-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    background: var(--bg-medium);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    color: var(--text-light);
    overflow: hidden;
}

.custom-card-header {
    padding: 15px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-dark);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-color);
    background-color: var(--bg-dark);
    text-shadow: 0 0 5px var(--accent-glow);
}

.custom-bg-amber-accent {
    color: var(--accent-color);
    background: linear-gradient(90deg, #181818, #121212);
    box-shadow: 0 2px 10px rgba(255, 140, 0, 0.2);
}

.custom-card-body {
    padding: 20px;
    flex: 1 1 auto;
}

.custom-card-footer {
    padding: 15px;
    border-top: 1px solid var(--border-dark);
    background-color: var(--bg-dark);
}
.custom-text-center {
    text-align: center;
}

.custom-btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/*
|--------------------------------------------------------------------------
| ESTILOS ADD STATS
|--------------------------------------------------------------------------
| Nuevas clases para reemplazar panel, form-horizontal, form-group, etc.
*/

/* --- CONTENEDOR DE PERSONAJE (Reemplaza .panel y .panel-body) --- */
.character-stats-card {
    background: var(--bg-medium);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
    display: flex; /* Usamos flexbox para el layout interno (avatar + formulario) */
    align-items: flex-start;
    gap: 20px;
}

/* --- COLUMNAS INTERNAS (Reemplaza .col-xs-3, .col-xs-9, etc.) --- */
.character-avatar-container {
    flex-basis: 120px; /* Ancho fijo para el avatar */
    flex-shrink: 0;
    text-align: center;
}
.character-avatar-container img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--accent-color);
}
.character-form-container {
    flex-grow: 1;
}

/* --- NOMBRE DEL PERSONAJE --- */
.character-name-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 5px;
}

/* --- FORMULARIO Y CAMPOS (Reemplaza form-horizontal, form-group, form-control) --- */
.stats-form {
    width: 100%;
}
.form-row { /* Reemplaza .form-group */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.form-label { /* Reemplaza .col-sm-5 control-label */
    flex-basis: 50%;
	color: #cfc27b !important;
    font-weight: 500;
    padding-right: 15px;
    text-align: left; /* Alineaci贸n a la izquierda */
}
.form-input-container { /* Reemplaza .col-sm-7 */
    flex-basis: 50%;
}
.custom-input { /* Reemplaza .form-control */
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.custom-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px var(--accent-glow);
}

/* Estilo para los requisitos del m贸dulo */
.module-requirements {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    background-color: var(--bg-medium);
    text-align: center;
}
.module-requirements p {
    color: var(--text-light);
    margin: 5px 0;
    font-size: 0.95rem;
}

/* Alineaci贸n de texto */
.text-align-right {
    text-align: right;
}

/* Pop up */

.popup-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; 
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}

.popup-overlay.active {
    visibility: visible;
    opacity: 1;
}

.popup-content {
    position: relative;
    padding: 0;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.close-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    background: rgba(0,0,0,0.6);
    border: 2px solid #fff;
    border-radius: 50%;
    line-height: 1;
    width: 28px;
    height: 28px;
    text-align: center;
    font-weight: bold;
    transition: background 0.2s;
}

.close-btn:hover {
    background: rgba(255, 0, 0, 0.8);
}

.countdown-fire {
    margin: 25px;
    width: 800px;
    height: auto;
    text-align: center;
    font-size: 22px;
    margin-top: 10px;
    font-weight: bold;
    color: #ffb84d;
    text-shadow:
      0 0 5px #ff4500,
      0 0 10px #ff4500,
      0 0 20px #ff8c00,
      0 0 40px #ffa500,
      0 0 80px #ffd700;
    animation: fireGlow 2s infinite;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 30px 50px;
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.4);
}

@keyframes fireGlow {
  0%, 100% {
    text-shadow:
      0 0 5px #ff4500,
      0 0 10px #ff4500,
      0 0 20px #ff8c00,
      0 0 40px #ffa500,
      0 0 80px #ffd700;
  }
  50% {
    text-shadow:
      0 0 10px #ff6347,
      0 0 20px #ff7f50,
      0 0 40px #ffa500,
      0 0 80px #ffcc00,
      0 0 120px #ffffff;
  }
}