.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
border-top: none !important;
}
a:focus, a:hover {
color: inherit !important;
text-decoration: none !important;
}
.form-control {
background: #fafafa;
border: 1px solid #e3e3e3;
color: #666;
}
.form-control:focus {
border: 1px solid #ccc;
}
/* http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
/* http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 */
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.thumbnail {
background-color: #f1f1f1;
border: 1px solid #e3e3e3;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #344b72;
}
.btn-primary {
color: #aebed9;
background-color: #344b72;
border: 0px;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
color: #fff !important;
background-color: #344b72 !important;
}
.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a {
color: #aebed9;
}
/* ==========================================================================
HOJA DE ESTILOS UNIFICADA ÁRTICA - COMPATIBLE CON TU GIF DE FONDO
========================================================================== */
/* 1. LIBERACIÓN DEL LIENZO MAESTRO (BORRA LA PARED NEGRA) */
html, body {
background: transparent !important;
background-color: transparent !important;
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
body {
position: static !important;
z-index: auto !important;
}
/* 2. TRASFONDO OBSIDIANA ENCAPSULADO DE LA CABECERA */
.header.headerHomePage {
background: #02060c !important; /* El color negro se queda solo acá adentro */
border-bottom: 2px solid rgba(0, 210, 255, 0.2) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.85) !important;
}
.topPanel {
background: rgba(2, 6, 12, 0.9) !important;
border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
}
/* 3. BOTONES GIGANTES (DOWNLOAD Y REGISTER) - HIELO ILUMINADO */
.downloadButton, .registerButton {
background: linear-gradient(135deg, #030a14, #081626) !important;
border: 2px solid #00d2ff !important;
border-radius: 4px !important;
color: #ffffff !important;
box-shadow: 0 0 15px rgba(0, 210, 255, 0.25), inset 0 0 10px rgba(0, 240, 255, 0.1) !important;
transition: all 0.4s ease !important;
}
/* Texto grande con movimiento de luz de escarcha */
.downloadButton span, .registerButton span {
color: #00f0ff !important;
font-weight: bold !important;
animation: superIluminacionHielo 2.5s ease-in-out infinite alternate !important;
}
/* Interacción al pasar el mouse por encima */
.downloadButton:hover, .registerButton:hover {
border-color: #00f0ff !important;
box-shadow: 0 0 25px #00f0ff, inset 0 0 15px rgba(0, 240, 255, 0.2) !important;
transform: translateY(-2px) !important;
}
/* 4. BOTONES SOCIALES NATIVOS DE LA PLANTILLA */
.headerButtons-other a {
background: #030a14 !important;
border: 1px solid rgba(0, 210, 255, 0.25) !important;
color: #a3a3a3 !important;
transition: all 0.3s ease !important;
}
.headerButtons-other a:hover {
border-color: #00d2ff !important;
color: #00f0ff !important;
box-shadow: 0 0 12px rgba(0, 210, 255, 0.4) !important;
}
/* 5. MENÚ DE NAVEGACIÓN - CELESTE NEÓN ULTRA ILUMINADO */
.menu ul li a {
font-family: 'Cinzel', serif !important;
color: #00f0ff !important;
font-size: 13px !important;
font-weight: bold !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
transition: all 0.3s ease !important;
animation: superIluminacionHielo 2.5s ease-in-out infinite alternate !important;
}
.menu ul li a:hover {
color: #ffffff !important;
text-shadow: 0 0 20px #00f0ff, 0 0 10px #00d2ff, 0 0 5px #00f0ff !important;
}
/* Submenús desplegables */
.menu ul li ul {
background: #02060c !important;
border: 1px solid #00f0ff !important;
box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), 0 8px 20px rgba(0, 0, 0, 0.9) !important;
border-radius: 4px !important;
padding: 6px 0 !important;
}
.menu ul li ul li a {
color: #cbd5e1 !important;
font-size: 11px !important;
padding: 8px 16px !important;
display: block !important;
animation: none !important;
transition: all 0.3s ease !important;
}
.menu ul li ul li a:hover {
background: rgba(0, 240, 255, 0.12) !important;
color: #00f0ff !important;
text-shadow: 0 0 8px #00f0ff !important;
padding-left: 20px !important;
}
/* Panel de "My Account" superior derecho */
.acc-panel a span {
color: #00f0ff !important;
font-weight: bold !important;
text-shadow: 0 0 12px #00f0ff, 0 0 4px #00d2ff !important;
}
.acc-panel a:hover span {
color: #ffffff !important;
text-shadow: 0 0 20px #00f0ff !important;
}
/* ==========================================================================
6. CAPA MIGRADA AL FINAL: FILTRO DE CRISTAL LIGERO PARA EL GIF DE FONDO
========================================================================== */
.hud-video-overlay, body::after {
content: "" !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: linear-gradient(135deg, rgba(2, 6, 12, 0.3), rgba(4, 12, 20, 0.4)) !important;
z-index: -999999 !important; /* Enterrado al fondo absoluto */
pointer-events: none !important;
}
/* 🌊 ANIMACIÓN DE PULSO DE LUZ CELESTE DE ALTA POTENCIA */
@keyframes superIluminacionHielo {
0% {
text-shadow: 0 0 8px #00d2ff, 0 0 3px #00f0ff;
opacity: 0.9;
}
50% {
text-shadow: 0 0 25px #00f0ff, 0 0 12px #00d2ff, 0 0 4px #ffffff;
opacity: 1;
}
100% {
text-shadow: 0 0 10px #00d2ff, 0 0 4px #00f0ff;
opacity: 0.95;
}
}
/* ==========================================================================
INTERFAZ 4: COMPONENTES DE RANKING Y EVENTOS EN NEGRO Y CELESTE (ARMY MU)
========================================================================== */
/* 1. EL TRASFONDO GRIS GENERAL DE LA WEB PASA A NEGRO OBSIDIANA */
.main, #container, .main-content, .body-wrapper {
background-color: #02060c !important;
background: #02060c !important;
}
/* 2. RECONVERSIÓN DE LOS CUADRADOS BLANCOS (RANKINGS Y EVENTOS) */
.panel, .box, .ranking-box, .events-box, .panel-sidebar, .widget {
background-color: #040d1a !important; /* Negro ártico profundo */
background: #040d1a !important;
border: 1px solid rgba(0, 210, 255, 0.25) !important; /* Borde fino de cristal celeste */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.75) !important;
border-radius: 4px !important;
}
/* Cabeceras y Títulos de las cajas (Top Level / Events) */
.panel-heading, .box-title, .widget-title, .panel-title, .table th {
background: linear-gradient(135deg, #02060c, #081626) !important; /* Degradé negro */
color: #00f0ff !important; /* Títulos en Celeste Cian Iluminado */
font-family: 'Cinzel', serif !important;
font-weight: bold !important;
border-bottom: 1px solid rgba(0, 240, 255, 0.3) !important;
text-shadow: 0 0 10px rgba(0, 210, 255, 0.5) !important;
}
/* 3. TEXTOS INTERNOS Y TABLAS EN BLANCO NÍTIDO */
.table td, .panel-body, .event-row, .starts-in-text, .ranking-row {
color: #ffffff !important; /* Fuerza las letras a blanco puro */
font-family: 'PT Sans', sans-serif !important;
border-top: 1px solid rgba(0, 210, 255, 0.1) !important; /* Línea divisoria suave */
}
/* Nombres de los personajes, clases y niveles dentro de la tabla */
.table td a, .character-name, .class-name, .level-number {
color: #ffffff !important;
text-decoration: none !important;
}
/* Filas alternas de las tablas para que no se vea plano (Efecto cebra oscuro) */
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: rgba(2, 6, 12, 0.4) !important;
}
/* El texto que dice "Starts In" (Comienza en) pasa a celeste iluminado místico */
.starts-in, [class*="starts-"] {
color: #00d2ff !important;
font-weight: bold !important;
text-shadow: 0 0 8px rgba(0, 210, 255, 0.4) !important;
}
/* ==========================================================================
RECONEXIÓN DEL TAPIZ ÉPICO ORIGINAL PARA PÁGINAS INTERNAS (ARMY MU)
========================================================================== */
/* Forzamos la carga de tu fondo nativo top-bg-fon-page.jpg en los módulos intermedios */
.main,
.main-wrapper,
.body-wrapper,
#container,
#content,
.wrapper,
.content-wrapper,
.mainContent,
.headerPage,
.header:not(.headerHomePage) {
background-image: linear-gradient(135deg, rgba(4, 7, 5, 0.45), rgba(4, 7, 5, 0.65)), url('../img/top-bg-fon-page.jpg') !important;
background-repeat: no-repeat !important;
background-position: center top !important;
background-attachment: scroll !important;
background-size: cover !important;
background-color: transparent !important;
}
/* Sella el sótano absoluto en negro profundo para que no queden bordes grises */
html, body {
background-color: #040705 !important;
background: #040705 !important;
}
/* ==========================================================================
INTERFAZ 6: LIBERACIÓN DEL MENÚ SUPERIOR - TOTALMENTE ESTÁTICO (ARMY MU)
========================================================================== */
/* Rompemos el comportamiento flotante para que el menú se quede fijo arriba de todo */
.topPanel,
[class*="topPanel"] {
position: absolute !important; /* Se clava en el techo nativo y se desliza con la página */
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 9999 !important;
/* Mantenemos tu fondo negro ártico translúcido elegante */
background: rgba(2, 6, 12, 0.88) !important;
border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}
/* 🛠️ RESET DE SEGURIDAD NATIVO: Devolvemos los márgenes del cuerpo a su estado original */
.header,
.headerHomePage,
.headerPage,
.body-wrapper {
padding-top: 0 !important;
}
/* ==========================================================================
INTERFAZ 7: REMOCIÓN TOTAL DE LÍNEAS DE COLOR HORIZONTALES (ARMY MU)
========================================================================== */
/* 1. BORRAMOS LA LÍNEA DEL PANEL DE NAVEGACIÓN SUPERIOR */
.topPanel,
[class*="topPanel"] {
border-bottom: none !important;
box-shadow: none !important; /* Volamos también la sombra interna si quedó grabada */
}
/* 2. BORRAMOS LA LÍNEA INTRUSA QUE TRAE LA CABECERA DE LA PLANTILLA */
.header,
.headerHomePage,
.headerPage,
[class*="header"] {
border-bottom: none !important;
box-shadow: none !important;
}
/* Parche extra por si las líneas están inyectadas en los separadores nativos del layout */
.newsBlock,
.header-info-container {
border-top: none !important;
}
/* ==========================================================================
INTERFAZ 8: TRIPLE AISLAMIENTO DE LOGOS AETHERIX (CENTRO, BARRA Y FOOTER)
========================================================================== */
/* 1. CONFIGURACIÓN EXCLUSIVA PARA EL GRAN LOGO CENTRAL DE LA CABECERA */
.headerHomePage > a img,
.header-logo img,
.webengine-mu-logo {
width: 680px !important; /* 🔥 60% Más grande para dominar el centro del portal */
max-width: 95% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
position: relative !important;
/* 80% Más abajo: se clava en el corazón del banner */
top: 150px !important;
left: 0 !important;
/* Resplandor celeste neón potente */
filter: drop-shadow(0 0 25px #00f0ff) drop-shadow(0 0 8px #00d2ff) drop-shadow(0 0 2px #ffffff) !important;
/* Animación mística flotante */
animation: flotadoAetherixHielo 4s ease-in-out infinite alternate !important;
z-index: 10 !important;
transform: none !important;
}
/* 2. REPARACIÓN DEL LOGO DE LA ESQUINA SUPERIOR IZQUIERDA (BARRA DE MENÚ) */
.logo img,
.topPanel-wrapper .logo img,
.topPanel .logo a img {
width: 140px !important; /* Tamaño mini compacto para que no moleste */
height: auto !important;
position: relative !important;
top: 0 !important; /* Lo devuelve arriba a su barra */
left: 0 !important;
margin: 0 !important;
filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6)) !important;
animation: none !important;
transform: none !important;
}
/* 3. REPARACIÓN EXCLUSIVA PARA EL LOGO DE ABAJO DE TODO (FOOTER / PIE DE PÁGINA) */
.footer img,
.footer-logo img,
footer img,
[class*="footer"] img {
width: 160px !important; /* 🔥 Lo achicamos de golpe a su tamaño mini original de fábrica */
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 15px auto !important; /* Centrado prolijo adentro del pie de página */
position: relative !important;
top: 0 !important; /* Rompe el "top: 150px" de la cabecera para que no se desplace */
left: 0 !important;
/* Le dejamos un brillo ártico sutil muy elegante */
filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.5)) !important;
/* TOTALMENTE ESTÁTICO: Se queda 100% quieto abajo sin flotar */
animation: none !important;
transform: none !important;
}
/* Ajuste de altura en el Header para que el logo del centro tenga espacio */
.header,
.headerHomePage,
.headerPage {
min-height: 490px !important;
padding-bottom: 70px !important;
}
/* Animación del pulso y balanceo para el logo central */
@keyframes flotadoAetherixHielo {
0% {
transform: translateY(0px) scale(1);
filter: drop-shadow(0 0 18px #00d2ff) drop-shadow(0 0 4px rgba(0,240,255,0.5)) !important;
}
50% {
filter: drop-shadow(0 0 35px #00f0ff) drop-shadow(0 0 15px #00d2ff) drop-shadow(0 0 3px #ffffff) !important;
}
100% {
transform: translateY(-15px) scale(1.02);
filter: drop-shadow(0 0 22px #00f0ff) drop-shadow(0 0 6px rgba(0,240,255,0.6)) !important;
}
}
/* ==========================================================================
INTERFAZ 9: FORZADO DE VIDEO GLOBAL TRANSPARENTE (AETHERIX)
========================================================================== */
/* 1. ROMPEMOS TODAS LAS CORTINAS NEGRAS NATIVAS DE LA PLANTILLA */
html, body,
.main,
.main-wrapper,
.body-wrapper,
#container,
#content,
.wrapper,
.content-wrapper,
.mainContent,
.headerPage,
.headerHomePage,
.header {
background-color: transparent !important;
background: transparent !important;
}
/* 2. FORZAMOS EL REPRODUCTOR AL FONDO ABSOLUTO CON VISIBILIDAD BRUTA */
.hud-video-bg-global-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: -999999 !important; /* Lo tira al subsuelo, por detrás de todo */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none !important;
}
.hud-video-bg-element {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Filtro de cristal oscuro sutil para que no te encandile las letras celestes */
.hud-video-bg-overlay-cristal {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, rgba(2, 6, 12, 0.4), rgba(4, 7, 5, 0.5)) !important;
z-index: 1 !important;
}
/* ==========================================================================
DESINTEGRACIÓN DE PARCHE NEGRO EN EL MEDIO DE LA CABECERA (AETHERIX)
========================================================================== */
/* Volvemos totalmente transparente el bloque contenedor de los botones grandes y el fondo del logo */
.headerButtons,
.headerButtons-other,
.topPanel-wrapper,
.menu-central-wrapper,
[class*="headerButtons"],
[class*="headerHomePage"] {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important; /* Volamos cualquier sombra interna que genere oscuridad */
border: none !important;
}
/* ==========================================================================
PRUEBA DE FUERZA BRUTA - VIDEO AL FRENTE ABSOLUTO (DIAGNÓSTICO AETHERIX)
========================================================================== */
/* Volvemos totalmente transparentes las capas base de la web */
html, body, .main, .main-wrapper, .body-wrapper, #container, #content, .header, .headerHomePage {
background-color: transparent !important;
background: transparent !important;
}
/* 🚨 TRAEMOS EL VIDEO AL FRENTE DE TODO PARA VER SI REPRODUCE */
.hud-video-bg-global-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 2147483647 !important; /* Lo pone por encima de tus botones, logos y rankings */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none !important;
}
.hud-video-bg-element {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Quitamos el overlay oscuro momentáneamente para ver el video puro */
.hud-video-bg-overlay-cristal {
display: none !important;
}
/* ==========================================================================
TRANSPARENCIA QUIRÚRGICA: SANA EL BLOQUE NEGRO CENTRAL DE LA CABECERA
========================================================================== */
/* 1. DISOLVEMOS EL FONDO SÓLIDO DE LA CLASE MAESTRA QUE ME PASASTE */
header.header.headerHomePage,
.headerHomePage,
.headerPage,
.header {
background: transparent !important;
background-color: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* 2. BORRAMOS EL TAPÓN NEGRO OCULTO DEL LOGO CENTRAL */
.header-logo,
.header-logo a,
div[class*="header-logo"] {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* 3. PARCHE PARA QUE EL VIDEO REGRESE AL SUBSELO SEGURO DE LA PANTALLA */
.hud-video-bg-global-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: -999999 !important; /* Lo devuelve atrás de tus rankings y botones celestes */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ==========================================================================
INTERFAZ 10: TÍTULO LATEST NEWS EN CELESTE NEÓN ULTRA ILUMINADO (AETHERIX)
========================================================================== */
/* Apuntamos al h2 de noticias de forma global e interna */
.news-block h2,
.newsBlock h2,
h2:contains("Latest News"),
h2 {
font-family: 'Cinzel', serif !important;
color: #00f0ff !important; /* Celeste cian iluminado fijo */
font-size: 24px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
text-align: left !important;
margin-bottom: 15px !important;
display: block !important;
/* 🌊 ENCIENDE EL PULSO DE LUZ DE ESCARCHA EN MOVIMIENTO CONSTANTE */
animation: superIluminacionHielo 2.5s ease-in-out infinite alternate !important;
}
body {
background-image: none !important;
background-color: #0b0b12 !important; /* Un color oscuro de respaldo por si el video tarda en cargar */
}
.hud-video-bg-global-container {
position: fixed !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -9999 !important;
overflow: hidden;
}
/* =======================================================
PERSONALIZACIÓN DE REVOLUCIÓN OSCURA (RANKINGS Y TABLAS)
======================================================= */
/* 1. Cambia el fondo gris del costado de la web a negro profundo */
body,
html,
.wrapper,
.bodyHomePage,
.main-body {
background-image: none !important;
background-color: #0b0b12 !important;
background: #0b0b12 !important;
}
/* 2. Cambia todas las cajas y tablas blancas a negro oscuro */
.content,
main.content,
.panel,
.panel-body,
.panel-downloads,
.table,
tbody,
tr,
td,
th,
.news-block,
.news-block-tab {
background-color: #121216 !important;
background: #121216 !important;
border-color: #23232a !important; /* Cambia bordes blancos por oscuros */
}
/* 3. Pone todas las letras oscuras en color BLANCO */
.content h1,
.content h2,
.content h3,
.panel-title,
td,
th,
span,
p,
.pageTitle h1,
.news-block-tab-buttons span,
.news a {
color: #ffffff !important;
}
/* 4. Cambia los botones grises del Ranking (Top Level, Top Resets, etc) a oscuros con letras blancas */
.nav-tabs > li > a,
.btn-default,
.tab-button,
.table th,
ul.nav-tabs li a,
.panel-title {
background-color: #1a1a22 !important;
background: #1a1a22 !important;
color: #ffffff !important;
border: 1px solid #2d2d3a !important;
}
/* 5. Color azul/celeste brillante para los nombres de los personajes en la tabla */
.table a,
td a {
color: #52a0ff !important;
}
/* ==========================================================================
CONTENEDOR PRINCIPAL COMPACTO
========================================================================== */
.form-container, .account-box {
background-color: rgba(10, 20, 30, 0.9); /* Fondo oscuro profundo */
border: 1px solid #00d2ff; /* Línea celeste más fina */
border-radius: 6px;
padding: 15px 20px; /* Margen interno reducido para que sea más chico */
max-width: 320px; /* Ancho máximo reducido para evitar cajas estiradas */
margin: 15px auto;
box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
font-family: Arial, sans-serif;
}
/* ==========================================================================
TÍTULOS Y TEXTOS SUPERIORES
========================================================================== */
.form-title, h2 {
font-size: 16px; /* Texto más chico y discreto */
color: #00d2ff;
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Bloque de olvido de contraseña alineado */
.login-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 11px;
}
.account-login-text {
color: #ffffff;
font-weight: bold;
}
.forgot-link {
color: #00ffff;
text-decoration: none;
}
.forgot-link:hover {
text-decoration: underline;
}
/* ==========================================================================
INPUTS (CAJAS DE TEXTO ESTRECHAS Y ORDENADAS)
========================================================================== */
input[type="text"],
input[type="password"] {
width: 100%;
height: 32px; /* Altura fija y delgada */
padding: 0 10px; /* Eliminamos el exceso de relleno vertical */
margin-bottom: 10px; /* Separación uniforme y limpia */
background-color: rgba(5, 15, 25, 0.8);
border: 1px solid #005f73; /* Borde sutil */
border-radius: 4px;
color: #ffffff;
font-size: 13px;
box-sizing: border-box;
transition: all 0.2s ease;
}
/* Foco iluminado al hacer clic */
input[type="text"]:focus,
input[type="password"]:focus {
outline: none;
border-color: #00ffff;
box-shadow: 0 0 6px rgba(0, 255, 255, 0.5);
}
/* Requisitos de texto (debajo de los inputs) */
.help-text {
font-size: 10px;
color: #a0b0c0;
margin-top: -6px;
margin-bottom: 10px;
display: block;
}
/* ==========================================================================
BOTÓN SIGN IN COMPACTO
========================================================================== */
button.btn-sign-in, input[type="submit"] {
width: 100%;
height: 34px; /* Altura compacta */
background: #008ca8;
border: 1px solid #00ffff;
border-radius: 4px;
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 5px;
}
button.btn-sign-in:hover {
background: #00ffff;
color: #000000;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}
/* ==========================================================================
SECCIÓN INFERIOR (IDIOMA / BANDERAS)
========================================================================== */
.switch-language-box {
margin-top: 15px;
padding-top: 10px;
border-top: 1px solid rgba(0, 210, 255, 0.15);
text-align: center;
}
.switch-language-box label {
font-size: 11px;
color: #8ae5ff;
display: block;
margin-bottom: 6px;
}
.language-flags {
display: flex;
justify-content: center;
gap: 8px; /* Espaciado ordenado entre banderitas */
}
.language-flags img {
width: 18px; /* Tamaño controlado de banderas */
height: auto;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
}
.language-flags img:hover {
opacity: 1;
transform: scale(1.1);
}
/* ==========================================================================
DISEÑO GENERAL CELESTE NEÓN - CUADROS COMPACTOS Y CHICOS
========================================================================== */
/* Reduce y centra los cuadros de Login y Registro de WebEngine */
.col-xs-12 .form-horizontal,
.col-xs-8 .form-horizontal,
form[action*="login"],
form[action*="register"] {
background-color: rgba(5, 10, 15, 0.95) !important; /* Fondo oscuro profundo */
border: 2px solid #00d2ff !important; /* Marco celeste brillante */
border-radius: 12px !important; /* Bordes redondeados idénticos */
padding: 25px 30px !important;
max-width: 420px !important; /* Fuerza a que el cuadro sea chico */
margin: 30px auto !important; /* Centra el cuadro horizontalmente */
box-shadow: 0 0 15px rgba(0, 210, 255, 0.4) !important; /* Brillo exterior */
box-sizing: border-box !important;
}
/* ==========================================================================
ESTRUCTURA EN FILAS ALINEADAS (Texto a la Izquierda, Caja a la Derecha)
========================================================================== */
/* Convierte las filas de Bootstrap en filas flexibles y compactas */
.form-horizontal .form-group {
display: flex !important;
justify-content: space-between !important; /* Empuja el texto a la izq y el input a la der */
align-items: center !important; /* Centrado vertical impecable */
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 12px !important; /* Separación corta y ordenada */
}
/* Forzar remoción de pseudo-elementos de Bootstrap que rompen el flexbox */
.form-horizontal .form-group::before,
.form-horizontal .form-group::after {
display: none !important;
}
/* Etiquetas de texto de los campos (Username:, Password:) */
.form-horizontal .control-label {
text-align: left !important;
color: #ffffff !important;
font-weight: bold !important;
font-size: 13px !important;
width: 32% !important; /* Espacio exacto asignado al texto izquierdo */
padding-top: 0 !important;
margin-bottom: 0 !important;
}
/* Contenedores de Bootstrap que envuelven los inputs */
.form-horizontal .col-sm-10,
.form-horizontal .col-md-9,
.form-horizontal div[class*="col-"] {
width: 65% !important; /* Espacio asignado a la caja derecha */
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ==========================================================================
CAJAS DE ENTRADA (Inputs chicos y redondeados con fondo blanco)
========================================================================== */
.form-horizontal .form-control,
input[type="text"],
input[type="password"],
input[type="email"] {
width: 100% !important;
height: 32px !important; /* Altura compacta y fina */
background-color: #e9efff !important; /* Fondo blanco sutilmente azulado */
border: 1px solid #00a8cc !important;
border-radius: 6px !important; /* Bordes redondeados en la caja */
color: #000000 !important; /* Letra negra al escribir */
font-size: 14px !important;
font-weight: bold !important;
text-align: center !important; /* Centra el usuario escrito o los puntitos */
padding: 0 10px !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
/* Efecto de brillo celeste al hacer clic o escribir */
.form-horizontal .form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus {
outline: none !important;
background-color: #ffffff !important;
border-color: #00ffff !important;
box-shadow: 0 0 8px rgba(0, 255, 255, 0.7) !important;
}
/* Ocultar o achicar textos aclaratorios debajo de los inputs para no ocupar espacio */
.form-horizontal .help-block,
.form-horizontal .small {
font-size: 10px !important;
color: #8ae5ff !important;
margin-top: 2px !important;
margin-bottom: 0 !important;
text-align: right !important;
display: block;
}
/* ==========================================================================
BOTONES Y LINKS INFERIORES
========================================================================== */
/* Centrar el botón "Sign In" o "Create Account" */
.form-horizontal .form-group:last-child,
.form-actions {
justify-content: center !important;
margin-top: 15px !important;
margin-bottom: 0 !important;
}
/* Estilo del botón con marco iluminado */
.form-horizontal button[type="submit"],
.form-horizontal .btn-primary {
background-color: #000000 !important; /* Fondo negro */
border: 2px solid #00d2ff !important; /* Marco celeste brillante */
border-radius: 6px !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: bold !important;
text-transform: uppercase !important;
padding: 6px 35px !important; /* Botón estirado horizontalmente pero bajo */
cursor: pointer !important;
box-shadow: 0 0 8px rgba(0, 210, 255, 0.3) !important;
transition: all 0.2s ease !important;
width: auto !important;
min-width: 130px !important;
}
/* Efecto Hover celeste al posicionar el mouse */
.form-horizontal button[type="submit"]:hover,
.form-horizontal .btn-primary:hover {
background-color: #00d2ff !important;
color: #000000 !important; /* Letras negras sobre el fondo brillante */
box-shadow: 0 0 15px rgba(0, 255, 255, 0.8) !important;
}
/* Links secundarios como "Forgot your password?" */
.form-horizontal a {
color: #a0b0c0 !important;
font-size: 11px !important;
text-decoration: none !important;
}
.form-horizontal a:hover {
color: #00ffff !important;
text-decoration: underline !important;
}
/* ==========================================================================
PERSONAJE FIJO EN EL FONDO (SE MUEVE CON EL SCROLL NATURAL DE LA WEB)
========================================================================== */
.personaje-izq-fijo {
position: absolute !important; /* Vuelve a absolute para que suba con el scroll */
top: 30vh !important; /* Altura en la pantalla inicial */
left: 0 !important; /* Pegado al ras del borde izquierdo */
z-index: -1 !important; /* Por detrás del contenido */
pointer-events: none !important; /* No bloquea los clics */
margin: 0 !important;
padding: 0 !important;
}
.personaje-izq-fijo img {
height: 90vh !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Forzar que el fondo de la web no empuje la imagen hacia el centro */
body {
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
PERSONAJE FORZADO A LA IZQUIERDA (ELIMINA BORDES TRANSPARENTES)
========================================================================== */
.personaje-izq-fijo {
position: absolute !important; /* Se queda quieto en su lugar al bajar con la ruedita */
top: 30vh !important; /* Altura en la pantalla inicial */
/* 🎯 AJUSTE CRÍTICO: Valor negativo para comerse el espacio transparente de la foto */
left: -150px !important;
z-index: -1 !important; /* Por detrás del contenido */
pointer-events: none !important; /* No bloquea los clics */
margin: 0 !important;
padding: 0 !important;
}
.personaje-izq-fijo img {
height: 90vh !important;
width: auto !important;
object-fit: contain !important;
display: block !important;
}
/* ==========================================================================
SECCIÓN DOWNLOADS - TEXTOS CELESTE ILUMINADO (NEÓN)
========================================================================== */
/* Título principal de la sección (Downloads) */
.pageTitle h1,
.download-title,
h2.download-heading {
color: #00ffff !important; /* Celeste neón puro */
text-transform: uppercase !important;
font-weight: bold !important;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.7),
0 0 20px rgba(0, 210, 255, 0.4) !important; /* Efecto de luz/brillo */
letter-spacing: 2px !important;
margin-bottom: 25px !important;
}
/* Subtítulos de categorías (Client Downloads, Patch Downloads, Tool Downloads) */
.download-section-title,
.download-box h3,
h3[class*="download"] {
color: #00d2ff !important; /* Celeste brillante */
font-size: 16px !important;
font-weight: bold !important;
text-transform: uppercase !important;
text-shadow: 0 0 8px rgba(0, 210, 255, 0.5) !important;
border-bottom: 1px solid rgba(0, 210, 255, 0.2) !important;
padding-bottom: 5px !important;
margin-top: 20px !important;
margin-bottom: 15px !important;
}
/* Nombre del archivo (CLIENTE-ORIGINAL, parches o herramientas) */
.download-link-title,
.download-name,
.download-box td a strong {
color: #ffffff !important; /* Texto blanco para que resalte */
font-size: 15px !important;
transition: all 0.2s ease !important;
}
/* Servidor/Host (MediaFire, Mega, etc.) y Tamaño (1030 MB) */
.download-host-name,
.download-size,
.download-box td {
color: #8ae5ff !important; /* Celeste suave y legible */
font-weight: bold !important;
font-size: 13px !important;
}
/* El botón o texto de enlace "Download" dentro de la tabla */
.download-button,
a[href*="mediafire"],
a.btn-download {
color: #00ffff !important;
font-weight: bold !important;
text-transform: uppercase !important;
text-decoration: none !important;
text-shadow: 0 0 5px rgba(0, 255, 255, 0.6) !important;
transition: all 0.2s ease !important;
}
/* Efecto cuando pasás el mouse por encima del enlace de descarga */
.download-button:hover,
a[href*="mediafire"]:hover,
a.btn-download:hover {
color: #ffffff !important;
text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff !important;
}
/* ==========================================================================
DESCARGAS CELESTE ILUMINADO CON SUBRAYADO Y BORDES (FORZADO)
========================================================================== */
/* 1. TÍTULO PRINCIPAL (Downloads) */
.pageTitle h1, .content h1, h1 {
color: #00ffff !important;
text-shadow: 0 0 12px rgba(0, 255, 255, 0.8) !important;
}
/* 2. SUBTÍTULOS DE CATEGORÍAS (Client Downloads, Patch Downloads, Tool Downloads) */
.content h2,
.content h3,
.content table tr th,
.content td[colspan] {
color: #00ffff !important;
font-size: 16px !important;
text-transform: uppercase !important;
text-shadow: 0 0 8px rgba(0, 210, 255, 0.6) !important;
/* Subrayado con línea celeste iluminada debajo del título */
border-bottom: 2px solid #00d2ff !important;
padding-bottom: 6px !important;
box-shadow: 0 4px 6px -4px rgba(0, 255, 255, 0.5) !important;
}
/* 3. NOMBRE DEL ARCHIVO (CLIENTE-ORIGINAL) */
.content table td a,
.content table td strong,
.content table tr td:first-child {
color: #00ffff !important; /* Letras celestes */
text-shadow: 0 0 5px rgba(0, 255, 255, 0.4) !important;
font-weight: bold !important;
text-decoration: none !important;
}
/* 4. SERVIDOR Y TAMAÑO (media fire / 1030 MB) */
.content table td,
.content table tr td:nth-child(2),
.content table tr td span {
color: #8ae5ff !important; /* Celeste más suave para el tamaño */
font-weight: bold !important;
}
/* 5. EL BOTÓN O TEXTO "DOWNLOAD" (El de fondo azul en tu foto) */
.content table td a[class*="btn"],
.content table td a:last-child,
a[href*="http"] {
color: #ffffff !important; /* Texto blanco adentro */
background: #005f73 !important; /* Fondo celeste oscuro */
border: 2px solid #00ffff !important; /* Borde celeste neón */
border-radius: 4px !important;
padding: 4px 12px !important;
text-shadow: none !important;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.6) !important; /* Brillo alrededor del botón */
font-weight: bold !important;
text-transform: uppercase !important;
}
/* Efecto cuando pasás el mouse por encima del botón DOWNLOAD */
.content table td a[class*="btn"]:hover,
a[href*="http"]:hover {
background: #00ffff !important; /* Se llena de celeste brillante */
color: #000000 !important; /* Letras negras para contrastar */
box-shadow: 0 0 15px #00ffff !important;
}
/* 6. LÍNEAS SEPARADORAS DE LAS FILAS DE LA TABLA */
.content table tr,
.content table td {
border-bottom: 1px solid rgba(0, 210, 255, 0.2) !important; /* Líneas celestes entre descargas */
}
/* ==========================================================================
ESTILIZADO DE LOS BLOQUES DE DESCARGAS (Cajas Celestes Iluminadas)
========================================================================== */
/* 1. CONTENEDOR O CAJA DE CADA CATEGORÍA */
.content table,
.downloads-table,
.content div[class*="download"] {
background-color: rgba(5, 10, 15, 0.95) !important; /* Fondo oscuro profundo */
border: 2px solid #00d2ff !important; /* Borde exterior celeste neón */
border-radius: 10px !important; /* Esquinas redondeadas bien prolijas */
box-shadow: 0 0 15px rgba(0, 210, 255, 0.3) !important; /* Brillo celeste exterior */
margin-bottom: 25px !important; /* Separación ordenada entre bloques */
padding: 10px !important;
border-collapse: separate !important; /* Permite redondear las esquinas de la tabla */
width: 100% !important;
box-sizing: border-box !important;
}
/* 2. RELLENO Y BORDES INTERNOS PARA ORDENAR LOS TEXTOS */
.content table td {
padding: 15px 20px !important; /* Espaciado interno más amplio y cómodo */
border-bottom: 1px solid rgba(0, 210, 255, 0.15) !important; /* Línea sutil entre filas */
vertical-align: middle !important; /* Centrado vertical de textos y botones */
}
/* Quita la línea divisoria a la última fila para que no rompa el fondo */
.content table tr:last-child td {
border-bottom: none !important;
}
/* 3. MEJORA DE LOS TÍTULOS ADENTRO DEL BLOQUE (Client Downloads, etc.) */
.content table tr th,
.content td[colspan],
.content table thead {
background-color: rgba(0, 40, 70, 0.4) !important; /* Fondo celeste oscuro para el encabezado */
color: #00ffff !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
border-top-left-radius: 8px !important; /* Encaja con las esquinas redondeadas */
border-top-right-radius: 8px !important;
border-bottom: 2px solid #00d2ff !important;
}
/* ==========================================================================
PERSONAJE CENTRAL - CORRECCIÓN DE TAMAÑO Y ALTURA (-20%)
========================================================================== */
.ranking-background-magic {
position: absolute !important;
/* 🎯 20% MÁS ARRRIBA: Subido para que no se corte por debajo */
top: 16vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: -1 !important;
pointer-events: none !important;
text-align: center;
width: 100%;
}
.ranking-background-magic img {
width: auto !important;
/* 🎯 20% MÁS CHICO: Escala compactada para el balance visual perfecto */
height: 110vh !important;
max-width: 120vw !important;
object-fit: contain !important;
}
/* ==========================================================================
LOGO DE REGISTRO - 80% MÁS GRANDE Y DESPLAZADO A LA DERECHA
========================================================================== */
.registro-logo-izq {
position: absolute !important;
top: 150px !important; /* Mantiene la altura debajo de la barra del menú */
/* 🎯 CAMBIO A LA DERECHA: Quitamos el 'left' y usamos 'right' para empujarlo al otro extremo */
right: 80px !important;
left: auto !important; /* Resetea cualquier margen izquierdo previo */
z-index: 9999 !important; /* Se mantiene al frente de todo */
}
.registro-logo-izq img {
/* 🎯 80% MÁS GRANDE: Escalado para que se vea imponente y llene el espacio */
width: 395px !important;
height: auto !important;
display: block !important;
filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.6)); /* Brillo celeste neón potenciado */
}
/* ==========================================================================
LOGO CENTRAL DE DESCARGAS CON EFECTO FLOTANTE (MOVIDIZO)
========================================================================== */
.downloads-logo-centro-animado {
position: absolute !important;
top: 150px !important; /* Altura alineada con los otros logos */
left: 50% !important; /* Lo tira al medio de la pantalla */
transform: translateX(-50%) !important; /* Centrado matemático perfecto */
z-index: 9999 !important; /* Al frente de todo */
/* 🎯 EFECTO MOVIDIZO: Llama a la animación de abajo (3 segundos, infinito y suave) */
animation: flotarLogo 3s ease-in-out infinite;
}
.downloads-logo-centro-animado img {
width: 395px !important; /* Mismo tamaño gigante que el de registro (80% más grande) */
height: auto !important;
display: block !important;
filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.6)); /* Brillo celeste neón */
}
/* 🔄 PROGRAMACIÓN DEL MOVIMIENTO (Sube y baja suavemente) */
@keyframes flotarLogo {
0% {
transform: translate(-50__, 0px);
}
50% {
transform: translate(-50__, -15px); /* Sube 15 píxeles a la mitad del tiempo */
}
100% {
transform: translate(-50__, 0px); /* Vuelve a su posición inicial */
}
}
/* ==========================================================================
LOGO DE INFORMACIÓN - CENTRAL, COLOSAL (+95%) Y ANIMADO
========================================================================== */
.info-logo-izq-animado {
position: absolute !important;
top: 150px !important; /* Mantiene la altura debajo del menú */
/* 🎯 CAMBIO AL MEDIO: Quitamos el 'left' fijo y aplicamos centrado matemático */
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 9999 !important; /* Se mantiene al frente de todo */
/* 🔄 EFECTO MOVIDIZO: Mantiene la flotación combinada con el centrado */
animation: flotarLogoCentroInfo 3.5s ease-in-out infinite;
}
.info-logo-izq-animado img {
/* 🎯 95% MÁS GRANDE: Escalado gigante para ocupar el centro de la sección */
width: 770px !important;
height: auto !important;
display: block !important;
filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.7)); /* Brillo celeste neón amplificado */
}
/* 🔄 PROGRAMACIÓN DE LA ANIMACIÓN CENTRADA (No rompe el eje X al flotar) */
@keyframes flotarLogoCentroInfo {
0% {
transform: translate(-50%, 0px);
}
50% {
transform: translate(-50%, -15px); /* Sube suavemente 15 píxeles */
}
100% {
transform: translate(-50%, 0px);
}
}
/* ==========================================================================
FIRMA DE SHONIITHO-TM CORREGIDA (TEXTO CLARO Y SUBRAYADO NEÓN)
========================================================================== */
/* Limpiamos el contenedor del footer */
.footer, footer, .footer-text, .copyright {
text-align: center !important;
padding: 20px 0 !important;
background: transparent !important;
}
/* Aplicamos el diseño limpio directamente a las letras y enlaces para que NO se borren */
.footer p,
.footer span,
.footer div,
footer p,
.copyright,
.footer a,
footer a {
display: inline-block !important;
color: #00ffff !important; /* Celeste neón directo y bien sólido */
font-size: 13px !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
text-decoration: none !important;
/* 🎯 REMOVEMOS EL FILTRO TRANSPARENTE COMPLEJO PARA EVITAR QUE SE BORRE */
-webkit-background-clip: initial !important;
-webkit-text-fill-color: initial !important;
text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important; /* Brillo neón en las letras */
/* 🎯 2. SUBRAYADO CON LÍNEA CELESTE ILUMINADA */
border-bottom: 2px solid #00d2ff !important;
padding-bottom: 4px !important;
box-shadow: 0 4px 8px -3px rgba(0, 210, 255, 0.8) !important;
}
/* Efecto opcional al pasar el mouse por encima de tu firma */
.footer a:hover, footer a:hover {
color: #ffffff !important;
text-shadow: 0 0 15px #00ffff !important;
border-bottom-color: #ffffff !important;
}
/* ==========================================================================
LOGO MINI INTERNO - FIJO ABAJO A LA IZQUIERDA (SIN PEGARSE AL BORDE)
========================================================================== */
.logo-mini-inferior-izq {
/* 🎯 CAMBIO CLAVE: Usamos 'fixed' para obligarlo a ir al ras de la pantalla inferior */
position: fixed !important;
/* 🎯 AJUSTE DE SEPARACIÓN: Le damos más margen para que no quede tan pegado */
bottom: 25px !important; /* Lo sube un poco más para que respire */
left: 25px !important; /* Lo separa del borde izquierdo de la pantalla */
z-index: 99999 !important; /* Forzado al frente absoluto por encima de todo */
pointer-events: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px;
}
.logo-mini-inferior-izq img {
width: 120px !important; /* Mantiene el tamaño chico del GIF */
height: auto !important;
display: block !important;
filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.6)); /* Brillo celeste */
}
/* Estilo para las letras "Powered by Zeryon" */
.powered-by-text {
color: #00ffff !important;
font-size: 10px !important;
font-family: Arial, sans-serif !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important; /* Letras un toque más separadas y estéticas */
text-shadow: 0 0 8px rgba(0, 255, 255, 0.9) !important;
white-space: nowrap !important;
}
/* ==========================================================================
PLUGIN DE TIKTOK LIVE - FLOTANTE FIJO EN LA ESQUINA INFERIOR DERECHA
========================================================================== */
/* Contenedor del Bloque Cuadrado Congelado Flotante */
.tiktok-live-box {
/* 🎯 CAMBIO CLAVE: Usamos 'fixed' para que flote en la pantalla sin moverse al scrollear */
position: fixed !important;
/* 🎯 UBICACIÓN INFERIOR DERECHA: Separado del borde para que respire de forma estética */
bottom: 25px !important; /* Altura simétrica alineada con el de la izquierda */
right: 25px !important; /* Pegado del lado derecho de la pantalla */
left: auto !important; /* Resetea márgenes izquierdos */
background: rgba(10, 25, 40, 0.45) !important; /* Fondo azul oscuro traslúcido */
backdrop-filter: blur(10px) !important; /* 🔥 EFECTO CONGELADO (Hielo/Cristal esmerilado) */
-webkit-backdrop-filter: blur(10px) !important;
border: 2px solid #00d2ff !important; /* Borde celeste neón */
border-radius: 12px !important; /* Esquinas redondeadas suaves */
padding: 15px !important;
width: 110px !important; /* Un toque más compacto para que no moleste al flotar */
height: 110px !important;
box-shadow: 0 0 15px rgba(0, 210, 255, 0.3),
inset 0 0 10px rgba(255, 255, 255, 0.1) !important; /* Brillo interno de hielo */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
box-sizing: border-box !important;
font-family: 'Segoe UI', Arial, sans-serif !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
z-index: 999999 !important; /* Al frente absoluto por encima de todo */
}
/* Efecto hover al pasar el mouse por encima */
.tiktok-live-box:hover {
transform: translateY(-5px) scale(1.05) !important; /* Sube un poquito al pasar el mouse */
border-color: #00ffff !important;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.6) !important;
}
/* El ícono de TikTok central */
.live-tiktok-icon {
width: 35px !important; /* Tamaño adaptado al nuevo recuadro */
height: auto !important;
margin-bottom: 8px !important;
filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}
/* Contenedor de la etiqueta LIVE y la luz roja */
.live-status-container {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
/* Texto LIVE */
.live-text {
color: #ffffff !important;
font-size: 12px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
}
/* 🔴 EL PUNTO ROJO REDONDO PALPITANTE */
.live-dot {
width: 9px !important;
height: 9px !important;
background-color: #ff0050 !important;
border-radius: 50% !important;
animation: palparLive 1.2s ease-in-out infinite !important;
}
/* 🔄 PROGRAMACIÓN DE LA LUZ PALPITANTE */
@keyframes palparLive {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 0, 80, 0.8);
}
70% {
transform: scale(1.1);
box-shadow: 0 0 0 8px rgba(255, 0, 80, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 0, 80, 0);
}
}
/* ==========================================================================
ESTILO INDESTRUCTIBLE DE COLUMNAS DE BOOTSTRAP PARA MÓVILES (COMPLETO)
========================================================================== */
@media (max-width: 991px) {
/* 🎯 1. LAS COLUMNAS DE LA WEB PASAN A SER VERTICALES (UNA ABAJO DE LA OTRA) */
.row, .content .row, body, html, .wrapper {
display: flex !important;
flex-direction: column !important; /* Apila el contenido principal arriba y el lateral abajo */
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
/* Fuerza a que el bloque izquierdo (Noticias/Módulos) ocupe todo el ancho */
.col-xs-8, .col-sm-8, div[class*="col-xs-8"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
/* Fuerza a que la barra lateral derecha (Rankings, Redes, Menús) baje y ocupe todo el ancho */
.col-xs-4, .col-sm-4, div[class*="col-xs-4"], .sidebar {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 15px !important;
margin-top: 30px !important; /* Deja una separación limpia abajo de las noticias */
box-sizing: border-box !important;
}
/* Ocultar los logos gigantes flotantes que tapan la pantalla del móvil */
.registro-logo-izq,
.downloads-logo-centro-animado,
.info-logo-izq-animado,
.ranking-background-magic {
display: none !important;
}
/* 🎯 2. CORRECCIÓN DIRECTA PARA LOS BOTONES Y REDES DE LA BARRA LATERAL */
.sidebar div,
.col-xs-4 div,
.newsBlock,
div[class*="Button"] {
width: 100% !important;
max-width: 100% !important;
float: none !important;
box-sizing: border-box !important;
}
/* Hace que cada botón de ranking o red social sea una barra ancha y centrada */
.sidebar a,
.col-xs-4 a,
div[class*="Button"] a {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
max-width: 320px !important; /* Ancho perfecto para celular */
height: 48px !important; /* Altura delgada y prolija */
margin: 8px auto !important; /* Los separa y los centra al medio */
float: none !important;
box-sizing: border-box !important;
border-radius: 6px !important;
text-align: center !important;
}
/* Evita que los textos internos se rompan o se pisen */
.sidebar a span,
.col-xs-4 a span,
div[class*="Button"] a strong {
font-size: 12px !important;
display: inline-block !important;
margin: 0 !important;
white-space: nowrap !important;
}
/* Acomodar el logo de Zeryon abajo de todo quieto */
.logo-mini-inferior-izq {
position: relative !important;
bottom: auto !important;
left: auto !important;
margin: 20px auto !important;
display: flex !important;
justify-content: center !important;
}
/* 🎯 AJUSTE DE TIKTOK EN EL CELULAR: Ahora sí va a flotar a la derecha y te va a seguir */
.tiktok-live-box {
position: fixed !important; /* Cambiado a fixed para que flote en el celular */
bottom: 20px !important; /* Separado un poquito del suelo del celular */
right: 20px !important; /* Pegado a la derecha en la pantalla del celular */
left: auto !important;
margin: 0 !important;
width: 95px !important; /* Un tamaño un poco más compacto para que no tape las noticias en teléfonos */
height: 95px !important;
display: flex !important;
z-index: 999999 !important; /* Se mantiene arriba de todo en el celular */
}
/* 🎯 3. AJUSTE DE CAJAS DE LOGIN Y REGISTRO EN EL MÓVIL */
.login-box,
.register-box,
.account-box,
[id*="login"],
[id*="register"],
.sidebar form {
width: 100% !important;
max-width: 320px !important; /* Fuerza el tamaño chico prolijo */
margin: 15px auto !important; /* Los centra al medio de la pantalla */
padding: 15px 20px !important; /* Achica márgenes internos */
box-sizing: border-box !important;
}
/* Fuerza a que las filas internas del login sigan en línea recta */
.form-horizontal .form-group,
.form-group {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
}
/* Asegura que el botón de Sign In quede centrado */
.form-horizontal button[type="submit"],
.form-horizontal .btn-primary,
.btn-submit {
width: auto !important;
min-width: 130px !important;
margin: 10px auto 0 auto !important;
display: block !important;
}
}
/* Centrado del reloj en la portada */
.seccion-reloj-lanzamiento {
display: flex !important;
justify-content: center !important;
margin: 40px auto !important;
width: 100% !important;
}
.your-clock-new {
display: flex !important;
justify-content: center !important;
margin: 0 auto !important;
max-width: 600px !important;
}
/* Forzar el color de las cajas */
.flip-clock-wrapper ul li a div div.inn {
background-color: rgba(5, 15, 25, 0.9) !important;
color: #00ffff !important;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.8) !important;
border: 1px solid #00d2ff !important;
}
/* Forzar las etiquetas en Español anulando los fondos viejos */
.flip-clock-wrapper .flip-clock-divider .flip-clock-label {
color: #8ae5ff !important;
text-transform: uppercase !important;
font-weight: bold !important;
letter-spacing: 2px !important;
text-shadow: 0 0 5px rgba(0, 210, 255, 0.6) !important;
background: none !important; /* Limpia el cartel en inglés */
font-size: 11px !important;
width: 100% !important;
text-align: center !important;
}
/* ==========================================================================
NUEVO CUADRO DE RANKING DE RESETS - HOME CENTRADO
========================================================================== */
.home-rank-box {
background-color: rgba(5, 10, 15, 0.85) !important; /* Fondo oscuro idéntico al Top Level */
border: 1px solid rgba(0, 210, 255, 0.3) !important; /* Borde celeste sutil */
border-radius: 6px !important;
padding: 15px !important;
box-shadow: 0 0 15px rgba(0, 210, 255, 0.15) !important;
box-sizing: border-box !important;
margin-bottom: 20px;
}
/* Fila de título superior del cuadro */
.home-rank-title {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
border-bottom: 2px solid #00d2ff !important; /* Línea celeste iluminada */
padding-bottom: 8px !important;
margin-bottom: 12px !important;
}
.home-rank-title span {
color: #ffffff !important;
font-weight: bold !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
/* El botoncito "+" de la esquina del título */
.btn-more-rank {
background: #002b36 !important;
border: 1px solid #00d2ff !important;
color: #00ffff !important;
border-radius: 4px !important;
width: 20px !important;
height: 20px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: bold !important;
}
.btn-more-rank:hover {
background: #00d2ff !important;
color: #000000 !important;
box-shadow: 0 0 8px #00ffff !important;
}
/* Estilos de la tabla interna */
.home-rank-table {
width: 100% !important;
border-collapse: collapse !important;
}
.home-rank-table th {
color: #8ae5ff !important; /* Texto celeste suave para los encabezados */
font-size: 12px !important;
font-weight: bold !important;
padding: 6px 4px !important;
text-align: left !important;
}
.home-rank-table td {
color: #ffffff !important;
font-size: 13px !important;
padding: 8px 4px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* Resalte en los nombres de los personajes activos */
.char-link-active {
color: #00ffff !important; /* Nombre celeste neón sólido */
text-decoration: none !important;
font-weight: bold !important;
}
.char-link-active:hover {
text-decoration: underline !important;
}
/* Color para la columna numérica de los Resets */
.reset-value-color {
color: #00ffff !important;
font-weight: bold !important;
}
/* Ajuste de color celeste para el cuadro del medio en el sidebar */
.custom-resets-home .panel-heading .panel-title {
color: #00ffff !important;
text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
}
.custom-resets-home .table td a {
color: #00ffff !important;
font-weight: bold;
}
/* ==========================================================================
BANNER DE REGISTRO CON EFECTO DE BRILLO NEÓN FLUIDO (MÉTODO ULTRA SEGURO)
========================================================================== */
/* 1. OCULTAMOS LA IMAGEN ESTÁTICA ORIGINAL */
.sidebar-banner-join img,
[class*="banner-join"] img,
a:has(> img[src*="sidebar_banner_join"]) img {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
}
/* 2. FORZAMOS EL GIF DE FONDO DIRECTO EN LA CAJA PRINCIPAL */
.sidebar-banner-join,
[class*="banner-join"],
a:has(> img[src*="sidebar_banner_join"]) {
display: block !important;
position: relative !important;
/* Inyección directa del GIF sin capas intermedias */
background-image: url("../img/sidebar_banner_join.gif") !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
/* Medidas obligatorias aseguradas */
width: 100% !important;
height: 140px !important;
margin: 25px auto !important;
padding: 0 !important;
/* Esquinas redondeadas y borde base */
border: 2px solid #00ffff !important;
border-radius: 8px !important;
overflow: hidden !important;
/* 🎯 EFECTO DE BRILLO EN LUGAR DEL GIRO: Animación de pulsación neón continua */
animation: brilloNeonFluido 2.5s ease-in-out infinite alternate !important;
transition: all 0.3s ease !important;
}
/* 🔄 PROGRAMACIÓN DE LA PULSACIÓN DE LUZ (Efecto respiración neón) */
@keyframes brilloNeonFluido {
0% {
box-shadow: 0 0 8px rgba(0, 210, 255, 0.4),
inset 0 0 6px rgba(0, 210, 255, 0.2) !important;
border-color: #00a8cc !important;
}
100% {
box-shadow: 0 0 22px rgba(0, 255, 255, 0.85),
inset 0 0 12px rgba(0, 255, 255, 0.4) !important;
border-color: #00ffff !important;
}
}
/* 3. EFECTO AL PASAR EL MOUSE (HOVER) */
.sidebar-banner-join:hover,
[class*="banner-join"]:hover,
a:has(> img[src*="sidebar_banner_join"]):hover {
transform: scale(1.02) !important;
filter: brightness(1.1) !important;
}
/* ==========================================================================
QUITAR MARCO RECTANGULAR EXCLUSIVAMENTE AL LOGO CHICO SUPERIOR IZQUIERDO
========================================================================== */
.logo,
.logo a,
.logo a img,
.topPanel-wrapper > .logo,
.topPanel-wrapper .logo a,
header .logo a {
/* 🎯 REMOVEMOS EL MARCO RECTANGULAR POR COMPLETO */
border: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
/* Reseteamos espacios para que no se deforme */
padding: 0 !important;
margin: 0 !important;
}
/* Ajuste fino para que el logo se vea nítido y con un brillo celeste sutil suelto */
.logo img,
.topPanel-wrapper .logo img {
height: 40px !important; /* Altura prolija para que alinee con los botones */
width: auto !important;
display: inline-block !important;
border: none !important;
box-shadow: none !important;
filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.6)) !important; /* Brillo neón flotante */
}
/* ==========================================================================
DISEÑO EXCLUSIVO PARA EL APARTADO DE RESETS EN EL SIDEBAR
========================================================================== */
.custom-resets-home .panel-heading .panel-title {
color: #00ffff !important;
text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
}
.custom-resets-home .table td a {
color: #00ffff !important;
font-weight: bold !important;
text-shadow: 0 0 4px rgba(0, 255, 255, 0.2) !important;
}
/* ==========================================================================
FORZAR RENDERIZADO DEL TOP RESETS EN LA PORTADA PRINCIPAL
========================================================================== */
.custom-resets-home,
[class*="resets-home"],
div:has(> .table-condensed) + div {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
margin-bottom: 25px !important;
}
/* Aplicamos el look celeste neón que combine con tu tabla de ADMIN */
.custom-resets-home .panel-heading,
[class*="resets-home"] .panel-heading {
border-bottom: 2px solid #00d2ff !important;
padding-bottom: 8px !important;
}
.custom-resets-home .panel-title,
[class*="resets-home"] .panel-title {
color: #00ffff !important;
font-weight: bold !important;
text-transform: uppercase !important;
text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
}
.custom-resets-home .table td,
[class*="resets-home"] .table td {
color: #ffffff !important;
font-size: 13px !important;
}
/* Nombre del personaje con más resets brillante */
.custom-resets-home .table td a,
[class*="resets-home"] .table td a {
color: #00ffff !important;
font-weight: bold !important;
text-shadow: 0 0 4px rgba(0, 255, 255, 0.3) !important;
}
/* Soporte visual para el cuadro de resets en el home */
.custom-resets-home .panel-title {
color: #00ffff !important;
text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
}
.custom-resets-home .table td a {
color: #00ffff !important;
font-weight: bold !important;
}
/* ==========================================================================
MÓDULO DE ARENA HORIZONTAL - REPLICA FIEL DE LA FOTO DE REFERENCIA
========================================================================== */
.arena-siege-global-container {
width: 100% !important;
max-width: 1140px !important;
margin: 40px auto !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
.arena-siege-wrapper {
background: rgba(8, 18, 30, 0.45) !important; /* Fondo translúcido */
backdrop-filter: blur(10px) !important; /* Efecto hielo esmerilado */
-webkit-backdrop-filter: blur(10px) !important;
border: 2px solid rgba(0, 210, 255, 0.4) !important; /* Marco exterior neón */
border-radius: 12px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 35px 20px !important;
position: relative !important;
overflow: visible !important;
box-shadow: 0 0 25px rgba(0, 210, 255, 0.2) !important;
}
/* Columnas de Texto de los Costados (Guild Owner / Master) */
.arena-siege-column {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
z-index: 5 !important;
}
/* Etiquetas superiores (GUILD OWNER y GUILD MASTER) */
.arena-title-tag {
color: #ffffff !important;
font-size: 14px !important;
font-weight: bold !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
opacity: 0.9 !important;
}
/* Línea de reflejo difuminada azul abajo del título (Igual a la foto) */
.arena-divider-line {
width: 120px !important;
height: 3px !important;
background: radial-gradient(circle, #00ffff 0%, transparent 80%) !important;
margin: 8px auto 15px auto !important;
box-shadow: 0 0 8px #00ffff !important;
}
/* Nombres de los Personajes Destacados */
.arena-char-name {
color: #ffffff !important;
font-size: 22px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
text-decoration: none !important;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
transition: all 0.2s ease !important;
}
.arena-char-name:hover {
color: #00ffff !important;
text-shadow: 0 0 15px #00ffff !important;
}
/* Estadísticas de abajo en Celeste Neón */
.arena-char-stats {
color: #00ffff !important;
font-size: 13px !important;
font-weight: bold !important;
letter-spacing: 1px !important;
margin-top: 6px !important;
text-shadow: 0 0 6px rgba(0, 255, 255, 0.6) !important;
}
/* 🏰 BLOQUE CENTRAL: EL ESCUDO CUADRADO */
.arena-siege-center-shield {
width: 150px !important;
height: 150px !important;
background: #040d1a !important;
border: 3px solid #ffffff !important; /* Marco interno blanco sólido como la foto */
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
margin: 0 30px !important;
z-index: 10 !important;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2) !important;
}
/* Imagen del logo adentro del cuadro central */
.arena-center-logo {
width: 85px !important;
height: auto !important;
display: block !important;
filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.4)) !important;
margin-bottom: 5px !important;
}
/* Texto del cronómetro de abajo del todo */
.arena-timer-text {
position: absolute !important;
bottom: -45px !important; /* Lo tira abajo del cuadro igual a la foto */
left: 50% !important;
transform: translateX(-50%) !important;
color: #ffffff !important;
font-size: 11px !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
white-space: nowrap !important;
line-height: 1.4 !important;
}
.arena-timer-text b {
color: #ffd700 !important; /* Texto de la hora en dorado/amarillo premium */
font-size: 12px !important;
}
/* Adaptación para celulares (Se apilan de forma ordenada) */
@media (max-width: 768px) {
.arena-siege-wrapper {
flex-direction: column !important;
gap: 40px !important;
padding-bottom: 60px !important;
}
.arena-siege-center-shield {
order: -1 !important; /* Sube el escudo arriba en el celular */
margin-bottom: 10px !important;
}
}
/* ==========================================================================
CORRECCIÓN QUIRÚRGICA: LIMPIEZA DE ENLACES EN EL MÓDULO DE ARENA SIEGE
========================================================================== */
/* 🎯 1. REMOVEMOS EL MARCO RECTANGULAR VIEJO DE LOS NOMBRES */
.arena-siege-column a.arena-char-name,
.arena-siege-column .arena-char-name,
[class*="arena-siege"] .arena-char-name {
border: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
/* Reseteamos los espacios para que vuelvan a su tamaño nativo */
padding: 0 !important;
margin: 10px auto !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
/* Estilo de la letra original de la foto */
color: #ffffff !important;
font-size: 26px !important; /* Letra imponente y más grande */
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.5) !important;
}
/* Efecto opcional cuando pasás el mouse por encima de ADMIN o VACANTE */
.arena-siege-column a.arena-char-name:hover {
color: #00ffff !important;
text-shadow: 0 0 18px #00ffff !important;
}
/* 🎯 2. RE-CALIBRACIÓN DE LAS ESTADÍSTICAS DE ABAJO (RESETS) */
.arena-char-stats,
[class*="arena-char-stats"] {
display: block !important;
color: #00ffff !important; /* Celeste neón sólido */
font-size: 14px !important;
font-weight: bold !important;
letter-spacing: 1.5px !important;
margin-top: 5px !important;
text-shadow: 0 0 8px rgba(0, 255, 255, 0.7) !important;
}
/* ==========================================================================
AMPLIACIÓN DEL LOGO CENTRAL DEL CASTLE SIEGE (+20% MÁS GRANDE)
========================================================================== */
/* 🎯 1. AMPLIAMOS EL CONTENEDOR BLANCO PARA DARLE ESPACIO AL NUEVO TAMAÑO */
.arena-siege-center-shield {
width: 175px !important; /* Ampliado para albergar el logo más grande */
height: 175px !important; /* Mantiene la proporción cuadrada exacta */
margin: 0 25px !important;
}
/* 🎯 2. AGRANDAMOS LA IMAGEN DEL LOGO UN 20% */
.arena-center-logo {
width: 105px !important; /* Escala un 20% más grande que el tamaño anterior */
height: auto !important;
margin-bottom: 2px !important;
filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5)) !important; /* Brillo celeste neón amplificado */
}
/* 🎯 3. BAJAMOS EL TEXTO DEL CRONÓMETRO PARA QUE NO SE PEGUE AL MARCO */
.arena-timer-text {
bottom: -50px !important; /* Ajustado para el nuevo tamaño del cuadro */
}
/* ==========================================================================
ESTILIZADO DEFINITIVO DE LA ARENA (TEXTO INTERNO DORADO Y SIN MARCOS)
========================================================================== */
/* 🎯 1. RE-CALIBRACIÓN DEL TEXTO CENTRAL "GUILD GANADOR" */
.arena-winner-title-tag {
color: #ffd700 !important; /* Dorado premium para el ganador */
font-size: 11px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
text-align: center !important;
margin-top: 5px !important;
text-shadow: 0 0 6px rgba(255, 215, 0, 0.4) !important;
display: block !important;
width: 100% !important;
}
/* 🎯 2. ELIMINACIÓN ABSOLUTA DE LAS LETRAS AMARILLAS VIEJAS DE ABAJO */
.arena-timer-text {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* ==========================================================================
RE-APILADO DEL REPRODUCTOR FLOTANTE A LA DERECHA (ARRIBA DE TIKTOK)
========================================================================== */
/* 1. RESTAURAMOS TU LOGO MINI ANIMADO IZQUIERDO DE RAÍZ */
.logo-mini-inferior-izq {
display: flex !important;
position: fixed !important;
bottom: 25px !important;
left: 25px !important;
right: auto !important;
align-items: center !important;
gap: 10px !important;
z-index: 999999 !important;
}
/* 2. REPRODUCTOR DE SONIDO: SE MUEVE A LA DERECHA ARRIBA DE TIKTOK */
.mu-music-player-box {
position: fixed !important;
/* 🎯 CLAVE: bottom 145px lo clava justo encima de la caja de TikTok (que mide 110px) */
bottom: 145px !important;
right: 25px !important; /* Pegado a la derecha en la botonera */
left: auto !important;
background: rgba(10, 25, 40, 0.45) !important;
backdrop-filter: blur(10px) !important; /* Efecto hielo */
-webkit-backdrop-filter: blur(10px) !important;
border: 2px solid #00d2ff !important;
border-radius: 12px !important;
padding: 15px !important;
width: 110px !important; /* Tamaño idéntico a TikTok */
height: 110px !important;
box-shadow: 0 0 15px rgba(0, 210, 255, 0.3),
inset 0 0 10px rgba(255, 255, 255, 0.1) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
box-sizing: border-box !important;
z-index: 999999 !important;
transition: all 0.3s ease !important;
}
.mu-music-player-box:hover {
transform: translateY(-5px) scale(1.05) !important;
border-color: #00ffff !important;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.6) !important;
}
/* Botonera interna */
.music-play-btn {
width: 35px !important;
height: 35px !important;
margin-bottom: 8px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
cursor: pointer !important;
}
.music-play-btn svg {
width: 25px !important;
height: 25px !important;
filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}
.music-status-container { display: flex !important; align-items: center !important; gap: 6px !important; }
.music-text { color: #ffffff !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase !important; }
.music-state-on { color: #00ffcc !important; font-size: 11px !important; font-weight: 900 !important; text-shadow: 0 0 8px #00ffcc !important; }
.music-state-off { color: #ff0050 !important; font-size: 11px !important; font-weight: 900 !important; text-shadow: 0 0 8px #ff0050 !important; }
/* 3. ADAPTACIÓN MÓVIL (Se apilan centrados abajo en el celular de forma prolija) */
@media (max-width: 991px) {
.mu-music-player-box {
position: relative !important;
bottom: auto !important;
right: auto !important;
margin: 15px auto !important;
width: 100px !important;
height: 100px !important;
display: flex !important;
}
}
/* ==========================================================================
AJUSTE DE TAMAÑO PARA EL NUEVO ESCUDO CON ESPADAS (ARENA)
========================================================================== */
.arena-center-logo {
width: 115px !important; /* Ajusta el ancho para que luzcan las espadas */
height: auto !important; /* Mantiene la proporción original para que no se estire */
max-height: 115px !important;
object-fit: contain !important;
margin-bottom: 5px !important;
filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.6)) !important; /* Brillo celeste neón potenciado */
}
/* Centrado perfecto adentro del cuadro blanco */
.arena-siege-center-shield {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding: 10px !important;
box-sizing: border-box !important;
}
/* ==========================================================================
CORRECCIÓN DE HOVER EN BOTONES SUPERIORES (QUITA EL COLOR CIAN SÓLIDO)
========================================================================== */
/* 🎯 CORRECCIÓN QUIRÚRGICA: Al pasar el mouse, NO se pinta el fondo de color sólido */
.menu ul li a[href*="downloads"]:hover,
.menu ul li a[href*="register"]:hover,
.menu ul li a[href*="donation"]:hover,
a[href*="downloads"]:hover,
a[href*="register"]:hover {
background-color: rgba(5, 15, 25, 0.85) !important; /* Mantiene el fondo oscuro transparente premium */
color: #ffffff !important; /* Las letras principales se vuelven blancas nítidas */
border-color: #00ffff !important; /* El borde brilla en celeste neón */
box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(0, 255, 255, 0.2) !important; /* Brillo neón expandido */
text-shadow: 0 0 8px #00ffff !important;
}
/* Forzar que los textos internos (como "GAME CLIENT" o "REGISTRATE WACHIN") sigan siendo visibles */
.menu ul li a:hover span,
.menu ul li a:hover strong {
color: #8ae5ff !important; /* Texto secundario en celeste suave */
text-shadow: 0 0 5px rgba(0, 210, 255, 0.5) !important;
}
/* ==========================================================================
INTERCAMBIO DE COLORES: FACEBOOK CELESTE NEÓN Y DISCORD NEGRO PREMIUM
========================================================================== */
/* 🎯 1. BOTÓN DE FACEBOOK: Ahora se viste con el Celeste Neón Insignia */
.menu ul li a[href*="facebook"],
a[href*="facebook"],
[class*="facebook-box"],
div:has(> a[href*="facebook"]) {
background-color: rgba(5, 15, 25, 0.6) !important; /* Fondo translúcido */
border: 2px solid #00d2ff !important; /* Borde celeste iluminado */
border-radius: 4px !important;
box-shadow: inset 0 0 8px rgba(0, 210, 255, 0.2), 0 0 8px rgba(0, 210, 255, 0.2) !important;
transition: all 0.3s ease !important;
}
/* Efecto Hover para Facebook Celeste */
.menu ul li a[href*="facebook"]:hover,
a[href*="facebook"]:hover {
background-color: rgba(0, 210, 255, 0.2) !important;
border-color: #00ffff !important;
box-shadow: 0 0 15px rgba(0, 255, 255, 0.6) !important;
color: #ffffff !important;
}
/* 🎯 2. BOTÓN DE DISCORD: Ahora se viste de Negro Mate Helado */
.menu ul li a[href*="discord"],
a[href*="discord"],
[class*="discord-box"],
div:has(> a[href*="discord"]) {
background-color: rgba(0, 0, 0, 0.9) !important; /* Fondo negro sólido y oscuro */
border: 2px solid #333333 !important; /* Borde gris oscuro/negro prolijo */
border-radius: 4px !important;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05) !important;
transition: all 0.3s ease !important;
}
/* Efecto Hover para Discord Negro (Se ilumina sutilmente al pasar el mouse) */
.menu ul li a[href*="discord"]:hover,
a[href*="discord"]:hover {
background-color: #111111 !important;
border-color: #555555 !important;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
}
/* ==========================================================================
ELIMINACIÓN QUIRÚRGICA DE LA CABECERA DE NOTICIAS DE LA PLANTILLA
========================================================================== */
/* 🎯 1. BORRAMOS LA FRANJA COMPLETA DE LATEST NEWS Y MORE DE LA PANTALLA */
.home-news-block-header,
div[class*="home-news-block-header"],
.home-news-block-header .col-xs-8,
.home-news-block-header .col-xs-4 {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
border: none !important;
}
/* 🎯 2. ANULAMOS EL TÍTULO H2 ESPECÍFICO POR SI INTENTA ASOMARSE */
.home-news-block-header h2 {
display: none !important;
font-size: 0 !important;
}
/* ==========================================================================
ELIMINACIÓN DEL CUERPO DE NOTICIAS SECUNDARIAS DE LA PORTADA
========================================================================== */
/* 🎯 1. OCULTAMOS EL CUERPO COMPLETO CON LA FRANJA CELESTE DE NOTICE */
.home-news-block-body,
div[class*="home-news-block-body"],
.home-news-block-article,
.home-news-block {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
border: none !important;
}
/* 🎯 2. ANULAMOS ETIQUETAS INTERNAS POR SI QUEDAN RESIDUOS VISUALES */
.home-news-block-article-type,
.home-news-block-article-title-container {
display: none !important;
}
/* ==========================================================================
WIDGET BANNER DE VIDEO GIGANTE HORIZONTAL (HERO2)
========================================================================== */
.video-hero-home-container {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 20px auto 30px auto !important; /* Margen perfecto para que no se pegue a las tablas de abajo */
padding: 0 !important;
background: rgba(10, 25, 40, 0.45) !important; /* Base oscura translúcida */
backdrop-filter: blur(10px) !important; /* Efecto hielo esmerilado */
-webkit-backdrop-filter: blur(10px) !important;
border: 2px solid #00d2ff !important; /* Marco celeste neón identico al login */
border-radius: 12px !important; /* Esquinas redondeadas premium */
box-shadow: 0 0 18px rgba(0, 210, 255, 0.25) !important;
overflow: hidden !important; /* Clava el video adentro sin que se salgan las esquinas */
box-sizing: border-box !important;
}
/* El elemento de video real adentro del cuadro */
.video-hero-asset {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover !important; /* Estira el video cubriendo todo el ancho de forma fluida */
opacity: 0.9 !important; /* Toque sutil para integrarse con el fondo de la web */
transition: all 0.3s ease !important;
}
/* Efecto interactivo si pasan el mouse por encima del video */
.video-hero-home-container:hover {
border-color: #00ffff !important;
box-shadow: 0 0 25px rgba(0, 255, 255, 0.5) !important;
}
.video-hero-home-container:hover .video-hero-asset {
opacity: 1 !important; /* Se ilumina al 100% al pasar el cursor */
}
.video-hero-home-container {
width: 100% !important;
max-width: 1140px !important; /* Mismo ancho simétrico que tu plantilla */
height: auto !important;
margin: 20px auto 30px auto !important; /* Espacio prolijo arriba y abajo */
background: rgba(10, 25, 40, 0.45) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 2px solid #00d2ff !important;
border-radius: 12px !important;
box-shadow: 0 0 18px rgba(0, 210, 255, 0.25) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.video-hero-asset {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover !important;
}
/* ==========================================================================
ESTABILIZACIÓN DE HOVER DEL BANNER GIF (EVITA QUE DESAPAREZCA)
========================================================================== */
/* 🎯 FUERZA A QUE EL GIF SIGA AL FRENTE Y VISIBLE CUANDO PASAN EL MOUSE */
.sidebar-banner-join:hover::after,
[class*="banner-join"]:hover::after,
a:has(> img[src*="sidebar_banner_join"]):hover::after {
content: "" !important;
position: absolute !important;
top: 2px !important;
left: 2px !important;
width: calc(100% - 4px) !important;
height: 136px !important;
display: block !important;
border-radius: 6px !important;
/* Re-inyectamos el archivo asegurando que no se borre */
background-image: url("../img/sidebar_banner_join.gif") !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
/* Le damos un toque de luz suave en lugar de borrarlo */
filter: brightness(1.15) !important;
z-index: 3 !important;
}
/* Evitamos que el contenedor madre cambie su fondo al pasar el mouse */
.sidebar-banner-join:hover,
[class*="banner-join"]:hover,
a:has(> img[src*="sidebar_banner_join"]):hover {
background: #051019 !important; /* Mantiene el fondo oscuro base */
border-color: #00ffff !important; /* El borde neón brilla más fuerte */
box-shadow: 0 0 25px rgba(0, 255, 255, 0.6) !important;
}
.usercp-siege-global-container {
background: rgba(8, 18, 30, 0.45) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 2px solid rgba(0, 210, 255, 0.4) !important;
border-radius: 12px !important;
padding: 30px 20px !important;
width: 100% !important;
max-width: 1140px !important;
margin: 30px auto !important;
box-shadow: 0 0 25px rgba(0, 210, 255, 0.2) !important;
box-sizing: border-box !important;
}
.usercp-siege-header { text-align: center !important; margin-bottom: 25px !important; }
.usercp-siege-header h2 { color: #ffffff !important; font-size: 20px !important; font-weight: 900 !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-shadow: 0 0 10px rgba(0, 255, 255, 0.7) !important; margin: 0 0 8px 0 !important; }
.linea-neon-usercp { width: 120px !important; height: 3px !important; background: #00ffff !important; margin: 0 auto !important; box-shadow: 0 0 8px #00ffff !important; border-radius: 2px !important; }
.usercp-siege-grid {
display: flex !important;
flex-direction: row !important; /* Fuerza la fila horizontal recta */
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important; /* Si se agregan más módulos a futuro bajan alineados */
gap: 15px !important; /* Separación fija entre cubos */
width: 100% !important;
}
.usercp-card-cube {
display: flex !important;
flex-direction: column !important; /* Icono arriba, texto abajo */
justify-content: center !important;
align-items: center !important;
text-align: center !important;
width: 110px !important;
height: 110px !important;
padding: 10px !important;
box-sizing: border-box !important;
background: rgba(5, 15, 25, 0.8) !important;
border: 1px solid rgba(0, 210, 255, 0.3) !important;
border-radius: 12px !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
}
.usercp-cube-img { width: 32px !important; height: 32px !important; margin: 0 auto 8px auto !important; display: block !important; filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.4)) !important; }
.usercp-card-cube span { color: #ffffff !important; font-size: 10px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.2 !important; }
.usercp-card-cube:hover { transform: translateY(-4px) scale(1.05) !important; border-color: #00ffff !important; box-shadow: 0 0 18px rgba(0, 255, 255, 0.5) !important; }
.usercp-card-cube:hover span { color: #00ffff !important; text-shadow: 0 0 5px #00ffff !important; }
/* ==========================================================================
DROPDOWN DESPLEGABLE VERTICAL EN LA BARRA DEL HOME (ESTILO RANKING CENTRADO)
========================================================================== */
.usercp-dropdown-wrapper {
position: relative !important;
display: inline-block !important;
}
/* El cuadro flotante oculto por defecto */
.usercp-dropdown-menu-box {
position: absolute !important;
top: 100% !important;
right: 0 !important;
width: 210px !important;
height: auto !important;
margin-top: 12px !important;
padding: 12px !important;
/* Efecto Hielo Esmerilado y Borde Celeste Neón */
background: rgba(4, 12, 22, 0.96) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 2px solid #00d2ff !important;
border-radius: 8px !important;
box-shadow: 0 0 25px rgba(0, 210, 255, 0.45) !important;
box-sizing: border-box !important;
z-index: 9999999 !important;
/* Transición de deslizamiento suave */
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) !important;
transition: all 0.3s ease-in-out !important;
}
/* 🔥 AL PASAR EL MOUSE POR EL ENLACE, EL MENÚ SE DESPLIEGA SOLO ACÁ MISMO */
.usercp-dropdown-wrapper:hover .usercp-dropdown-menu-box {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* Filas individuales del menú vertical */
.usercp-dropdown-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
padding: 8px 12px !important;
margin-bottom: 5px !important;
box-sizing: border-box !important;
text-decoration: none !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
transition: all 0.2s ease !important;
}
.usercp-dropdown-item:last-child { margin-bottom: 0 !important; }
/* Íconos miniatura */
.usercp-drop-img {
width: 18px !important;
height: 18px !important;
display: block !important;
filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.5)) !important;
}
/* Texto de cada opción */
.usercp-dropdown-item span {
color: #ffffff !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* Efecto hover en las opciones */
.usercp-dropdown-item:hover {
background: rgba(0, 210, 255, 0.15) !important;
border-color: rgba(0, 255, 255, 0.6) !important;
padding-left: 16px !important; /* Desplazamiento interactivo a la derecha */
}
.usercp-dropdown-item:hover span {
color: #00ffff !important;
text-shadow: 0 0 5px #00ffff !important;
}
