/* ===============================
   Estilo Oriental Clasico Modernizado - Rulay2
   =============================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

body {
    font-family: 'Cinzel', serif;
    background: url('/httpdocs/theme1/img/header.png') center top fixed no-repeat;
    background-size: cover;
    color: #fbe3a1;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

#mt2cms {
    background-color: rgba(0, 0, 0, 0.85);
    max-width: 1220px;
    margin: 0 auto;
    padding: 15px;
    box-shadow: 0 0 10px #000;
}

/* Menú */
.mt2cms_menu {
    background: rgba(0, 0, 0, 0.75);
    border-bottom: 3px solid #ffcc00;
    box-shadow: 0 0 12px #ffcc00;
    z-index: 100;
    position: relative;

    /* Nuevo: centrado y tamaño máximo */
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 15px;
    border-radius: 0 0 10px 10px;
}

.mt2cms_menu_content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 15px 0;
}

.mt2cms_menu_content li a {
    color: #fbe3a1;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.mt2cms_menu_content li a:hover {
    color: #fff;
    border-color: #ffcc00;
    text-shadow: 0 0 5px #ffcc00;
    transform: scale(1.05);
}

.mt2cms_menu_content li.btn-download a {
    background: #ffcc00;
    color: #000;
    border-radius: 20px;
    padding: 10px 25px;
    font-weight: bold;
}

.mt2cms_menu_content li.btn-download a:hover {
    background: #fff2a0;
    box-shadow: 0 0 10px #ffcc00;
}

/* Logo */
.mt2cms_logo_bg {
    text-align: center;
    margin: 25px 0;
}

.mt2cms_logo_bg img {
    max-width: 400px;
    height: auto;
}

/* Paneles principales */
.panel {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #ffcc00;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    color: #fff8d3;
}

.panel-heading {
    background: #ffcc00;
    color: #2a1e13;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 8px 8px 0 0;
}

/* Noticias */
.mt2cms_main_box_middle .panel {
    min-height: 100px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Ranking y botones */
.mt2cms_rank_content {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid #ffcc00;
    padding: 10px;
}

.mt2cms_main_content_button, .btn {
    background: linear-gradient(to bottom, #ffcc00, #c99700);
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    transition: 0.3s ease-in-out;
}

.mt2cms_main_content_button:hover, .btn:hover {
    background: #ffe066;
    box-shadow: 0 0 10px #ffcc00;
}

/* Footer más compacto */
#footer {
    background: #1a1208; /* sigue tu tono pero más discreto */
    color: #ffcc00;
    padding: 6px 0; /* MENOS alto */
    font-size: 11px; /* más compacto */
    text-align: center;
    line-height: 1.3;
    border-top: 1px solid rgba(255, 204, 0, 0.2); /* línea sutil para separar */
}

/* Redes sociales centradas, sin tanto espacio */
#social_networks {
    margin: 5px 0;
}

#social_networks .social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* menos separación */
}

/* Iconos más sutiles y sin fondo amarillo opaco */
#social_networks .social a {
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent; /* SIN fondo sólido para no tapar */
    border-radius: 50%;
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.28);
    color: #ffcc00; /* color dorado base */
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Iconos con tamaño un poco mayor */
#social_networks .social a img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255, 215, 97, 0.4));
    transition: transform 0.2s ease, filter 0.2s ease;
}

#social_networks .social a i {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Hover más limpio: sólo efecto de luz, sin pintar todo el icono */
#social_networks .social a:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.4); /* brillo sutil */
    background: rgba(255, 204, 0, 0.1); /* toque suave, NO tapa el logo */
}

/* Mantener el icono visible al pasar el ratón */
#social_networks .social a:hover i,
#social_networks .social a:hover img {
    transform: scale(1.08);
    filter: brightness(1.2) contrast(1.1);
}

/* Texto del footer más compacto */
#footer_other_infos p {
    margin: 2px 0;
    font-size: 11px;
}

/* Links en el footer */
#footer a {
    color: #fff3b0;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}


/* Responsive */
@media screen and (max-width: 768px) {
    .mt2cms_menu_content {
        flex-direction: column;
        gap: 10px;
    }

    .mt2cms_main_left,
    .mt2cms_main_middle,
    .mt2cms_main_right {
        width: 100% !important;
        padding: 10px 0;
    }

    .mt2cms_logo_bg img {
        max-width: 250px;
    }
    .mt2cms_main_right {
	float: left;
	padding: 0 0 0 25px;
}

.ranking-icon {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 6
    0px;
	width: 60px;
}

.ranking-icon.pos-1 { background-image: url('theme1/img/top1icon.png') !important; }
.ranking-icon.pos-2 { background-image: url('theme1/img/top2icon.png') !important; }
.ranking-icon.pos-3 { background-image: url('theme1/img/top3icon.png') !important; }
.ranking-icon.pos-4 { background-image: url('theme1/img/top4icon.png') !important; }
.ranking-icon.pos-5 { background-image: url('theme1/img/top5icon.png') !important; }


}
.page-header {
    background-size: cover;
    background-position: center;
    padding: 50px 15px;
    text-align: center;
    color: #f5e7c3;
    box-shadow: 0 0 10px #000;
}

.page-header .section-title {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}

.page-header .section-subtitle {
    font-size: 20px;
    margin-top: 10px;
}

.news-wrapper {
    padding: 30px 20px;
}

@media screen and (max-width: 768px) {
    .page-header {
        padding: 30px 10px;
    }

    .page-header .section-title {
        font-size: 28px;
    }

    .page-header .section-subtitle {
        font-size: 16px;
    }
}
.page-header {
    background-size: cover;
    background-position: center;
    padding: 40px 20px;
    color: #fff8d3;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 0 15px #caa04d;
}

.section-title {
    font-size: 32px;
    font-weight: bold;
    text-shadow: 1px 1px 5px #000;
    margin: 0;
}

/* Botón de descarga corregido */
.btn-download-link {
	background-color: #f2d675; /* Amarillo suave */
	color: #2a2a2a;
	border: none;
	padding: 10px 16px;
	font-weight: bold;
	border-radius: 6px;
	display: inline-block;
	text-decoration: none;
	transition: background 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn-download-link:hover {
	background-color: #f7e18a;
	color: #1a1a1a;
	box-shadow: 0 0 10px rgba(255, 228, 100, 0.3);
}
/* Tamaños jerárquicos para las coronas del ranking */
.ranking-icon img {
    width: 20px;
    height: 20px;
}

.ranking-icon.pos-1 img {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 0 5px gold);
}

.ranking-icon.pos-2 img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 3px silver);
}

.ranking-icon.pos-3 img {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 2px #cd7f32); /* bronce */
}

.page-hd {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 0 18px rgba(202, 160, 77, 0.28);
}

.page-hd::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 4, 1, 0.12) 0%, rgba(8, 4, 1, 0.82) 100%);
}

.page-hd .bd-c {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 22px 26px;
}

.page-hd h2,
.pre-social {
    margin: 0;
    color: #ffe7a7;
    text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.75);
    font-size: 30px;
}

.padding-container {
    padding: 8px 4px 0;
}

.padding-container .table td:first-child {
    width: 34%;
    color: #ffd966;
    font-weight: bold;
}

.register-captcha-cell {
    vertical-align: middle;
}

.register-captcha-image {
    display: block;
    width: 230px;
    max-width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 217, 102, 0.45);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}

@media screen and (max-width: 768px) {
    .page-hd {
        min-height: 140px;
    }

    .page-hd .bd-c {
        padding: 18px;
    }

    .page-hd h2,
    .pre-social {
        font-size: 24px;
    }

    .padding-container .table td:first-child {
        width: auto;
    }

    .register-captcha-image {
        width: 100%;
    }
}