/* CSS INYECTADO PARA EVITAR CACHÉ */
@keyframes popDown { 0% { top: -100px; opacity: 0; } 100% { top: 20px; opacity: 1; } }
@keyframes scanLine { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }
.mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mt-15 { margin-top: 15px; } .mt-25 { margin-top: 25px; } .m-0 { margin: 0; } .text-center { text-align: center; } .fw-bold { font-weight: bold; }

/* =========================================================================
   SISTEMA LIMPIO DE TEMAS (MODO NOCHE / MODO DÍA) Y CONTENEDORES
   ========================================================================= */

/* Grandes contenedores con color accent */
.subscription-plans-section,
.pricing-wrap,
.faq-section,
.news-section {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #111111;
}

.subscription-plans-section .plans-header h2,
.faq-section .news-header,
.news-section .news-header {
    color: #000000;
}

/* Tarjetas de contenido internas */
.feature-card,
.price-card,
.faq-item,
.news-card,
.chat-box,
.top-bar,
header {
    background: #0a0a0a;
    border: 1px solid var(--accent);
    color: #ffffff;
}

body.light-mode .feature-card,
body.light-theme .feature-card,
body.light-mode .price-card,
body.light-theme .price-card,
body.light-mode .faq-item,
body.light-theme .faq-item,
body.light-mode .news-card,
body.light-theme .news-card,
body.light-mode .chat-box,
body.light-theme .chat-box,
body.light-mode .top-bar,
body.light-theme .top-bar {
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #111111;
}

/* Todos los modales unificados */
.ventana-movible-content,
.vip-content-pro,
.dmca-modal-box,
.standard-modal-box,
.profile-modal-wide,
.inbox-modal-wide,
.rules-modal-content,
.juegos-content,
#juegos-ventana,
#ruletaModal > div,
.profile-dropdown-content.mega-menu {
    background: #000000;
    border: 1.5px solid var(--accent);
    color: #ffffff7e;
}

body.light-mode .ventana-movible-content,
body.light-theme .ventana-movible-content,
body.light-mode .vip-content-pro,
body.light-theme .vip-content-pro,
body.light-mode .dmca-modal-box,
body.light-theme .dmca-modal-box,
body.light-mode .standard-modal-box,
body.light-theme .standard-modal-box,
body.light-mode .profile-modal-wide,
body.light-theme .profile-modal-wide,
body.light-mode .inbox-modal-wide,
body.light-theme .inbox-modal-wide,
body.light-mode .juegos-content,
body.light-theme .juegos-content,
body.light-mode #ruletaModal > div,
body.light-theme #ruletaModal > div,
body.light-mode .profile-dropdown-content.mega-menu,
body.light-theme .profile-dropdown-content.mega-menu {
    background: #ffffff;
    border: 1.5px solid var(--accent);
    color: #ffffff;
}

/* Elementos acentuados en modales (títulos, cruces, inputs y botones) */
.modal-title, .alert-title, #juegos-titulo, #ruletaModal h2, .modal-label,
.modal-close-btn, .close-btn-ruleta, .juegos-cerrar, .close-rules, .close-btn-mobile {
    color: var(--accent);
}

.gray-input-pro, .dmca-textarea, .bio-textarea, .chat-input-text, #inboxReplyInput {
    background-color: #000000;
    color: #ffffff;
    border: 1.5px solid var(--accent);
}

/* =========================================================================
   ESTILOS PARA INPUTS Y TEXTAREAS (MODO NOCHE Y MODO DÍA)
   ========================================================================= */

/* 1. MODO NOCHE (Por defecto cuando no está activa la clase light-mode) */
body:not(.light-mode):not(.light-theme) .gray-input-pro,
body:not(.light-mode):not(.light-theme) .dmca-textarea,
body:not(.light-mode):not(.light-theme) .bio-textarea,
body:not(.light-mode):not(.light-theme) .chat-input-text,
body:not(.light-mode):not(.light-theme) #inboxReplyInput {
    background-color: #0a0a0a !important;       /* Fondo negro elegante */
    color: #ffffff !important;                  /* Texto blanco legible */
    border: 1.5px solid var(--accent) !important; /* Borde con el color activo */
}

/* 2. MODO DÍA (Solo cuando se activa el botón de modo día) */
body.light-mode .gray-input-pro, 
body.light-theme .gray-input-pro,
body.light-mode .dmca-textarea, 
body.light-theme .dmca-textarea,
body.light-mode .bio-textarea, 
body.light-theme .bio-textarea,
body.light-mode .chat-input-text, 
body.light-theme .chat-input-text,
body.light-mode #inboxReplyInput {
    background-color: #ffffff !important;       /* Fondo blanco */
    color: #111111 !important;                  /* Texto oscuro */
    border: 1.5px solid var(--accent) !important; /* Borde con el color activo */
}

.btn-neon-gray, .btn-submit-login, .btn-save, #btnSendDmca, .btn-accion-casino, .juegos-btn-validar {
    background-color: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
}

.btn-neon-gray:hover, .btn-submit-login:hover, .btn-save:hover, #btnSendDmca:hover {
    background-color: var(--accent);
    color: #000000;
}

/* ============================================================
   ESTRUCTURA Y TAMAÑOS DE CAJAS MODALES (SIN CONFLICTOS DE COLOR)
   ============================================================ */

.ventana-movible-content, 
.vip-content-pro {
    position: relative !important;
    border-radius: 25px !important;
    padding: 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    text-align: center !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    min-width: 400px;
    max-width: 95vw;
    word-wrap: break-word;
    margin: auto;
}

/* Cursores específicos */
#ageModal .vip-content-pro, #ageModal .ventana-movible-content,
#guestQueueModal .vip-content-pro, #guestQueueModal .ventana-movible-content {
    cursor: default !important;
}

/* SALAS: Más ancho para que quede más vistoso */
#guestQueueModal .vip-content-pro {
    width: 650px !important;
    min-width: 650px !important;
}

/* Centrado ÚNICAMENTE del modal VIP sin romper el botón de la X */
#vipGoldModal .vip-content-pro {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-top: 0 !important; 
    max-height: 90vh; 
    overflow-y: auto;
}

#viewerGoalBar {
    height: 100%;
    width: 0%;
    /* Degradado RGB Completo: Blanco -> Rojo -> Amarillo -> Verde -> Cian -> Azul -> Magenta -> Negro */
    background: linear-gradient(to right, 
        #ffffff, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #000000
    );
    background-size: 200% 100%; /* Para que el color se distribuya mejor */
    transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

    /* Estilos inyectados directos para que la caché no los ignore */
    #liveHubOverlayNuclear {
        display: none;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100vh !important;
        background: rgba(0,0,0,0.85) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 2147483647 !important; /* Máximo nivel de la web */
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important; padding: 0 !important;
    }

    #liveHubWindowNuclear {
        position: relative !important;
        background: #0d0d0d !important;
        border: 2px solid #ff3333 !important;
        border-radius: 25px !important;
        width: 900px !important;
        max-width: 95% !important;
        max-height: 85vh !important;
        padding: 40px !important; /* El espacio gigante que necesitabas */
        box-shadow: 0 0 50px rgba(0,0,0,1) !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 2147483647 !important;
        margin: auto !important; /* Doble seguro para que se quede en el medio */
    }

/* ============================================================
   CAJAS MODALES Y PERFIL (Código unificado y limpio)
   ============================================================ */

/* 1. Forzar que el AVISO esté por encima de TODO (incluso del popup de selección) */
#customAlertModal {
    z-index: 20000000 !important; /* El doble que los modales normales */
}

/* 2. Asegurar que si quitamos la clase .show, el modal muera visualmente */
#imageSourceModal:not(.show) {
    display: none !important;
}

/* 1. Caja estándar (Login, Reporte, Salas, etc.) */
.standard-modal-box {
    width: 500px !important;
    flex-shrink: 0 !important;
}

/* 2. Caja ancha exclusiva para Mi Perfil y el Inbox */
.profile-modal-wide {
    width: 850px !important; 
    min-width: 850px !important;
    max-width: 95vw !important; 
    flex-shrink: 0 !important;
}

/* 3. Cuadrícula del Perfil */
.profile-edit-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1.2fr !important; 
    gap: 30px !important; 
    text-align: left !important; 
    width: 100% !important; 
}

/* 4. Estilos de Inputs y Textareas */
.gray-input-pro, .dmca-textarea, .bio-textarea { 
    width: 100% !important; 
    padding: 12px 15px !important; 
    margin-bottom: 15px !important; 
    background: #ffffff !important; 
    border: 1px solid #444 !important; 
    color: #777 !important; 
    border-radius: 10px !important; 
    font-size: 1.1rem; 
    text-align: center; 
}

/* 5. SOLUCIÓN REGISTRO: Damos espacio cuando hay dos columnas */
#vipGoldModal .login-grid.two-columns {
    min-width: 700px; /* Asegura que la cámara y el formulario quepan bien */
    max-width: 95vw;
}

/* ============================================================
   1. WRAPPERS Y BLOQUEO DE PANTALLA (Difuminado corregido)
   ============================================================ */

#affiliateModal {
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; /* Específico para Mac/Safari */
    background-color: rgba(0, 0, 0, 0.9) !important; 
}

.modal-ventana-wrapper, 
.modal-bloqueante-wrapper,
.vip-modal-pro {
    display: none; 
    position: fixed !important; 
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important; /* Por defecto no bloquean clics */
    overflow-y: auto !important; /* Permite scroll vertical si es necesario */
    align-items: flex-start !important; /* Cambiamos center por flex-start para que el scroll empiece desde arriba */
    padding: 40px 0;
}

/* Activar visibilidad */
.show {
    display: flex !important;
    visibility: visible !important;
}

/* FONDO TRANSPARENTE PARA VER LA WEB DETRÁS DEL MODAL */
.modal-bloqueante-wrapper.show {
    background: transparent !important;
    pointer-events: none !important; 
    color-scheme: dark !important; 
    transition: none !important;
}

/* ============================================================
   2. REVISIÓN DE WRAPPERS GENERALES Y CAJAS (Fix Posición y Movimiento)
   ============================================================ */

/* SEPARACIÓN DEL TÍTULO */
.modal-title {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 30px !important; 
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
    display: block !important;
}

/* ============================================================
   3. TAMAÑOS ESPECÍFICOS (DMCA, Inbox y Salas)
   ============================================================ */
.dmca-modal-box {
    width: 500px !important; 
    max-width: 95vw !important;
}

.inbox-modal-wide {
    width: 850px !important;
    max-width: 95vw !important;
}

/* ============================================================
   AJUSTE DE ANCHO PARA EL PERFIL Y MODALES GRANDES
   ============================================================ */

/* ============================================================
   4. BANNERS (Medidas estables)
   ============================================================ */
.popup-outer-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 25px !important; }
.popup-side-banner { flex-shrink: 0 !important; width: 90px !important; height: 728px !important; background: #000; border: 1px solid #333; border-radius: 15px; overflow: hidden; }
.popup-center-col { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 15px !important; }
.popup-center-col .b-728 { width: 728px !important; height: 90px !important; background: #000; border: 1px solid #333; border-radius: 15px; overflow: hidden; margin: 0 !important; }

/* ============================================================
   5. FORMULARIOS (Perfil y Otros)
   ============================================================ */

/* Escondemos los modales por defecto */
#modalMyRecordings, #modalVideoPlayer {
    display: none; /* ESTO ES VITAL */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999; /* Por encima de todo, incluido el header */
    background: rgba(0, 0, 0, 0.85);
}

/* Aseguramos que el contenido del modal sea una caja real */

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

/* El escudo invisible */
.video-overlay-shield {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 90%; /* Deja los controles libres abajo */
    z-index: 10;
    background: rgba(0,0,0,0);
}

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Esconde el botón de tres puntos */
}

/* Asegura que el modal esté por encima de TODO (incluso el header) */

/* Contenedor principal del modal */

/* La CAJA blanca/negra donde van los vídeos */
.modal-content-premium {
    position: relative !important; /* <--- ESTO fija la X dentro de la caja */
    background: #0d0d0d;
    border: 2px solid #bc13fe;
    border-radius: 20px;
    padding: 40px;
    width: 90%;
    max-width: 800px;
    margin: auto;
}

/* El botón X */
.close-premium {
    position: absolute !important; 
    top: 15px !important;
    right: 20px !important;
    color: #fff !important;
    font-size: 30px !important;
    cursor: pointer;
    line-height: 1;
}

/* Estilo para la X de cierre */
.close-premium, .close-video {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #ffffff; /* Asegúrate de que no sea igual al fondo */
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2000; /* Para que esté por encima de todo */
    transition: 0.3s;
}

.close-premium:hover, .close-video:hover {
    color: #ff4757; /* Cambia a rojo al pasar el ratón */
    transform: scale(1.2);
}

/* El contenedor del modal debe estar oculto por defecto */
.modal-premium, .modal-video-overlay {
    display: none; 
    position: fixed;
    z-index: 1500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro */
    justify-content: center;
    align-items: center;
}

.modal-video-overlay {
    z-index: 9999 !important; 
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
}

/* La "Caja" del modal */
.video-vault-box {
    background: #121212;
    width: 90%;
    max-width: 1100px;
    height: 80vh;
    border-radius: 15px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* Layout de Video + Playlist */
.video-main-layout {
    display: flex;
    height: 100%;
}

.video-section {
    flex: 3; /* El video ocupa más espacio */
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playlist-section {
    flex: 1; /* La lista es más estrecha */
    background: #1a1a1a;
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.playlist-items {
    overflow-y: auto;
    margin-top: 10px;
}

/* Estilo de cada item en la lista lateral */
.playlist-thumb {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.9rem;
}

.playlist-thumb:hover {
    background: #333;
}

.playlist-thumb.active {
    background: rgba(188, 19, 254, 0.2);
    border: 1px solid #bc13fe;
}

/* Contenedor del botón en el menú (para que se centre) */
.nav-item-vault {
    flex: 1; /* Para que ocupe espacio equitativo */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #bc13fe; /* Color de fondo en TODO el bloque */
    height: 100%; /* Ocupa todo el alto del header */
    transition: background 0.3s;
}

.nav-item-vault:hover {
    background: #a011d8; /* Un tono más oscuro al pasar el raton */
}

.btn-vault-full {
    background: transparent; /* El color ya lo da el contenedor */
    color: white;
    border: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

.btn-vault-full i {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

/* ========================================================================= */
/* NUEVO: ESTILOS PARA EL MARKETPLACE / PREMIUM STORE                        */
/* ========================================================================= */
.market-video-card {
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, border-color 0.2s;
}
.market-video-card:hover {
    transform: translateY(-5px);
    border-color: #bc13fe;
}
.market-video-thumb {
    width: 100%;
    height: 120px;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #333;
}
.market-video-thumb span {
    font-size: 40px;
    opacity: 0.8;
}
.market-video-info {
    padding: 12px;
    text-align: center;
}
.market-video-title {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.market-video-author {
    color: #aaa;
    font-size: 11px;
    margin: 0 0 10px 0;
}
.btn-market-action {
    background: transparent;
    border: 1px solid #bc13fe;
    color: #bc13fe;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    width: 100%;
    transition: all 0.2s;
    font-weight: bold;
}
.btn-market-action:hover {
    background: #bc13fe;
    color: #000;
}
.btn-market-sell {
    border-color: #00ffcc;
    color: #00ffcc;
}
.btn-market-sell:hover {
    background: #00ffcc;
    color: #000;
}

.gray-input-pro:focus, .dmca-textarea:focus, .bio-textarea:focus { border-color: var(--accent) !important; outline: none; box-shadow: 0 0 10px rgba(204, 204, 204, 0.2); }
.cover-upload-box { width: 100%; height: 150px; border: 1px dashed var(--accent); border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 15px; background: #111; }
.avatar-upload-box { width: 80px; height: 80px; border-radius: 50% !important; border: 2px solid var(--accent); overflow: hidden; position: relative; background: #000; }
.file-input-hidden { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 5; }
.cam-box-pro { position: relative; width: 100%; aspect-ratio: 16/9; border: 2px dashed var(--accent); border-radius: 12px; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bio-textarea { resize: none; text-align: left; }
.dmca-textarea { min-height: 120px; text-align: left; }
.alert-text { font-size: 1.1rem; color: #ccc; text-align: center; margin-bottom: 20px; }
.modal-close-btn { position: absolute; top: 15px; right: 20px; font-size: 30px; color: var(--accent); cursor: pointer; z-index: 100; background: none; border: none; }
.hide-vip-ads { display: none !important; } .hidden-faq-item, .hidden-news-item { display: none; }
.popup-logo-header { margin-top: 40px !important; margin-bottom: 40px !important; }
.popup-logo-header-static { 
    position: relative !important; 
    top: auto !important;
    left: auto !important;
    transform: none !important; 
    margin-top: 20px !important;
    margin-bottom: 25px !important; 
    font-family: 'Orbitron', sans-serif !important; 
    color: var(--accent) !important; 
    font-size: 1.3rem !important; 
    letter-spacing: 2px !important; 
    text-align: center !important;
    display: block !important;
    z-index: 10 !important;
}
.ai-scanner-visual { position: relative; width: 120px; height: 120px; margin: 20px auto; border: 2px solid #bc13fe; border-radius: 20px; overflow: hidden; }
.scan-line, .ai-scanner-line { position: absolute; width: 100%; height: 4px; background: #bc13fe; box-shadow: 0 0 15px #bc13fe; animation: scanLine 2s linear infinite; top: 0; }
.ai-pending-box { max-width: 550px !important; border-color: #bc13fe !important; box-shadow: 0 0 30px rgba(188, 19, 254, 0.4); }
.ai-pending-title { color: #bc13fe; font-size: 1.5rem; font-family: 'Orbitron'; margin-bottom: 20px; }
.ai-scanner-img { width: 100%; height: 100%; object-fit: contain; opacity: 0.3; }
.ai-pending-footer { margin-top: 25px; padding-top: 20px; border-top: 1px solid #333; }
.login-tabs { display: flex; justify-content: center; gap: 30px; margin-bottom: 25px; }
.active-tab { color: var(--accent); cursor: pointer; margin: 0; text-shadow: 0 0 10px var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 5px; transition: color 0.4s, border-color 0.4s; background: none; border-top: none; border-left: none; border-right: none;}
.inactive-tab { color: #aaa; cursor: pointer; margin: 0; padding-bottom: 5px; transition: color 0.4s; background: none; border: none; }
.login-grid { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; transition: opacity 0.3s ease; }
.login-grid.two-columns { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 50px; }
.credentials-section { width: 100%; max-width: 400px; border-top: 1px solid #333; padding-top: 25px; margin: 0 auto; box-sizing: border-box; }
.login-grid.two-columns .credentials-section { max-width: none; border-top: none; padding-top: 0; border-right: 1px solid #333; padding-right: 40px; }
.password-wrapper { position: relative; }
.toggle-pass { position: absolute; right: 15px; top: 15px; cursor: pointer; font-size: 1.2rem; }
.camera-section { text-align: center; display: none; width: 100%; max-width: 400px; margin-bottom: 5px; margin: 0 auto; box-sizing: border-box; }
.gestures-text { color: var(--accent); font-weight: bold; font-size: 1.5rem; letter-spacing: 2px; transition: color 0.4s; display: block; margin-top: 5px; margin-bottom: 15px; }
.login-submit-area { text-align: center; margin-top: 30px; width: 100%; }
.cover-upload-box { width: 100%; height: 150px; border: 1px dashed var(--accent); border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 15px; background: #111; }
.cover-upload-box img, .avatar-upload-box img { width: 100%; height: 100%; object-fit: cover; }
.cover-upload-box img { opacity: 0.5; }
.file-input-hidden { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.avatar-info-box { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.avatar-texts { text-align: left; }
.prof-name-text { font-size: 1.3rem; margin: 0; font-weight: bold; color: #fff; transition: color 0.4s; }
.prof-status-label { color: #aaa; font-size: 0.8rem; margin: 5px 0; transition: color 0.4s; }
.prof-status-val { font-weight: bold; color: var(--accent); text-shadow: 0 0 10px var(--accent); }
.prof-match-val { color: #fff; font-weight: bold; transition: color 0.4s; }
.modal-input-small { padding: 8px; margin-bottom: 10px; text-align: left; }
.profile-modal-actions { display: flex; gap: 20px; margin-top: 30px; justify-content: center; flex-wrap: wrap; }
.profile-modal-extra-links { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; margin-top: 25px; border-top: 1px solid #222; padding-top: 20px; flex-wrap: wrap; }
.quick-links-container { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; }
.quick-link { height: auto; padding: 10px 20px; margin: 0 !important; }
.logout-btn-quick { border-color: #ff3333; color: #ff3333; margin: 0 !important; text-shadow: none; box-shadow: none; background: transparent; }
.logout-btn-quick:hover { background: #ff3333; color: #fff; box-shadow: 0 0 10px #ff3333; }
.partner-modal-box { max-width: 400px !important; text-align: center; margin: auto; }
.partner-card-inner { background: transparent; padding: 20px; border-radius: 10px; border: 1px solid #333; margin-top: 20px; transition: background-color 0.4s, border-color 0.4s; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.partner-avatar-circle { width: 130px !important; height: 130px !important; background: #000; border: 3px solid var(--accent); border-radius: 50% !important; margin: 0 auto 15px auto; overflow: hidden; box-shadow: 0 0 20px rgba(204, 204, 204, 0.2); }
.partner-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.partner-name-text { color: #fff; font-size: 1.4rem; font-weight: bold; margin: 10px 0; transition: color 0.4s; font-family: 'Orbitron'; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.partner-actions-container { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.modal-label { display: block; font-family: 'Orbitron'; font-size: 11px; color: var(--accent); margin-bottom: 8px; text-transform: uppercase; font-weight: bold; transition: color 0.4s; }
/* Estilo para campos que no se pueden editar */
.input-disabled-style {
    cursor: not-allowed !important;
    background-color: #080808 !important; /* Fondo más oscuro que el resto */
    color: #666 !important;               /* Texto en gris apagado */
    opacity: 0.6;                         /* Efecto difuminado/transparente */
    border-color: #222 !important;        /* Borde más sutil */
}
.premium-notif-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.95); border: 2px solid #ffcc00; border-radius: 15px; padding: 20px; z-index: 99999; box-shadow: 0 0 20px rgba(255,204,0,0.6); text-align: center; min-width: 320px; animation: popDown 0.5s ease-out; }
.premium-notif-title { color: #ffcc00; font-family: 'Orbitron'; margin-bottom: 10px; font-size: 18px; }
.premium-notif-text { color: #fff; margin-bottom: 15px; }
.premium-notif-actions { display: flex; justify-content: center; gap: 10px; }
.btn-floating-dmca { position: fixed !important; bottom: 25px !important; right: 25px !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; background: #0a0a0a !important; border: 2px solid var(--accent) !important; display: flex !important; justify-content: center !important; align-items: center !important; z-index: 9999 !important; text-decoration: none; font-size: 20px; color: var(--accent); box-shadow: 0 0 15px rgba(0,0,0,0.5); transition: transform 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s; }
.btn-floating-dmca:hover { transform: scale(1.1); background: var(--accent) !important; color: #000 !important; box-shadow: 0 0 25px var(--accent); }
.btn-submit-login, .btn-accept { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 400px; margin: 0 auto 15px auto; padding: 15px; font-size: 1.1rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 10px; cursor: pointer; transition: 0.3s; }
.btn-submit-login:hover, .btn-accept:hover { background: var(--accent); color: #000; box-shadow: 0 0 15px var(--accent); }
.btn-decline { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 400px; margin: 0 auto; padding: 15px; font-size: 1.1rem; background: transparent; color: #ff3333; border: 1px solid #ff3333; border-radius: 10px; cursor: pointer; transition: 0.3s; }
.btn-decline:hover { background: #ff3333; color: #fff; }
.btn-start-cam { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 250px; padding: 15px; margin: 15px auto 0 auto; border-radius: 8px; font-weight: bold; cursor: pointer; font-family: 'Orbitron'; font-size: 1.1rem; }
.btn-save, .btn-view-wall, .btn-partner-action, .btn-partner-outline { width: 100%; margin: 0 auto; padding: 15px; display: flex; justify-content: center; flex: 1; background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 10px; cursor: pointer; transition: 0.3s; }
.btn-partner-outline { margin-top: 15px; }
.btn-guest-login { border-color: #00e5ff !important; color: #00e5ff !important; margin: 0 auto 20px auto !important; }
.guest-room-buttons { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.guest-alt-text { font-size: 12px; opacity: 0.7; }
@media (max-width: 768px) { .login-grid.two-columns { grid-template-columns: 1fr; gap: 30px; } .login-grid.two-columns .credentials-section { border-right: none; padding-right: 0; border-bottom: 1px solid #333; padding-bottom: 25px; margin-bottom: 10px; } .camera-section { padding-left: 0; } .login-modal-wide { padding: 25px !important; } }


/* Definición base de los paneles */
.picker-dropdown {
    position: fixed; 
    z-index: 999999; 
    background: #0d0d0d;
    border: 2px solid var(--accent);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    display: none; 
    flex-direction: column;
}

/* Botón Flotante (Sin cambios) */
.floating-rules-btn {
    position: fixed;
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    background: #222;
    color: #fff;
    border: 1px solid #ff3333;
    padding: 12px 15px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    z-index: 1000;
    font-family: 'Orbitron', sans-serif;
}

/* Fondo del Modal - ¡REEMPLAZADO: MULTITAREA TRANSPARENTE! */
.rules-modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important; /* Permite ver los modales que hay debajo */
    z-index: 2147483647 !important;
    pointer-events: none !important; /* Permite hacer clic a través del fondo hacia otros modales */
    align-items: center !important;
    justify-content: center !important;
}

/* Aseguramos que la caja interna sí capture los clics y destaque sobre el resto */
.rules-modal-content {
    pointer-events: auto !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.95), 0 0 0 1px var(--accent) !important;
}

/* Caja de contenido */
.rules-modal-content {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    /* Sombra simple para no cargar la tarjeta gráfica */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
}

/* Cabecera (La franja gris/negra que pedías) */
.modal-header {
    background: #222; 
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ff3333;
}

.modal-title {
    color: #ff3333;
    margin: 0;
    font-size: 1rem;
    font-family: 'Orbitron', sans-serif;
}

/* La X de cierre en su sitio y solo ella es clicable */
.close-rules {
    color: #888;
    font-size: 24px;
    cursor: pointer !important;
    pointer-events: auto !important;
    line-height: 1;
    transition: color 0.2s;
}

.close-rules:hover { color: #fff; }

.modal-body { padding: 20px; }

.rules-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    color: #ccc;
}

.btn-understand {
    width: 100%;
    padding: 10px;
    background: #ff3333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
}

/* --- SELECTOR DE SALAS (VERSIÓN LIMPIA Y CENTRADA) --- */

#guestQueueSelect {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important; /* Ajustado al ancho de tus botones */
    margin: 10px auto 25px auto !important; /* Centra el cuadro y da aire al botón */
    
    background-color: #111 !important;
    color: white !important;
    border: 2px solid var(--accent) !important;
    padding: 12px 0 !important; /* Padding lateral 0 para no descentrar */
    border-radius: 8px !important;
    font-family: 'Orbitron', sans-serif !important;
    cursor: pointer;
    outline: none;

    /* CENTRADO DEL TEXTO (CUADRO PRINCIPAL) */
    text-align: center !important;
    text-align-last: center !important; 
    
    /* COMPATIBILIDAD CHROME */
    appearance: none !important;
    -webkit-appearance: none !important;
    
    /* EL TRUCO DE LA LISTA: Si Chrome no centra, empujamos el texto */
    text-indent: 5px !important; 
    
    /* FLECHA BLANCA A LA DERECHA */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
}

/* OPCIONES DE LA LISTA */
/* Intentamos empujar el texto de las opciones hacia el centro */
#guestQueueSelect option {
    background-color: #111 !important;
    color: white !important;
    padding-left: 40px !important; /* Ajusta este número hasta que lo veas centrado */
    text-align: center !important; 
}

/* EFECTO CUANDO SE PINCHA */
#guestQueueSelect:focus {
    box-shadow: 0 0 15px var(--accent-glow) !important;
    border-color: #fff !important;
}

/* Truco para versiones de Chrome que ignoran text-align en options */
#guestQueueSelect::-ms-expand {
    display: none;
}

/* --- IMÁGENES DE FONDO PARA BOTONES DE SALA --- */

/* 1. Estilo común para los tres botones */
.guest-room-buttons a {
    position: relative !important; /* Necesario para el filtro oscuro */
    background-size: cover !important; /* La imagen llena el botón sin deformarse */
    background-position: center !important; /* Centra la imagen */
    background-repeat: no-repeat !important;
    overflow: hidden !important; /* Mantiene la imagen dentro de los bordes redondeados */
    z-index: 1 !important;
    
    /* Aseguramos que el texto esté centrado y arriba */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

/* 2. Filtro oscuro para mejorar la lectura del texto */
.guest-room-buttons a::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4) !important; /* Ajusta la oscuridad aquí (0.4 es 40%) */
    z-index: -1 !important; /* Se pone DETRÁS de las letras */
    transition: all 0.3s ease !important;
}

/* 3. ASIGNAR LAS IMÁGENES ESPECÍFICAS (Cambia las rutas por las tuyas reales) */
#btn-straight {
    background-image: url('../images/boton_straight.webp') !important; /* Ruta de tu imagen */
    background-position: 50% 20% !important;
}

/* Imagen para Gay Room */
#btn-gay {
    background-image: url('../images/boton_gay.webp') !important; /* Ruta de tu imagen */
    background-position: 50% 20% !important;
}

/* Imagen para Lesbians Room */
#btn-lesbians {
    background-image: url('../images/boton_lesbians.webp') !important; /* Ruta de tu imagen */
    background-position: 45% 25% !important;
}

/* 4. Efecto al pasar el ratón (Hover) */
.guest-room-buttons a:hover {
    transform: scale(1.05); /* Se agranda un poquito */
}

.guest-room-buttons a:hover::after {
    background: rgba(0, 0, 0, 0.1) !important; /* El filtro oscuro casi desaparece al hacer hover */
}

/* --- CORRECCIÓN GLOBAL PARA POSICIONAMIENTO DE MODALES Y BOTÓN X --- */
div[id$="Modal"], 
.ventana-movible-content, 
.vip-content-pro, 
.standard-modal-box {
    position: relative !important;
}

/* Forzar que cualquier botón de cierre 'X' o cruz dentro de un modal vaya a la esquina superior derecha */
div[id$="Modal"] > span[onclick*="cerrar"],
div[id$="Modal"] > .close-btn-ruleta,
div[id$="Modal"] .juegos-cerrar,
.ventana-movible-content > span,
.vip-content-pro > span {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    z-index: 100 !important;
    cursor: pointer !important;
}

/* =========================================================================
   CONTROL DE CLICS: PERMITIR INTERACCIÓN CON LA WEB DE FONDO
   ========================================================================= */

#modals-container,
.modal-ventana-wrapper,
.vip-modal-pro {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999999 !important;
    pointer-events: none !important; /* Deja pasar los clics hacia la web de fondo */
}

/* Solo la caja interior del modal recibe clics, nunca el fondo exterior */
.modal-ventana-wrapper > .ventana-movible-content,
.modal-ventana-wrapper > .vip-content-pro,
.vip-modal-pro > .ventana-movible-content,
.vip-modal-pro > .vip-content-pro,
.vip-modal-pro > .standard-modal-box,
.vip-modal-pro > .profile-modal-wide {
    pointer-events: auto !important;
}

/* =========================================================================
   REPARACIÓN: BLUR EN EDAD/SALAS Y CORRECCIÓN DE FONDO EN NORMAS
   ========================================================================= */

/* 1. RESTAURAR FONDO OSCURO Y DESENFOQUE (BLUR) EN EDAD Y SALAS */
#ageModal.show,
#guestQueueModal.show {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* Compatibilidad Safari / iOS */
    pointer-events: auto !important;
}

/* 2. CONTENER LA CAJA DE NORMAS PARA QUE NADA SE SALGA */
.rules-modal-content {
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 3. ELIMINAR EL MOSAICO DEL LOGOTIPO QUE SE SALÍA DETRÁS DE LAS NORMAS */
.rules-modal-content::before {
    display: none !important;
    content: none !important;
}

/* =========================================================================
   CONTENEDOR FLEXIBLE: SALDO Y BOTÓN WITHDRAW (CENTRADO Y SEPARADO)
   ========================================================================= */

/* Fila que une el botón de retirar y el saldo en el centro */
.saldo-withdraw-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 1. SEPARACIÓN HORIZONTAL: Aumentada para que se note claramente el espacio */
    gap: 24px !important;                 
    
    /* 2. CENTRADO VERTICAL: Subir hacia el título y dar aire hacia abajo */
    margin-top: -10px !important;         /* Tira del bloque hacia arriba para centrarlo con el título */
    margin-bottom: 25px !important;      /* Separa el bloque de las pestañas o tarjetas inferiores */
    
    width: 100% !important;
    flex-wrap: wrap !important;
}

/* Estilo compacto del botón Withdraw junto al saldo */
.btn-withdraw-inline {
    position: static !important;
    margin: 0 !important;
    padding: 7px 16px !important;        /* Un poco más de área clicable */
    font-size: 11px !important;
    line-height: 1 !important;
    border-color: #00ffcc !important;
    color: #00ffcc !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;           /* Evita que el botón se comprima si la ventana se estrecha */
    transition: all 0.3s ease !important;
}

.btn-withdraw-inline:hover {
    background-color: rgba(0, 255, 204, 0.15) !important;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.4) !important;
}

/* Quitamos márgenes residuales del párrafo del saldo dentro de este contenedor */
.saldo-withdraw-container .prof-status-label {
    margin: 0 !important;
    font-size: 14px !important;
    white-space: nowrap !important;      /* Evita que 'SALDO:' y 'CR' se partan en dos líneas */
    flex-shrink: 0 !important;
}

/* =========================================================================
   ESTILOS DEL MODAL DE BENEFICIOS VIP EN INGLÉS (INVITADOS)
   ========================================================================= */

.guest-perks-box {
    max-width: 480px !important;
    width: 90% !important;
    padding: 25px 20px !important;
    background: #0b0b0d !important;
    border: 1.5px solid var(--accent, #00e5ff) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 229, 255, 0.2) !important;
    text-align: center !important;
}

.guest-perks-title {
    color: var(--accent, #00e5ff) !important;
    font-size: 1.25rem !important;
    margin-bottom: 8px !important;
    letter-spacing: 1.5px !important;
    font-family: 'Orbitron', sans-serif !important;
}

.guest-perks-subtitle {
    color: #ccc;
    font-size: 13px;
    margin-bottom: 16px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.guest-perks-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    margin-bottom: 14px;
    text-align: left;
}

.vip-perk-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 9px 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.vip-perk-card:hover {
    border-color: var(--accent, #00e5ff);
    background: rgba(255, 255, 255, 0.05);
}

.vip-perk-card.perk-highlight {
    border-color: rgba(0, 255, 204, 0.4);
    background: rgba(0, 255, 204, 0.04);
}

.perk-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}

.perk-info strong {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.perk-info small {
    display: block;
    font-size: 11px;
    color: #aaa;
    line-height: 1.35;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.esim-disclaimer-text {
    font-size: 10.5px;
    color: #777;
    line-height: 1.4;
    text-align: left;
    margin: 0 0 16px 0;
    padding: 0 4px;
    font-style: italic;
    font-family: 'Segoe UI', Arial, sans-serif;
}

body.light-mode .esim-disclaimer-text,
body.light-theme .esim-disclaimer-text {
    color: #555;
}

.guest-perks-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
}

.btn-perks-primary {
    background: var(--accent, #00e5ff) !important;
    color: #000 !important;
    font-weight: bold !important;
    padding: 12px !important;
    width: 100% !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3) !important;
}

.btn-perks-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-perks-secondary {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    font-size: 11px;
    padding: 9px;
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    transition: color 0.2s, border-color 0.2s;
}

.btn-perks-secondary:hover {
    color: #ccc;
    border-color: #666;
}

/* =========================================================================
   ESTANDARIZACIÓN DEL CURSOR: MANITO MODERNA (GRAB / GRABBING)
   ========================================================================= */

/* 1. Manito abierta en reposo sobre todas las ventanas movibles */
#ruletaModal > div,
.guest-perks-box,
.ventana-movible-content,
.rules-modal-content,
#juegos-ventana,
.partner-modal-box,
#liveHubWindowNuclear,
#marketplaceBox,
#affiliateModal .vip-content-pro {
    cursor: grab !important;
}

/* 2. Manito cerrada cuando se mantiene pulsado o se arrastra */
#ruletaModal.is-dragging > div,
.guest-perks-box.is-dragging,
.ventana-movible-content.is-dragging,
.rules-modal-content.is-dragging,
#liveHubWindowNuclear.is-dragging,
#marketplaceBox.is-dragging,
.is-dragging {
    cursor: grabbing !important;
    user-select: none !important;
}

/* 3. Protección de elementos interactivos internos */
.ventana-movible-content button,
.ventana-movible-content input,
.ventana-movible-content select,
.ventana-movible-content a,
.modal-close-btn,
.close-rules,
.close-btn-ruleta {
    cursor: pointer !important;
}

/* 4. Quitar definitivamente cualquier blur de fondo residual */
#liveHubOverlayNuclear,
#affiliateModal,
#rulesModal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* BLINDAJE CONTRA EL RECORTE Y OCULTACIÓN DEL BOTÓN NATIVO */
    video::-webkit-media-controls-fullscreen-button {
        display: none !important; /* Oculta el botón por defecto de Chrome/Edge */
    }
    video:-webkit-full-screen {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    video:-moz-full-screen {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    video:fullscreen {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

/* =========================================================================
   VIDEO HUB Y LIVE HUB: FONDO NEGRO BRILLANTE Y SIN LOGO DE FONDO
   ========================================================================= */
#marketplaceBox, 
#liveHubWindowNuclear {
    background: linear-gradient(145deg, #0a0a0a 0%, #000000 100%) !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.95), inset 0 2px 10px rgba(255,255,255,0.05) !important;
}

/* Anulamos la pseudo-clase que inserta el patrón de agua/logo en el fondo */
#marketplaceBox::before, 
#liveHubWindowNuclear::before {
    display: none !important;
    content: none !important;
}