/* ============================================================
   RO Chile — CSS personalizado
   Fuente: Cinzel (títulos) + Exo 2 (cuerpo)
   ============================================================ */

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

/* --- Tipografía global --- */
body, input, select, textarea, button {
    font-family: 'Exo 2', 'Verdana', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.ms-site-title-lg,
.stitle,
legend.col-form-label,
#section-job h2,
.feature-title {
    font-family: 'Cinzel', 'Trajan Pro Regular', serif;
    letter-spacing: 0.04em;
}

/* --- Navbar --- */
.navbar {
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 185, 0, 0.15);
    padding: 6px 0 !important;
}

.navbar-brand img {
    max-height: 52px !important;
    filter: drop-shadow(0 2px 6px rgba(255,180,0,0.4));
}

.navbar .nav-link {
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #e8d8a0 !important;
    transition: color 0.2s;
}
.navbar .nav-link:hover {
    color: #ffd700 !important;
}

.online-status {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.8rem;
    text-align: right;
}
.online-status .online {
    color: #4ade80;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Botón INICIAR SESIÓN */
.btn-login.btn-warning {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    padding: 8px 18px;
    border-radius: 3px;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(245,158,11,0.4);
    transition: all 0.2s;
}
.btn-login.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    box-shadow: 0 4px 16px rgba(245,158,11,0.6);
    transform: translateY(-1px);
}

/* --- Hero login box --- */
.splash-box {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(10, 8, 5, 0.82) !important;
    border: 1px solid rgba(255, 185, 0, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,185,0,0.1) !important;
    padding: 24px !important;
}

.splash-box legend.col-form-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    display: block;
    margin-bottom: 16px;
    text-shadow: 0 0 12px rgba(255,215,0,0.4);
    letter-spacing: 0.12em;
}

.splash-box .form-control {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,185,0,0.2) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.2s, background 0.2s;
}
.splash-box .form-control:focus {
    background: rgba(255,185,0,0.08) !important;
    border-color: rgba(255,185,0,0.5) !important;
    box-shadow: 0 0 0 2px rgba(255,185,0,0.15) !important;
    color: #fff !important;
}

.btn_login {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.1em !important;
    color: #fff !important;
    padding: 10px !important;
    box-shadow: 0 3px 12px rgba(245,158,11,0.4) !important;
    transition: all 0.2s !important;
    margin-top: 6px !important;
}
.btn_login:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    box-shadow: 0 6px 20px rgba(245,158,11,0.6) !important;
    transform: translateY(-1px) !important;
}

/* Label y checkbox */
.splash-box label {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c4a96e !important;
    margin-bottom: 4px;
}
.splash-box .form-check-label {
    font-size: 0.82rem;
    color: #b0a080 !important;
    text-transform: none;
    letter-spacing: 0.03em;
}

/* Texto "¿No tienes cuenta?" */
.splash-box > .rows > a,
.splash-box > .rows {
    color: #b0a080;
    font-size: 0.85rem;
    text-align: center;
}
.splash-box > .rows > a {
    color: #ffd700 !important;
    font-weight: 600;
}

/* Caja de descripción del servidor */
.splash-box.mt-2 {
    background: rgba(10, 8, 5, 0.7) !important;
    border-color: rgba(255,185,0,0.15) !important;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.88rem;
    color: #c4b89a !important;
    line-height: 1.5;
}
.splash-box.mt-2 a {
    color: #ffd700 !important;
    font-weight: 600;
}

/* --- Sección Info (TikTok + estadísticas) --- */
#section-info {
    background: #0a0806 url("../img/bg-info.jpg") no-repeat 20% center !important;
    background-size: cover !important;
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    overflow-y: visible !important;
}

#info-box {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255,185,0,0.15) !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    overflow: visible !important;
}

#info-box #info-text {
    padding-top: 10px !important;
}

#info-box #info-logo {
    top: -60px !important;
}

#info-box #info-text h6 {
    font-family: 'Cinzel', serif !important;
    font-size: 1rem !important;
    color: #ffd700 !important;
    letter-spacing: 0.1em;
}

.info-huge {
    font-family: 'Cinzel', serif !important;
    font-size: 2.2rem !important;
    color: #ffd700 !important;
    line-height: 1 !important;
    display: block;
    text-align: center;
}
.info-big {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c4b89a !important;
    display: block;
    text-align: center;
    margin-top: 2px;
}

/* --- Sección Features --- */
#section-feature {
    background: #0a0806 url("../img/bg-feature.jpg") no-repeat center center !important;
    background-size: cover !important;
}

#section-feature h2 .stitle {
    font-family: 'Cinzel', serif !important;
    font-size: 2rem !important;
    letter-spacing: 0.15em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.8);
}

.featured-box {
    background: rgba(0,0,0,0.65) !important;
    border: 1px solid rgba(255,185,0,0.2) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.featured-box:hover {
    border-color: rgba(255,185,0,0.5) !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

/* --- Sección Jobs --- */
#section-job {
    background: #0a0806 url("../img/bg-job.jpg") no-repeat center bottom !important;
    background-size: cover !important;
}

#section-job h2 {
    font-family: 'Cinzel', serif !important;
    color: #ffd700 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

.job-description-box {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #ddd !important;
    background: rgba(0,0,0,0.55) !important;
    border: 1px solid rgba(255,185,0,0.12) !important;
    border-radius: 8px;
    padding: 16px !important;
}

/* --- Galería --- */
#section-gallery h2 {
    font-family: 'Cinzel', serif !important;
    color: #fff !important;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

/* --- Sección Feature (zona negra fix) --- */
.section-feature, .section-info, .section-job, .section-gallery {
    position: relative;
}

/* --- Footer --- */
#footer {
    background: linear-gradient(180deg, #0d0b08 0%, #050404 100%) !important;
    border-top: 1px solid rgba(255,185,0,0.2) !important;
    padding: 24px 0 !important;
}

#footer .footer-copy p {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.82rem;
    color: #7a6a50 !important;
    margin-bottom: 6px;
}
#footer .footer-copy a {
    color: #c4a96e !important;
    text-decoration: none;
    transition: color 0.2s;
}
#footer .footer-copy a:hover {
    color: #ffd700 !important;
}

/* --- Sidenav flotante --- */
.floating-navigation {
    background: rgba(10,8,5,0.85) !important;
    border-right: 1px solid rgba(255,185,0,0.12) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    height: auto !important;
    min-height: unset !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.floating-navigation .ragna-nav-mobile span {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    color: #c4b89a !important;
}

/* --- Menú desplegable --- */
.dropdown-menu {
    background: rgba(10,8,5,0.95) !important;
    border: 1px solid rgba(255,185,0,0.2) !important;
    border-radius: 6px !important;
}

/* --- Páginas internas (módulos de cuenta, personajes, etc.) --- */
.generic-form label,
.table th {
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c4a96e !important;
}

.table {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.88rem;
}

/* Breadcrumb interno */
.section-main .breadcrumb,
.section-main h2 {
    font-family: 'Cinzel', serif;
}

/* Botones generales */
.btn-primary, .btn-secondary {
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Separador naranja debajo de títulos */
.ms-site-title-lg::after,
#section-job h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, transparent);
    margin: 8px auto 0;
    border-radius: 2px;
}

/* --- Tabs de páginas legales (TOS / Privacidad) --- */
.ro-legal-section { display: none !important; }
.ro-legal-section.active { display: block !important; }

/* Padding generoso en páginas internas */
.section-main .container {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* Cuadro de contenido más ancho en pantallas grandes: el fondo decorativo
   (background-size:cover) suele recortar figuras justo en el borde del
   contenedor de Bootstrap (max-width:1140px); lo ampliamos para que
   queden contenidas dentro del cuadro oscuro en vez de cortadas. */
@media (min-width: 1200px) {
    .section-main .container {
        max-width: 1320px;
    }
}

/* Botones largos: texto wrappeable, sin overflow */
.btn, button[type="submit"], input[type="submit"],
input[type="button"], input[type="reset"] {
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    height: auto !important;
    min-height: 40px !important;
}

/* Breadcrumb / submenu de páginas internas */
#submenu, #pagemenu {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.8rem;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,185,0,0.12);
    padding: 8px 16px;
    color: #a09070;
    margin-bottom: 16px;
    border-radius: 4px;
}
#submenu a, #pagemenu a {
    color: #c4a96e !important;
    text-decoration: none;
    transition: color 0.2s;
}
#submenu a:hover, #pagemenu a:hover,
#submenu a.current-sub-menu {
    color: #ffd700 !important;
}

/* Tabla de cuenta (vertical-table) */
.vertical-table {
    width: 100%;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.88rem;
    border-collapse: collapse;
}
.vertical-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c4a96e;
    font-weight: 600;
    padding: 10px 14px;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,185,0,0.08);
    white-space: nowrap;
    width: 22%;
}
.vertical-table td {
    color: #e0d4b0;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vertical-table input[type="text"],
.vertical-table input[type="email"] {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,185,0,0.2) !important;
    border-radius: 4px !important;
    color: #f0e8d0 !important;
    padding: 6px 10px !important;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.88rem;
    width: 100%;
    max-width: 340px;
}
.vertical-table input[type="text"]:focus,
.vertical-table input[type="email"]:focus {
    border-color: rgba(255,185,0,0.5) !important;
    outline: none;
}

/* --- Corrección zona negra entre secciones --- */
.sections-container {
    background: #0a0806;
}

/* --- Centrado vertical del login box en la sección hero --- */
#section-home .container > .row:first-child {
    min-height: 85vh;
    align-items: center;
    display: flex !important;
}
#home-login {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

/* --- Logo del hero login box (nuevo logo) --- */
#home-login #splash-login-logo,
#core-logo {
    background-image: url('../img/logo-rochile-2026.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* --- Efecto brillo detrás del logo --- */
#home-login #splash-login-logo {
    animation: logoGlow 2.8s ease-in-out infinite alternate;
}
@keyframes logoGlow {
    from {
        filter: drop-shadow(0 0 10px rgba(255,215,0,0.5))
                drop-shadow(0 0 22px rgba(255,180,0,0.25));
    }
    to {
        filter: drop-shadow(0 0 26px rgba(255,215,0,0.95))
                drop-shadow(0 0 52px rgba(255,180,0,0.55));
    }
}

/* --- Dropdown login en navbar: más armónico --- */
.login-form-right .dropdown-toggle {
    position: relative;
}
.login-form-right .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 8px) !important;
    min-width: 260px !important;
    padding: 18px 20px !important;
    border-radius: 10px !important;
    background: rgba(10,8,5,0.97) !important;
    border: 1px solid rgba(255,185,0,0.3) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
}
.login-form-right .dropdown-menu .form-control {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,185,0,0.2) !important;
    color: #fff !important;
    border-radius: 4px !important;
    margin-bottom: 8px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
}
.login-form-right .dropdown-menu .form-control:focus {
    border-color: rgba(255,185,0,0.5) !important;
    background: rgba(255,185,0,0.07) !important;
    box-shadow: 0 0 0 2px rgba(255,185,0,0.15) !important;
}
.login-form-right .btn_login,
.login-form-right button[type="submit"] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    color: #fff !important;
    padding: 10px !important;
    box-shadow: 0 3px 12px rgba(245,158,11,0.35) !important;
    transition: all 0.2s !important;
    margin-top: 4px !important;
}
.login-form-right button[type="submit"]:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    box-shadow: 0 5px 18px rgba(245,158,11,0.55) !important;
}
/* Texto "¿No tienes cuenta?" dentro del dropdown */
.login-form-right .dropdown-menu > div[style] {
    color: #b0a080 !important;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 10px;
}
.login-form-right .dropdown-menu a[style*="ffd500"] {
    color: #ffd700 !important;
    font-weight: 600;
}

/* Centrado vertical del botón INICIAR SESIÓN en navbar */
.navbar-right .server-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.navbar .navbar-nav {
    align-items: center;
}

/* --- Sidenav: padding inferior y efecto glow al hacer clic/hover --- */
.floating-navigation {
    padding-bottom: 12px !important;
}
.floating-navigation .float-nav-ul {
    padding-bottom: 8px;
}
.floating-navigation .ragna-nav-mobile a {
    transition: filter 0.18s, transform 0.15s;
    border-radius: 6px;
}
.floating-navigation .ragna-nav-mobile a:hover {
    filter: drop-shadow(0 0 8px rgba(255,185,0,0.7)) brightness(1.15);
    transform: translateX(2px);
}
.floating-navigation .ragna-nav-mobile a:active,
.floating-navigation .ragna-nav-mobile a:focus {
    filter: drop-shadow(0 0 14px rgba(255,215,0,0.9)) brightness(1.3);
    transform: scale(1.07);
}
.floating-navigation .ragna-nav-mobile img {
    transition: filter 0.18s;
}

/* --- Páginas internas: formularios genéricos mejorados --- */
.section-main .generic-form .form-control,
.section-main .col-6 .form-control,
.generic-form .form-group input.form-control,
.generic-form .form-group select.form-control {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,185,0,0.2) !important;
    border-radius: 4px !important;
    color: #f0e8d0 !important;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.92rem;
    padding: 10px 14px !important;
    transition: border-color 0.2s, background 0.2s;
}
.section-main .generic-form .form-control:focus,
.generic-form .form-group input.form-control:focus {
    background: rgba(255,185,0,0.07) !important;
    border-color: rgba(255,185,0,0.5) !important;
    box-shadow: 0 0 0 2px rgba(255,185,0,0.15) !important;
    color: #fff !important;
    outline: none;
}
.section-main .generic-form label,
.generic-form .form-group label {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #c4a96e !important;
    margin-bottom: 5px !important;
    display: block;
}
.section-main .generic-form .btn-secondary,
.section-main .generic-form button[type="submit"]:not(.vote-button):not(.vote-ready) {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.08em !important;
    color: #fff !important;
    padding: 12px !important;
    box-shadow: 0 3px 12px rgba(245,158,11,0.35) !important;
    transition: all 0.2s !important;
}
.section-main .generic-form .btn-secondary:hover,
.section-main .generic-form button[type="submit"]:not(.vote-button):not(.vote-ready):hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    box-shadow: 0 5px 18px rgba(245,158,11,0.5) !important;
    transform: translateY(-1px);
}

/* Botón de votación (VoteForPoints): solo la imagen del banner, sin marco naranja */
.section-main .generic-form button[type="submit"].vote-button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-block;
}
.section-main .generic-form button[type="submit"].vote-button:hover {
    background: none !important;
    box-shadow: none !important;
    transform: none;
}
.vote-button .vote-site-name {
    display: block;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    color: #ffd700;
    margin-top: 4px;
    text-align: center;
}

/* Aviso de invitación a votar: más grande, centrado, naranjo con texto negro */
p.message.vote-notice {
    background: #f59e0b !important;
    color: #1a1410 !important;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.5;
}

/* Saldo de puntos de votación destacado */
.vote-points-highlight {
    color: #f59e0b;
    font-weight: 700;
    font-size: 1.15em;
}

/* "Recordar mis credenciales" — presente en los tres formularios de login
   (página de login, menú superior y portada). Toda la etiqueta es clickeable,
   que en móvil es la diferencia entre poder marcarla y no. */
/* Se compite con `.section-main .generic-form label`, que fuerza display:block,
   mayúsculas y color dorado con !important para las etiquetas de campo. Esto no
   es una etiqueta de campo sino una opción, así que va en caja baja y en tono
   secundario: debe leerse como algo que se elige, no como el nombre de un input. */
label.remember-me,
.section-main .generic-form label.remember-me {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    cursor: pointer;
    font-family: 'Exo 2', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #c4b89a !important;
    user-select: none;
}
.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #f59e0b;
    cursor: pointer;
}
.remember-me:hover span,
.section-main .generic-form label.remember-me:hover span {
    color: #ffd700;
}
.remember-me input[type="checkbox"]:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

/* Saldo de puntos de votación */
.vote-balance {
    text-align: center;
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
}

/* Texto de ayuda debajo de la tabla de votación */
.vote-help-text {
    display: block;
    margin-top: 10px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.85rem;
    color: #c4b89a;
    text-align: center;
}

/* Aviso de puntos por recibir: aparece solo cuando el jugador tiene saldo
   esperando y le dice qué hacer para cobrarlo (volver a entrar al juego).
   Es una recompensa pendiente, no un error, asi que se ve como premio. */
.vote-pending-notice {
    display: table;
    margin: 12px auto 0;
    padding: 10px 18px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.55);
    border-radius: 8px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    color: #ffd700;
    text-align: center;
    line-height: 1.45;
}
.vote-pending-notice strong {
    font-size: 1.15em;
    color: #fbbf24;
}

/* Badge de aviso: recuerda volver a entrar al juego para ver los puntos */
.vote-help-badge {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    padding: 6px 14px;
    background: rgba(245,158,11,0.15);
    border: 1px solid rgba(245,158,11,0.5);
    border-radius: 20px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: #ffd700;
    text-align: center;
}

/* Grilla de sitios de votación
   ---------------------------------------------------------------------------
   Antes esto era una tabla de 4 columnas con min-width: 640px dentro de un
   contenedor con overflow-x. En un teléfono de 360px eso obligaba a arrastrar
   de lado para responder la única pregunta que trae al jugador a esta página:
   "¿puedo votar ahora?". Cada sitio pasa a ser una tarjeta autónoma en una
   grilla que fluye —una columna en móvil, las que quepan en pantallas anchas—
   y el estado es el elemento más fuerte de la tarjeta. */
/* auto-fit, NO auto-fill: auto-fill deja creadas las columnas que sobran, asi
   que con 3 sitios en una pantalla ancha las tarjetas quedaban angostas y
   apiladas a la izquierda con un hueco enorme al lado. auto-fit colapsa las
   columnas vacias y reparte el ancho real entre las tarjetas que existen.
   El max-width evita el extremo opuesto (tarjetas desmesuradas si algun dia
   queda un solo sitio) y centra el bloque en el contenedor. */
.vote-grid {
    list-style: none;
    margin: 18px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.vote-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 14px 14px;
    border: 1px solid rgba(196,169,110,0.25);
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(42,33,22,0.9), rgba(24,19,13,0.9));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Un sitio disponible se lee de inmediato: borde encendido y elevación.
   Uno en espera se apaga, pero sin llegar a ser ilegible. */
.vote-card.is-ready {
    border-color: rgba(245,158,11,0.5);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(245,158,11,0.1);
}
.vote-card.is-waiting {
    border-color: rgba(196,169,110,0.15);
    background: linear-gradient(160deg, rgba(30,25,18,0.9), rgba(20,16,11,0.9));
}

/* El banner completo es el área tocable; en móvil ocupa todo el ancho útil
   de la tarjeta, muy por encima del mínimo cómodo para el pulgar. */
.section-main .generic-form button[type="submit"].vote-button {
    width: 100%;
    display: block;
    cursor: pointer;
    border-radius: 6px !important;
}
.section-main .generic-form button[type="submit"].vote-button:disabled {
    cursor: default;
}
.section-main .generic-form button[type="submit"].vote-button:focus-visible {
    outline: 2px solid #fbbf24 !important;
    outline-offset: 3px;
}

.vote-banner {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}
/* Los banners de los TOP son de 468x60. Se dejan crecer hasta ocupar la
   tarjeta, pero topados en su ancho nativo: pasado eso solo se verian
   borrosos, que era justo el problema de leerlos en pantallas grandes. */
.vote-banner img {
    display: block;
    width: 100%;
    max-width: 468px;
    margin: 0 auto;
    height: auto;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.vote-card.is-waiting .vote-banner img {
    filter: grayscale(0.75) brightness(0.55);
}
.vote-card.is-ready .vote-button:hover .vote-banner img {
    transform: scale(1.03);
}

.vote-card.is-waiting .vote-site-name {
    color: #8c8068;
}

/* Puntos e intervalo: contexto secundario, en una sola línea discreta. */
.vote-meta {
    margin: 0;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.78rem;
    color: #a09070;
    text-align: center;
}
.vote-meta-points {
    color: #c4a96e;
    font-weight: 600;
}
.vote-meta-sep {
    margin: 0 5px;
    opacity: 0.5;
}

/* Estado: el elemento más fuerte de la tarjeta.
   position: relative para anclar el tooltip al centro de la fila y no al
   icono, que está pegado al borde izquierdo: colgándolo del icono se saldría
   de la tarjeta en pantallas angostas. */
.vote-state {
    position: relative;
    margin: 0;
    min-height: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
}

/* Icono "i" — explica la espera. Se ve como algo pulsable sin gritar. */
.section-main .generic-form button.vote-info,
button.vote-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0 !important;
    flex: 0 0 auto;
    border: none !important;
    border-radius: 50% !important;
    background: none !important;
    box-shadow: none !important;
    color: #8c8068;
    cursor: pointer;
    transition: color 0.15s ease;
}
.section-main .generic-form button.vote-info:hover,
button.vote-info:hover,
button.vote-info[aria-expanded="true"] {
    background: none !important;
    color: #fbbf24;
}
button.vote-info:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}
button.vote-info svg { width: 15px; height: 15px; }

/* Tooltip. Oculto por defecto; aparece al pasar el mouse o enfocar el icono
   (escritorio) y al tocarlo (la clase la pone el JS, porque en móvil no hay
   :hover). visibility además de opacity para que no capture toques invisible.
   Se despliega hacia ABAJO a propósito: hacia arriba tapaba el banner, que es
   justo lo que el jugador tiene que ver y tocar para votar. */
.vote-tip {
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    z-index: 20;
    width: max-content;
    max-width: min(250px, 90vw);
    padding: 9px 12px;
    border: 1px solid rgba(245,158,11,0.45);
    border-radius: 8px;
    background: #241c12;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    color: #d8ccb0;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.vote-tip strong { color: #fbbf24; font-weight: 700; }

/* Punta del globo, apuntando hacia arriba al contador que explica. */
.vote-tip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-bottom-color: #241c12;
}

.vote-info:hover ~ .vote-tip,
.vote-info:focus-visible ~ .vote-tip,
.vote-state.tip-abierto .vote-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .vote-tip { transition: none; transform: translateX(-50%); }
    .vote-info:hover ~ .vote-tip,
    .vote-info:focus-visible ~ .vote-tip,
    .vote-state.tip-abierto .vote-tip { transform: translateX(-50%); }
}

/* La cuenta regresiva usa cifras tabulares para que no baile al correr
   los segundos. */
.vote-countdown {
    font-family: 'Exo 2', sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #c4b89a;
}

/* Mientras se confirma un voto, los banners quedan inertes. */
.vote-form.is-submitting .vote-card {
    opacity: 0.55;
    pointer-events: none;
}

@media (max-width: 400px) {
    .vote-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* "Disponible para votar": la señal que el jugador viene a buscar. Es la
   única pieza del panel que se permite brillar, y late en el borde —no
   escalando el texto— para que siga siendo legible mientras se anima. */
.vote-ready,
.section-main .generic-form button.vote-ready {
    display: inline-block;
    /* Área cómoda para el pulgar: los jugadores lo pulsan porque parece un
       botón, y ahora efectivamente vota igual que el banner. */
    padding: 8px 18px !important;
    border: 1px solid rgba(245,158,11,0.6) !important;
    border-radius: 999px !important;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.03em !important;
    color: #fbbf24 !important;
    background: rgba(245,158,11,0.1) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    animation: vote-ready-pulse 1.8s ease-in-out infinite;
}
.section-main .generic-form button.vote-ready:hover {
    background: rgba(245,158,11,0.24) !important;
    color: #ffd700 !important;
    transform: none;
}
button.vote-ready:focus-visible {
    outline: 2px solid #fbbf24 !important;
    outline-offset: 3px;
}
button.vote-ready:disabled {
    cursor: default;
    animation: none;
    opacity: 0.5;
}
@keyframes vote-ready-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.35); }
    50%      { box-shadow: 0 0 12px 2px rgba(245,158,11,0.3); }
}

@media (prefers-reduced-motion: reduce) {
    .vote-ready { animation: none; }
    .vote-card,
    .vote-banner img,
    .section-main .generic-form button[type="submit"].vote-button {
        transition: none !important;
    }
    .vote-card.is-ready .vote-button:hover .vote-banner img { transform: none; }
}
/* Textos de info en formularios internos */
.section-main .generic-form p,
.generic-form .form-group p {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.82rem;
    color: #a09070 !important;
    margin-top: 3px;
    margin-bottom: 0;
}
/* Headings de páginas internas */
.section-main h2 {
    font-family: 'Cinzel', serif !important;
    color: #ffd700 !important;
    font-size: 1.5rem !important;
    margin-bottom: 20px !important;
}
/* Links internos */
.section-main a,
.generic-form a {
    color: #f59e0b;
    transition: color 0.2s;
}
.section-main a:hover,
.generic-form a:hover {
    color: #ffd700;
    text-decoration: none;
}
/* Mensajes de error */
.section-main .red,
.generic-form .red {
    color: #ff6b6b !important;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    background: rgba(255,50,50,0.1);
    border: 1px solid rgba(255,50,50,0.3);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

/* --- Rates banner en section-feature --- */
.ro-rates-banner {
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,185,0,0.3);
    border-radius: 10px;
    padding: 16px 8px;
}
.ro-rate-value {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    color: #ffd700;
    font-weight: 700;
    line-height: 1;
}
.ro-rate-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a09070;
    margin-top: 4px;
}

/* --- Cards de características --- */
.ro-feat-card {
    background: rgba(0,0,0,0.68);
    border: 1px solid rgba(255,185,0,0.2);
    border-radius: 8px;
    padding: 16px 18px;
    height: 100%;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ro-feat-card:hover {
    border-color: rgba(255,185,0,0.5);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.ro-feat-card h5 {
    font-family: 'Cinzel', serif;
    color: #ffd700;
    font-size: 0.95rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,185,0,0.15);
}
.ro-feat-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ro-feat-card ul li {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.82rem;
    color: #c4b89a;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ro-feat-card ul li:last-child { border-bottom: none; }

/* --- Botón "Ver información completa" --- */
.ro-btn-info {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff !important;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 4px;
    padding: 12px 28px;
    text-decoration: none !important;
    box-shadow: 0 3px 12px rgba(245,158,11,0.35);
    transition: all 0.2s;
}
.ro-btn-info:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 5px 18px rgba(245,158,11,0.5);
    transform: translateY(-1px);
    color: #fff !important;
}

/* ============================================================
   POPUP DE BIENVENIDA
   ============================================================ */

#ro-promo-popup {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.88);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ro-promo-close {
    transition: transform 0.15s ease, background 0.15s ease !important;
}
#ro-promo-close:hover {
    transform: scale(1.12) !important;
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
}

/* ============================================================
   GALERÍA — Slick slider + Fancybox lightbox
   ============================================================ */

#section-gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 50px;
    background: linear-gradient(180deg, #0d0d1a 0%, #111122 60%, #0a0a14 100%);
    position: relative;
    z-index: 2;
}
.ro-gallery-slider { padding: 0 16px; }
.ro-gallery-slider .slick-slide {
    padding: 0 10px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.ro-gallery-slider .slick-slide:not(.slick-active) {
    opacity: 0.5;
    transform: scale(0.9);
}
.ro-gallery-slider .slick-center {
    opacity: 1 !important;
    transform: scale(1) !important;
}
.ro-gallery-slider .slick-slide img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgba(255,185,0,0.15);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: block;
}
.ro-gallery-slider .slick-slide a:hover img {
    border-color: rgba(255,185,0,0.55);
    box-shadow: 0 8px 28px rgba(0,0,0,0.7);
}
.ro-gallery-slider .slick-dots { bottom: -28px; }
.ro-gallery-slider .slick-dots li button:before {
    color: #f59e0b;
    font-size: 10px;
}
.ro-gallery-slider .slick-dots li.slick-active button:before { color: #ffd700; }
.ro-gallery-slider .slick-prev:before,
.ro-gallery-slider .slick-next:before { color: #f59e0b; font-size: 22px; }

/* ============================================================
   RESPONSIVE — Sidenav + Mobile + Tablet
   ============================================================ */

/* Constrain todas las imágenes del sidenav (arregla SVG gigante de TikTok) */
.floating-navigation .float-nav-ul li a img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
}
.ragna-nav-social li a img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
}

/* --- Tablet (≤1024px) --- */
@media (max-width: 1024px) {
    .ro-rate-value { font-size: 1.3rem; }
    .ro-rate-label { font-size: 0.72rem; }
    .ro-feat-card  { padding: 14px; }
    .ro-feat-card h5 { font-size: 0.88rem; }
    .ro-info-block { padding: 14px 16px; }
}

/* --- Mobile (≤767px) --- */
@media (max-width: 767px) {
    /* Sidenav: ocultar labels y panel inferior en mobile */
    .floating-navigation .ragna-nav-mobile span { display: none !important; }
    .floating-navigation .social-links { display: none !important; }
    /* El tema base (custom.skyzone.css) esconde el sidenav fuera de
       pantalla (left:-100%) por defecto en este breakpoint y solo lo
       muestra con la clase .in (hamburguesa). Acá queremos que quede
       SIEMPRE visible como columna angosta de íconos (igual que en
       tablet), ya que el layout reserva ese espacio con padding-left
       en .section-main > .container. */
    .floating-navigation { width: 64px !important; left: 0 !important; padding: 10px 8px !important; touch-action: pan-y !important; }
    .floating-navigation .float-nav-ul li { width: 44px !important; }
    .floating-navigation .float-nav-ul li a { width: 44px !important; height: 44px !important; }

    /* Navbar collapse: no bloquear scroll de página cuando está abierto */
    .navbar-collapse.show { max-height: 70vh; overflow-y: auto; }
    body.navbar-open { overflow: auto !important; }

    /* Contenido: margen izquierdo para no quedar bajo el sidenav */
    .section-main > .container {
        padding-left: 72px !important;
        padding-right: 16px !important;
    }
    #section-home > .container,
    #section-feature > .container,
    #section-job > .container-fluid {
        padding-left: 72px !important;
        padding-right: 8px !important;
    }

    /* Rates banner */
    .ro-rate-value { font-size: 1.1rem; }
    .ro-rate-label { font-size: 0.62rem; letter-spacing: 0.03em; }
    .ro-rates-banner { padding: 12px 4px; }

    /* Feature cards */
    .ro-feat-card { margin-bottom: 10px; padding: 12px; }
    .ro-feat-card h5 { font-size: 0.85rem; }

    /* Botón info full-width */
    .ro-btn-info { display: block; text-align: center; padding: 10px 16px; }

    /* Hero login box */
    #section-home .container > .row:first-child { min-height: 70vh; }
    .splash-box { padding: 16px !important; }

    /* Título sección feature */
    #section-feature h2 .stitle { font-size: 1.35rem !important; }

    /* Server info: stats más pequeños */
    .col-4 > div[style*="font-size:2rem"],
    .col-4 > div[style*="font-size: 2rem"] { font-size: 1.4rem !important; }

    /* Navbar logo más pequeño */
    .navbar-brand img { max-height: 44px !important; }

    /* Tabla interna */
    .vertical-table th { font-size: 0.7rem; padding: 8px; width: 38%; }
    .vertical-table td { padding: 8px; font-size: 0.8rem; }
    .vertical-table input[type="text"],
    .vertical-table input[type="email"] { max-width: 100%; }

    /* Server info: formularios internos */
    .section-main .col-6 { padding-left: 8px !important; padding-right: 8px !important; }
}

/* --- Small mobile (≤480px) --- */
@media (max-width: 480px) {
    .ro-rate-value { font-size: 0.95rem; }
    .ro-rate-label { font-size: 0.58rem; }
    .ro-rates-banner { padding: 10px 2px; }
    .col-4 > div[style*="font-size:2rem"],
    .col-4 > div[style*="font-size: 2rem"] { font-size: 1.2rem !important; }
}