/* --- VARIABLES Y RESETEO BASE --- */

/* --- AVISO DE COOKIES (EU GDPR) --- */
.cookie-bar {
    position: fixed;
    bottom: 20px; /* Se apoya justo encima de la barra roja de anuncios */
    left: 0;
    width: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--accent); /* Línea superior del color del usuario */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    box-sizing: border-box;
    z-index: 100000; /* Asegura que esté por encima de casi todo */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.8);
    font-family: 'Segoe UI', Arial, sans-serif;
}

.cookie-content {
    display: flex;
    align-items: center;
    max-width: 70%;
}

.cookie-content p {
    color: #ccc;
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

/* Adaptación para teléfonos móviles */
@media (max-width: 768px) {
    .cookie-bar {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    .cookie-content {
        max-width: 100%;
        margin-bottom: 15px;
        flex-direction: column;
    }
    .cookie-content span {
        margin: 0 0 10px 0;
    }
}

/* --- BARRA DE ANUNCIOS INFERIOR ACTUALIZADA (LED MARQUEE) --- */
.announcer-bar {
    position: fixed; /* Fija la barra en la pantalla */
    bottom: 0;       /* La pega exactamente al borde inferior */
    left: 0;
    width: 100%;
    height: 20px;    /* ✅ ACTUALIZADO: De 30px a 32px de alto */
    background-color: #ff0000; /* Fondo rojo */
    overflow: hidden; 
    display: flex;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.8); /* Sombra hacia arriba */
    
    /* ✅ ACTUALIZADO: Bajamos la capa para que quede DETRÁS de los botones flotantes */
    /* Nota: Asegúrate de que tus botones flotantes tengan un z-index superior a 100 */
    z-index: 1000000; 
}

.marquee {
    width: 100%;
    white-space: nowrap;
}

.marquee span {
    display: inline-block; /* VITAL para la animación */
    padding-left: 100%; /* Empieza fuera a la derecha */
    animation: scrollMarquee 50s linear infinite; /* Velocidad de lectura */
    font-family: 'Orbitron', sans-serif; 
    font-size: 16px;
    font-weight: bold;
    color: var(--accent); /* Color elegido por el usuario */
    text-shadow: 1px 1px 3px #000; /* Sombra negra para resaltar */
    /* Aseguramos que el texto esté centrado verticalmente en los 32px */
    line-height: 32px; 
}

@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* --- RECUPERAR FONDO REPETIDO (Línea 100 corregida) --- */
body::before {
    content: "" !important;
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1 !important;
    background-repeat: repeat !important;
    background-size: 133px !important; /* El tamaño que tú querías */
    opacity: 0.12 !important;
    pointer-events: none !important;
}

body.theme-gray::before { 
    background-image: url('../images/theme_gray.webp') !important; 
    opacity: 0.08 !important; /* Un poco más sutil para el gris */
}

/* --- ASIGNAR IMAGEN POR CLASE --- */
body.theme-violet::before { background-image: url('../images/theme_violet.webp') !important; }
body.theme-blue::before { background-image: url('../images/theme_blue.webp') !important; }
body.theme-pink::before { background-image: url('../images/theme_pink.webp') !important; }
body.theme-gold::before { background-image: url('../images/theme_gold.webp') !important; }

/* 1. Forzamos el contenedor para que no deje ver nada fuera de sus bordes */
#localVideoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    height: 100%; /* O la altura que tengas definida */
}

/* 2. ESTA ES LA CLAVE: Forzamos la imagen para que llene el cuadro */
#localImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Esto elimina las franjas de la foto rosa/azul/gris */
    position: absolute;
    top: 0;
    left: 0;
}

/* 3. Aseguramos que el vídeo también haga lo mismo cuando se encienda */
#localVideo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Esto elimina las franjas del vídeo */
}

:root { 
    --accent: #cccccc; 
    --bg: #0a0a0a; 
    --gap: 16px; 
    --out-margin: 16px; 
    --premium: #ffcc00;
}

* { 
    scrollbar-color: var(--accent) #050505; 
    scrollbar-width: thin; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

html, body { 
    margin: 0 !important; 
    padding: 0 !important; 
    width: 100%; 
    min-height: 100vh; 
}

body { 
    background-color: var(--bg); 
    color: white; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    overflow-x: hidden; 
    font-family: 'Segoe UI', Arial, sans-serif; 
    position: relative; 
    transition: background-color 0.4s ease, color 0.4s ease; 
    top: 0px !important; 
}

/* --- FIX: OCULTAR CAMPOS DE CREDENCIALES FANTASMA --- */
.hidden-credential-input {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --- MEJORA DE ACCESIBILIDAD --- */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* COLORES POR DEFECTO (MODO NOCHE) */
:root {
    --text-chat: #d1d1d1; /* Gris neón para leer bien en oscuro */
    --bg-chat: #000000;   /* Fondo negro */
}

/* AJUSTES PARA EL MODO DÍA */
body.light-mode {
    --text-chat: #1a1a1a; /* Texto casi negro para leer bien en claro */
    --bg-chat: #ffffff;   /* Fondo blanco */
}

/* Aplicamos los cambios al contenedor del chat */
#messages {
    background-color: var(--bg-chat);
    color: var(--text-chat);
    transition: background-color 0.3s, color 0.3s; /* Para que el cambio sea suave */
}

/* --- ESTILOS DEL MODO DÍA (LIGHT MODE) --- */
body.light-mode { --bg: #f4f4f9; color: #111; }
body.light-mode::before { filter: invert(1); opacity: 0.05; }
body.light-mode .top-bar, 
body.light-mode .profile-dropdown-content, 
body.light-mode .chat-box, 
body.light-mode .news-section, 
body.light-mode .faq-section, 
body.light-mode .vip-content-pro, 
body.light-mode .partner-card-inner, 
body.light-mode .profile-edit-grid, 
body.light-mode .custom-options, 
body.light-mode .custom-select-container, 
body.light-mode .plan-table { 
    background: rgba(255, 255, 255, 0.95); 
    border-color: #ccc; 
    color: #111; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); 
}

body.light-mode .subscription-plans-section { background-color: var(--accent); color: #111; }
body.light-mode .header-link, 
body.light-mode .gray-input-pro { 
    background: #ffffff; 
    border: 1px solid #ccc; 
    color: #111; 
    text-shadow: none; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

body.light-mode .header-logo-text, 
body.light-mode .modal-title, 
body.light-mode .prof-name-text, 
body.light-mode .partner-name-text, 
body.light-mode .gestures-text { 
    color: #111; 
    text-shadow: none; 
}

body.light-mode .status-msg, 
body.light-mode .modal-label, 
body.light-mode .prof-status-label, 
body.light-mode .prof-match-val { 
    color: #333; 
    text-shadow: none; 
}

body.light-mode .chat-status-text { 
    background: rgba(255, 255, 255, 0.7); 
    border-color: #ddd; 
    color: #555; 
}

body.light-mode .btn-neon-gray { 
    color: #111; 
    border-color: var(--accent); 
    text-shadow: none; 
    box-shadow: none; 
}

body.light-mode .btn-neon-gray:visited { color: #111; }
body.light-mode .btn-neon-gray:hover { background: var(--accent); color: #fff; }
body.light-mode .chat-input-wrapper { background: #f0f0f0; border-top-color: #ccc; }
body.light-mode .chat-input-text { color: #111; border-color: #aaa; }
body.light-mode .plan-table td, 
body.light-mode .plan-table th { border-color: #eee; color: #111; }
body.light-mode .side-col-banner, 
body.light-mode .b-728, 
body.light-mode .b-250, 
body.light-mode .b-square { background: #fff; border-color: #ddd; }
body.light-mode .cam-box-pro { background: #f9f9f9; border-color: var(--accent); }
body.light-mode .news-card, 
body.light-mode .faq-item { background: #fff; border-color: #ddd; }
body.light-mode .faq-answer { color: inherit; }
body.light-mode .video-box { background: #e0e0e0; border-color: #ccc; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
body.light-mode .inactive-tab { color: #777; }
body.light-mode .active-tab { color: #111; border-bottom-color: #111; }
body.light-mode .video-ad-overlay { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
body.light-mode .profile-dropdown-content a { color: #111; border-bottom-color: #ddd; }
body.light-mode footer { background: rgba(240, 240, 240, 0.85); border-top-color: #ccc; }
body.light-mode footer .f-links a { color: #333; font-weight: bold; }
body.light-mode footer .f-links a:hover { color: var(--accent); }
body.light-mode footer .copyright { color: #555; }
body.light-mode .footer-divider { background: rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

body.light-mode #headerCreditsDisplay { color: #886600 !important; border-color: #aa8800 !important; background: rgba(255, 204, 0, 0.1); }
body.light-mode #emojiPickerModal, body.light-mode #tipsPickerModal { background: #fff !important; border-color: #ccc !important; }
body.light-mode .dmca-textarea { background: #fff; color: #111; border-color: #ccc; }

/* --- HEADER TIPO ISLA --- */
.top-bar { 
    position: relative; 
    width: 100%; 
    max-width: 1400px; 
    height: 75px; 
    box-sizing: border-box; 
    margin: 20px auto var(--gap) auto; 
    display: flex; 
    align-items: center; 
    padding: 0px 20px 0px 0px; 
    border-radius: 22px; 
    background: rgba(15, 15, 15, 0.98); 
    border: 1px solid rgba(204, 204, 204, 0.4); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    z-index: 3000; 
    transition: background-color 0.4s ease, border-color 0.4s ease; 
    transform: translateZ(0); 
}

.header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; position: relative; }
.header-left { display: flex; align-items: center; height: 100%; z-index: 2; }
.udl-btn { height: 100%; width: 110px; border: none; padding: 0; border-radius: 22px 0 0 22px; background: transparent; display: block; overflow: hidden; transition: opacity 0.3s; }
.udl-btn:hover { background: transparent; opacity: 0.8; }
.udl-btn img { width: 100%; height: 100%; object-fit: cover; }

.header-logo-text { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 10; 
    font-family: 'Orbitron', sans-serif; 
    font-size: 1.8rem; 
    font-weight: bold; 
    color: var(--accent); 
    text-shadow: 0 0 15px var(--accent); 
    letter-spacing: 2px; 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: color 0.4s ease, text-shadow 0.4s ease; 
}

.header-right { display: flex; align-items: center; gap: 15px; height: 100%; z-index: 2; }

#headerCreditsDisplay {
    background: rgba(255, 204, 0, 0.1);
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}
#headerCreditsDisplay:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
}

/* --- MENÚ DESPLEGABLE --- */
.profile-dropdown-wrapper { position: relative; height: 100%; display: flex; align-items: center; }
.profile-drop-btn { margin-left: 0; margin-right: 15px; }
.profile-dropdown-content { 
    visibility: hidden; 
    opacity: 0; 
    transform: translateY(10px); 
    position: absolute; 
    right: 15px; 
    top: 100%; 
    margin-top: 0px; 
    background: rgba(15, 15, 15, 0.98); 
    min-width: 180px; 
    box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.8); 
    z-index: 4000; 
    border: 1px solid var(--accent); 
    border-radius: 12px; 
    overflow: hidden; 
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; 
    transform: translateZ(0); 
}
.profile-dropdown-content::before { content: ""; position: absolute; top: -15px; left: 0; right: 0; height: 15px; background: transparent; }
.profile-dropdown-wrapper:hover .profile-dropdown-content { visibility: visible; opacity: 1; transform: translateY(0); }
.profile-dropdown-content a { color: white; padding: 15px 20px; text-decoration: none; display: block; font-family: 'Orbitron', sans-serif; font-size: 13px; text-align: center; border-bottom: 1px solid #333; transition: background-color 0.3s, color 0.3s; font-weight: bold; }
.profile-dropdown-content a:last-child { border-bottom: none; }
.profile-dropdown-content a:hover { background-color: var(--accent); color: #000; }
.profile-dropdown-content a.logout-link { color: #ff3333; }
.profile-dropdown-content a.logout-link:hover { background-color: #ff3333; color: #fff; text-shadow: none; }

/* --- BOTÓN NEÓN --- */
.btn-neon-gray { 
    background-color: transparent; 
    color: var(--accent); 
    border: 2px solid var(--accent); 
    padding: 10px 20px; 
    border-radius: 8px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    cursor: pointer; 
    margin-left: 15px; 
    font-family: 'Orbitron', sans-serif; 
    text-shadow: 0 0 5px var(--accent); 
    box-shadow: 0 0 5px var(--accent), inset 0 0 5px var(--accent); 
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, text-shadow 0.3s; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    box-sizing: border-box; 
}

#callTimerContainer {
    /* Esto lo saca de abajo y lo pone en el sitio del título */
    position: relative !important; 
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    
    display: none; /* Se activa por JS */
    width: fit-content !important; 
    margin: 5px auto 15px auto !important; /* Centrado horizontal */
    padding: 4px 12px;
    text-align: center;
    color: #ffcc00;
    font-family: 'Orbitron', sans-serif;
    background: rgba(255, 204, 0, 0.1);
    border-radius: 8px;
    font-size: 15px;
}

/* --- VERSIÓN DEFINITIVA Y FIJA --- CONTROLES CENTRALES DEL VIDEO REMOTO --- */
.center-overlay-controls { 
    position: absolute; 
    bottom: 25px; /* Lo subimos un poco más para que esté bien separado */
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    /* Una separación cómoda de 20px */
    gap: 20px; 
    z-index: 101; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0.3s ease; 
    pointer-events: none; 
}

/* Permitir clics en los botones *dentro* del contenedor */
.center-overlay-controls * { 
    pointer-events: auto; 
}

/* Mostrar controles al pasar el ratón por la caja de video */
.video-box:hover .center-overlay-controls { 
    opacity: 1; 
    visibility: visible; 
}

/* ===========================================================
   AJUSTES ESPECÍFICOS PARA ESTOS BOTONES PARA EVITAR MOVIMIENTOS 
   ===========================================================
*/

.center-overlay-controls .focus-btn { 
    /* 1. Anulamos la posición y transformaciones antiguas (IMPORTANTE) */
    position: relative !important; /* !important asegura que mande sobre la regla original de .focus-btn */
    bottom: auto !important;
    left: auto !important;
    /* Esto anula el 'translateX(-50%)' original que causaba el movimiento lateral al pulsar */
    transform: none !important; 
    
    /* 2. Definimos tamaño fijo y cómodo (50px) */
    width: 50px !important; 
    height: 50px !important; 
    font-size: 20px !important; 
    border-radius: 50% !important; /* Redondos */
    
    /* 3. Limpiamos las transiciones para que no haya retrasos extraños */
    transition: transform 0.1s ease-out, background 0.2s ease !important;
}

/* EFECTO HOVER: Muy suave y centrado, sin moverse hacia arriba */
.center-overlay-controls .focus-btn:hover { 
    /* Solo un ligero crecimiento (1.08) sin moverse verticalmente */
    transform: scale(1.08) !important; 
    background: rgba(255, 255, 255, 0.4) !important;
}

/* EFECTO ACTIVE (Al pulsar): Un ligero hundimiento para feedback visual */
.center-overlay-controls .focus-btn:active { 
    /* Se hace un poco más pequeño para simular que lo hundes */
    transform: scale(0.95) !important; 
    background: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================
   RAYA ROJA PARA BOTONES APAGADOS (CÁMARA Y MICRO LOCAL)
   ========================================================== */

/* Aseguramos que el botón pueda contener la línea encima */
.local-controls .control-btn {
    position: relative;
    overflow: hidden;
}

/* Cuando el botón recibe la clase 'disabled' desde JavaScript */
.local-controls .control-btn.disabled {
    opacity: 0.7; /* Se oscurece un poco para indicar que está inactivo */
    border-color: #ff3333 !important; /* El borde se vuelve rojo */
}

/* Dibuja la famosa raya roja diagonal encima del icono */
.local-controls .control-btn.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    width: 70%;
    height: 3px;
    background-color: #ff3333;
    transform: translateY(-50%) rotate(-45deg); /* Inclinación de la raya */
    transform-origin: center;
    z-index: 10;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.8); /* Sombra para que resalte bien */
}

.video-overlay-shield {
    pointer-events: none; /* Esto hace que el ratón ignore esta capa */
}

.delete-rec-btn:hover { color: #ff3333 !important; transform: scale(1.2); transition: 0.2s; }

.btn-neon-gray:visited { color: var(--accent); }
.btn-neon-gray:hover { background-color: var(--accent); color: #111; box-shadow: 0 0 15px var(--accent), inset 0 0 10px rgba(255,255,255,0.3); text-shadow: none; }

/* 1. Estilos del desplegable principal */
.menu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #111;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,255,204,0.2);
    border: 1px solid #00ffcc;
    border-radius: 5px;
    z-index: 1000;
}

/* Mostrar el menú principal al pasar el ratón */
.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}

/* Estilos de los enlaces del menú principal */
.menu-dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
}

.menu-dropdown-content a:hover {
    background-color: #222;
    color: #00ffcc;
}

/* =========================================
   2. ESTILOS DEL SUB-MENÚ (HACIA ABAJO)
   ========================================= */

.sub-dropdown {
    display: block;
}

.sub-dropdown-content {
    display: none;
    /* MAGIA: Al no tener 'position: absolute', empuja hacia abajo los siguientes enlaces */
    position: static; 
    /* Fondo ligeramente más oscuro para que parezca que está "hundido" */
    background-color: #0a0a0a; 
    border-top: 1px dashed #333;
    border-bottom: 1px dashed #333;
}

/* Mostrar el sub-menú al pasar el ratón */
.sub-dropdown:hover .sub-dropdown-content {
    display: block;
}

/* Estilos específicos para los sub-enlaces (más pequeños y desplazados) */
.sub-dropdown-content a {
    padding-left: 30px; /* Sangría a la izquierda para que se note la jerarquía */
    font-size: 12px; /* Letra un pelín más pequeña */
    color: #aaa; /* Un gris claro para que destaque menos que los principales */
}

.sub-dropdown-content a:hover {
    color: #00ffcc;
    background-color: #1a1a1a;
}

/* La flechita indicadora (▶) */
.sub-menu-trigger span {
    float: right;
    font-size: 10px;
    margin-top: 4px;
    transition: transform 0.3s ease; /* Suaviza el movimiento */
}

/* Animación: Girar la flechita hacia abajo (▼) cuando se abre el menú */
.sub-dropdown:hover .sub-menu-trigger span {
    transform: rotate(90deg);
}

/* --- TRADUCTOR --- */
.translate-area { margin-top: 0; margin-bottom: var(--gap); z-index: 2500; position: relative; width: 100%; display: flex; justify-content: center; }
.custom-select-container { min-width: 220px; background: rgba(15,15,15,0.9); border: 1px solid var(--accent); border-radius: 30px; cursor: pointer; padding: 8px 20px; text-align: center; font-size: 13px; font-weight: bold; color: #ccc; font-family: 'Orbitron'; text-transform: uppercase; transition: background-color 0.4s, border-color 0.4s; }
.custom-options { display: none; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); width: 250px; background: #111; border: 1px solid var(--accent); border-radius: 15px; overflow: hidden; overflow-y: auto; max-height: 280px; z-index: 2600; scrollbar-color: var(--accent) #111; scrollbar-width: thin; }
.custom-options div { padding: 12px; cursor: pointer; border-bottom: 1px solid #222; text-align: center; font-size: 12px; text-transform: uppercase; }
.custom-options div:hover { background: var(--accent); color: #111; font-weight: bold; }

/* --- BLOQUEO DEFINITIVO UI GOOGLE TRANSLATE --- */
body > .skiptranslate, #goog-gt-tt, .goog-te-banner-frame, .goog-te-balloon-frame, .goog-te-spinner-pos, .goog-te-spinner-animation, .goog-te-spinner-wrapper, .VIpgJd-Zvi9od-ORHb-OEVmcd, .VIpgJd-Zvi9od-aZ2wEe-wOHMyf, .VIpgJd-y66S6c-uOfS-L97Fe, [class*="goog-te-spinner"], iframe.goog-te-banner-frame { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; position: absolute !important; top: -10000px !important; pointer-events: none !important; }

/* Eliminar el subrayado amarillo y la caja blanca al pasar el ratón */
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }

/* style.css - Selector de temas sin efecto ovalado */
.theme-floater { 
    position: fixed; 
    bottom: 25px; 
    left: 25px; 
    z-index: 10000; 
    display: flex; 
    flex-direction: row; 
    gap: 10px; 
    align-items: center; 
    
    /* El contenedor debe ser invisible y sin forma */
    width: 50px !important; 
    height: 50px !important;
    background: transparent !important; /* Sin fondo para evitar el óvalo */
    border: none !important;           /* Sin borde en el contenedor */
    overflow: visible !important; 
}

.theme-floater:hover {
    width: auto !important; /* Crece para mostrar los colores, pero sigue siendo transparente */
}

/* El círculo solo lo definen los botones individuales */
.theme-btn { 
    width: 45px; 
    height: 45px; 
    background-color: #000;
    border-radius: 50% !important; /* Círculo perfecto */
    border: 2px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s, border-color 0.3s;
}

.theme-colors { 
    display: flex; 
    flex-direction: row; 
    gap: 10px; 
    visibility: hidden; 
    opacity: 0; 
    transform: translateX(-10px); 
    transition: opacity 0.3s ease, transform 0.3s ease; 
}

.theme-floater:hover .theme-colors { 
    visibility: visible; 
    opacity: 1; 
    transform: translateX(0); 
}

.theme-btn, .theme-main {
    cursor: pointer !important;   /* La manita */
    font-size: 20px !important;   /* El dibujo más grande */
    flex-shrink: 0 !important;    /* Que no se aplaste */
    border-radius: 50% !important;
}

.theme-btn:hover { transform: scale(1.1); border-color: #fff; }
.theme-main { border-color: var(--accent); background: #000; }
.c-gray { background: #cccccc; } .c-purple { background: #b829ff; } .c-blue { background: #00e5ff; } .c-pink { background: #ff007f; }

/* --- DISEÑO PRINCIPAL EN TRES COLUMNAS --- */
.page-layout { display: flex; justify-content: center; align-items: flex-start; width: 100%; max-width: 100%; margin: 0 auto 0 auto; position: relative; z-index: 10; box-sizing: border-box; }
.center-column { display: flex; flex-direction: column; gap: 0; flex-grow: 1; max-width: 1400px; min-width: 0; }
.side-col-stack { width: 90px; min-width: 90px; display: flex; flex-direction: column; gap: var(--gap); margin: 0 var(--out-margin); flex-shrink: 0; }
.side-col-banner { width: 90px; height: 728px; position: relative; background: #000; border: 1px solid #333; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 15px; flex-shrink: 0; transition: background-color 0.4s, border-color 0.4s; }

.app-container { display: flex; gap: var(--gap); width: 100%; height: calc(100vh - 120px); min-height: 600px; margin-bottom: var(--gap); }

/* --- FIX: BANNERS Y ESTIRADO DE IMAGENES --- */
.banner-wrapper { width: 100%; margin: 0 auto var(--gap) auto; display: flex; gap: var(--gap); justify-content: center; position: relative; z-index: 10; }
.b-728, .b-250, .b-square { margin: 0; position: relative; background: #000; border: 1px solid #333; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 15px; transition: background-color 0.4s, border-color 0.4s; flex-shrink: 0; }
.b-728 { width: 728px; height: 90px; } .b-250 { width: 250px; height: 90px; } .b-square { width: 320px; height: 320px; }

.ad-slot img, .ad-overlay-img { 
    width: 100%; 
    height: 100%; 
    display: block; 
}

.ad-img-fill { object-fit: cover !important; }
.ad-img-contain { object-fit: contain !important; }
.ad-img-cover { object-fit: cover; }
.ad-overlay-link { display: block; width: 100%; height: 100%; text-decoration: none; }
.ad-overlay-bg { background: rgba(0,0,0,0.8); }

/* --- CAJAS DE VIDEO Y CHAT --- */
.video-stack { width: 480px; display: flex; flex-direction: column; gap: var(--gap); position: relative; }
.video-box { width: 100%; flex: 1; background: #050505; border: 2px solid rgba(204, 204, 204, 0.4); border-radius: 25px; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(204, 204, 204, 0.1); transition: border-color 0.4s ease, box-shadow 0.4s ease; transform: translateZ(0); z-index: 5; }
.video-box:hover { border-color: rgba(204, 204, 204, 0.8); box-shadow: 0 0 25px rgba(204, 204, 204, 0.2), inset 0 0 15px rgba(204, 204, 204, 0.2); }
video { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.local-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.2; z-index: 4; transition: opacity 0.5s; background: #000; }
.waiting-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 10; display: flex; align-items: center; justify-content: center; }
.ad-remote-text { position: relative; z-index: 11; background: rgba(15, 15, 15, 0.9); padding: 15px 25px; border: 1px solid var(--accent); border-radius: 12px; font-weight: bold; text-align: center; font-family: 'Orbitron'; font-size: 16px; color: white; max-width: 80%; box-shadow: 0 0 20px rgba(204, 204, 204, 0.3); }
.video-ad-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 15; width: 100%; height: 100%; max-width: none; background: transparent; display: flex; justify-content: center; align-items: center; border-radius: 25px; overflow: hidden; pointer-events: none; transition: opacity 0.3s; }
.video-ad-overlay * { pointer-events: auto; }
.video-ad-overlay:empty { display: none; }

.local-controls, .focus-btn, .premium-call-controls { 
    position: absolute; 
    z-index: 100; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0.3s ease; 
}

.video-box:hover .local-controls, 
.video-box:hover .focus-btn, 
.video-box:hover .premium-call-controls { 
    opacity: 1; 
    visibility: visible; 
}

.local-controls { bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; }
.focus-btn { bottom: 15px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(15, 15, 15, 0.9); border: 1px solid rgba(204, 204, 204, 0.6); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 0 15px rgba(0,0,0,0.5); }
.focus-btn:hover { transform: translateX(-50%) scale(1.1); color: #000; background: rgba(204, 204, 204, 0.4); }

.control-btn { background: rgba(15, 15, 15, 0.9); border: 1px solid rgba(204, 204, 204, 0.6); color: white; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 0 15px rgba(0,0,0,0.5); transition: transform 0.3s; }
.control-btn:hover { transform: scale(1.1); color: #000; background: rgba(204, 204, 204, 0.4); }

.focus-active { width: 950px !important; }
.focus-active .video-box:nth-child(1) { height: 100%; flex: none; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; }
.focus-active .video-box:nth-child(2) { width: 260px; height: 195px; flex: none; position: absolute; bottom: 25px; right: 25px; z-index: 20; box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 20px rgba(204, 204, 204, 0.5); border: 3px solid var(--accent); border-radius: 20px; }

/* --- CHAT BOX --- */
.chat-box { flex-grow: 1; background: rgba(15, 15, 15, 0.95); border: 1px solid rgba(204, 204, 204, 0.3); border-radius: 25px; display: flex; flex-direction: column; overflow: hidden; transition: background-color 0.4s, border-color 0.4s; transform: translateZ(0); }
#messages { flex-grow: 1; overflow-y: auto; padding: 20px; font-size: 15px; }
#messages div { margin-bottom: 8px; line-height: 1.4; }
.status-msg { color: var(--accent); font-weight: bold; text-align: center; margin: 15px 0; text-transform: uppercase; font-family: 'Orbitron'; font-size: 13px; letter-spacing: 1px;}
.chat-status-text { text-align: center; font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: bold; color: var(--accent); letter-spacing: 2px; padding: 8px; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(204,204,204,0.1); border-bottom: 1px solid rgba(204,204,204,0.1); transition: background-color 0.4s, border-color 0.4s, color 0.4s; text-transform: uppercase; }
.chat-input-wrapper { display:flex; padding:15px; background:rgba(0,0,0,0.4); border-top: 1px solid rgba(204, 204, 204, 0.4); align-items:center; gap:10px; transition: background-color 0.4s, border-color 0.4s; }

.chat-partner-img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--accent); cursor: pointer; object-fit: cover; }
.chat-input-text { flex:1; background:transparent; border:1px solid var(--accent); color:white; padding:12px; border-radius:12px; outline:none; font-size:14px; transition: border-color 0.4s;}
.btn-next { width: 100%; padding: 25px; background: var(--accent); border: none; color: #000; font-weight: bold; font-size: 24px; cursor: pointer; font-family: 'Orbitron'; transition: background-color 0.3s, opacity 0.3s; letter-spacing: 2px;}
.btn-next:hover { opacity: 0.8; }

/* --- TABLAS DE PRECIOS --- */
.subscription-plans-section { padding: 50px 20px; margin: 0 0 var(--gap) 0; text-align: center; background-color: var(--accent); color: #111; position: relative; z-index: 10; font-family: 'Segoe UI', Arial, sans-serif; border-radius: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.plans-header h2 { font-size: 1.8rem; margin-top: 0; margin-bottom: 30px; font-family: 'Orbitron', sans-serif; font-weight: bold; }
.pricing-switch-wrapper span { transition: color 0.4s, font-weight 0.4s; }
.plans-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1200px; margin: 0 auto; }
.plan-table { background-color: #111; border-collapse: collapse; width: 300px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.8); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; transition: background-color 0.4s, border-color 0.4s, color 0.4s; }
.plan-table th, .plan-table td { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; font-size: 14px; }
.plan-table td:nth-child(2) { text-align: right; font-weight: bold; color: var(--accent); }
.plan-title { text-align: center !important; font-size: 1.5rem; text-transform: uppercase; font-family: 'Orbitron', sans-serif; color: #111; }
.plan-title.vip { background-color: #a0a0a0; } .plan-title.premium { background-color: #dddddd; color: #111;} .plan-title.mip { background-color: #ff007a; color: #fff; }
.pricing-subtitle { margin-top: 30px; margin-bottom: 0; font-size: 1.2rem; font-family: 'Orbitron', sans-serif; color: #111; letter-spacing: 1px; font-weight: bold; }

/* --- FAQ SECTION --- */
.faq-section { width: 100%; margin: 0 0 var(--gap) 0; padding: 40px; background: rgba(15, 15, 15, 0.95); border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 25px; position: relative; z-index: 10; box-sizing: border-box; transform: translateZ(0); }
.faq-container { display: flex; flex-direction: column; gap: 20px; }
.faq-item { 
    background: rgba(10, 10, 10, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 15px; 
    padding: 25px; 
    transition: border-color 0.3s, transform 0.3s; 
    text-align: center; /* <-- Cambiado de left a center */
    will-change: transform; 
}
.faq-item:hover { border-color: var(--accent); transform: translateX(5px); }
.faq-question { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: bold; color: var(--accent); margin-bottom: 10px; }
.faq-answer { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; color: #ccc; line-height: 1.6; }
.faq-link { color: var(--accent); font-weight: bold; text-decoration: none; transition: text-shadow 0.3s; }
.faq-link:hover { text-shadow: 0 0 8px var(--accent); text-decoration: underline; }

/* --- FILTROS DE FAQ --- */
.faq-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 10px;
}

.faq-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #333;
    color: #ccc;
    padding: 8px 18px;
    border-radius: 20px; 
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.faq-filter-btn:hover {
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

.faq-filter-btn.active-filter {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: bold;
    box-shadow: 0 0 15px var(--accent);
}

/* --- NOTICIAS --- */
.news-section { width: 100%; margin: 0 0 var(--gap) 0; padding: 40px; background: rgba(15, 15, 15, 0.95); border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 25px; position: relative; z-index: 10; box-sizing: border-box; transform: translateZ(0); }
.news-header { text-align: center; font-family: 'Orbitron', sans-serif; color: var(--accent); font-size: 1.8rem; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px var(--accent); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }

.news-card { 
    background: rgba(10, 10, 10, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 15px; 
    padding: 25px; 
    transition: transform 0.3s ease, border-color 0.3s ease; 
    text-align: center; /* <-- Cambiado de left a center */
    will-change: transform; 
}
.news-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.news-date { font-size: 11px; color: #a0a0a0; font-family: 'Orbitron', sans-serif; margin-bottom: 12px; letter-spacing: 1px; }
.news-title { font-size: 16px; font-weight: bold; color: var(--accent); margin-bottom: 15px; font-family: 'Orbitron', sans-serif; line-height: 1.3; }
.news-excerpt { font-size: 14px; color: inherit; line-height: 1.6; font-family: 'Segoe UI', Arial, sans-serif; }

/* --- ESTADOS DE VALIDACIÓN Y OTROS --- */
.validating-state { opacity: 0.7; pointer-events: none; filter: grayscale(50%); transition: all 0.3s; }
.spinner-loader { border: 4px solid rgba(255,255,255,0.1); border-left-color: var(--accent); border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; margin-right: 8px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#btnReportUser { transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s; }
#btnReportUser:hover { transform: scale(1.1); background-color: #ff3333 !important; border-color: #ff3333 !important; color: white !important; box-shadow: 0 0 15px #ff3333 !important; }
#userIPDisplay { font-weight: bold; color: var(--accent); letter-spacing: 1px; }

/* --- CENTRADO DE BOTONES CARGAR MÁS --- */
.load-more-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

/* --- FOOTER Y GLASSMORPHISM --- */
footer {
    width: 100%;
    background: rgba(10, 10, 10, 0.85); 
    backdrop-filter: blur(10px); 
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 20px 20px 20px;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

.f-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.f-links a {
    color: #aaaaaa; 
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none; 
    letter-spacing: 1px;
    transition: color 0.3s, text-shadow 0.3s;
}

.f-links a:hover {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
}

.footer-divider {
    width: 150px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15); 
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    margin: 0 auto 20px auto;
}

.copyright {
    color: #666666;
    font-size: 12px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* --- ADAPTACIÓN PARA TABLETS Y LAPTOPS (Fuera del bloque de móvil) --- */
@media (max-width: 1250px) { 
    .side-col-stack { display: none !important; } 
}

@media (max-width: 950px) { 
    .news-grid { grid-template-columns: repeat(2, 1fr) !important; } 
}

/* ==========================================================================
   ADAPTACIÓN MÓVIL (RESPONSIVE DESIGN DEFINITIVO)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. Muro de contención global para que no se mueva hacia los lados */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
    }

    /* 2. Ocultar lo que no cabe o molesta en móvil */
    .popup-side-banner,
    .side-col-stack,
    #ai-container,
    #ai-bubble {
        display: none !important;
    }

    /* 3. ADAPTAR CÁMARAS Y CHAT (Poner uno encima del otro) */
    .app-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        padding: 10px;
    }
    .video-stack {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* 4. Adaptar el Header superior */
    .top-bar { flex-direction: column !important; height: auto !important; padding: 15px !important; gap: 15px !important; }
    .header-logo-text { position: relative !important; left: 0 !important; transform: none !important; }
    .header-right { flex-wrap: wrap !important; justify-content: center !important; margin-top: 10px !important; }

    /* 5. Encoger los modales y cajas de verificación */
    .vip-content-pro,
    .ventana-movible-content,
    .post-creator,
    .modal-bloqueante-wrapper > div,
    div[style*="width: 728px"],
    div[style*="max-width: 1200px"] {
        width: 95% !important; 
        max-width: 400px !important;
        height: auto !important;
        min-width: 0 !important;
    }

    /* 6. Encoger los banners de publicidad (El problema de los 728px) */
    .b-728, .ad-slot {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 15px auto !important;
    }

    /* Obligar a los iframes de los anuncios a no romper la pantalla */
    .b-728 iframe, .b-728 ins, .ad-slot iframe {
        max-width: 100% !important;
        transform: scale(0.9) !important; 
        transform-origin: center center !important;
    }

    /* 7. Asegurar que los botones con textos largos no deformen las cajas */
    .vip-content-pro *,
    .ventana-movible-content * {
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
    }

/* 8. ARREGLO INTERACTIVO: Modal de Selección (#guestQueueModal) */

    /* 1. Fondo: Aseguramos que el contenedor no bloquee los clics */
    #guestQueueModal.modal-bloqueante-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.92) !important;
        z-index: 99999999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 40px 0 80px 0 !important; 
        box-sizing: border-box !important;
        /* IMPORTANTE: Permite que los clics pasen al contenido */
        pointer-events: auto !important; 
    }

    /* 2. Limpieza de contenedores intermedios */
    #guestQueueModal .popup-outer-grid,
    #guestQueueModal .popup-center-col,
    #guestQueueModal div[style*="max-width: 1200px"],
    #guestQueueModal div[style*="width: 728px"] {
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    /* 3. LA CAJA NEGRA: Capa superior */
    #guestQueueModal .vip-content-pro.standard-modal-box,
    #guestQueueModal .alert-box-inner {
        position: relative !important;
        z-index: 10 !important; /* Por encima de los banners */
        min-width: 0 !important; 
        width: 90vw !important; 
        max-width: 340px !important; 
        background: #111111 !important;
        border: 2px solid var(--accent) !important;
        border-radius: 20px !important;
        padding: 25px 15px !important; 
        margin: 15px auto !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
    }

    /* 4. BANNERS: Capa inferior para no estorbar */
    #guestQueueModal .b-728 {
        position: relative !important;
        z-index: 1 !important; /* Por debajo de la caja negra */
        width: 90vw !important;
        max-width: 340px !important;
        height: auto !important;
        aspect-ratio: 728 / 90 !important;
        margin: 0 auto !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* 5. BOTONES: Máxima prioridad de clic */
    #guestQueueModal .guest-room-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        pointer-events: auto !important;
    }
    
    #guestQueueModal .btn-submit-login,
    #guestQueueModal .guest-room-buttons a,
    #guestQueueModal select,
    #guestQueueModal button {
        position: relative !important;
        z-index: 20 !important; /* Los ponemos en el "techo" del modal */
        width: 100% !important; 
        max-width: 280px !important;
        margin: 5px auto !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        /* Forzamos que el cursor sea un puntero y reciba eventos */
        cursor: pointer !important;
        pointer-events: auto !important; 
    }

    /* 6. Ocultar los laterales */
    #guestQueueModal .popup-side-banner {
        display: none !important;
    }
    
/* ==========================================================================
   8. ARREGLO FINAL: Modal Ajustado + Cierre Permitido
   ========================================================================== */

/* 1. EL FONDO: Solo se ve si NO tiene "display: none" en el código interno */
#guestQueueModal.modal-bloqueante-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 2147483647 !important;
    overflow-y: auto !important;
    padding: 40px 0 100px 0 !important;
    box-sizing: border-box !important;
}

/* LA LLAVE MAESTRA: Si el JS dice "display: none", el CSS obedece sí o sí */
#guestQueueModal[style*="display: none"],
#guestQueueModal[style*="display:none"],
#guestQueueModal[style*="none"] {
    display: none !important;
}

/* 2. LA CAJA NEGRA: Tamaño estrecho (320px) que te funcionó */
#guestQueueModal .vip-content-pro {
    display: block !important;
    width: 90% !important;
    max-width: 320px !important; 
    background: #111111 !important;
    border: 2px solid var(--accent) !important;
    border-radius: 20px !important;
    padding: 25px 15px !important;
    margin: 15px auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 100 !important;
}

/* 3. BOTONES: Unificados y con colores neón reales */
#guestQueueModal .guest-room-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
}

#guestQueueModal .btn-submit-login,
#guestQueueModal .guest-room-buttons a,
#guestQueueModal button {
    display: flex !important;
    width: 100% !important;
    max-width: 280px !important;
    height: 50px !important;
    margin: 5px auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: bold !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

/* --- COLORES PARA EVITAR EL VERDE/VIOLETA --- */

/* Login (Gris) */
#modalLoginBtn { border-color: #ccc !important; color: #ccc !important; }

/* Straight (AZUL NEÓN REAL) - Forzamos el color para que no sea verde */
#guestQueueModal a[onclick*="straight"] { 
    border-color: #00e5ff !important; 
    color: #00e5ff !important; 
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3) !important;
}

/* Gay (Púrpura) */
#guestQueueModal a[onclick*="gay"] { border-color: #b829ff !important; color: #b829ff !important; }

/* Lesbians (Rosa) */
#guestQueueModal a[onclick*="lesbians"] { border-color: #ff007f !important; color: #ff007f !important; }

/* 4. BANNERS: Ajustados al ancho del modal */
#guestQueueModal .b-728 {
    display: block !important;
    width: 90% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 728 / 90 !important;
    margin: 10px auto !important;
}

/* 5. LIMPIEZA DE ESTRUCTURA INTERNA */
#guestQueueModal .popup-outer-grid,
#guestQueueModal .popup-center-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#guestQueueModal .popup-side-banner { display: none !important; }

/* ==========================================================================
   FUSIÓN TOTAL CHAT (BLOQUE 10): Ancho Uniforme y Cantones Cerrados
   ========================================================================= */

/* A. Limpieza total de contenedores para evitar anchos distintos */
.chat-box {
    display: flex !important;
    flex-direction: column !important;
    height: 65vh !important;
    background: transparent !important;
    border: none !important;
    margin: 20px auto 0 auto !important; /* 0 abajo */
    width: 96% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-bottom: 0 !important; /* VITAL: Que no haya espacio después del input */
}

/* B. Reordenamiento */
.btn-next { order: 1 !important; }
#messages { order: 2 !important; flex-grow: 1 !important; }
#statusText { order: 3 !important; }
.chat-input-wrapper { order: 4 !important; 
margin-bottom: 0 !important;
}

/* C. Estandarización de Anchos y Bordes Laterales para todos los hijos */
.btn-next, #messages, #statusText, .chat-input-wrapper {
    width: 100% !important; /* Todos ocupan el mismo ancho del padre (.chat-box) */
    box-sizing: border-box !important; /* Clave para que el padding y borde no ensanchen */
    margin: 0 !important;
    position: relative !important;
}

/* D. El BOTÓN (Cúpula Superior): Flexible y con su color */
.btn-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important; 
    min-height: 55px !important; 
    padding: 12px 20px !important;
    
    background: var(--accent) !important;
    color: #000 !important;
    
    /* Forma: Redondo arriba, plano abajo */
    border-radius: 20px 20px 0 0 !important;
    border: 2px solid var(--accent) !important;
    border-bottom: none !important;
    
    font-family: 'Orbitron', sans-serif !important;
    font-weight: bold !important;
    font-size: 16px !important;
    z-index: 10 !important;
}

/* E. HISTORIAL Y STATUS (Marco lateral continuo y alineado) */
#messages, #statusText {
    background: #000 !important;
    /* Usamos el mismo grosor y color de borde que el input para alinear */
    border-left: 2px solid var(--accent) !important;
    border-right: 2px solid var(--accent) !important;
    border-top: none !important;
    border-bottom: none !important;
}

#messages { padding: 15px !important; }
#statusText { 
    padding: 10px !important; 
    font-size: 12px !important; 
    color: var(--accent) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important; /* Separación sutil */
}

/* F. CAJA DE ENTRADA (Cierre de la Cápsula): ¡ARREGLO DE CANTONES! */
.chat-input-wrapper {
    order: 4 !important; /* Lo mantenemos como lo último abajo */
    display: flex !important;
    align-items: center !important;
    background: #000 !important;
    
    /* ELIMINAR EL HUECO: Forzamos margen 0 abajo */
    margin-bottom: 0 !important; 
    margin-top: 0 !important;

    /* REPARAR BORDES: Debe coincidir con el radio de .chat-box */
    border: 2px solid var(--accent) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important; /* Separación sutil arriba */
    border-radius: 0 0 25px 25px !important; /* Redondeado solo abajo */
    
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Para que nada de adentro "coma" el borde */
}

/* G. Ajustes de iconos internos para que no empujen los bordes */
#msgInput {
    flex: 1 !important;
    min-width: 0 !important;
    background: transparent !important;
    color: white !important;
    border: none !important;
    font-size: 14px !important;
}

/* ==========================================================================
   11. RECONSTRUCCIÓN CÁMARAS: ALTURA FORZADA Y ORDEN CORRECTO
   ========================================================================== */

/* 1. Contenedor principal: debe permitir que el contenido crezca hacia abajo */
.app-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Permite que la página se alargue */
    min-height: 100vh !important;
    gap: 15px !important;
}

/* 2. El stack de vídeos: quitamos cualquier restricción de altura */
.video-stack {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important; 
    gap: 15px !important;
}

/* 3. LAS CAJAS DE VÍDEO: Aquí forzamos la altura vertical (420px) */
.video-box {
    width: 100% !important;
    /* IMPORTANTE: Usamos min-height para que el contenedor NO colapse */
    height: 420px !important; 
    min-height: 420px !important; 
    
    position: relative !important; /* Necesario para que el contenido absoluto se vea */
    display: block !important;
    overflow: hidden !important;
    background: #000 !important;
    
    /* Borde neón limpio */
    border: 2px solid var(--accent) !important;
    border-radius: 25px !important;
    box-shadow: none !important; /* Eliminamos sombras que crean rayas raras */
}

/* 4. EL ORDEN: Local (Tú) arriba, Remote (Host/Anuncio) abajo */
#localVideoContainer { 
    order: 1 !important; 
}
#remoteVideoContainer { 
    order: 2 !important; 
}

/* 5. RELLENO TOTAL: Estiramos las fotos y vídeos para que no haya márgenes */
#localVideo, 
#remoteVideo, 
#localImg, 
.ad-remote-img,
.waiting-overlay {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Esto elimina las franjas negras laterales */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    background: #000 !important;
}

/* Limpieza de artefactos en los cantones */
.video-box::before, .video-box::after {
    content: none !important;
    display: none !important;
}

/* 6. AJUSTE DE BANNERS RESPONSIVE */
    
    /* Eliminamos el banner pequeño de 250x90 que estorba en móvil */
    .b-250 {
        display: none !important;
    }

    /* El banner de 728 lo hacemos totalmente adaptable */
    .b-728 {
        width: 92% !important;      /* Ocupa casi todo el ancho pero con margen */
        max-width: 728px !important; 
        height: auto !important;     /* Altura automática */
        aspect-ratio: 728 / 90 !important; /* MANTIENE LA FORMA DE BANNER SIEMPRE */
        margin: 0px auto !important;
        background: #000 !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    /* Aseguramos que la imagen o el iframe dentro del banner no se salga */
    .b-728 img, 
    .b-728 iframe, 
    .b-728 ins {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important; /* No estira la imagen, la ajusta */
        transform: none !important;     /* Quitamos el scale(0.9) anterior */
    }

    /* Contenedor de banners: los ponemos uno debajo de otro */
.banner-wrapper {
    /* Aquí definimos el espacio exacto. 25px arriba y 25px abajo */
    margin: 25px auto !important; 
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important; /* Espacio entre banners si hay varios juntos */
}

    .faq-section {
        margin-bottom: 0px !important; /* Ajustamos el espacio tras las FAQ */
    }

    /* REPARACIÓN DE NOTICIAS */
    .news-grid {
        grid-template-columns: 1fr !important; /* Una noticia por fila */
        gap: 15px !important;
        width: 100% !important;
    }

    .news-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Limitamos a mostrar solo las primeras 4 noticias en móvil por defecto */
    /* Nota: Esto funcionará siempre que no se haya pulsado "Ver más" */
    .news-card:nth-child(n+5) {
        display: none !important;
    }

    /* 4. REESTRUCTURACIÓN DEL HEADER */
    .top-bar { 
        height: auto !important; 
        padding: 15px 0 !important; 
    }

    .header-content { 
        flex-direction: column !important; 
        gap: 15px !important; 
        align-items: center !important;
        justify-content: center !important;
    }

    .header-left, .header-right { 
        width: 100% !important;
        justify-content: center !important; 
        height: auto !important;
    }

    .header-logo-text { 
        position: static !important; /* Quitamos el centrado absoluto para que ocupe su lugar en la lista */
        transform: none !important; 
        margin: 10px 0 !important;
        font-size: 1.5rem !important;
    }

    .header-right {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

} /* <--- ¡ESTA LLAVE ES SAGRADA! Cierra el media query y salva tu diseño de PC */