/*!
 =========================================================
 * WebEngine CMS - Modern Dark Theme (Versión Final Fix)
 =========================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Poppins:wght@300;400;600&family=Roboto:wght@400;700&display=swap');

html{min-width:1040px;height:100%;}
body{background:#06080c url('../img/background.jpg') no-repeat top center fixed;background-size:cover;color:#e2e8f0;font-family:'Poppins',sans-serif;font-weight:400;font-size:14px;margin:0;height:100%;}
@media only screen and (min-width:2000px){body{background:#06080c url('../img/background-2600.jpg') no-repeat top center fixed!important;background-size:cover!important;}}

a{color:var(--ColorTemplate);text-decoration:none;transition:all .2s ease-in-out;}
a:hover{color:#ffffff;text-shadow:0 0 8px var(--ColorTemplateAlpha);}
img{border:0px;}

/* BARRA SUPERIOR */
.global-top-bar{width:100%;background:rgba(4,5,7,0.9)!important;backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.08);padding:12px 0px;font-size:12px;}
.global-top-bar-content{width:1040px;margin:0px auto;}
.global-top-bar a{color:#94a3b8!important;font-weight:500;}
.global-top-bar a:hover{color:#ffffff!important;}
.global-top-bar a.logout{color:#ef4444!important;}

/* SELECTOR DE IDIOMAS */
.webengine-language-switcher{display:flex!important;flex-direction:row!important;gap:6px!important;list-style:none!important;padding:0!important;margin:0!important;width:auto!important;height:auto!important;overflow:visible!important;}
.webengine-language-switcher li{display:inline-block!important;background:rgba(255,255,255,0.05)!important;padding:3px 6px!important;border-radius:4px;border:1px solid rgba(255,255,255,0.08);}

/* HEADER */
#header{width:100%;margin:0px auto;padding:60px 0px 40px 0px;text-align:center;}
.webengine-mu-logo{max-width:350px;height:auto;filter:drop-shadow(0 0 12px rgba(0,0,0,0.5));transition:transform 0.3s ease;}
.webengine-mu-logo:hover{transform:scale(1.03);filter:drop-shadow(0 0 20px var(--ColorTemplateAlpha));}

/* MENÚ DE NAVEGACIÓN */
.header-info-container{width:1040px;margin:0px auto 20px auto;}
.header-info{background:rgba(13,17,23,0.75)!important;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08)!important;border-radius:6px;padding:0px!important;box-shadow:0 8px 24px rgba(0,0,0,0.5)!important;}
.headersito ul{display:flex;justify-content:center;align-items:center;margin:0;padding:0;list-style:none;}
.headersito ul li a{font-family:'Orbitron',sans-serif;color:#cbd5e1!important;font-size:13px;font-weight:700;letter-spacing:0.5px;padding:18px 24px!important;display:block;text-transform:uppercase;transition:all 0.2s ease;}
.headersito ul li a:hover{color:#fff!important;background:rgba(255,255,255,0.03);box-shadow:inset 0 -3px 0 var(--ColorTemplate);}

/* CONTENEDOR CENTRAL */
#container{background:rgba(15,22,36,0.82)!important;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-top:4px solid var(--ColorTemplate);width:1040px;margin:0px auto;padding:25px 0px;border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,0.6);}
#content{padding:10px 25px 0px 25px;}
.page-title{color:#ffffff;font-family:'Orbitron',sans-serif;font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:12px;margin-bottom:25px;}

/* NOTICIAS */
.panel-news .panel-body{background:transparent!important;border:none!important;color:#cbd5e1;}
.panel-news .panel-footer{background:rgba(0,0,0,0.2)!important;border:none!important;border-top:1px solid rgba(255,255,255,0.08)!important;color:#64748b;font-size:12px;}

/* RANKINGS GLOBAL */
.rankings-table tr:first-child td{background:rgba(255,255,255,0.03)!important;font-family:'Orbitron',sans-serif;font-size:14px;border-bottom:2px solid var(--ColorTemplate)!important;}
.rankings-table tr td{border-bottom:1px solid rgba(255,255,255,0.05)!important;color:#e2e8f0!important;}

/* FOOTER */
.footer{background:rgba(4,5,7,0.9)!important;width:1040px;margin:0px auto 50px auto;border-top:2px solid var(--ColorTemplate)!important;border-radius:0px 0px 6px 6px;color:#64748b;padding:20px 0;}

/* =========================================================
   ESTRUCTURA DE CONTENEDORES DEL SIDEBAR (COL-LG-4)
   ========================================================= */

/* Forzar fondos oscuros en paneles y destruir el blanco de card/panel body */
.col-lg-4 [class*="panel-"], .panel-sidebar, .col-lg-4 .panel {background:rgba(13,17,23,0.75)!important;background-color:rgba(13,17,23,0.75)!important;border:1px solid rgba(255,255,255,0.08)!important;box-shadow:0 4px 15px rgba(0,0,0,0.3)!important;margin-bottom:25px!important;border-radius:6px!important;overflow:hidden!important;}
.col-lg-4 .panel-body, .col-lg-4 .card-body, .panel-sidebar .panel-body {background:transparent!important;background-color:transparent!important;color:#cbd5e1!important;padding:15px!important;}

/* Títulos de las cajas */
.col-lg-4 .panel-heading, .panel-sidebar .panel-heading {background:#0d1117!important;color:#ffffff!important;border:none!important;border-bottom:3px solid var(--ColorTemplate)!important;font-family:'Roboto',sans-serif!important;font-weight:700!important;text-transform:uppercase!important;font-size:14px!important;padding:12px 15px!important;letter-spacing:0.5px!important;}

/* =========================================================
   ESTILOS EXCLUSIVOS PARA EL FORMULARIO DE LOGIN NATIVO
   ========================================================= */

.col-lg-4 form {display:block!important;width:100%!important;padding:0!important;margin:0!important;}
.col-lg-4 form table, .col-lg-4 form tbody, .col-lg-4 form tr {display:block!important;width:100%!important;}
.col-lg-4 form tr td:first-child {display:none!important;} /* Oculta etiquetas rotas */
.col-lg-4 form tr td {display:block!important;width:100%!important;padding:0!important;border:none!important;background:transparent!important;}

/* Forzar que los inputs de login dejen de ser blancos (Anula Bootstrap 5 .form-control) */
.col-lg-4 input[type="text"], .col-lg-4 input[type="password"], .col-lg-4 .form-control {background:#040507!important;background-color:#040507!important;border:1px solid rgba(255,255,255,0.15)!important;color:#ffffff!important;padding:10px 12px!important;border-radius:4px!important;margin-bottom:12px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;display:block!important;box-shadow:none!important;height:40px!important;}
.col-lg-4 input[type="text"]:focus, .col-lg-4 input[type="password"]:focus, .col-lg-4 .form-control:focus {border-color:var(--ColorTemplate)!important;box-shadow:0 0 8px var(--ColorTemplateAlpha)!important;background:#090d16!important;}

/* Evitar el color de autocompletado amarillo/blanco del navegador */
.col-lg-4 input:-webkit-autofill {-webkit-text-fill-color:#ffffff!important;-webkit-box-shadow:0 0 0px 1000px #040507 inset !important;}

/* =========================================================
   ESTILOS EXCLUSIVOS PARA LAS TABLAS DE INFORMACIÓN (INFO DEL SERVIDOR)
   ========================================================= */

.col-lg-4 table:not(form table) {background:transparent!important;width:100%!important;border-collapse:collapse!important;margin:0!important;}
.col-lg-4 table:not(form table) tr {background:transparent!important;display:flex!important;justify-content:space-between!important;align-items:center!important;border-bottom:1px solid rgba(255,255,255,0.05)!important;padding:8px 5px!important;}
.col-lg-4 table:not(form table) tr td {background:transparent!important;display:inline-block!important;width:auto!important;color:#94a3b8!important;font-size:13px!important;border:none!important;padding:0!important;}
.col-lg-4 table:not(form table) tr td strong, .col-lg-4 table:not(form table) tr td b {color:#ffffff!important;}

/* =========================================================
   BOTONES Y ENLACES DEL SIDEBAR
   ========================================================= */

.col-lg-4 input[type="submit"], .col-lg-4 .btn, .col-lg-4 a.btn-primary, .col-lg-4 table a {background:rgba(255,255,255,0.03)!important;border:1px solid rgba(255,255,255,0.15)!important;color:#cbd5e1!important;font-family:'Orbitron',sans-serif!important;font-size:12px!important;font-weight:600!important;text-transform:uppercase!important;padding:10px 15px!important;border-radius:4px!important;cursor:pointer!important;transition:all 0.2s ease-in-out!important;display:block!important;width:100%!important;text-align:center!important;margin-top:10px!important;box-sizing:border-box!important;text-decoration:none!important;text-shadow:none!important;}
.col-lg-4 input[type="submit"]:hover, .col-lg-4 .btn:hover, .col-lg-4 a.btn-primary:hover, .col-lg-4 table a:hover {background:var(--ColorTemplate)!important;border-color:var(--ColorTemplate)!important;color:#ffffff!important;box-shadow:0 0 10px var(--ColorTemplateAlpha)!important;}

/* =========================================================
   PARCHE CSS DEFINITIVO Y SEGURO PARA EL SIDEBAR
   ========================================================= */

/* 1. Contenedor de cada bloque del Sidebar (Evita ocultar contenido) */
.col-lg-4 .card,
main .card {
    background: rgba(13, 17, 23, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
    margin-bottom: 20px !important;
    display: flex !important; /* Garantiza que se renderice el bloque */
    flex-direction: column !important;
    overflow: visible !important;
}

/* 2. Cabeceras de los bloques (Ingresar, Stats, Rankings) */
.col-lg-4 .card-header,
main .card-header {
    background: #0d1117 !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: 2px solid #8b0000 !important; /* Línea roja que combina con tu diseño */
    font-family: 'Orbitron', sans-serif !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 12px 15px !important;
}

/* 3. Forzar visibilidad y relleno del cuerpo interno de las cajas */
.col-lg-4 .card-body,
main .card-body {
    background: transparent !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 15px !important;
    color: #e2e8f0 !important;
}

/* Reset de padding específico para las tablas que usan padding:unset en PHP */
.col-lg-4 .card-body[style*="padding:unset"],
.col-lg-4 .card-body[style*="padding: unset"] {
    padding: 0 !important;
}

/* 4. FIX DEL BOTÓN "INICIAR SESIÓN" (Recupera el look de la imagen 7572334f29679d9177aea28f7418ca04.jpg) */
.col-lg-4 button[name="webengineLogin_submit"],
.col-lg-4 .btn-primary {
    background: #8b0000 !important; /* Rojo oscuro característico */
    background-color: #8b0000 !important;
    border: 1px solid #ff0000 !important; /* Borde rojo vivo */
    color: #ffffff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2) !important;
    transition: background 0.2s ease !important;
}

.col-lg-4 button[name="webengineLogin_submit"]:hover,
.col-lg-4 .btn-primary:hover {
    background: #b30000 !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4) !important;
}

/* Botón de Olvidó su contraseña */
.col-lg-4 .card-body a[href*="lostpassword"],
.col-lg-4 .card-body a[href*="register"] {
    color: #94a3b8 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 11px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

/* 5. Asegurar visibilidad completa de tablas de Estadísticas y Rankings */
.col-lg-4 table.table {
    background: transparent !important;
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    display: table !important; /* Fuerza el renderizado de la tabla */
}

/* Filas y celdas legibles */
.col-lg-4 table.table tr {
    background: transparent !important;
    display: table-row !important;
}

.col-lg-4 table.table td {
    background: transparent !important;
    color: #e2e8f0 !important; /* Texto claro para las estadísticas */
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: table-cell !important;
}

/* Encabezados de Rankings (th) */
.col-lg-4 table.table thead th {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    padding: 10px !important;
    border: none !important;
    display: table-cell !important;
}

/* Resaltado de valores numéricos de las estadísticas */
.col-lg-4 table.table td.text-end,
.col-lg-4 table.table .fw-bold {
    color: #ffffff !important;
    font-family: 'Orbitron', sans-serif !important;
}