/* 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; }

#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 */
    }

/* ÚNICA DEFINICIÓN LIMPIA PARA TODAS LAS CAJAS MODALES */
.ventana-movible-content, 
.vip-content-pro {
    position: relative; /* Se mantiene relativo hasta que lo arrastras */
    background: #0d0d0d !important;
    border: 2px solid var(--accent) !important;
    border-radius: 25px !important;
    padding: 30px !important;
    box-shadow: 0 0 50px #000 !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;
    
    /* Evita que se colapsen o amontonen */
    min-width: 400px;
    max-width: 95vw;
    word-wrap: break-word;
    margin: auto; /* Ayuda a que el flex-center del padre funcione bien inicialmente */
}

/* ============================================================
   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: #111 !important; 
    border: 1px solid #444 !important; 
    color: #fff !important; 
    border-radius: 10px !important; 
    font-size: 1.1rem; 
    text-align: center; 
}

/* Centrar ÚNICAMENTE el modal de Registro/Login sin tocar los demás */
/* Centrar ÚNICAMENTE el 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;
}

/* 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;
    z-index: 10000000 !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 DIFUMINADO SOLO PARA EDAD Y SALAS */
.modal-bloqueante-wrapper.show {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    pointer-events: auto !important; /* Bloquea clics al fondo */
}

/* Cursores de la Edad y Salas (Sin la manita de mover) */
#ageModal .vip-content-pro, #ageModal .ventana-movible-content,
#guestQueueModal .vip-content-pro, #guestQueueModal .ventana-movible-content {
    cursor: default !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;
}

/* SALAS: Más ancho para que quede más vistoso */
#guestQueueModal .vip-content-pro {
    width: 650px !important;
    min-width: 650px !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; transform: none; left: 0; margin-bottom: 20px; font-family: 'Orbitron'; color: var(--accent); font-size: 1.2rem; letter-spacing: 2px; }
.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;
}

/* ============================================================
   SOLUCIÓN REAL PARA MODALES EN MODO DÍA (LIGHT MODE)
============================================================ */

/* 1. Fondo blanco para TODAS las cajas modales (Perfil, Salas, Inbox, etc.) */
body.light-mode .ventana-movible-content, 
body.light-mode .vip-content-pro,
body.light-mode .video-vault-box,
body.light-mode .partner-card-inner {
    background: #ffffff !important;
    border-color: #cccccc !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    color: #1a1a1a !important;
}

/* 2. Fondo claro para los Formularios (Cajas de texto, perfiles, DMCA) */
body.light-mode .gray-input-pro, 
body.light-mode .dmca-textarea, 
body.light-mode .bio-textarea,
body.light-mode .input-disabled-style {
    background: #f4f4f4 !important;
    color: #000000 !important;
    border-color: #bbbbbb !important;
}

/* 3. Textos, Etiquetas y Títulos en Negro para que se lean bien */
body.light-mode .modal-title,
body.light-mode .alert-title,
body.light-mode .prof-name-text,
body.light-mode .partner-name-text {
    color: #000000 !important;
}

body.light-mode .alert-text,
body.light-mode .modal-label,
body.light-mode .prof-status-label,
body.light-mode .guest-alt-text {
    color: #444444 !important;
}

/* 4. Las "X" de cerrar se vuelven negras en modo día */
body.light-mode .modal-close-btn,
body.light-mode .close-video,
body.light-mode .close-premium {
    color: #000000 !important;
}

/* 5. Interfaz de la Bóveda de Vídeos (Vault) unificada en blanco */
body.light-mode .playlist-section {
    background: #f9f9f9 !important;
    border-left-color: #cccccc !important;
}
body.light-mode .playlist-thumb {
    color: #1a1a1a !important;
    border-bottom-color: #dddddd !important;
}
body.light-mode .playlist-thumb:hover {
    background: #eeeeee !important;
}

/* 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 - ¡VERSION LIMPIA SIN BLUR! */
.rules-modal-overlay {
    display: none; /* Se activa con el JS de ui.js */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Solo color, cero esfuerzo para el PC */
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

/* 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;
    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 */
}