/* Magic layout with compatibility for the Default WebEngine modules. */
.menu-top { position: relative; z-index: 500; }
.menu, .menu > li, .menu > li > a { position: relative; z-index: 501; pointer-events: auto; }
.menu > li > a { cursor: pointer; }
.admincp-button {
	position: fixed;
	top: 12px;
	right: 14px;
	z-index: 10000;
	padding: 8px 13px;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
	background: linear-gradient(135deg, #853bd0, #59297f);
	border: 1px solid rgba(225, 197, 255, .45);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.admincp-button:hover { color: #fff !important; filter: brightness(1.14); }
.card {
	margin: 0 0 18px;
	color: #eee6ff;
	background: linear-gradient(145deg, rgba(43, 27, 61, .98), rgba(20, 17, 30, .98));
	border: 1px solid rgba(177, 111, 255, .28);
	border-radius: 9px;
	box-shadow: 0 5px 18px rgba(0, 0, 0, .24);
	overflow: hidden;
}
.card-header, .card-footer {
	padding: 11px 14px;
	color: #fff;
	background: linear-gradient(90deg, #382052, #552c7c, #382052);
	border-color: rgba(210, 169, 255, .24);
	font-weight: 700;
}
.card-body { padding: 14px; }
.card-footer { text-align: center; }
.card table { width: 100%; margin: 0; color: #eee6ff; }
.card table th, .card table td { padding: 8px 6px; border-color: rgba(177, 111, 255, .2); vertical-align: middle; }
.card table thead th, .card table.table-dark thead th { color: #ead8ff; background: #281a39; }
.card table.table-striped tbody tr:nth-of-type(odd) { background: rgba(82, 49, 111, .35); }
.text-white { color: #fff !important; }
.text-primary { color: #d9b8ff !important; }
.text-success { color: #62dc9a !important; }
.text-danger { color: #ff8e9d !important; }
.bg-primary { background: linear-gradient(90deg, #552c7c, #7b3db0) !important; }
.table-dark { color: #ead8ff; background: #281a39; }
.btn, .btn-primary, .btn-outline-primary {
	display: inline-block;
	padding: 7px 12px;
	color: #fff !important;
	text-decoration: none !important;
	border: 1px solid #8d52c4;
	border-radius: 5px;
	background: linear-gradient(135deg, #853bd0, #59297f);
	transition: filter .18s ease, transform .18s ease;
}
.btn:hover, .btn-primary:hover, .btn-outline-primary:hover { color: #fff !important; filter: brightness(1.15); transform: translateY(-1px); }
.form-control, .form-select, .input-group input, .main_web input[type="text"], .main_web input[type="number"], .main_web input[type="password"], .main_web select, .main_web textarea {
	max-width: 100%;
	padding: 8px 10px;
	color: #eee6ff;
	background: #17111f;
	border: 1px solid rgba(177, 111, 255, .38);
	border-radius: 5px;
}
.input-group-text { padding: 8px 10px; color: #e8d7ff; background: #30203f; border: 1px solid rgba(177, 111, 255, .38); }
.main_web .page-title, .main_web h2, .main_web h3 { color: #eadcff; }
.main_web .card { margin: 12px 0 20px; }
.main_web .table { width: 100%; max-width: 100%; }
.main_web .table-responsive { overflow-x: auto; }
.main_web img { max-width: 100%; height: auto; }

/* High contrast for WebEngine info banners and registration instructions. */
.main_web .alert-info {
	color: #fff !important;
	background: linear-gradient(135deg, #332047, #21162f) !important;
	border: 1px solid #a96be0 !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .34);
}
.main_web .alert-info *, .main_web .alert-info .text-info,
.main_web .alert-info h1, .main_web .alert-info h2, .main_web .alert-info h3,
.main_web .alert-info p, .main_web .alert-info strong, .main_web .alert-info b {
	color: #fff !important;
}
.main_web .alert-info hr { border-top-color: rgba(226, 195, 255, .42) !important; }
.main_web form { color: #f4eaff; }
.main_web form label, .main_web form .form-label, .main_web form .control-label,
.main_web form .help-block, .main_web form .form-text, .main_web form small,
.main_web form .text-muted, .main_web form p, .main_web form li {
	color: #f1e5ff !important;
}
.main_web form a:not(.btn) { color: #dcbaff; text-decoration: underline; }
.main_web form a:not(.btn):hover { color: #fff; }
.rankings-class-image-sidebar { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
.spinner-grow { display: inline-block; width: .8rem; height: .8rem; vertical-align: middle; border-radius: 50%; animation: magic-pulse 1.1s ease-in-out infinite; }
.spinner-grow-sm { width: .55rem; height: .55rem; }
.spinner-grow.text-success { background: #42d392; }
.spinner-grow.text-danger { background: #ff6378; }
@keyframes magic-pulse { 50% { opacity: .35; transform: scale(.82); } }

/* Donation, shop and payment module surfaces */
.paypal-gateway-container, .paypal-gateway-content,
.mercadopago-container, .mercadopago-content, .mp-container, .mp-checkout,
[class*="mercado"], [class*="payment"], [class*="donation"], [class*="donat"] {
	color: #eee6ff;
}
.paypal-gateway-container, .paypal-gateway-content,
.mercadopago-container, .mercadopago-content, .mp-container, .mp-checkout {
	padding: 16px;
	background: linear-gradient(145deg, rgba(43, 27, 61, .98), rgba(20, 17, 30, .98));
	border: 1px solid rgba(177, 111, 255, .32);
	border-radius: 9px;
}
.paypal-gateway-form input[type="text"], .main_web [class*="mercado"] input,
.main_web [class*="payment"] input, .main_web [class*="donat"] input {
	min-height: 38px;
}
.main_web .categoria_shop, .main_web [category] { cursor: pointer; }
.main_web .categoria_shop_item { transition: transform .25s ease, opacity .25s ease; }
.dataTables_wrapper { color: #eee6ff; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
	color: #eee6ff; background: #17111f; border: 1px solid rgba(177, 111, 255, .38); border-radius: 5px;
}
.dataTables_wrapper .pagination > li > a, .dataTables_wrapper .pagination > li > span {
	color: #eadcff; background: #21172d; border-color: rgba(177, 111, 255, .26);
}
.dataTables_wrapper .pagination > .active > a { color: #fff; background: #713baa; border-color: #8d52c4; }

@media (max-width: 1220px) {
	.container_web { width: calc(100% - 24px); }
	.header { width: 100%; }
	.left-sidebar, .right-sidebar { flex: 0 0 23%; width: 23%; }
	.content-block { flex: 1 1 54%; width: 54%; min-width: 0; }
	.slider { width: 100%; }
}
@media (max-width: 900px) {
	.container_web { display: flex; flex-direction: column; width: min(100% - 24px, 700px); }
	.content-block, .left-sidebar, .right-sidebar { width: 100%; flex: 0 0 auto; margin: 0; }
	.content-block { order: 0; min-height: 0; }
	.left-sidebar { order: 1; }
	.right-sidebar { order: 2; }
	.slider { height: auto; aspect-ratio: 630 / 280; }
	.slider .slides, .slider .slide { height: 100%; }
	.main_web { min-height: 0; padding: 14px 4px; }
	#gGST_Wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 560px) {
	.menu > li > a { padding: 13px 9px; font-size: 12px; }
	.header { height: 70px; }
	.container_web { width: calc(100% - 16px); padding-top: 10px; }
	.card table th, .card table td { padding: 6px 4px; font-size: 12px; }
	.titan-live { height: auto; min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.home-rankings-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin: 0 auto 20px;
}

.home-ranking-card {
	min-width: 0;
	padding: 16px;
	color: #eee6ff;
	background: linear-gradient(145deg, rgba(43, 27, 61, .98), rgba(20, 17, 30, .98));
	border: 1px solid rgba(177, 111, 255, .35);
	border-radius: 9px;
	box-shadow: 0 5px 18px rgba(0, 0, 0, .24);
}

.home-ranking-heading {
	margin-bottom: 12px;
	color: #ead8ff;
	font-size: 18px;
	font-weight: 700;
}

.home-ranking-table-wrap {
	overflow-x: auto;
}

.home-ranking-table {
	width: 100%;
	border-collapse: collapse;
}

.home-ranking-table th,
.home-ranking-table td {
	padding: 8px;
	border-bottom: 1px solid rgba(177, 111, 255, .2);
	text-align: left;
}

.home-ranking-more {
	display: inline-block;
	margin-top: 12px;
	color: #d9b8ff;
}

@media (max-width: 700px) {
	.home-rankings-grid {
		grid-template-columns: 1fr;
	}
}

.home-rankings-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin: 0 auto 20px;
}

.home-ranking-card {
	min-width: 0;
	padding: 16px;
	color: #eee6ff;
	background: linear-gradient(145deg, rgba(43, 27, 61, .98), rgba(20, 17, 30, .98));
	border: 1px solid rgba(177, 111, 255, .35);
	border-radius: 9px;
	box-shadow: 0 5px 18px rgba(0, 0, 0, .24);
}

.home-ranking-heading {
	margin-bottom: 12px;
	color: #ead8ff;
	font-size: 18px;
	font-weight: 700;
}

.home-ranking-table-wrap {
	overflow-x: auto;
}

.home-ranking-table {
	width: 100%;
	border-collapse: collapse;
}

.home-ranking-table th,
.home-ranking-table td {
	padding: 8px;
	border-bottom: 1px solid rgba(177, 111, 255, .2);
	text-align: left;
}

.home-ranking-more {
	display: inline-block;
	margin-top: 12px;
	color: #d9b8ff;
}

@media (max-width: 700px) {
	.home-rankings-grid {
		grid-template-columns: 1fr;
	}
}

.main_web .panel.panel-news {
	overflow: hidden;
	color: #eee6ff;
	background: rgba(29, 19, 42, .96);
	border: 1px solid #74449a;
	border-radius: 7px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.main_web .panel.panel-news > .panel-heading {
	padding: 14px 16px;
	color: #fff;
	background: linear-gradient(90deg, #582d78, #704096, #582d78);
	border-bottom: 1px solid #8c5ab1;
}

.main_web .panel.panel-news .panel-title,
.main_web .panel.panel-news .panel-title a {
	color: #fff;
	font-weight: 700;
}

.main_web .panel.panel-news > .panel-body,
.main_web .panel.panel-news > .panel-footer {
	color: #eee6ff;
	background: transparent;
	border-color: rgba(177, 111, 255, .2);
}
.main_web .alert-warning,
.main_web .alert-info {
	color: #eee6ff !important;
	background: rgba(29, 19, 42, .96) !important;
	border: 1px solid #74449a !important;
	border-radius: 7px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.main_web .alert-warning *,
.main_web .alert-info * {
	color: #eee6ff !important;
}

/* Panel legible para la página de registro */
.main_web.register-page {
	padding: 24px 28px 30px;
	color: #f4eaff;
	background: linear-gradient(145deg, rgba(18, 10, 29, .94), rgba(34, 17, 49, .94));
	border: 1px solid rgba(177, 111, 255, .48);
	border-radius: 10px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .42);
}

.main_web.register-page > h1,
.main_web.register-page > h2,
.main_web.register-page .page-title {
	margin-top: 0;
	color: #fff !important;
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .75);
}

.main_web.register-page form {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
	padding: 20px;
	background: rgba(9, 6, 16, .48);
	border: 1px solid rgba(177, 111, 255, .24);
	border-radius: 8px;
}

.main_web.register-page form label,
.main_web.register-page form .help-block,
.main_web.register-page form p,
.main_web.register-page form small {
	color: #f4eaff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.main_web.register-page form .form-control,
.main_web.register-page form input,
.main_web.register-page form select,
.main_web.register-page form textarea {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.main_web.register-page { padding: 16px 12px 20px; }
	.main_web.register-page form { padding: 14px; }
}

/* Panel legible para la página de registro */
.main_web.form-panel-page {
	padding: 24px 28px 30px;
	color: #f4eaff;
	background: linear-gradient(145deg, rgba(18, 10, 29, .94), rgba(34, 17, 49, .94));
	border: 1px solid rgba(177, 111, 255, .48);
	border-radius: 10px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .42);
}

.main_web.form-panel-page > h1,
.main_web.form-panel-page > h2,
.main_web.form-panel-page .page-title {
	margin-top: 0;
	color: #fff !important;
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .75);
}

.main_web.form-panel-page form {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
	padding: 20px;
	background: rgba(9, 6, 16, .48);
	border: 1px solid rgba(177, 111, 255, .24);
	border-radius: 8px;
}

.main_web.form-panel-page form label,
.main_web.form-panel-page form .help-block,
.main_web.form-panel-page form p,
.main_web.form-panel-page form small {
	color: #f4eaff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.main_web.form-panel-page form .form-control,
.main_web.form-panel-page form input,
.main_web.form-panel-page form select,
.main_web.form-panel-page form textarea {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.main_web.form-panel-page { padding: 16px 12px 20px; }
	.main_web.form-panel-page form { padding: 14px; }
}