/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 =========================================================
 
*/
.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: #ff0000;
}

.btn-primary {
    color: #3f6588;
    background-color: transparent;
	border-color: #3f6588;
	-moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    color: #fff !important;
    background-color: #3f6588 !important;
	border-color: #3f6588 !important;
}

.form-horizontal .control-label {
	text-align: left !important;
}



/* Ajustes generales del fondo oscuro */
body {
    background-color: #08090c !important;
    color: #cbd5e1 !important;
}

/* Fila contenedora principal */
.style-main-row {
    margin-left: 15px;
    margin-right: 15px;
}

/* Botones de acción lateral */
.btn-mu-action {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-decoration: none !important;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-mu-download {
    background-color: #b91c1c;
    color: #fff !important;
    border: 1px solid #7f1d1d;
}
.btn-mu-download:hover { background-color: #dc2626; }

.btn-mu-register {
    background-color: #15803d;
    color: #fff !important;
    border: 1px solid #14532d;
}
.btn-mu-register:hover { background-color: #16a34a; }

/* Paneles Oscuros / Dorados estilo Mu */
.panel-mu {
    background-color: #11131a;
    border: 1px solid #2e281a;
    margin-bottom: 20px;
    border-radius: 4px;
}
.panel-heading-mu {
    background-color: #1a1c24;
    border-bottom: 1px solid #2e281a;
    color: #d4af37;
    font-family: 'Cinzel', serif;
    padding: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}
.panel-body-mu {
    padding: 15px;
}

/* Campos de texto del formulario */
.input-mu {
    background-color: #1c1f26 !important;
    border: 1px solid #3b3f4a !important;
    color: #fff !important;
}
.input-mu:focus {
    border-color: #d4af37 !important;
    box-shadow: none !important;
}

/* Botones dorados de envío */
.btn-mu-gold {
    background-color: #d4af37 !important;
    color: #000 !important;
    font-weight: bold;
}
.btn-mu-gold:hover { background-color: #f3cd57 !important; }

.btn-mu-danger {
    background-color: #3f3f46;
    color: #fff;
}

/* Caja de contenido central */
.mu-content-card {
    background-color: #11131a;
    border: 1px solid #1e212b;
    padding: 20px;
    border-radius: 4px;
}


/* ========================================================
   CLONACIÓN DE AMERICAMU: ESTILOS GLOBALES Y MODOS OSCUROS
   ======================================================== */

/* 1. Forzar Fondo Oscuro Total en la Web */
html, body, #container, #content, .container, .container-fluid {
    background-color: #08090c !important;
    background-image: none !important;
    color: #cbd5e1 !important;
}

/* 2. Ocultar los Banners de Imagenes Repetidos de la Derecha */
#content > div.col-xs-12.col-md-3 > a,
#content div.col-md-3 a img,
div.col-md-3 p a img {
    display: none !important;
}

/* 3. Transformar las Cajas Blancas a Cajas Oscuras y Doradas */
.panel, .well, .thumbnail, .list-group-item, .panel-default {
    background-color: #11131a !important;
    border: 1px solid #2e281a !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

/* 4. Estilizar los Encabezados de los Bloques (Títulos) */
.panel-heading, .well h3, .panel-default > .panel-heading {
    background-color: #1a1c24 !important;
    color: #d4af37 !important;
    text-align: center !important;
    font-weight: bold !important;
    border-bottom: 1px solid #2e281a !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. Corrección de Tablas de Información (Servidor / Eventos) */
.table, .table > tbody > tr > td, .table > tr > td {
    background: transparent !important;
    border-top: 1px solid #1c1f26 !important;
    color: #fff !important;
}

.table > tbody > tr > td:first-child {
    color: #94a3b8 !important; /* Texto secundario gris */
}

/* 6. Forzar que los links internos no se vuelvan azules */
a {
    color: #d4af37;
    text-decoration: none;
}
a:hover {
    color: #f3cd57;
}


/* Ocultar el Login duplicado y el banner de la derecha definitivamente */
.col-md-3 form[action*="login"], 
.col-md-3 a[href*="register"],
.col-md-3 img[src*="banner"],
.col-md-3 .panel:has(form[action*="login"]) {
    display: none !important;
}

/* Darle estilo oscuro al botón "Sign In" antiguo por si acaso */
#content div.col-md-3 button, 
#content div.col-md-3 input[type="submit"] {
    background-color: #d4af37 !important;
    color: #000 !important;
    border: none !important;
}


/* ========================================================
   DISEÑO PREMIUM ESTILO MU NEVERLAND / AMERICA MU
   ======================================================== */

/* 1. Fondo de Pantalla Principal de Alta Calidad */
body {
    background: #08090c url('https://imgur.com') no-repeat top center !important;
    background-size: 100% auto !important;
    color: #e2e8f0 !important;
    font-family: 'Cinzel', serif, sans-serif;
}

/* 2. Menú Superior Premium con Bordes Dorados */
#navbar, .navbar, .global-top-bar {
    background: rgba(13, 15, 22, 0.9) !important;
    border-bottom: 2px solid #a67c1e !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8) !important;
}

/* Botones del menú con texturas e iconos */
#navbar a, .navbar-nav a {
    color: #ffd700 !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px #000;
    transition: all 0.3s;
}
#navbar a:hover, .navbar-nav a:hover {
    background: rgba(166, 124, 30, 0.2) !important;
    color: #fff !important;
}

/* 3. Panel de Estado del Servidor Horizontal (Cuadro Central Dorado) */
.header-info-container, .header-info {
    background: rgba(18, 20, 29, 0.85) !important;
    border: 2px solid #a67c1e !important;
    border-radius: 10px;
    padding: 15px !important;
    box-shadow: 0 0 15px rgba(166, 124, 30, 0.3);
    margin-bottom: 30px;
}

/* 4. Transformación de Cajas Laterales a Estilo Medieval */
.panel, .well, .panel-default {
    background: rgba(12, 14, 20, 0.9) !important;
    border: 2px solid #3a321d !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 5px 15px rgba(0,0,0,0.5) !important;
}

/* Títulos de los bloques con fondo de textura oscura */
.panel-heading, .panel-default > .panel-heading {
    background: #191c26 !important;
    color: #d4af37 !important;
    border-bottom: 2px solid #a67c1e !important;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px #000;
}

/* 5. Botones de Acción Gigantes estilo Neverland */
.btn-danger, .btn-mu-download {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
    border: 2px solid #ef4444 !important;
    border-radius: 6px;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.btn-success, .btn-mu-register {
    background: linear-gradient(135deg, #a67c1e 0%, #634a12 100%) !important;
    border: 2px solid #ffd700 !important;
    border-radius: 6px;
    color: #fff !important;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* 6. Caja de Contenido Central Elegante */
.mu-content-card {
    background: rgba(12, 14, 20, 0.9) !important;
    border: 2px solid #3a321d !important;
    border-radius: 8px;
}



/* 1. Fondo Real de Mu Online (Alta Definición) */
body {
    background: #08090c url('https://alphacoders.com') no-repeat top center !important;
    background-size: 1920px auto !important;
    background-attachment: scroll !important;
}

/* 2. Convertir el cuadro superior en una Barra Horizontal estilo Neverland */
.header-info-container, .header-info, .header-info-block {
    background: rgba(12, 14, 20, 0.85) !important;
    border: 1px solid #a67c1e !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6), 0 0 15px rgba(166, 124, 30, 0.2) !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
}

/* Forzar que los elementos internos de la hora y usuarios se alineen de lado a lado */
.header-info-block .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-around !important;
}

.header-info-block .col-xs-6, 
.header-info-block .col-xs-12 {
    width: auto !important;
    display: inline-block !important;
    float: none !important;
    margin: 5px 15px !important;
    text-align: center !important;
}

/* Ocultar la barra de progreso verde antigua de WebEngine para limpiar el diseño */
.webengine-online-bar {
    display: none !important;
}

/* Destacar el contador de usuarios online en verde brillante */
.online-count {
    color: #22c55e !important;
    font-weight: bold !important;
    font-size: 16px !important;
}


/* ========================================================
   ESTILOS PREMIUM PARA EL BLOQUE DE IDENTIDAD (HERO)
   ======================================================== */

.hero-identity {
    text-align: center;
    margin: 20px auto 35px auto;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    display: block;
}

/* Eslogan superior dorado */
.hero-identity span {
    display: block;
    color: #a67c1e;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 4px;
    margin-bottom: 6px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.95);
}

/* Nombre principal del Servidor en Blanco y con Brillo */
.hero-identity strong {
    display: block;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 6px;
    /* Efecto de sombra de texto e iluminación dorada de fondo */
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.95), 
                 0px 0px 20px rgba(166, 124, 30, 0.5);
}

/* Descripción inferior en gris metálico */
.hero-identity em {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 3px;
    word-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}