/*!
 =========================================================
 * GuayMU — tema oscuro MU 0.97K sobre WebEngine CMS
 * Extiende el template default (Lautaro Angelico, MIT)
 * Paleta: negro / bronce / arena (variables en style.css, bloque :root)
 =========================================================
*/

/* ---- reglas heredadas del default ---- */
.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;
	outline: none !important;
}

.nopadding { padding: 0 !important; margin: 0 !important; }
.vcenter { display: inline-block; vertical-align: middle; float: none; }

.thumbnail {
	background-color: var(--webenginecolor27);
	border: 1px solid var(--webenginecolor16);
}
a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
	border-color: var(--webenginecolor1);
}

.btn-primary {
	color: var(--webenginecolor9);
	background-color: var(--webenginecolor8);
	border-color: var(--webenginecolor10);
	transition: all .1s ease-in;
	border-radius: 2px;
	font-weight: bold;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
	color: var(--webenginecolor12) !important;
	background-color: var(--webenginecolor11) !important;
	border-color: var(--webenginecolor13) !important;
}

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

/* ---- inputs oscuros (pisa los hardcodes claros de Bootstrap) ---- */
.form-control {
	background: var(--webenginecolor15);
	border: 1px solid var(--webenginecolor16);
	color: var(--webenginecolor17);
	box-shadow: none;
}
.form-control:focus {
	border: 1px solid var(--webenginecolor18);
	box-shadow: 0 0 4px rgba(229, 161, 79, 0.25);
}
select.form-control option { background: var(--webenginecolor15); }
.form-control[readonly], .form-control[disabled] {
	background: var(--webenginecolor15);
	color: var(--webenginecolor17);
	opacity: 1;
}

/* ---- paneles Bootstrap en oscuro ---- */
.panel {
	background: var(--webenginecolor27);
	border: 1px solid var(--webenginecolor16);
	border-radius: 2px;
	box-shadow: none;
	color: var(--webenginecolor2);
}
.panel-default > .panel-heading,
.panel-sidebar > .panel-heading {
	background: var(--webenginecolor5);
	color: var(--webenginecolor6);
	border-bottom: 2px solid var(--webenginecolor7);
	border-radius: 2px 2px 0 0;
}
.panel-title {
	font-family: 'Cinzel', serif;
	letter-spacing: 0.08em;
	font-size: 14px;
}
.panel-footer {
	background: var(--webenginecolor28);
	border-top: 1px solid var(--webenginecolor21);
}

/* ---- tipografia de titulos ---- */
.page-title {
	font-family: 'Cinzel', serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 26px;
}
.page-title span { color: var(--webenginecolor1); }

/* ---- header fijo (barra superior + navbar) ---- */
#sticky-header {
	position: sticky;
	top: 0;
	z-index: 500;
}
#navbar {
	background: rgba(18, 15, 13, 0.85);
	border-top: 1px solid var(--webenginecolor16);
	border-bottom: 1px solid var(--webenginecolor16);
}
#navbar ul li a {
	font-family: 'Cinzel', serif;
	font-size: 13px;
	letter-spacing: 0.12em;
	padding: 18px 24px;
	border-bottom: 2px solid transparent;
}

/* deja lugar para el header sticky al saltar a un ancla (#content, #rankings-menu) */
#content, #rankings-menu {
	scroll-margin-top: 110px;
}

/* el botón de AdminCP debe quedar siempre por encima del header sticky */
.admincp-button {
	position: fixed;
	z-index: 600;
}
#navbar ul li a:hover {
	border-bottom: 2px solid var(--webenginecolor1);
}

/* ---- tablas Bootstrap y genericas ---- */
.table { color: var(--webenginecolor2); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--webenginecolor28); }
.table-hover > tbody > tr:hover { background: #16203380; }

/* tablas de usercp (resetstats, reset, unstick, etc): con table-layout:fixed
   las columnas se reparten el ancho en partes iguales, dejando el avatar y el
   botón de acción con columnas mucho más anchas de lo que necesitan */
.general-table-ui td:first-child {
	width: 70px;
}
.general-table-ui td:last-child {
	width: 190px;
}

/* "Mi cuenta": un poco más de aire por fila + resaltado al pasar el mouse.
   Ojo: no usar display:flex en los <td> de esta tabla, rompe el
   border-collapse (las líneas entre filas quedan desalineadas). */
.myaccount-table tr td {
	padding: 16px 15px !important;
}
.myaccount-table tr td:last-child .pull-right {
	margin-left: 15px;
}
.myaccount-table tr:hover td {
	background: rgba(255, 255, 255, 0.03);
}
.myaccount-vip-expiration {
	color: var(--webenginecolor14);
	margin-left: 4px;
}
.myaccount-vip-expiration::before {
	content: '•';
	margin-right: 8px;
	opacity: 0.5;
}

/* paginación (historial de muertes VIP) sobre fondo oscuro */
.killlog-pagination > li > a,
.killlog-pagination > li > span {
	background: var(--webenginecolor27);
	border-color: var(--webenginecolor16);
	color: var(--webenginecolor3);
}
.killlog-pagination > li > a:hover,
.killlog-pagination > li > a:focus {
	background: var(--webenginecolor28);
	border-color: var(--webenginecolor1);
	color: var(--webenginecolor1);
}
.killlog-pagination > li.disabled > span {
	background: transparent;
	border-color: transparent;
	color: var(--webenginecolor14);
}

/* ---- alertas legibles en fondo oscuro ---- */
.alert-success { background: #12241a; border-color: #2d5a3d; color: #9fd8ae; }
.alert-danger  { background: #2a1416; border-color: #6e2a2e; color: #e8a2a2; }
.alert-warning { background: #2b1f11; border-color: #715027; color: #ebc99f; }
.alert-info    { background: #291f17; border-color: #614a37; color: #e2c2a8; }


/* ---- separador dorado bajo el logo (guino al logo) ---- */
#header { position: relative; padding-bottom: 24px; }
#header:after {
	content: '';
	display: block;
	width: 220px;
	margin: 18px auto 0;
	border-top: 1px solid rgba(211, 176, 148, 0.45);
}

/* ---- news en oscuro ---- */
.panel-news .panel-title { color: var(--webenginecolor6); font-size: 20px; }
.panel-news .panel-title a { color: var(--webenginecolor6); }

/* ---- badges/labels ---- */
.label-primary { background: var(--webenginecolor1); color: #1b1207; }

/* ---- scrollbar sutil (webkit) ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #120f0d; }
::-webkit-scrollbar-thumb { background: #43372d; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #7f6957; }

/* ---- fix: boton dentro del titulo de panel (ej. "olvidaste tu contraseña") ---- */
.panel-heading { overflow: hidden; }
.panel-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.panel-title .btn {
	font-family: 'PT Sans', sans-serif;
	letter-spacing: normal;
	text-transform: none;
	font-size: 11px;
	padding: 3px 10px;
	white-space: nowrap;
	flex-shrink: 0;
	float: none !important;
	margin: 0;
}

/* ---- logo del header: tamano contenido ---- */
.webengine-mu-logo {
	max-width: 560px;
	width: 100%;
	height: auto;
}

/* ---- login sidebar: "olvidaste tu contraseña" como boton outline, no compite con "Iniciar sesion" ---- */
.panel-title a[href*="forgotpassword"].btn-primary,
.panel-title a[href*="logout"].btn-primary {
	background: transparent;
	border: 1px solid var(--webenginecolor8);
	color: var(--webenginecolor8);
}
.panel-title a[href*="forgotpassword"].btn-primary:hover,
.panel-title a[href*="forgotpassword"].btn-primary:focus,
.panel-title a[href*="forgotpassword"].btn-primary:active,
.panel-title a[href*="logout"].btn-primary:hover,
.panel-title a[href*="logout"].btn-primary:focus,
.panel-title a[href*="logout"].btn-primary:active {
	background: var(--webenginecolor8) !important;
	color: var(--webenginecolor9) !important;
	border-color: var(--webenginecolor8) !important;
}

/* ---- modal oscuro (ej: Terminos del Servicio dentro del registro) ---- */
.modal-content {
	background: var(--webenginebg2);
	border: 1px solid var(--webenginecolor16);
	color: var(--webenginecolor2);
}
.modal-header {
	border-bottom: 1px solid var(--webenginecolor16);
}
.modal-title {
	font-family: 'Cinzel', serif;
	color: var(--webenginecolor1);
	text-transform: uppercase;
	font-size: 20px;
}
.modal-footer {
	border-top: 1px solid var(--webenginecolor16);
}
.modal .close {
	color: var(--webenginecolor2);
	opacity: 0.7;
	text-shadow: none;
}
.modal .close:hover,
.modal .close:focus {
	color: var(--webenginecolor1);
	opacity: 1;
}
.modal-backdrop.in {
	opacity: 0.7;
}
/* el ToS se re-usa embebido en el modal; su titulo grande no hace falta ahi dentro */
#tosModal .modal-body .page-title {
	display: none;
}
#tosModal .modal-body {
	max-height: 70vh;
	overflow-y: auto;
}