/* =============================================
   FIX PARA ESCALADO WINDOWS 125% - AGREGAR AL INICIO DEL CSS
   ============================================= */

/* Detectar escalado Windows 125% y compensar automáticamente */
@media screen and (min-resolution: 120dpi) and (max-resolution: 143dpi),
       screen and (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.49),
       screen and (min-device-pixel-ratio: 1.25) and (max-device-pixel-ratio: 1.49) {
    
    /* Aplicar escala 0.8 solo cuando Windows esté al 125% */
    html {
        transform: scale(0.8) !important;
        transform-origin: top left !important;
        width: 125% !important;
        height: 125% !important;
    }
    
    /* Ajustar el fondo para que cubra completamente la pantalla escalada */
    .video-background {
        transform: none !important;
        width: 125vw !important;
        height: 125vh !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .video-background video,
    .video-background img,
    .video-background #background-image {
        min-width: 125% !important;
        min-height: 125% !important;
        width: 125% !important;
        height: 125% !important;
        transform: none !important;
        object-fit: cover !important;
    }
}

/* Para Windows 150% (por si acaso) */
@media screen and (min-resolution: 144dpi) and (max-resolution: 167dpi),
       screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
       screen and (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 1.74) {
    
    html {
        transform: scale(0.667) !important;
        transform-origin: top left !important;
        width: 150% !important;
        height: 150% !important;
    }
    
    .video-background {
        transform: scale(1.5) !important;
        transform-origin: center center !important;
    }
}

/* Para Windows 175% */
@media screen and (min-resolution: 168dpi) and (max-resolution: 191dpi),
       screen and (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.99),
       screen and (min-device-pixel-ratio: 1.75) and (max-device-pixel-ratio: 1.99) {
    
    html {
        transform: scale(0.571) !important;
        transform-origin: top left !important;
        width: 175% !important;
        height: 175% !important;
    }
    
    .video-background {
        transform: scale(1.75) !important;
        transform-origin: center center !important;
    }
}

/* Asegurar que en Windows 100% no se aplique ningún escalado */
@media screen and (max-resolution: 119dpi),
       screen and (-webkit-max-device-pixel-ratio: 1.24),
       screen and (max-device-pixel-ratio: 1.24) {
    
    html {
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .video-background {
        transform: none !important;
    }
}



@font-face {
    font-family: 'Neue Helvetica Pro';
    src: url('../fonts/NeueHelveticaPro-Thin.html') format('woff2'),
         url('../fonts/NeueHelveticaPro-Thin-2.html') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   MODAL DE BIENVENIDA PERSONALIZABLE
   ============================================= */

.welcome-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.welcome-modal.show {
    display: flex;
    opacity: 1;
}

.welcome-modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 2px solid #ffd700;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}

.welcome-modal.show .welcome-modal-content {
    transform: scale(1);
}

.welcome-modal-header {
    position: relative;
    padding: 10px;
    text-align: right;
}

.welcome-modal-close {
    background: none;
    border: none;
    color: #ffd700;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
}

.welcome-modal-close:hover {
    background-color: rgba(255, 215, 0, 0.2);
    transform: scale(1.1);
}

.welcome-modal-body {
    padding: 0 30px 30px 30px;
    text-align: center;
}

.welcome-modal-image {
    margin-bottom: 20px;
}

.welcome-modal-image img {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.welcome-modal-image img:hover {
    transform: scale(1.05);
}

.welcome-modal-text h2 {
    color: #ffd700;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.welcome-modal-text p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .welcome-modal-content {
        max-width: 95%;
        margin: 20px;
    }
    
    .welcome-modal-text h2 {
        font-size: 20px;
    }
    
    .welcome-modal-text p {
        font-size: 14px;
    }
    
    .welcome-modal-image img {
        max-width: 120px;
        max-height: 120px;
    }
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.video-background video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    padding-top: 10%;
}

/* Estilos para el logo */
.logo {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 500px;
    text-align: center;
}

.logo img {
    width: 100%;
    height: auto;
}

/* Selector de Idioma - Dropdown en Panel de Login */
.login-language-selector,
.profile-language-selector {
    position: relative;
    z-index: 10;
}

.language-dropdown-container {
    position: relative;
}

.language-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.language-dropdown-toggle:hover {
    background: rgba(100, 181, 246, 0.15);
    border-color: rgba(100, 181, 246, 0.4);
    color: #64B5F6;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.2);
}

.language-dropdown-toggle:active {
    transform: scale(0.98);
}

.language-dropdown-toggle img {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.language-dropdown-toggle span {
    min-width: 30px;
    text-align: center;
}

.language-dropdown-toggle i {
    font-size: 10px;
    transition: transform 0.3s ease;
    margin-left: 2px;
}

.language-dropdown-container.active .language-dropdown-toggle i {
    transform: rotate(180deg);
}

.language-dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    min-width: 180px;
    background: rgba(15, 15, 25, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 181, 246, 0.3);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    list-style: none;
    margin: 0;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.language-dropdown-container.active .language-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-dropdown-item {
    margin: 0;
    padding: 0;
}

.language-dropdown-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', 'Montserrat', sans-serif;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}

.language-dropdown-item a:hover {
    background: rgba(100, 181, 246, 0.15);
    color: #64B5F6;
    transform: translateX(3px);
}

.language-dropdown-item.active a {
    background: rgba(100, 181, 246, 0.2);
    color: #64B5F6;
    border-left: 3px solid #64B5F6;
}

.language-dropdown-item a img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.language-dropdown-item a span {
    flex: 1;
}

.language-dropdown-item a i {
    font-size: 12px;
    color: #64B5F6;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.language-dropdown-item.active a i {
    opacity: 1;
}

/* Scrollbar personalizado para el dropdown */
.language-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.language-dropdown-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.language-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(100, 181, 246, 0.3);
    border-radius: 3px;
}

.language-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 181, 246, 0.5);
}

/* Estilos para la descripción central */
.central-description {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 80%;
    max-width: 1000px;
    text-align: center;
}

.description-container {
    background-color: rgba(0, 0, 0, 0.2);
    /* Fondo negro semi-transparente */
    backdrop-filter: blur(5px);
    /* Desenfoque del fondo */
    -webkit-backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.description-text {
    color: white;
    font-family: 'Neue Helvetica Pro', 'Inter', sans-serif;
    font-weight: 100;
    font-size: 2.5rem;
    line-height: 1.3;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
    opacity: 0.9;
}

.description-subtext {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Neue Helvetica Pro', 'Inter', sans-serif;
    font-weight: 100;
    font-size: 1.2rem;
    margin-top: 20px;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Estilos para los iconos sociales */
.social-icons {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(15, 15, 20, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    color: white;
    font-size: 24px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-icons a:hover {
    transform: scale(1.1) translateX(-5px);
    background: rgba(25, 25, 35, 0.8);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Estilos para los botones modales */
.modal-buttons {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-button {
    display: flex;
    align-items: center;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-left: 4px solid rgba(255, 255, 255, 0.5);
    min-width: 160px;
}

.modal-button:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    background: rgba(15, 15, 25, 0.9);
}

.modal-button i {
    margin-right: 15px;
    font-size: 22px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
}

.modal-button span {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.noticias-btn {
    border-left-color: #64B5F6;
}

.noticias-btn i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.registro-btn {
    border-left-color: #4CAF50;
}

.registro-btn i {
    background-color: rgba(76, 175, 80, 0.15);
}

.descarga-btn {
    border-left-color: #2196F3;
}

.descarga-btn i {
    background-color: rgba(33, 150, 243, 0.15);
}

.ranking-btn {
    border-left-color: #FFC107;
}

.ranking-btn i {
    background-color: rgba(255, 193, 7, 0.15);
}

/* Botón de Evento Halloween */
.halloween-event-btn {
    background: linear-gradient(135deg, #1a0d0d, #2d1b1b, #3d1a1a);
    border: 2px solid #ff6b35;
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3), 0 0 20px rgba(255, 140, 66, 0.1);
    width: 280px;
    height: 120px;
}

.halloween-event-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5), 0 0 30px rgba(255, 140, 66, 0.3);
    border-color: #ff8c42;
}

.halloween-event-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 107, 53, 0.1), transparent);
    animation: halloweenShimmer 3s linear infinite;
    pointer-events: none;
}

@keyframes halloweenShimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.halloween-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 2;
}

.halloween-pumpkin {
    font-size: 3rem;
    animation: pumpkinGlow 2s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 10px #ff6b35);
}

@keyframes pumpkinGlow {
    from {
        filter: drop-shadow(0 0 5px #ff6b35);
    }

    to {
        filter: drop-shadow(0 0 15px #ff8c42);
    }
}

.halloween-text {
    flex: 1;
    text-align: center;
    margin: 0 15px;
}

.event-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff6b35;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.event-subtitle {
    font-size: 0.9rem;
    color: #ffa726;
    text-shadow: 0 0 8px rgba(255, 167, 38, 0.4);
}

.halloween-effects {
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.halloween-effects span {
    font-size: 1.2rem;
    opacity: 0.8;
}

.sparkle {
    animation: sparkleRotate 2s linear infinite;
}

.bat {
    animation: batFly 4s ease-in-out infinite;
}

.ghost {
    animation: ghostFloat 3s ease-in-out infinite;
}

@keyframes sparkleRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes batFly {

    0%,
    100% {
        transform: translateX(0px) rotate(0deg);
    }

    25% {
        transform: translateX(-5px) rotate(-10deg);
    }

    75% {
        transform: translateX(5px) rotate(10deg);
    }
}

@keyframes ghostFloat {

    0%,
    100% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.1);
    }
}

.ruleta-vip-btn {
    border-left-color: #E91E63;
}

.ruleta-vip-btn i {
    background-color: rgba(233, 30, 99, 0.15);
}

/* Estilos para los modales */
.modal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.modal.active,
.modal[style*="flex"] {
    display: flex !important;
}

/* Loading Modal */
.loading-modal {
    z-index: 20000 !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.loading-content {
    text-align: center;
    color: white;
}

.spinner-container {
    margin-bottom: 20px;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid #4CAF50;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-top: 15px;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 30000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.toast {
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.98), rgba(10, 10, 20, 0.98));
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border-left: 4px solid;
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: slideInLeft 0.3s ease-out;
    min-width: 300px;
    max-width: 400px;
}

.toast.success {
    border-left-color: #4CAF50;
}

.toast.error {
    border-left-color: #F44336;
}

.toast.warning {
    border-left-color: #FF9800;
}

.toast.info {
    border-left-color: #2196F3;
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: #4CAF50;
}

.toast.error .toast-icon {
    color: #F44336;
}

.toast.warning .toast-icon {
    color: #FF9800;
}

.toast.info .toast-icon {
    color: #2196F3;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s;
}

.toast-close:hover {
    color: rgba(255, 255, 255, 1);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOutLeft 0.3s ease-out forwards;
}

/* Ranking Table Styles for Modal */
.ranking-table-wrapper {
    margin: 20px 0;
}

.ranking-table-wrapper table.rankings-table,
.ranking-table-wrapper .rankings-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
}

.ranking-table-wrapper table.rankings-table tr,
.ranking-table-wrapper .rankings-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s;
}

.ranking-table-wrapper table.rankings-table tr:hover,
.ranking-table-wrapper .rankings-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.ranking-table-wrapper table.rankings-table tr:first-child,
.ranking-table-wrapper .rankings-table tr:first-child {
    background: rgba(76, 175, 80, 0.2);
    font-weight: 600;
}

.ranking-table-wrapper table.rankings-table td,
.ranking-table-wrapper .rankings-table td {
    padding: 12px 15px;
    color: #fff;
    text-align: left;
    font-size: 14px;
}

.ranking-table-wrapper table.rankings-table tr:first-child td,
.ranking-table-wrapper .rankings-table tr:first-child td {
    color: #4CAF50;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.ranking-table-wrapper .rankings-table-place {
    text-align: center;
    font-weight: 700;
    color: #10b981;
    width: 50px;
}

.ranking-table-wrapper .rankings-class-image {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

.ranking-table-wrapper .online-status-indicator {
    width: 12px;
    height: 12px;
    margin-left: 8px;
    vertical-align: middle;
}

.ranking-table-wrapper .rankings-update-time {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Scrollbar personalizado para la tabla */
.ranking-table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ranking-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.ranking-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(76, 175, 80, 0.5);
    border-radius: 4px;
}

.ranking-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(76, 175, 80, 0.7);
}

.modal-content {
    background: linear-gradient(135deg, rgba(15, 15, 20, 0.97), rgba(5, 5, 10, 0.95));
    border-radius: 20px;
    width: 90%;
    max-width: 550px;
    position: relative;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal.active .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.4);
}

.modal-title {
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.modal-title i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.noticias-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

/* Headers de modales con paleta azul adaptada al fondo oscuro */
.registro-modal .modal-header,
.descarga-modal .modal-header,
.ranking-modal .modal-header,
.info-modal .modal-header,
.eventos-modal .modal-header {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(76, 175, 80, 0.1));
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
    padding: 20px 25px;
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo animado en los headers (similar al modal de términos) */
.registro-modal .modal-header::before,
.descarga-modal .modal-header::before,
.ranking-modal .modal-header::before,
.info-modal .modal-header::before,
.eventos-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

/* Asegurar que el título esté por encima del efecto */
.registro-modal .modal-title,
.descarga-modal .modal-title,
.ranking-modal .modal-title,
.info-modal .modal-title,
.eventos-modal .modal-title {
    position: relative;
    z-index: 1;
}

.registro-modal .close-modal,
.descarga-modal .close-modal,
.ranking-modal .close-modal,
.info-modal .close-modal,
.eventos-modal .close-modal {
    position: relative;
    z-index: 1;
}

.registro-modal .modal-header .modal-title,
.descarga-modal .modal-header .modal-title,
.ranking-modal .modal-header .modal-title,
.info-modal .modal-header .modal-title,
.eventos-modal .modal-header .modal-title {
    position: relative;
    z-index: 1;
}

.registro-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.descarga-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.ranking-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.info-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.eventos-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.close-modal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
    color: rgba(255, 255, 255, 1);
}

.modal-body {
    padding: 30px 25px;
    min-height: 150px;
    background: rgba(10, 10, 15, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

/* Estilos para el botón de YouTube */
.youtube-button {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 20;
    cursor: pointer;
    transition: all 0.3s ease;
}

.youtube-box {
    display: flex;
    align-items: center;
    background: rgba(32, 32, 36, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.youtube-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

.youtube-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #FF0000;
    color: white;
    font-size: 24px;
}

.youtube-text {
    padding: 0 15px;
    font-weight: 600;
    color: white;
    font-size: 14px;
    white-space: nowrap;
}

.youtube-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 50px;
    background-color: rgba(255, 0, 0, 0.1);
    color: #FF0000;
    font-size: 24px;
    transition: all 0.2s ease;
}

.youtube-play:hover {
    background-color: rgba(255, 0, 0, 0.2);
}

/* ========================================================================
    AJUSTES PARA UN DISEÑO CONSISTENTE EN TODAS LAS PANTALLAS
    ======================================================================== */

/* Estilos para los iconos sociales */
.social-icons {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(15, 15, 20, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    color: white;
    font-size: 24px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-icons a:hover {
    transform: scale(1.1) translateX(-5px);
    background: rgba(25, 25, 35, 0.8);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Estilos para los botones modales */
.modal-buttons {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-button {
    display: flex;
    align-items: center;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-left: 4px solid rgba(255, 255, 255, 0.5);
    min-width: 160px;
}

.modal-button:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    background: rgba(15, 15, 25, 0.9);
}

.modal-button i {
    margin-right: 15px;
    font-size: 22px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
}

.modal-button span {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.noticias-btn {
    border-left-color: #F44336;
}

.noticias-btn i {
    background-color: rgba(76, 175, 80, 0.15);
}

.registro-btn {
    border-left-color: #4CAF50;
}

.registro-btn i {
    background-color: rgba(76, 175, 80, 0.15);
}

.descarga-btn {
    border-left-color: #2196F3;
}

.descarga-btn i {
    background-color: rgba(33, 150, 243, 0.15);
}

.ranking-btn {
    border-left-color: #FFC107;
}

.ranking-btn i {
    background-color: rgba(255, 193, 7, 0.15);
}

.info-btn {
    border-left-color: #FF9800;
}

.info-btn i {
    background-color: rgba(255, 152, 0, 0.15);
}

/* Estilos para el botón de YouTube */
.youtube-button {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 20;
    cursor: pointer;
    transition: all 0.3s ease;
}

.youtube-box {
    display: flex;
    align-items: center;
    background: rgba(32, 32, 36, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.youtube-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

.youtube-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #FF0000;
    color: white;
    font-size: 24px;
}

.youtube-text {
    padding: 0 15px;
    font-weight: 600;
    color: white;
    font-size: 14px;
    white-space: nowrap;
}

.youtube-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 50px;
    background-color: rgba(255, 0, 0, 0.1);
    color: #FF0000;
    font-size: 24px;
    transition: all 0.2s ease;
}

.youtube-play:hover {
    background-color: rgba(255, 0, 0, 0.2);
}

/* Estilos para el indicador de estado del servidor */
.server-status {
    position: fixed;
    left: 20px;
    bottom: 30px;
    z-index: 20;
    cursor: pointer;
    transition: all 0.3s ease;
}

.status-box {
    display: flex;
    align-items: center;
    background: rgba(32, 32, 36, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.status-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

.status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: white;
    font-size: 24px;
}

.status-icon.online {
    background-color: #4CAF50;
}

.status-icon.offline {
    background-color: #F44336;
}

.status-text {
    padding: 0 15px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.status-label {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.users-count {
    font-size: 12px;
    opacity: 0.8;
    white-space: nowrap;
}

.status-state {
    font-weight: 700;
}

.status-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 18px;
    transition: all 0.2s ease;
}

.status-refresh:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Estilos para el formulario de registro */
.form-group {
    margin-bottom: 20px;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.input-with-icon:focus-within {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.input-with-icon i {
    position: absolute;
    left: 15px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.input-with-icon input {
    width: 100%;
    padding: 15px 15px 15px 50px;
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}

.input-with-icon input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.input-with-icon input:focus {
    outline: none;
}

.register-button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.register-button:hover {
    background: linear-gradient(135deg, #5BBD60, #3C9142);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.register-button:active {
    transform: translateY(0);
}

/* Estilos adicionales para el formulario */
.field-info {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    display: block;
    margin-top: 5px;
    padding-left: 10px;
}

/* Estilos para labels en el modal de registro */
.registro-modal .form-group label {
    display: block;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Estilos para el acuerdo de términos de servicio */
.tos-agreement {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 15px;
}

.tos-agreement a {
    color: #4CAF50;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.tos-agreement a:hover {
    color: #66BB6A;
}

.form-message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 14px;
}

.message-error {
    background-color: rgba(244, 67, 54, 0.1);
    border-left: 3px solid #F44336;
    color: #F44336;
}

.message-success {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 3px solid #4CAF50;
    color: #4CAF50;
}

/* Estilos para la validación en tiempo real de usuario */
.availability-indicator {
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

.availability-indicator i {
    font-size: 14px;
}

.availability-indicator.checking {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.availability-indicator.available {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.availability-indicator.unavailable {
    background-color: rgba(244, 67, 54, 0.1);
    color: #F44336;
}

.availability-indicator.error {
    background-color: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ESTILOS PARA MODAL DE DESCARGAS - NUEVO DISEÑO
   ============================================ */

.download-intro {
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}

/* Sección de host (MediaFire, MEGA, etc.) */
.download-host-section {
    display: flex;
    margin-bottom: 30px;
    background: rgba(10, 10, 15, 0.4);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    justify-content: space-around;
}

.download-host-section:hover {
    background: rgba(15, 15, 20, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Header del host */
.download-host-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.download-host-icon {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.download-host-icon.blue {
    background: linear-gradient(135deg, #0070F0, #0058B7);
    color: white;
}

.download-host-icon.red {
    background: linear-gradient(135deg, #D90000, #A00000);
    color: white;
}

.download-host-icon.gray {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
}

.download-host-info {
    flex: 1;
}

.download-host-name {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.download-host-description {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
    line-height: 1.4;
}

/* Botones de descarga del host */
.download-host-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.download-host-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
}

.download-host-btn i {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.download-host-btn span {
    flex: 1;
    text-align: left;
}

.download-host-btn.blue {
    background: linear-gradient(135deg, #0070F0, #0058B7);
    box-shadow: 0 4px 15px rgba(0, 112, 240, 0.3);
}

.download-host-btn.blue:hover {
    background: linear-gradient(135deg, #0080FF, #0065D1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 112, 240, 0.4);
}

.download-host-btn.red {
    background: linear-gradient(135deg, #D90000, #A00000);
    box-shadow: 0 4px 15px rgba(217, 0, 0, 0.3);
}

.download-host-btn.red:hover {
    background: linear-gradient(135deg, #F00000, #C00000);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 0, 0, 0.4);
}

.download-host-btn.gray {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.download-host-btn.gray:hover {
    background: linear-gradient(135deg, #7a848c, #687076);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

/* Sección de información */
.download-info-section {
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 193, 7, 0.05);
    border-left: 4px solid #FFC107;
    border-radius: 8px;
}

.download-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.6;
}

.download-info-item:last-child {
    margin-bottom: 0;
}

.download-info-item i {
    color: #FFC107;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.download-info-item span {
    flex: 1;
}

/* Estilos legacy (mantener para compatibilidad) */
.download-option {
    display: flex;
    align-items: center;
    background: rgba(10, 10, 15, 0.4);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.download-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 24px;
    flex-shrink: 0;
}

.download-icon.mediafire {
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.download-icon.mega {
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.download-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Estilos para el ranking */
.ranking-container {
    width: 100%;
}

.ranking-title {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
    color: #10b981;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ranking-table-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(10, 10, 15, 0.4);
}

.ranking-table thead {
    background: rgba(15, 15, 20, 0.8);
}

.ranking-table th, 
.ranking-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ranking-table th {
    color: #10b981;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

.ranking-table tbody tr {
    transition: all 0.3s ease;
}

.ranking-table tbody tr:nth-child(even) {
    background: rgba(15, 15, 20, 0.2);
}

/* Miniatura de clase en Ranking */
.ranking-table .class-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ranking-table .class-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transform-origin: left center;
}

.ranking-table .class-icon:hover {
    transform: scale(5.0);
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.ranking-table tbody tr:hover {
    background: rgba(25, 25, 35, 0.4);
}

/* Estilos para los primeros 3 lugares */
.ranking-table tr.first-place {
    background: rgba(255, 215, 0, 0.1) !important;
    border-left: 3px solid gold;
}

.ranking-table tr.second-place {
    background: rgba(192, 192, 192, 0.1) !important;
    border-left: 3px solid silver;
}

.ranking-table tr.third-place {
    background: rgba(205, 127, 50, 0.1) !important;
    border-left: 3px solid #CD7F32;
}

/* Ancho de columnas */
.position-col {
    width: 10%;
    text-align: center;
}

.name-col {
    width: 25%;
}

.country-col {
    width: 10%;
    text-align: center;
}

.status-col {
    width: 15%;
    text-align: center;
}

.level-col, 
.reset-col {
    width: 15%;
    text-align: center;
}

/* Estilos para las banderas de países */
.country-flag {
    font-size: 16px;
    cursor: help;
}

/* Estilos para el estado del jugador */
.status-online {
    color: #28a745;
    font-weight: bold;
    font-size: 12px;
}

.status-offline {
    color: #dc3545;
    font-weight: bold;
    font-size: 12px;
}

/* Estilos para el pie de página del ranking */
.ranking-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ranking-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ranking-info p {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ranking-info i {
    color: #ff6b35;
    font-size: 11px;
}

.update-time {
    color: #FFC107;
    font-weight: 600;
}

/* Estilos para el botón de actualizar ranking */
.refresh-ranking-button {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 10px;
    color: white;
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    min-width: 160px;
}

.refresh-ranking-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
    border-color: rgba(255, 107, 53, 0.5);
    background: linear-gradient(135deg, #f7931e, #ff6b35);
}

/* Estilos para los botones de ranking tipo tabs */
.ranking-tabs {
    display: flex;
    background: transparent;
    border-radius: 15px;
    padding: 10px;
    margin: 20px 0;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ranking-tab {
    flex: 1;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 10px;
    color: white;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin: 0 5px;
}

.ranking-tab:last-child {
    margin-right: 0;
}

.ranking-tab:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
    border-color: rgba(255, 107, 53, 0.5);
    background: linear-gradient(135deg, #f7931e, #ff6b35);
}

.ranking-tab.active {
    background: linear-gradient(135deg, #4a90e2, #357abd);
    border-color: rgba(74, 144, 226, 0.5);
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
    transform: translateY(-2px);
}

/* Estilos específicos para cada tipo de botón */
.ranking-type-btn[data-type="reset"] {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.ranking-type-btn[data-type="reset"]:hover,
.ranking-type-btn[data-type="reset"].active {
    background: linear-gradient(135deg, #20c997, #17a2b8);
}

.ranking-type-btn[data-type="level"] {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.ranking-type-btn[data-type="level"]:hover,
.ranking-type-btn[data-type="level"].active {
    background: linear-gradient(135deg, #0056b3, #004085);
}

.ranking-type-btn[data-type="guild"] {
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
}

.ranking-type-btn[data-type="guild"]:hover,
.ranking-type-btn[data-type="guild"].active {
    background: linear-gradient(135deg, #5a32a3, #4c2a85);
}

.ranking-type-btn[data-type="killer"] {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.ranking-type-btn[data-type="killer"]:hover,
.ranking-type-btn[data-type="killer"].active {
    background: linear-gradient(135deg, #c82333, #a71e2a);
}

/* Estilos para columnas adicionales en la tabla */
.extra-col {
    text-align: center;
    padding: 8px;
    font-weight: 500;
}

/* Responsive para botones de ranking */
@media (max-width: 768px) {
    .ranking-buttons-container {
        gap: 8px;
        padding: 0 10px;
    }
    
    .ranking-type-btn {
        padding: 6px 10px;
        font-size: 11px;
        min-width: 70px;
    }
    
    .ranking-type-btn i {
        font-size: 10px;
    }
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    .logo {
        width: 400px;
        top: 15px;
    }
    
    
    .language-selector-container .webengine-language-switcher li a {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .language-selector-container .webengine-language-switcher li a img {
        width: 18px;
        height: 13px;
    }
    
    .description-container {
        padding: 25px;
    }
    
    .description-text {
        font-size: 1.8rem;
    }
    
    .description-subtext {
        font-size: 1rem;
    }
    
    .modal-button {
        min-width: auto;
        width: 55px;
        padding: 15px;
        border-left: none;
        border-top: 4px solid rgba(255, 255, 255, 0.5);
        justify-content: center;
    }
    
    .modal-button i {
        margin-right: 0;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .modal-button span {
        display: none;
    }
    
    .registro-btn {
        border-top-color: #4CAF50;
    }
    
    .descarga-btn {
        border-top-color: #2196F3;
    }
    
    .ranking-btn {
        border-top-color: #FFC107;
    }
    
    .social-icons a {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .modal-content {
        width: 95%;
        max-width: 350px;
    }
    
    .modal-title {
        font-size: 18px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .youtube-text {
        display: none;
    }
    
    .youtube-box {
        border-radius: 10px;
    }
    
    .status-text {
        display: none;
    }
    
    .status-box {
        border-radius: 10px;
    }
    
    .input-with-icon input {
        padding: 12px 12px 12px 45px;
        font-size: 14px;
    }
    
    .input-with-icon i {
        left: 12px;
        font-size: 16px;
    }
    
    .register-button {
        padding: 12px;
        font-size: 14px;
    }
    
    .download-option {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    
    .download-icon {
        margin-bottom: 10px;
    }
    
    .download-info {
        width: 100%;
        padding-right: 0;
        margin-bottom: 10px;
    }
    
    .download-size {
        margin-bottom: 10px;
    }
    
    .download-button {
        width: 100%;
        padding: 10px;
        justify-content: center;
    }
    
    .ranking-table th, 
    .ranking-table td {
        padding: 10px;
        font-size: 14px;
    }
    
    .ranking-title {
        font-size: 18px;
    }
    
    .position-col {
        width: 15%;
    }
    
    .name-col {
        width: 40%;
    }
}

@media (max-width: 480px) {
    .logo {
        width: 250px;
        top: 10px;
    }
    
    .language-selector-container {
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 6px;
    }
    
    .language-selector-container .webengine-language-switcher {
        gap: 6px;
    }
    
    .language-selector-container .webengine-language-switcher li a {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .language-selector-container .webengine-language-switcher li a img {
        width: 16px;
        height: 12px;
    }
    
    .description-container {
        padding: 20px;
    }
    
    .description-text {
        font-size: 1.5rem;
    }
    
    .description-subtext {
        font-size: 0.9rem;
        margin-top: 15px;
    }
    
    .modal-buttons {
        left: 10px;
        gap: 15px;
    }
    
    .social-icons {
        right: 10px;
        gap: 10px;
    }
    
    .modal-button {
        width: 45px;
        height: 45px;
        padding: 0;
        border-radius: 50%;
    }
    
    .modal-button i {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    
    .social-icons a {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .youtube-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .youtube-play {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .server-status {
        left: 10px;
    }
    
    .status-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .status-refresh {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .ranking-table th, 
    .ranking-table td {
        padding: 8px;
        font-size: 12px;
    }
    
    .position-col .fa-medal {
        display: none;
    }
}

/* Ajustes para animaciones */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Estilos para los nuevos elementos de información del servidor */
.server-info-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 15px;
}

.server-info-box {
    display: flex;
    align-items: center;
    background: rgba(32, 32, 36, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    min-width: 120px;
}

/* Mantenemos el hover para todos */
.server-info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

.server-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: white;
    font-size: 20px;
}

.exp-box .server-info-icon {
    background-color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
}

.drop-box .server-info-icon {
    background-color: #2196F3;
}

.web-box .server-info-icon {
    background-color: #FFC107;
}

.server-info-content {
    padding: 0 15px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.server-info-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.server-info-value {
    font-size: 12px;
    opacity: 0.8;
    white-space: nowrap;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .server-info-container {
        bottom: 80px;
        flex-direction: column;
        gap: 10px;
        width: calc(100% - 40px);
    }
    
    .server-info-box {
        width: 100%;
        justify-content: center;
    }
    
    .server-info-content {
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .server-info-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .server-info-title {
        font-size: 13px;
    }
    
    .server-info-value {
        font-size: 11px;
    }
}

/* Solo el web-box tendrá cursor pointer */
.web-box {
    cursor: pointer;
}

/* Estilos para el modal de Redeem Code */
.redeem-modal .modal-header {
    border-bottom-color: rgba(156, 39, 176, 0.3);
}

.redeem-modal .modal-title i {
    background-color: rgba(156, 39, 176, 0.15);
    color: #9C27B0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 10px;
}

.redeem-intro {
    margin-bottom: 20px;
    font-size: 14px;
    color: #555;
}

.redeem-button {
    display: inline-block;
    background-color: #9C27B0;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

.redeem-button:hover {
    background-color: #7B1FA2;
}

.redeem-button i {
    margin-right: 8px;
}

.redeem-note {
    margin-top: 20px;
    font-size: 12px;
    color: #666;
    background-color: rgba(0, 0, 0, 0.03);
    padding: 10px;
    border-radius: 5px;
    border-left: 3px solid #9C27B0;
}

.redeem-note p {
    margin: 0;
}

.redeem-note i {
    color: #9C27B0;
    margin-right: 5px;
}

/* Estilos para la verificación de usuario en donaciones */
.donation-availability-indicator {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    display: none;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.donation-availability-indicator.available {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border-left-color: #4CAF50;
}

.donation-availability-indicator.available i {
    color: #4CAF50;
    margin-right: 8px;
}

.donation-availability-indicator.unavailable {
    background-color: rgba(244, 67, 54, 0.1);
    color: #F44336;
    border-left-color: #F44336;
}

.donation-availability-indicator.unavailable i {
    color: #F44336;
    margin-right: 8px;
}

.donation-availability-indicator.checking {
    background-color: rgba(255, 152, 0, 0.1);
    color: #FF9800;
    border-left-color: #FF9800;
}

.donation-availability-indicator.checking i {
    color: #FF9800;
    margin-right: 8px;
}

.donation-availability-indicator.error {
    background-color: rgba(158, 158, 158, 0.1);
    color: #9E9E9E;
    border-left-color: #9E9E9E;
}

.donation-availability-indicator.error i {
    color: #9E9E9E;
    margin-right: 8px;
}

/* Animación suave para mostrar/ocultar */
.donation-availability-indicator {
    opacity: 0;
    transform: translateY(-10px);
}

.donation-availability-indicator[style*="block"] {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo especial cuando el campo está enfocado */
#donation-username:focus+.donation-availability-indicator {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* =============================================
   NOTICIAS CENTRALES - ESTILOS COMPLETOS
   ============================================= */

/* NUEVO: Contenedor central de noticias (reemplaza .central-description) */
.central-news-container {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 85%;
    max-width: 700px;
    max-height: 70vh;
    background: linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(45, 45, 62, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 2px solid rgba(244, 67, 54, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: newsAppear 1s ease-out;
}

@keyframes newsAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Header de noticias */
.news-header-main {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(76, 175, 80, 0.1));
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    position: relative;
    overflow: hidden;
}

.news-header-main::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.news-header-main > * {
    position: relative;
    z-index: 1;
}

.news-title-main {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.news-title-main i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.news-live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(33, 150, 243, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid rgba(33, 150, 243, 0.3);
    font-size: 14px;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.2);
}

.news-pulse {
    width: 8px;
    height: 8px;
    background: #64B5F6;
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Filtros de noticias mejorados */
.news-filters-container {
    background: rgba(15, 15, 20, 0.8);
    padding: 15px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.news-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    background: rgba(45, 45, 62, 0.7);
    color: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 8px 18px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 6px;
    outline: none;
}

.filter-btn:hover {
    border-color: rgba(244, 67, 54, 0.5);
    color: #F44336;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(244, 67, 54, 0.2);
}

.filter-btn.active {
    background: linear-gradient(45deg, #F44336, #d32f2f);
    border-color: #F44336;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(244, 67, 54, 0.4);
}

.filter-btn i {
    font-size: 12px;
}

/* Contenedor de noticias con scroll personalizado */
.news-content-container {
    padding: 20px 25px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar personalizado */
.news-content-container::-webkit-scrollbar {
    width: 8px;
}

.news-content-container::-webkit-scrollbar-track {
    background: rgba(30, 30, 46, 0.5);
    border-radius: 4px;
}

.news-content-container::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #F44336, #d32f2f);
    border-radius: 4px;
}

.news-content-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #d32f2f, #b71c1c);
}

/* Lista de noticias */
.news-list {
    display: grid;
    gap: 20px;
}

.news-item {
    background: linear-gradient(135deg, rgba(45, 45, 62, 0.8) 0%, rgba(30, 30, 46, 0.8) 100%);
    border-radius: 15px;
    padding: 20px;
    border-left: 4px solid #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.news-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.05) 0%, transparent 100%);
    z-index: -1;
}

.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(33, 150, 243, 0.3), 0 0 20px rgba(33, 150, 243, 0.2);
    border-left-color: #64B5F6;
}

.news-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.news-item-title {
    color: #64B5F6;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.news-item-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.news-category {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    display: inline-block;
    /* Default style for 'all' category */
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3), rgba(33, 150, 243, 0.2));
    color: #64B5F6;
    border: 1px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.2);
}

/* Category-specific colors */
.news-item[data-category="all"] .news-category,
.news-item[data-category="General"] .news-category {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3), rgba(33, 150, 243, 0.2));
    color: #64B5F6;
    border: 1px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.2);
}

.news-item[data-category="actualización"] .news-category {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.2));
    color: #81C784;
    border: 1px solid rgba(76, 175, 80, 0.3);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
}

.news-item[data-category="evento"] .news-category {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.3), rgba(156, 39, 176, 0.2));
    color: #BA68C8;
    border: 1px solid rgba(156, 39, 176, 0.3);
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.2);
}

.news-item[data-category="mantenimiento"] .news-category {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.3), rgba(255, 152, 0, 0.2));
    color: #FFB74D;
    border: 1px solid rgba(255, 152, 0, 0.3);
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.2);
}

.news-item[data-category="anuncio"] .news-category {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.3), rgba(244, 67, 54, 0.2));
    color: #EF5350;
    border: 1px solid rgba(244, 67, 54, 0.3);
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.2);
}

.news-date {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
}

.news-date i {
    font-size: 12px;
    opacity: 0.8;
}

.news-item-content {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-size: 15px;
    text-align: justify;
}

/* Estados de las noticias */
.news-loading {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.8);
}

.news-loading i {
    font-size: 3em;
    margin-bottom: 20px;
    color: #64B5F6;
    animation: spin 1s linear infinite;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

.news-loading h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #F44336;
}

.news-loading p {
    margin: 0;
    font-size: 16px;
    opacity: 0.8;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Estado vacío */
.news-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 60px 20px;
}

.news-empty i {
    font-size: 4em;
    margin-bottom: 20px;
    color: #F44336;
    opacity: 0.8;
}

.news-empty h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #F44336;
}

.news-empty p {
    margin: 0;
    font-size: 16px;
    opacity: 0.8;
}

/* Responsividad para las noticias centrales */
@media (max-width: 768px) {
    .central-news-container {
        width: 95%;
        max-height: 75vh;
        top: 55%;
    }
    
    .news-header-main {
        padding: 15px 20px;
        flex-direction: column;
        gap: 10px;
    }
    
    .news-title-main {
        font-size: 20px;
    }
    
    .news-title-main i {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
    
    .news-live-indicator {
        font-size: 13px;
        padding: 6px 12px;
    }
    
    .news-filters-container {
        padding: 12px 20px;
    }
    
    .news-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    
    .news-filters::-webkit-scrollbar {
        height: 4px;
    }
    
    .news-filters::-webkit-scrollbar-track {
        background: rgba(30, 30, 46, 0.5);
        border-radius: 2px;
    }
    
    .news-filters::-webkit-scrollbar-thumb {
        background: rgba(244, 67, 54, 0.5);
        border-radius: 2px;
    }
    
    .filter-btn {
        flex-shrink: 0;
        font-size: 13px;
        padding: 6px 14px;
    }
    
    .news-content-container {
        padding: 15px 20px;
        max-height: 55vh;
    }
    
    .news-item {
        padding: 15px;
    }
    
    .news-item-title {
        font-size: 16px;
    }
    
    .news-item-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .news-item-content {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .central-news-container {
        width: 98%;
        top: 58%;
        max-height: 80vh;
    }
    
    .news-header-main {
        padding: 12px 15px;
    }
    
    .news-title-main {
        font-size: 18px;
    }
    
    .news-title-main i {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .news-live-indicator {
        font-size: 12px;
        padding: 5px 10px;
    }
    
    .news-pulse {
        width: 6px;
        height: 6px;
    }
    
    .filter-btn {
        font-size: 12px;
        padding: 5px 12px;
    }
    
    .filter-btn i {
        font-size: 11px;
    }
    
    .news-content-container {
        padding: 12px 15px;
        max-height: 60vh;
    }
    
    .news-item {
        padding: 12px;
    }
    
    .news-item-title {
        font-size: 15px;
    }
    
    .news-item-content {
        font-size: 13px;
        line-height: 1.6;
    }
    
    .news-category {
        font-size: 11px;
        padding: 3px 10px;
    }
    
    .news-loading i {
        font-size: 2.5em;
    }
    
    .news-loading h3 {
        font-size: 18px;
    }
    
    .news-loading p {
        font-size: 14px;
    }
    
    .news-empty i {
        font-size: 3em;
    }
    
    .news-empty h3 {
        font-size: 18px;
    }
    
    .news-empty p {
        font-size: 14px;
    }
}

/* ========================================
   FIX PARA FONDO EN VISTA DESKTOP FORZADA
   ======================================== */

/* Ajustes específicos para cuando se fuerza vista desktop en móvil */
.desktop-view-forced .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 1050vh;
    z-index: -1;
    overflow: hidden;
}

.desktop-view-forced .video-background video {
    min-width: 1200px;
    min-height: 100vh;
    width: 1200px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.desktop-view-forced .video-background #background-image {
    min-width: 1200px;
    min-height: 100vh;
    width: 1200px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Asegurar que el viewport sea respetado */
.desktop-view-forced body {
    width: 1200px;
    min-width: 1200px;
    overflow-x: auto;
}

.desktop-view-forced html {
    width: 1200px;
    min-width: 1200px;
}

/* Fix adicional para dispositivos muy pequeños */
@media screen and (max-width: 480px) {

    .desktop-view-forced .video-background video,
    .desktop-view-forced .video-background #background-image {
        min-width: 1400px;
        width: 1400px;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Fix para orientación landscape en móviles */
@media screen and (max-height: 500px) and (orientation: landscape) {

    .desktop-view-forced .video-background video,
    .desktop-view-forced .video-background #background-image {
        min-height: 120vh;
        height: 120vh;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* ========================================
   BUSCADOR DE PERSONAJES - CSS ARREGLADO
   ======================================== */

/* =============================================
   Banner promocional: Nuevo servidor (Halloween)
   ============================================= */
.server-promo-banner {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;

  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: 92vw;
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(32, 26, 46, 0.9), rgba(55, 35, 68, 0.9));
  border: 1px solid rgba(244, 67, 54, 0.35);
    box-shadow: 0 10px 30px rgba(244, 67, 54, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.server-promo-banner:hover { 
  transform: translateX(-50%) !important;
  box-shadow: inherit;
  border-color: inherit;
}

/* Desactivar transiciones y transformaciones dentro del banner */
.server-promo-banner, 
.server-promo-banner * {
  transition: none !important;
}

.server-promo-banner:hover *,
.server-promo-banner:focus *,
.server-promo-banner:active * {
  transform: none !important;
}

@media (max-width: 768px) {
  .server-promo-banner {
        bottom: 80px;
        /* separarlo de otros módulos en móvil */
    padding: 10px 12px;
    gap: 10px;
    max-width: 94vw;
  }
}

@media (max-width: 480px) {
    .server-promo-banner {
        flex-wrap: wrap;
        justify-content: center;
}
}

.promo-ghost {
  color: #ff6f00;
  font-size: 20px;
  filter: drop-shadow(0 0 6px rgba(255, 111, 0, 0.5));
}

.promo-text {
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #ffcdd2;
}

.promo-ext {
  color: #ff8a80;
  font-size: 16px;
  opacity: 0.9;
}

.promo-divider {
  width: 1px;
  height: 20px;
    background: rgba(255, 255, 255, 0.12);
}

.promo-chips {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.server-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 20, 28, 0.55);
  color: rgba(255, 255, 255, 0.9);
}

.server-chip i {
    font-size: 12px;
    opacity: 0.95;
}

.server-chip.version {
    border-color: rgba(255, 152, 0, 0.35);
    color: #ffd180;
}

.server-chip.exp {
    border-color: rgba(76, 175, 80, 0.35);
    color: #c8e6c9;
}

.server-chip.drop {
    border-color: rgba(33, 150, 243, 0.35);
    color: #bbdefb;
}

.server-chip.reset {
    border-color: rgba(233, 30, 99, 0.35);
    color: #f8bbd0;
}

@media (max-width: 768px) {
  .server-promo-banner { 
    gap: 10px; 
    padding: 10px 12px; 
    margin-top: 12px; 
    max-width: 92%; 
  }

    .promo-text {
        font-size: 14px;
    }

    .server-chip {
        font-size: 11px;
        padding: 5px 8px;
    }

    .promo-ghost {
        font-size: 18px;
    }

    .promo-ext {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .server-promo-banner {
        flex-wrap: wrap;
        justify-content: center;
    }

    .promo-divider {
        display: none;
    }
}

.character-search-panel {
    position: fixed;
    top: 10px;
    /* Posición que no tapa otros módulos */
    left: 20px;
    /* Posición lógica desde la izquierda */
    width: 270px;
    /* Más compacto para no interferir */
    background: rgba(20, 25, 35, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 5px;
    /* Padding reducido */
    z-index: 1200;
    /* Z-index apropiado */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.character-search-panel:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Header del buscador */
.search-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-header i {
    color: #4FC3F7;
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.search-header span {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Grupo de input de búsqueda */
.search-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.search-input-field {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-field i {
    position: absolute;
    left: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    z-index: 2;
    transition: color 0.3s ease;
}

.search-input-field input {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0 14px 0 35px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    outline: none;
}

.search-input-field input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-input-field input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #4FC3F7;
    box-shadow: 0 0 20px rgba(79, 195, 247, 0.2);
    transform: translateY(-1px);
}

.search-input-field input:focus+i,
.search-input-field:hover i {
    color: #4FC3F7;
}

/* Botón de búsqueda */
.search-submit-btn {
    min-width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #4FC3F7, #29B6F6);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.search-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
            transparent);
    transition: left 0.5s ease;
}

.search-submit-btn:hover {
    background: linear-gradient(135deg, #29B6F6, #1E88E5);
    transform: translateY(-1px);
    box-shadow: 
        0 8px 20px rgba(79, 195, 247, 0.3),
        0 0 20px rgba(79, 195, 247, 0.2);
}

.search-submit-btn:hover::before {
    left: 100%;
}

.search-submit-btn:active {
    transform: translateY(0);
}

.search-submit-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Mensajes de búsqueda */
.search-message {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: slideInDown 0.3s ease;
}

.search-message.error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #FF6B6B;
}

.search-message.loading {
    background: rgba(79, 195, 247, 0.1);
    border: 1px solid rgba(79, 195, 247, 0.3);
    color: #4FC3F7;
}

.search-message.not-found {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    color: #FFB74D;
}

.search-message i {
    font-size: 12px;
}

.search-message .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Resultado de búsqueda */
.search-result {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    animation: slideInUp 0.4s ease;
}

.search-result.found {
    border-color: rgba(76, 175, 80, 0.3);
    background: rgba(76, 175, 80, 0.08);
}

/* Header del resultado */
.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 10px;
}

.search-character-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    flex: 1;
}

/* Acciones del resultado */
.search-result-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-character-status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 15px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.search-character-status.online {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.search-character-status.offline {
    background: rgba(158, 158, 158, 0.2);
    color: #BDBDBD;
    border: 1px solid rgba(158, 158, 158, 0.3);
}

.search-character-status i {
    font-size: 7px;
    animation: pulse 2s infinite;
}

.search-character-status.online i {
    color: #4CAF50;
}

.search-character-status.offline i {
    color: #757575;
}

/* Botón cerrar pequeño */
.search-close-btn {
    width: 22px;
    height: 22px;
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 5px;
    color: #FF6B6B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.search-close-btn:hover {
    background: rgba(244, 67, 54, 0.3);
    border-color: rgba(244, 67, 54, 0.5);
    color: #FF5252;
    transform: scale(1.1);
}

.search-close-btn:active {
    transform: scale(0.95);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Información del personaje */
.search-character-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.search-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.search-info-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.search-info-value {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.search-info-value.level {
    color: #FFD54F;
}

.search-info-value.reset {
    color: #FF8A65;
}

.search-info-value.class {
    color: #81C784;
}

/* Botón para nueva búsqueda */
.search-new-search {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.search-new-btn {
    width: 100%;
    height: 32px;
    background: rgba(79, 195, 247, 0.1);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 8px;
    color: #4FC3F7;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.search-new-btn:hover {
    background: rgba(79, 195, 247, 0.15);
    border-color: rgba(79, 195, 247, 0.5);
    color: #29B6F6;
    transform: translateY(-1px);
}

.search-new-btn:active {
    transform: translateY(0);
}

.search-new-btn i {
    font-size: 11px;
}

/* Animaciones */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive - Móvil */
@media (max-width: 768px) {
    .character-search-panel {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 15px;
        max-width: calc(100% - 30px);
    }
    
    .search-input-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-submit-btn {
        width: 100%;
        height: 44px;
    }
    
    .search-result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .search-result-actions {
        align-self: stretch;
        justify-content: space-between;
    }
}

/* Estados adicionales */
.character-search-panel.searching .search-submit-btn {
    background: rgba(79, 195, 247, 0.3);
    cursor: not-allowed;
}

.character-search-panel.searching .search-submit-btn i {
    animation: spin 1s linear infinite;
}

/* Efectos de hover mejorados */
.search-result:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

.search-info-item:hover .search-info-value {
    color: #4FC3F7;
    transition: color 0.3s ease;
}

/* Ajustes para pantallas medianas */
@media (max-width: 1024px) and (min-width: 769px) {
    .character-search-panel {
        width: 250px;
        padding: 12px;
    }
    
    .search-header span {
        font-size: 13px;
    }
}

/* Ajustes para no interferir con otros elementos del juego */
@media (max-height: 700px) {
    .character-search-panel {
        top: 80px;
        max-height: 400px;
        overflow-y: auto;
    }
}

/* Scrollbar personalizado para el panel si es necesario */
.character-search-panel::-webkit-scrollbar {
    width: 4px;
}

.character-search-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.character-search-panel::-webkit-scrollbar-thumb {
    background: rgba(79, 195, 247, 0.5);
    border-radius: 2px;
}

.character-search-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 195, 247, 0.7);
}


/* ============================= */
/* SISTEMA DE LOGIN DE USUARIO - COMPLETO CON VIP */
/* assets/css/login-system.css */
/* ============================= */

.user-login-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    min-width: 320px;
    max-width: 380px;
    max-height: calc(100vh - 40px);
    background: linear-gradient(135deg, rgba(13, 27, 42, 0.95), rgba(27, 38, 44, 0.95));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-login-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ============================= */
/* INFORMACIÓN VIP EN PANEL */
/* ============================= */

.vip-info-container {
    margin-bottom: 15px;
}

.vip-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.vip-status.vip-normal {
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.vip-status.vip-active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

.vip-status.vip-expiring {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(255, 87, 34, 0.1));
    color: #FF9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
    animation: vip-expiring-pulse 2s infinite;
}

/* Estilos específicos para diferentes tipos de VIP */
.vip-status.vip-type-1 {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(56, 142, 60, 0.1));
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.1);
}

.vip-status.vip-type-2 {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(25, 118, 210, 0.1));
    color: #2196F3;
    border: 1px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.1);
}

.vip-status.vip-type-3 {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.2), rgba(123, 31, 162, 0.1));
    color: #9C27B0;
    border: 1px solid rgba(156, 39, 176, 0.3);
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.1);
}

.vip-status.vip-type-4 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 193, 7, 0.2));
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
    animation: vip-platinum-glow 3s infinite;
}

/* Icono de corona para VIP */
.vip-status.vip-active .fa-crown {
    color: inherit;
    filter: drop-shadow(0 0 3px currentColor);
}

/* Animación para VIP Platinum (tipo 4) */
@keyframes vip-platinum-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    }
}

@keyframes vip-expiring-pulse {
    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 152, 0, 0.1); 
    }

    50% { 
        box-shadow: 0 0 30px rgba(255, 152, 0, 0.3); 
    }
}

/* ============================= */
/* FORMULARIO DE LOGIN */
/* ============================= */

.login-form-container {
    padding: 25px;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    max-height: 100%;
}

.login-form-container form {
    position: relative;
    z-index: 1;
}

.login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    position: relative;
    width: 100%;
}

.login-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.login-header-title i {
    color: #64B5F6;
    font-size: 20px;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.login-header-title span {
    display: flex;
    align-items: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-header-language-selector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.login-header i {
    color: #64B5F6;
    font-size: 20px;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.login-input-field {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0 15px;
    transition: all 0.3s ease;
}

.login-input-field:focus-within {
    border-color: #64B5F6;
    background: rgba(33, 150, 243, 0.1);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1), 0 0 15px rgba(33, 150, 243, 0.2);
}

.login-input-field i {
    color: #888;
    margin-right: 12px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.login-input-field:focus-within i {
    color: #64B5F6;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.login-input-field input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 15px 0;
    outline: none;
}

.login-input-field input::placeholder {
    color: #888;
    transition: color 0.3s ease;
}

.login-input-field:focus-within input::placeholder {
    color: #aaa;
}

.login-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.login-submit-btn:hover {
    background: linear-gradient(135deg, #1976D2, #2196F3);
    transform: translateY(-1px);
    box-shadow: 0 6px 25px rgba(33, 150, 243, 0.5);
}

.login-submit-btn:active {
    transform: translateY(0);
}

.login-submit-btn:disabled {
    background: linear-gradient(135deg, #666, #555);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.login-forgot-password {
    margin-bottom: 15px;
    text-align: center;
}

.forgot-password-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64B5F6;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.3);
}

.forgot-password-link:hover {
    color: #90CAF9;
    text-decoration: underline;
    text-shadow: 0 0 12px rgba(33, 150, 243, 0.5);
}

.forgot-password-link i {
    font-size: 12px;
}

/* ============================= */
/* MENSAJES DE LOGIN */
/* ============================= */

.login-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    display: none;
    transition: all 0.3s ease;
}

.login-message.show {
    display: block;
}

.login-message.error {
    background: rgba(244, 67, 54, 0.1);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.login-message.success {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.login-message.loading {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
    border: 1px solid rgba(33, 150, 243, 0.2);
}

/* ============================= */
/* PERFIL DE USUARIO LOGUEADO */
/* ============================= */

.user-profile-container {
    padding: 25px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    max-height: 100%;
}

/* Personalizar scrollbar para el panel de UserCP */
.user-profile-container::-webkit-scrollbar,
.login-form-container::-webkit-scrollbar {
    width: 8px;
}

.user-profile-container::-webkit-scrollbar-track,
.login-form-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.user-profile-container::-webkit-scrollbar-thumb,
.login-form-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.user-profile-container::-webkit-scrollbar-thumb:hover,
.login-form-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Para Firefox */
.user-profile-container,
.login-form-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.profile-header {
    margin-bottom: 15px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    flex: 1;
    min-width: 0;
}

.profile-language-selector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 0;
}

.profile-info i {
    color: #64B5F6;
    font-size: 20px;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
}

.profile-username {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.profile-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64B5F6;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.profile-status.online i {
    color: #64B5F6;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.logout-btn {
    background: rgba(244, 67, 54, 0.1);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}

.logout-btn:hover {
    background: rgba(244, 67, 54, 0.2);
    transform: scale(1.05);
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.profile-action-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    width: 100%;
}

.profile-action-btn:hover {
    background: rgba(33, 150, 243, 0.1);
    border-color: rgba(33, 150, 243, 0.3);
    transform: translateX(5px);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
}

.profile-action-btn:hover i {
    text-shadow: 0 0 12px rgba(33, 150, 243, 0.5);
}

.profile-action-btn i {
    color: #64B5F6;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.3);
}

/* ============================= */
/* BOTÓN DE CAMBIAR CONTRASEÑA */
/* ============================= */

.change-password-btn {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    width: 100%;
}

.change-password-btn:hover {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.3);
    transform: translateX(5px);
}

.change-password-btn i {
    color: #2196F3;
}

/* ============================= */
/* MODAL DE USERCP */
/* ============================= */

.usercp-modal .modal-content {
    max-width: 900px !important;
    width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
}

/* Scrollbar personalizado para el modal de UserCP */
.usercp-modal .modal-content::-webkit-scrollbar {
    width: 8px;
}

.usercp-modal .modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.usercp-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(33, 150, 243, 0.5);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.usercp-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 150, 243, 0.7);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

/* Header del modal de UserCP con efecto de brillo */
.usercp-modal .modal-header {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(76, 175, 80, 0.1));
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
    padding: 20px 25px;
    position: relative;
    overflow: hidden;
}

.usercp-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.usercp-modal .modal-header > * {
    position: relative;
    z-index: 1;
}

.usercp-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.usercp-modal .close-modal:hover {
    color: #64B5F6;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.usercp-modal .modal-body {
    padding: 20px;
    color: #fff;
}

.usercp-modal .modal-body table {
    width: 100%;
    color: #fff;
    border-collapse: collapse;
}

.usercp-modal .modal-body table th,
.usercp-modal .modal-body table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.usercp-modal .modal-body table th {
    background: rgba(255, 255, 255, 0.05);
    font-weight: bold;
    color: #64B5F6;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.usercp-modal .modal-body .btn,
.usercp-modal .modal-body button {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.usercp-modal .modal-body .btn:hover,
.usercp-modal .modal-body button:hover {
    background: linear-gradient(135deg, #1976D2, #2196F3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.5);
}

.usercp-modal .modal-body form {
    margin: 0;
}

.usercp-modal .modal-body .form-group {
    margin-bottom: 15px;
}

.usercp-modal .modal-body .form-control,
.usercp-modal .modal-body input[type="text"],
.usercp-modal .modal-body input[type="number"],
.usercp-modal .modal-body input[type="email"],
.usercp-modal .modal-body input[type="password"],
.usercp-modal .modal-body select {
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
}

/* Estilos específicos para select/dropdowns en el modal */
.usercp-modal .modal-body select {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    padding: 10px 35px 10px 15px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    cursor: pointer;
}

.usercp-modal .modal-body select:hover {
    background-color: #252547 !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.usercp-modal .modal-body select:focus {
    outline: none;
    border-color: #64B5F6 !important;
    background-color: #1a1a2e !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1), 0 0 15px rgba(33, 150, 243, 0.2);
}

/* Estilos para las opciones dentro del select */
.usercp-modal .modal-body select option {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
    color: #fff !important;
    padding: 10px;
}

.usercp-modal .modal-body select option:hover,
.usercp-modal .modal-body select option:checked,
.usercp-modal .modal-body select option:focus {
    background: #252547 !important;
    background-color: #252547 !important;
    color: #fff !important;
}

/* Estilos para select dentro de tablas en el modal */
.usercp-modal .modal-body table select,
.usercp-modal .modal-body .general-table-ui select,
.usercp-modal .modal-body .table select {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    padding: 10px 35px 10px 15px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    cursor: pointer;
}

.usercp-modal .modal-body table select option,
.usercp-modal .modal-body .general-table-ui select option,
.usercp-modal .modal-body .table select option {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
    color: #fff !important;
}

.usercp-modal .modal-body .form-control:focus,
.usercp-modal .modal-body input:focus {
    outline: none;
    border-color: #64B5F6;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1), 0 0 15px rgba(33, 150, 243, 0.2);
}

.usercp-modal .modal-body .module-requirements {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.usercp-modal .modal-body .page-title {
    color: #64B5F6;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
}

.usercp-modal .modal-body .usercp-table {
    width: 100%;
    color: #fff;
    border-collapse: collapse;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.02);
}

.usercp-modal .modal-body .usercp-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.usercp-modal .modal-body .usercp-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.usercp-modal .modal-body .usercp-table td img {
    max-width: 50px;
    height: auto;
}

.usercp-modal .modal-body .alert-success,
.usercp-modal .modal-body .alert-error,
.usercp-modal .modal-body .alert-danger,
.usercp-modal .modal-body .alert-warning,
.usercp-modal .modal-body .alert-info {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    border-left: 4px solid;
}

.usercp-modal .modal-body .alert-success {
    background: rgba(33, 150, 243, 0.1);
    border-color: #64B5F6;
    color: #64B5F6;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.2);
}

.usercp-modal .modal-body .alert-error,
.usercp-modal .modal-body .alert-danger {
    background: rgba(244, 67, 54, 0.1);
    border-color: #F44336;
    color: #F44336;
}

.usercp-modal .modal-body .alert-warning {
    background: rgba(255, 152, 0, 0.1);
    border-color: #FF9800;
    color: #FF9800;
}

.usercp-modal .modal-body .alert-info {
    background: rgba(33, 150, 243, 0.1);
    border-color: #2196F3;
    color: #2196F3;
}

.usercp-modal .modal-body .panel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.usercp-modal .modal-body .panel-body {
    padding: 0;
}

.usercp-modal .modal-body .form-horizontal .form-group {
    margin-bottom: 15px;
}

.usercp-modal .modal-body .form-horizontal .control-label {
    color: #fff;
    font-weight: 500;
}

.usercp-modal .modal-body .text-center {
    text-align: center;
}

.usercp-modal .modal-body .text-right {
    text-align: right;
}

.usercp-modal .modal-body .label {
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}

.usercp-modal .modal-body .label-success {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: #fff;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.usercp-modal .modal-body .label-danger {
    background: #F44336;
    color: #fff;
}

.usercp-modal .modal-body .label-default {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.usercp-modal .modal-body .usercp-page-title {
    color: #4CAF50;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(76, 175, 80, 0.3);
    text-align: center;
}

.usercp-modal .modal-body .row {
    margin: 0;
}

/* Flex para personajes - mostrar uno al lado del otro */
.usercp-modal .modal-body .row.text-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
}

.usercp-modal .modal-body .row.text-center .col-xs-3 {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 200px;
}

.usercp-modal .modal-body .col-xs-3,
.usercp-modal .modal-body .col-xs-4,
.usercp-modal .modal-body .col-xs-9,
.usercp-modal .modal-body .col-xs-12,
.usercp-modal .modal-body .col-sm-5,
.usercp-modal .modal-body .col-sm-7,
.usercp-modal .modal-body .col-sm-10,
.usercp-modal .modal-body .col-sm-12 {
    padding: 10px;
}

.usercp-modal .modal-body .nopadding {
    padding: 0 !important;
}

/* ============================= */
/* MODAL DE INFORMACIÓN DEL SERVIDOR */
/* ============================= */

.info-modal-content {
    max-width: 900px !important;
    width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
}

.info-modal-body {
    padding: 0 !important;
}

.info-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    padding: 0;
    margin: 0;
}

.info-tab {
    background: transparent;
    border: none;
    color: #fff;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.info-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #10b981;
}

.info-tab.active {
    background: rgba(14, 165, 233, 0.15);
    color: #10b981;
    border-bottom-color: #10b981;
}

.info-tab i {
    font-size: 16px;
}

.info-tab-content {
    padding: 25px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tabla de comparación NORMAL vs VIP */
.info-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.comparison-label-col {
    font-weight: 700;
    color: #fff;
    font-size: 16px;
}

.comparison-value-col {
    text-align: center;
}

.account-type {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.account-type.normal {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.account-type.vip {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.comparison-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

.comparison-row.maintenance-row {
    grid-template-columns: 2fr 2fr;
}

.comparison-row.maintenance-row .maintenance-value {
    grid-column: 2;
    text-align: left;
    justify-content: flex-start;
}

.comparison-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.comparison-row.highlight-row {
    background: rgba(255, 193, 7, 0.05);
    border-left: 3px solid #FFC107;
}

.comparison-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 500;
}

.comparison-label i {
    color: #64B5F6;
    width: 20px;
    text-align: center;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

/* Ajustes adicionales para mantener consistencia de colores */
.download-option:hover {
    border-color: rgba(33, 150, 243, 0.3);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
}

.download-icon.mediafire {
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.download-icon.mega {
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.download-icon.gdrive {
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.comparison-value {
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.comparison-value.normal-value {
    color: #fff;
}

.comparison-value.vip-value {
    color: #FFD700;
}

.vip-bonus-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    width: 100%;
}

.vip-bonus-item {
    padding: 6px 12px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 6px;
    font-size: 13px;
    color: #FFD700;
}

.info-section {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: 20px;
}

.info-section h3 {
    color: #FF9800;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-section p {
    color: #ccc;
    line-height: 1.6;
}

/* ============================= */
/* MODALES DE PERSONAJES - CORREGIDOS PARA TAMAÑO ADECUADO */
/* ============================= */

.user-characters-modal .modal-content {
    max-width: 1200px;
    max-height: 80vh;
    width: 90vw;
}

.characters-loading,
.account-loading {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 16px;
}

.characters-loading i,
.account-loading i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.characters-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 15px;
    padding-right: 10px;
}

/* ============================= */
/* TARJETAS DE PERSONAJES CON IMÁGENES - TAMAÑO OPTIMIZADO */
/* ============================= */

.character-card-simple {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
}

.character-card-simple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4CAF50, #2196F3, #FF9800);
}

.character-card-simple:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.character-image-container {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.3s ease;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: auto;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
}

.character-card-simple:hover .character-image {
    transform: scale(1.1);
}

.character-main-info {
    text-align: center;
    margin-bottom: 10px;
    flex: 1;
}

.character-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 5px;
}

.character-class {
    display: inline-block;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.character-key-stats {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    margin-bottom: 8px;
}

.key-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.key-stat i {
    color: #4CAF50;
    font-size: 12px;
}

.key-stat .stat-value {
    font-weight: 700;
    font-size: 12px;
    color: #fff;
}

.key-stat .stat-label {
    font-size: 9px;
    color: #888;
    text-transform: uppercase;
}

.character-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
}

.character-expand:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
}

.character-expand span {
    color: #fff;
    font-size: 11px;
    font-weight: 500;
}

.character-expand i {
    color: #4CAF50;
    font-size: 11px;
    transition: transform 0.3s ease;
}

.character-details-expanded {
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

.character-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.stat-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label {
    color: #aaa;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 500;
}

.stat-value {
    color: #fff;
    font-weight: 600;
    font-size: 11px;
}

.stat-value.highlight {
    color: #4CAF50;
    text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

/* ============================= */
/* SLOTS VACÍOS DE PERSONAJES - TAMAÑO OPTIMIZADO */
/* ============================= */

.character-slot-empty {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 15px;
    min-height: 250px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.character-slot-empty:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    transform: translateY(-2px);
}

.empty-slot-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.empty-slot-icon i {
    color: #666;
    font-size: 20px;
}

.character-slot-empty:hover .empty-slot-icon {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.character-slot-empty:hover .empty-slot-icon i {
    color: #888;
}

.empty-slot-text {
    text-align: center;
}

.slot-title {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
}

.slot-subtitle {
    color: #666;
    font-size: 11px;
}

.characters-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.characters-empty i {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
    color: #444;
}

.characters-empty h3 {
    color: #888;
    margin-bottom: 10px;
}

/* ============================= */
/* INFORMACIÓN DE CUENTA */
/* ============================= */

.account-container {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
}

.account-info-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
}

.account-section-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-section-title i {
    color: #4CAF50;
}

.account-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.account-detail-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.account-detail-label {
    color: #aaa;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}

.account-detail-value {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.account-detail-value.status-active {
    color: #4CAF50;
}

.account-detail-value.status-inactive {
    color: #F44336;
}

/* ============================= */
/* ESTILOS VIP PARA INFORMACIÓN DE CUENTA */
/* ============================= */

.account-summary.account-vip {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    position: relative;
    overflow: hidden;
}

.account-summary.account-vip::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: vip-shine 3s infinite;
}

@keyframes vip-shine {
    0% {
        transform: rotate(-45deg) translate(-100%, -100%);
    }

    100% {
        transform: rotate(-45deg) translate(100%, 100%);
    }
}

.vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}

.vip-section {
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
}

.account-detail-value.status-vip {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.account-detail-value.status-normal {
    color: #888;
}

.account-detail-value.vip-days {
    color: #FFD700;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* ============================= */
/* MODAL DE CAMBIO DE CONTRASEÑA */
/* ============================= */

.change-password-modal .modal-content {
    max-width: 450px;
}

.password-input-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.password-input-field {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0 15px;
    transition: all 0.3s ease;
}

.password-input-field:focus-within {
    border-color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.password-input-field i {
    color: #888;
    margin-right: 12px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.password-input-field:focus-within i {
    color: #2196F3;
}

.password-input-field input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 15px 0;
    outline: none;
}

.password-input-field input::placeholder {
    color: #888;
    transition: color 0.3s ease;
}

.password-input-field:focus-within input::placeholder {
    color: #aaa;
}

.change-password-submit {
    width: 100%;
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.change-password-submit:hover {
    background: linear-gradient(135deg, #1976D2, #2196F3);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

.change-password-submit:active {
    transform: translateY(0);
}

.change-password-submit:disabled {
    background: linear-gradient(135deg, #666, #555);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.password-requirements {
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.password-requirements h6 {
    color: #2196F3;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-requirements li {
    color: #aaa;
    font-size: 13px;
    margin-bottom: 5px;
    padding-left: 20px;
    position: relative;
}

.password-requirements li::before {
    content: '•';
    color: #2196F3;
    position: absolute;
    left: 0;
}

/* ============================= */
/* MODAL DE RECUPERACIÓN DE CONTRASEÑA */
/* ============================= */
.forgotpassword-modal .modal-content {
    max-width: 500px;
    width: 90%;
}

.forgotpassword-modal .modal-title i {
    background-color: rgb(213 195 168 / 15%);
    color: #4caf50;
}

.forgotpassword-modal .form-group {
    margin-bottom: 20px;
}

.forgotpassword-modal .form-group label {
    display: block;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
}

.forgotpassword-modal .input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    min-height: 50px;
    overflow: hidden;
}

.forgotpassword-modal .input-with-icon:focus-within {
    border-color: #FF9800;
    background: rgba(255, 152, 0, 0.1);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

.forgotpassword-modal .input-with-icon i {
    position: absolute;
    left: 15px;
    color: #888;
    font-size: 16px;
    transition: color 0.3s ease;
    z-index: 1;
    width: 20px;
    text-align: center;
}

.forgotpassword-modal .input-with-icon:focus-within i {
    color: #FF9800;
}

.forgotpassword-modal .form-control {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 15px 15px 15px 50px;
    outline: none;
}

.forgotpassword-modal .form-control::placeholder {
    color: #888;
}

.forgotpassword-modal .field-info {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.forgotpassword-modal .form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    animation: slideInDown 0.3s ease-out;
}

.forgotpassword-modal .form-message.success {
    background: rgba(76, 175, 80, 0.15);
    border: 2px solid #4CAF50;
    color: #4CAF50;
    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.2);
}

.forgotpassword-modal .form-message.success i {
    font-size: 18px;
    color: #4CAF50;
}

.forgotpassword-modal .form-message.error {
    background: rgba(244, 67, 54, 0.15);
    border: 2px solid #F44336;
    color: #F44336;
    box-shadow: 0 2px 10px rgba(244, 67, 54, 0.2);
}

.forgotpassword-modal .form-message.error i {
    font-size: 18px;
    color: #F44336;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.forgotpassword-modal .register-button,
.forgotpassword-modal button.register-button,
.forgotpassword-modal button[type="submit"].register-button {
    width: 100% !important;
    background: linear-gradient(135deg, #4caf50, #4caf50) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.forgotpassword-modal .register-button:hover,
.forgotpassword-modal button.register-button:hover,
.forgotpassword-modal button[type="submit"].register-button:hover {
    background: linear-gradient(135deg, #F57C00, #FF9800) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4) !important;
}

.forgotpassword-modal .register-button:active,
.forgotpassword-modal button.register-button:active,
.forgotpassword-modal button[type="submit"].register-button:active {
    transform: translateY(0) !important;
}

.forgotpassword-modal .alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-left: 4px solid;
}

.forgotpassword-modal .alert-success {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4CAF50;
    color: #4CAF50;
}

.forgotpassword-modal .alert-danger {
    background: rgba(244, 67, 54, 0.1);
    border-color: #F44336;
    color: #F44336;
}

/* MODAL DE CAMBIO DE EMAIL */
/* ============================= */

.change-email-modal .modal-content {
    max-width: 450px;
}

.current-email-display {
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.current-email-display h6 {
    color: #2196F3;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.current-email-display .current-email {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.email-input-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.email-input-field {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0 15px;
    transition: all 0.3s ease;
}

.email-input-field:focus-within {
    border-color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.email-input-field i {
    color: #888;
    margin-right: 12px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.email-input-field:focus-within i {
    color: #2196F3;
}

.email-input-field input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 15px 0;
    outline: none;
}

.email-input-field input::placeholder {
    color: #888;
    transition: color 0.3s ease;
}

.email-input-field:focus-within input::placeholder {
    color: #aaa;
}

.change-email-submit {
    width: 100%;
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.change-email-submit:hover {
    background: linear-gradient(135deg, #1976D2, #2196F3);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

.change-email-submit:active {
    transform: translateY(0);
}

.change-email-submit:disabled {
    background: linear-gradient(135deg, #666, #555);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================= */
/* TOP 5 RANKING PÚBLICO (FUERA DEL PANEL) */
/* ============================= */

.public-ranking-container {
    position: fixed;
    top: 420px;
    /* Debajo del panel de login */
    right: 20px;
    z-index: 999;
    width: 320px;
    background: linear-gradient(135deg, rgba(13, 27, 42, 0.95), rgba(27, 38, 44, 0.95));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.public-ranking-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.public-ranking-header {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.public-ranking-header i {
    color: #FFD700;
    font-size: 18px;
}

.public-ranking-header .ranking-title {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    flex: 1;
    margin-left: 10px;
}

.public-ranking-header .ranking-update {
    color: #aaa;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.public-ranking-list {
    padding: 15px;
}

.public-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.public-ranking-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.public-ranking-item:last-child {
    margin-bottom: 0;
}

.public-ranking-item.first-place {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.08));
    border-color: rgba(255, 215, 0, 0.25);
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.1);
}

.public-ranking-item.second-place {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.08));
    border-color: rgba(192, 192, 192, 0.25);
}

.public-ranking-item.third-place {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.08));
    border-color: rgba(205, 127, 50, 0.25);
}

.public-ranking-position {
    min-width: 30px;
    text-align: center;
}

.public-ranking-number {
    color: #888;
    font-weight: 700;
    font-size: 14px;
}

.public-ranking-player {
    flex: 1;
    min-width: 0;
}

.public-ranking-name {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 2px;
}

.public-ranking-stats {
    display: flex;
    gap: 12px;
}

.public-ranking-level {
    color: #4ECDC4;
    font-size: 12px;
    font-weight: 600;
}

.public-ranking-reset {
    color: #FF6B6B;
    font-size: 12px;
    font-weight: 600;
}

.public-ranking-loading {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 14px;
}

.public-ranking-loading i {
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

/* ============================= */
/* TOP 5 RANKING INTERNO (DENTRO DEL PANEL) - MANTENER PARA COMPATIBILIDAD */
/* ============================= */

.top-ranking-container {
    margin-top: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.top-ranking-header {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-ranking-header i {
    color: #FFD700;
    font-size: 16px;
}

.top-ranking-header span {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    margin-left: 8px;
}

.top-ranking-header small {
    color: #aaa;
    font-size: 11px;
}

.top-ranking-list {
    padding: 10px;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.ranking-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(3px);
}

.ranking-item:last-child {
    margin-bottom: 0;
}

.ranking-item.first-place {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border-color: rgba(255, 215, 0, 0.2);
}

.ranking-item.second-place {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(192, 192, 192, 0.05));
    border-color: rgba(192, 192, 192, 0.2);
}

.ranking-item.third-place {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.05));
    border-color: rgba(205, 127, 50, 0.2);
}

.ranking-position {
    min-width: 24px;
    text-align: center;
}

.ranking-number {
    color: #888;
    font-weight: 600;
    font-size: 12px;
}

.ranking-player-info {
    flex: 1;
    min-width: 0;
}

.ranking-name {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ranking-stats {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.ranking-level {
    color: #4ECDC4;
    font-size: 11px;
    font-weight: 500;
}

.ranking-reset {
    color: #FF6B6B;
    font-size: 11px;
    font-weight: 500;
}

/* ============================= */
/* BOTÓN DE CAMBIAR EMAIL */
/* ============================= */

.change-email-btn {
    background: rgba(156, 39, 176, 0.1);
    color: #9C27B0;
    border: 1px solid rgba(156, 39, 176, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    width: 100%;
}

.change-email-btn:hover {
    background: rgba(156, 39, 176, 0.2);
    border-color: rgba(156, 39, 176, 0.3);
    transform: translateX(5px);
}

.change-email-btn i {
    color: #9C27B0;
}


/* ============================= */
/* VOTA POR NOSOTROS */
/* ============================= */

.vota-vip-btn {
    background: rgba(156, 39, 176, 0.1);
    color: #008000;
    border: 1px solid rgba(156, 39, 176, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

.change-email-btn:hover {
    background: rgba(156, 39, 176, 0.2);
    border-color: rgba(156, 39, 176, 0.3);
    transform: translateX(5px);
}

.change-email-btn i {
    color: #9C27B0;
}


/* ============================= */
/* MENSAJE DE TIMEOUT DE SESIÓN */
/* ============================= */

.login-message.warning {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
    border: 1px solid rgba(255, 152, 0, 0.2);
}

.account-summary {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    text-align: center;
}

.account-summary h3 {
    margin-bottom: 10px;
    font-size: 24px;
}

.account-summary p {
    opacity: 0.9;
    font-size: 14px;
}

/* ============================= */
/* CLASES DE PERSONAJES */
/* ============================= */

.character-class.dark-wizard {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

.character-class.dark-knight {
    background: linear-gradient(135deg, #F44336, #D32F2F);
}

.character-class.elf {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
}

.character-class.magic-gladiator {
    background: linear-gradient(135deg, #FF9800, #F57C00);
}

.character-class.dark-lord {
    background: linear-gradient(135deg, #795548, #5D4037);
}

.character-class.summoner {
    background: linear-gradient(135deg, #2196F3, #1976D2);
}

.character-class.rage-fighter {
    background: linear-gradient(135deg, #E91E63, #C2185B);
}

/* ============================= */
/* RESPONSIVE DESIGN */
/* ============================= */

@media (max-width: 1400px) {
    .characters-container {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .user-characters-modal .modal-content {
        max-width: 1000px;
    }
}

@media (max-width: 1200px) {
    .characters-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .user-characters-modal .modal-content {
        max-width: 800px;
    }
}

@media (max-width: 900px) {
    .characters-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .user-characters-modal .modal-content {
        max-width: 1000px;
    }
}

@media (max-width: 768px) {
    .user-login-panel {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
    
    .public-ranking-container {
        top: 350px;
        right: 10px;
        left: 10px;
        width: auto;
    }

    .characters-container {
        grid-template-columns: 1fr;
        max-height: 50vh;
    }

    .account-details {
        grid-template-columns: 1fr;
    }

    .user-characters-modal .modal-content {
        max-width: 95vw;
        margin: 20px;
    }

    .character-key-stats {
        flex-direction: column;
        gap: 6px;
    }

    .key-stat {
        flex-direction: row;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.05);
        padding: 4px 8px;
        border-radius: 6px;
    }
    
    .character-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================= */
/* SCROLLBAR PERSONALIZADO */
/* ============================= */

.characters-container::-webkit-scrollbar,
.account-container::-webkit-scrollbar {
    width: 6px;
}

.characters-container::-webkit-scrollbar-track,
.account-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.characters-container::-webkit-scrollbar-thumb,
.account-container::-webkit-scrollbar-thumb {
    background: rgba(76, 175, 80, 0.6);
    border-radius: 3px;
}

.characters-container::-webkit-scrollbar-thumb:hover,
.account-container::-webkit-scrollbar-thumb:hover {
    background: rgba(76, 175, 80, 0.8);
}

/* ============================= */
/* ANIMACIONES */
/* ============================= */

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.character-card-simple,
.character-slot-empty {
    animation: fadeInUp 0.3s ease-out;
}

.user-login-panel {
    animation: slideInFromRight 0.5s ease-out;
}

/* ============================= */
/* EFECTOS VISUALES */
/* ============================= */

.stat-value.money {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.stat-value.reset-count {
    color: #FF6B6B;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

.stat-value.level {
    color: #4ECDC4;
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.3);
}

.character-main-info {
    position: relative;
}

.character-main-info::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* ============================= */
/* ESTADOS DE CARGA */
/* ============================= */

.loading-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: 8px;
    height: 20px;
    margin-bottom: 10px;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}


/* ======================================
   ESTILOS PARA MODAL DE DONACIONES - SISTEMA VIP 7 Y 15 DÍAS
   ====================================== */
.donaciones-modal .modal-content {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d3e 100%);
    margin: 2% auto;
    padding: 0;
    border: 2px solid rgba(33, 150, 243, 0.3);
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(33, 150, 243, 0.3);
}

.donaciones-modal .modal-header {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(76, 175, 80, 0.1));
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
}

.donaciones-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.donaciones-modal .modal-header > * {
    position: relative;
    z-index: 1;
}

.donaciones-modal .modal-title {
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.donaciones-modal .close-modal {
    font-size: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.donaciones-modal .close-modal:hover {
    color: #64B5F6;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    transform: rotate(90deg);
}

.donaciones-modal .modal-body {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Introducción de donaciones */
.donation-intro {
    text-align: center;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
}

.donation-intro h3 {
    color: #64B5F6;
    margin-bottom: 10px;
    font-size: 1.3em;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
}

.donation-intro p {
    color: #ddd;
    line-height: 1.6;
    margin: 0;
}

/* Paquetes de donación - Solo 2 opciones */
.donation-packages-simple {
    margin-bottom: 25px;
}

.packages-title {
    color: #FF9800;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.packages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Solo 2 columnas para 7 y 15 días */
    gap: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.package-simple {
    background: rgba(255, 152, 0, 0.1);
    border: 2px solid rgba(255, 152, 0, 0.3);
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.package-simple:hover {
    background: rgba(255, 152, 0, 0.2);
    transform: translateY(-3px);
    border-color: #FF9800;
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.2);
}

.package-simple.selected {
    background: rgba(255, 152, 0, 0.25);
    border-color: #FF6F00;
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(255, 152, 0, 0.3);
}

/* Destacar paquete de 15 días como "popular" */
.package-simple[data-package="2"] {
    border-color: #4CAF50;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(255, 152, 0, 0.1));
}

.package-simple[data-package="2"]:hover {
    border-color: #4CAF50;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(255, 152, 0, 0.2));
}

.package-simple[data-package="2"]::before {
    content: "¡Popular!";
    position: absolute;
    top: -10px;
    right: -10px;
    background: #4CAF50;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
}

.package-price {
    color: #FF9800;
    font-size: 1.8em;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

.package-simple[data-package="2"] .package-price {
    color: #4CAF50;
}

.package-vip {
    color: #ddd;
    font-size: 1em;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.package-description {
    color: #bbb;
    font-size: 0.85em;
    margin-top: 10px;
    line-height: 1.3;
}

/* Formulario de contacto */
.donation-contact-form {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 152, 0, 0.05));
    border-radius: 15px;
    padding: 25px;
    margin: 25px 0;
    border: 1px solid rgba(255, 152, 0, 0.2);
}

.contact-form-title {
    color: #FF9800;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.donation-contact-form .form-group {
    margin-bottom: 15px;
}

.donation-contact-form .form-group label {
    display: block;
    color: #FF9800;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.9em;
}

.donation-contact-form .input-with-icon {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.donation-contact-form .input-with-icon i {
    color: #FF9800;
    margin-right: 10px;
}

.donation-contact-form .input-with-icon input {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    padding: 12px 0;
    font-size: 14px;
}

.donation-contact-form .input-with-icon input::placeholder {
    color: #888;
}

.donation-contact-form .input-with-icon input:focus {
    outline: none;
}

.donation-contact-form .input-with-icon:focus-within {
    border-color: #FF9800;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.2);
}

/* Métodos de pago */
.payment-methods {
    margin: 25px 0;
}

.payment-methods-title {
    color: #FF9800;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.payment-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 450px;
    margin: 0 auto;
}

.payment-option {
    background: rgba(255, 152, 0, 0.1);
    border: 2px solid rgba(255, 152, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-option:hover {
    background: rgba(255, 152, 0, 0.2);
    transform: translateY(-2px);
    border-color: #FF9800;
}

.payment-option.selected {
    background: rgba(255, 152, 0, 0.25);
    border-color: #FF6F00;
    transform: scale(1.05);
}

.payment-option i {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
}

.paypal-option {
    color: #0070BA;
}

.paypal-option.selected {
    border-color: #0070BA;
    background: rgba(0, 112, 186, 0.1);
}

.bank-option {
    color: #4CAF50;
}

.bank-option.selected {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.binance-option {
    color: #F3BA2F;
}

.binance-option.selected {
    border-color: #F3BA2F;
    background: rgba(243, 186, 47, 0.1);
}

.payment-option-name {
    color: #ddd;
    font-size: 0.9em;
    font-weight: bold;
}

/* Botón de envío */
.send-donation-request {
    width: 100%;
    background: linear-gradient(45deg, #FF9800, #F57C00);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.send-donation-request:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
    background: linear-gradient(45deg, #FFB74D, #FF9800);
}

.send-donation-request:disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Información de contacto */
.contact-info {
    background: rgba(96, 125, 139, 0.1);
    border: 1px solid rgba(96, 125, 139, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    display: none;
}

.contact-info.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.contact-info h4 {
    color: #607D8B;
    font-size: 1.1em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-details {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(96, 125, 139, 0.3);
}

.contact-method h5 {
    color: #607D8B;
    margin: 0 0 10px 0;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-method p {
    color: #ddd;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 5px 0;
}

.contact-method strong {
    color: #607D8B;
}

/* Mensaje de respuesta */
.donation-message {
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    font-size: 14px;
    display: none;
}

.donation-message.message-error {
    background-color: rgba(244, 67, 54, 0.1);
    border-left: 3px solid #F44336;
    color: #F44336;
}

.donation-message.message-success {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 3px solid #4CAF50;
    color: #4CAF50;
}

.donation-message.message-info {
    background-color: rgba(33, 150, 243, 0.1);
    border-left: 3px solid #2196F3;
    color: #2196F3;
}

.donation-message.message-warning {
    background-color: rgba(255, 152, 0, 0.1);
    border-left: 3px solid #FF9800;
    color: #FF9800;
}

/* Responsive */
@media (max-width: 768px) {
    .donaciones-modal .modal-content {
        width: 95%;
        margin: 2% auto;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
    }

    .payment-options {
        grid-template-columns: 1fr;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }

    .payment-options {
        grid-template-columns: 1fr;
    }

    .donaciones-modal .modal-body {
        padding: 20px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efectos adicionales para mejor UX */
.package-simple:active {
    transform: scale(0.98);
}

.payment-option:active {
    transform: scale(0.95);
}

/* Indicador de selección más visible */
.package-simple.selected::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #4CAF50;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.payment-option.selected::after {
    content: "✓";
    position: absolute;
    top: 5px;
    right: 5px;
    background: #4CAF50;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}


/* ======================================
   ESTILOS DEL SISTEMA DE NOTICIAS
   ====================================== */
.noticias-modal .modal-content {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d3e 100%);
    margin: 2% auto;
    padding: 0;
    border: 2px solid rgba(33, 150, 243, 0.3);
    border-radius: 15px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(33, 150, 243, 0.3);
}

.noticias-modal .modal-header {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(76, 175, 80, 0.1));
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.noticias-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.noticias-modal .modal-header > * {
    position: relative;
    z-index: 1;
}

.noticias-modal .modal-title {
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.noticias-modal .close-modal {
    font-size: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.noticias-modal .close-modal:hover {
    color: #64B5F6;
    transform: rotate(90deg);
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.noticias-modal .modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Lista de noticias */
.news-list {
    display: grid;
    gap: 20px;
}

.news-item {
    background: linear-gradient(135deg, #2d2d3e 0%, #1e1e2e 100%);
    border-radius: 15px;
    padding: 20px;
    border-left: 4px solid #64B5F6;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.1);
}

.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgb(46 82 144 / 20%);
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.news-title {
    color: #64B5F6;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
}

.news-meta {
    font-size: 0.9em;
    color: #888;
    display: flex;
    gap: 15px;
    align-items: center;
}

.news-category {
    background: #F44336;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: capitalize;
}

.news-content {
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Filtros */
.news-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-btn {
    background: #2d2d3e;
    color: #ddd;
    border: 2px solid #444;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.filter-btn.active {
    background: rgba(33, 150, 243, 0.2);
    border-color: #64B5F6;
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.filter-btn:hover {
    border-color: #64B5F6;
    color: #64B5F6;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.2);
}

/* Estado vacío */
.empty-state {
    text-align: center;
    color: #888;
    padding: 40px 20px;
}

.empty-state i {
    font-size: 3em;
    margin-bottom: 20px;
    color: #64B5F6;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

/* Scrollbar personalizado para modal de noticias */
.noticias-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}

.noticias-modal .modal-body::-webkit-scrollbar-track {
    background: #1e1e2e;
}

.noticias-modal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(33, 150, 243, 0.5);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

/* ======================================
   PANEL DE ADMINISTRACIÓN DE NOTICIAS
   ====================================== */
.admin-panel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d3e 100%);
    min-height: 100vh;
    color: white;
}

.admin-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(90deg, #F44336, #d32f2f);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(244, 67, 54, 0.3);
}

.admin-header h1 {
    margin: 0;
    font-size: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.admin-header p {
    margin: 10px 0 0 0;
    opacity: 0.9;
    font-size: 1.1em;
}

.admin-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.add-news-btn {
    background: linear-gradient(45deg, #4CAF50, #2E7D32);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-news-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.admin-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-filter-btn {
    background: #2d2d3e;
    color: #ddd;
    border: 2px solid #444;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.admin-filter-btn.active {
    background: #F44336;
    border-color: #F44336;
    color: white;
}

.admin-filter-btn:hover {
    border-color: #F44336;
    color: #F44336;
}

.admin-news-list {
    display: grid;
    gap: 20px;
}

.admin-news-item {
    background: linear-gradient(135deg, #2d2d3e 0%, #1e1e2e 100%);
    border-radius: 15px;
    padding: 25px;
    border-left: 4px solid #F44336;
    transition: all 0.3s ease;
    position: relative;
}

.admin-news-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(244, 67, 54, 0.2);
}

.admin-news-item.inactive {
    opacity: 0.6;
    border-left-color: #666;
}

.admin-news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.admin-news-info {
    flex: 1;
}

.admin-news-title {
    color: #F44336;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 8px;
}

.admin-news-meta {
    font-size: 0.9em;
    color: #888;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-news-category {
    background: #F44336;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: capitalize;
}

.admin-news-status {
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
}

.admin-news-status.active {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.admin-news-status.inactive {
    background: rgba(158, 158, 158, 0.2);
    color: #9E9E9E;
}

.admin-news-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.admin-action-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.edit-btn {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
}

.edit-btn:hover {
    background: #FF9800;
    color: white;
}

.delete-btn {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
}

.delete-btn:hover {
    background: #F44336;
    color: white;
}

.toggle-btn {
    background: rgba(96, 125, 139, 0.2);
    color: #607D8B;
}

.toggle-btn:hover {
    background: #607D8B;
    color: white;
}

.admin-news-content {
    color: #ddd;
    line-height: 1.6;
    margin-top: 15px;
}

/* Modal de formulario */
.news-form-modal .modal-content {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d3e 100%);
    border: 2px solid #F44336;
    max-width: 600px;
}

.news-form-modal .modal-header {
    background: linear-gradient(90deg, #F44336, #d32f2f);
}

.news-form {
    padding: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #F44336;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(244, 67, 54, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #F44336;
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.form-group select option {
    background: #2d2d3e;
    color: white;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.form-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    min-width: 120px;
}

.save-btn {
    background: linear-gradient(45deg, #4CAF50, #2E7D32);
    color: white;
}

.save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.cancel-btn {
    background: linear-gradient(45deg, #607D8B, #455A64);
    color: white;
}

.cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(96, 125, 139, 0.4);
}

/* Mensajes de respuesta */
.admin-message {
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    font-size: 14px;
    display: none;
}

.admin-message.show {
    display: block;
    animation: slideIn 0.3s ease;
}

.admin-message.success {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 3px solid #4CAF50;
    color: #4CAF50;
}

.admin-message.error {
    background-color: rgba(244, 67, 54, 0.1);
    border-left: 3px solid #F44336;
    color: #F44336;
}

/* Estados de carga */
.loading {
    text-align: center;
    padding: 40px;
    color: #888;
}

.loading i {
    font-size: 2em;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-panel {
        padding: 15px;
    }

    .admin-header h1 {
        font-size: 2em;
        flex-direction: column;
        gap: 10px;
    }

    .admin-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-filters {
        justify-content: center;
    }

    .admin-news-header {
        flex-direction: column;
        gap: 15px;
    }

    .admin-news-actions {
        align-self: flex-start;
    }

    .admin-news-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-btn {
        flex: none;
    }
}

@media (max-width: 480px) {
    .admin-news-item {
        padding: 15px;
    }

    .admin-news-title {
        font-size: 1.2em;
    }

    .admin-action-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px;
    }
}

/* Animaciones */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



/* ======================================
   ESTILOS PARA PANEL DEL SERVIDOR (IZQUIERDA) - COMPACTO
   ====================================== */
.server-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(45, 45, 62, 0.95) 100%);
    border: 2px solid rgba(33, 150, 243, 0.3);
    border-radius: 12px;
    padding: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(33, 150, 243, 0.2);
    z-index: 100;
    min-width: 200px;
    max-width: 1500px;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

.panel-title {
    color: #64B5F6;
    font-weight: bold;
    font-size: 0.95em;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.panel-refresh {
    margin-left: auto;
    color: #64B5F6;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px;
    border-radius: 50%;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.panel-refresh:hover {
    background: rgba(33, 150, 243, 0.1);
    transform: rotate(180deg);
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

/* Estado del servidor más compacto */
.server-status-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 8px;
    border-left: 3px solid #64B5F6;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.2);
}

.server-status-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64B5F6;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.5);
    animation: pulse 2s infinite;
}

.server-status-icon.offline {
    background: #F44336;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.5);
    animation: none;
}

.server-status-text {
    flex: 1;
}

.server-state {
    color: #64B5F6;
    font-weight: bold;
    font-size: 0.95em;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.server-state.offline {
    color: #F44336;
}

.users-online {
    color: #ddd;
    font-size: 0.8em;
    margin-top: 1px;
}

/* Grid de estadísticas más compacto */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stat-item {
    text-align: center;
    padding: 8px;
    background: rgba(33, 150, 243, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(33, 150, 243, 0.2);
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.1);
}

.stat-item:hover {
    background: rgba(33, 150, 243, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.stat-number {
    color: #64B5F6;
    font-size: 1.1em;
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
}

.stat-label {
    color: #ddd;
    font-size: 0.75em;
    font-weight: 500;
}

.stat-number.updating {
    transform: scale(1.05);
    color: #90CAF9;
    transition: all 0.3s ease;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.6);
}

/* Responsive para panel del servidor - MÁS COMPACTO */
@media (max-width: 768px) {
    .server-panel {
        bottom: 10px;
        left: 10px;
        right: 10px;
        min-width: auto;
        max-width: none;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    
    .stat-number {
        font-size: 1em;
    }
    
    .stat-label {
        font-size: 0.7em;
    }
    
    .server-status-info {
        padding: 8px;
    }
    
    .panel-title {
        font-size: 0.9em;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}


/* ========================================
   REPRODUCTOR YOUTUBE MINI - ESQUINA SUPERIOR IZQUIERDA
   ======================================== */
.mini-youtube-player {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 112px;
    z-index: 1000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    animation: slideInFromLeft 0.5s ease-out;
}

.mini-youtube-player:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 0, 0, 0.3);
}

.mini-youtube-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.mini-youtube-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mini-youtube-player:hover .mini-youtube-controls {
    opacity: 1;
}

.mini-youtube-btn {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s ease;
}

.mini-youtube-btn:hover {
    background: rgba(255, 0, 0, 0.8);
    transform: scale(1.1);
}

.mini-youtube-btn.minimize {
    background: rgba(255, 165, 0, 0.8);
}

.mini-youtube-btn.close {
    background: rgba(255, 0, 0, 0.8);
}

.mini-youtube-player.minimized {
    width: 60px;
    height: 40px;
}

.mini-youtube-player.minimized iframe {
    pointer-events: none;
}

.mini-youtube-player.minimized .mini-youtube-controls {
    opacity: 1;
}

/* ========================================
   BOTONES REDES SOCIALES DETALLADOS - LADO DERECHO
   ======================================== */
.social-buttons-container {
    position: fixed;
    bottom: 15px;
    left: 20px;
    /* CAMBIADO: de right a left */
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}

.social-button {
    position: relative;
    cursor: pointer;
    transform: translateX(120px);
    opacity: 0;
    animation: slideInFromRight 0.8s ease-out forwards;
}

.social-button.discord {
    animation-delay: 0.2s;
}

.social-button.whatsapp {
    animation-delay: 0.2s;
}

.social-button.facebook {
    animation-delay: 0.4s;
}

.social-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.social-box:hover {
    transform: translateX(-15px) scale(1.02);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.social-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.3s ease;
}

.social-box:hover::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.social-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
    color: white;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.social-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.social-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 2px;
}

.social-info {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
}

.social-stats {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.social-action {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 11px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.social-box:hover .social-action {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* ========================================
   ESTILOS ESPEC脥FICOS POR PLATAFORMA
   ======================================== */

/* Discord */
.social-button.discord .social-icon {
    background: linear-gradient(135deg, #5865F2, #404EED);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}

.social-button.discord .social-box:hover .social-icon {
    background: linear-gradient(135deg, #404EED, #5865F2);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.5);
    transform: scale(1.05);
}

.social-button.discord .social-box::before {
    background: linear-gradient(90deg, transparent, #5865F2, transparent);
}

.discord-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #43B581;
}

.discord-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #43B581;
    animation: discordPulse 2s infinite;
}

@keyframes discordPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}


/* ========================================
   ESTILOS ESPEC脥FICOS POR PLATAFORMA
   ======================================== */

/* whatsapp */
.social-button.whatsapp .social-icon {
    background: linear-gradient(135deg, #49F527, #48A135);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
}

.social-button.whatsapp .social-box:hover .social-icon {
    background: linear-gradient(135deg, #404EED, #5865F2);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.5);
    transform: scale(1.05);
}

.social-button.whatsapp .social-box::before {
    background: linear-gradient(90deg, transparent, #5865F2, transparent);
}

.whatsapp-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #43B581;
}

.whatsapp-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #43B581;
    animation: whatsappPulse 2s infinite;
}

@keyframes whatsappPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}


/* Facebook */
.social-button.facebook .social-icon {
    background: linear-gradient(135deg, #1877F2, #42A5F5);
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
}

.social-button.facebook .social-box:hover .social-icon {
    background: linear-gradient(135deg, #42A5F5, #1877F2);
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.5);
    transform: scale(1.05);
}

.social-button.facebook .social-box::before {
    background: linear-gradient(90deg, transparent, #1877F2, transparent);
}

.facebook-post-time {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
}

.facebook-new-post {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #42B883;
}

.facebook-new-indicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #42B883;
    animation: facebookBlink 1.5s infinite;
}

@keyframes facebookBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ========================================
   EFECTOS ADICIONALES
   ======================================== */
.social-box:hover .social-content {
    transform: translateX(-2px);
}

.social-info {
    transition: all 0.3s ease;
}

.social-box:hover .social-info {
    color: rgba(255, 255, 255, 0.95);
}

/* Efecto de resplandor en hover */
.social-button.discord .social-box:hover {
    box-shadow: 0 12px 40px rgba(88, 101, 242, 0.3);
}

.social-button.whatsapp .social-box:hover {
    box-shadow: 0 12px 40px rgba(88, 101, 242, 0.3);
}

.social-button.facebook .social-box:hover {
    box-shadow: 0 12px 40px rgba(24, 119, 242, 0.3);
}

/* ========================================
   ANIMACIONES
   ======================================== */
@keyframes slideInFromRight {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablets */
@media (max-width: 768px) {
    .mini-youtube-player {
        width: 160px;
        height: 90px;
        top: 15px;
        left: 15px;
    }

    .mini-youtube-player.minimized {
        width: 50px;
        height: 35px;
    }

    .social-buttons-container {
        bottom: 15px;
        right: 15px;
        gap: 12px;
    }

    .social-box {
        padding: 12px 16px;
        min-width: 240px;
        max-width: 260px;
    }

    .social-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .social-title {
        font-size: 14px;
    }

    .social-info {
        font-size: 11px;
    }

    .social-stats {
        font-size: 10px;
    }

    .social-action {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}

/* M贸viles */
@media (max-width: 480px) {
    .social-buttons-container {
        bottom: 10px;
        right: 10px;
        gap: 10px;
    }

    .social-box {
        padding: 10px 14px;
        min-width: 200px;
        max-width: 220px;
    }

    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .social-title {
        font-size: 13px;
    }

    .social-info {
        font-size: 10px;
    }

    .social-stats {
        font-size: 9px;
    }

    .social-action {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    .social-box:hover {
        transform: translateX(-8px) scale(1.01);
    }
}

/* ========================================
   COMPATIBILIDAD Y FALLBACKS
   ======================================== */

/* Fallback para navegadores sin backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .social-box {
        background: rgba(0, 0, 0, 0.95);
    }
    
    .mini-youtube-player {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* Reducir animaciones para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .social-button {
        animation: none;
        transform: translateX(0);
        opacity: 1;
    }
    
    .discord-pulse,
    .facebook-new-indicator {
        animation: none;
    }
    
    .social-box {
        transition: none;
    }
    
    .social-icon,
    .social-action {
        transition: none;
    }
}


/* ========================================
   SISTEMA DE ADVERTENCIA MÓVIL - CSS COMPLETO
   ======================================== */

/* Banner de advertencia para móviles */
.mobile-warning-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.95), rgba(29, 122, 200, 0.95));
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 15px;
    z-index: 9999;
    animation: slideDownWarning 0.5s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-warning-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
}

.mobile-warning-icon {
    color: #ffffff;
    font-size: 20px;
    opacity: 0.9;
    flex-shrink: 0;
}

.mobile-warning-text {
    flex: 1;
    min-width: 0;
}

.mobile-warning-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
}

.mobile-warning-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    line-height: 1.2;
}

.mobile-warning-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mobile-warning-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    color: #ffffff;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mobile-warning-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.mobile-warning-btn.desktop-view {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
}

.mobile-warning-btn.desktop-view:hover {
    background: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.6);
}

.mobile-warning-btn.close-warning {
    min-width: 32px;
    padding: 6px 8px;
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.4);
}

.mobile-warning-btn.close-warning:hover {
    background: rgba(244, 67, 54, 0.3);
    border-color: rgba(244, 67, 54, 0.6);
}

.mobile-warning-btn i {
    font-size: 10px;
}

/* Botón flotante para cambiar vista */
.mobile-view-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9998;
    animation: fadeInScale 0.4s ease;
}

.mobile-toggle-btn {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    border: none;
    border-radius: 25px;
    color: #ffffff;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 
        0 8px 25px rgba(255, 152, 0, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.mobile-toggle-btn:hover {
    background: linear-gradient(135deg, #F57C00, #E65100);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 30px rgba(255, 152, 0, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.3);
}

.mobile-toggle-btn:active {
    transform: translateY(0);
}

.mobile-toggle-btn i {
    font-size: 14px;
}

/* Animaciones */
@keyframes slideDownWarning {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Ajuste del contenido cuando hay banner */
body.mobile-warning-active {
    padding-top: 60px;
}

/* Vista desktop forzada en móvil */
.desktop-view-forced {
    /* Desactivar responsive design */
    min-width: 1200px !important;
    width: 1200px !important;
}

.desktop-view-forced * {
    /* Forzar tamaños desktop */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

/* Ocultar elementos responsive en vista desktop forzada */
.desktop-view-forced .mobile-warning-banner {
    display: none !important;
}

/* Media queries específicas para el banner */
@media (max-width: 480px) {
    .mobile-warning-content {
        gap: 8px;
    }
    
    .mobile-warning-title {
        font-size: 12px;
    }
    
    .mobile-warning-subtitle {
        font-size: 10px;
    }
    
    .mobile-warning-btn {
        padding: 5px 8px;
        font-size: 10px;
    }
    
    .mobile-warning-btn.close-warning {
        min-width: 28px;
        padding: 5px 6px;
    }
}

@media (max-width: 360px) {
    .mobile-warning-banner {
        padding: 10px 12px;
    }
    
    .mobile-warning-content {
        gap: 6px;
    }
    
    .mobile-warning-text {
        display: none;
    }
    
    .mobile-warning-icon::after {
        content: 'Mejor en PC';
        margin-left: 8px;
        font-size: 12px;
        font-weight: 600;
        font-family: inherit;
    }
}

/* Efectos de transición para cambio de vista */
.view-transition {
    transition: all 0.5s ease;
}

/* Estilos para cuando está cargando el cambio */
.loading-view-change {
    pointer-events: none;
    opacity: 0.7;
}

.loading-view-change::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.loading-view-change::before {
    content: 'Cambiando vista...';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(33, 150, 243, 0.9);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: 600;
    z-index: 10001;
}

/* ====================================== */
/* SELECTOR DE PAÍS WHATSAPP - CSS */
/* ====================================== */

.whatsapp-input-container {
    display: flex;
    gap: 0;
    border: 2px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.whatsapp-input-container:focus-within {
    border-color: #FF9800;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

.country-selector {
    flex: 0 0 auto;
    background: rgba(255, 152, 0, 0.1);
}

.country-selector select {
    background: transparent;
    border: none;
    color: white;
    padding: 12px 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    min-width: 100px;
}

.country-selector select option {
    background: #1e1e2e;
    color: white;
    padding: 8px;
}

.whatsapp-number-input {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

.whatsapp-number-input i {
    position: absolute;
    left: 15px;
    color: #25D366;
    z-index: 2;
}

.whatsapp-number-input input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    background: transparent;
    border: none;
    color: white;
    font-family: 'Montserrat', sans-serif;
    outline: none;
    font-size: 1em;
}

.whatsapp-number-input input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.whatsapp-preview {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 6px;
    color: #25D366;
    font-size: 0.9em;
    font-weight: 500;
    display: none;
}

.whatsapp-preview.show {
    display: block;
}

.whatsapp-preview i {
    margin-right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .whatsapp-input-container {
        flex-direction: column;
    }
    
    .country-selector select {
        text-align: center;
        min-width: 100%;
    }
}


/* ==============================================
   CSS OPTIMIZADO PARA RESPONSIVE - MÓVIL FIRST
   ============================================== */

/* Variables CSS para mejor mantenimiento */
:root {
    --primary-color: #F44336;
    --secondary-color: #4CAF50;
    --accent-color: #FF9800;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.6);
    --bg-primary: rgba(30, 30, 46, 0.95);
    --bg-secondary: rgba(45, 45, 62, 0.95);
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.2);
    --shadow-primary: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
}

/* Reset y base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fondo de video responsive */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 120vw;
    height: 120vh;
    z-index: -5;
    overflow: hidden;
}

.video-background video,
.video-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Logo responsive */
.logo {
    position: fixed;
    left: 49%;
    transform: translateX(-50%);
    z-index: 100;
    width: min(90vw, 400px);
    max-width: 500px;
    padding: 0 var(--spacing-md);
}

.logo img {
    width: 420px;
    height: auto;
    display: block;
}

/* Descripción central responsive */
.central-description,
.central-news-container {
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: min(90vw, 900px);
    max-height: 80vh;
    background: var(--bg-primary);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-primary);
    overflow: hidden;
}

.description-container {
    padding: clamp(20px, 5vw, 40px);
    text-align: center;
}

.description-text {
    color: var(--text-primary);
    font-weight: 300;
    font-size: clamp(1.25rem, 4vw, 2.5rem);
    line-height: 1.3;
    letter-spacing: 0.5px;
    margin: 0 0 var(--spacing-lg) 0;
}

.description-subtext {
    color: var(--text-secondary);
    font-size: clamp(0.875rem, 3vw, 1.2rem);
    margin: 0;
}

/* Sistema de modales optimizado */
.modal-buttons {
    position: fixed;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.modal-button {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    backdrop-filter: blur(10px);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-primary);
    border-left: 4px solid var(--secondary-color);
    min-width: 160px;
    color: var(--text-primary);
    text-decoration: none;
}

.modal-button:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-hover);
}

.modal-button i {
    margin-right: var(--spacing-md);
    font-size: var(--font-size-lg);
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-button span {
    font-size: var(--font-size-base);
    font-weight: 600;
}

/* Iconos sociales responsive */
.social-icons {
    position: fixed;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--bg-primary);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--border-primary);
}

.social-icons a:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-hover);
}

/* Modales generales */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(7px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    position: relative;
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-primary);
    overflow: hidden;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s ease;
}

.modal.active .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.close-modal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-size-lg);
    transition: all 0.3s ease;
    color: var(--text-secondary);
    border: none;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.modal-body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    max-height: 70vh;
}

/* Formularios */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-primary);
    transition: all 0.3s ease;
}

.input-with-icon:focus-within {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.input-with-icon i {
    position: absolute;
    left: var(--spacing-md);
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    z-index: 1;
}

.input-with-icon input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 3rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    outline: none;
}

.input-with-icon input::placeholder {
    color: var(--text-muted);
}

/* Botones */
.btn {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    border: none;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary-color), #45a049);
    color: var(--text-primary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, var(--primary-color), #d32f2f);
    color: var(--text-primary);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 67, 54, 0.4);
}

/* Sistema de notificaciones */
.message {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    display: none;
}

.message.show {
    display: block;
}

.message.success {
    background: rgba(76, 175, 80, 0.1);
    border-left: 3px solid var(--secondary-color);
    color: var(--secondary-color);
}

.message.error {
    background: rgba(244, 67, 54, 0.1);
    border-left: 3px solid var(--primary-color);
    color: var(--primary-color);
}

/* Paneles flotantes */
.floating-panel {
    position: fixed;
    background: var(--bg-primary);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-primary);
    z-index: 100;
}

/* YouTube player mini */
.mini-youtube-player {
    top: var(--spacing-md);
    left: var(--spacing-md);
    width: clamp(160px, 25vw, 200px);
    height: auto;
    aspect-ratio: 16/9;
}

/* Panel de servidor */
.server-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    left: auto;
    min-width: 200px;
}

/* Scrollbars personalizados */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #45a049;
}

/* ==============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================== */

/* Móviles pequeños (320px - 480px) */
@media screen and (max-width: 30em) {
    :root {
        --spacing-md: 0.75rem;
        --spacing-lg: 1rem;
        --spacing-xl: 1.25rem;
    }

    .logo {
        width: 90vw;
    }

    .central-description,
    .central-news-container {
        width: 95vw;
        max-height: 85vh;
    }

    .description-container {
        padding: var(--spacing-lg);
    }

    .modal-buttons {
        left: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .modal-button {
        width: 45px;
        height: 45px;
        padding: 0;
        border-radius: 50%;
        min-width: auto;
        border-left: none;
        border-top: 3px solid var(--secondary-color);
        justify-content: center;
    }

    .modal-button span {
        display: none;
    }

    .modal-button i {
        margin: 0;
        font-size: var(--font-size-lg);
    }

    .social-icons {
        right: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .social-icons a {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-base);
    }

    .modal {
        padding: var(--spacing-sm);
    }

    .modal-content {
        max-width: 95vw;
    }

    .modal-header {
        padding: var(--spacing-md);
    }

    .modal-body {
        padding: var(--spacing-lg);
    }
}

/* Móviles medianos (481px - 768px) */
@media screen and (min-width: 30.0625em) and (max-width: 48em) {

    .central-description,
    .central-news-container {
        width: 92vw;
    }

    .modal-button {
        width: 50px;
        height: 50px;
        padding: 0;
        border-radius: 50%;
        min-width: auto;
        border-left: none;
        border-top: 3px solid var(--secondary-color);
        justify-content: center;
    }

    .modal-button span {
        display: none;
    }

    .modal-button i {
        margin: 0;
    }
}

/* Tablets (769px - 1024px) */
@media screen and (min-width: 48.0625em) and (max-width: 64em) {

    .central-description,
    .central-news-container {
        width: 85vw;
    }

    .modal-button {
        min-width: 120px;
    }
}

/* Desktop pequeño (1025px - 1200px) */
@media screen and (min-width: 64.0625em) and (max-width: 75em) {

    .central-description,
    .central-news-container {
        width: 80vw;
        max-width: 800px;
    }
}

/* Desktop grande (1201px+) */
@media screen and (min-width: 75.0625em) {

    .central-description,
    .central-news-container {
        width: 70vw;
        max-width: 900px;
    }
}

/* Orientación landscape en móviles */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .logo {
        top: var(--spacing-xs);
        width: 200px;
    }

    .central-description,
    .central-news-container {
        top: 45%;
        max-height: 70vh;
    }

    .modal-buttons {
        top: 30%;
    }

    .social-icons {
        top: 30%;
    }
}

/* Preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    :root {
        --border-primary: rgba(255, 255, 255, 0.3);
        --border-secondary: rgba(255, 255, 255, 0.5);
        --text-secondary: rgba(255, 255, 255, 0.9);
        --text-muted: rgba(255, 255, 255, 0.8);
    }
}

/* Modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: rgba(15, 15, 25, 0.95);
        --bg-secondary: rgba(25, 25, 35, 0.95);
    }
}

/* Optimizaciones para pantallas táctiles */
@media (hover: none) and (pointer: coarse) {

    .modal-button,
    .social-icons a,
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .close-modal {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Componentes específicos responsivos */
.character-search-panel,
.user-login-panel {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: min(90vw, 320px);
    background: var(--bg-primary);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-primary);
}

@media screen and (max-width: 48em) {

    .character-search-panel,
    .user-login-panel {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: var(--spacing-md);
        max-width: calc(100% - 2rem);
    }
}

/* Grid responsivo para listas */
.responsive-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

/* Utilidades responsive */
.hidden-mobile {
    display: block;
}

.hidden-desktop {
    display: none;
}

@media screen and (max-width: 48em) {
    .hidden-mobile {
        display: none;
    }

    .hidden-desktop {
        display: block;
    }
}

/* Contenedores flexibles */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.flex-item {
    flex: 1;
    min-width: min(100%, 200px);
}

/* Animaciones optimizadas */
@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-slide {
    animation: slideIn 0.3s ease;
}

.animate-fade {
    animation: fadeIn 0.3s ease;
}

/* Mejoras de accesibilidad */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.focus-visible:focus {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Estados de carga */
.loading {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid var(--border-primary);
    border-radius: 50%;
    border-top-color: var(--secondary-color);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Optimizaciones de rendimiento */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}


/* =============================================
   SOLUCIÓN SIMPLE - 100% ZOOM CON VISTA 80%
   ============================================= */

/* Agrega esto al FINAL de tu CSS existente */

/* Solo para desktop */
@media screen and (min-width: 1920px) {

    /* Forzar 100% de zoom en el navegador */
    html {
        zoom: 1 !important;
        -ms-zoom: 1 !important;
    }
    
    /* Escalar visualmente al 80% */
    body {
        transform: scale(0.8) !important;
        transform-origin: top left !important;
        width: 125% !important;
        height: 125% !important;
    }
    
    /* Mantener el fondo de video sin escalar */
    .video-background {
        transform: scale(1.10) !important;
        transform-origin: center center !important;
    }
}

/* Mantener responsive normal en móviles */
@media screen and (max-width: 1023px) {

    /* No aplicar escalado en móviles */
    body {
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .video-background {
        transform: none !important;
    }
}

/* ============================= */
/* PANEL DE CARACTERÍSTICAS DEL SERVIDOR */
/* ============================= */

.server-features-panel {
    position: fixed;
    top: 67%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
    min-width: 320px;
    max-width: 330px;
    background: linear-gradient(135deg, rgba(13, 27, 42, 0.95), rgba(27, 38, 44, 0.95));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.server-features-panel:hover {
    transform: translateY(-50%) translateX(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Header del panel */
.features-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.features-header i {
    color: #4CAF50;
    font-size: 18px;
    width: 20px;
    text-align: center;
}

/* Contenido del panel */
.features-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(-3px);
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #4CAF50;
    transition: all 0.3s ease;
}

.feature-item:hover::before {
    width: 5px;
}

/* Iconos de características */
.feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.exp-feature .feature-icon {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
    color: #FFC107;
}

.drop-feature .feature-icon {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.2), rgba(156, 39, 176, 0.1));
    color: #9C27B0;
}

.reset-feature .feature-icon {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(33, 150, 243, 0.1));
    color: #2196F3;
}

.level-feature .feature-icon {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.2), rgba(255, 87, 34, 0.1));
    color: #FF5722;
}

.pvp-feature .feature-icon {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
    color: #F44336;
}

.feature-item:hover .feature-icon {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Información de características */
.feature-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.feature-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-value {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.exp-feature .feature-value {
    color: #FFC107;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

.drop-feature .feature-value {
    color: #9C27B0;
    text-shadow: 0 0 10px rgba(156, 39, 176, 0.3);
}

.reset-feature .feature-value {
    color: #2196F3;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.level-feature .feature-value {
    color: #FF5722;
    text-shadow: 0 0 10px rgba(255, 87, 34, 0.3);
}

.pvp-feature .feature-value {
    color: #F44336;
    text-shadow: 0 0 10px rgba(244, 67, 54, 0.3);
}

/* Footer del panel */
.features-footer {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.server-uptime {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4CAF50;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
}

.server-uptime i {
    font-size: 12px;
}

/* ============================= */
/* RESPONSIVE DESIGN */
/* ============================= */

@media (max-width: 1400px) {
    .server-features-panel {
        right: 15px;
        min-width: 260px;
        max-width: 280px;
    }
}

@media (max-width: 1200px) {
    .server-features-panel {
        top: 80%;
        min-width: 240px;
        max-width: 260px;
    }

    .features-content {
        padding: 15px;
        gap: 10px;
    }

    .feature-item {
        padding: 10px 12px;
    }

    .feature-icon {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .feature-value {
        font-size: 14px;
    }

    .feature-label {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .server-features-panel {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 15px;
        width: calc(100% - 30px);
        max-width: none;
        order: 3;
        /* Aparece después del login panel */
    }

    .features-header {
        padding: 15px 18px;
        font-size: 15px;
    }

    .features-header i {
        font-size: 16px;
    }

    .features-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 18px;
    }

    .feature-item {
        padding: 12px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .feature-info {
        align-items: center;
    }

    .features-footer {
        padding: 12px 18px;
    }
}

@media (max-width: 480px) {
    .server-features-panel {
        margin: 10px;
        width: calc(100% - 20px);
    }

    .features-content {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .feature-item {
        flex-direction: row;
        text-align: left;
        padding: 10px 12px;
    }

    .feature-info {
        align-items: flex-start;
    }

    .feature-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .feature-value {
        font-size: 13px;
    }

    .feature-label {
        font-size: 10px;
    }
}

/* ============================= */
/* ANIMACIONES ADICIONALES */
/* ============================= */

@keyframes featureGlow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
    }
}

.feature-item.highlight {
    animation: featureGlow 2s infinite;
}

/* Efecto de carga para valores */
.feature-value.loading {
    color: #888;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================= */
/* AJUSTES PARA DIFERENTES PANTALLAS */
/* ============================= */

/* Pantallas muy anchas */
@media (min-width: 1920px) {
    .server-features-panel {
        right: 30px;
        min-width: 320px;
        max-width: 360px;
    }

    .feature-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .feature-value {
        font-size: 18px;
    }
}

/* Ajustes para altura de pantalla pequeña */
@media (max-height: 1080) {
    .server-features-panel {
        top: 40%;
        transform: translateY(-40%);
    }

    .features-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 15px;
    }

    .feature-item {
        padding: 8px 10px;
    }

    .feature-icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .feature-value {
        font-size: 12px;
    }

    .feature-label {
        font-size: 10px;
    }
}

/* Modo landscape en móviles */
@media (max-height: 500px) and (orientation: landscape) {
    .server-features-panel {
        position: relative;
        top: auto;
        transform: none;
        margin: 10px;
        width: calc(100% - 20px);
    }

    .features-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
        padding: 12px;
    }
}


/* ============================= */
/* PANEL DEL SERVIDOR - TAMAÑO FIJO */
/* ============================= */

.server-panel {
    position: fixed;
    bottom: 15px;
    right: 20px;
    left: auto;
    background: linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(45, 45, 62, 0.95) 100%);
    border: 2px solid rgb(76 125 175 / 30%);
    border-radius: 12px;
    padding: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 100;
    /* TAMAÑO FIJO - NO CAMBIARÁ */
    width: 260px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    /* Alto fijo opcional */
    min-height: 155px;
    max-height: 155px;
}

/* Grid de estadísticas con tamaño fijo */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.stat-item {
    text-align: center;
    padding: 8px 4px;
    /* Padding reducido */
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(76, 175, 80, 0.2);
    /* Tamaño fijo para cada estadística */
    min-height: 50px;
    max-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-number {
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
    font-size: 16px !important;
    /* Tamaño fijo de fuente */
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
    /* Evitar que el texto se desborde */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-label {
    color: #ddd;
    font-size: 11px !important;
    /* Tamaño fijo de fuente */
    font-weight: 500;
    /* Evitar que el texto se desborde */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estado del servidor con tamaño controlado */
.server-status-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    border-left: 3px solid #64B5F6;
    /* Alto fijo */
    min-height: 40px;
    max-height: 40px;
}

.users-online {
    color: #ddd;
    font-size: 12px !important;
    /* Tamaño fijo */
    margin-top: 1px;
    /* Evitar desborde */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header del panel con tamaño fijo */
.panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(76, 175, 80, 0.2);
    /* Alto fijo */
    min-height: 24px;
    max-height: 24px;
}

.panel-title {
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
    font-weight: bold;
    font-size: 14px !important;
    /* Tamaño fijo */
    /* Evitar desborde */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* RESPONSIVE - Mantener tamaño fijo también en móvil */
@media (max-width: 768px) {
    .server-panel {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 15px;
        width: calc(100% - 30px) !important;
        min-width: auto !important;
        max-width: none !important;
        max-height: none;
        min-height: 120px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    
    .stat-number {
        font-size: 14px !important;
    }
    
    .stat-label {
        font-size: 10px !important;
    }
    
    .stat-item {
        min-height: 45px;
        max-height: 45px;
        padding: 6px 4px;
    }
}

@media (max-width: 480px) {
    .server-panel {
        margin: 10px;
        width: calc(100% - 20px) !important;
        min-height: 110px;
    }
    
    .stat-number {
        font-size: 13px !important;
    }
    
    .stat-label {
        font-size: 9px !important;
    }
    
    .stat-item {
        min-height: 40px;
        max-height: 40px;
    }
}

/* HORA PARA LA WEB */


<style>body {
    background-color: #FFFFFF;
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
  }
  
  .draggable-clock {
    position: absolute;
    top: 775px;
    left: 650px;
  }
  
  .time-container {
    display: flex;
    justify-content: center;
    /* Centramos el contenido por defecto */
    gap: 50px;
    text-align: center;
    width: 100%;
    /* Ocupa el 100% del ancho del contenedor padre */
  }
  
  .time-block {
    padding: 5px;
    border-radius: 10px;
  }
  
  .time-label {
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0;
  }
  
  .time-value {
    font-size: 5rem;
    font-weight: bold;
    color: #ff4500;
    margin: 0;
  }
  
  .time-date {
    font-size: 1rem;
    color: #a0a0a0;
    margin: 0;
  }

  /* --- MEDIA QUERIES PARA ADAPTAR EL DISEÑO --- */
  
  @media (max-width: 992px) {

    /* Estilos para pantallas medianas (ej. laptops pequeñas y tablets en horizontal) */
    .time-container {
      gap: 30px;
    }
  }

  @media (max-width: 768px) {

    /* Estilos para pantallas más pequeñas (ej. tablets y móviles) */
    .time-container {
      flex-direction: column;
      gap: 20px;
    }
    
    .time-label {
      font-size: 1.2rem;
    }
    
    .time-value {
      font-size: 3.5rem;
    }
    
    .time-date {
      font-size: 0.9rem;
    }
    
    .draggable-clock {
      /* Ajustamos la posición para pantallas más pequeñas si lo necesitas */
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  @media (max-width: 480px) {

    /* Estilos para móviles */
    .time-value {
      font-size: 2.5rem;
    }
  }

</style>
/* ===== SISTEMA DE VOTACIONES VIP - CSS SEPARADO ===== */

/* Variables CSS para el sistema de votaciones */
:root {
    --voting-primary: #667eea;
    --voting-secondary: #764ba2;
    --voting-accent: #ffd700;
    --voting-success: #4CAF50;
    --voting-warning: #ff9800;
    --voting-danger: #f44336;
    --voting-dark: #1a1a2e;
    --voting-darker: #16213e;
    --voting-light: rgba(255, 255, 255, 0.1);
    --voting-border: rgba(255, 255, 255, 0.2);
    --voting-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --voting-radius: 12px;
    --voting-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estilos para el Modal de Votaciones VIP */
.voting-modal .modal-content {
    max-width: 1200px;
    width: 95%;
    max-height: 90vh;
}

.voting-modal .modal-body {
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}

#voting-system-content {
    min-height: 400px;
}

/* Estados de carga y error */
.voting-loading,
.voting-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    font-size: 18px;
    color: #fff;
}

.voting-loading i {
    margin-right: 15px;
    font-size: 24px;
    color: #667eea;
    animation: spin 1s linear infinite;
}

.voting-error i {
    margin-right: 15px;
    font-size: 24px;
    color: #ff6b6b;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Contenedor principal del sistema de votaciones */
.voting-system-container {
    background: transparent;
    border-radius: 0;
    padding: 20px;
    max-width: none;
    width: 100%;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: none;
    transform: none;
    transition: none;
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    display: block;
    font-family: 'Montserrat', sans-serif;
}

.voting-system-container.active {
    display: block;
    animation: votingFadeIn 0.4s ease-out;
}

@keyframes votingFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Header del sistema de votaciones */
.voting-header {
    background: linear-gradient(135deg, var(--voting-primary), var(--voting-secondary));
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--voting-border);
}

.voting-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.voting-title i {
    font-size: 28px;
    color: var(--voting-accent);
}

.voting-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--voting-transition);
}

.voting-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Contenido principal */
.voting-content {
    padding: 25px;
    max-height: calc(90vh - 100px);
    overflow-y: auto;
    color: white;
}

/* Panel de usuario */
.voting-user-panel {
    background: var(--voting-light);
    border-radius: var(--voting-radius);
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--voting-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--voting-accent), #ffed4e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--voting-dark);
    font-weight: 700;
}

.user-details h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: white;
}

.user-details p {
    margin: 0;
    color: #b0b0b0;
    font-size: 14px;
}

.vip-points-display {
    text-align: right;
}

.vip-points-label {
    font-size: 14px;
    color: #b0b0b0;
    margin-bottom: 5px;
}

.vip-points-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--voting-accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vip-points-value i {
    font-size: 24px;
}

/* Contenedor de sitios de votación */
.voting-sites-container {
    margin-bottom: 25px;
}

.voting-sites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.voting-sites-title {
    font-size: 20px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.voting-sites-title i {
    color: var(--voting-accent);
}

.voting-refresh {
    background: var(--voting-light);
    border: 1px solid var(--voting-border);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: var(--voting-transition);
}

.voting-refresh:hover {
    background: rgba(255, 255, 255, 0.2);
}

.voting-refresh i {
    transition: transform 0.3s ease;
}

.voting-refresh:hover i {
    transform: rotate(180deg);
}

/* Grid de sitios de votación */
.voting-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

/* Tarjeta de sitio de votación */
.voting-site-card {
    background: var(--voting-light);
    border-radius: var(--voting-radius);
    padding: 20px;
    border: 1px solid var(--voting-border);
    transition: var(--voting-transition);
    position: relative;
    overflow: hidden;
}

.voting-site-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--voting-primary);
}

.voting-site-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--voting-primary), var(--voting-secondary));
}

.site-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.site-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--voting-primary), var(--voting-secondary));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.site-info h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: white;
    font-weight: 600;
}

.site-type {
    font-size: 12px;
    color: #b0b0b0;
    text-transform: uppercase;
    font-weight: 500;
}

.site-rewards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.reward-info {
    text-align: center;
}

.reward-label {
    font-size: 12px;
    color: #b0b0b0;
    margin-bottom: 3px;
}

.reward-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--voting-accent);
}

.site-status {
    margin-bottom: 15px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-available .status-dot {
    background: var(--voting-success);
}

.status-cooldown .status-dot {
    background: var(--voting-warning);
}

.status-unavailable .status-dot {
    background: var(--voting-danger);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.cooldown-timer {
    font-size: 12px;
    color: var(--voting-warning);
    font-weight: 500;
}

/* Botones de votación */
.vote-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--voting-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: white;
}

.vote-button.available {
    background: linear-gradient(135deg, var(--voting-success), #45a049);
}

.vote-button.available:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.vote-button.cooldown {
    background: linear-gradient(135deg, var(--voting-warning), #f57c00);
    cursor: not-allowed;
}

.vote-button.unavailable {
    background: linear-gradient(135deg, var(--voting-danger), #d32f2f);
    cursor: not-allowed;
}

/* Panel de canje de días VIP */
.vip-exchange-panel {
    background: var(--voting-light);
    border-radius: var(--voting-radius);
    padding: 20px;
    border: 1px solid var(--voting-border);
}

.exchange-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.exchange-header h3 {
    margin: 0;
    font-size: 18px;
    color: white;
}

.exchange-header i {
    color: var(--voting-accent);
    font-size: 20px;
}

.exchange-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.exchange-option {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--voting-border);
    text-align: center;
    transition: var(--voting-transition);
    cursor: pointer;
}

.exchange-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--voting-primary);
}

.exchange-option.selected {
    background: rgba(102, 126, 234, 0.2);
    border-color: var(--voting-primary);
}

.exchange-days {
    font-size: 24px;
    font-weight: 700;
    color: var(--voting-accent);
    margin-bottom: 5px;
}

.exchange-cost {
    font-size: 14px;
    color: #b0b0b0;
}

.exchange-button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--voting-primary), var(--voting-secondary));
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--voting-transition);
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.exchange-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.exchange-button:disabled {
    background: var(--voting-danger);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Modal de votación */
.voting-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.voting-modal.active {
    display: flex;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.voting-modal-content {
    background: linear-gradient(135deg, var(--voting-dark) 0%, var(--voting-darker) 100%);
    border-radius: var(--voting-radius);
    padding: 0;
    max-width: 500px;
    width: 90%;
    border: 1px solid var(--voting-border);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.voting-modal-header {
    background: linear-gradient(135deg, var(--voting-primary), var(--voting-secondary));
    padding: 20px;
    border-radius: var(--voting-radius) var(--voting-radius) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.voting-modal-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.voting-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--voting-transition);
}

.voting-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.voting-modal-body {
    padding: 25px;
    color: white;
    text-align: center;
}

.voting-countdown {
    font-size: 48px;
    font-weight: 700;
    color: var(--voting-accent);
    margin: 20px 0;
    font-family: 'Courier New', monospace;
}

.voting-instructions {
    color: #b0b0b0;
    margin-bottom: 20px;
    line-height: 1.6;
}

.voting-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 20px 0;
}

.voting-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--voting-primary), var(--voting-secondary));
    width: 0%;
    transition: width 0.3s ease;
}

/* Botón de acceso al sistema */
.voting-access-button {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--voting-primary), var(--voting-secondary));
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: var(--voting-radius);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--voting-transition);
    z-index: 1000;
    box-shadow: var(--voting-shadow);
}

.voting-access-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.voting-access-button i {
    font-size: 18px;
}

/* Alertas y notificaciones */
.voting-alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: none;
    align-items: center;
    gap: 10px;
}

.voting-alert.show {
    display: flex;
    animation: alertSlideIn 0.3s ease-out;
}

@keyframes alertSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.voting-alert.success {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid var(--voting-success);
    color: var(--voting-success);
}

.voting-alert.error {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid var(--voting-danger);
    color: var(--voting-danger);
}

.voting-alert.warning {
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid var(--voting-warning);
    color: var(--voting-warning);
}

.voting-alert.info {
    background: rgba(33, 150, 243, 0.2);
    border: 1px solid #2196F3;
    color: #2196F3;
}

/* Loading states */
.voting-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #b0b0b0;
}

.voting-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid var(--voting-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .voting-system-container {
        width: 98%;
        max-height: 95vh;
    }
    
    .voting-header {
        padding: 15px 20px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .voting-title {
        font-size: 20px;
    }
    
    .voting-content {
        padding: 20px;
    }
    
    .voting-user-panel {
        flex-direction: column;
        text-align: center;
    }
    
    .vip-points-display {
        text-align: center;
    }
    
    .voting-sites-grid {
        grid-template-columns: 1fr;
    }
    
    .voting-sites-header {
        flex-direction: column;
        text-align: center;
    }
    
    .exchange-options {
        grid-template-columns: 1fr;
    }
    
    .voting-access-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        top: auto;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .voting-countdown {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .voting-system-container {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .voting-header {
        border-radius: 0;
    }
    
    .voting-content {
        padding: 15px;
    }
    
    .voting-sites-grid {
        gap: 15px;
    }
    
    .voting-site-card {
        padding: 15px;
    }
    
    .voting-modal-content {
        width: 95%;
        margin: 10px;
    }
}

/* Animaciones adicionales */
.voting-site-card.voting-animation {
    animation: voteSuccess 0.6s ease-out;
}

@keyframes voteSuccess {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.vip-points-value.points-animation {
    animation: pointsIncrease 0.8s ease-out;
}

@keyframes pointsIncrease {
    0% {
        transform: scale(1);
        color: var(--voting-accent);
    }

    50% {
        transform: scale(1.2);
        color: var(--voting-success);
    }

    100% {
        transform: scale(1);
        color: var(--voting-accent);
    }
}

/* Overlay para el sistema */
.voting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    backdrop-filter: blur(3px);
}

.voting-overlay.active {
    display: block;
    animation: overlayFadeIn 0.3s ease-out;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Estilos para el scrollbar personalizado */
.voting-content::-webkit-scrollbar {
    width: 8px;
}

.voting-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.voting-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--voting-primary), var(--voting-secondary));
    border-radius: 4px;
}

.voting-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--voting-secondary), var(--voting-primary));
}

/* Efectos de hover mejorados */
.voting-site-card:hover .site-icon {
    transform: scale(1.1);
    transition: var(--voting-transition);
}

.voting-site-card:hover .vote-button.available {
    background: linear-gradient(135deg, #45a049, var(--voting-success));
}

/* Estados de carga específicos */
.voting-site-card.loading {
    opacity: 0.7;
    pointer-events: none;
}

.voting-site-card.loading .vote-button {
    background: linear-gradient(135deg, #666, #888);
    cursor: not-allowed;
}

.voting-site-card.loading .vote-button::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
}

/* Efectos de partículas para celebración */
.voting-celebration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.voting-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--voting-accent);
    border-radius: 50%;
    animation: particleFloat 2s ease-out forwards;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Mejoras de accesibilidad */
.voting-system-container:focus-within {
    outline: 2px solid var(--voting-primary);
    outline-offset: 2px;
}

.vote-button:focus,
.exchange-button:focus,
.voting-close:focus {
    outline: 2px solid var(--voting-accent);
    outline-offset: 2px;
}

/* Animación de entrada para elementos */
.voting-site-card {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.voting-site-card:nth-child(1) {
    animation-delay: 0.1s;
}

.voting-site-card:nth-child(2) {
    animation-delay: 0.2s;
}

.voting-site-card:nth-child(3) {
    animation-delay: 0.3s;
}

.voting-site-card:nth-child(4) {
    animation-delay: 0.4s;
}

.voting-site-card:nth-child(5) {
    animation-delay: 0.5s;
}

.voting-site-card:nth-child(6) {
    animation-delay: 0.6s;
}

.voting-site-card:nth-child(7) {
    animation-delay: 0.7s;
}

.voting-site-card:nth-child(8) {
    animation-delay: 0.8s;
}

.voting-site-card:nth-child(9) {
    animation-delay: 0.9s;
}

.voting-site-card:nth-child(10) {
    animation-delay: 1.0s;
}

@keyframes slideInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Estilos para modo oscuro mejorado */
@media (prefers-color-scheme: dark) {
    :root {
        --voting-dark: #0a0a0f;
        --voting-darker: #050508;
    }
}

/* Efectos de glassmorphism */
.voting-glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Transiciones suaves para todos los elementos interactivos */
* {
    transition: var(--voting-transition);
}

button,
.vote-button,
.exchange-option {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mejoras de rendimiento */
.voting-system-container,
.voting-modal {
    will-change: transform, opacity;
}

.voting-site-card {
    will-change: transform;
}

/* Fin del archivo CSS del Sistema de Votaciones VIP */

/* =============================================
   ESTILOS PARA MODALES DE GUÍAS Y EVENTOS
   ============================================= */

/* Estilos para el modal de guías - Diseño similar a noticias */
.guias-modal .modal-content {
    max-width: 900px;
    max-height: 80vh;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(45, 45, 62, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 2px solid rgba(76, 175, 80, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}

/* Header de guías similar al de noticias */
.guides-header-main {
    background: linear-gradient(90deg, #4CAF50, #388E3C);
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(76, 175, 80, 0.3);
}

.guides-title-main {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.guides-title-main i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.guides-live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(33, 150, 243, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid rgba(33, 150, 243, 0.3);
    font-size: 14px;
}

.guides-pulse {
    width: 8px;
    height: 8px;
    background: #2196F3;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Filtros de guías */
.guides-filters-container {
    background: rgba(15, 15, 20, 0.8);
    padding: 15px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.guides-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.guides-filters .filter-btn {
    background: rgba(45, 45, 62, 0.7);
    color: rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 8px 18px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 6px;
    outline: none;
}

.guides-filters .filter-btn:hover {
    border-color: rgba(76, 175, 80, 0.5);
    color: #4CAF50;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.2);
}

.guides-filters .filter-btn.active {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border-color: #4CAF50;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.guides-filters .filter-btn i {
    font-size: 12px;
}

/* Contenedor de contenido de guías */
.guides-content-container {
    background: rgba(20, 20, 28, 0.95);
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

.guides-container {
    max-height: 500px;
    overflow-y: auto;
    padding: 20px;
}

/* Scrollbar personalizada para guías */
.guides-container::-webkit-scrollbar {
    width: 8px;
}

.guides-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.guides-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border-radius: 10px;
    border: 2px solid rgba(20, 20, 28, 0.95);
}

.guides-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #45a049, #388e3c);
}



.guides-loading,
.guides-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.8);
}

.guides-loading i {
    font-size: 3em;
    margin-bottom: 20px;
    color: #4CAF50;
    animation: spin 1s linear infinite;
}

.guides-loading h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #4CAF50;
}

.guides-loading p {
    margin: 0;
    font-size: 16px;
    opacity: 0.8;
}

.guides-empty i {
    font-size: 4em;
    margin-bottom: 20px;
    color: #4CAF50;
    opacity: 0.8;
}

.guides-empty h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #4CAF50;
}

.guides-empty p {
    margin: 0;
    font-size: 16px;
    opacity: 0.8;
}

/* Lista de guías */
.guides-list {
    display: grid;
    gap: 20px;
}

.guide-item {
    background: linear-gradient(135deg, rgba(45, 45, 62, 0.8) 0%, rgba(30, 30, 46, 0.8) 100%);
    border-radius: 15px;
    padding: 20px;
    border-left: 4px solid #4CAF50;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.guide-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, transparent 100%);
    z-index: -1;
}

.guide-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(76, 175, 80, 0.2);
    border-left-color: #66BB6A;
}

.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.guide-header h3 {
    margin: 0;
    color: #4CAF50;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.guide-item-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.guide-category {
    background: linear-gradient(45deg, #4CAF50, #388E3C);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.guide-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

.guide-date i {
    font-size: 12px;
    opacity: 0.8;
}

.guide-content {
    margin-top: 15px;
}

.guide-content p {
    margin: 0 0 15px 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-size: 15px;
    text-align: justify;
}

.guide-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 12px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.guide-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

.guide-text h1,
.guide-text h2,
.guide-text h3 {
    color: #4CAF50;
    margin-top: 25px;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Estilos para las secciones de guías */
.guide-sections {
    margin-top: 20px;
    display: grid;
    gap: 15px;
}

.guide-section {
    background: rgba(76, 175, 80, 0.1);
    border-radius: 12px;
    padding: 15px;
    border-left: 4px solid #4CAF50;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.guide-section:hover {
    background: rgba(76, 175, 80, 0.15);
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.2);
}

.section-header {
    padding: 12px 15px;
    border-radius: 8px 8px 0 0;
}

.section-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-content {
    padding: 15px;
    color: #ddd;
    line-height: 1.6;
    font-size: 0.95rem;
}

.section-content p {
    margin-bottom: 10px;
}

.section-content:last-child {
    margin-bottom: 0;
}

.guide-text ul,
.guide-text ol {
    padding-left: 20px;
    margin: 10px 0;
}

.guide-text li {
    margin-bottom: 5px;
}

.guide-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: #888;
}

.guide-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Estilos para el modal de eventos */
.eventos-modal .modal-content {
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
}

.events-container {
    padding: 20px;
}

.events-loading,
.events-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.events-loading i {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #9C27B0;
    animation: spin 1s linear infinite;
}

.events-empty i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #666;
}

.event-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.event-item.active {
    border-color: rgba(156, 39, 176, 0.3);
    background: rgba(156, 39, 176, 0.05);
}

.event-item.past {
    opacity: 0.6;
    border-color: rgba(255, 255, 255, 0.05);
}

.event-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.event-header h3 {
    color: #9C27B0;
    margin: 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.event-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.event-status.upcoming {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.event-status.finished {
    background: rgba(158, 158, 158, 0.2);
    color: #9E9E9E;
}

.event-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.event-time,
.event-times,
.event-duration,
.event-countdown,
.timezone-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ddd;
    font-size: 0.75rem;
}

.timezone-info {
    background: rgba(33, 150, 243, 0.15);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(33, 150, 243, 0.3);
    color: #2196F3;
    font-size: 0.7rem;
    grid-column: 1 / -1;
}

.timezone-info i {
    color: #2196F3;
}

.time-badge {
    background: rgba(156, 39, 176, 0.2);
    color: #9C27B0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-right: 4px;
    border: 1px solid rgba(156, 39, 176, 0.3);
    cursor: help;
    transition: all 0.2s ease;
}

.time-badge:hover {
    background: rgba(156, 39, 176, 0.3);
    transform: scale(1.05);
}

/* Estilos para el selector de zona horaria */
.timezone-selector-container {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 8px;
}

.timezone-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timezone-selector-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2196F3;
    font-weight: 500;
    font-size: 0.9rem;
}

.timezone-selector-header i {
    font-size: 1.1rem;
}

#timezone-select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

#timezone-select:hover {
    border-color: rgba(33, 150, 243, 0.5);
    background: rgba(0, 0, 0, 0.4);
}

#timezone-select:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

#timezone-select option {
    background: #1a1a1a;
    color: #fff;
    padding: 5px;
}

.timezone-info-display {
    font-size: 0.75rem;
    color: #bbb;
    font-style: italic;
}

.timezone-info-display span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.event-countdown {
    background: rgba(156, 39, 176, 0.2);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

.countdown-text {
    font-weight: 600;
    color: #9C27B0;
}

.event-description {
    color: #ccc;
    line-height: 1.6;
}

.event-description p {
    margin: 0;
}



/* Responsive para móviles */
@media (max-width: 768px) {

    .guias-modal .modal-content,
    .eventos-modal .modal-content {
        max-width: 95vw;
        margin: 20px auto;
    }
    
    .guides-container,
    .events-container {
        padding: 15px;
    }
    
    .guide-item,
    .event-item {
        padding: 15px;
    }
    
    .guide-header,
    .event-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .event-details {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .event-alarm {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* Fin de estilos para modales de guías y eventos */


/* ========================================
   BOTONES REDES SOCIALES - SOLO LOGOS LIMPIOS
   ======================================== */

/* CONTENEDOR LIMPIO */
.social-buttons-container {
    position: fixed !important;
    bottom: 15px !important;
    left: 20px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    z-index: 999 !important;
}

/* ELIMINAR COMPLETAMENTE EL .social-box */
.social-button .social-box {
    display: none !important;
}

/* HACER QUE EL BOTÓN SEA DIRECTAMENTE EL ÁREA CLICKEABLE */
.social-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.social-button:hover {
    transform: scale(1.1) !important;
}

/* MOSTRAR DIRECTAMENTE EL ICONO EN EL BOTÓN */
.social-button::before {
    content: "" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-size: 22px !important;
    color: white !important;
    font-weight: 900 !important;
}

/* WhatsApp - Verde */
.social-button.whatsapp::before {
    content: "\f232" !important;
    /* Código FontAwesome para WhatsApp */
    background: #25D366 !important;
}

.social-button.whatsapp:hover::before {
    background: #1DA851 !important;
}

/* Discord - Morado */
.social-button.discord::before {
    content: "\f392" !important;
    /* Código FontAwesome para Discord */
    background: #5865F2 !important;
}

.social-button.discord:hover::before {
    background: #404EED !important;
}

/* OCULTAR TODOS LOS ELEMENTOS INTERNOS */
.social-button .social-icon,
.social-button .social-content,
.social-button .social-action,
.social-button .social-title,
.social-button .social-info,
.social-button .social-stats {
    display: none !important;
    visibility: hidden !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .social-buttons-container {
        gap: 12px !important;
        left: 15px !important;
    }
    
    .social-button {
        width: 45px !important;
        height: 45px !important;
    }
    
    .social-button::before {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .social-buttons-container {
        gap: 10px !important;
        left: 10px !important;
    }
    
    .social-button {
        width: 42px !important;
        height: 42px !important;
    }
    
    .social-button::before {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }
}

/* Estilos responsivos para el ranking */
@media (max-width: 768px) {
    .ranking-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 15px;
    }
    
    .ranking-tabs {
        margin: 15px 0;
    }
    
    .ranking-tab {
        padding: 10px 12px;
        font-size: 12px;
        margin: 2px;
    }
    
    .refresh-ranking-button {
        min-width: 140px;
        padding: 10px 16px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .ranking-tabs {
        margin: 10px 0;
        flex-direction: column;
    }
    
    .ranking-tab {
        padding: 8px 12px;
        font-size: 11px;
        margin: 2px 0;
        width: 100%;
    }
    
    .ranking-tab:last-child {
        border-bottom: none;
    }
    
    .ranking-info p {
        font-size: 11px;
    }
    
    .refresh-ranking-button {
        min-width: 120px;
        padding: 8px 14px;
        font-size: 11px;
    }
}

/* ============================= */
/* KILL LOG WIDGET */
/* ============================= */

.kill-log-widget {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 300px;
    max-height: 400px;
    background: rgba(13, 27, 42, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: move;
}

.widget-header h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.widget-header h4 i {
    color: #ff6b6b;
    font-size: 16px;
}

.widget-controls {
    display: flex;
    gap: 4px;
}

.widget-refresh,
.widget-minimize {
    background: none;
    border: none;
    color: #4ecdc4;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 12px;
}

.widget-refresh:hover,
.widget-minimize:hover {
    background: rgba(78, 205, 196, 0.1);
    transform: scale(1.1);
}

.widget-minimize {
    color: #f39c12;
}

.widget-minimize:hover {
    background: rgba(243, 156, 18, 0.1);
}

.widget-content {
    max-height: 160px;
    /* Altura para mostrar solo 2 kills (80px cada uno) */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}

.widget-content::-webkit-scrollbar {
    width: 4px;
}

.widget-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.widget-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.kill-entry {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
    border-left: 3px solid #ff6b6b;
}

.kill-entry:hover {
    background: rgba(255, 255, 255, 0.08);
}

.kill-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kill-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
}

.player-name {
    font-weight: 600;
    color: #fff;
}

.kill-vs {
    color: #ff6b6b;
    font-weight: 700;
    font-size: 10px;
}

.kill-time {
    text-align: center;
    color: #bdc3c7;
    font-size: 10px;
    margin-top: 2px;
}

.player-guild {
    font-size: 9px;
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 2px;
}

.no-guild {
    color: #95a5a6;
    background: rgba(149, 165, 166, 0.1);
}

.widget-footer {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.widget-footer small {
    color: #bdc3c7;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.widget-footer i {
    color: #4ecdc4;
}

.no-kills-message {
    text-align: center;
    padding: 20px 10px;
    color: #bdc3c7;
    font-size: 11px;
}

.no-kills-message i {
    font-size: 24px;
    color: #7f8c8d;
    margin-bottom: 8px;
    display: block;
}

.rotating {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Widget minimizado */
.kill-log-widget.minimized {
    height: auto;
    max-height: 50px;
}

.kill-log-widget.minimized .widget-content,
.kill-log-widget.minimized .widget-footer {
    display: none;
}

.kill-log-widget.minimized .widget-minimize i::before {
    content: "\f067";
    /* plus icon */
}

/* Notificación de kill */
.kill-notification {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    animation: pulse 2s infinite;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.6);
    z-index: 1001;
    min-width: 200px;
    text-align: center;
}

.kill-notification.new-kill-alert {
    background: linear-gradient(45deg, #ff4757, #ff3742);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.8);
    border: 2px solid #fff;
    transform: scale(1.1);
}

.kill-notification-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kill-notification-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.kill-notification-details {
    font-size: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.killer-name {
    color: #ffeb3b;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.kill-action {
    color: #fff;
    font-size: 9px;
    opacity: 0.9;
}

.victim-name {
    color: #f44336;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.kill-notification i {
    margin-right: 4px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes killAlert {
    0% { 
        transform: scale(1) rotate(0deg);
        background: linear-gradient(45deg, #ff4757, #ff3742);
    }

    25% { 
        transform: scale(1.15) rotate(2deg);
        background: linear-gradient(45deg, #ffeb3b, #ffc107);
    }

    50% { 
        transform: scale(1.2) rotate(-2deg);
        background: linear-gradient(45deg, #ff4757, #ff3742);
    }

    75% { 
        transform: scale(1.15) rotate(1deg);
        background: linear-gradient(45deg, #ffeb3b, #ffc107);
    }

    100% { 
        transform: scale(1) rotate(0deg);
        background: linear-gradient(45deg, #ff4757, #ff3742);
    }
}

/* Ajuste de z-index para evitar conflictos */
.kill-log-widget {
    z-index: 999;
}

.modal {
    z-index: 1050;
}

/* Responsive para el widget */
/* Estilos para el mensaje de kill mejorado */
.kill-action-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 8px;
    margin-top: 8px;
}

.winner-name {
    color: #f39c12;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    background: rgba(243, 156, 18, 0.2);
    border-radius: 4px;
    border: 1px solid #f39c12;
}

.victim-name {
    color: #e74c3c;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    background: rgba(231, 76, 60, 0.2);
    border-radius: 4px;
    border: 1px solid #e74c3c;
}

.kill-action-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ecf0f1;
    font-size: 10px;
}

.kill-action-icon i {
    color: #e67e22;
    font-size: 12px;
    animation: pulse 2s infinite;
}

.kill-text {
    color: #ecf0f1;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Estilos para notificaciones cuando está minimizado */
.minimized-notification {
    transform: scale(1.2) !important;
    z-index: 10000 !important;
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.8) !important;
    border: 3px solid #e74c3c !important;
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
}

.minimized-notification .kill-notification-content {
    font-size: 14px !important;
}

.minimized-notification .kill-notification-title {
    font-size: 16px !important;
    color: #fff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.minimized-notification .killer-name,
.minimized-notification .victim-name {
    font-size: 13px !important;
    font-weight: 800 !important;
}

@keyframes minimizedKillAlert {
    0% {
        transform: scale(1.2);
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.8);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 50px rgba(231, 76, 60, 1);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.2);
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.8);
        opacity: 1;
    }
}

/* Estilos mejorados para guilds */
.player-guild {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    margin-top: 2px;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 600;
}

.player-guild.with-guild {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #ecf0f1;
    border: 1px solid #2980b9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.player-guild.with-guild i {
    color: #f1c40f;
    font-size: 8px;
}

.player-guild.no-guild {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: #ecf0f1;
    border: 1px solid #7f8c8d;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    font-style: italic;
}

.player-guild.no-guild i {
    color: #bdc3c7;
    font-size: 8px;
}

/* Estilos mejorados para kills */
.player-kills {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    margin-top: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-radius: 10px;
    border: 1px solid #c0392b;
}

.player-kills i {
    color: #f1c40f;
    font-size: 8px;
}

.kills-label {
    color: #ecf0f1;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.kills-count {
    color: #f1c40f;
    font-weight: 800;
    font-size: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(241, 196, 15, 0.2);
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid #f1c40f;
}

@media (max-width: 768px) {
    .kill-log-widget {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 20px 0;
    }
}

.news-excerpt {
    color: white;
}

span.news-author {
    color: #64B5F6;
    margin-right: 0.5rem;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

/* Estilos para el Modal de Noticias */
.news-modal .modal-content {
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Header del modal de noticias con efecto de brillo */
.news-modal .modal-header {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(76, 175, 80, 0.1));
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
    padding: 20px 25px;
    position: relative;
    overflow: hidden;
}

.news-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.news-modal .modal-header > * {
    position: relative;
    z-index: 1;
}

.news-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.news-modal .close-modal:hover {
    color: #64B5F6;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.news-modal-article {
    color: #fff;
    padding: 20px;
}

.news-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.news-modal-category {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3), rgba(33, 150, 243, 0.2));
    color: #64B5F6;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.news-modal-date {
    color: #bdc3c7;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-modal-date i {
    color: #64B5F6;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.news-modal-body {
    line-height: 1.8;
    font-size: 15px;
    color: #ecf0f1;
    margin-bottom: 25px;
}

.news-modal-body p {
    margin-bottom: 15px;
}

.news-modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.news-modal-body h1,
.news-modal-body h2,
.news-modal-body h3,
.news-modal-body h4,
.news-modal-body h5,
.news-modal-body h6 {
    color: #fff;
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 600;
}

.news-modal-body h1 {
    font-size: 28px;
    border-bottom: 2px solid rgba(33, 150, 243, 0.4);
    padding-bottom: 10px;
    color: #64B5F6;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.news-modal-body h2 {
    font-size: 24px;
    color: #64B5F6;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.news-modal-body h3 {
    font-size: 20px;
    color: #90CAF9;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.3);
}

.news-modal-body a {
    color: #64B5F6;
    text-decoration: none;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.3);
}

.news-modal-body a:hover {
    color: #90CAF9;
    text-decoration: underline;
    text-shadow: 0 0 12px rgba(33, 150, 243, 0.5);
}

.news-modal-body ul,
.news-modal-body ol {
    margin: 15px 0;
    padding-left: 30px;
}

.news-modal-body li {
    margin-bottom: 8px;
}

.news-modal-body blockquote {
    border-left: 4px solid #64B5F6;
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: #bdc3c7;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.2);
}

.news-modal-body code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #f39c12;
}

.news-modal-body pre {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 15px 0;
}

.news-modal-body pre code {
    background: none;
    padding: 0;
    color: #ecf0f1;
}

.news-modal-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    margin-top: 25px;
}

.news-modal-author {
    color: #64B5F6;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

.news-modal-author i {
    color: #64B5F6;
    text-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

/* Scrollbar personalizado para el modal de noticias */
.news-modal .modal-content::-webkit-scrollbar {
    width: 8px;
}

.news-modal .modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.news-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(33, 150, 243, 0.5);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.news-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 150, 243, 0.7);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

@media (max-width: 768px) {
    .news-modal .modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .news-modal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .news-modal-body {
        font-size: 14px;
    }
    
    .news-modal-body h1 {
        font-size: 24px;
    }
    
    .news-modal-body h2 {
        font-size: 20px;
    }
    
    .news-modal-body h3 {
        font-size: 18px;
    }
}

/* ============================================
   Estilos para Contador Regresivo
   ============================================ */
.countdown-container {
    position: fixed;
    top: 3vh;
    left: 40vh;
    z-index: 1000;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(30, 30, 30, 0.95));
    border: 2px solid rgb(60 121 231 / 60%);
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgb(60 128 231 / 30%);
    backdrop-filter: blur(10px);
    min-width: 280px;
    animation: countdownPulse 2s ease-in-out infinite;
}

@keyframes countdownPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgb(60 104 231 / 30%);
    }

    50% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgb(60 81 231 / 50%);
    }
}

.countdown-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(231, 76, 60, 0.3);
}

.countdown-header i {
    color: #3c64db;
    font-size: 16px;
    animation: countdownIconPulse 1.5s ease-in-out infinite;
}

@keyframes countdownIconPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.countdown-label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.countdown-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.countdown-value {
    font-size: 28px;
    font-weight: 700;
    color: #457acd;
    text-shadow: 0 0 10px rgb(56 135 203 / 80%), 0 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1;
    margin-bottom: 4px;
    font-family: 'Arial', sans-serif;
    letter-spacing: 1px;
}

.countdown-label-small {
    font-size: 10px;
    color: #bdc3c7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.countdown-separator {
    font-size: 24px;
    font-weight: 700;
    color: #3c97e7;
    text-shadow: 0 0 8px rgb(55 165 217 / 60%);
    margin: 0 2px;
    animation: countdownBlink 1s ease-in-out infinite;
}

@keyframes countdownBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.3;
    }
}

.countdown-timezone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    color: #95a5a6;
}

.countdown-timezone i {
    color: #3498db;
    font-size: 12px;
}

.countdown-timezone span {
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Responsive para contador */
/* Tablets (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .countdown-container {
        top: 2vh;
        left: 50%;
        transform: translateX(-50%);
        min-width: 320px;
        max-width: 90%;
        padding: 12px 18px;
    }
    
    .countdown-header {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    
    .countdown-label {
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }
    
    .countdown-value {
        font-size: 20px;
    }
    
    .countdown-separator {
        font-size: 16px;
        margin: 0 1px;
    }
    
    .countdown-label-small {
        font-size: 8px;
    }
    
    .countdown-item {
        min-width: 40px;
    }
    
    .countdown-timezone {
        font-size: 9px;
        padding-top: 6px;
    }
}

/* Móviles grandes (481px - 768px) */
@media screen and (max-width: 768px) {
    .countdown-container {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        right: 10px;
        width: calc(100% - 20px);
        max-width: 400px;
        min-width: auto;
        padding: 10px 12px;
        z-index: 1000;
    }
    
    .countdown-header {
        margin-bottom: 8px;
        padding-bottom: 6px;
        gap: 6px;
    }
    
    .countdown-header i {
        font-size: 14px;
    }
    
    .countdown-label {
        font-size: 10px;
        line-height: 1.3;
        text-align: center;
        word-wrap: break-word;
        max-width: 100%;
    }
    
    .countdown-display {
        gap: 4px;
        margin-bottom: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .countdown-item {
        min-width: 35px;
        flex: 0 0 auto;
    }
    
    .countdown-value {
        font-size: 18px;
        margin-bottom: 2px;
    }
    
    .countdown-separator {
        font-size: 14px;
        margin: 0 1px;
    }
    
    .countdown-label-small {
        font-size: 7px;
        line-height: 1.2;
    }
    
    .countdown-timezone {
        font-size: 8px;
        padding-top: 5px;
        gap: 4px;
    }
    
    .countdown-timezone i {
        font-size: 10px;
    }
}

/* Móviles pequeños (hasta 480px) */
@media screen and (max-width: 480px) {
    .countdown-container {
        top: 5px;
        left: 5px;
        right: 5px;
        width: calc(100% - 10px);
        max-width: 100%;
        padding: 8px 10px;
        border-radius: 8px;
    }
    
    .countdown-header {
        margin-bottom: 6px;
        padding-bottom: 5px;
        gap: 5px;
    }
    
    .countdown-header i {
        font-size: 12px;
    }
    
    .countdown-label {
        font-size: 9px;
        line-height: 1.2;
        letter-spacing: 0.5px;
    }
    
    .countdown-display {
        gap: 3px;
        margin-bottom: 6px;
    }
    
    .countdown-item {
        min-width: 30px;
    }
    
    .countdown-value {
        font-size: 16px;
        margin-bottom: 2px;
    }
    
    .countdown-separator {
        font-size: 12px;
        margin: 0;
    }
    
    .countdown-label-small {
        font-size: 6px;
        line-height: 1.1;
    }
    
    .countdown-timezone {
        font-size: 7px;
        padding-top: 4px;
    }
    
    .countdown-timezone i {
        font-size: 9px;
    }
}

/* Orientación landscape en móviles */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .countdown-container {
        top: 5px;
        padding: 6px 10px;
    }
    
    .countdown-header {
        margin-bottom: 4px;
        padding-bottom: 4px;
    }
    
    .countdown-label {
        font-size: 8px;
    }
    
    .countdown-value {
        font-size: 14px;
    }
    
    .countdown-separator {
        font-size: 12px;
    }
    
    .countdown-label-small {
        font-size: 6px;
    }
    
    .countdown-timezone {
        font-size: 7px;
        padding-top: 3px;
    }
}

/* ============================================
   Estilos para Modales de Perfiles (Player y Guild)
   ============================================ */
/* ============================================ */
/* REDISEÑO COMPLETO - MODALES DE PERFIL */
/* ============================================ */

.profile-modal .modal-content {
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border: none;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1a2e 50%, #16213e 100%);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(100, 181, 246, 0.3),
        inset 0 0 100px rgba(100, 181, 246, 0.05);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.profile-modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #64B5F6 0%, 
        #42A5F5 25%, 
        #2196F3 50%, 
        #1E88E5 75%, 
        #1976D2 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
    z-index: 10;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Header del modal de perfil con efecto de brillo mejorado */
.profile-modal .modal-header {
    background: linear-gradient(135deg, 
        rgba(100, 181, 246, 0.2) 0%, 
        rgba(33, 150, 243, 0.15) 50%, 
        rgba(30, 136, 229, 0.1) 100%);
    border-bottom: 2px solid rgba(100, 181, 246, 0.4);
    position: relative;
    overflow: hidden;
    padding: 20px 30px;
    backdrop-filter: blur(10px);
}

.profile-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(100, 181, 246, 0.15) 0%, 
        rgba(33, 150, 243, 0.1) 30%,
        transparent 70%);
    animation: rotate 25s linear infinite;
    pointer-events: none;
}

.profile-modal .modal-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(100, 181, 246, 0.1) 0%, 
        transparent 100%);
    pointer-events: none;
}

.profile-modal .modal-header > * {
    position: relative;
    z-index: 1;
}

.profile-modal .modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-shadow: 
        0 0 20px rgba(100, 181, 246, 0.6),
        0 0 40px rgba(100, 181, 246, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-modal .modal-title i {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.3), rgba(33, 150, 243, 0.2));
    color: #64B5F6;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 
        0 0 20px rgba(100, 181, 246, 0.4),
        inset 0 0 20px rgba(100, 181, 246, 0.1);
    font-size: 20px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(100, 181, 246, 0.4),
            inset 0 0 20px rgba(100, 181, 246, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 30px rgba(100, 181, 246, 0.6),
            inset 0 0 25px rgba(100, 181, 246, 0.2);
    }
}

.profile-modal .close-modal {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.profile-modal .close-modal:hover {
    color: #64B5F6;
    background: rgba(100, 181, 246, 0.2);
    text-shadow: 
        0 0 15px rgba(100, 181, 246, 0.8),
        0 0 30px rgba(100, 181, 246, 0.4);
    transform: rotate(90deg) scale(1.1);
}

.profile-modal .modal-body {
    padding: 30px;
    color: #fff;
    position: relative;
    z-index: 1;
}

/* ============================================ */
/* PERFIL DE PERSONAJE - REDISEÑO MODERNO */
/* ============================================ */

.profiles_player_card {
    background: linear-gradient(135deg, 
        rgba(10, 14, 39, 0.95) 0%, 
        rgba(26, 26, 46, 0.9) 50%,
        rgba(22, 33, 62, 0.95) 100%);
    border-radius: 20px;
    padding: 0;
    margin: 0;
    border: 2px solid rgba(100, 181, 246, 0.3);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(100, 181, 246, 0.2),
        inset 0 0 60px rgba(100, 181, 246, 0.05);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profiles_player_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%,
        #64B5F6 20%,
        #42A5F5 50%,
        #64B5F6 80%,
        transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

/* Header del perfil de personaje */
.profiles_player_content {
    padding: 30px;
}

.profiles_player_table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.profiles_player_table td.cname {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #64B5F6 0%, #42A5F5 50%, #2196F3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    padding: 20px 15px 10px;
    text-shadow: none;
    letter-spacing: 1px;
    position: relative;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        filter: drop-shadow(0 0 10px rgba(100, 181, 246, 0.5));
    }
    to {
        filter: drop-shadow(0 0 20px rgba(100, 181, 246, 0.8));
    }
}

.profiles_player_table td.cclass {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding: 8px 15px 25px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Tabla de información con diseño moderno */
.profiles_player_table_info {
    margin-top: 30px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(100, 181, 246, 0.2);
    backdrop-filter: blur(10px);
}

.profiles_player_table_info tr {
    transition: all 0.3s ease;
    border-radius: 8px;
}

.profiles_player_table_info tr:hover {
    background: rgba(100, 181, 246, 0.1);
    transform: translateX(5px);
}

.profiles_player_table_info td {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 15px;
    transition: all 0.3s ease;
}

.profiles_player_table_info td:first-child {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    width: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profiles_player_table_info td:first-child::before {
    content: '▸';
    color: #64B5F6;
    font-size: 12px;
    opacity: 0.6;
}

.profiles_player_table_info td:last-child {
    text-align: right;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(100, 181, 246, 0.3);
}

.profiles_player_table_info td.isonline {
    color: #10b981;
    font-weight: 700;
    text-shadow: 
        0 0 15px rgba(16, 185, 129, 0.6),
        0 0 30px rgba(16, 185, 129, 0.3);
    position: relative;
}

.profiles_player_table_info td.isonline::after {
    content: '●';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.5; transform: translateY(-50%) scale(1.2); }
}

.profiles_player_table_info td.isoffline {
    color: #F44336;
    font-weight: 700;
    text-shadow: 
        0 0 15px rgba(244, 67, 54, 0.6),
        0 0 30px rgba(244, 67, 54, 0.3);
}

/* ============================================ */
/* PERFIL DE GUILD - REDISEÑO MODERNO */
/* ============================================ */

.profiles_guild_card {
    background: linear-gradient(135deg, 
        rgba(10, 14, 39, 0.95) 0%, 
        rgba(26, 26, 46, 0.9) 50%,
        rgba(22, 33, 62, 0.95) 100%);
    border-radius: 20px;
    padding: 0;
    margin: 0;
    border: 2px solid rgba(100, 181, 246, 0.3);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(100, 181, 246, 0.2),
        inset 0 0 60px rgba(100, 181, 246, 0.05);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out;
}

.profiles_guild_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%,
        #64B5F6 20%,
        #42A5F5 50%,
        #64B5F6 80%,
        transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

.profiles_guild_card .row {
    margin: 0;
    padding: 30px;
}

/* Logo de Guild mejorado */
.profiles_guild_card .guild_logo {
    display: block;
    margin: 0 auto 25px;
    position: relative;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.profiles_guild_card .guild_logo img {
    max-width: 180px;
    height: auto;
    border-radius: 15px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(100, 181, 246, 0.3),
        inset 0 0 20px rgba(100, 181, 246, 0.1);
    border: 3px solid rgba(100, 181, 246, 0.4);
    transition: all 0.3s ease;
}

.profiles_guild_card .guild_logo:hover img {
    transform: scale(1.05);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(100, 181, 246, 0.5),
        inset 0 0 30px rgba(100, 181, 246, 0.2);
}

/* Nombre de Guild mejorado */
.profiles_guild_card .guild_name {
    display: block;
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #64B5F6 0%, #42A5F5 50%, #2196F3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: none;
    letter-spacing: 2px;
    position: relative;
    animation: glow 2s ease-in-out infinite alternate;
}

/* Tabla de información de Guild */
.profiles_guild_card .table {
    width: 100%;
    margin: 25px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 15px;
    border: 1px solid rgba(100, 181, 246, 0.2);
    backdrop-filter: blur(10px);
}

.profiles_guild_card .table tr {
    transition: all 0.3s ease;
    border-radius: 8px;
}

.profiles_guild_card .table tr:hover {
    background: rgba(100, 181, 246, 0.1);
    transform: translateX(5px);
}

.profiles_guild_card .table td {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 15px;
    transition: all 0.3s ease;
}

.profiles_guild_card .table td.text-right {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.profiles_guild_card .table td.text-right::after {
    content: '▸';
    color: #64B5F6;
    font-size: 12px;
    opacity: 0.6;
    order: -1;
}

.profiles_guild_card .table td.text-left {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(100, 181, 246, 0.3);
}

.profiles_guild_card hr {
    border: none;
    border-top: 2px solid rgba(100, 181, 246, 0.2);
    margin: 30px 0;
    position: relative;
}

.profiles_guild_card hr::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #64B5F6, transparent);
}

/* Sección de miembros */
.profiles_guild_card .guild_members {
    display: block;
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #64B5F6 0%, #42A5F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 25px;
    text-align: center;
    text-shadow: none;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 15px;
}

.profiles_guild_card .guild_members::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #64B5F6, transparent);
    border-radius: 2px;
}

.profiles_guild_card .guild_members_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    border: 1px solid rgba(100, 181, 246, 0.2);
}

.profiles_guild_card .guild_members_list .col-xs-3 {
    flex: 0 0 auto;
    min-width: 140px;
    padding: 15px 20px;
    background: linear-gradient(135deg, 
        rgba(100, 181, 246, 0.15) 0%, 
        rgba(33, 150, 243, 0.1) 100%);
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(100, 181, 246, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.profiles_guild_card .guild_members_list .col-xs-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(100, 181, 246, 0.3), 
        transparent);
    transition: left 0.5s ease;
}

.profiles_guild_card .guild_members_list .col-xs-3:hover {
    transform: translateY(-5px) scale(1.05);
    background: linear-gradient(135deg, 
        rgba(100, 181, 246, 0.25) 0%, 
        rgba(33, 150, 243, 0.2) 100%);
    border-color: rgba(100, 181, 246, 0.5);
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(100, 181, 246, 0.3);
}

.profiles_guild_card .guild_members_list .col-xs-3:hover::before {
    left: 100%;
}

.profiles_guild_card .guild_members_list .col-xs-3 a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(100, 181, 246, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.profiles_guild_card .guild_members_list .col-xs-3:hover a {
    color: #64B5F6;
    text-shadow: 
        0 0 15px rgba(100, 181, 246, 0.6),
        0 0 30px rgba(100, 181, 246, 0.3);
}

/* Scrollbar personalizado para modales de perfiles */
.profile-modal .modal-content::-webkit-scrollbar {
    width: 8px;
}

.profile-modal .modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.profile-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(33, 150, 243, 0.5);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.profile-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 150, 243, 0.7);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

/* ============================================ */
/* RESPONSIVE - MODALES DE PERFIL */
/* ============================================ */

@media (max-width: 768px) {
    .profile-modal .modal-content {
        width: 95%;
        max-height: 95vh;
        border-radius: 15px;
    }
    
    .profile-modal .modal-header {
        padding: 15px 20px;
    }
    
    .profile-modal .modal-title {
        font-size: 20px;
    }
    
    .profile-modal .modal-body {
        padding: 20px;
    }
    
    .profiles_player_content {
        padding: 20px;
    }
    
    .profiles_player_table td.cname {
        font-size: 24px;
        padding: 15px 10px 8px;
    }
    
    .profiles_player_table td.cclass {
        font-size: 16px;
        padding: 6px 10px 20px;
    }
    
    .profiles_player_table_info {
        padding: 15px;
    }
    
    .profiles_player_table_info td {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .profiles_player_table_info td:last-child {
        font-size: 15px;
    }
    
    .profiles_guild_card .row {
        padding: 20px;
    }
    
    .profiles_guild_card .guild_logo img {
        max-width: 140px;
    }
    
    .profiles_guild_card .guild_name {
        font-size: 28px;
        margin-bottom: 25px;
    }
    
    .profiles_guild_card .table {
        padding: 12px;
    }
    
    .profiles_guild_card .table td {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .profiles_guild_card .guild_members {
        font-size: 20px;
    }
    
    .profiles_guild_card .guild_members_list {
        gap: 10px;
        padding: 15px;
    }
    
    .profiles_guild_card .guild_members_list .col-xs-3 {
        min-width: 120px;
        padding: 12px 15px;
    }
}

/* ============================= */
/* Estilos para Modal de Info - Contenido Detallado */
/* ============================= */

.info-intro {
    color: #fff;
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.6;
}

.info-intro strong {
    color: #FF9800;
}

/* Resets */
.reset-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 25px 0;
}

.reset-type {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.reset-header {
    padding: 15px 20px;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reset-header.free {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border-bottom: 2px solid #4CAF50;
}

.reset-header.vip {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
    border-bottom: 2px solid #FFC107;
}

.reset-details {
    padding: 20px;
}

.reset-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #fff;
}

.reset-detail-item:last-child {
    margin-bottom: 0;
}

.reset-detail-item i {
    color: #FF9800;
    width: 20px;
}

.detail-label {
    color: #ccc;
    flex: 1;
}

.detail-value {
    color: #fff;
    font-weight: bold;
}

.info-note {
    background: rgba(33, 150, 243, 0.1);
    border-left: 4px solid #2196F3;
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 5px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.info-note i {
    color: #2196F3;
    font-size: 20px;
    margin-top: 2px;
}

.info-note p {
    color: #ccc;
    margin: 0;
    line-height: 1.6;
}

/* Clanes */
.clan-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 25px 0;
}

.clan-info-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.clan-info-icon {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.clan-info-content h4 {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: 16px;
}

.clan-info-value {
    color: #FF9800;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

/* Tiendas */
.store-info {
    margin: 25px 0;
}

.store-currency {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.store-currency:last-child {
    margin-bottom: 0;
}

.currency-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.currency-header h4 {
    color: #fff;
    margin: 0;
    font-size: 18px;
}

.store-currency p {
    color: #ccc;
    margin: 0;
    line-height: 1.6;
}

/* Comandos */
.commands-list {
    margin: 25px 0;
}

.command-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-left: 4px solid #FF9800;
    display: flex;
    gap: 20px;
    align-items: center;
}

.command-item:last-child {
    margin-bottom: 0;
}

.command-name {
    flex-shrink: 0;
}

.command-name code {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.command-description {
    color: #ccc;
    flex: 1;
}

.skills-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.skills-section h4 {
    color: #FF9800;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.skills-note {
    color: #ccc;
    margin-bottom: 25px;
    font-style: italic;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.skill-class {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.skill-class h5 {
    color: #FF9800;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.skill-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.skill-list li {
    margin-bottom: 10px;
    color: #ccc;
}

.skill-list li:last-child {
    margin-bottom: 0;
}

.skill-list code {
    background: rgba(255, 152, 0, 0.15);
    color: #FF9800;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 13px;
    border: 1px solid rgba(255, 152, 0, 0.2);
}

/* ============================= */
/* Estilos para Modal de Eventos */
/* ============================= */

.eventos-modal .modal-content {
    max-width: 800px !important;
    width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
}

.eventos-container {
    padding: 20px;
}

.eventos-intro {
    margin-bottom: 25px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(14, 165, 233, 0.15));
    border-left: 4px solid #10b981;
    border-radius: 5px;
}

.eventos-intro p {
    color: #ccc;
    margin: 0;
    line-height: 1.6;
}

.eventos-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.event-item:hover {
    border-color: rgba(14, 165, 233, 0.4);
    background: rgba(0, 0, 0, 0.4);
}

.event-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.event-header i {
    color: #10b981;
    font-size: 24px;
}

.event-header h3 {
    color: #fff;
    margin: 0;
    font-size: 20px;
}

.event-schedule {
    color: #ccc;
}

.event-schedule p {
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.event-schedule strong {
    color: #FFD700;
}

.event-times-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.event-times-list li {
    background: rgba(14, 165, 233, 0.15);
    color: #10b981;
    padding: 8px 12px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.event-timer {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-label {
    color: #ccc;
    font-size: 14px;
}

.event-name {
    color: #10b981;
    font-weight: bold;
    font-size: 16px;
}

.event-time {
    color: #FFD700;
    font-size: 14px;
}

.event-countdown {
    color: #64B5F6;
    font-weight: bold;
    font-size: 18px;
    margin-top: 5px;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.event-countdown .event-schedule-open {
    color: #64B5F6;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.event-countdown .event-schedule-inprogress {
    color: #FFC107;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    .reset-comparison,
    .clan-info-grid {
        grid-template-columns: 1fr;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
    
    .event-times-list {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

/* ============================= */
/* Estilos para Modal de Donaciones (Sistema WebEngine) */
/* ============================= */

.donation-modal .modal-content {
    max-width: 900px !important;
    width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.98), rgba(30, 25, 40, 0.98));
    border: 2px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(33, 150, 243, 0.2);
}

/* Scrollbar personalizado para el modal de donaciones */
.donation-modal .modal-content::-webkit-scrollbar {
    width: 8px;
}

.donation-modal .modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.donation-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(33, 150, 243, 0.5);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.donation-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 150, 243, 0.7);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

.donation-modal .modal-header {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(76, 175, 80, 0.1));
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
    padding: 20px 25px;
    position: relative;
    overflow: hidden;
}

.donation-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.donation-modal .modal-header > * {
    position: relative;
    z-index: 1;
}

.donation-modal .close-modal:hover {
    color: #64B5F6;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.donation-modal .modal-title {
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
}

.donation-modal .modal-title i {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    margin-right: 10px;
    font-size: 28px;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(33, 150, 243, 0.5), 0 0 35px rgba(33, 150, 243, 0.4);
    }
}

.donation-modal .modal-body {
    padding: 30px;
    background: rgba(0, 0, 0, 0.2);
}

/* Estilos para el contenido del módulo de donaciones */
.donation-modal .page-title {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(76, 175, 80, 0.08));
    border-radius: 15px;
    border: 2px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 5px 20px rgba(33, 150, 243, 0.2);
}

.donation-modal .page-title span {
    font-size: 28px;
    font-weight: bold;
    color: #64B5F6;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

/* Estilos para los enlaces de métodos de pago (thumbnail) */
.donation-modal .thumbnail {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(33, 150, 243, 0.2);
    margin: 20px auto;
    max-width: 400px;
    position: relative;
}

.donation-modal .thumbnail:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(33, 150, 243, 0.6);
    box-shadow: 0 15px 40px rgba(33, 150, 243, 0.4), 0 0 30px rgba(33, 150, 243, 0.3);
}

.donation-modal .thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.donation-modal .thumbnail:hover::before {
    opacity: 1;
}

.donation-modal .thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 0;
}

.donation-modal .thumbnail:hover img {
    transform: scale(1.05);
}

/* Estilos para el contenedor de PayPal */
.donation-modal .paypal-gateway-container {
    background: linear-gradient(135deg, rgba(0, 100, 200, 0.1), rgba(0, 150, 255, 0.05));
    border-radius: 20px;
    padding: 40px;
    margin: 30px 0;
    border: 2px solid rgba(0, 100, 200, 0.3);
    box-shadow: 0 10px 40px rgba(0, 100, 200, 0.2);
}

.donation-modal .paypal-gateway-content {
    max-width: 600px;
    margin: 0 auto;
}

.donation-modal .paypal-gateway-logo {
    text-align: center;
    margin-bottom: 30px;
}

.donation-modal .paypal-gateway-logo::before {
    content: '💳';
    font-size: 80px;
    display: block;
    margin-bottom: 15px;
    filter: drop-shadow(0 5px 15px rgba(0, 100, 200, 0.5));
}

.donation-modal .paypal-gateway-form {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.donation-modal .paypal-gateway-form > div {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

.donation-modal .paypal-gateway-form input[type="text"] {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(33, 150, 243, 0.5);
    border-radius: 8px;
    padding: 12px 20px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 0 10px;
    width: 120px;
    transition: all 0.3s ease;
}

.donation-modal .paypal-gateway-form input[type="text"]:focus {
    outline: none;
    border-color: #64B5F6;
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.5), 0 0 15px rgba(33, 150, 243, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.donation-modal .paypal-gateway-form #result {
    color: #64B5F6;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

.donation-modal .paypal-gateway-continue {
    text-align: center;
}

.donation-modal .paypal-gateway-continue input[type="submit"] {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border: none;
    border-radius: 50px;
    padding: 18px 50px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(33, 150, 243, 0.4);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.donation-modal .paypal-gateway-continue input[type="submit"]::before {
    content: '🚀';
    margin-right: 10px;
}

.donation-modal .paypal-gateway-continue input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(33, 150, 243, 0.6);
    background: linear-gradient(135deg, #1976D2, #2196F3);
}

.donation-modal .paypal-gateway-continue input[type="submit"]:active {
    transform: translateY(-1px);
}

/* Estilos para el row de Bootstrap dentro del modal */
.donation-modal .row {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.donation-modal .col-xs-4 {
    width: 100%;
    max-width: 500px;
    padding: 0 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .donation-modal .modal-content {
        width: 98% !important;
        max-width: 98% !important;
    }
    
    .donation-modal .paypal-gateway-container {
        padding: 20px;
    }
    
    .donation-modal .paypal-gateway-form input[type="text"] {
        width: 100px;
        font-size: 16px;
    }
}

/* Estilos específicos para el modal de PayPal */
#paypal-modal .modal-content {
    max-width: 700px !important;
    width: 95% !important;
    background: linear-gradient(145deg, rgba(0, 100, 200, 0.15), rgba(0, 150, 255, 0.1));
    border: 2px solid rgba(0, 112, 186, 0.4);
    box-shadow: 0 0 30px rgba(0, 112, 186, 0.4);
}

#paypal-modal .modal-header {
    background: linear-gradient(90deg, #0070BA, #009CDE);
    color: white;
    padding: 20px 25px;
    border-bottom: none;
}

#paypal-modal .modal-title {
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

#paypal-modal .modal-title i {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px;
    border-radius: 50%;
    font-size: 1.2em;
}

#paypal-modal .close-modal {
    color: white;
    font-size: 2em;
    cursor: pointer;
    transition: color 0.3s ease;
}

#paypal-modal .close-modal:hover {
    color: #FFD700;
}

#paypal-modal .modal-body {
    padding: 30px;
    background: rgba(0, 0, 0, 0.6);
    color: #eee;
}

/* Ocultar el título de página dentro del modal de PayPal */
#paypal-modal .page-title {
    display: none;
}

/* Mejorar el contenedor de PayPal */
#paypal-modal .paypal-gateway-container {
    background: linear-gradient(135deg, rgba(0, 100, 200, 0.1), rgba(0, 150, 255, 0.05));
    border-radius: 20px;
    padding: 30px;
    margin: 0;
    border: 2px solid rgba(0, 112, 186, 0.3);
    box-shadow: 0 5px 20px rgba(0, 112, 186, 0.2);
}

#paypal-modal .paypal-gateway-content {
    max-width: 100%;
    margin: 0;
}

/* Mejorar el logo de PayPal */
#paypal-modal .paypal-gateway-logo {
    text-align: center;
    margin-bottom: 25px;
    height: auto;
    min-height: 60px;
    background: none;
}

#paypal-modal .paypal-gateway-logo::before {
    content: '';
    display: none;
}

/* Mejorar el formulario */
#paypal-modal .paypal-gateway-form {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 112, 186, 0.3);
}

#paypal-modal .paypal-gateway-form > div {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#paypal-modal .paypal-gateway-form input[type="text"] {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(0, 112, 186, 0.5);
    border-radius: 8px;
    padding: 12px 15px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    width: 80px;
    text-align: center;
    transition: all 0.3s ease;
}

#paypal-modal .paypal-gateway-form input[type="text"]:focus {
    outline: none;
    border-color: #0070BA;
    box-shadow: 0 0 20px rgba(0, 112, 186, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

#paypal-modal .paypal-gateway-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#paypal-modal .paypal-gateway-form #result {
    color: #4CAF50;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 0 2px 10px rgba(76, 175, 80, 0.5);
}

/* Mejorar el botón de submit */
#paypal-modal .paypal-gateway-continue {
    text-align: center;
    margin-top: 20px;
}

#paypal-modal .paypal-gateway-continue input[type="submit"] {
    background: linear-gradient(135deg, #0070BA, #009CDE);
    border: none;
    border-radius: 50px;
    padding: 18px 50px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 112, 186, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 250px;
    min-height: 50px;
}

#paypal-modal .paypal-gateway-continue input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 112, 186, 0.6);
    background: linear-gradient(135deg, #009CDE, #0070BA);
}

#paypal-modal .paypal-gateway-continue input[type="submit"]:active {
    transform: translateY(-1px);
}

/* Responsive para el modal de PayPal */
@media (max-width: 768px) {
    #paypal-modal .modal-content {
        width: 98% !important;
        max-width: 98% !important;
    }
    
    #paypal-modal .paypal-gateway-container {
        padding: 20px;
    }
    
    #paypal-modal .paypal-gateway-form input[type="text"] {
        width: 60px;
        font-size: 16px;
    }
    
    #paypal-modal .paypal-gateway-continue input[type="submit"] {
        min-width: 200px;
        padding: 15px 30px;
    }
}

/* ============================================
   Estilos para el modal de Castle Siege
   ============================================ */
.castlesiege-modal .modal-content {
    max-width: 1000px !important;
    width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(33, 150, 243, 0.08), rgba(33, 150, 243, 0.05));
    border: 2px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 0 40px rgba(33, 150, 243, 0.3);
    border-radius: 20px;
}

.castlesiege-modal .modal-header {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(76, 175, 80, 0.1));
    border-bottom: 2px solid rgba(33, 150, 243, 0.3);
    color: white;
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
}

.castlesiege-modal .modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.castlesiege-modal .modal-title {
    font-size: 1.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.castlesiege-modal .modal-title i {
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    padding: 12px;
    border-radius: 50%;
    font-size: 1.2em;
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.4);
    animation: crown-pulse 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes crown-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(33, 150, 243, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(33, 150, 243, 0.6);
        transform: scale(1.05);
    }
}

.castlesiege-modal .close-modal {
    color: white;
    font-size: 2em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.castlesiege-modal .close-modal:hover {
    color: #64B5F6;
    transform: rotate(90deg);
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.castlesiege-modal .modal-body {
    padding: 30px;
    background: rgba(0, 0, 0, 0.7);
    color: #eee;
}

/* Ocultar título de página duplicado */
.castlesiege-modal .page-title {
    display: none;
}

/* Estilos para el contenedor principal */
.castlesiege-modal .castle-siege-block {
    padding: 0;
}

/* Estilos para los títulos h2 */
.castlesiege-modal h2 {
    color: #64B5F6;
    font-size: 1.8em;
    font-weight: bold;
    margin: 30px 0 20px 0;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.06));
    border-left: 4px solid #64B5F6;
    border-radius: 8px;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.4), 1px 1px 3px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.2);
}

.castlesiege-modal h2::before {
    content: '⚔️';
    font-size: 1.2em;
}

/* Estilos para el panel del dueño del castillo */
.castlesiege-modal .castle-owner-panel {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.06));
    border: 2px solid rgba(33, 150, 243, 0.3);
    border-radius: 15px;
    padding: 25px;
    margin: 20px 0;
    box-shadow: 0 5px 20px rgba(33, 150, 243, 0.2);
}

.castlesiege-modal .castle-owner-name {
    font-size: 1.5em;
    font-weight: bold;
    color: #64B5F6;
    text-shadow: 0 0 15px rgba(33, 150, 243, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.5);
    display: block;
    margin-bottom: 15px;
}

.castlesiege-modal .castle-owner-panel h4 {
    color: #64B5F6;
    font-size: 1.1em;
    margin: 15px 0 5px 0;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
}

.castlesiege-modal .castle-owner-panel p {
    color: #ccc;
    margin: 0;
}

/* Estilos para la alianza del dueño */
.castlesiege-modal .castle-owner-ally-title {
    background: rgba(33, 150, 243, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #64B5F6;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
}

.castlesiege-modal .castle-owner-ally {
    padding: 10px;
    border-bottom: 1px solid rgba(33, 150, 243, 0.2);
    transition: background 0.3s ease;
}

.castlesiege-modal .castle-owner-ally:hover {
    background: rgba(33, 150, 243, 0.1);
    border-radius: 5px;
}

/* Estilos para el countdown timer */
.castlesiege-modal #siegeTimer {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: #64B5F6;
    padding: 30px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.06));
    border: 2px solid rgba(33, 150, 243, 0.3);
    border-radius: 15px;
    margin: 20px 0;
    text-shadow: 0 0 20px rgba(33, 150, 243, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 20px rgba(33, 150, 243, 0.3);
    animation: timer-glow 2s ease-in-out infinite;
}

@keyframes timer-glow {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(33, 150, 243, 0.3);
    }
    50% {
        box-shadow: 0 5px 30px rgba(33, 150, 243, 0.5);
    }
}

/* Estilos para las tablas */
.castlesiege-modal table {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    border: 1px solid rgba(33, 150, 243, 0.3);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.2);
}

.castlesiege-modal table thead {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(76, 175, 80, 0.15));
}

.castlesiege-modal table thead th {
    color: #64B5F6;
    font-weight: bold;
    padding: 15px;
    text-align: center;
    text-shadow: 0 0 10px rgba(33, 150, 243, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(33, 150, 243, 0.4);
}

.castlesiege-modal table tbody tr {
    transition: background 0.3s ease;
    border-bottom: 1px solid rgba(33, 150, 243, 0.1);
}

.castlesiege-modal table tbody tr:hover {
    background: rgba(33, 150, 243, 0.1);
}

.castlesiege-modal table tbody td {
    padding: 12px 15px;
    color: #eee;
    text-align: center;
    vertical-align: middle;
}

.castlesiege-modal table tbody tr:nth-child(even) {
    background: rgba(33, 150, 243, 0.05);
}

/* Estilos para los logos de gremios */
.castlesiege-modal img {
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.castlesiege-modal img:hover {
    transform: scale(1.1);
}

/* Estilos para los separadores hr */
.castlesiege-modal hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(33, 150, 243, 0.4), transparent);
    margin: 30px 0;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

/* ============================= */
/* MODAL DE TÉRMINOS Y CONDICIONES */
/* ============================= */

.terms-modal {
    z-index: 10002 !important;
}

.terms-modal .modal-content {
    max-width: 900px !important;
    width: 95% !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 10003 !important;
}

.terms-modal-header {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(33, 150, 243, 0.2));
    border-bottom: 2px solid rgba(76, 175, 80, 0.3);
    padding: 20px 25px;
}

.terms-modal-header .modal-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.terms-modal-header .modal-title i {
    color: #4CAF50;
    font-size: 24px;
}

.terms-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 25px;
    background: rgba(0, 0, 0, 0.3);
}

.terms-content {
    color: #fff;
    line-height: 1.8;
}

.terms-intro {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(33, 150, 243, 0.1));
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #4CAF50;
    margin-bottom: 25px;
}

.terms-intro h3 {
    color: #4CAF50;
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 700;
}

.terms-intro p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    margin: 0;
}

.terms-section {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid rgba(76, 175, 80, 0.5);
    transition: all 0.3s ease;
}

.terms-section:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: #4CAF50;
    transform: translateX(5px);
}

.terms-section h4 {
    color: #4CAF50;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.terms-section h4 i {
    color: #2196F3;
    font-size: 20px;
}

.terms-section p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.7;
}

.terms-section ul {
    margin: 15px 0;
    padding-left: 25px;
    list-style: none;
}

.terms-section ul li {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    line-height: 1.6;
}

.terms-section ul li:before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

.terms-section strong {
    color: #FFD700;
    font-weight: 600;
}

.terms-final {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(33, 150, 243, 0.15));
    border-left-color: #FFD700;
}

.terms-declaration {
    background: rgba(76, 175, 80, 0.1);
    padding: 20px;
    border-radius: 8px;
    border: 2px solid rgba(76, 175, 80, 0.3);
    text-align: center;
    font-size: 16px;
    color: #4CAF50;
    margin-top: 15px;
}

.terms-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    gap: 15px;
}

.terms-btn-cancel,
.terms-btn-accept {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.terms-btn-cancel {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
    border: 2px solid rgba(244, 67, 54, 0.3);
}

.terms-btn-cancel:hover {
    background: rgba(244, 67, 54, 0.3);
    border-color: #F44336;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
}

.terms-btn-accept {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: #fff;
    border: 2px solid rgba(76, 175, 80, 0.5);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    flex: 1;
    justify-content: center;
    transition: all 0.3s ease;
}

.terms-btn-accept:hover:not(:disabled) {
    background: linear-gradient(135deg, #45a049, #4CAF50);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.terms-btn-accept:active:not(:disabled) {
    transform: translateY(0);
}

.terms-btn-accept:disabled {
    background: rgba(76, 175, 80, 0.3);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    border-color: rgba(76, 175, 80, 0.2);
    box-shadow: none;
}

/* Personalizar scrollbar para el modal de términos */
.terms-modal-body::-webkit-scrollbar {
    width: 10px;
}

.terms-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
}

.terms-modal-body::-webkit-scrollbar-thumb {
    background: rgba(76, 175, 80, 0.3);
    border-radius: 5px;
}

.terms-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(76, 175, 80, 0.5);
}

/* Para Firefox */
.terms-modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(76, 175, 80, 0.3) rgba(255, 255, 255, 0.05);
}

/* Responsive para términos */
@media (max-width: 768px) {
    .terms-modal .modal-content {
        width: 98% !important;
        max-width: 98% !important;
        max-height: 95vh;
    }
    
    .terms-modal-footer {
        flex-direction: column;
    }
    
    .terms-btn-accept,
    .terms-btn-cancel {
        width: 100%;
        justify-content: center;
    }
    
    .terms-section h4 {
        font-size: 16px;
    }
    
    .terms-section p,
    .terms-section ul li {
        font-size: 13px;
    }
}

/* Responsive para Castle Siege */
@media (max-width: 768px) {
    .castlesiege-modal .modal-content {
        width: 98% !important;
        max-width: 98% !important;
    }
    
    .castlesiege-modal h2 {
        font-size: 1.4em;
        padding: 12px 15px;
    }
    
    .castlesiege-modal #siegeTimer {
        font-size: 1.5em;
        padding: 20px;
    }
    
    .castlesiege-modal table {
        font-size: 0.9em;
    }
    
    .castlesiege-modal table thead th,
    .castlesiege-modal table tbody td {
        padding: 8px 10px;
    }
}

/* Estilos para el botón "Nuevo Ticket" dentro del modal de tickets */
.usercp-modal .modal-body button.btn-primary {
    background: linear-gradient(135deg, #0070BA, #009CDE) !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    color: white !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 112, 186, 0.3) !important;
}

.usercp-modal .modal-body button.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 112, 186, 0.5) !important;
    background: linear-gradient(135deg, #009CDE, #0070BA) !important;
}

.usercp-modal .modal-body button.btn-primary:active {
    transform: translateY(0) !important;
}

.usercp-modal .modal-body button.btn-primary i {
    margin-right: 8px;
}

/* Modales secundarios deben aparecer sobre modales principales */
#tickets-new-modal,
#vip-order-modal,
#referral-invite-modal {
    z-index: 10001 !important;
}

#tickets-new-modal .modal-content,
#vip-order-modal .modal-content,
#referral-invite-modal .modal-content {
    z-index: 10002 !important;
}

a.btn.btn-primary.admincp-button {
    margin-top: 1rem;
    margin-left: 1rem;
}

/* ============================================
   Kill Log Widget - Estilos para nuevos elementos
   ============================================ */

/* Kill Item Container */
.kill-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid #ff6b6b;
    position: relative;
}

.kill-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

/* Kill Participants Container */
.kill-participants {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

/* Individual Participant */
.kill-participant {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}

.kill-participant.killer {
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.kill-participant.killer:hover {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.5);
}

.kill-participant.victim {
    border: 1px solid rgba(149, 165, 166, 0.3);
}

.kill-participant.victim:hover {
    background: rgba(149, 165, 166, 0.1);
    border-color: rgba(149, 165, 166, 0.5);
}

.participant-name {
    font-weight: 600;
    font-size: 11px;
    color: #fff;
    text-align: center;
    margin-bottom: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100px;
}

.kill-participant.killer .participant-name {
    color: #ff6b6b;
}

.kill-participant.victim .participant-name {
    color: #95a5a6;
}

.participant-guild {
    font-size: 9px;
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100px;
}

.participant-stats {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* VS Separator */
.kill-vs {
    color: #ff6b6b;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 4px;
    flex-shrink: 0;
}

/* Kill Result (Main Action Text) */
.kill-result {
    text-align: center;
    padding: 6px 0;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
}

.kill-result .killer-name {
    color: #ff6b6b;
    font-weight: 700;
}

.kill-result .kill-action {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin: 0 4px;
}

.kill-result .victim-name {
    color: #95a5a6;
    font-weight: 700;
}

/* Kill Time */
.kill-time {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.kill-time i {
    color: #4ecdc4;
    font-size: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kill-log-widget {
        width: 280px;
        top: 10px;
        left: 10px;
    }
    
    .kill-participants {
        flex-direction: column;
        gap: 6px;
    }
    
    .kill-vs {
        transform: rotate(90deg);
    }
    
    .participant-name {
        max-width: 120px;
    }
    
    .participant-guild {
        max-width: 120px;
    }
}

/* ============================================
   RESPONSIVE DESIGN - MODALS PARA MÓVILES
   ============================================ */

/* Tablets y pantallas medianas (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .modal-content {
        width: 90%;
        max-width: 600px;
        max-height: 90vh;
    }
    
    .modal-buttons {
        left: 10px;
        gap: 15px;
    }
    
    .modal-button {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .modal-button i {
        font-size: 18px;
        width: 25px;
        height: 25px;
    }
}

/* Móviles grandes (481px - 768px) */
@media screen and (max-width: 768px) {
    /* Modals - Ajustes generales */
    .modal {
        padding: 10px;
        align-items: flex-start;
        padding-top: 20px;
    }
    
    .modal-content {
        width: 95%;
        max-width: 100%;
        max-height: 95vh;
        border-radius: 15px;
        margin: 0 auto;
        transform: translateY(0);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal.active .modal-content {
        transform: translateY(0);
    }
    
    /* Header del modal */
    .modal-header {
        padding: 15px 20px;
        position: sticky;
        top: 0;
        z-index: 10;
        background: linear-gradient(135deg, rgba(15, 15, 20, 0.98), rgba(5, 5, 10, 0.98));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .modal-title {
        font-size: 18px;
        gap: 10px;
    }
    
    .modal-title i {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    /* Botón de cerrar más grande para touch */
    .close-modal {
        width: 44px;
        height: 44px;
        font-size: 28px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Body del modal */
    .modal-body {
        padding: 20px;
        font-size: 14px;
    }
    
    /* Botones laterales - Ocultar o reorganizar */
    .modal-buttons {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: calc(100% - 40px);
        z-index: 1000;
    }
    
    .modal-button {
        padding: 12px 16px;
        font-size: 13px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 10px;
        flex: 0 0 auto;
    }
    
    .modal-button span {
        display: none; /* Ocultar texto, solo mostrar iconos en móvil */
    }
    
    .modal-button i {
        margin-right: 0;
        font-size: 20px;
    }
    
    /* Formularios en modals */
    .modal-body .form-group {
        margin-bottom: 20px;
    }
    
    .modal-body label {
        font-size: 14px;
        margin-bottom: 8px;
        display: block;
    }
    
    .input-with-icon {
        position: relative;
    }
    
    .input-with-icon input,
    .input-with-icon select,
    .input-with-icon textarea {
        width: 100%;
        padding: 14px 14px 14px 45px;
        font-size: 16px; /* Previene zoom en iOS */
        border-radius: 8px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    .input-with-icon i {
        left: 14px;
        font-size: 18px;
    }
    
    .modal-body button,
    .modal-body .btn,
    .register-button {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
        min-height: 44px;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Tablas en modals */
    .modal-body table {
        font-size: 12px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-body table th,
    .modal-body table td {
        padding: 10px 8px;
        white-space: nowrap;
    }
    
    /* Modals específicos */
    .usercp-modal .modal-content {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .ranking-modal .modal-content,
    .descarga-modal .modal-content {
        max-width: 100%;
    }
    
    /* Scrollbar personalizado para móviles */
    .modal-content::-webkit-scrollbar {
        width: 4px;
    }
    
    .modal-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }
}

/* Móviles pequeños (hasta 480px) */
@media screen and (max-width: 480px) {
    .modal {
        padding: 5px;
        padding-top: 10px;
    }
    
    .modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 10px 10px 0 0;
        margin: 0;
    }
    
    .modal-header {
        padding: 12px 15px;
    }
    
    .modal-title {
        font-size: 16px;
    }
    
    .modal-title i {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    .close-modal {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .modal-body {
        padding: 15px;
        font-size: 13px;
    }
    
    .input-with-icon input,
    .input-with-icon select {
        padding: 12px 12px 12px 40px;
        font-size: 16px;
    }
    
    .input-with-icon i {
        left: 12px;
        font-size: 16px;
    }
    
    .modal-buttons {
        bottom: 10px;
        left: 10px;
        right: 10px;
        max-width: calc(100% - 20px);
        transform: none;
    }
    
    .modal-button {
        flex: 1 1 auto;
        min-width: 50px;
        padding: 10px;
    }
    
    /* Ocultar elementos no esenciales en móviles */
    .modal-body .field-info {
        font-size: 11px;
    }
    
    /* Ajustar grids y layouts */
    .modal-body .grid,
    .modal-body .row {
        display: block;
    }
    
    .modal-body .grid > *,
    .modal-body .row > * {
        width: 100%;
        margin-bottom: 15px;
    }
}

/* Orientación horizontal en móviles */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .modal-content {
        max-height: 100vh;
        border-radius: 0;
    }
    
    .modal-header {
        padding: 10px 15px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .modal-buttons {
        bottom: 10px;
    }
}

/* Mejoras de accesibilidad táctil */
@media (hover: none) and (pointer: coarse) {
    /* Dispositivos táctiles */
    .close-modal:hover {
        transform: none;
    }
    
    .modal-button:hover {
        transform: none;
    }
    
    .modal-button:active {
        transform: scale(0.95);
        background: rgba(15, 15, 25, 1);
    }
    
    .close-modal:active {
        transform: scale(0.9);
        background: rgba(255, 255, 255, 0.15);
    }
    
    /* Áreas táctiles más grandes */
    button,
    .btn,
    a.button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevenir zoom en inputs en iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Optimización para pantallas de alta densidad */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .modal-content {
        border-width: 0.5px;
    }
    
    .modal-header {
        border-bottom-width: 0.5px;
    }
}

/* Dark mode en móviles (si aplica) */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .modal-content {
        background: linear-gradient(135deg, rgba(10, 10, 15, 0.98), rgba(5, 5, 10, 0.98));
    }
}